feat: mermaid.js 対応

lerna.json

@@ -2,7 +2,7 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.1.82-alpha.2",
+  "version": "0.1.82",
   "npmClient": "yarn",
   "useWorkspaces": true
 }

packages/example/articles/embed.md

@@ -23,3 +23,191 @@ https://gist.github.com/mattpodwysocki/218388
 @[gist](https://gist.github.com/hofmannsven/9164408?file=my.cnf)
 
 ssfafafaffafa
+
+
+## mermaid.js
+
+```mermaid
+%%{init: { 'theme': 'forest' } }%%
+graph LR;
+    A-->B & C-->D & E-->F & Z-->X;
+    F-->G
+    G-->H
+    H-->I
+    I-->J
+    J-->K
+    K-->L
+    L-->M
+    M-->N
+    N-->O
+    O-->P
+    P-->ID1[ノード1<br>ノード2]
+```
+
+### flowchart
+
+```mermaid
+flowchart TB
+    c1-->a2
+    subgraph one
+    a1-->a2
+    end
+    subgraph two
+    b1-->b2
+    end
+    subgraph three
+    c1-->c2
+    end
+    one --> two
+    three --> two
+    two --> c2
+```
+
+### sequence diagram
+
+```mermaid
+sequenceDiagram
+    autonumber
+    アリス->>光輝: Hello John, how are you?
+    loop Healthcheck
+        光輝->>光輝: Fight against hypochondria
+    end
+    Note right of 光輝: Rational thoughts!
+    光輝-->>アリス: Great!
+    光輝->>Bob: How about you?
+    Bob-->>光輝: Jolly good!
+```
+
+### class diagram
+
+```mermaid
+ classDiagram
+      Animal <|-- Duck
+      Animal <|-- Fish
+      Animal <|-- Zebra
+      Animal : +int age
+      Animal : +String gender
+      Animal: +isMammal()
+      Animal: +mate()
+      class Duck{
+          +String beakColor
+          +swim()
+          +quack()
+      }
+      class Fish{
+          -int sizeInFeet
+          -canEat()
+      }
+      class Zebra{
+          +bool is_wild
+          +run()
+      }
+```
+
+
+### state diagram
+
+```mermaid
+stateDiagram-v2
+    [*] --> Active
+
+    state Active {
+        [*] --> NumLockOff
+        NumLockOff --> NumLockOn : EvNumLockPressed
+        NumLockOn --> NumLockOff : EvNumLockPressed
+        --
+        [*] --> CapsLockOff
+        CapsLockOff --> CapsLockOn : EvCapsLockPressed
+        CapsLockOn --> CapsLockOff : EvCapsLockPressed
+        --
+        [*] --> ScrollLockOff
+        ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
+        ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
+
+    }
+```
+
+
+
+```mermaid
+graph LR
+A:::someclass  B
+classDef someclass fill:#f96;
+classDef someclass fill:#f96;
+classDef someclass fill:#f96;
+classDef someclass fill:#f96;
+classDef someclass fill:#f96;
+classDef someclass fill:#f96;
+classDef someclass fill:#f96;
+classDef someclass fill:#f96;
+classDef someclass fill:#f96;
+classDef someclass fill:#f96;
+classDef someclass fill:#f96;
+classDef someclass fill:#f96;
+classDef someclass fill:#f96;
+classDef someclass fill:#f96;
+classDef someclass fill:#f96;
+classDef someclass fill:#f96;
+classDef someclass fill:#f96;
+classDef someclass fill:#f96;
+classDef someclass fill:#f96;
+classDef someclass fill:#f96;
+classDef someclass fill:#f96;
+classDef someclass fill:#f96;
+classDef someclass fill:#f96;
+classDef someclass fill:#f96;
+classDef someclass fill:#f96;
+classDef someclass fill:#f96;
+    A-->B & C-->D & E-->F & Z-->X;
+    A-->B & C-->D & E-->F & Z-->X;
+    A-->B & C-->D & E-->F & Z-->X;
+    A-->B & C-->D & E-->F & Z-->X;
+    A-->B & C-->D & E-->F & Z-->X;
+    A-->B & C-->D & E-->F & Z-->X;
+    A-->B & C-->D & E-->F & Z-->X;
+    A-->B & C-->D & E-->F & Z-->X;
+    A-->B & C-->D & E-->F & Z-->X;
+    A-->B & C-->D & E-->F & Z-->X;
+    A-->B & C-->D & E-->F & Z-->X;
+    A-->B & C-->D & E-->F & Z-->X;
+    A-->B & C-->D & E-->F & Z-->X;
+    A-->B & C-->D & E-->F & Z-->X;
+    A-->B & C-->D & E-->F & Z-->X;
+    A-->B & C-->D & E-->F & Z-->X;
+    A-->B & C-->D & E-->F & Z-->X;
+    A-->B & C-->D & E-->F & Z-->X;
+    A-->B & C-->D & E-->F & Z-->X;
+    A-->B & C-->D & E-->F & Z-->X;
+    A-->B & C-->D & E-->F & Z-->X;
+    A-->B & C-->D & E-->F & Z-->X;
+    A-->B & C-->D & E-->F & Z-->X;
+    A-->B & C-->D & E-->F & Z-->X;
+    A-->B & C-->D & E-->F & Z-->X;
+    A-->B & C-->D & E-->F & Z-->X;
+    A-->B & C-->D & E-->F & Z-->X;
+    A-->B & C-->D & E-->F & Z-->X;
+    A-->B & C-->D & E-->F & Z-->X;
+    A-->B & C-->D & E-->F & Z-->X;
+    A-->B & C-->D & E-->F & Z-->X;
+    A-->B & C-->D & E-->F & Z-->X;
+    A-->B & C-->D & E-->F & Z-->X;
+    A-->B & C-->D & E-->F & Z-->X;
+    A-->B & C-->D & E-->F & Z-->X;
+```
+
+
+```mermaid
+graph LR;
+    A["<img src=invalid onerror=alert('XSS')></img>"] --> B;
+    alert`md5_salt`-->B;
+    click alert`md5_salt` eval "Tooltip for a callback"
+    click B "javascript:alert('XSS')" "This is a tooltip for a link"
+```
+
+```mermaid
+graph LR;
+    alert`md5_salt`-->B;
+    click alert`md5_salt` eval "Tooltip for a callback"
+    click B "javascript:alert('XSS')" "This is a tooltip for a link"
+    link Zebra "http://www.github.com" "This is a link"
+```

packages/example/package.json

@@ -1,8 +1,8 @@
 {
   "private": true,
   "name": "example",
-  "version": "0.1.82-alpha.2",
+  "version": "0.1.82",
   "dependencies": {
-    "zenn-cli": "^0.1.82-alpha.2"
+    "zenn-cli": "^0.1.82"
   }
 }

packages/zenn-cli/package.json

@@ -1,7 +1,7 @@
 {
   "name": "zenn-cli",
   "license": "MIT",
-  "version": "0.1.82-alpha.2",
+  "version": "0.1.82",
   "description": "Preview Zenn content locally.",
   "repository": {
     "type": "git",
@@ -49,9 +49,9 @@
     "socket.io": "^3.1.0",
     "socket.io-client": "^3.1.0",
     "update-notifier": "^5.1.0",
-    "zenn-content-css": "^0.1.82-alpha.2",
-    "zenn-embed-elements": "^0.1.82-alpha.2",
-    "zenn-markdown-html": "^0.1.82-alpha.2"
+    "zenn-content-css": "^0.1.82",
+    "zenn-embed-elements": "^0.1.82",
+    "zenn-markdown-html": "^0.1.82"
   },
   "devDependencies": {
     "@testing-library/react": "^11.2.1",

packages/zenn-content-css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zenn-content-css",
-  "version": "0.1.82-alpha.2",
+  "version": "0.1.82",
   "license": "MIT",
   "description": "Zenn flavor content style.",
   "repository": {

packages/zenn-embed-elements/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zenn-embed-elements",
-  "version": "0.1.82-alpha.2",
+  "version": "0.1.82",
   "description": "Web components for embedded contents.",
   "repository": {
     "type": "git",