Merge branch 'develop' into fix-node16-module-resolution

README.md

@@ -226,6 +226,44 @@ pie
 
 ### Git graph [experimental - <a href="https://mermaid.live/edit#pako:eNqNkMFugzAMhl8F-VyVAR1tOW_aA-zKxSSGRCMJCk6lCvHuNZPKZdM0n-zf3_8r8QIqaIIGMqnB8kfEybQ--y4VnLP8-9RF9Mpkmm40hmlnDKmvkPiH_kfS7nFo_VN0FAf6XwocQGgxa_nGsm1bYEOOWmik1dRjGrmF1q-Cpkkj07u2HCI0PY4zHQATh8-7V9BwTPSE3iwOEd1OjQE1iWkBvk_bzQY7s0Sq4Hs7bHqKo8iGeZqbPN_WR7mpSd1RHpvPVhuMbG7XOq_L-oJlRfW5wteq0qorrpe-PBW9Pr8UJcK6rg-BLYPQ">live editor</a>]
 
+### Bar chart (using gantt chart) [<a href="https://mermaid-js.github.io/mermaid/#/gantt">docs</a> - <a href="https://mermaid.live/edit#pako:eNptkU1vhCAQhv8KIenNugiI4rkf6bmXpvEyFVxJFDYyNt1u9r8X63Z7WQ9m5pknLzieaBeMpQ3dg0dsPUkPOhwteXZIXmJcbCT3xMAxkuh8Z8kIEclyMIB209fqKcwTICFvG4IvFy_oLrZ-g9F26ILfQgvNFN94VaRXQ1iWqpumZBcu1J8p1E1TXDx59eQNr5LyEqjJn6hv5QnGNlxevZJmdLLpy5xJSzut45biYCfb0iaVxvawjNjS1p-TCguG16PvaIPzYjO67e3BwX6GiTY9jPFKH43DMF_hGMDY1J4oHg-_f8hFTJFd8L3br3yZx4QHxENsdrt1nO8dDstH3oVpF50ZYMbhU6ud4qoGLqyqBJRCmO6j0HXPZdGbihUc6Pmc0QP49xD-b5X69ZQv2gjO81IwzWqhC1lKrjJ6pA3nVS7SMiVjrKirWlYp5fs3osgrWeo00lorLWvOzz8JVbXm">live editor</a>]
+
+```
+gantt
+    title Git Issues - days since last update
+    dateFormat  X
+    axisFormat %s
+
+    section Issue19062
+    71   : 0, 71
+    section Issue19401
+    36   : 0, 36
+    section Issue193
+    34   : 0, 34
+    section Issue7441
+    9    : 0, 9
+    section Issue1300
+    5    : 0, 5
+```
+
+```mermaid
+gantt
+    title Git Issues - days since last update
+    dateFormat  X
+    axisFormat %s
+
+    section Issue19062
+    71   : 0, 71
+    section Issue19401
+    36   : 0, 36
+    section Issue193
+    34   : 0, 34
+    section Issue7441
+    9    : 0, 9
+    section Issue1300
+    5    : 0, 5
+```
+
 ### User Journey diagram [<a href="https://mermaid-js.github.io/mermaid/#/user-journey">docs</a> - <a href="https://mermaid.live/edit#pako:eNplkMFuwjAQRH9l5TMiTVIC-FqqnjhxzWWJN4khsSN7XRSh_HsdKBVt97R6Mzsj-yoqq0hIAXCywRkaSwNxWHNHsB_hYt1ZmwYUfiueKtbWwIcFtjf5zgH2eCZgQgkrCXt64GgMg2fUzkvIn5Xd_V5COtMFvCH_62ht_5yk7MU8sn61HDTfxD8VYiF6cj1qFd94nWkpuKWYKWRcFdUYOi5FaaZoDYNCpnel2Toha-w8LQQGtofRVEKyC_Qw7TQ2DvsfV2dRUTy6Ch6H-UMb7TlGVtbUupl5cF3ELfPgZZLM8rLR3IbjsrJ94rVq0XH7uS2SIis2mOVUrHNc5bmqjul2U2evaa3WL2mGYpqmL2BGiho">live editor</a>]
 
 ```

cSpell.json

@@ -47,6 +47,7 @@
     "graphviz",
     "grav",
     "greywolf",
+    "huynh",
     "inkdrop",
     "jaoude",
     "jison",
@@ -90,6 +91,7 @@
     "sidharthv",
     "sphinxcontrib",
     "statediagram",
+    "steph",
     "stylis",
     "substate",
     "sveidqvist",

cypress/integration/rendering/flowchart-elk.spec.js

@@ -684,4 +684,149 @@ A --> B
       { titleTopMargin: 0 }
     );
   });
+  describe('Markdown strings flowchart-elk (#4220)', () => {
+    describe('html labels', () => {
+      it('With styling and classes', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart-elk LR
+    A:::someclass --> B["\`The **cat** in the hat\`"]:::someclass
+    id1(Start)-->id2(Stop)
+    style id1 fill:#f9f,stroke:#333,stroke-width:4px
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+    classDef someclass fill:#f96
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('With formatting in a node', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart-elk LR
+  a{"\`The **cat** in the hat\`"} -- 1o --> b
+  a -- 2o --> c
+  a -- 3o --> d
+  g --2i--> a
+  d --1i--> a
+  h --3i -->a
+  b --> d(The dog in the hog)
+  c --> d
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('New line in node and formatted edge label', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart-elk LR
+b("\`The dog in **the** hog.(1)
+NL\`") --"\`1o **bold**\`"--> c
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('Wrapping long text with a new line', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart-elk LR
+b(\`The dog in **the** hog.(1).. a a a a *very long text* about it
+Word!
+
+Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`) --> c
+
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('Sub graphs and markdown strings', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart-elk LR
+subgraph "One"
+  a("\`The **cat**
+  in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
+end
+subgraph "\`**Two**\`"
+  c("\`The **cat**
+  in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
+end
+
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+    });
+
+    describe('svg text labels', () => {
+      it('With styling and classes', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart-elk LR
+    A:::someclass --> B["\`The **cat** in the hat\`"]:::someclass
+    id1(Start)-->id2(Stop)
+    style id1 fill:#f9f,stroke:#333,stroke-width:4px
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+    classDef someclass fill:#f96
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('With formatting in a node', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart-elk LR
+  a{"\`The **cat** in the hat\`"} -- 1o --> b
+  a -- 2o --> c
+  a -- 3o --> d
+  g --2i--> a
+  d --1i--> a
+  h --3i -->a
+  b --> d(The dog in the hog)
+  c --> d
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('New line in node and formatted edge label', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart-elk LR
+b("\`The dog in **the** hog.(1)
+NL\`") --"\`1o **bold**\`"--> c
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('Wrapping long text with a new line', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart-elk LR
+b("\`The dog in **the** hog.(1).. a a a a *very long text* about it
+Word!
+
+Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c
+
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('Sub graphs and markdown strings', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart-elk LR
+subgraph "One"
+  a("\`The **cat**
+  in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
+end
+subgraph "\`**Two**\`"
+  c("\`The **cat**
+  in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
+end
+
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+    });
+  });
 });

cypress/integration/rendering/flowchart-v2.spec.js

@@ -685,4 +685,159 @@ A ~~~ B
       { titleTopMargin: 0 }
     );
   });
+  it('4023: Should render html labels with images and-or text correctly', () => {
+    imgSnapshotTest(
+      `flowchart TD
+    B[<img src='https://mermaid.js.org/mermaid-logo.svg'>]
+    B-->C[<img src="https://mermaid.js.org/mermaid-logo.svg"> more text <img src='https://mermaid.js.org/mermaid-logo.svg'>]
+    B-->D(<img src='https://mermaid.js.org/mermaid-logo.svg'> some text)
+    B-->E(plain)`,
+      {}
+    );
+  });
+  describe('Markdown strings flowchart (#4220)', () => {
+    describe('html labels', () => {
+      it('With styling and classes', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart LR
+    A:::someclass --> B["\`The **cat** in the hat\`"]:::someclass
+    id1(Start)-->id2(Stop)
+    style id1 fill:#f9f,stroke:#333,stroke-width:4px
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+    classDef someclass fill:#f96
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('With formatting in a node', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart LR
+  a{"\`The **cat** in the hat\`"} -- 1o --> b
+  a -- 2o --> c
+  a -- 3o --> d
+  g --2i--> a
+  d --1i--> a
+  h --3i -->a
+  b --> d(The dog in the hog)
+  c --> d
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('New line in node and formatted edge label', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart LR
+b("\`The dog in **the** hog.(1)
+NL\`") --"\`1o **bold**\`"--> c
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('Wrapping long text with a new line', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart LR
+b("\`The dog in **the** hog.(1).. a a a a *very long text* about it
+Word!
+
+Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c
+
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('Sub graphs and markdown strings', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart LR
+subgraph "One"
+  a("\`The **cat**
+  in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
+end
+subgraph "\`**Two**\`"
+  c("\`The **cat**
+  in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
+end
+
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+    });
+
+    describe('svg text labels', () => {
+      it('With styling and classes', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart LR
+    A:::someclass --> B["\`The **cat** in the hat\`"]:::someclass
+    id1(Start)-->id2(Stop)
+    style id1 fill:#f9f,stroke:#333,stroke-width:4px
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+    classDef someclass fill:#f96
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('With formatting in a node', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart LR
+  a{"\`The **cat** in the hat\`"} -- 1o --> b
+  a -- 2o --> c
+  a -- 3o --> d
+  g --2i--> a
+  d --1i--> a
+  h --3i -->a
+  b --> d(The dog in the hog)
+  c --> d
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('New line in node and formatted edge label', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart LR
+b("\`The dog in **the** hog.(1)
+NL\`") --"\`1o **bold**\`"--> c
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('Wrapping long text with a new line', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart LR
+b("\`The dog in **the** hog.(1).. a a a a *very long text* about it
+Word!
+
+Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c
+
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('Sub graphs and markdown strings', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart LR
+subgraph "One"
+  a("\`The **cat**
+  in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
+end
+subgraph "\`**Two**\`"
+  c("\`The **cat**
+  in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
+end
+
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+    });
+  });
 });

cypress/integration/rendering/mindmap.spec.ts

@@ -223,5 +223,18 @@ mindmap
       shouldHaveRoot
     );
   });
+  describe('Markdown strings mindmaps (#4220)', () => {
+    it('Formatted label with linebreak and a wrapping label and emojis', () => {
+      imgSnapshotTest(
+        `mindmap
+    id1[\`**Start** with
+    a second line 😎\`]
+      id2[\`The dog in **the** hog... a *very long text* about it
+Word!\`]
+`,
+        { titleTopMargin: 0 }
+      );
+    });
+  });
   /* The end */
 });

cypress/platform/knsv2.html

@@ -29,9 +29,9 @@
       }
       .mermaid svg {
         /* font-size: 18px !important; */
-        background-color: #eee;
+        background-color: #efefef;
-        background-image: radial-gradient(#fff 1%, transparent 11%),
+        background-image: radial-gradient(#fff 51%, transparent 91%),
-          radial-gradient(#fff 1%, transparent 11%);
+          radial-gradient(#fff 51%, transparent 91%);
         background-size: 20px 20px;
         background-position: 0 0, 10px 10px;
         background-repeat: repeat;
@@ -51,29 +51,103 @@
         font-family: monospace;
         font-size: 72px;
       }
+      /* tspan {
+        font-size: 6px !important;
+      } */
     </style>
   </head>
   <body>
     <pre id="diagram" class="mermaid">
-%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
+stateDiagram-v2
-graph BT
+    [*] --> Still
-a{The cat in the hat} -- 1o --> b
+    Still --> [*]
-a -- 2o --> c
+    Still --> Moving
-a -- 3o --> d
+    Moving --> Still
-g --2i--> a
+    Moving --> Crash
-d --1i--> a
+    Crash --> [*]    </pre
-h --3i -->a
+    >
-b --> d(The dog in the hog)
+    <pre id="diagram" class="mermaid2">
-c --> d
+flowchart RL
+    subgraph "`one`"
+      a1 -- l1 --> a2
+      a1 -- l2 --> a2
+    end
+    </pre>
+    <pre id="diagram" class="mermaid">
+flowchart RL
+    subgraph "`one`"
+      a1 -- l1 --> a2
+      a1 -- l2 --> a2
+    end
     </pre>
     <pre id="diagram" class="mermaid2">
-flowchart-elk TB
+flowchart
-      a --> b
+id["`A root with a long text that wraps to keep the node size in check. A root with a long text that wraps to keep the node size in check`"]</pre
-      a --> c
+    >
-      b --> d
+    <pre id="diagram" class="mermaid2">
-      c --> d
+flowchart LR
+    A[A text that needs to be wrapped wraps to another line]
+    B[A text that needs to be<br/>wrapped wraps to another line]
+    C["`A text that needs to be wrapped to another line`"]</pre>
+    <pre id="diagram" class="mermaid2">
+flowchart LR
+    C["`A text
+        that needs
+        to be wrapped
+        in another
+        way`"]
+  </pre
+    >
+    <pre id="diagram" class="mermaid">
+      classDiagram-v2
+        note "I love this diagram!\nDo you love it?"
+    </pre>
+    <pre id="diagram" class="mermaid">
+    stateDiagram-v2
+    State1: The state with a note with minus - and plus + in it
+    note left of State1
+      Important information! You can write
+      notes with . and  in them.
+    end note    </pre
+    >
+    <pre id="diagram" class="mermaid2">
+mindmap
+root
+  Child3(A node with an icon and with a long text that wraps to keep the node size in check)
+</pre
+    >
+    <pre id="diagram" class="mermaid2">
+      %%{init: {"theme": "forest"} }%%
+mindmap
+    id1[**Start2**<br/>end]
+      id2[**Start2**<br />end]
+      %% Another comment
+      id3[**Start2**<br>end] %% Comment
+      id4[**Start2**<br >end<br    >the very end]
     </pre>
     <pre id="diagram" class="mermaid2">
+mindmap
+    id1["`**Start2**
+    second line 😎 with long text that is wrapping to the next line`"]
+      id2["`Child **with bold** text`"]
+      id3["`Children of which some
+      is using *italic type of* text`"]
+      id4[Child]
+      id5["`Child
+      Row
+      and another
+      `"]
+    </pre>
+    <pre id="diagram" class="mermaid2">
+mindmap
+    id1("`**Root**`"]
+      id2["`A formatted text... with **bold** and *italics*`"]
+      id3[Regular labels works as usual]
+      id4["`Emojis and unicode works too: 🤓
+      शान्तिः سلام  和平 `"]
+
+    </pre>
+    <pre id="diagram" class="mermaid">
 %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
 flowchart TB
   %% I could not figure out how to use double quotes in labels in Mermaid
@@ -89,7 +163,7 @@ flowchart TB
     rom --> core2
   end
 
-  subgraph amd[AMD Latte GPU]
+  subgraph amd["`**AMD** Latte GPU`"]
     mem[Memory & I/O Bridge]
     dram[DRAM Controller]
     edram[32 MB EDRAM MEM1]
@@ -128,6 +202,62 @@ flowchart TB
   rtc{{rtc}}
 </pre
     >
+    <pre id="diagram" class="mermaid2">
+%%{init: {"flowchart": {"defaultRenderer": "elk", "htmlLabels": false}} }%%
+flowchart TB
+  %% I could not figure out how to use double quotes in labels in Mermaid
+  subgraph ibm[IBM Espresso CPU]
+    core0[IBM PowerPC Broadway Core 0]
+    core1[IBM PowerPC Broadway Core 1]
+    core2[IBM PowerPC Broadway Core 2]
+
+    rom[16 KB ROM]
+
+    core0 --- core2
+
+    rom --> core2
+  end
+
+  subgraph amd["`**AMD** Latte GPU`"]
+    mem[Memory & I/O Bridge]
+    dram[DRAM Controller]
+    edram[32 MB EDRAM MEM1]
+    rom[512 B SEEPROM]
+
+    sata[SATA IF]
+    exi[EXI]
+
+    subgraph gx[GX]
+      sram[3 MB 1T-SRAM]
+    end
+
+    radeon[AMD Radeon R7xx GX2]
+
+    mem --- gx
+    mem --- radeon
+
+    rom --- mem
+
+    mem --- sata
+    mem --- exi
+
+    dram --- sata
+    dram --- exi
+  end
+
+  ddr3[2 GB DDR3 RAM MEM2]
+
+  mem --- ddr3
+  dram --- ddr3
+  edram --- ddr3
+
+  core1 --- mem
+
+  exi --- rtc
+  rtc{{rtc}}
+</pre
+    >
+
     <br />
     <pre id="diagram" class="mermaid2">
 flowchart TB
@@ -270,14 +400,16 @@ mindmap
         // console.error('Mermaid error: ', err);
       };
       mermaid.initialize({
-        theme: 'forest',
+        // theme: 'forest',
         startOnLoad: true,
-        logLevel: 5,
+        logLevel: 0,
         flowchart: {
           // defaultRenderer: 'elk',
           useMaxWidth: false,
+          // htmlLabels: false,
           htmlLabels: true,
         },
+        // htmlLabels: false,
         gantt: {
           useMaxWidth: false,
         },

docs/config/setup/interfaces/mermaidAPI.ParseOptions.md

@@ -16,4 +16,4 @@
 
 #### Defined in
 
-[mermaidAPI.ts:70](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L70)
+[mermaidAPI.ts:77](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L77)

docs/config/setup/interfaces/mermaidAPI.RenderResult.md

@@ -39,7 +39,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.
 
 #### Defined in
 
-[mermaidAPI.ts:91](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L91)
+[mermaidAPI.ts:98](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L98)
 
 ---
 
@@ -51,4 +51,4 @@ The svg code for the rendered graph.
 
 #### Defined in
 
-[mermaidAPI.ts:81](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L81)
+[mermaidAPI.ts:88](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L88)

docs/config/setup/modules/defaultConfig.md

@@ -14,7 +14,7 @@
 
 #### Defined in
 
-[defaultConfig.ts:2103](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2103)
+[defaultConfig.ts:2115](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2115)
 
 ---
 

docs/config/setup/modules/mermaidAPI.md

@@ -25,7 +25,7 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)
 
 #### Defined in
 
-[mermaidAPI.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L75)
+[mermaidAPI.ts:82](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L82)
 
 ## Variables
 
@@ -96,7 +96,7 @@ mermaid.initialize(config);
 
 #### Defined in
 
-[mermaidAPI.ts:660](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L660)
+[mermaidAPI.ts:673](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L673)
 
 ## Functions
 
@@ -127,7 +127,7 @@ Return the last node appended
 
 #### Defined in
 
-[mermaidAPI.ts:305](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L305)
+[mermaidAPI.ts:312](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L312)
 
 ---
 
@@ -153,7 +153,7 @@ the cleaned up svgCode
 
 #### Defined in
 
-[mermaidAPI.ts:256](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L256)
+[mermaidAPI.ts:263](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L263)
 
 ---
 
@@ -179,7 +179,7 @@ the string with all the user styles
 
 #### Defined in
 
-[mermaidAPI.ts:185](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L185)
+[mermaidAPI.ts:192](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L192)
 
 ---
 
@@ -202,7 +202,7 @@ the string with all the user styles
 
 #### Defined in
 
-[mermaidAPI.ts:233](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L233)
+[mermaidAPI.ts:240](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L240)
 
 ---
 
@@ -229,7 +229,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:169](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L169)
+[mermaidAPI.ts:176](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L176)
 
 ---
 
@@ -249,7 +249,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:149](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L149)
+[mermaidAPI.ts:156](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L156)
 
 ---
 
@@ -269,7 +269,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:120](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L120)
+[mermaidAPI.ts:127](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L127)
 
 ---
 
@@ -295,7 +295,7 @@ Put the svgCode into an iFrame. Return the iFrame code
 
 #### Defined in
 
-[mermaidAPI.ts:284](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L284)
+[mermaidAPI.ts:291](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L291)
 
 ---
 
@@ -320,4 +320,4 @@ Remove any existing elements from the given document
 
 #### Defined in
 
-[mermaidAPI.ts:355](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L355)
+[mermaidAPI.ts:362](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L362)

docs/ecosystem/integrations.md

@@ -23,6 +23,7 @@ They also serve as proof of concept, for the variety of things that can be built
 - [Mermaid Flow Visual Editor](https://www.mermaidflow.app) (**Native support**)
 - [Deepdwn](https://billiam.itch.io/deepdwn) (**Native support**)
 - [Joplin](https://joplinapp.org) (**Native support**)
+- [Slab](https://slab.com) (**Native support**)
 - [Swimm](https://swimm.io) (**Native support**)
 - [Notion](https://notion.so) (**Native support**)
 - [Observable](https://observablehq.com/@observablehq/mermaid) (**Native support**)

docs/intro/index.md

@@ -263,7 +263,7 @@ To Deploy Mermaid:
 
 ### [Mermaid API](../config/setup/README.md):
 
-**To deploy mermaid without a bundler, one can insert a `script` tag with an absolute address and a `mermaid.initialize` call into the HTML like so:**
+**To deploy mermaid without a bundler, insert a `script` tag with an absolute address and a `mermaid.initialize` call into the HTML using the following example:**
 
 ```html
 <script type="module">
@@ -272,9 +272,9 @@ To Deploy Mermaid:
 </script>
 ```
 
-**Doing so will command the mermaid parser to look for the `<div>` or `<pre>` tags with `class="mermaid"`. From these tags mermaid will try to read the diagram/chart definitions and render them into SVG charts.**
+**Doing so commands the mermaid parser to look for the `<div>` or `<pre>` tags with `class="mermaid"`. From these tags, mermaid tries read the diagram/chart definitions and render them into SVG charts.**
 
-**Examples can be found at** [Other examples](../syntax/examples.md)
+**Examples can be found in** [Other examples](../syntax/examples.md)
 
 ## Sibling projects
 

docs/news/announcements.md

@@ -0,0 +1,13 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/news/announcements.md](../../packages/mermaid/src/docs/news/announcements.md).
+
+# Announcements
+
+## [Automatic text wrapping in flowcharts is here!](https://www.mermaidchart.com/blog/posts/automatic-text-wrapping-in-flowcharts-is-here)
+
+3 April 2023 · 3 mins
+
+Markdown Strings reduce the hassle # Starting from v10.

docs/news/blog.md

@@ -0,0 +1,31 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/news/blog.md](../../packages/mermaid/src/docs/news/blog.md).
+
+# Blog
+
+## [Mermaid Chart officially launched with sharable diagram links and presentation mode](https://www.mermaidchart.com/blog/posts/mermaid-chart-officially-launched-with-sharable-diagram-links-and-presentation-mode/)
+
+27 March 2023 · 2 mins
+
+Exciting news for all Mermaid OSS fans: Mermaid Chart has officially launched with Mermaid Chart!
+
+## [If you're not excited about ChatGPT, then you're not being creative](https://www.mermaidchart.com/blog/posts/if-youre-not-excited-about-chatgpt-then-youre-not-being-creative-enough/)
+
+8 March 2023 · 9 mins
+
+The hype around AI in general and ChatGPT, in particular, is so intense that it’s very understandable to assume the hype train is driving straight toward the trough of disillusionment.
+
+## [Flow charts are O(n)2 complex, so don't go over 100 connections](https://www.mermaidchart.com/blog/posts/flow-charts-are-on2-complex-so-dont-go-over-100-connections/)
+
+1 March 2023 · 12 mins
+
+Flowchart design is a game of balance: Read about the importance of dialling in the right level of detail and how to manage complexity in large flowcharts.
+
+## [Busting the myth that developers can't write](https://www.mermaidchart.com/blog/posts/busting-the-myth-that-developers-cant-write/)
+
+10 February 2023 · 10 mins
+
+Busting the myth that developers can’t write # It’s an annoying stereotype that developers don’t know how to write, speak, and otherwise communicate.

docs/syntax/flowchart.md

@@ -710,6 +710,44 @@ flowchart LR
   B1 --> B2
 ```
 
+## Markdown Strings
+
+The "Markdown Strings" feature enhances flowcharts and mind maps by offering a more versatile string type, which supports text formatting options such as bold and italics, and automatically wraps text within labels.
+
+```mermaid-example
+%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart LR
+subgraph "One"
+  a("`The **cat**
+  in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}}
+end
+subgraph "`**Two**`"
+  c("`The **cat**
+  in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog")
+end
+```
+
+```mermaid
+%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart LR
+subgraph "One"
+  a("`The **cat**
+  in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}}
+end
+subgraph "`**Two**`"
+  c("`The **cat**
+  in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog")
+end
+```
+
+Formatting:
+
+- For bold text, use double asterisks \*\* before and after the text.
+- For italics, use single asterisks \* before and after the text.
+- With traditional strings, you needed to add <br> tags for text to wrap in nodes. However, markdown strings automatically wrap text when it becomes too long and allows you to start a new line by simply using a newline character instead of a <br> tag.
+
+This feature is applicable to node labels, edge labels, and subgraph labels.
+
 ## Interaction
 
 It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.

docs/syntax/gantt.md

@@ -464,3 +464,41 @@ Beginner's tip—a full example using interactive links in an html context:
   </script>
 </body>
 ```
+
+## Examples
+
+### Bar chart (using gantt chart)
+
+```mermaid-example
+gantt
+    title Git Issues - days since last update
+    dateFormat X
+    axisFormat %s
+    section Issue19062
+    71   : 0, 71
+    section Issue19401
+    36   : 0, 36
+    section Issue193
+    34   : 0, 34
+    section Issue7441
+    9    : 0, 9
+    section Issue1300
+    5    : 0, 5
+```
+
+```mermaid
+gantt
+    title Git Issues - days since last update
+    dateFormat X
+    axisFormat %s
+    section Issue19062
+    71   : 0, 71
+    section Issue19401
+    36   : 0, 36
+    section Issue193
+    34   : 0, 34
+    section Issue7441
+    9    : 0, 9
+    section Issue1300
+    5    : 0, 5
+```

docs/syntax/mindmap.md

@@ -254,6 +254,34 @@ Root
       C
 ```
 
+## Markdown Strings
+
+The "Markdown Strings" feature enhances mind maps by offering a more versatile string type, which supports text formatting options such as bold and italics, and automatically wraps text within labels.
+
+```mermaid-example
+mindmap
+    id1["`**Root** with
+a second line
+Unicode works too: 🤓`"]
+      id2["`The dog in **the** hog... a *very long text* that wraps to a new line`"]
+      id3[Regular labels still works]
+```
+
+```mermaid
+mindmap
+    id1["`**Root** with
+a second line
+Unicode works too: 🤓`"]
+      id2["`The dog in **the** hog... a *very long text* that wraps to a new line`"]
+      id3[Regular labels still works]
+```
+
+Formatting:
+
+- For bold text, use double asterisks \*\* before and after the text.
+- For italics, use single asterisks \* before and after the text.
+- With traditional strings, you needed to add <br> tags for text to wrap in nodes. However, markdown strings automatically wrap text when it becomes too long and allows you to start a new line by simply using a newline character instead of a <br> tag.
+
 ## Integrating with your library/website.
 
 Mindmap uses the experimental lazy loading & async rendering features which could change in the future. From version 9.4.0 this diagram is included in mermaid but use lazy loading in order to keep the size of mermaid down. This is important in order to be able to add additional diagrams going forward.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "mermaid-monorepo",
   "private": true,
-  "version": "10.0.2",
+  "version": "10.1.0",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
   "packageManager": "pnpm@7.30.1",

packages/mermaid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "10.0.2",
+  "version": "10.1.0",
   "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
   "module": "./dist/mermaid.core.mjs",
@@ -53,6 +53,7 @@
   },
   "dependencies": {
     "@braintree/sanitize-url": "^6.0.0",
+    "@khanacademy/simple-markdown": "^0.8.6",
     "cytoscape": "^3.23.0",
     "cytoscape-cose-bilkent": "^4.1.0",
     "cytoscape-fcose": "^2.1.0",
@@ -86,6 +87,7 @@
     "coveralls": "^3.1.1",
     "cpy-cli": "^4.2.0",
     "cspell": "^6.14.3",
+    "csstree-validator": "^3.0.0",
     "globby": "^13.1.2",
     "jison": "^0.4.18",
     "js-base64": "^3.7.2",

packages/mermaid/src/Diagram.ts

@@ -44,8 +44,10 @@ export class Diagram {
     // Similarly, we can't do this in getDiagramFromText() because some code
     // calls diagram.db.clear(), which would reset anything set by
     // extractFrontMatter().
+
     this.parser.parse = (text: string) =>
       originalParse(cleanupComments(extractFrontMatter(text, this.db)));
+
     this.parser.parser.yy = this.db;
     if (diagram.init) {
       diagram.init(cnf);

packages/mermaid/src/config.type.ts

@@ -386,6 +386,7 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig {
   curve?: string;
   padding?: number;
   defaultRenderer?: string;
+  wrappingWidth?: number;
 }
 
 export interface FontConfig {

packages/mermaid/src/dagre-wrapper/clusters.js

@@ -1,12 +1,13 @@
 import intersectRect from './intersect/intersect-rect.js';
 import { log } from '../logger.js';
 import createLabel from './createLabel.js';
+import { createText } from '../rendering-util/createText.js';
 import { select } from 'd3';
 import { getConfig } from '../config.js';
 import { evaluate } from '../diagrams/common/common.js';
 
 const rect = (parent, node) => {
-  log.trace('Creating subgraph rect for ', node.id, node);
+  log.info('Creating subgraph rect for ', node.id, node);
 
   // Add outer g element
   const shapeSvg = parent
@@ -17,12 +18,18 @@ const rect = (parent, node) => {
   // add the rect
   const rect = shapeSvg.insert('rect', ':first-child');
 
+  const useHtmlLabels = evaluate(getConfig().flowchart.htmlLabels);
+
   // Create the label and insert it after the rect
   const label = shapeSvg.insert('g').attr('class', 'cluster-label');
 
-  const text = label
+  // const text = label
-    .node()
+  //   .node()
-    .appendChild(createLabel(node.labelText, node.labelStyle, undefined, true));
+  //   .appendChild(createLabel(node.labelText, node.labelStyle, undefined, true));
+  const text =
+    node.labelType === 'markdown'
+      ? createText(label, node.labelText, { style: node.labelStyle, useHtmlLabels })
+      : label.node().appendChild(createLabel(node.labelText, node.labelStyle, undefined, true));
 
   // Get the size of the label
   let bbox = text.getBBox();
@@ -56,13 +63,20 @@ const rect = (parent, node) => {
     .attr('width', width)
     .attr('height', node.height + padding);
 
-  // Center the label
+  if (useHtmlLabels) {
     label.attr(
       'transform',
       // This puts the labal on top of the box instead of inside it
-    // 'translate(' + (node.x - bbox.width / 2) + ', ' + (node.y - node.height / 2 - bbox.height) + ')'
       'translate(' + (node.x - bbox.width / 2) + ', ' + (node.y - node.height / 2) + ')'
     );
+  } else {
+    label.attr(
+      'transform',
+      // This puts the labal on top of the box instead of inside it
+      'translate(' + node.x + ', ' + (node.y - node.height / 2) + ')'
+    );
+  }
+  // Center the label
 
   const rectBox = rect.node().getBBox();
   node.width = rectBox.width;

packages/mermaid/src/dagre-wrapper/createLabel.js

@@ -41,7 +41,13 @@ function addHtmlLabel(node) {
   div.attr('xmlns', 'http://www.w3.org/1999/xhtml');
   return fo.node();
 }
-
+/**
+ * @param _vertexText
+ * @param style
+ * @param isTitle
+ * @param isNode
+ * @deprecated svg-util/createText instead
+ */
 const createLabel = (_vertexText, style, isTitle, isNode) => {
   let vertexText = _vertexText || '';
   if (typeof vertexText === 'object') {

packages/mermaid/src/dagre-wrapper/edges.js

@@ -1,5 +1,6 @@
 import { log } from '../logger.js';
 import createLabel from './createLabel.js';
+import { createText } from '../rendering-util/createText.js';
 import { line, curveBasis, select } from 'd3';
 import { getConfig } from '../config.js';
 import utils from '../utils.js';
@@ -14,8 +15,17 @@ export const clear = () => {
 };
 
 export const insertEdgeLabel = (elem, edge) => {
+  const useHtmlLabels = evaluate(getConfig().flowchart.htmlLabels);
   // Create the actual text element
-  const labelElement = createLabel(edge.label, edge.labelStyle);
+  const labelElement =
+    edge.labelType === 'markdown'
+      ? createText(elem, edge.label, {
+          style: edge.labelStyle,
+          useHtmlLabels,
+          addSvgBackground: true,
+        })
+      : createLabel(edge.label, edge.labelStyle);
+  log.info('abc82', edge, edge.labelType);
 
   // Create outer g, edgeLabel, this will be positioned after graph layout
   const edgeLabel = elem.insert('g').attr('class', 'edgeLabel');
@@ -26,7 +36,7 @@ export const insertEdgeLabel = (elem, edge) => {
 
   // Center the label
   let bbox = labelElement.getBBox();
-  if (evaluate(getConfig().flowchart.htmlLabels)) {
+  if (useHtmlLabels) {
     const div = labelElement.children[0];
     const dv = select(labelElement);
     bbox = div.getBoundingClientRect();

packages/mermaid/src/dagre-wrapper/index.js

@@ -14,7 +14,7 @@ import { insertCluster, clear as clearClusters } from './clusters.js';
 import { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } from './edges.js';
 import { log } from '../logger.js';
 
-const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
+const recursiveRender = async (_elem, graph, diagramtype, parentCluster) => {
   log.info('Graph in recursive render: XXX', graphlibJson.write(graph), parentCluster);
   const dir = graph.graph().rankdir;
   log.trace('Dir in recursive render - dir:', dir);
@@ -35,7 +35,8 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
 
   // Insert nodes, this will insert them into the dom and each node will get a size. The size is updated
   // to the abstract node and is later used by dagre for the layout
-  graph.nodes().forEach(function (v) {
+  await Promise.all(
+    graph.nodes().map(async function (v) {
       const node = graph.node(v);
       if (parentCluster !== undefined) {
         const data = JSON.parse(JSON.stringify(parentCluster.clusterData));
@@ -51,7 +52,7 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
       if (node && node.clusterNode) {
         // const children = graph.children(v);
         log.info('Cluster identified', v, node.width, graph.node(v));
-      const o = recursiveRender(nodes, node.graph, diagramtype, graph.node(v));
+        const o = await recursiveRender(nodes, node.graph, diagramtype, graph.node(v));
         const newEl = o.elem;
         updateNodeBounds(node, newEl);
         node.diff = o.diff || 0;
@@ -69,10 +70,11 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
           // insertCluster(clusters, graph.node(v));
         } else {
           log.info('Node - the non recursive path', v, node.id, node);
-        insertNode(nodes, graph.node(v), dir);
+          await insertNode(nodes, graph.node(v), dir);
         }
       }
-  });
+    })
+  );
 
   // Insert labels, this will insert them into the dom so that the width can be calculated
   // Also figure out which edges point to/from clusters and adjust them accordingly
@@ -146,7 +148,7 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
   return { elem, diff };
 };
 
-export const render = (elem, graph, markers, diagramtype, id) => {
+export const render = async (elem, graph, markers, diagramtype, id) => {
   insertMarkers(elem, markers, diagramtype, id);
   clearNodes();
   clearEdges();
@@ -157,7 +159,7 @@ export const render = (elem, graph, markers, diagramtype, id) => {
   adjustClustersAndEdges(graph);
   log.warn('Graph after:', graphlibJson.write(graph));
   // log.warn('Graph ever  after:', graphlibJson.write(graph.node('A').graph));
-  recursiveRender(elem, graph, diagramtype);
+  await recursiveRender(elem, graph, diagramtype);
 };
 
 // const shapeDefinitions = {};

packages/mermaid/src/dagre-wrapper/markers.js

@@ -142,7 +142,7 @@ const point = (elem, type) => {
     .append('marker')
     .attr('id', type + '-pointEnd')
     .attr('class', 'marker ' + type)
-    .attr('viewBox', '0 0 12 20')
+    .attr('viewBox', '0 0 10 10')
     .attr('refX', 10)
     .attr('refY', 5)
     .attr('markerUnits', 'userSpaceOnUse')

packages/mermaid/src/dagre-wrapper/nodes.js

@@ -8,8 +8,8 @@ import note from './shapes/note.js';
 import { parseMember } from '../diagrams/class/svgDraw.js';
 import { evaluate } from '../diagrams/common/common.js';
 
-const question = (parent, node) => {
+const question = async (parent, node) => {
-  const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
+  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
@@ -69,8 +69,8 @@ const choice = (parent, node) => {
   return shapeSvg;
 };
 
-const hexagon = (parent, node) => {
+const hexagon = async (parent, node) => {
-  const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
+  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
 
   const f = 4;
   const h = bbox.height + node.padding;
@@ -96,8 +96,8 @@ const hexagon = (parent, node) => {
   return shapeSvg;
 };
 
-const rect_left_inv_arrow = (parent, node) => {
+const rect_left_inv_arrow = async (parent, node) => {
-  const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
+  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
@@ -122,8 +122,8 @@ const rect_left_inv_arrow = (parent, node) => {
   return shapeSvg;
 };
 
-const lean_right = (parent, node) => {
+const lean_right = async (parent, node) => {
-  const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
+  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
@@ -145,8 +145,8 @@ const lean_right = (parent, node) => {
   return shapeSvg;
 };
 
-const lean_left = (parent, node) => {
+const lean_left = async (parent, node) => {
-  const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
+  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
@@ -168,8 +168,8 @@ const lean_left = (parent, node) => {
   return shapeSvg;
 };
 
-const trapezoid = (parent, node) => {
+const trapezoid = async (parent, node) => {
-  const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
+  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
@@ -191,8 +191,8 @@ const trapezoid = (parent, node) => {
   return shapeSvg;
 };
 
-const inv_trapezoid = (parent, node) => {
+const inv_trapezoid = async (parent, node) => {
-  const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
+  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
@@ -214,8 +214,8 @@ const inv_trapezoid = (parent, node) => {
   return shapeSvg;
 };
 
-const rect_right_inv_arrow = (parent, node) => {
+const rect_right_inv_arrow = async (parent, node) => {
-  const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
+  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
@@ -238,8 +238,8 @@ const rect_right_inv_arrow = (parent, node) => {
   return shapeSvg;
 };
 
-const cylinder = (parent, node) => {
+const cylinder = async (parent, node) => {
-  const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
+  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
 
   const w = bbox.width + node.padding;
   const rx = w / 2;
@@ -310,13 +310,19 @@ const cylinder = (parent, node) => {
   return shapeSvg;
 };
 
-const rect = (parent, node) => {
+const rect = async (parent, node) => {
-  const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes, true);
+  const { shapeSvg, bbox, halfPadding } = await labelHelper(
+    parent,
+    node,
+    'node ' + node.classes,
+    true
+  );
 
-  log.trace('Classes = ', node.classes);
   // add the rect
   const rect = shapeSvg.insert('rect', ':first-child');
 
+  // const totalWidth = bbox.width + node.padding * 2;
+  // const totalHeight = bbox.height + node.padding * 2;
   const totalWidth = bbox.width + node.padding;
   const totalHeight = bbox.height + node.padding;
   rect
@@ -324,6 +330,8 @@ const rect = (parent, node) => {
     .attr('style', node.style)
     .attr('rx', node.rx)
     .attr('ry', node.ry)
+    // .attr('x', -bbox.width / 2 - node.padding)
+    // .attr('y', -bbox.height / 2 - node.padding)
     .attr('x', -bbox.width / 2 - halfPadding)
     .attr('y', -bbox.height / 2 - halfPadding)
     .attr('width', totalWidth)
@@ -349,8 +357,8 @@ const rect = (parent, node) => {
   return shapeSvg;
 };
 
-const labelRect = (parent, node) => {
+const labelRect = async (parent, node) => {
-  const { shapeSvg } = labelHelper(parent, node, 'label', true);
+  const { shapeSvg } = await labelHelper(parent, node, 'label', true);
 
   log.trace('Classes = ', node.classes);
   // add the rect
@@ -536,8 +544,8 @@ const rectWithTitle = (parent, node) => {
   return shapeSvg;
 };
 
-const stadium = (parent, node) => {
+const stadium = async (parent, node) => {
-  const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
+  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
 
   const h = bbox.height + node.padding;
   const w = bbox.width + h / 4 + node.padding;
@@ -562,8 +570,8 @@ const stadium = (parent, node) => {
   return shapeSvg;
 };
 
-const circle = (parent, node) => {
+const circle = async (parent, node) => {
-  const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, undefined, true);
+  const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, undefined, true);
   const circle = shapeSvg.insert('circle', ':first-child');
 
   // center the circle around its coordinate
@@ -587,8 +595,8 @@ const circle = (parent, node) => {
   return shapeSvg;
 };
 
-const doublecircle = (parent, node) => {
+const doublecircle = async (parent, node) => {
-  const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, undefined, true);
+  const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, undefined, true);
   const gap = 5;
   const circleGroup = shapeSvg.insert('g', ':first-child');
   const outerCircle = circleGroup.insert('circle');
@@ -623,8 +631,8 @@ const doublecircle = (parent, node) => {
   return shapeSvg;
 };
 
-const subroutine = (parent, node) => {
+const subroutine = async (parent, node) => {
-  const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
+  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
@@ -973,7 +981,7 @@ const shapes = {
 
 let nodeElems = {};
 
-export const insertNode = (elem, node, dir) => {
+export const insertNode = async (elem, node, dir) => {
   let newEl;
   let el;
 
@@ -986,9 +994,9 @@ export const insertNode = (elem, node, dir) => {
       target = node.linkTarget || '_blank';
     }
     newEl = elem.insert('svg:a').attr('xlink:href', node.link).attr('target', target);
-    el = shapes[node.shape](newEl, node, dir);
+    el = await shapes[node.shape](newEl, node, dir);
   } else {
-    el = shapes[node.shape](elem, node, dir);
+    el = await shapes[node.shape](elem, node, dir);
     newEl = el;
   }
   if (node.tooltip) {
@@ -1014,6 +1022,7 @@ export const clear = () => {
 
 export const positionNode = (node) => {
   const el = nodeElems[node.id];
+
   log.trace(
     'Transforming node',
     node.diff,

packages/mermaid/src/dagre-wrapper/shapes/note.js

@@ -1,9 +1,19 @@
 import { updateNodeBounds, labelHelper } from './util.js';
 import { log } from '../../logger.js';
+import { getConfig } from '../../config.js';
 import intersect from '../intersect/index.js';
 
-const note = (parent, node) => {
+const note = async (parent, node) => {
-  const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes, true);
+  const useHtmlLabels = node.useHtmlLabels || getConfig().flowchart.htmlLabels;
+  if (!useHtmlLabels) {
+    node.centerLabel = true;
+  }
+  const { shapeSvg, bbox, halfPadding } = await labelHelper(
+    parent,
+    node,
+    'node ' + node.classes,
+    true
+  );
 
   log.info('Classes = ', node.classes);
   // add the rect

packages/mermaid/src/dagre-wrapper/shapes/util.js

@@ -1,10 +1,13 @@
 import createLabel from '../createLabel.js';
+import { createText } from '../../rendering-util/createText.js';
 import { getConfig } from '../../config.js';
 import { decodeEntities } from '../../mermaidAPI.js';
 import { select } from 'd3';
 import { evaluate, sanitizeText } from '../../diagrams/common/common.js';
-export const labelHelper = (parent, node, _classes, isNode) => {
+
+export const labelHelper = async (parent, node, _classes, isNode) => {
   let classes;
+  const useHtmlLabels = node.useHtmlLabels || evaluate(getConfig().flowchart.htmlLabels);
   if (!_classes) {
     classes = 'node default';
   } else {
@@ -27,9 +30,17 @@ export const labelHelper = (parent, node, _classes, isNode) => {
     labelText = typeof node.labelText === 'string' ? node.labelText : node.labelText[0];
   }
 
-  const text = label
+  const textNode = label.node();
-    .node()
+  let text;
-    .appendChild(
+  if (node.labelType === 'markdown') {
+    // text = textNode;
+    text = createText(label, sanitizeText(decodeEntities(labelText), getConfig()), {
+      useHtmlLabels,
+      width: node.width || getConfig().flowchart.wrappingWidth,
+      classes: 'markdown-node-label',
+    });
+  } else {
+    text = textNode.appendChild(
       createLabel(
         sanitizeText(decodeEntities(labelText), getConfig()),
         node.labelStyle,
@@ -37,23 +48,61 @@ export const labelHelper = (parent, node, _classes, isNode) => {
         isNode
       )
     );
+  }
 
   // Get the size of the label
   let bbox = text.getBBox();
+  const halfPadding = node.padding / 2;
 
   if (evaluate(getConfig().flowchart.htmlLabels)) {
     const div = text.children[0];
     const dv = select(text);
+
+    // if there are images, need to wait for them to load before getting the bounding box
+    const images = div.getElementsByTagName('img');
+    if (images) {
+      const noImgText = labelText.replace(/<img[^>]*>/g, '').trim() === '';
+
+      await Promise.all(
+        [...images].map(
+          (img) =>
+            new Promise((res) =>
+              img.addEventListener('load', function () {
+                img.style.display = 'flex';
+                img.style.flexDirection = 'column';
+
+                if (noImgText) {
+                  // default size if no text
+                  const bodyFontSize = getConfig().fontSize
+                    ? getConfig().fontSize
+                    : window.getComputedStyle(document.body).fontSize;
+                  const enlargingFactor = 5;
+                  img.style.width = parseInt(bodyFontSize, 10) * enlargingFactor + 'px';
+                } else {
+                  img.style.width = '100%';
+                }
+                res(img);
+              })
+            )
+        )
+      );
+    }
+
     bbox = div.getBoundingClientRect();
     dv.attr('width', bbox.width);
     dv.attr('height', bbox.height);
   }
 
-  const halfPadding = node.padding / 2;
-
   // Center the label
+  if (useHtmlLabels) {
     label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');
-
+  } else {
+    label.attr('transform', 'translate(' + 0 + ', ' + -bbox.height / 2 + ')');
+  }
+  if (node.centerLabel) {
+    label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');
+  }
+  label.insert('rect', ':first-child');
   return { shapeSvg, bbox, halfPadding, label };
 };
 

packages/mermaid/src/defaultConfig.ts

@@ -258,6 +258,18 @@ const config: Partial<MermaidConfig> = {
      * Default value: 'dagre-wrapper'
      */
     defaultRenderer: 'dagre-wrapper',
+    /**
+     * | Parameter       | Description | Type    | Required | Values                  |
+     * | --------------- | ----------- | ------- | -------- | ----------------------- |
+     * | wrappingWidth   | See notes   | number  | 4        | width of nodes where text is wrapped |
+     *
+     * **Notes:**
+     *
+     * When using markdown strings the text ius wrapped automatically, this
+     * value sets the max width of a text before it continues on a new line.
+     * Default value: 'dagre-wrapper'
+     */
+    wrappingWidth: 200,
   },
 
   /** The object containing configurations specific for sequence diagrams */

packages/mermaid/src/diagrams/class/classRenderer-v2.ts

@@ -248,7 +248,7 @@ export const setConf = function (cnf: any) {
  * @param _version -
  * @param diagObj -
  */
-export const draw = function (text: string, id: string, _version: string, diagObj: any) {
+export const draw = async function (text: string, id: string, _version: string, diagObj: any) {
   log.info('Drawing class - ', id);
 
   // TODO V10: Why flowchart? Might be a mistake when copying.
@@ -300,7 +300,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   // Run the renderer. This is what draws the final graph.
   // @ts-ignore Ignore type error for now
   const element = root.select('#' + id + ' g');
-  render(
+  await render(
     element,
     g,
     ['aggregation', 'extension', 'composition', 'dependency', 'lollipop'],

packages/mermaid/src/diagrams/class/styles.js

@@ -41,7 +41,7 @@ const getStyles = (options) =>
 
 .divider {
   stroke: ${options.nodeBorder};
-  stroke: 1;
+  stroke-width: 1;
 }
 
 g.clickable {

packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js

@@ -3,6 +3,7 @@ import { insertNode } from '../../../dagre-wrapper/nodes.js';
 import insertMarkers from '../../../dagre-wrapper/markers.js';
 import { insertEdgeLabel } from '../../../dagre-wrapper/edges.js';
 import { findCommonAncestor } from './render-utils.js';
+import { labelHelper } from '../../../dagre-wrapper/shapes/util.js';
 import { addHtmlLabel } from 'dagre-d3-es/src/dagre-js/label/add-html-label.js';
 import { getConfig } from '../../../config.js';
 import { log } from '../../../logger.js';
@@ -12,7 +13,7 @@ import { interpolateToCurve, getStylesFromArray } from '../../../utils.js';
 import ELK from 'elkjs/lib/elk.bundled.js';
 const elk = new ELK();
 
-const portPos = {};
+let portPos = {};
 
 const conf = {};
 export const setConf = function (cnf) {
@@ -34,13 +35,14 @@ let nodeDb = {};
 //  * @param doc
 //  * @param diagObj
 //  */
-export const addVertices = function (vert, svgId, root, doc, diagObj, parentLookupDb, graph) {
+export const addVertices = async function (vert, svgId, root, doc, diagObj, parentLookupDb, graph) {
   const svg = root.select(`[id="${svgId}"]`);
   const nodes = svg.insert('g').attr('class', 'nodes');
   const keys = Object.keys(vert);
 
   // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition
-  keys.forEach(function (id) {
+  await Promise.all(
+    keys.map(async function (id) {
       const vertex = vert[id];
 
       /**
@@ -52,7 +54,7 @@ export const addVertices = function (vert, svgId, root, doc, diagObj, parentLook
       if (vertex.classes.length > 0) {
         classStr = vertex.classes.join(' ');
       }
-
+      classStr = classStr + ' flowchart-label';
       const styles = getStylesFromArray(vertex.styles);
 
       // Use vertex id as text in the box if no text is provided by the graph definition
@@ -61,40 +63,6 @@ export const addVertices = function (vert, svgId, root, doc, diagObj, parentLook
       // We create a SVG label, either by delegating to addHtmlLabel or manually
       let vertexNode;
       const labelData = { width: 0, height: 0 };
-    if (evaluate(getConfig().flowchart.htmlLabels)) {
-      // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
-      const node = {
-        label: vertexText.replace(
-          /fa[blrs]?:fa-[\w-]+/g,
-          (s) => `<i class='${s.replace(':', ' ')}'></i>`
-        ),
-      };
-      vertexNode = addHtmlLabel(svg, node).node();
-      const bbox = vertexNode.getBBox();
-      labelData.width = bbox.width;
-      labelData.height = bbox.height;
-      labelData.labelNode = vertexNode;
-      vertexNode.parentNode.removeChild(vertexNode);
-    } else {
-      const svgLabel = doc.createElementNS('http://www.w3.org/2000/svg', 'text');
-      svgLabel.setAttribute('style', styles.labelStyle.replace('color:', 'fill:'));
-
-      const rows = vertexText.split(common.lineBreakRegex);
-
-      for (const row of rows) {
-        const tspan = doc.createElementNS('http://www.w3.org/2000/svg', 'tspan');
-        tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
-        tspan.setAttribute('dy', '1em');
-        tspan.setAttribute('x', '1');
-        tspan.textContent = row;
-        svgLabel.appendChild(tspan);
-      }
-      vertexNode = svgLabel;
-      const bbox = vertexNode.getBBox();
-      labelData.width = bbox.width;
-      labelData.height = bbox.height;
-      labelData.labelNode = vertexNode;
-    }
 
       const ports = [
         {
@@ -186,11 +154,13 @@ export const addVertices = function (vert, svgId, root, doc, diagObj, parentLook
         default:
           _shape = 'rect';
       }
+
       // Add the node
       const node = {
         labelStyle: styles.labelStyle,
         shape: _shape,
         labelText: vertexText,
+        labelType: vertex.labelType,
         rx: radious,
         ry: radious,
         class: classStr,
@@ -209,10 +179,33 @@ export const addVertices = function (vert, svgId, root, doc, diagObj, parentLook
       };
       let boundingBox;
       let nodeEl;
+
+      // Add the element to the DOM
       if (node.type !== 'group') {
         nodeEl = insertNode(nodes, node, vertex.dir);
         boundingBox = nodeEl.node().getBBox();
+      } else {
+        const svgLabel = doc.createElementNS('http://www.w3.org/2000/svg', 'text');
+        // svgLabel.setAttribute('style', styles.labelStyle.replace('color:', 'fill:'));
+        // const rows = vertexText.split(common.lineBreakRegex);
+        // for (const row of rows) {
+        //   const tspan = doc.createElementNS('http://www.w3.org/2000/svg', 'tspan');
+        //   tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
+        //   tspan.setAttribute('dy', '1em');
+        //   tspan.setAttribute('x', '1');
+        //   tspan.textContent = row;
+        //   svgLabel.appendChild(tspan);
+        // }
+        // vertexNode = svgLabel;
+        // const bbox = vertexNode.getBBox();
+        const { shapeSvg, bbox } = await labelHelper(nodes, node, undefined, true);
+        labelData.width = bbox.width;
+        labelData.wrappingWidth = getConfig().flowchart.wrappingWidth;
+        labelData.height = bbox.height;
+        labelData.labelNode = shapeSvg.node();
+        node.labelData = labelData;
       }
+      // const { shapeSvg, bbox } = await labelHelper(svg, node, undefined, true);
 
       const data = {
         id: vertex.id,
@@ -265,7 +258,8 @@ export const addVertices = function (vert, svgId, root, doc, diagObj, parentLook
       //   padding: getConfig().flowchart.padding,
       //   parent: parentLookupDb.parentById[vertex.id],
       // });
-  });
+    })
+  );
   return graph;
 };
 
@@ -520,7 +514,7 @@ export const addEdges = function (edges, diagObj, graph, svg) {
       edgeData.labelpos = 'c';
     }
 
-    edgeData.labelType = 'text';
+    edgeData.labelType = edge.labelType;
     edgeData.label = edge.text.replace(common.lineBreakRegex, '\n');
 
     if (edge.style === undefined) {
@@ -775,6 +769,7 @@ export const draw = async function (text, id, _version, diagObj) {
   // Add temporary render element
   diagObj.db.clear();
   nodeDb = {};
+  portPos = {};
   diagObj.db.setGen('gen-2');
   // Parse the graph definition
   diagObj.parser.parse(text);
@@ -845,9 +840,17 @@ export const draw = async function (text, id, _version, diagObj) {
   log.info('Subgraphs - ', subGraphs);
   for (let i = subGraphs.length - 1; i >= 0; i--) {
     subG = subGraphs[i];
-    diagObj.db.addVertex(subG.id, subG.title, 'group', undefined, subG.classes, subG.dir);
+    diagObj.db.addVertex(
+      subG.id,
+      { text: subG.title, type: subG.labelType },
+      'group',
+      undefined,
+      subG.classes,
+      subG.dir
+    );
   }
 
+  // debugger;
   // Add an element in the svg to be used to hold the subgraphs container
   // elements
   const subGraphsEl = svg.insert('g').attr('class', 'subgraphs');
@@ -860,7 +863,7 @@ export const draw = async function (text, id, _version, diagObj) {
   // in order to get the size of the node. You can't get the size of a node
   // that is not in the dom so we need to add it to the dom, get the size
   // we will position the nodes when we get the layout from elkjs
-  graph = addVertices(vert, id, root, doc, diagObj, parentLookupDb, graph);
+  graph = await addVertices(vert, id, root, doc, diagObj, parentLookupDb, graph);
 
   // Time for the edges, we start with adding an element in the node to hold the edges
   const edgesEl = svg.insert('g').attr('class', 'edges edgePath');
@@ -887,6 +890,8 @@ export const draw = async function (text, id, _version, diagObj) {
           },
           width: node.labelData.width,
           height: node.labelData.height,
+          // width: 100,
+          // height: 100,
         },
       ];
       delete node.x;
@@ -895,6 +900,7 @@ export const draw = async function (text, id, _version, diagObj) {
       delete node.height;
     }
   });
+
   insertChildren(graph.children, parentLookupDb);
   log.info('after layout', JSON.stringify(graph, null, 2));
   const g = await elk.layout(graph);
@@ -930,9 +936,12 @@ const drawNodes = (relX, relY, nodeArray, svg, subgraphsEl, diagObj, depth) => {
           .attr('width', node.width)
           .attr('height', node.height);
         const label = subgraphEl.insert('g').attr('class', 'label');
+        const labelCentering = getConfig().flowchart.htmlLabels ? node.labelData.width / 2 : 0;
         label.attr(
           'transform',
-          `translate(${node.labels[0].x + relX + node.x}, ${node.labels[0].y + relY + node.y})`
+          `translate(${node.labels[0].x + relX + node.x + labelCentering}, ${
+            node.labels[0].y + relY + node.y + 3
+          })`
         );
         label.node().appendChild(node.labelData.labelNode);
 

packages/mermaid/src/diagrams/flowchart/elk/styles.ts

@@ -81,7 +81,7 @@ const getStyles = (options: FlowChartStyleOptions) =>
   .edgeLabel {
     background-color: ${options.edgeLabelBackground};
     rect {
-      opacity: 0.5;
+      opacity: 0.85;
       background-color: ${options.edgeLabelBackground};
       fill: ${options.edgeLabelBackground};
     }
@@ -132,6 +132,11 @@ const getStyles = (options: FlowChartStyleOptions) =>
   //   fill:#ccc;
   //   // stroke:black;
   // }
+
+  .flowchart-label text {
+    text-anchor: middle;
+  }
+
   ${genSections(options)}
 `;
 

packages/mermaid/src/diagrams/flowchart/flowDb.js

@@ -59,13 +59,14 @@ export const lookUpDomId = function (id) {
  *
  * @param _id
  * @param text
+ * @param textObj
  * @param type
  * @param style
  * @param classes
  * @param dir
  * @param props
  */
-export const addVertex = function (_id, text, type, style, classes, dir, props = {}) {
+export const addVertex = function (_id, textObj, type, style, classes, dir, props = {}) {
   let txt;
   let id = _id;
   if (id === undefined) {
@@ -80,16 +81,17 @@ export const addVertex = function (_id, text, type, style, classes, dir, props =
   if (vertices[id] === undefined) {
     vertices[id] = {
       id: id,
+      labelType: 'text',
       domId: MERMAID_DOM_ID_PREFIX + id + '-' + vertexCounter,
       styles: [],
       classes: [],
     };
   }
   vertexCounter++;
-  if (text !== undefined) {
+  if (textObj !== undefined) {
     config = configApi.getConfig();
-    txt = sanitizeText(text.trim());
+    txt = sanitizeText(textObj.text.trim());
-
+    vertices[id].labelType = textObj.type;
     // strip quotes if string starts and ends with a quote
     if (txt[0] === '"' && txt[txt.length - 1] === '"') {
       txt = txt.substring(1, txt.length - 1);
@@ -131,24 +133,27 @@ export const addVertex = function (_id, text, type, style, classes, dir, props =
  * @param _end
  * @param type
  * @param linkText
+ * @param linkTextObj
  */
-export const addSingleLink = function (_start, _end, type, linkText) {
+export const addSingleLink = function (_start, _end, type) {
   let start = _start;
   let end = _end;
   // if (start[0].match(/\d/)) start = MERMAID_DOM_ID_PREFIX + start;
   // if (end[0].match(/\d/)) end = MERMAID_DOM_ID_PREFIX + end;
   // log.info('Got edge...', start, end);
 
-  const edge = { start: start, end: end, type: undefined, text: '' };
+  const edge = { start: start, end: end, type: undefined, text: '', labelType: 'text' };
-  linkText = type.text;
+  log.info('abc78 Got edge...', edge);
+  const linkTextObj = type.text;
 
-  if (linkText !== undefined) {
+  if (linkTextObj !== undefined) {
-    edge.text = sanitizeText(linkText.trim());
+    edge.text = sanitizeText(linkTextObj.text.trim());
 
     // strip quotes if string starts and ends with a quote
     if (edge.text[0] === '"' && edge.text[edge.text.length - 1] === '"') {
       edge.text = edge.text.substring(1, edge.text.length - 1);
     }
+    edge.labelType = linkTextObj.type;
   }
 
   if (type !== undefined) {
@@ -158,11 +163,12 @@ export const addSingleLink = function (_start, _end, type, linkText) {
   }
   edges.push(edge);
 };
-export const addLink = function (_start, _end, type, linktext) {
+export const addLink = function (_start, _end, type) {
+  log.info('addLink (abc78)', _start, _end, type);
   let i, j;
   for (i = 0; i < _start.length; i++) {
     for (j = 0; j < _end.length; j++) {
-      addSingleLink(_start[i], _end[j], type, linktext);
+      addSingleLink(_start[i], _end[j], type);
     }
   }
 };
@@ -457,10 +463,9 @@ export const defaultStyle = function () {
  * @param _title
  */
 export const addSubGraph = function (_id, list, _title) {
-  // console.log('addSubGraph', _id, list, _title);
+  let id = _id.text.trim();
-  let id = _id.trim();
+  let title = _title.text;
-  let title = _title;
+  if (_id === _title && _title.text.match(/\s/)) {
-  if (_id === _title && _title.match(/\s/)) {
     id = undefined;
   }
   /** @param a */
@@ -502,7 +507,14 @@ export const addSubGraph = function (_id, list, _title) {
   title = title || '';
   title = sanitizeText(title);
   subCount = subCount + 1;
-  const subGraph = { id: id, nodes: nodeList, title: title.trim(), classes: [], dir };
+  const subGraph = {
+    id: id,
+    nodes: nodeList,
+    title: title.trim(),
+    classes: [],
+    dir,
+    labelType: _title.type,
+  };
 
   log.info('Adding', subGraph.id, subGraph.nodes, subGraph.dir);
 

packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js

@@ -47,7 +47,7 @@ export const addVertices = function (vert, g, svgId, root, doc, diagObj) {
     if (vertex.classes.length > 0) {
       classStr = vertex.classes.join(' ');
     }
-
+    classStr = classStr + ' flowchart-label';
     const styles = getStylesFromArray(vertex.styles);
 
     // Use vertex id as text in the box if no text is provided by the graph definition
@@ -55,6 +55,10 @@ export const addVertices = function (vert, g, svgId, root, doc, diagObj) {
 
     // We create a SVG label, either by delegating to addHtmlLabel or manually
     let vertexNode;
+    log.info('vertex', vertex, vertex.labelType);
+    if (vertex.labelType === 'markdown') {
+      log.info('vertex', vertex, vertex.labelType);
+    } else {
       if (evaluate(getConfig().flowchart.htmlLabels)) {
         // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
         const node = {
@@ -81,6 +85,7 @@ export const addVertices = function (vert, g, svgId, root, doc, diagObj) {
         }
         vertexNode = svgLabel;
       }
+    }
 
     let radious = 0;
     let _shape = '';
@@ -146,6 +151,7 @@ export const addVertices = function (vert, g, svgId, root, doc, diagObj) {
       labelStyle: styles.labelStyle,
       shape: _shape,
       labelText: vertexText,
+      labelType: vertex.labelType,
       rx: radious,
       ry: radious,
       class: classStr,
@@ -165,6 +171,7 @@ export const addVertices = function (vert, g, svgId, root, doc, diagObj) {
 
     log.info('setNode', {
       labelStyle: styles.labelStyle,
+      labelType: vertex.labelType,
       shape: _shape,
       labelText: vertexText,
       rx: radious,
@@ -312,7 +319,7 @@ export const addEdges = function (edges, g, diagObj) {
       edgeData.labelpos = 'c';
     }
 
-    edgeData.labelType = 'text';
+    edgeData.labelType = edge.labelType;
     edgeData.label = edge.text.replace(common.lineBreakRegex, '\n');
 
     if (edge.style === undefined) {
@@ -355,7 +362,7 @@ export const getClasses = function (text, diagObj) {
  * @param id
  */
 
-export const draw = function (text, id, _version, diagObj) {
+export const draw = async function (text, id, _version, diagObj) {
   log.info('Drawing flowchart');
   diagObj.db.clear();
   flowDb.setGen('gen-2');
@@ -405,7 +412,14 @@ export const draw = function (text, id, _version, diagObj) {
   for (let i = subGraphs.length - 1; i >= 0; i--) {
     subG = subGraphs[i];
     log.info('Subgraph - ', subG);
-    diagObj.db.addVertex(subG.id, subG.title, 'group', undefined, subG.classes, subG.dir);
+    diagObj.db.addVertex(
+      subG.id,
+      { text: subG.title, type: subG.labelType },
+      'group',
+      undefined,
+      subG.classes,
+      subG.dir
+    );
   }
 
   // Fetch the vertices/nodes and edges/links from the parsed graph definition
@@ -437,7 +451,7 @@ export const draw = function (text, id, _version, diagObj) {
 
   // Run the renderer. This is what draws the final graph.
   const element = root.select('#' + id + ' g');
-  render(element, g, ['point', 'circle', 'cross'], 'flowchart', id);
+  await render(element, g, ['point', 'circle', 'cross'], 'flowchart', id);
 
   utils.insertTitle(svg, 'flowchartTitleText', conf.titleTopMargin, diagObj.db.getDiagramTitle());
 

packages/mermaid/src/diagrams/flowchart/parser/flow-md-string.spec.js

@@ -0,0 +1,64 @@
+import flowDb from '../flowDb';
+import flow from './flow';
+import { setConfig } from '../../../config';
+
+setConfig({
+  securityLevel: 'strict',
+});
+
+describe('parsing a flow chart with markdown strings', function () {
+  beforeEach(function () {
+    flow.parser.yy = flowDb;
+    flow.parser.yy.clear();
+  });
+
+  it('mardown formatting in nodes and labels', function () {
+    const res = flow.parser.parse(`flowchart
+A["\`The cat in **the** hat\`"]-- "\`The *bat* in the chat\`" -->B["The dog in the hog"] -- "The rat in the mat" -->C;`);
+
+    const vert = flow.parser.yy.getVertices();
+    const edges = flow.parser.yy.getEdges();
+
+    expect(vert['A'].id).toBe('A');
+    expect(vert['A'].text).toBe('The cat in **the** hat');
+    expect(vert['A'].labelType).toBe('markdown');
+    expect(vert['B'].id).toBe('B');
+    expect(vert['B'].text).toBe('The dog in the hog');
+    expect(vert['B'].labelType).toBe('text');
+    expect(edges.length).toBe(2);
+    expect(edges[0].start).toBe('A');
+    expect(edges[0].end).toBe('B');
+    expect(edges[0].type).toBe('arrow_point');
+    expect(edges[0].text).toBe('The *bat* in the chat');
+    expect(edges[0].labelType).toBe('markdown');
+    expect(edges[1].start).toBe('B');
+    expect(edges[1].end).toBe('C');
+    expect(edges[1].type).toBe('arrow_point');
+    expect(edges[1].text).toBe('The rat in the mat');
+    expect(edges[1].labelType).toBe('text');
+  });
+  it('mardown formatting in subgraphs', function () {
+    const res = flow.parser.parse(`flowchart LR
+subgraph "One"
+  a("\`The **cat**
+  in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
+end
+subgraph "\`**Two**\`"
+  c("\`The **cat**
+  in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
+end`);
+
+    const subgraphs = flow.parser.yy.getSubGraphs();
+    expect(subgraphs.length).toBe(2);
+    const subgraph = subgraphs[0];
+
+    expect(subgraph.nodes.length).toBe(2);
+    expect(subgraph.title).toBe('One');
+    expect(subgraph.labelType).toBe('text');
+
+    const subgraph2 = subgraphs[1];
+    expect(subgraph2.nodes.length).toBe(2);
+    expect(subgraph2.title).toBe('**Two**');
+    expect(subgraph2.labelType).toBe('markdown');
+  });
+});

packages/mermaid/src/diagrams/flowchart/parser/flow.jison

@@ -7,6 +7,7 @@
 /* lexical grammar */
 %lex
 %x string
+%x md_string
 %x acc_title
 %x acc_descr
 %x acc_descr_multiline
@@ -35,6 +36,9 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 <acc_descr_multiline>[\}]                       { this.popState(); }
 <acc_descr_multiline>[^\}]*                     return "acc_descr_multiline_value";
 // <acc_descr_multiline>.*[^\n]*                    {  return "acc_descr_line"}
+["][`]          { this.begin("md_string");}
+<md_string>[^`"]+        { return "MD_STR";}
+<md_string>[`]["]          { this.popState();}
 ["]                     this.begin("string");
 <string>["]             this.popState();
 <string>[^"]*           return "STR";
@@ -432,11 +436,13 @@ arrowText:
     ;
 
 text: textToken
-    {$$=$1;}
+    { $$={text:$1, type: 'text'};}
     | text textToken
-    {$$=$1+''+$2;}
+    { $$={text:$1.text+''+$2, type: $1.type};}
     | STR
-    {$$=$1;}
+    { $$={text: $1, type: 'text'};}
+    | MD_STR
+    { $$={text: $1, type: 'markdown'};}
     ;
 
 

packages/mermaid/src/diagrams/flowchart/styles.ts

@@ -23,11 +23,11 @@ const getStyles = (options: FlowChartStyleOptions) =>
   .cluster-label text {
     fill: ${options.titleColor};
   }
-  .cluster-label span {
+  .cluster-label span,p {
     color: ${options.titleColor};
   }
 
-  .label text,span {
+  .label text,span,p {
     fill: ${options.nodeTextColor || options.textColor};
     color: ${options.nodeTextColor || options.textColor};
   }
@@ -41,6 +41,15 @@ const getStyles = (options: FlowChartStyleOptions) =>
     stroke: ${options.nodeBorder};
     stroke-width: 1px;
   }
+  .flowchart-label text {
+    text-anchor: middle;
+  }
+  // .flowchart-label .text-outer-tspan {
+  //   text-anchor: middle;
+  // }
+  // .flowchart-label .text-inner-tspan {
+  //   text-anchor: start;
+  // }
 
   .node .label {
     text-align: center;
@@ -83,7 +92,7 @@ const getStyles = (options: FlowChartStyleOptions) =>
     fill: ${options.titleColor};
   }
 
-  .cluster span {
+  .cluster span,p {
     color: ${options.titleColor};
   }
   /* .cluster div {

packages/mermaid/src/diagrams/gantt/ganttDb.js

@@ -1,8 +1,8 @@
 import { sanitizeUrl } from '@braintree/sanitize-url';
-import dayjs from 'dayjs';
+import dayjs from 'dayjs/esm/index.js';
-import dayjsIsoWeek from 'dayjs/plugin/isoWeek.js';
+import dayjsIsoWeek from 'dayjs/esm/plugin/isoWeek/index.js';
-import dayjsCustomParseFormat from 'dayjs/plugin/customParseFormat.js';
+import dayjsCustomParseFormat from 'dayjs/esm/plugin/customParseFormat/index.js';
-import dayjsAdvancedFormat from 'dayjs/plugin/advancedFormat.js';
+import dayjsAdvancedFormat from 'dayjs/esm/plugin/advancedFormat/index.js';
 import { log } from '../../logger.js';
 import * as configApi from '../../config.js';
 import utils from '../../utils.js';

packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts

@@ -1,5 +1,5 @@
 // @ts-nocheck TODO: Fix TS
-import dayjs from 'dayjs';
+import dayjs from 'dayjs/esm/index.js';
 import ganttDb from './ganttDb.js';
 import { convert } from '../../tests/util.js';
 

packages/mermaid/src/diagrams/gantt/ganttRenderer.js

@@ -1,4 +1,4 @@
-import dayjs from 'dayjs';
+import dayjs from 'dayjs/esm/index.js';
 import { log } from '../../logger.js';
 import {
   select,

packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js

@@ -167,12 +167,15 @@ function positionNodes(cy) {
 export const draw = async (text, id, version, diagObj) => {
   const conf = getConfig();
 
+  // console.log('Config: ', conf);
+  conf.htmlLabels = false;
+
   // This is done only for throwing the error if the text is not valid.
   diagObj.db.clear();
   // Parse the graph definition
   diagObj.parser.parse(text);
 
-  log.debug('Renering info diagram\n' + text);
+  log.debug('Rendering mindmap diagram\n' + text, diagObj.parser);
 
   const securityLevel = getConfig().securityLevel;
   // Handle root and Document for when rendering in sandbox mode

packages/mermaid/src/diagrams/mindmap/parser/mindmap.jison

@@ -12,12 +12,13 @@
 %}
 %x NODE
 %x NSTR
+%x NSTR2
 %x ICON
 %x CLASS
 
 %%
 
-\s*\%\%.*          {yy.getLogger().trace('Found comment',yytext);}
+\s*\%\%.*          {yy.getLogger().trace('Found comment',yytext); return 'SPACELINE';}
 // \%\%[^\n]*\n                             /* skip comments */
 "mindmap"		       return 'MINDMAP';
 ":::"              { this.begin('CLASS'); }
@@ -41,6 +42,9 @@
 // !(-\()            return 'NODE_ID';
 [^\(\[\n\-\)\{\}]+         return 'NODE_ID';
 <<EOF>>            return 'EOF';
+<NODE>["][`]          { this.begin("NSTR2");}
+<NSTR2>[^`"]+        { return "NODE_DESCR";}
+<NSTR2>[`]["]          { this.popState();}
 <NODE>["]          { yy.getLogger().trace('Starting NSTR');this.begin("NSTR");}
 <NSTR>[^"]+        { yy.getLogger().trace('description:', yytext); return "NODE_DESCR";}
 <NSTR>["]          {this.popState();}

packages/mermaid/src/diagrams/mindmap/styles.js

@@ -70,5 +70,12 @@ const getStyles = (options) =>
   .edge {
     fill: none;
   }
+  .mindmap-node-label {
+    dy: 1em;
+    alignment-baseline: middle;
+    text-anchor: middle;
+    dominant-baseline: middle;
+    text-align: center;
+  }
 `;
 export default getStyles;

packages/mermaid/src/diagrams/mindmap/svgDraw.js

@@ -1,5 +1,6 @@
 import { select } from 'd3';
 import * as db from './mindmapDb.js';
+import { createText } from '../../rendering-util/createText.js';
 const MAX_SECTIONS = 12;
 
 /**
@@ -11,7 +12,7 @@ function wrap(text, width) {
     var text = select(this),
       words = text
         .text()
-        .split(/(\s+|<br>)/)
+        .split(/(\s+|<br\/>)/)
         .reverse(),
       word,
       line = [],
@@ -28,10 +29,10 @@ function wrap(text, width) {
       word = words[words.length - 1 - j];
       line.push(word);
       tspan.text(line.join(' ').trim());
-      if (tspan.node().getComputedTextLength() > width || word === '<br>') {
+      if (tspan.node().getComputedTextLength() > width || word === '<br/>') {
         line.pop();
         tspan.text(line.join(' ').trim());
-        if (word === '<br>') {
+        if (word === '<br/>') {
           line = [''];
         } else {
           line = [word];
@@ -203,6 +204,7 @@ const roundedRectBkg = function (elem, node) {
  * @returns {number} The height nodes dom element
  */
 export const drawNode = function (elem, node, fullSection, conf) {
+  const htmlLabels = conf.htmlLabels;
   const section = fullSection % (MAX_SECTIONS - 1);
   const nodeElem = elem.append('g');
   node.section = section;
@@ -215,15 +217,22 @@ export const drawNode = function (elem, node, fullSection, conf) {
 
   // Create the wrapped text element
   const textElem = nodeElem.append('g');
-  const txt = textElem
+  const description = node.descr.replace(/(<br\/*>)/g, '\n');
-    .append('text')
+  const newEl = createText(textElem, description, {
-    .text(node.descr)
+    useHtmlLabels: htmlLabels,
+    width: node.width,
+    classes: 'mindmap-node-label',
+  });
+
+  if (!htmlLabels) {
+    textElem
       .attr('dy', '1em')
       .attr('alignment-baseline', 'middle')
       .attr('dominant-baseline', 'middle')
-    .attr('text-anchor', 'middle')
+      .attr('text-anchor', 'middle');
-    .call(wrap, node.width);
+  }
-  const bbox = txt.node().getBBox();
+  // .call(wrap, node.width);
+  const bbox = textElem.node().getBBox();
   const fontSize = conf.fontSize.replace ? conf.fontSize.replace('px', '') : conf.fontSize;
   node.height = bbox.height + fontSize * 1.1 * 0.5 + node.padding;
   node.width = bbox.width + 2 * node.padding;
@@ -267,7 +276,16 @@ export const drawNode = function (elem, node, fullSection, conf) {
       );
     }
   } else {
-    textElem.attr('transform', 'translate(' + node.width / 2 + ', ' + node.padding / 2 + ')');
+    if (!htmlLabels) {
+      const dx = node.width / 2;
+      const dy = node.padding / 2;
+      textElem.attr('transform', 'translate(' + dx + ', ' + dy + ')');
+      // textElem.attr('transform', 'translate(' + node.width / 2 + ', ' + node.padding / 2 + ')');
+    } else {
+      const dx = (node.width - bbox.width) / 2;
+      const dy = (node.height - bbox.height) / 2;
+      textElem.attr('transform', 'translate(' + dx + ', ' + dy + ')');
+    }
   }
 
   switch (node.type) {

packages/mermaid/src/diagrams/requirement/styles.js

@@ -16,7 +16,7 @@ const getStyles = (options) => `
 
   .reqBox {
     fill: ${options.requirementBackground};
-    fill-opacity: 100%;
+    fill-opacity: 1.0;
     stroke: ${options.requirementBorderColor};
     stroke-width: ${options.requirementBorderSize};
   }
@@ -26,7 +26,7 @@ const getStyles = (options) => `
   }
   .reqLabelBox {
     fill: ${options.relationLabelBackground};
-    fill-opacity: 100%;
+    fill-opacity: 1.0;
   }
 
   .req-title-line {

packages/mermaid/src/diagrams/state/stateRenderer-v2.js

@@ -232,6 +232,9 @@ const setupNode = (g, parent, parsedItem, diagramStates, diagramDb, altFlag) =>
       type: newNode.type,
       padding: 15, //getConfig().flowchart.padding
     };
+    // if (useHtmlLabels) {
+    nodeData.centerLabel = true;
+    // }
 
     if (parsedItem.note) {
       // Todo: set random id
@@ -240,6 +243,7 @@ const setupNode = (g, parent, parsedItem, diagramStates, diagramDb, altFlag) =>
         shape: SHAPE_NOTE,
         labelText: parsedItem.note.text,
         classes: CSS_DIAGRAM_NOTE,
+        // useHtmlLabels: false,
         style: '', // styles.style,
         id: itemId + NOTE_ID + '-' + graphItemCount,
         domId: stateDomId(itemId, graphItemCount, NOTE),
@@ -378,7 +382,7 @@ const getDir = (parsedItem, defaultDir = DEFAULT_NESTED_DOC_DIR) => {
  * @param _version
  * @param diag
  */
-export const draw = function (text, id, _version, diag) {
+export const draw = async function (text, id, _version, diag) {
   log.info('Drawing state diagram (v2)', id);
   // diag.sb.clear();
   nodeDb = {};
@@ -432,7 +436,7 @@ export const draw = function (text, id, _version, diag) {
   // Run the renderer. This is what draws the final graph.
 
   const element = root.select('#' + id + ' g');
-  render(element, g, ['barb'], CSS_DIAGRAM, id);
+  await render(element, g, ['barb'], CSS_DIAGRAM, id);
 
   const padding = 8;
 

packages/mermaid/src/docs/.vitepress/config.ts

@@ -28,7 +28,16 @@ export default defineConfig({
     },
     socialLinks: [
       { icon: 'github', link: 'https://github.com/mermaid-js/mermaid' },
-      { icon: 'slack', link: 'https://mermaid-talk.slack.com' },
+      {
+        icon: 'slack',
+        link: 'https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE',
+      },
+      {
+        icon: {
+          svg: '<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 490.16 490.16"><defs><mask id="Mask"><rect x="0" y="0" width="490.16" height="490.16" fill="white" /><path fill="black" d="M407.48,111.18A165.2,165.2,0,0,0,245.08,220,165.2,165.2,0,0,0,82.68,111.18a165.5,165.5,0,0,0,72.06,143.64,88.81,88.81,0,0,1,38.53,73.45v50.86H296.9V328.27a88.8,88.8,0,0,1,38.52-73.45,165.41,165.41,0,0,0,72.06-143.64Z"/><path fill="black" d="M160.63,328.27a56.09,56.09,0,0,0-24.27-46.49,198.74,198.74,0,0,1-28.54-23.66A196.87,196.87,0,0,1,82.53,227V379.13h78.1Z"/><path fill="black" d="M329.53,328.27a56.09,56.09,0,0,1,24.27-46.49,198.74,198.74,0,0,0,28.54-23.66A196.87,196.87,0,0,0,407.63,227V379.13h-78.1Z"/></mask><style>.cls-1{fill:#76767B;}.cls-1:hover{fill:#FF3570}</style></defs><rect class="cls-1" width="490.16" height="490.16" rx="84.61" mask="url(#Mask)" /></svg>',
+        },
+        link: 'https://www.mermaidchart.com/',
+      },
     ],
   },
 });
@@ -42,6 +51,11 @@ function nav() {
       activeMatch: '/config/',
     },
     { text: 'Integrations', link: '/ecosystem/integrations', activeMatch: '/ecosystem/' },
+    {
+      text: 'Latest News',
+      link: '/news/announcements',
+      activeMatch: '/announcements',
+    },
     {
       text: version,
       items: [
@@ -80,6 +94,7 @@ function sidebarAll() {
     ...sidebarEcosystem(),
     ...sidebarConfig(),
     ...sidebarCommunity(),
+    ...sidebarNews(),
   ];
 }
 
@@ -162,3 +177,16 @@ function sidebarCommunity() {
     },
   ];
 }
+
+function sidebarNews() {
+  return [
+    {
+      text: '📰 Latest News',
+      collapsible: true,
+      items: [
+        { text: 'Announcements', link: '/news/announcements' },
+        { text: 'Blog', link: '/news/blog' },
+      ],
+    },
+  ];
+}

packages/mermaid/src/docs/ecosystem/integrations.md

@@ -17,6 +17,7 @@ They also serve as proof of concept, for the variety of things that can be built
 - [Mermaid Flow Visual Editor](https://www.mermaidflow.app) (**Native support**)
 - [Deepdwn](https://billiam.itch.io/deepdwn) (**Native support**)
 - [Joplin](https://joplinapp.org) (**Native support**)
+- [Slab](https://slab.com) (**Native support**)
 - [Swimm](https://swimm.io) (**Native support**)
 - [Notion](https://notion.so) (**Native support**)
 - [Observable](https://observablehq.com/@observablehq/mermaid) (**Native support**)

packages/mermaid/src/docs/index.md

@@ -23,15 +23,15 @@ features:
   - title: ➕ Easy to use!
     details: Easily create and render detailed diagrams and charts with the Mermaid Live Editor.
     link: https://mermaid.live/
-  - title: 🎥 Video Tutorials!
-    details: Curated list of video tutorials and examples created by the community.
-    link: ../../config/Tutorials.html
   - title: 🧩 Integrations available!
     details: Use Mermaid with your favorite applications, check out the integrations list.
     link: ../../ecosystem/integrations.md
   - title: 🏆 Award winning!
     details: 2019 JavaScript Open Source Award winner for "The Most Exciting Use of Technology".
     link: https://osawards.com/javascript/2019
+  - title: 🥰 Mermaid + Mermaid Chart
+    details: Mermaid Chart is a major supporter of the Mermaid project.
+    link: https://www.mermaidchart.com/
 ---
 
 <script setup>
@@ -149,6 +149,12 @@ const members = [
     title: "Developer",
     links: [{ icon: "github", link: "https://github.com/spopida" }],
   },
+    {
+    avatar: "https://avatars.githubusercontent.com/u/35910788?v=4",
+    name: "Steph Huynh",
+    title: "Developer",
+    links: [{ icon: "github", link: "https://github.com/huynhicode" }],
+  },
 ];
 
 </script>

packages/mermaid/src/docs/intro/index.md

@@ -76,7 +76,7 @@ To Deploy Mermaid:
 
 ### [Mermaid API](../config/setup/README.md):
 
-**To deploy mermaid without a bundler, one can insert a `script` tag with an absolute address and a `mermaid.initialize` call into the HTML like so:**
+**To deploy mermaid without a bundler, insert a `script` tag with an absolute address and a `mermaid.initialize` call into the HTML using the following example:**
 
 ```html
 <script type="module">
@@ -85,9 +85,9 @@ To Deploy Mermaid:
 </script>
 ```
 
-**Doing so will command the mermaid parser to look for the `<div>` or `<pre>` tags with `class="mermaid"`. From these tags mermaid will try to read the diagram/chart definitions and render them into SVG charts.**
+**Doing so commands the mermaid parser to look for the `<div>` or `<pre>` tags with `class="mermaid"`. From these tags, mermaid tries read the diagram/chart definitions and render them into SVG charts.**
 
-**Examples can be found at** [Other examples](../syntax/examples.md)
+**Examples can be found in** [Other examples](../syntax/examples.md)
 
 ## Sibling projects
 

packages/mermaid/src/docs/news/announcements.md

@@ -0,0 +1,7 @@
+# Announcements
+
+## [Automatic text wrapping in flowcharts is here!](https://www.mermaidchart.com/blog/posts/automatic-text-wrapping-in-flowcharts-is-here)
+
+3 April 2023 · 3 mins
+
+Markdown Strings reduce the hassle # Starting from v10.

packages/mermaid/src/docs/news/blog.md

@@ -0,0 +1,25 @@
+# Blog
+
+## [Mermaid Chart officially launched with sharable diagram links and presentation mode](https://www.mermaidchart.com/blog/posts/mermaid-chart-officially-launched-with-sharable-diagram-links-and-presentation-mode/)
+
+27 March 2023 · 2 mins
+
+Exciting news for all Mermaid OSS fans: Mermaid Chart has officially launched with Mermaid Chart!
+
+## [If you're not excited about ChatGPT, then you're not being creative](https://www.mermaidchart.com/blog/posts/if-youre-not-excited-about-chatgpt-then-youre-not-being-creative-enough/)
+
+8 March 2023 · 9 mins
+
+The hype around AI in general and ChatGPT, in particular, is so intense that it’s very understandable to assume the hype train is driving straight toward the trough of disillusionment.
+
+## [Flow charts are O(n)2 complex, so don't go over 100 connections](https://www.mermaidchart.com/blog/posts/flow-charts-are-on2-complex-so-dont-go-over-100-connections/)
+
+1 March 2023 · 12 mins
+
+Flowchart design is a game of balance: Read about the importance of dialling in the right level of detail and how to manage complexity in large flowcharts.
+
+## [Busting the myth that developers can't write](https://www.mermaidchart.com/blog/posts/busting-the-myth-that-developers-cant-write/)
+
+10 February 2023 · 10 mins
+
+Busting the myth that developers can’t write # It’s an annoying stereotype that developers don’t know how to write, speak, and otherwise communicate.

packages/mermaid/src/docs/syntax/flowchart.md

@@ -446,6 +446,31 @@ flowchart LR
   B1 --> B2
 ```
 
+## Markdown Strings
+
+The "Markdown Strings" feature enhances flowcharts and mind maps by offering a more versatile string type, which supports text formatting options such as bold and italics, and automatically wraps text within labels.
+
+```mermaid-example
+%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart LR
+subgraph "One"
+  a("`The **cat**
+  in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}}
+end
+subgraph "`**Two**`"
+  c("`The **cat**
+  in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog")
+end
+```
+
+Formatting:
+
+- For bold text, use double asterisks \*\* before and after the text.
+- For italics, use single asterisks \* before and after the text.
+- With traditional strings, you needed to add <br> tags for text to wrap in nodes. However, markdown strings automatically wrap text when it becomes too long and allows you to start a new line by simply using a newline character instead of a <br> tag.
+
+This feature is applicable to node labels, edge labels, and subgraph labels.
+
 ## Interaction
 
 It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.

packages/mermaid/src/docs/syntax/gantt.md

@@ -374,3 +374,24 @@ Beginner's tip—a full example using interactive links in an html context:
   </script>
 </body>
 ```
+
+## Examples
+
+### Bar chart (using gantt chart)
+
+```mermaid-example
+gantt
+    title Git Issues - days since last update
+    dateFormat X
+    axisFormat %s
+    section Issue19062
+    71   : 0, 71
+    section Issue19401
+    36   : 0, 36
+    section Issue193
+    34   : 0, 34
+    section Issue7441
+    9    : 0, 9
+    section Issue1300
+    5    : 0, 5
+```

packages/mermaid/src/docs/syntax/mindmap.md

@@ -162,6 +162,25 @@ Root
       C
 ```
 
+## Markdown Strings
+
+The "Markdown Strings" feature enhances mind maps by offering a more versatile string type, which supports text formatting options such as bold and italics, and automatically wraps text within labels.
+
+```mermaid-example
+mindmap
+    id1["`**Root** with
+a second line
+Unicode works too: 🤓`"]
+      id2["`The dog in **the** hog... a *very long text* that wraps to a new line`"]
+      id3[Regular labels still works]
+```
+
+Formatting:
+
+- For bold text, use double asterisks \*\* before and after the text.
+- For italics, use single asterisks \* before and after the text.
+- With traditional strings, you needed to add <br> tags for text to wrap in nodes. However, markdown strings automatically wrap text when it becomes too long and allows you to start a new line by simply using a newline character instead of a <br> tag.
+
 ## Integrating with your library/website.
 
 Mindmap uses the experimental lazy loading & async rendering features which could change in the future. From version 9.4.0 this diagram is included in mermaid but use lazy loading in order to keep the size of mermaid down. This is important in order to be able to add additional diagrams going forward.

packages/mermaid/src/logger.ts

@@ -2,7 +2,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/no-empty-function */
 /* eslint-disable no-console */
-import dayjs from 'dayjs';
+import dayjs from 'dayjs/esm/index.js';
 
 export type LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal';
 

packages/mermaid/src/mermaidAPI.ts

@@ -32,7 +32,14 @@ import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility.
 import { parseDirective } from './directiveUtils.js';
 
 // diagram names that support classDef statements
-const CLASSDEF_DIAGRAMS = ['graph', 'flowchart', 'flowchart-v2', 'stateDiagram', 'stateDiagram-v2'];
+const CLASSDEF_DIAGRAMS = [
+  'graph',
+  'flowchart',
+  'flowchart-v2',
+  'flowchart-elk',
+  'stateDiagram',
+  'stateDiagram-v2',
+];
 const MAX_TEXTLENGTH = 50_000;
 const MAX_TEXTLENGTH_EXCEEDED_MSG =
   'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa';
@@ -399,6 +406,12 @@ const render = async function (
   // clean up text CRLFs
   text = text.replace(/\r\n?/g, '\n'); // parser problems on CRLF ignore all CR and leave LF;;
 
+  // clean up html tags so that all attributes use single quotes, parser throws error on double quotes
+  text = text.replace(
+    /<(\w+)([^>]*)>/g,
+    (match, tag, attributes) => '<' + tag + attributes.replace(/="([^"]*)"/g, "='$1'") + '>'
+  );
+
   const idSelector = '#' + id;
   const iFrameID = 'i' + id;
   const iFrameID_selector = '#' + iFrameID;

packages/mermaid/src/rendering-util/createText.js

@@ -0,0 +1,224 @@
+import { select } from 'd3';
+import { log } from '../logger.js';
+import { getConfig } from '../config.js';
+import { evaluate } from '../diagrams/common/common.js';
+import { decodeEntities } from '../mermaidAPI.js';
+import { markdownToHTML, markdownToLines } from '../rendering-util/handle-markdown-text.js';
+/**
+ * @param dom
+ * @param styleFn
+ */
+function applyStyle(dom, styleFn) {
+  if (styleFn) {
+    dom.attr('style', styleFn);
+  }
+}
+
+/**
+ * @param element
+ * @param {any} node
+ * @param width
+ * @param classes
+ * @returns {SVGForeignObjectElement} Node
+ */
+function addHtmlSpan(element, node, width, classes) {
+  const fo = element.append('foreignObject');
+  // const newEl = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
+  // const newEl = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
+  const div = fo.append('xhtml:div');
+  // const div = body.append('div');
+  // const div = fo.append('div');
+
+  const label = node.label;
+  const labelClass = node.isNode ? 'nodeLabel' : 'edgeLabel';
+  div.html(
+    `<span class="${labelClass} ${classes}" ` +
+      (node.labelStyle ? 'style="' + node.labelStyle + '"' : '') +
+      '>' +
+      label +
+      '</span>'
+  );
+
+  applyStyle(div, node.labelStyle);
+  div.style('display', 'table-cell');
+  div.style('white-space', 'nowrap');
+  div.style('max-width', width + 'px');
+  div.attr('xmlns', 'http://www.w3.org/1999/xhtml');
+
+  let bbox = div.node().getBoundingClientRect();
+  if (bbox.width === width) {
+    div.style('display', 'table');
+    div.style('white-space', 'break-spaces');
+    div.style('width', width + 'px');
+    bbox = div.node().getBoundingClientRect();
+  }
+
+  fo.style('width', bbox.width);
+  fo.style('height', bbox.height);
+
+  return fo.node();
+}
+
+/**
+ * Creates a tspan element with the specified attributes for text positioning.
+ *
+ * @param {object} textElement - The parent text element to append the tspan element.
+ * @param {number} lineIndex - The index of the current line in the structuredText array.
+ * @param {number} lineHeight - The line height value for the text.
+ * @returns {object} The created tspan element.
+ */
+function createTspan(textElement, lineIndex, lineHeight) {
+  return textElement
+    .append('tspan')
+    .attr('class', 'text-outer-tspan')
+    .attr('x', 0)
+    .attr('y', lineIndex * lineHeight - 0.1 + 'em')
+    .attr('dy', lineHeight + 'em');
+}
+
+/**
+ * Creates a formatted text element by breaking lines and applying styles based on
+ * the given structuredText.
+ *
+ * @param {number} width - The maximum allowed width of the text.
+ * @param {object} g - The parent group element to append the formatted text.
+ * @param {Array} structuredText - The structured text data to format.
+ * @param addBackground
+ */
+function createFormattedText(width, g, structuredText, addBackground = false) {
+  const lineHeight = 1.1;
+  const labelGroup = g.append('g');
+  let bkg = labelGroup.insert('rect').attr('class', 'background');
+  const textElement = labelGroup.append('text').attr('y', '-10.1');
+  // .attr('dominant-baseline', 'middle')
+  // .attr('text-anchor', 'middle');
+  // .attr('text-anchor', 'middle');
+  let lineIndex = -1;
+  structuredText.forEach((line) => {
+    lineIndex++;
+    let tspan = createTspan(textElement, lineIndex, lineHeight);
+
+    let words = [...line].reverse();
+    let currentWord;
+    let wrappedLine = [];
+
+    while (words.length) {
+      currentWord = words.pop();
+      wrappedLine.push(currentWord);
+
+      updateTextContentAndStyles(tspan, wrappedLine);
+
+      if (tspan.node().getComputedTextLength() > width) {
+        wrappedLine.pop();
+        words.push(currentWord);
+
+        updateTextContentAndStyles(tspan, wrappedLine);
+
+        wrappedLine = [];
+        lineIndex++;
+        tspan = createTspan(textElement, lineIndex, lineHeight);
+      }
+    }
+  });
+  if (addBackground) {
+    const bbox = textElement.node().getBBox();
+    const padding = 2;
+    bkg
+      .attr('x', -padding)
+      .attr('y', -padding)
+      .attr('width', bbox.width + 2 * padding)
+      .attr('height', bbox.height + 2 * padding);
+    // .style('fill', 'red');
+
+    return labelGroup.node();
+  } else {
+    return textElement.node();
+  }
+}
+
+/**
+ * Updates the text content and styles of the given tspan element based on the
+ * provided wrappedLine data.
+ *
+ * @param {object} tspan - The tspan element to update.
+ * @param {Array} wrappedLine - The line data to apply to the tspan element.
+ */
+function updateTextContentAndStyles(tspan, wrappedLine) {
+  tspan.text('');
+
+  wrappedLine.forEach((word, index) => {
+    const innerTspan = tspan
+      .append('tspan')
+      .attr('font-style', word.type === 'em' ? 'italic' : 'normal')
+      .attr('class', 'text-inner-tspan')
+      .attr('font-weight', word.type === 'strong' ? 'bold' : 'normal');
+    const special = ['"', "'", '.', ',', ':', ';', '!', '?', '(', ')', '[', ']', '{', '}'];
+    if (index === 0) {
+      innerTspan.text(word.content);
+    } else {
+      innerTspan.text(' ' + word.content);
+    }
+  });
+}
+
+/**
+ *
+ * @param el
+ * @param {*} text
+ * @param {*} param1
+ * @param root0
+ * @param root0.style
+ * @param root0.isTitle
+ * @param root0.classes
+ * @param root0.useHtmlLabels
+ * @param root0.isNode
+ * @returns
+ */
+// Note when using from flowcharts converting the API isNode means classes should be set accordingly. When using htmlLabels => to sett classes to'nodeLabel' when isNode=true otherwise 'edgeLabel'
+// When not using htmlLabels => to set classes to 'title-row' when isTitle=true otherwise 'title-row'
+export const createText = (
+  el,
+  text = '',
+  {
+    style = '',
+    isTitle = false,
+    classes = '',
+    useHtmlLabels = true,
+    isNode = true,
+    width,
+    addSvgBackground = false,
+  } = {}
+) => {
+  log.info('createText', text, style, isTitle, classes, useHtmlLabels, isNode, addSvgBackground);
+  if (useHtmlLabels) {
+    // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
+    // text = text.replace(/\\n|\n/g, '<br />');
+    const htmlText = markdownToHTML(text);
+    // log.info('markdo  wnToHTML' + text, markdownToHTML(text));
+    const node = {
+      isNode,
+      label: decodeEntities(htmlText).replace(
+        /fa[blrs]?:fa-[\w-]+/g,
+        (s) => `<i class='${s.replace(':', ' ')}'></i>`
+      ),
+      labelStyle: style.replace('fill:', 'color:'),
+    };
+    let vertexNode = addHtmlSpan(el, node, width, classes);
+    return vertexNode;
+  } else {
+    const structuredText = markdownToLines(text);
+    const special = ['"', "'", '.', ',', ':', ';', '!', '?', '(', ')', '[', ']', '{', '}'];
+    let lastWord;
+    structuredText.forEach((line) => {
+      line.forEach((word) => {
+        if (special.includes(word.content) && lastWord) {
+          lastWord.content += word.content;
+          word.content = '';
+        }
+        lastWord = word;
+      });
+    });
+    const svgLabel = createFormattedText(width, el, structuredText, addSvgBackground);
+    return svgLabel;
+  }
+};

packages/mermaid/src/rendering-util/handle-markdown-text.js

@@ -0,0 +1,94 @@
+import SimpleMarkdown from '@khanacademy/simple-markdown';
+
+/**
+ *
+ * @param markdown
+ */
+function preprocessMarkdown(markdown) {
+  // Replace multiple newlines with a single newline
+  const withoutMultipleNewlines = markdown.replace(/\n{2,}/g, '\n');
+  // Remove extra spaces at the beginning of each line
+  const withoutExtraSpaces = withoutMultipleNewlines.replace(/^\s+/gm, '');
+  return withoutExtraSpaces;
+}
+
+/**
+ *
+ * @param markdown
+ */
+export function markdownToLines(markdown) {
+  const preprocessedMarkdown = preprocessMarkdown(markdown);
+  const mdParse = SimpleMarkdown.defaultBlockParse;
+  const syntaxTree = mdParse(preprocessedMarkdown);
+
+  let lines = [[]];
+  let currentLine = 0;
+
+  /**
+   *
+   * @param node
+   * @param parentType
+   */
+  function processNode(node, parentType) {
+    if (node.type === 'text') {
+      const textLines = node.content.split('\n');
+
+      textLines.forEach((textLine, index) => {
+        if (index !== 0) {
+          currentLine++;
+          lines.push([]);
+        }
+
+        // textLine.split(/ (?=[^!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]+)/).forEach((word) => {
+        textLine.split(' ').forEach((word) => {
+          if (word) {
+            lines[currentLine].push({ content: word, type: parentType || 'normal' });
+          }
+        });
+      });
+    } else if (node.type === 'strong' || node.type === 'em') {
+      node.content.forEach((contentNode) => {
+        processNode(contentNode, node.type);
+      });
+    }
+  }
+
+  syntaxTree.forEach((treeNode) => {
+    if (treeNode.type === 'paragraph') {
+      treeNode.content.forEach((contentNode) => {
+        processNode(contentNode);
+      });
+    }
+  });
+
+  return lines;
+}
+
+/**
+ *
+ * @param markdown
+ */
+export function markdownToHTML(markdown) {
+  const mdParse = SimpleMarkdown.defaultBlockParse;
+  const syntaxTree = mdParse(markdown);
+
+  /**
+   *
+   * @param node
+   */
+  function output(node) {
+    if (node.type === 'text') {
+      return node.content.replace(/\n/g, '<br/>');
+    } else if (node.type === 'strong') {
+      return `<strong>${node.content.map(output).join('')}</strong>`;
+    } else if (node.type === 'em') {
+      return `<em>${node.content.map(output).join('')}</em>`;
+    } else if (node.type === 'paragraph') {
+      return `<p>${node.content.map(output).join('')}</p>`;
+    } else {
+      return '';
+    }
+  }
+
+  return syntaxTree.map(output).join('');
+}

packages/mermaid/src/rendering-util/handle-markdown-text.spec.js

@@ -0,0 +1,253 @@
+// import { test } from 'vitest';
+import { markdownToLines, markdownToHTML } from './handle-markdown-text';
+import { test } from 'vitest';
+
+test('markdownToLines - Basic test', () => {
+  const input = `This is regular text
+Here is a new line
+There is some words **with a bold** section
+Here is a line *with an italic* section`;
+
+  const expectedOutput = [
+    [
+      { content: 'This', type: 'normal' },
+      { content: 'is', type: 'normal' },
+      { content: 'regular', type: 'normal' },
+      { content: 'text', type: 'normal' },
+    ],
+    [
+      { content: 'Here', type: 'normal' },
+      { content: 'is', type: 'normal' },
+      { content: 'a', type: 'normal' },
+      { content: 'new', type: 'normal' },
+      { content: 'line', type: 'normal' },
+    ],
+    [
+      { content: 'There', type: 'normal' },
+      { content: 'is', type: 'normal' },
+      { content: 'some', type: 'normal' },
+      { content: 'words', type: 'normal' },
+      { content: 'with', type: 'strong' },
+      { content: 'a', type: 'strong' },
+      { content: 'bold', type: 'strong' },
+      { content: 'section', type: 'normal' },
+    ],
+    [
+      { content: 'Here', type: 'normal' },
+      { content: 'is', type: 'normal' },
+      { content: 'a', type: 'normal' },
+      { content: 'line', type: 'normal' },
+      { content: 'with', type: 'em' },
+      { content: 'an', type: 'em' },
+      { content: 'italic', type: 'em' },
+      { content: 'section', type: 'normal' },
+    ],
+  ];
+
+  const output = markdownToLines(input);
+  expect(output).toEqual(expectedOutput);
+});
+
+test('markdownToLines - Empty input', () => {
+  const input = '';
+  const expectedOutput = [[]];
+  const output = markdownToLines(input);
+  expect(output).toEqual(expectedOutput);
+});
+
+test('markdownToLines - No formatting', () => {
+  const input = `This is a simple test
+with no formatting`;
+
+  const expectedOutput = [
+    [
+      { content: 'This', type: 'normal' },
+      { content: 'is', type: 'normal' },
+      { content: 'a', type: 'normal' },
+      { content: 'simple', type: 'normal' },
+      { content: 'test', type: 'normal' },
+    ],
+    [
+      { content: 'with', type: 'normal' },
+      { content: 'no', type: 'normal' },
+      { content: 'formatting', type: 'normal' },
+    ],
+  ];
+
+  const output = markdownToLines(input);
+  expect(output).toEqual(expectedOutput);
+});
+
+test('markdownToLines - Only bold formatting', () => {
+  const input = `This is a **bold** test`;
+
+  const expectedOutput = [
+    [
+      { content: 'This', type: 'normal' },
+      { content: 'is', type: 'normal' },
+      { content: 'a', type: 'normal' },
+      { content: 'bold', type: 'strong' },
+      { content: 'test', type: 'normal' },
+    ],
+  ];
+
+  const output = markdownToLines(input);
+  expect(output).toEqual(expectedOutput);
+});
+
+test('markdownToLines - paragraph 1', () => {
+  const input = `**Start** with
+    a second line`;
+
+  const expectedOutput = [
+    [
+      { content: 'Start', type: 'strong' },
+      { content: 'with', type: 'normal' },
+    ],
+    [
+      { content: 'a', type: 'normal' },
+      { content: 'second', type: 'normal' },
+      { content: 'line', type: 'normal' },
+    ],
+  ];
+
+  const output = markdownToLines(input);
+  expect(output).toEqual(expectedOutput);
+});
+
+test('markdownToLines - paragraph', () => {
+  const input = `**Start** with
+
+    a second line`;
+
+  const expectedOutput = [
+    [
+      { content: 'Start', type: 'strong' },
+      { content: 'with', type: 'normal' },
+    ],
+    [
+      { content: 'a', type: 'normal' },
+      { content: 'second', type: 'normal' },
+      { content: 'line', type: 'normal' },
+    ],
+  ];
+
+  const output = markdownToLines(input);
+  expect(output).toEqual(expectedOutput);
+});
+
+test('markdownToLines - Only italic formatting', () => {
+  const input = `This is an *italic* test`;
+
+  const expectedOutput = [
+    [
+      { content: 'This', type: 'normal' },
+      { content: 'is', type: 'normal' },
+      { content: 'an', type: 'normal' },
+      { content: 'italic', type: 'em' },
+      { content: 'test', type: 'normal' },
+    ],
+  ];
+
+  const output = markdownToLines(input);
+  expect(output).toEqual(expectedOutput);
+});
+
+it('markdownToLines - Mixed formatting', () => {
+  const input = `*Italic* and **bold** formatting`;
+
+  const expectedOutput = [
+    [
+      { content: 'Italic', type: 'em' },
+      { content: 'and', type: 'normal' },
+      { content: 'bold', type: 'strong' },
+      { content: 'formatting', type: 'normal' },
+    ],
+  ];
+
+  const output = markdownToLines(input);
+  expect(output).toEqual(expectedOutput);
+});
+
+it('markdownToLines - Mixed formatting', () => {
+  const input = `The dog in **the** hog... a *very long text* about it
+Word!`;
+
+  const expectedOutput = [
+    [
+      { content: 'The', type: 'normal' },
+      { content: 'dog', type: 'normal' },
+      { content: 'in', type: 'normal' },
+      { content: 'the', type: 'strong' },
+      { content: 'hog', type: 'normal' },
+      { content: '.', type: 'normal' },
+      { content: '.', type: 'normal' },
+      { content: '.', type: 'normal' },
+      { content: 'a', type: 'normal' },
+      { content: 'very', type: 'em' },
+      { content: 'long', type: 'em' },
+      { content: 'text', type: 'em' },
+      { content: 'about', type: 'normal' },
+      { content: 'it', type: 'normal' },
+    ],
+    [
+      { content: 'Word', type: 'normal' },
+      { content: '!', type: 'normal' },
+    ],
+  ];
+
+  const output = markdownToLines(input);
+  expect(output).toEqual(expectedOutput);
+});
+
+test('markdownToHTML - Basic test', () => {
+  const input = `This is regular text
+Here is a new line
+There is some words **with a bold** section
+Here is a line *with an italic* section`;
+
+  const expectedOutput = `<p>This is regular text<br/>Here is a new line<br/>There is some words <strong>with a bold</strong> section<br/>Here is a line <em>with an italic</em> section</p>`;
+
+  const output = markdownToHTML(input);
+  expect(output).toEqual(expectedOutput);
+});
+
+test('markdownToHTML - Empty input', () => {
+  const input = '';
+  const expectedOutput = '';
+  const output = markdownToHTML(input);
+  expect(output).toEqual(expectedOutput);
+});
+
+test('markdownToHTML - No formatting', () => {
+  const input = `This is a simple test
+with no formatting`;
+
+  const expectedOutput = `<p>This is a simple test<br/>with no formatting</p>`;
+  const output = markdownToHTML(input);
+  expect(output).toEqual(expectedOutput);
+});
+
+test('markdownToHTML - Only bold formatting', () => {
+  const input = `This is a **bold** test`;
+
+  const expectedOutput = `<p>This is a <strong>bold</strong> test</p>`;
+  const output = markdownToHTML(input);
+  expect(output).toEqual(expectedOutput);
+});
+
+test('markdownToHTML - Only italic formatting', () => {
+  const input = `This is an *italic* test`;
+
+  const expectedOutput = `<p>This is an <em>italic</em> test</p>`;
+  const output = markdownToHTML(input);
+  expect(output).toEqual(expectedOutput);
+});
+
+test('markdownToHTML - Mixed formatting', () => {
+  const input = `*Italic* and **bold** formatting`;
+
+  const expectedOutput = `<p><em>Italic</em> and <strong>bold</strong> formatting</p>`;
+  const output = markdownToHTML(input);
+  expect(output).toEqual(expectedOutput);
+});

packages/mermaid/src/styles.spec.ts

@@ -0,0 +1,120 @@
+import { vi } from 'vitest';
+
+// @ts-expect-error This module has no TypeScript types
+import { validate } from 'csstree-validator';
+import { compile, serialize, stringify } from 'stylis';
+
+import { getConfig } from './config.js';
+import theme from './themes/index.js';
+
+/**
+ * Import the getStyles function from each diagram.
+ *
+ * Unfortunately, we can't use the `diagrams/*?/*Detector.ts` functions,
+ * because many of the diagrams have a circular dependency import error
+ * (they import mermaidAPI.js, which imports diagramOrchestrator.js, which causes a loop)
+ */
+import c4 from './diagrams/c4/styles.js';
+import classDiagram from './diagrams/class/styles.js';
+import flowchart from './diagrams/flowchart/styles.js';
+import flowchartElk from './diagrams/flowchart/elk/styles.js';
+import er from './diagrams/er/styles.js';
+import error from './diagrams/error/styles.js';
+import git from './diagrams/git/styles.js';
+import gantt from './diagrams/gantt/styles.js';
+import info from './diagrams/info/styles.js';
+import pie from './diagrams/pie/styles.js';
+import requirement from './diagrams/requirement/styles.js';
+import sequence from './diagrams/sequence/styles.js';
+import state from './diagrams/state/styles.js';
+import journey from './diagrams/user-journey/styles.js';
+import timeline from './diagrams/timeline/styles.js';
+import mindmap from './diagrams/mindmap/styles.js';
+import themes from './themes/index.js';
+
+async function checkValidStylisCSSStyleSheet(stylisString: string) {
+  const cssString = serialize(compile(`#my-svg-id{${stylisString}}`), stringify);
+  const errors = validate(cssString, 'this-file-was-created-by-tests.css') as Error[];
+
+  const unexpectedErrors = errors.filter((error) => {
+    const cssErrorsToIgnore = [
+      // Valid in SVG2, see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/rx
+      // Ideally, we'd remove this, since some browsers do not support SVG2.
+      'Unknown property `rx`',
+      // Valid in SVG2, see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/ry
+      'Unknown property `ry`',
+      // TODO: I'm pretty sure that even in SVG2, this isn't allowed to be a CSS
+      // attribute.
+      'Unknown property `dy`',
+    ];
+    return !cssErrorsToIgnore.some((cssErrorToIgnore) => error.message.match(cssErrorToIgnore));
+  });
+
+  if (unexpectedErrors.length > 0) {
+    throw new Error(
+      `The given CSS string was invalid: ${errors}.\n\n` +
+        'Copy the below CSS into https://jigsaw.w3.org/css-validator/validator to help debug where the invalid CSS is:\n\n' +
+        `Original CSS value was ${cssString}`
+    );
+  }
+}
+
+describe('styles', () => {
+  beforeEach(() => {
+    // resets the styles added to addStylesForDiagram()
+    vi.resetModules();
+  });
+
+  describe('getStyles', () => {
+    test('should return a valid style for an empty type', async () => {
+      const { default: getStyles, addStylesForDiagram } = await import('./styles.js');
+
+      const diagramType = 'my-custom-mocked-type-with-no-styles';
+      const myTypeGetStylesFunc = vi.fn().mockReturnValue('');
+
+      addStylesForDiagram(diagramType, myTypeGetStylesFunc);
+
+      const styles = getStyles(diagramType, '', getConfig().themeVariables);
+
+      await checkValidStylisCSSStyleSheet(styles);
+    });
+
+    /**
+     * Test CSS for each diagram type and each theme.
+     */
+    for (const themeId of Object.keys(theme) as (keyof typeof theme)[]) {
+      for (const [diagramId, getDiagramStyles] of Object.entries({
+        c4,
+        classDiagram,
+        er,
+        error,
+        flowchart,
+        flowchartElk,
+        gantt,
+        git,
+        info,
+        journey,
+        mindmap,
+        pie,
+        requirement,
+        sequence,
+        state,
+        timeline,
+      })) {
+        test(`should return a valid style for diagram ${diagramId} and theme ${themeId}`, async () => {
+          const { default: getStyles, addStylesForDiagram } = await import('./styles.js');
+
+          addStylesForDiagram(diagramId, getDiagramStyles);
+          const styles = getStyles(
+            diagramId,
+            '',
+            // @ts-expect-error This will probably be broken until we create a proper Themes type.
+            themes[themeId].getThemeVariables()
+          );
+
+          await checkValidStylisCSSStyleSheet(styles);
+        });
+      }
+    }
+  });
+});

packages/mermaid/src/themes/theme-base.js

@@ -46,8 +46,12 @@ class Theme {
     this.secondaryTextColor = this.secondaryTextColor || invert(this.secondaryColor);
     this.tertiaryTextColor = this.tertiaryTextColor || invert(this.tertiaryColor);
     this.lineColor = this.lineColor || invert(this.background);
+    this.arrowheadColor = this.arrowheadColor || invert(this.background);
     this.textColor = this.textColor || this.primaryTextColor;
 
+    // TODO: should this instead default to secondaryBorderColor?
+    this.border2 = this.border2 || this.tertiaryBorderColor;
+
     /* Flowchart variables */
     this.nodeBkg = this.nodeBkg || this.primaryColor;
     this.mainBkg = this.mainBkg || this.primaryColor;
@@ -219,7 +223,7 @@ class Theme {
     /* requirement-diagram */
     this.requirementBackground = this.requirementBackground || this.primaryColor;
     this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;
-    this.requirementBorderSize = this.requirementBorderSize || this.primaryBorderColor;
+    this.requirementBorderSize = this.requirementBorderSize || '1';
     this.requirementTextColor = this.requirementTextColor || this.primaryTextColor;
     this.relationColor = this.relationColor || this.lineColor;
     this.relationLabelBackground =

packages/mermaid/src/themes/theme-dark.js

@@ -64,6 +64,7 @@ class Theme {
     this.sectionBkgColor = darken('#EAE8D9', 30);
     this.altSectionBkgColor = 'calculated';
     this.sectionBkgColor2 = '#EAE8D9';
+    this.excludeBkgColor = darken(this.sectionBkgColor, 10);
     this.taskBorderColor = rgba(255, 255, 255, 70);
     this.taskBkgColor = 'calculated';
     this.taskTextColor = 'calculated';
@@ -81,9 +82,8 @@ class Theme {
     this.todayLineColor = '#DB5757';
 
     /* C4 Context Diagram variables */
-
+    this.personBorder = this.primaryBorderColor;
-    this.personBorder = 'calculated';
+    this.personBkg = this.mainBkg;
-    this.personBkg = 'calculated';
 
     /* state colors */
     this.labelColor = 'calculated';
@@ -232,7 +232,7 @@ class Theme {
     /* requirement-diagram */
     this.requirementBackground = this.requirementBackground || this.primaryColor;
     this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;
-    this.requirementBorderSize = this.requirementBorderSize || this.primaryBorderColor;
+    this.requirementBorderSize = this.requirementBorderSize || '1';
     this.requirementTextColor = this.requirementTextColor || this.primaryTextColor;
     this.relationColor = this.relationColor || this.lineColor;
     this.relationLabelBackground =
@@ -257,6 +257,14 @@ class Theme {
     this.gitInv5 = this.gitInv5 || invert(this.git5);
     this.gitInv6 = this.gitInv6 || invert(this.git6);
     this.gitInv7 = this.gitInv7 || invert(this.git7);
+    this.gitBranchLabel0 = this.gitBranchLabel0 || invert(this.labelTextColor);
+    this.gitBranchLabel1 = this.gitBranchLabel1 || this.labelTextColor;
+    this.gitBranchLabel2 = this.gitBranchLabel2 || this.labelTextColor;
+    this.gitBranchLabel3 = this.gitBranchLabel3 || invert(this.labelTextColor);
+    this.gitBranchLabel4 = this.gitBranchLabel4 || this.labelTextColor;
+    this.gitBranchLabel5 = this.gitBranchLabel5 || this.labelTextColor;
+    this.gitBranchLabel6 = this.gitBranchLabel6 || this.labelTextColor;
+    this.gitBranchLabel7 = this.gitBranchLabel7 || this.labelTextColor;
 
     this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;
     this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;

packages/mermaid/src/themes/theme-default.js

@@ -109,9 +109,8 @@ class Theme {
     this.todayLineColor = 'red';
 
     /* C4 Context Diagram variables */
-
+    this.personBorder = this.primaryBorderColor;
-    this.personBorder = 'calculated';
+    this.personBkg = this.mainBkg;
-    this.personBkg = 'calculated';
 
     /* state colors */
     this.labelColor = 'black';
@@ -251,7 +250,7 @@ class Theme {
     /* requirement-diagram */
     this.requirementBackground = this.requirementBackground || this.primaryColor;
     this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;
-    this.requirementBorderSize = this.requirementBorderSize || this.primaryBorderColor;
+    this.requirementBorderSize = this.requirementBorderSize || '1';
     this.requirementTextColor = this.requirementTextColor || this.primaryTextColor;
     this.relationColor = this.relationColor || this.lineColor;
     this.relationLabelBackground = this.relationLabelBackground || this.labelBackground;

packages/mermaid/src/themes/theme-forest.js

@@ -83,9 +83,8 @@ class Theme {
     this.todayLineColor = 'red';
 
     /* C4 Context Diagram variables */
-
+    this.personBorder = this.primaryBorderColor;
-    this.personBorder = 'calculated';
+    this.personBkg = this.mainBkg;
-    this.personBkg = 'calculated';
 
     /* state colors */
     this.labelColor = 'black';
@@ -94,6 +93,15 @@ class Theme {
     this.errorTextColor = '#552222';
   }
   updateColors() {
+    /* Sequence Diagram variables */
+    this.actorBorder = darken(this.mainBkg, 20);
+    this.actorBkg = this.mainBkg;
+    this.labelBoxBkgColor = this.actorBkg;
+    this.labelTextColor = this.actorTextColor;
+    this.loopTextColor = this.actorTextColor;
+    this.noteBorderColor = this.border2;
+    this.noteTextColor = this.actorTextColor;
+
     /* Each color-set will have a background, a foreground and a border color */
     this.cScale0 = this.cScale0 || this.primaryColor;
     this.cScale1 = this.cScale1 || this.secondaryColor;
@@ -145,16 +153,6 @@ class Theme {
     this.clusterBorder = this.border2;
     this.defaultLinkColor = this.lineColor;
 
-    /* Sequence Diagram variables */
-
-    this.actorBorder = darken(this.mainBkg, 20);
-    this.actorBkg = this.mainBkg;
-    this.labelBoxBkgColor = this.actorBkg;
-    this.labelTextColor = this.actorTextColor;
-    this.loopTextColor = this.actorTextColor;
-    this.noteBorderColor = this.border2;
-    this.noteTextColor = this.actorTextColor;
-
     /* Gantt chart variables */
 
     this.taskBorderColor = this.border1;
@@ -220,7 +218,7 @@ class Theme {
     /* requirement-diagram */
     this.requirementBackground = this.requirementBackground || this.primaryColor;
     this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;
-    this.requirementBorderSize = this.requirementBorderSize || this.primaryBorderColor;
+    this.requirementBorderSize = this.requirementBorderSize || '1';
     this.requirementTextColor = this.requirementTextColor || this.primaryTextColor;
     this.relationColor = this.relationColor || this.lineColor;
     this.relationLabelBackground = this.relationLabelBackground || this.edgeLabelBackground;
@@ -262,6 +260,14 @@ class Theme {
     this.gitInv5 = this.gitInv5 || invert(this.git5);
     this.gitInv6 = this.gitInv6 || invert(this.git6);
     this.gitInv7 = this.gitInv7 || invert(this.git7);
+    this.gitBranchLabel0 = this.gitBranchLabel0 || invert(this.labelTextColor);
+    this.gitBranchLabel1 = this.gitBranchLabel1 || this.labelTextColor;
+    this.gitBranchLabel2 = this.gitBranchLabel2 || this.labelTextColor;
+    this.gitBranchLabel3 = this.gitBranchLabel3 || invert(this.labelTextColor);
+    this.gitBranchLabel4 = this.gitBranchLabel4 || this.labelTextColor;
+    this.gitBranchLabel5 = this.gitBranchLabel5 || this.labelTextColor;
+    this.gitBranchLabel6 = this.gitBranchLabel6 || this.labelTextColor;
+    this.gitBranchLabel7 = this.gitBranchLabel7 || this.labelTextColor;
 
     this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;
     this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;

packages/mermaid/src/themes/theme-neutral.js

@@ -95,9 +95,8 @@ class Theme {
     this.todayLineColor = 'calculated';
 
     /* C4 Context Diagram variables */
-
+    this.personBorder = this.primaryBorderColor;
-    this.personBorder = 'calculated';
+    this.personBkg = this.mainBkg;
-    this.personBkg = 'calculated';
 
     /* state colors */
     this.labelColor = 'black';
@@ -109,6 +108,22 @@ class Theme {
     this.secondBkg = lighten(this.contrast, 55);
     this.border2 = this.contrast;
 
+    /* Sequence Diagram variables */
+
+    this.actorBorder = lighten(this.border1, 23);
+    this.actorBkg = this.mainBkg;
+    this.actorTextColor = this.text;
+    this.actorLineColor = this.lineColor;
+    this.signalColor = this.text;
+    this.signalTextColor = this.text;
+    this.labelBoxBkgColor = this.actorBkg;
+    this.labelBoxBorderColor = this.actorBorder;
+    this.labelTextColor = this.text;
+    this.loopTextColor = this.text;
+    this.noteBorderColor = '#999';
+    this.noteBkgColor = '#666';
+    this.noteTextColor = '#fff';
+
     /* Color Scale */
     /* Each color-set will have a background, a foreground and a border color */
 
@@ -162,22 +177,6 @@ class Theme {
     this.defaultLinkColor = this.lineColor;
     this.titleColor = this.text;
 
-    /* Sequence Diagram variables */
-
-    this.actorBorder = lighten(this.border1, 23);
-    this.actorBkg = this.mainBkg;
-    this.actorTextColor = this.text;
-    this.actorLineColor = this.lineColor;
-    this.signalColor = this.text;
-    this.signalTextColor = this.text;
-    this.labelBoxBkgColor = this.actorBkg;
-    this.labelBoxBorderColor = this.actorBorder;
-    this.labelTextColor = this.text;
-    this.loopTextColor = this.text;
-    this.noteBorderColor = '#999';
-    this.noteBkgColor = '#666';
-    this.noteTextColor = '#fff';
-
     /* Gantt chart variables */
 
     this.sectionBkgColor = lighten(this.contrast, 30);
@@ -250,7 +249,7 @@ class Theme {
     /* requirement-diagram */
     this.requirementBackground = this.requirementBackground || this.primaryColor;
     this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;
-    this.requirementBorderSize = this.requirementBorderSize || this.primaryBorderColor;
+    this.requirementBorderSize = this.requirementBorderSize || '1';
     this.requirementTextColor = this.requirementTextColor || this.primaryTextColor;
     this.relationColor = this.relationColor || this.lineColor;
     this.relationLabelBackground = this.relationLabelBackground || this.edgeLabelBackground;

pnpm-lock.yaml

@@ -1,390 +1,275 @@
-lockfileVersion: 5.4-inlineSpecifiers
+lockfileVersion: 5.4
 
 importers:
 
   .:
+    specifiers:
+      '@applitools/eyes-cypress': ^3.27.6
+      '@commitlint/cli': ^17.2.0
+      '@commitlint/config-conventional': ^17.2.0
+      '@cspell/eslint-plugin': ^6.14.2
+      '@rollup/plugin-typescript': ^11.0.0
+      '@types/cors': ^2.8.13
+      '@types/eslint': ^8.4.10
+      '@types/express': ^4.17.17
+      '@types/js-yaml': ^4.0.5
+      '@types/jsdom': ^21.0.0
+      '@types/lodash': ^4.14.188
+      '@types/mdast': ^3.0.10
+      '@types/node': ^18.11.9
+      '@types/prettier': ^2.7.1
+      '@types/rollup-plugin-visualizer': ^4.2.1
+      '@typescript-eslint/eslint-plugin': ^5.48.2
+      '@typescript-eslint/parser': ^5.48.2
+      '@vitest/coverage-c8': ^0.29.0
+      '@vitest/spy': ^0.29.0
+      '@vitest/ui': ^0.29.0
+      concurrently: ^7.5.0
+      cors: ^2.8.5
+      coveralls: ^3.1.1
+      cypress: ^12.0.0
+      cypress-image-snapshot: ^4.0.1
+      esbuild: ^0.17.0
+      eslint: ^8.32.0
+      eslint-config-prettier: ^8.6.0
+      eslint-plugin-cypress: ^2.12.1
+      eslint-plugin-html: ^7.1.0
+      eslint-plugin-jest: ^27.1.5
+      eslint-plugin-jsdoc: ^39.6.2
+      eslint-plugin-json: ^3.1.0
+      eslint-plugin-lodash: ^7.4.0
+      eslint-plugin-markdown: ^3.0.0
+      eslint-plugin-no-only-tests: ^3.1.0
+      eslint-plugin-tsdoc: ^0.2.17
+      eslint-plugin-unicorn: ^45.0.0
+      express: ^4.18.2
+      globby: ^13.1.2
+      husky: ^8.0.2
+      jest: ^29.3.1
+      jison: ^0.4.18
+      js-yaml: ^4.1.0
+      jsdom: ^21.0.0
+      lint-staged: ^13.0.3
+      path-browserify: ^1.0.1
+      pnpm: ^7.15.0
+      prettier: ^2.7.1
+      prettier-plugin-jsdoc: ^0.4.2
+      rimraf: ^4.0.0
+      rollup-plugin-visualizer: ^5.8.3
+      start-server-and-test: ^1.15.4
+      ts-node: ^10.9.1
+      typescript: ^4.8.4
+      vite: ^4.1.1
+      vitest: ^0.29.0
     devDependencies:
-      '@applitools/eyes-cypress':
+      '@applitools/eyes-cypress': 3.27.6
-        specifier: ^3.27.6
+      '@commitlint/cli': 17.2.0
-        version: 3.27.6
+      '@commitlint/config-conventional': 17.2.0
-      '@commitlint/cli':
+      '@cspell/eslint-plugin': 6.14.2
-        specifier: ^17.2.0
+      '@rollup/plugin-typescript': 11.0.0_typescript@4.8.4
-        version: 17.2.0
+      '@types/cors': 2.8.13
-      '@commitlint/config-conventional':
+      '@types/eslint': 8.4.10
-        specifier: ^17.2.0
+      '@types/express': 4.17.17
-        version: 17.2.0
+      '@types/js-yaml': 4.0.5
-      '@cspell/eslint-plugin':
+      '@types/jsdom': 21.1.0
-        specifier: ^6.14.2
+      '@types/lodash': 4.14.188
-        version: 6.14.2
+      '@types/mdast': 3.0.10
-      '@rollup/plugin-typescript':
+      '@types/node': 18.11.9
-        specifier: ^11.0.0
+      '@types/prettier': 2.7.1
-        version: 11.0.0_typescript@4.8.4
+      '@types/rollup-plugin-visualizer': 4.2.1
-      '@types/cors':
+      '@typescript-eslint/eslint-plugin': 5.48.2_iljmjqxcygjq3saipl7gerxpvi
-        specifier: ^2.8.13
+      '@typescript-eslint/parser': 5.48.2_yygwinqv3a2io74xmwofqb7uka
-        version: 2.8.13
+      '@vitest/coverage-c8': 0.29.2_vitest@0.29.2
-      '@types/eslint':
+      '@vitest/spy': 0.29.2
-        specifier: ^8.4.10
+      '@vitest/ui': 0.29.2
-        version: 8.4.10
+      concurrently: 7.5.0
-      '@types/express':
+      cors: 2.8.5
-        specifier: ^4.17.17
+      coveralls: 3.1.1
-        version: 4.17.17
+      cypress: 12.5.1
-      '@types/js-yaml':
+      cypress-image-snapshot: 4.0.1_cypress@12.5.1+jest@29.3.1
-        specifier: ^4.0.5
+      esbuild: 0.17.0
-        version: 4.0.5
+      eslint: 8.32.0
-      '@types/jsdom':
+      eslint-config-prettier: 8.6.0_eslint@8.32.0
-        specifier: ^21.0.0
+      eslint-plugin-cypress: 2.12.1_eslint@8.32.0
-        version: 21.1.0
+      eslint-plugin-html: 7.1.0
-      '@types/lodash':
+      eslint-plugin-jest: 27.1.5_5rcd23qw3h5vuffwo2owxb3hw4
-        specifier: ^4.14.188
+      eslint-plugin-jsdoc: 39.6.2_eslint@8.32.0
-        version: 4.14.188
+      eslint-plugin-json: 3.1.0
-      '@types/mdast':
+      eslint-plugin-lodash: 7.4.0_eslint@8.32.0
-        specifier: ^3.0.10
+      eslint-plugin-markdown: 3.0.0_eslint@8.32.0
-        version: 3.0.10
+      eslint-plugin-no-only-tests: 3.1.0
-      '@types/node':
+      eslint-plugin-tsdoc: 0.2.17
-        specifier: ^18.11.9
+      eslint-plugin-unicorn: 45.0.0_eslint@8.32.0
-        version: 18.11.9
+      express: 4.18.2
-      '@types/prettier':
+      globby: 13.1.2
-        specifier: ^2.7.1
+      husky: 8.0.2
-        version: 2.7.1
+      jest: 29.3.1_odkjkoia5xunhxkdrka32ib6vi
-      '@types/rollup-plugin-visualizer':
+      jison: 0.4.18
-        specifier: ^4.2.1
+      js-yaml: 4.1.0
-        version: 4.2.1
+      jsdom: 21.1.0
-      '@typescript-eslint/eslint-plugin':
+      lint-staged: 13.0.3
-        specifier: ^5.48.2
+      path-browserify: 1.0.1
-        version: 5.48.2_iljmjqxcygjq3saipl7gerxpvi
+      pnpm: 7.15.0
-      '@typescript-eslint/parser':
+      prettier: 2.7.1
-        specifier: ^5.48.2
+      prettier-plugin-jsdoc: 0.4.2_prettier@2.7.1
-        version: 5.48.2_yygwinqv3a2io74xmwofqb7uka
+      rimraf: 4.1.2
-      '@vitest/coverage-c8':
+      rollup-plugin-visualizer: 5.8.3
-        specifier: ^0.29.0
+      start-server-and-test: 1.15.4
-        version: 0.29.2_vitest@0.29.2
+      ts-node: 10.9.1_cbe7ovvae6zqfnmtgctpgpys54
-      '@vitest/spy':
+      typescript: 4.8.4
-        specifier: ^0.29.0
+      vite: 4.1.1_@types+node@18.11.9
-        version: 0.29.2
+      vitest: 0.29.2_hjnfa4mohew6fc4mnpzgbfyvpa
-      '@vitest/ui':
-        specifier: ^0.29.0
-        version: 0.29.2
-      concurrently:
-        specifier: ^7.5.0
-        version: 7.5.0
-      cors:
-        specifier: ^2.8.5
-        version: 2.8.5
-      coveralls:
-        specifier: ^3.1.1
-        version: 3.1.1
-      cypress:
-        specifier: ^12.0.0
-        version: 12.5.1
-      cypress-image-snapshot:
-        specifier: ^4.0.1
-        version: 4.0.1_cypress@12.5.1+jest@29.3.1
-      esbuild:
-        specifier: ^0.17.0
-        version: 0.17.0
-      eslint:
-        specifier: ^8.32.0
-        version: 8.32.0
-      eslint-config-prettier:
-        specifier: ^8.6.0
-        version: 8.6.0_eslint@8.32.0
-      eslint-plugin-cypress:
-        specifier: ^2.12.1
-        version: 2.12.1_eslint@8.32.0
-      eslint-plugin-html:
-        specifier: ^7.1.0
-        version: 7.1.0
-      eslint-plugin-jest:
-        specifier: ^27.1.5
-        version: 27.1.5_5rcd23qw3h5vuffwo2owxb3hw4
-      eslint-plugin-jsdoc:
-        specifier: ^39.6.2
-        version: 39.6.2_eslint@8.32.0
-      eslint-plugin-json:
-        specifier: ^3.1.0
-        version: 3.1.0
-      eslint-plugin-lodash:
-        specifier: ^7.4.0
-        version: 7.4.0_eslint@8.32.0
-      eslint-plugin-markdown:
-        specifier: ^3.0.0
-        version: 3.0.0_eslint@8.32.0
-      eslint-plugin-no-only-tests:
-        specifier: ^3.1.0
-        version: 3.1.0
-      eslint-plugin-tsdoc:
-        specifier: ^0.2.17
-        version: 0.2.17
-      eslint-plugin-unicorn:
-        specifier: ^45.0.0
-        version: 45.0.0_eslint@8.32.0
-      express:
-        specifier: ^4.18.2
-        version: 4.18.2
-      globby:
-        specifier: ^13.1.2
-        version: 13.1.2
-      husky:
-        specifier: ^8.0.2
-        version: 8.0.2
-      jest:
-        specifier: ^29.3.1
-        version: 29.3.1_odkjkoia5xunhxkdrka32ib6vi
-      jison:
-        specifier: ^0.4.18
-        version: 0.4.18
-      js-yaml:
-        specifier: ^4.1.0
-        version: 4.1.0
-      jsdom:
-        specifier: ^21.0.0
-        version: 21.1.0
-      lint-staged:
-        specifier: ^13.0.3
-        version: 13.0.3
-      path-browserify:
-        specifier: ^1.0.1
-        version: 1.0.1
-      pnpm:
-        specifier: ^7.15.0
-        version: 7.15.0
-      prettier:
-        specifier: ^2.7.1
-        version: 2.7.1
-      prettier-plugin-jsdoc:
-        specifier: ^0.4.2
-        version: 0.4.2_prettier@2.7.1
-      rimraf:
-        specifier: ^4.0.0
-        version: 4.1.2
-      rollup-plugin-visualizer:
-        specifier: ^5.8.3
-        version: 5.8.3
-      start-server-and-test:
-        specifier: ^1.15.4
-        version: 1.15.4
-      ts-node:
-        specifier: ^10.9.1
-        version: 10.9.1_cbe7ovvae6zqfnmtgctpgpys54
-      typescript:
-        specifier: ^4.8.4
-        version: 4.8.4
-      vite:
-        specifier: ^4.1.1
-        version: 4.1.1_@types+node@18.11.9
-      vitest:
-        specifier: ^0.29.0
-        version: 0.29.2_hjnfa4mohew6fc4mnpzgbfyvpa
 
   packages/mermaid:
+    specifiers:
+      '@braintree/sanitize-url': ^6.0.0
+      '@khanacademy/simple-markdown': ^0.8.6
+      '@types/cytoscape': ^3.19.9
+      '@types/d3': ^7.4.0
+      '@types/dompurify': ^2.4.0
+      '@types/jsdom': ^21.0.0
+      '@types/lodash-es': ^4.17.7
+      '@types/micromatch': ^4.0.2
+      '@types/prettier': ^2.7.1
+      '@types/stylis': ^4.0.2
+      '@types/uuid': ^9.0.0
+      '@typescript-eslint/eslint-plugin': ^5.42.1
+      '@typescript-eslint/parser': ^5.42.1
+      chokidar: ^3.5.3
+      concurrently: ^7.5.0
+      coveralls: ^3.1.1
+      cpy-cli: ^4.2.0
+      cspell: ^6.14.3
+      csstree-validator: ^3.0.0
+      cytoscape: ^3.23.0
+      cytoscape-cose-bilkent: ^4.1.0
+      cytoscape-fcose: ^2.1.0
+      d3: ^7.4.0
+      dagre-d3-es: 7.0.10
+      dayjs: ^1.11.7
+      dompurify: 2.4.5
+      elkjs: ^0.8.2
+      globby: ^13.1.2
+      jison: ^0.4.18
+      js-base64: ^3.7.2
+      jsdom: ^21.0.0
+      khroma: ^2.0.0
+      lodash-es: ^4.17.21
+      micromatch: ^4.0.5
+      non-layered-tidy-tree-layout: ^2.0.2
+      path-browserify: ^1.0.1
+      prettier: ^2.7.1
+      remark: ^14.0.2
+      remark-frontmatter: ^4.0.1
+      remark-gfm: ^3.0.1
+      rimraf: ^4.0.0
+      start-server-and-test: ^1.14.0
+      stylis: ^4.1.2
+      ts-dedent: ^2.2.0
+      typedoc: ^0.23.18
+      typedoc-plugin-markdown: ^3.13.6
+      typescript: ^4.8.4
+      unist-util-flatmap: ^1.0.0
+      uuid: ^9.0.0
+      vitepress: ^1.0.0-alpha.46
+      vitepress-plugin-search: ^1.0.4-alpha.19
+      web-worker: ^1.2.0
     dependencies:
-      '@braintree/sanitize-url':
+      '@braintree/sanitize-url': 6.0.0
-        specifier: ^6.0.0
+      '@khanacademy/simple-markdown': 0.8.6_wcqkhtmu7mswc6yz4uyexck3ty
-        version: 6.0.0
+      cytoscape: 3.23.0
-      cytoscape:
+      cytoscape-cose-bilkent: 4.1.0_cytoscape@3.23.0
-        specifier: ^3.23.0
+      cytoscape-fcose: 2.1.0_cytoscape@3.23.0
-        version: 3.23.0
+      d3: 7.8.2
-      cytoscape-cose-bilkent:
+      dagre-d3-es: 7.0.10
-        specifier: ^4.1.0
+      dayjs: 1.11.7
-        version: 4.1.0_cytoscape@3.23.0
+      dompurify: 2.4.5
-      cytoscape-fcose:
+      elkjs: 0.8.2
-        specifier: ^2.1.0
+      khroma: 2.0.0
-        version: 2.1.0_cytoscape@3.23.0
+      lodash-es: 4.17.21
-      d3:
+      non-layered-tidy-tree-layout: 2.0.2
-        specifier: ^7.4.0
+      stylis: 4.1.2
-        version: 7.8.2
+      ts-dedent: 2.2.0
-      dagre-d3-es:
+      uuid: 9.0.0
-        specifier: 7.0.10
+      web-worker: 1.2.0
-        version: 7.0.10
-      dayjs:
-        specifier: ^1.11.7
-        version: 1.11.7
-      dompurify:
-        specifier: 2.4.5
-        version: 2.4.5
-      elkjs:
-        specifier: ^0.8.2
-        version: 0.8.2
-      khroma:
-        specifier: ^2.0.0
-        version: 2.0.0
-      lodash-es:
-        specifier: ^4.17.21
-        version: 4.17.21
-      non-layered-tidy-tree-layout:
-        specifier: ^2.0.2
-        version: 2.0.2
-      stylis:
-        specifier: ^4.1.2
-        version: 4.1.2
-      ts-dedent:
-        specifier: ^2.2.0
-        version: 2.2.0
-      uuid:
-        specifier: ^9.0.0
-        version: 9.0.0
-      web-worker:
-        specifier: ^1.2.0
-        version: 1.2.0
     devDependencies:
-      '@types/cytoscape':
+      '@types/cytoscape': 3.19.9
-        specifier: ^3.19.9
+      '@types/d3': 7.4.0
-        version: 3.19.9
+      '@types/dompurify': 2.4.0
-      '@types/d3':
+      '@types/jsdom': 21.1.0
-        specifier: ^7.4.0
+      '@types/lodash-es': 4.17.7
-        version: 7.4.0
+      '@types/micromatch': 4.0.2
-      '@types/dompurify':
+      '@types/prettier': 2.7.1
-        specifier: ^2.4.0
+      '@types/stylis': 4.0.2
-        version: 2.4.0
+      '@types/uuid': 9.0.0
-      '@types/jsdom':
+      '@typescript-eslint/eslint-plugin': 5.42.1_qxgr6oy2qtsmmpo3f6iejuryuq
-        specifier: ^21.0.0
+      '@typescript-eslint/parser': 5.42.1_yygwinqv3a2io74xmwofqb7uka
-        version: 21.1.0
+      chokidar: 3.5.3
-      '@types/lodash-es':
+      concurrently: 7.5.0
-        specifier: ^4.17.7
+      coveralls: 3.1.1
-        version: 4.17.7
+      cpy-cli: 4.2.0
-      '@types/micromatch':
+      cspell: 6.14.3
-        specifier: ^4.0.2
+      csstree-validator: 3.0.0
-        version: 4.0.2
+      globby: 13.1.2
-      '@types/prettier':
+      jison: 0.4.18
-        specifier: ^2.7.1
+      js-base64: 3.7.2
-        version: 2.7.1
+      jsdom: 21.1.0
-      '@types/stylis':
+      micromatch: 4.0.5
-        specifier: ^4.0.2
+      path-browserify: 1.0.1
-        version: 4.0.2
+      prettier: 2.7.1
-      '@types/uuid':
+      remark: 14.0.2
-        specifier: ^9.0.0
+      remark-frontmatter: 4.0.1
-        version: 9.0.0
+      remark-gfm: 3.0.1
-      '@typescript-eslint/eslint-plugin':
+      rimraf: 4.1.2
-        specifier: ^5.42.1
+      start-server-and-test: 1.14.0
-        version: 5.42.1_qxgr6oy2qtsmmpo3f6iejuryuq
+      typedoc: 0.23.18_typescript@4.8.4
-      '@typescript-eslint/parser':
+      typedoc-plugin-markdown: 3.13.6_typedoc@0.23.18
-        specifier: ^5.42.1
+      typescript: 4.8.4
-        version: 5.42.1_yygwinqv3a2io74xmwofqb7uka
+      unist-util-flatmap: 1.0.0
-      chokidar:
+      vitepress: 1.0.0-alpha.46_hoyvfk3ab7nzsjkhptt6ai7rzq
-        specifier: ^3.5.3
+      vitepress-plugin-search: 1.0.4-alpha.19_g67lr3vgasogkevpbew55lljzq
-        version: 3.5.3
-      concurrently:
-        specifier: ^7.5.0
-        version: 7.5.0
-      coveralls:
-        specifier: ^3.1.1
-        version: 3.1.1
-      cpy-cli:
-        specifier: ^4.2.0
-        version: 4.2.0
-      cspell:
-        specifier: ^6.14.3
-        version: 6.14.3
-      globby:
-        specifier: ^13.1.2
-        version: 13.1.2
-      jison:
-        specifier: ^0.4.18
-        version: 0.4.18
-      js-base64:
-        specifier: ^3.7.2
-        version: 3.7.2
-      jsdom:
-        specifier: ^21.0.0
-        version: 21.1.0
-      micromatch:
-        specifier: ^4.0.5
-        version: 4.0.5
-      path-browserify:
-        specifier: ^1.0.1
-        version: 1.0.1
-      prettier:
-        specifier: ^2.7.1
-        version: 2.7.1
-      remark:
-        specifier: ^14.0.2
-        version: 14.0.2
-      remark-frontmatter:
-        specifier: ^4.0.1
-        version: 4.0.1
-      remark-gfm:
-        specifier: ^3.0.1
-        version: 3.0.1
-      rimraf:
-        specifier: ^4.0.0
-        version: 4.1.2
-      start-server-and-test:
-        specifier: ^1.14.0
-        version: 1.14.0
-      typedoc:
-        specifier: ^0.23.18
-        version: 0.23.18_typescript@4.8.4
-      typedoc-plugin-markdown:
-        specifier: ^3.13.6
-        version: 3.13.6_typedoc@0.23.18
-      typescript:
-        specifier: ^4.8.4
-        version: 4.8.4
-      unist-util-flatmap:
-        specifier: ^1.0.0
-        version: 1.0.0
-      vitepress:
-        specifier: ^1.0.0-alpha.46
-        version: 1.0.0-alpha.46_tbpndr44ulefs3hehwpi2mkf2y
-      vitepress-plugin-search:
-        specifier: ^1.0.4-alpha.19
-        version: 1.0.4-alpha.19_g67lr3vgasogkevpbew55lljzq
 
   packages/mermaid-example-diagram:
+    specifiers:
+      '@braintree/sanitize-url': ^6.0.0
+      '@types/cytoscape': ^3.19.9
+      concurrently: ^7.5.0
+      cytoscape: ^3.23.0
+      cytoscape-cose-bilkent: ^4.1.0
+      cytoscape-fcose: ^2.1.0
+      d3: ^7.0.0
+      khroma: ^2.0.0
+      mermaid: workspace:*
+      non-layered-tidy-tree-layout: ^2.0.2
+      rimraf: ^4.0.0
     dependencies:
-      '@braintree/sanitize-url':
+      '@braintree/sanitize-url': 6.0.0
-        specifier: ^6.0.0
+      cytoscape: 3.23.0
-        version: 6.0.0
+      cytoscape-cose-bilkent: 4.1.0_cytoscape@3.23.0
-      cytoscape:
+      cytoscape-fcose: 2.1.0_cytoscape@3.23.0
-        specifier: ^3.23.0
+      d3: 7.8.2
-        version: 3.23.0
+      khroma: 2.0.0
-      cytoscape-cose-bilkent:
+      non-layered-tidy-tree-layout: 2.0.2
-        specifier: ^4.1.0
-        version: 4.1.0_cytoscape@3.23.0
-      cytoscape-fcose:
-        specifier: ^2.1.0
-        version: 2.1.0_cytoscape@3.23.0
-      d3:
-        specifier: ^7.0.0
-        version: 7.8.2
-      khroma:
-        specifier: ^2.0.0
-        version: 2.0.0
-      non-layered-tidy-tree-layout:
-        specifier: ^2.0.2
-        version: 2.0.2
     devDependencies:
-      '@types/cytoscape':
+      '@types/cytoscape': 3.19.9
-        specifier: ^3.19.9
+      concurrently: 7.5.0
-        version: 3.19.9
+      mermaid: link:../mermaid
-      concurrently:
+      rimraf: 4.1.2
-        specifier: ^7.5.0
-        version: 7.5.0
-      mermaid:
-        specifier: workspace:*
-        version: link:../mermaid
-      rimraf:
-        specifier: ^4.0.0
-        version: 4.1.2
 
   tests/webpack:
+    specifiers:
+      '@mermaid-js/mermaid-example-diagram': workspace:*
+      mermaid: workspace:*
+      webpack: ^5.74.0
+      webpack-cli: ^4.10.0
+      webpack-dev-server: ^4.11.1
     dependencies:
-      '@mermaid-js/mermaid-example-diagram':
+      '@mermaid-js/mermaid-example-diagram': link:../../packages/mermaid-example-diagram
-        specifier: workspace:*
+      mermaid: link:../../packages/mermaid
-        version: link:../../packages/mermaid-example-diagram
-      mermaid:
-        specifier: workspace:*
-        version: link:../../packages/mermaid
     devDependencies:
-      webpack:
+      webpack: 5.75.0_webpack-cli@4.10.0
-        specifier: ^5.74.0
+      webpack-cli: 4.10.0_uaydpeuxkjjcxdbyfgk36cjdxi
-        version: 5.75.0_webpack-cli@4.10.0
+      webpack-dev-server: 4.11.1_pda42hcaj7d62cr262fr632kue
-      webpack-cli:
-        specifier: ^4.10.0
-        version: 4.10.0_uaydpeuxkjjcxdbyfgk36cjdxi
-      webpack-dev-server:
-        specifier: ^4.11.1
-        version: 4.11.1_pda42hcaj7d62cr262fr632kue
 
 packages:
 
@@ -1708,10 +1593,10 @@ packages:
     resolution: {integrity: sha512-6SCwI7P8ao+se1TUsdZ7B4XzL+gqeQZnBc+2EONZlcVa0dVrk0NjETxozFKgMv0eEGH8QzP1fkN+A1rH61l4eg==}
     dev: true
 
-  /@docsearch/js/3.3.3_tbpndr44ulefs3hehwpi2mkf2y:
+  /@docsearch/js/3.3.3_hoyvfk3ab7nzsjkhptt6ai7rzq:
     resolution: {integrity: sha512-2xAv2GFuHzzmG0SSZgf8wHX0qZX8n9Y1ZirKUk5Wrdc+vH9CL837x2hZIUdwcPZI9caBA+/CzxsS68O4waYjUQ==}
     dependencies:
-      '@docsearch/react': 3.3.3_tbpndr44ulefs3hehwpi2mkf2y
+      '@docsearch/react': 3.3.3_hoyvfk3ab7nzsjkhptt6ai7rzq
       preact: 10.11.0
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -1720,7 +1605,7 @@ packages:
       - react-dom
     dev: true
 
-  /@docsearch/react/3.3.3_tbpndr44ulefs3hehwpi2mkf2y:
+  /@docsearch/react/3.3.3_hoyvfk3ab7nzsjkhptt6ai7rzq:
     resolution: {integrity: sha512-pLa0cxnl+G0FuIDuYlW+EBK6Rw2jwLw9B1RHIeS4N4s2VhsfJ/wzeCi3CWcs5yVfxLd5ZK50t//TMA5e79YT7Q==}
     peerDependencies:
       '@types/react': '>= 16.8.0 < 19.0.0'
@@ -1738,6 +1623,8 @@ packages:
       '@algolia/autocomplete-preset-algolia': 1.7.4_qs6lk5nhygj2o3hj4sf6xnr724
       '@docsearch/css': 3.3.3
       algoliasearch: 4.14.2
+      react: 16.14.0
+      react-dom: 16.14.0_react@16.14.0
     transitivePeerDependencies:
       - '@algolia/client-search'
     dev: true
@@ -2467,6 +2354,17 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.14
     dev: true
 
+  /@khanacademy/simple-markdown/0.8.6_wcqkhtmu7mswc6yz4uyexck3ty:
+    resolution: {integrity: sha512-mAUlR9lchzfqunR89pFvNI51jQKsMpJeWYsYWw0DQcUXczn/T/V6510utgvm7X0N3zN87j1SvuKk8cMbl9IAFw==}
+    peerDependencies:
+      react: 16.14.0
+      react-dom: 16.14.0
+    dependencies:
+      '@types/react': 18.0.33
+      react: 16.14.0
+      react-dom: 16.14.0_react@16.14.0
+    dev: false
+
   /@leichtgewicht/ip-codec/2.0.4:
     resolution: {integrity: sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==}
     dev: true
@@ -3082,6 +2980,10 @@ packages:
     resolution: {integrity: sha512-ri0UmynRRvZiiUJdiz38MmIblKK+oH30MztdBVR95dv/Ubw6neWSb8u1XpRb72L4qsZOhz+L+z9JD40SJmfWow==}
     dev: true
 
+  /@types/prop-types/15.7.5:
+    resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
+    dev: false
+
   /@types/qs/6.9.7:
     resolution: {integrity: sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==}
     dev: true
@@ -3090,6 +2992,14 @@ packages:
     resolution: {integrity: sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==}
     dev: true
 
+  /@types/react/18.0.33:
+    resolution: {integrity: sha512-sHxzVxeanvQyQ1lr8NSHaj0kDzcNiGpILEVt69g9S31/7PfMvNCKLKcsHw4lYKjs3cGNJjXSP4mYzX43QlnjNA==}
+    dependencies:
+      '@types/prop-types': 15.7.5
+      '@types/scheduler': 0.16.3
+      csstype: 3.1.2
+    dev: false
+
   /@types/responselike/1.0.0:
     resolution: {integrity: sha512-85Y2BjiufFzaMIlvJDvTTB8Fxl2xfLo4HgmHzVBz08w4wDePCTjYw66PdrolO0kzli3yam/YCgRufyo1DdQVTA==}
     dependencies:
@@ -3107,6 +3017,10 @@ packages:
       rollup: 2.79.1
     dev: true
 
+  /@types/scheduler/0.16.3:
+    resolution: {integrity: sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==}
+    dev: false
+
   /@types/semver/7.3.12:
     resolution: {integrity: sha512-WwA1MW0++RfXmCr12xeYOOC5baSC9mSb0ZqCquFzKhcoF4TvHu5MKOuXsncgZcpVFhB1pXd5hZmM0ryAoCp12A==}
     dev: true
@@ -3539,7 +3453,7 @@ packages:
       '@vue/shared': 3.2.45
       estree-walker: 2.0.2
       magic-string: 0.25.9
-      postcss: 8.4.20
+      postcss: 8.4.21
       source-map: 0.6.1
     dev: true
 
@@ -4631,6 +4545,13 @@ packages:
       jsonlint: 1.6.0
     dev: true
 
+  /clap/3.1.1:
+    resolution: {integrity: sha512-vp42956Ax06WwaaheYEqEOgXZ3VKJxgccZ0gJL0HpyiupkIS9RVJFo5eDU1BPeQAOqz+cclndZg4DCqG1sJReQ==}
+    engines: {node: ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
+    dependencies:
+      ansi-colors: 4.1.3
+    dev: true
+
   /clean-regexp/1.0.0:
     resolution: {integrity: sha512-GfisEZEJvzKrmGWkvfhgzcz/BllN1USeqD2V6tg14OAOgaCD2Z/PUEuxnAZ/nPvmaHRG7a8y77p1T/IRQ4D1Hw==}
     engines: {node: '>=4'}
@@ -5264,6 +5185,14 @@ packages:
       source-map: 0.6.1
     dev: true
 
+  /css-tree/2.3.1:
+    resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
+    dependencies:
+      mdn-data: 2.0.30
+      source-map-js: 1.0.2
+    dev: true
+
   /cssom/0.3.8:
     resolution: {integrity: sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==}
     dev: true
@@ -5279,10 +5208,24 @@ packages:
       cssom: 0.3.8
     dev: true
 
+  /csstree-validator/3.0.0:
+    resolution: {integrity: sha512-Y5OSq3wI0Xz6L7DCgJQtQ97U+v99SkX9r663VjpvUMJPhEr0A149OxiAGqcnokB5bt81irgnMudspBzujzqn0w==}
+    engines: {node: ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
+    hasBin: true
+    dependencies:
+      clap: 3.1.1
+      css-tree: 2.3.1
+      resolve: 1.22.1
+    dev: true
+
   /csstype/2.6.21:
     resolution: {integrity: sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==}
     dev: true
 
+  /csstype/3.1.2:
+    resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
+    dev: false
+
   /cypress-image-snapshot/4.0.1_cypress@12.5.1+jest@29.3.1:
     resolution: {integrity: sha512-PBpnhX/XItlx3/DAk5ozsXQHUi72exybBNH5Mpqj1DVmjq+S5Jd9WE5CRa4q5q0zuMZb2V2VpXHth6MjFpgj9Q==}
     engines: {node: '>=8'}
@@ -8248,7 +8191,6 @@ packages:
 
   /js-tokens/4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
-    dev: true
 
   /js-yaml/3.14.1:
     resolution: {integrity: sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==}
@@ -8656,6 +8598,12 @@ packages:
     resolution: {integrity: sha512-cHlYSUpL2s7Fb3394mYxwTYj8niTaNHUCLr0qdiCXQfSjfuA7CKofpX2uSwEfFDQ0EB7JcnMnm+GjbqqoinYYg==}
     dev: true
 
+  /loose-envify/1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+    dependencies:
+      js-tokens: 4.0.0
+
   /loupe/2.3.6:
     resolution: {integrity: sha512-RaPMZKiMy8/JruncMU5Bt6na1eftNoo++R4Y+N2FrxkDVTrGvcyzFTsaGif4QTeKESheMGegbhw6iUAq+5A8zA==}
     dependencies:
@@ -8863,6 +8811,10 @@ packages:
     resolution: {integrity: sha512-n4Vypz/DZgwo0iMHLQL49dJzlp7YtAJP+N07MZHpjPf/5XJuHUWstviF4Mn2jEiR/GNmtnRRqnwsXExk3igfFA==}
     dev: true
 
+  /mdn-data/2.0.30:
+    resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
+    dev: true
+
   /mdn-data/2.0.6:
     resolution: {integrity: sha512-rQvjv71olwNHgiTbfPZFkJtjNMciWgswYeciZhtvWLO8bmX3TnhyA62I6sTWOyZssWHJJjY6/KiWwqQsWWsqOA==}
     dev: true
@@ -9467,7 +9419,6 @@ packages:
   /object-assign/4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /object-inspect/1.12.2:
     resolution: {integrity: sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==}
@@ -9891,15 +9842,6 @@ packages:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
     dev: true
 
-  /postcss/8.4.20:
-    resolution: {integrity: sha512-6Q04AXR1212bXr5fh03u8aAwbLxAQNGQ/Q1LNa0VfOI06ZAlhPHtQvE4OIdpj4kLThXilalPnmDSOD65DcHt+g==}
-    engines: {node: ^10 || ^12 || >=14}
-    dependencies:
-      nanoid: 3.3.4
-      picocolors: 1.0.0
-      source-map-js: 1.0.2
-    dev: true
-
   /postcss/8.4.21:
     resolution: {integrity: sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==}
     engines: {node: ^10 || ^12 || >=14}
@@ -9978,6 +9920,13 @@ packages:
       sisteransi: 1.0.5
     dev: true
 
+  /prop-types/15.8.1:
+    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      react-is: 16.13.1
+
   /proxy-addr/2.0.7:
     resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
     engines: {node: '>= 0.10'}
@@ -10090,6 +10039,20 @@ packages:
       unpipe: 1.0.0
     dev: true
 
+  /react-dom/16.14.0_react@16.14.0:
+    resolution: {integrity: sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==}
+    peerDependencies:
+      react: ^16.14.0
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      prop-types: 15.8.1
+      react: 16.14.0
+      scheduler: 0.19.1
+
+  /react-is/16.13.1:
+    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
+
   /react-is/17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
     dev: true
@@ -10098,6 +10061,14 @@ packages:
     resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
     dev: true
 
+  /react/16.14.0:
+    resolution: {integrity: sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      prop-types: 15.8.1
+
   /read-pkg-up/7.0.1:
     resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==}
     engines: {node: '>=8'}
@@ -10506,6 +10477,12 @@ packages:
       xmlchars: 2.2.0
     dev: true
 
+  /scheduler/0.19.1:
+    resolution: {integrity: sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==}
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+
   /schema-utils/3.1.1:
     resolution: {integrity: sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==}
     engines: {node: '>= 10.13.0'}
@@ -11804,16 +11781,16 @@ packages:
       '@types/markdown-it': 12.2.3
       flexsearch: 0.7.31
       markdown-it: 13.0.1
-      vitepress: 1.0.0-alpha.46_tbpndr44ulefs3hehwpi2mkf2y
+      vitepress: 1.0.0-alpha.46_hoyvfk3ab7nzsjkhptt6ai7rzq
       vue: 3.2.45
     dev: true
 
-  /vitepress/1.0.0-alpha.46_tbpndr44ulefs3hehwpi2mkf2y:
+  /vitepress/1.0.0-alpha.46_hoyvfk3ab7nzsjkhptt6ai7rzq:
     resolution: {integrity: sha512-HiKiHzC0iTPsRsKs8XcsMeMzCpcCt5LWcX9mpDr288Ju+nQf1G8A2+Wm44ZkBsVv4EHxFK4ChmWyZrL1OJUXpg==}
     hasBin: true
     dependencies:
       '@docsearch/css': 3.3.3
-      '@docsearch/js': 3.3.3_tbpndr44ulefs3hehwpi2mkf2y
+      '@docsearch/js': 3.3.3_hoyvfk3ab7nzsjkhptt6ai7rzq
       '@vitejs/plugin-vue': 4.0.0_vite@4.1.1+vue@3.2.45
       '@vue/devtools-api': 6.5.0
       '@vueuse/core': 9.12.0_vue@3.2.45