Back to JS with jsdoc types

fix ClassGrammar

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -50,7 +50,7 @@ body:
     attributes:
       label: Setup
       description: |-
-        Please fill out the below info.
+        Please fill out the info below.
         Note that you only need to fill out the relevant section
       value: |-
         - Mermaid version: 

.github/workflows/build-docs.yml

@@ -0,0 +1,29 @@
+name: Build Vitepress docs
+
+on:
+  pull_request:
+
+permissions:
+  contents: read
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - uses: pnpm/action-setup@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          cache: pnpm
+          node-version: 18
+
+      - name: Install Packages
+        run: pnpm install --frozen-lockfile
+
+      - name: Run Build
+        run: pnpm --filter mermaid run docs:build:vitepress

.github/workflows/e2e-applitools.yml

@@ -38,15 +38,8 @@ jobs:
       - name: Setup Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3
         with:
-          cache: pnpm
           node-version: ${{ matrix.node-version }}
 
-      - name: Install Packages
-        run: |
-          pnpm install --frozen-lockfile
-        env:
-          CYPRESS_CACHE_FOLDER: .cache/Cypress
-
       - if: ${{ env.USE_APPLI }}
         name: Notify applitools of new batch
         # Copied from docs https://applitools.com/docs/topics/integrations/github-integration-ci-setup.html
@@ -54,19 +47,22 @@ jobs:
         env:
           # e.g. mermaid-js/mermaid/my-branch
           APPLITOOLS_BRANCH: ${{ github.repository }}/${{ github.ref_name }}
-          APPLITOOLS_PARENT_BRANCH: ${{ github.inputs.parent_branch }}
+          APPLITOOLS_PARENT_BRANCH: ${{ github.event.inputs.parent_branch }}
           APPLITOOLS_API_KEY: ${{ secrets.APPLITOOLS_API_KEY }}
           APPLITOOLS_SERVER_URL: 'https://eyesapi.applitools.com'
 
-      - name: Run E2E Tests
-        run: pnpm run e2e
+      - name: Cypress run
+        uses: cypress-io/github-action@v4
+        id: cypress
+        with:
+          start: pnpm run dev
+          wait-on: 'http://localhost:9000'
         env:
-          CYPRESS_CACHE_FOLDER: .cache/Cypress
           # Mermaid applitools.config.js uses this to pick batch name.
           APPLI_BRANCH: ${{ github.ref_name }}
           APPLITOOLS_BATCH_ID: ${{ github.sha }}
           # e.g. mermaid-js/mermaid/my-branch
           APPLITOOLS_BRANCH: ${{ github.repository }}/${{ github.ref_name }}
-          APPLITOOLS_PARENT_BRANCH: ${{ github.inputs.parent_branch }}
+          APPLITOOLS_PARENT_BRANCH: ${{ github.event.inputs.parent_branch }}
           APPLITOOLS_API_KEY: ${{ secrets.APPLITOOLS_API_KEY }}
           APPLITOOLS_SERVER_URL: 'https://eyesapi.applitools.com'

.github/workflows/link-checker.yml

@@ -36,7 +36,7 @@ jobs:
           restore-keys: cache-lychee-
 
       - name: Link Checker
-        uses: lycheeverse/lychee-action@v1.6.1
+        uses: lycheeverse/lychee-action@v1.7.0
         with:
           args: >-
             --verbose

.github/workflows/publish-docs.yml

@@ -5,10 +5,6 @@ on:
   push:
     branches:
       - master
-  pull_request:
-
-  # Allows you to run this workflow manually from the Actions tab
-  workflow_dispatch:
 
 # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
 permissions:
@@ -53,7 +49,6 @@ jobs:
 
   # Deployment job
   deploy:
-    if: ${{ github.event_name == 'push' && github.ref == 'refs/heads/master' }}
     environment:
       name: github-pages
     runs-on: ubuntu-latest
@@ -61,4 +56,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v1
+        uses: actions/deploy-pages@v2

.github/workflows/release-publish.yml

@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-      - uses: fregante/setup-git-user@v1
+      - uses: fregante/setup-git-user@v2
 
       - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json

.vite/build.ts

@@ -3,6 +3,7 @@ import { resolve } from 'path';
 import { fileURLToPath } from 'url';
 import jisonPlugin from './jisonPlugin.js';
 import { readFileSync } from 'fs';
+import typescript from '@rollup/plugin-typescript';
 import { visualizer } from 'rollup-plugin-visualizer';
 import type { TemplateType } from 'rollup-plugin-visualizer/dist/plugin/template-types.js';
 
@@ -10,6 +11,7 @@ const visualize = process.argv.includes('--visualize');
 const watch = process.argv.includes('--watch');
 const mermaidOnly = process.argv.includes('--mermaid');
 const __dirname = fileURLToPath(new URL('.', import.meta.url));
+const sourcemap = false;
 
 type OutputOptions = Exclude<
   Exclude<InlineConfig['build'], undefined>['rollupOptions'],
@@ -59,9 +61,15 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
     {
       name,
       format: 'esm',
-      sourcemap: true,
+      sourcemap,
       entryFileNames: `${name}.esm${minify ? '.min' : ''}.mjs`,
     },
+    {
+      name,
+      format: 'umd',
+      sourcemap,
+      entryFileNames: `${name}${minify ? '.min' : ''}.js`,
+    },
   ];
 
   if (core) {
@@ -78,7 +86,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
       {
         name,
         format: 'esm',
-        sourcemap: true,
+        sourcemap,
         entryFileNames: `${name}.core.mjs`,
       },
     ];
@@ -102,9 +110,14 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
       },
     },
     resolve: {
-      extensions: ['.jison', '.js', '.ts', '.json'],
+      extensions: [],
     },
-    plugins: [jisonPlugin(), ...visualizerOptions(packageName, core)],
+    plugins: [
+      jisonPlugin(),
+      // @ts-expect-error According to the type definitions, rollup plugins are incompatible with vite
+      typescript({ compilerOptions: { declaration: false } }),
+      ...visualizerOptions(packageName, core),
+    ],
   };
 
   if (watch && config.build) {

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>]
 
 ```

__mocks__/d3.ts

@@ -1,5 +1,5 @@
 // @ts-nocheck TODO: Fix TS
-import { MockedD3 } from '../packages/mermaid/src/tests/MockedD3';
+import { MockedD3 } from '../packages/mermaid/src/tests/MockedD3.js';
 
 export const select = function () {
   return new MockedD3();

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/other/configuration.spec.js

@@ -1,4 +1,4 @@
-import { renderGraph } from '../../helpers/util';
+import { renderGraph } from '../../helpers/util.js';
 describe('Configuration', () => {
   describe('arrowMarkerAbsolute', () => {
     it('should handle default value false of arrowMarkerAbsolute', () => {

cypress/integration/other/external-diagrams.spec.js

@@ -1,4 +1,4 @@
-import { urlSnapshotTest } from '../../helpers/util';
+import { urlSnapshotTest } from '../../helpers/util.js';
 
 describe('mermaid', () => {
   describe('registerDiagram', () => {

cypress/integration/other/ghsa.spec.js

@@ -1,4 +1,4 @@
-import { urlSnapshotTest } from '../../helpers/util';
+import { urlSnapshotTest } from '../../helpers/util.js';
 
 describe('CSS injections', () => {
   it('should not allow CSS injections outside of the diagram', () => {

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

@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util';
+import { imgSnapshotTest } from '../../helpers/util.js';
 describe('Class diagram V2', () => {
   it('0: should render a simple class diagram', () => {
     imgSnapshotTest(

cypress/integration/rendering/classDiagram.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe('Class diagram', () => {
   it('1: should render a simple class diagram', () => {
@@ -286,7 +286,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('15: should render a simple class diagram with css classes applied two multiple classes', () => {
+  it('15: should render a simple class diagram with css classes applied to multiple classes', () => {
     imgSnapshotTest(
       `
     classDiagram

cypress/integration/rendering/current.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util';
+import { imgSnapshotTest } from '../../helpers/util.js';
 
 describe('Current diagram', () => {
   it('should render a state with states in it', () => {

cypress/integration/rendering/debug.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util';
+import { imgSnapshotTest } from '../../helpers/util.js';
 
 describe('Flowchart', () => {
   it('34: testing the label width in percy', () => {

cypress/integration/rendering/erDiagram.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe('Entity Relationship Diagram', () => {
   it('should render a simple ER diagram', () => {

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

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe.skip('Flowchart ELK', () => {
   it('1-elk: should render a simple flowchart', () => {

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

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe('Flowchart v2', () => {
   it('1: should render a simple flowchart', () => {
@@ -685,6 +685,16 @@ 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', () => {

cypress/integration/rendering/flowchart.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe('Graph', () => {
   it('1: should render a simple flowchart no htmlLabels', () => {

cypress/integration/rendering/sequencediagram.spec.js

@@ -1,6 +1,6 @@
 /// <reference types="Cypress" />
 
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 context('Sequence diagram', () => {
   it('should render a sequence diagram with boxes', () => {

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

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe('State diagram', () => {
   it('v2 should render a simple info', () => {
@@ -530,7 +530,7 @@ stateDiagram-v2
           [*] --> A
           A --> B: test({ foo#colon; 'far' })
           B --> [*]
-            classDef badBadEvent fill:#f00,color:white,font-weight:bold 
+            classDef badBadEvent fill:#f00,color:white,font-weight:bold
             class B badBadEvent
            `,
         { logLevel: 0, fontFamily: 'courier' }
@@ -543,14 +543,14 @@ stateDiagram-v2
           classDef notMoving fill:white
           classDef movement font-style:italic;
           classDef badBadEvent fill:#f00,color:white,font-weight:bold
-    
+
           [*] --> Still
           Still --> [*]
           Still --> Moving
           Moving --> Still
           Moving --> Crash
           Crash --> [*]
-    
+
           class Still notMoving
           class Moving, Crash movement
           class Crash badBadEvent

cypress/integration/rendering/stateDiagram.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe('State diagram', () => {
   it('should render a simple state diagrams', () => {

cypress/platform/ashish2.html

@@ -188,7 +188,7 @@ mindmap
       //import mindmap from '../../packages/mermaid-mindmap/src/detector';
       // import example from '../../packages/mermaid-example-diagram/src/detector';
       // import timeline from '../../packages/mermaid-timeline/src/detector';
-      import mermaid from '../../packages/mermaid/src/mermaid';
+      import mermaid from './mermaid.esm.mjs';
       // await mermaid.registerExternalDiagrams([]);
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);

cypress/platform/bundle-test.js

@@ -1,4 +1,5 @@
-import mermaid from '../../packages/mermaid/src/mermaid';
+// TODO: this file should be testing the ./mermaid.core.mjs file, as that's the file listed in the package.json file that users will use
+import mermaid from './mermaid.esm.mjs';
 
 let code = `flowchart LR
 Power_Supply --> Transmitter_A

cypress/platform/external-diagrams-example-diagram.html

@@ -11,9 +11,9 @@ example-diagram
     <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
     <!-- <script type="module" src="./external-diagrams-mindmap.mjs" /> -->
     <script type="module">
-      import exampleDiagram from '../../packages/mermaid-example-diagram/src/detector';
+      import exampleDiagram from '../../packages/mermaid-example-diagram/dist/mermaid-example-diagram.core.mjs';
       // import example from '../../packages/mermaid-example-diagram/src/detector';
-      import mermaid from '../../packages/mermaid/src/mermaid';
+      import mermaid from './mermaid.esm.mjs';
 
       await mermaid.registerExternalDiagrams([exampleDiagram]);
       await mermaid.initialize({ logLevel: 0 });

cypress/platform/flow2.html

@@ -30,7 +30,7 @@
     </pre>
 
     <script type="module">
-      import mermaid from '../../packages/mermaid/src/mermaid';
+      import mermaid from './mermaid.esm.mjs';
 
       mermaid.initialize({
         theme: 'forest',

cypress/platform/knsv2.html

@@ -29,9 +29,9 @@
       }
       .mermaid svg {
         /* font-size: 18px !important; */
-        background-color: #eee;
-        background-image: radial-gradient(#fff 1%, transparent 11%),
-          radial-gradient(#fff 1%, transparent 11%);
+        background-color: #efefef;
+        background-image: radial-gradient(#fff 51%, transparent 91%),
+          radial-gradient(#fff 51%, transparent 91%);
         background-size: 20px 20px;
         background-position: 0 0, 10px 10px;
         background-repeat: repeat;
@@ -58,43 +58,96 @@
   </head>
   <body>
     <pre id="diagram" class="mermaid">
-      %%{init: {"flowchart": {"htmlLabels": false}} }%%
-flowchart-elk LR
-b(`The dog in **the** hog(2)... 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. `)
+stateDiagram-v2
+    [*] --> Still
+    Still --> [*]
+    Still --> Moving
+    Moving --> Still
+    Moving --> Crash
+    Crash --> [*]    </pre
+    >
+    <pre id="diagram" class="mermaid2">
+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
+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
+    >
+    <pre id="diagram" class="mermaid2">
+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">
-flowchart-elk LR
-b("The dog in the hog... a very<br/>long text about it<br/>Word!")
-</pre>
-    <pre id="diagram" class="mermaid2">
-flowchart-elk LR
-b("The dog in the hog... a very<br/>long text about it<br/>Word!")
-</pre>
-    >
+      %%{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`]
+    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
+      id5["`Child
       Row
       and another
-      `]
-    </pre>
-    <pre id="diagram" class="mermaid">
-mindmap
-    id1["`**Start** with
-    a second line 😎`"]
-      id2["`The dog in **the** hog... a *very long text* about it
-Word!`"]
+      `"]
     </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
@@ -110,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]
@@ -149,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
@@ -284,23 +393,23 @@ mindmap
 
     <script type="module">
       // import mindmap from '../../packages/mermaid-mindmap/src/detector';
-      import example from '../../packages/mermaid-example-diagram/src/detector';
-      import mermaid from '../../packages/mermaid/src/mermaid';
-      await mermaid.registerExternalDiagrams([example]);
+      // import example from '../../packages/mermaid-example-diagram/src/mermaid-example-diagram.core.mjs';
+      import mermaid from './mermaid.esm.mjs';
+      // await mermaid.registerExternalDiagrams([example]);
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
       mermaid.initialize({
-        theme: 'forest',
+        // theme: 'forest',
         startOnLoad: true,
         logLevel: 0,
         flowchart: {
           // defaultRenderer: 'elk',
           useMaxWidth: false,
-          htmlLabels: false,
-          // htmlLabels: true,
+          // htmlLabels: false,
+          htmlLabels: true,
         },
-        // htmlLabels: true,
+        // htmlLabels: false,
         gantt: {
           useMaxWidth: false,
         },

cypress/platform/knsv3.html

@@ -40,7 +40,7 @@
 
     <script type="module">
       // import mermaid from './mermaid.esm.mjs';
-      import mermaid from '../../packages/mermaid/src/mermaid';
+      import mermaid from '../../packages/mermaid/dist/mermaid.esm.mjs';
       // import mermaidMindmap from './mermaid-mindmap.esm.mjs';
 
       // import mermaidMindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9.3.0/+esm';

cypress/platform/viewer.js

@@ -1,5 +1,5 @@
-import mermaid2 from '../../packages/mermaid/src/mermaid';
-import externalExample from '../../packages/mermaid-example-diagram/src/detector';
+import mermaid2 from './mermaid.esm.mjs';
+import externalExample from '../../packages/mermaid-example-diagram/dist/mermaid-example-diagram.core.mjs';
 
 function b64ToUtf8(str) {
   return decodeURIComponent(escape(window.atob(str)));

demos/pie.html

@@ -38,7 +38,7 @@
     </pre>
 
     <script type="module">
-      import mermaid from '../packages/mermaid/src/mermaid';
+      import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({
         theme: 'forest',
         // themeCSS: '.node rect { fill: red; }',

docs/config/setup/modules/mermaidAPI.md

@@ -127,7 +127,7 @@ Return the last node appended
 
 #### Defined in
 
-[mermaidAPI.ts:312](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L312)
+[mermaidAPI.ts:306](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L306)
 
 ---
 
@@ -153,7 +153,7 @@ the cleaned up svgCode
 
 #### Defined in
 
-[mermaidAPI.ts:263](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L263)
+[mermaidAPI.ts:257](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L257)
 
 ---
 
@@ -179,7 +179,7 @@ the string with all the user styles
 
 #### Defined in
 
-[mermaidAPI.ts:192](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L192)
+[mermaidAPI.ts:186](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L186)
 
 ---
 
@@ -202,7 +202,7 @@ the string with all the user styles
 
 #### Defined in
 
-[mermaidAPI.ts:240](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L240)
+[mermaidAPI.ts:234](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L234)
 
 ---
 
@@ -229,7 +229,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:176](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L176)
+[mermaidAPI.ts:170](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L170)
 
 ---
 
@@ -295,7 +295,7 @@ Put the svgCode into an iFrame. Return the iFrame code
 
 #### Defined in
 
-[mermaidAPI.ts:291](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L291)
+[mermaidAPI.ts:285](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L285)
 
 ---
 
@@ -320,4 +320,4 @@ Remove any existing elements from the given document
 
 #### Defined in
 
-[mermaidAPI.ts:362](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L362)
+[mermaidAPI.ts:356](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L356)

docs/ecosystem/integrations.md

@@ -23,10 +23,11 @@ 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**)
-- [Obsidian](https://help.obsidian.md/How+to/Format+your+notes#Diagram) (**Native support**)
+- [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) (**Native support**)
 - [GitBook](https://gitbook.com)
   - [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
   - [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli)
@@ -160,6 +161,7 @@ They also serve as proof of concept, for the variety of things that can be built
   - [codedoc-mermaid-plugin](https://www.npmjs.com/package/codedoc-mermaid-plugin)
 - [mdbook](https://rust-lang.github.io/mdBook/index.html)
   - [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid)
+- [Quarto](https://quarto.org/)
 
 ## Browser Extensions
 

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/classDiagram.md

@@ -128,7 +128,7 @@ classDiagram
     Vehicle <|-- Car
 ```
 
-Naming convention: a class name should be composed only of alphanumeric characters (including unicode), and underscores.
+Naming convention: a class name should be composed only of alphanumeric characters (including unicode), underscores, and dashes (-).
 
 ### Class labels
 
@@ -283,12 +283,12 @@ To describe the visibility (or encapsulation) of an attribute or method/function
 - `#` Protected
 - `~` Package/Internal
 
-> _note_ you can also include additional _classifiers_ to a method definition by adding the following notation to the _end_ of the method, i.e.: after the `()`:
+> _note_ you can also include additional _classifiers_ to a method definition by adding the following notation to the _end_ of the method, i.e.: after the `()` or after the return type:
 >
-> - `*` Abstract e.g.: `someAbstractMethod()*`
-> - `$` Static e.g.: `someStaticMethod()$`
+> - `*` Abstract e.g.: `someAbstractMethod()*` or `someAbstractMethod() int*`
+> - `$` Static e.g.: `someStaticMethod()$` or `someStaticMethod() String$`
 
-> _note_ you can also include additional _classifiers_ to a field definition by adding the following notation to the end of its name:
+> _note_ you can also include additional _classifiers_ to a field definition by adding the following notation to the very end:
 >
 > - `$` Static e.g.: `String someField$`
 
@@ -604,10 +604,26 @@ You would define these actions on a separate line after all classes have been de
 
 ## Notes
 
-It is possible to add notes on diagram using `note "line1\nline2"` or note for class using `note for class "line1\nline2"`
+It is possible to add notes on the diagram using `note "line1\nline2"`. A note can be added for a specific class using `note for <CLASS NAME> "line1\nline2"`.
 
 ### Examples
 
+```mermaid-example
+classDiagram
+    note "This is a general note"
+    note for MyClass "This is a note for a class"
+    class MyClass{
+    }
+```
+
+```mermaid
+classDiagram
+    note "This is a general note"
+    note for MyClass "This is a note for a class"
+    class MyClass{
+    }
+```
+
 _URL Link:_
 
 ```mermaid-example

docs/syntax/flowchart.md

@@ -55,7 +55,45 @@ flowchart LR
     id1[This is the text in the box]
 ```
 
-## Graph
+#### Unicode text
+
+Use `"` to enclose the unicode text.
+
+```mermaid-example
+flowchart LR
+    id["This ❤ Unicode"]
+```
+
+```mermaid
+flowchart LR
+    id["This ❤ Unicode"]
+```
+
+#### Markdown formatting
+
+Use double quotes and backticks "\` text \`" to enclose the markdown text.
+
+```mermaid-example
+%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart LR
+    markdown["`This **is** _Markdown_`"]
+    newLines["`Line1
+    Line 2
+    Line 3`"]
+    markdown --> newLines
+```
+
+```mermaid
+%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart LR
+    markdown["`This **is** _Markdown_`"]
+    newLines["`Line1
+    Line 2
+    Line 3`"]
+    markdown --> newLines
+```
+
+### Direction
 
 This statement declares the direction of the Flowchart.
 
@@ -83,15 +121,13 @@ flowchart LR
     Start --> Stop
 ```
 
-## Flowchart Orientation
-
 Possible FlowChart orientations are:
 
-- TB - top to bottom
-- TD - top-down/ same as top to bottom
-- BT - bottom to top
-- RL - right to left
-- LR - left to right
+- TB - Top to bottom
+- TD - Top-down/ same as top to bottom
+- BT - Bottom to top
+- RL - Right to left
+- LR - Left to right
 
 ## Node shapes
 
@@ -710,6 +746,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,10 +1,10 @@
 {
   "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",
+  "packageManager": "pnpm@8.3.1",
   "keywords": [
     "diagram",
     "markdown",
@@ -54,64 +54,65 @@
     ]
   },
   "devDependencies": {
-    "@applitools/eyes-cypress": "^3.27.6",
-    "@commitlint/cli": "^17.2.0",
-    "@commitlint/config-conventional": "^17.2.0",
-    "@cspell/eslint-plugin": "^6.14.2",
+    "@applitools/eyes-cypress": "^3.32.0",
+    "@commitlint/cli": "^17.6.1",
+    "@commitlint/config-conventional": "^17.6.1",
+    "@cspell/eslint-plugin": "^6.31.1",
+    "@rollup/plugin-typescript": "^11.1.0",
     "@types/cors": "^2.8.13",
-    "@types/eslint": "^8.4.10",
+    "@types/eslint": "^8.37.0",
     "@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/jsdom": "^21.1.1",
+    "@types/lodash": "^4.14.194",
+    "@types/mdast": "^3.0.11",
+    "@types/node": "^18.16.0",
+    "@types/prettier": "^2.7.2",
     "@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",
+    "@typescript-eslint/eslint-plugin": "^5.59.0",
+    "@typescript-eslint/parser": "^5.59.0",
+    "@vitest/coverage-c8": "^0.30.1",
+    "@vitest/spy": "^0.30.1",
+    "@vitest/ui": "^0.30.1",
+    "concurrently": "^8.0.1",
     "cors": "^2.8.5",
     "coveralls": "^3.1.1",
-    "cypress": "^12.0.0",
+    "cypress": "^12.10.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",
+    "esbuild": "^0.17.18",
+    "eslint": "^8.39.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-cypress": "^2.13.2",
     "eslint-plugin-html": "^7.1.0",
-    "eslint-plugin-jest": "^27.1.5",
-    "eslint-plugin-jsdoc": "^39.6.2",
+    "eslint-plugin-jest": "^27.2.1",
+    "eslint-plugin-jsdoc": "^43.0.7",
     "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",
+    "eslint-plugin-unicorn": "^46.0.0",
     "express": "^4.18.2",
-    "globby": "^13.1.2",
-    "husky": "^8.0.2",
-    "jest": "^29.3.1",
+    "globby": "^13.1.4",
+    "husky": "^8.0.3",
+    "jest": "^29.5.0",
     "jison": "^0.4.18",
     "js-yaml": "^4.1.0",
-    "jsdom": "^21.0.0",
-    "lint-staged": "^13.0.3",
+    "jsdom": "^21.1.1",
+    "lint-staged": "^13.2.1",
     "path-browserify": "^1.0.1",
-    "pnpm": "^7.15.0",
-    "prettier": "^2.7.1",
+    "pnpm": "^8.3.1",
+    "prettier": "^2.8.8",
     "prettier-plugin-jsdoc": "^0.4.2",
-    "rimraf": "^4.0.0",
-    "rollup-plugin-visualizer": "^5.8.3",
-    "start-server-and-test": "^1.15.4",
+    "rimraf": "^5.0.0",
+    "rollup-plugin-visualizer": "^5.9.0",
+    "start-server-and-test": "^2.0.0",
     "ts-node": "^10.9.1",
-    "typescript": "^4.8.4",
-    "vite": "^4.1.1",
-    "vitest": "^0.29.0"
+    "typescript": "^5.0.4",
+    "vite": "^4.3.1",
+    "vitest": "^0.30.1"
   },
   "volta": {
-    "node": "18.15.0"
+    "node": "18.16.0"
   }
 }

packages/mermaid-example-diagram/package.json

@@ -48,8 +48,8 @@
   },
   "devDependencies": {
     "@types/cytoscape": "^3.19.9",
-    "concurrently": "^7.5.0",
-    "rimraf": "^4.0.0",
+    "concurrently": "^8.0.0",
+    "rimraf": "^5.0.0",
     "mermaid": "workspace:*"
   },
   "resolutions": {

packages/mermaid-example-diagram/src/diagram-definition.ts

@@ -1,9 +1,9 @@
 // @ts-ignore: TODO Fix ts errors
-import parser from './parser/exampleDiagram';
-import * as db from './exampleDiagramDb';
-import renderer from './exampleDiagramRenderer';
-import styles from './styles';
-import { injectUtils } from './mermaidUtils';
+import parser from './parser/exampleDiagram.jison';
+import * as db from './exampleDiagramDb.js';
+import renderer from './exampleDiagramRenderer.js';
+import styles from './styles.js';
+import { injectUtils } from './mermaidUtils.js';
 
 export const diagram = {
   db,

packages/mermaid-example-diagram/src/exampleDiagram.spec.js

@@ -1,6 +1,6 @@
-import { parser } from './parser/exampleDiagram';
-import * as db from './exampleDiagramDb';
-import { injectUtils } from './mermaidUtils';
+import { parser } from './parser/exampleDiagram.jison';
+import * as db from './exampleDiagramDb.js';
+import { injectUtils } from './mermaidUtils.js';
 // Todo fix utils functions for tests
 import {
   log,
@@ -8,7 +8,7 @@ import {
   getConfig,
   sanitizeText,
   setupGraphViewBox,
-} from '../../mermaid/src/diagram-api/diagramAPI';
+} from '../../mermaid/src/diagram-api/diagramAPI.js';
 
 injectUtils(log, setLogLevel, getConfig, sanitizeText, setupGraphViewBox);
 

packages/mermaid-example-diagram/src/exampleDiagramDb.js

@@ -1,5 +1,5 @@
 /** Created by knut on 15-01-14. */
-import { log } from './mermaidUtils';
+import { log } from './mermaidUtils.js';
 
 var message = '';
 var info = false;

packages/mermaid-example-diagram/src/exampleDiagramRenderer.js

@@ -1,6 +1,6 @@
 /** Created by knut on 14-12-11. */
 import { select } from 'd3';
-import { log, getConfig, setupGraphViewbox } from './mermaidUtils';
+import { log, getConfig, setupGraphViewbox } from './mermaidUtils.js';
 
 /**
  * Draws a an info picture in the tag with id: id based on the graph definition in text.

packages/mermaid-example-diagram/tsconfig.json

@@ -1,6 +1,5 @@
 {
   "extends": "../../tsconfig.json",
-  "module": "esnext",
   "compilerOptions": {
     "rootDir": "./src",
     "outDir": "./dist"

packages/mermaid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "10.0.2",
+  "version": "10.2.0-rc.2",
   "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
   "module": "./dist/mermaid.core.mjs",
@@ -52,20 +52,20 @@
     ]
   },
   "dependencies": {
-    "@braintree/sanitize-url": "^6.0.0",
-    "@khanacademy/simple-markdown": "^0.8.6",
+    "@braintree/sanitize-url": "^6.0.2",
     "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",
+    "dompurify": "3.0.2",
     "elkjs": "^0.8.2",
     "khroma": "^2.0.0",
     "lodash-es": "^4.17.21",
+    "mdast-util-from-markdown": "^1.3.0",
     "non-layered-tidy-tree-layout": "^2.0.2",
-    "stylis": "^4.1.2",
+    "stylis": "^4.1.3",
     "ts-dedent": "^2.2.0",
     "uuid": "^9.0.0",
     "web-worker": "^1.2.0"
@@ -73,42 +73,46 @@
   "devDependencies": {
     "@types/cytoscape": "^3.19.9",
     "@types/d3": "^7.4.0",
-    "@types/dompurify": "^2.4.0",
-    "@types/jsdom": "^21.0.0",
+    "@types/dompurify": "^3.0.2",
+    "@types/jsdom": "^21.1.1",
     "@types/lodash-es": "^4.17.7",
     "@types/micromatch": "^4.0.2",
-    "@types/prettier": "^2.7.1",
+    "@types/prettier": "^2.7.2",
     "@types/stylis": "^4.0.2",
-    "@types/uuid": "^9.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.42.1",
-    "@typescript-eslint/parser": "^5.42.1",
+    "@types/uuid": "^9.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.59.0",
+    "@typescript-eslint/parser": "^5.59.0",
     "chokidar": "^3.5.3",
-    "concurrently": "^7.5.0",
+    "concurrently": "^8.0.1",
     "coveralls": "^3.1.1",
     "cpy-cli": "^4.2.0",
-    "cspell": "^6.14.3",
-    "globby": "^13.1.2",
+    "cspell": "^6.31.1",
+    "csstree-validator": "^3.0.0",
+    "globby": "^13.1.4",
     "jison": "^0.4.18",
-    "js-base64": "^3.7.2",
-    "jsdom": "^21.0.0",
+    "js-base64": "^3.7.5",
+    "jsdom": "^21.1.1",
     "micromatch": "^4.0.5",
     "path-browserify": "^1.0.1",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.8",
     "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",
-    "typedoc": "^0.23.18",
-    "typedoc-plugin-markdown": "^3.13.6",
-    "typescript": "^4.8.4",
+    "rimraf": "^5.0.0",
+    "start-server-and-test": "^2.0.0",
+    "typedoc": "^0.24.5",
+    "typedoc-plugin-markdown": "^3.15.2",
+    "typescript": "^5.0.4",
     "unist-util-flatmap": "^1.0.0",
-    "vitepress": "^1.0.0-alpha.46",
-    "vitepress-plugin-search": "^1.0.4-alpha.19"
+    "vitepress": "^1.0.0-alpha.72",
+    "vitepress-plugin-search": "^1.0.4-alpha.20"
   },
   "files": [
-    "dist",
+    "dist/",
     "README.md"
   ],
-  "sideEffects": false
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  }
 }

packages/mermaid/src/Diagram.ts

@@ -1,11 +1,11 @@
-import * as configApi from './config';
-import { log } from './logger';
-import { getDiagram, registerDiagram } from './diagram-api/diagramAPI';
-import { detectType, getDiagramLoader } from './diagram-api/detectType';
-import { extractFrontMatter } from './diagram-api/frontmatter';
-import { UnknownDiagramError } from './errors';
-import { DetailedError } from './utils';
-import { cleanupComments } from './diagram-api/comments';
+import * as configApi from './config.js';
+import { log } from './logger.js';
+import { getDiagram, registerDiagram } from './diagram-api/diagramAPI.js';
+import { detectType, getDiagramLoader } from './diagram-api/detectType.js';
+import { extractFrontMatter } from './diagram-api/frontmatter.js';
+import { UnknownDiagramError } from './errors.js';
+import { DetailedError } from './utils.js';
+import { cleanupComments } from './diagram-api/comments.js';
 
 export type ParseErrorFunction = (err: string | DetailedError | unknown, hash?: any) => void;
 

packages/mermaid/src/__mocks__/mermaidAPI.ts

@@ -3,9 +3,9 @@
  *
  * We can't easily use `vi.spyOn(mermaidAPI, "function")` since the object is frozen with `Object.freeze()`.
  */
-import * as configApi from '../config';
+import * as configApi from '../config.js';
 import { vi } from 'vitest';
-import { mermaidAPI as mAPI } from '../mermaidAPI';
+import { mermaidAPI as mAPI } from '../mermaidAPI.js';
 
 // original version cannot be modified since it was frozen with `Object.freeze()`
 export const mermaidAPI = {

packages/mermaid/src/accessibility.spec.ts

@@ -1,6 +1,6 @@
-import { MockedD3 } from './tests/MockedD3';
-import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility';
-import { D3Element } from './mermaidAPI';
+import { MockedD3 } from './tests/MockedD3.js';
+import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility.js';
+import { D3Element } from './mermaidAPI.js';
 
 describe('accessibility', () => {
   const fauxSvgNode = new MockedD3();

packages/mermaid/src/accessibility.ts

@@ -5,7 +5,7 @@
  * @see https://www.w3.org/TR/svg-aam-1.0/
  *
  */
-import { D3Element } from './mermaidAPI';
+import { D3Element } from './mermaidAPI.js';
 
 import isEmpty from 'lodash-es/isEmpty.js';
 

packages/mermaid/src/commonDb.ts

@@ -1,5 +1,5 @@
-import { sanitizeText as _sanitizeText } from './diagrams/common/common';
-import { getConfig } from './config';
+import { sanitizeText as _sanitizeText } from './diagrams/common/common.js';
+import { getConfig } from './config.js';
 let title = '';
 let diagramTitle = '';
 let description = '';

packages/mermaid/src/config.spec.js

@@ -1,4 +1,4 @@
-import * as configApi from './config';
+import * as configApi from './config.js';
 
 describe('when working with site config', function () {
   beforeEach(() => {

packages/mermaid/src/config.ts

@@ -1,8 +1,8 @@
-import assignWithDepth from './assignWithDepth';
-import { log } from './logger';
-import theme from './themes';
-import config from './defaultConfig';
-import type { MermaidConfig } from './config.type';
+import assignWithDepth from './assignWithDepth.js';
+import { log } from './logger.js';
+import theme from './themes/index.js';
+import config from './defaultConfig.js';
+import type { MermaidConfig } from './config.type.js';
 
 export const defaultConfig: MermaidConfig = Object.freeze(config);
 

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

@@ -1,10 +1,10 @@
-import intersectRect from './intersect/intersect-rect';
-import { log } from '../logger';
-import createLabel from './createLabel';
-import { createText } from '../rendering-util/createText';
+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';
-import { evaluate } from '../diagrams/common/common';
+import { getConfig } from '../config.js';
+import { evaluate } from '../diagrams/common/common.js';
 
 const rect = (parent, node) => {
   log.info('Creating subgraph rect for ', node.id, node);
@@ -63,13 +63,20 @@ const rect = (parent, node) => {
     .attr('width', width)
     .attr('height', node.height + padding);
 
+  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) + ')'
+    );
+  } 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
-  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 + ', ' + (node.y - node.height / 2) + ')'
-  );
 
   const rectBox = rect.node().getBBox();
   node.width = rectBox.width;

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

@@ -1,8 +1,8 @@
 import { select } from 'd3';
-import { log } from '../logger';
-import { getConfig } from '../config';
-import { evaluate } from '../diagrams/common/common';
-import { decodeEntities } from '../mermaidAPI';
+import { log } from '../logger.js';
+import { getConfig } from '../config.js';
+import { evaluate } from '../diagrams/common/common.js';
+import { decodeEntities } from '../mermaidAPI.js';
 
 /**
  * @param dom

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

@@ -1,10 +1,10 @@
-import { log } from '../logger';
-import createLabel from './createLabel';
-import { createText } from '../rendering-util/createText';
+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';
-import utils from '../utils';
-import { evaluate } from '../diagrams/common/common';
+import { getConfig } from '../config.js';
+import utils from '../utils.js';
+import { evaluate } from '../diagrams/common/common.js';
 
 let edgeLabels = {};
 let terminalLabels = {};

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

@@ -1,5 +1,5 @@
-import { intersection } from './edges';
-import { setLogLevel } from '../logger';
+import { intersection } from './edges.js';
+import { setLogLevel } from '../logger.js';
 
 describe('Graphlib decorations', () => {
   let node;

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

@@ -1,20 +1,20 @@
 import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
 import * as graphlibJson from 'dagre-d3-es/src/graphlib/json.js';
-import insertMarkers from './markers';
-import { updateNodeBounds } from './shapes/util';
+import insertMarkers from './markers.js';
+import { updateNodeBounds } from './shapes/util.js';
 import {
   clear as clearGraphlib,
   clusterDb,
   adjustClustersAndEdges,
   findNonClusterChild,
   sortNodesByHierarchy,
-} from './mermaid-graphlib';
-import { insertNode, positionNode, clear as clearNodes, setNodeElem } from './nodes';
-import { insertCluster, clear as clearClusters } from './clusters';
-import { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } from './edges';
-import { log } from '../logger';
+} from './mermaid-graphlib.js';
+import { insertNode, positionNode, clear as clearNodes, setNodeElem } from './nodes.js';
+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,44 +35,46 @@ 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) {
-    const node = graph.node(v);
-    if (parentCluster !== undefined) {
-      const data = JSON.parse(JSON.stringify(parentCluster.clusterData));
-      // data.clusterPositioning = true;
-      log.info('Setting data for cluster XXX (', v, ') ', data, parentCluster);
-      graph.setNode(parentCluster.id, data);
-      if (!graph.parent(v)) {
-        log.trace('Setting parent', v, parentCluster.id);
-        graph.setParent(v, parentCluster.id, data);
+  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));
+        // data.clusterPositioning = true;
+        log.info('Setting data for cluster XXX (', v, ') ', data, parentCluster);
+        graph.setNode(parentCluster.id, data);
+        if (!graph.parent(v)) {
+          log.trace('Setting parent', v, parentCluster.id);
+          graph.setParent(v, parentCluster.id, data);
+        }
       }
-    }
-    log.info('(Insert) Node XXX' + v + ': ' + JSON.stringify(graph.node(v)));
-    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 newEl = o.elem;
-      updateNodeBounds(node, newEl);
-      node.diff = o.diff || 0;
-      log.info('Node bounds (abc123)', v, node, node.width, node.x, node.y);
-      setNodeElem(newEl, node);
+      log.info('(Insert) Node XXX' + v + ': ' + JSON.stringify(graph.node(v)));
+      if (node && node.clusterNode) {
+        // const children = graph.children(v);
+        log.info('Cluster identified', v, node.width, 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;
+        log.info('Node bounds (abc123)', v, node, node.width, node.x, node.y);
+        setNodeElem(newEl, node);
 
-      log.warn('Recursive render complete ', newEl, node);
-    } else {
-      if (graph.children(v).length > 0) {
-        // This is a cluster but not to be rendered recursively
-        // Render as before
-        log.info('Cluster - the non recursive path XXX', v, node.id, node, graph);
-        log.info(findNonClusterChild(node.id, graph));
-        clusterDb[node.id] = { id: findNonClusterChild(node.id, graph), node };
-        // insertCluster(clusters, graph.node(v));
+        log.warn('Recursive render complete ', newEl, node);
       } else {
-        log.info('Node - the non recursive path', v, node.id, node);
-        insertNode(nodes, graph.node(v), dir);
+        if (graph.children(v).length > 0) {
+          // This is a cluster but not to be rendered recursively
+          // Render as before
+          log.info('Cluster - the non recursive path XXX', v, node.id, node, graph);
+          log.info(findNonClusterChild(node.id, graph));
+          clusterDb[node.id] = { id: findNonClusterChild(node.id, graph), node };
+          // insertCluster(clusters, graph.node(v));
+        } else {
+          log.info('Node - the non recursive path', v, node.id, node);
+          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/intersect/intersect-circle.js

@@ -1,4 +1,4 @@
-import intersectEllipse from './intersect-ellipse';
+import intersectEllipse from './intersect-ellipse.js';
 
 /**
  * @param node

packages/mermaid/src/dagre-wrapper/intersect/intersect-polygon.js

@@ -1,6 +1,6 @@
 /* eslint "no-console": off */
 
-import intersectLine from './intersect-line';
+import intersectLine from './intersect-line.js';
 
 export default intersectPolygon;
 

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

@@ -1,6 +1,6 @@
 /** Setup arrow head and define the marker. The result is appended to the svg. */
 
-import { log } from '../logger';
+import { log } from '../logger.js';
 
 // Only add the number of markers that the diagram needs
 const insertMarkers = (elem, markerArray, type, id) => {
@@ -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/mermaid-graphlib.js

@@ -1,5 +1,5 @@
 /** Decorates with functions required by mermaids dagre-wrapper. */
-import { log } from '../logger';
+import { log } from '../logger.js';
 import * as graphlibJson from 'dagre-d3-es/src/graphlib/json.js';
 import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
 

packages/mermaid/src/dagre-wrapper/mermaid-graphlib.spec.js

@@ -5,8 +5,8 @@ import {
   adjustClustersAndEdges,
   extractDescendants,
   sortNodesByHierarchy,
-} from './mermaid-graphlib';
-import { setLogLevel, log } from '../logger';
+} from './mermaid-graphlib.js';
+import { setLogLevel, log } from '../logger.js';
 
 describe('Graphlib decorations', () => {
   let g;

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

@@ -1,15 +1,15 @@
 import { select } from 'd3';
-import { log } from '../logger';
-import { labelHelper, updateNodeBounds, insertPolygonShape } from './shapes/util';
-import { getConfig } from '../config';
+import { log } from '../logger.js';
+import { labelHelper, updateNodeBounds, insertPolygonShape } from './shapes/util.js';
+import { getConfig } from '../config.js';
 import intersect from './intersect/index.js';
-import createLabel from './createLabel';
-import note from './shapes/note';
-import { parseMember } from '../diagrams/class/svgDraw';
-import { evaluate } from '../diagrams/common/common';
+import createLabel from './createLabel.js';
+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 { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
+const question = async (parent, node) => {
+  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 { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
+const hexagon = async (parent, node) => {
+  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 { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
+const rect_left_inv_arrow = async (parent, node) => {
+  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 { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
+const lean_right = async (parent, node) => {
+  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 { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
+const lean_left = async (parent, node) => {
+  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 { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
+const trapezoid = async (parent, node) => {
+  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 { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
+const inv_trapezoid = async (parent, node) => {
+  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 { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
+const rect_right_inv_arrow = async (parent, node) => {
+  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 { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
+const cylinder = async (parent, node) => {
+  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
 
   const w = bbox.width + node.padding;
   const rx = w / 2;
@@ -310,21 +310,30 @@ const cylinder = (parent, node) => {
   return shapeSvg;
 };
 
-const rect = (parent, node) => {
-  const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes, true);
+const rect = async (parent, node) => {
+  const { shapeSvg, bbox, halfPadding } = await labelHelper(
+    parent,
+    node,
+    'node ' + node.classes,
+    true
+  );
 
   // 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 * 2;
+  // const totalHeight = bbox.height + node.padding * 2;
+  const totalWidth = bbox.width + node.padding;
+  const totalHeight = bbox.height + node.padding;
   rect
     .attr('class', 'basic label-container')
     .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 - node.padding)
+    // .attr('y', -bbox.height / 2 - node.padding)
+    .attr('x', -bbox.width / 2 - halfPadding)
+    .attr('y', -bbox.height / 2 - halfPadding)
     .attr('width', totalWidth)
     .attr('height', totalHeight);
 
@@ -348,10 +357,10 @@ const rect = (parent, node) => {
   return shapeSvg;
 };
 
-const labelRect = (parent, node) => {
-  const { shapeSvg } = labelHelper(parent, node, 'label', true);
+const labelRect = async (parent, node) => {
+  const { shapeSvg } = await labelHelper(parent, node, 'label', true);
 
-  log.info('Classes = ', node.classes);
+  log.trace('Classes = ', node.classes);
   // add the rect
   const rect = shapeSvg.insert('rect', ':first-child');
 
@@ -535,8 +544,8 @@ const rectWithTitle = (parent, node) => {
   return shapeSvg;
 };
 
-const stadium = (parent, node) => {
-  const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
+const stadium = async (parent, node) => {
+  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
 
   const h = bbox.height + node.padding;
   const w = bbox.width + h / 4 + node.padding;
@@ -561,8 +570,8 @@ const stadium = (parent, node) => {
   return shapeSvg;
 };
 
-const circle = (parent, node) => {
-  const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, undefined, true);
+const circle = async (parent, node) => {
+  const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, undefined, true);
   const circle = shapeSvg.insert('circle', ':first-child');
 
   // center the circle around its coordinate
@@ -586,8 +595,8 @@ const circle = (parent, node) => {
   return shapeSvg;
 };
 
-const doublecircle = (parent, node) => {
-  const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, undefined, true);
+const doublecircle = async (parent, node) => {
+  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');
@@ -622,8 +631,8 @@ const doublecircle = (parent, node) => {
   return shapeSvg;
 };
 
-const subroutine = (parent, node) => {
-  const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
+const subroutine = async (parent, node) => {
+  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
@@ -972,7 +981,7 @@ const shapes = {
 
 let nodeElems = {};
 
-export const insertNode = (elem, node, dir) => {
+export const insertNode = async (elem, node, dir) => {
   let newEl;
   let el;
 
@@ -985,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) {
@@ -1013,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/patterns.js

@@ -1,6 +1,6 @@
 /** Setup arrow head and define the marker. The result is appended to the svg. */
 
-// import { log } from '../logger';
+// import { log } from '../logger.js';
 
 // Only add the number of markers that the diagram needs
 const insertPatterns = (elem, patternArray, type, id) => {

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

@@ -1,9 +1,19 @@
-import { updateNodeBounds, labelHelper } from './util';
-import { log } from '../../logger';
+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 { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes, true);
+const note = async (parent, node) => {
+  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,11 +1,13 @@
-import createLabel from '../createLabel';
-import { createText } from '../../rendering-util/createText';
-import { getConfig } from '../../config';
-import { decodeEntities } from '../../mermaidAPI';
+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';
-export const labelHelper = (parent, node, _classes, isNode) => {
+import { evaluate, sanitizeText } from '../../diagrams/common/common.js';
+
+export const labelHelper = async (parent, node, _classes, isNode) => {
   let classes;
+  const useHtmlLabels = node.useHtmlLabels || evaluate(getConfig().flowchart.htmlLabels);
   if (!_classes) {
     classes = 'node default';
   } else {
@@ -33,7 +35,7 @@ export const labelHelper = (parent, node, _classes, isNode) => {
   if (node.labelType === 'markdown') {
     // text = textNode;
     text = createText(label, sanitizeText(decodeEntities(labelText), getConfig()), {
-      useHtmlLabels: getConfig().flowchart.htmlLabels,
+      useHtmlLabels,
       width: node.width || getConfig().flowchart.wrappingWidth,
       classes: 'markdown-node-label',
     });
@@ -50,23 +52,56 @@ export const labelHelper = (parent, node, _classes, 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 (getConfig().flowchart.htmlLabels) {
+  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

@@ -1,5 +1,5 @@
-import theme from './themes';
-import { MermaidConfig } from './config.type';
+import theme from './themes/index.js';
+import { MermaidConfig } from './config.type.js';
 /**
  * **Configuration methods in Mermaid version 8.6.0 have been updated, to learn more[[click
  * here](8.6.0_docs.md)].**

packages/mermaid/src/diagram-api/comments.spec.ts

@@ -1,12 +1,12 @@
 // tests to check that comments are removed
 
-import { cleanupComments } from './comments';
+import { cleanupComments } from './comments.js';
 import { describe, it, expect } from 'vitest';
 
 describe('comments', () => {
   it('should remove comments', () => {
     const text = `
-		
+
 %% This is a comment
 %% This is another comment
 graph TD
@@ -27,7 +27,7 @@ graph TD
 %% This is another comment
 %%{init: {'theme': 'forest'}}%%
 %%{ init: {'theme': 'space before init'}}%%
-%%{init: {'theme': 'space after ending'}}%% 
+%%{init: {'theme': 'space after ending'}}%%
 graph TD
 	A-->B
 
@@ -37,7 +37,7 @@ graph TD
     expect(cleanupComments(text)).toMatchInlineSnapshot(`
       "%%{init: {'theme': 'forest'}}%%
       %%{ init: {'theme': 'space before init'}}%%
-      %%{init: {'theme': 'space after ending'}}%% 
+      %%{init: {'theme': 'space after ending'}}%%
       graph TD
       	A-->B
 

packages/mermaid/src/diagram-api/detectType.ts

@@ -1,14 +1,14 @@
-import { MermaidConfig } from '../config.type';
-import { log } from '../logger';
+import { MermaidConfig } from '../config.type.js';
+import { log } from '../logger.js';
 import type {
   DetectorRecord,
   DiagramDetector,
   DiagramLoader,
   ExternalDiagramDefinition,
-} from './types';
-import { frontMatterRegex } from './frontmatter';
-import { getDiagram, registerDiagram } from './diagramAPI';
-import { UnknownDiagramError } from '../errors';
+} from './types.js';
+import { frontMatterRegex } from './frontmatter.js';
+import { getDiagram, registerDiagram } from './diagramAPI.js';
+import { UnknownDiagramError } from '../errors.js';
 
 const directive = /%{2}{\s*(?:(\w+)\s*:|(\w+))\s*(?:(\w+)|((?:(?!}%{2}).|\r?\n)*))?\s*(?:}%{2})?/gi;
 const anyComment = /\s*%%.*\n/gm;

packages/mermaid/src/diagram-api/diagram-orchestration.spec.ts

@@ -1,6 +1,6 @@
 import { it, describe, expect } from 'vitest';
-import { detectType } from './detectType';
-import { addDiagrams } from './diagram-orchestration';
+import { detectType } from './detectType.js';
+import { addDiagrams } from './diagram-orchestration.js';
 
 describe('diagram-orchestration', () => {
   it('should register diagrams', () => {

packages/mermaid/src/diagram-api/diagram-orchestration.ts

@@ -1,24 +1,24 @@
-import c4 from '../diagrams/c4/c4Detector';
-import flowchart from '../diagrams/flowchart/flowDetector';
-import flowchartV2 from '../diagrams/flowchart/flowDetector-v2';
-import er from '../diagrams/er/erDetector';
-import git from '../diagrams/git/gitGraphDetector';
-import gantt from '../diagrams/gantt/ganttDetector';
-import info from '../diagrams/info/infoDetector';
-import pie from '../diagrams/pie/pieDetector';
-import requirement from '../diagrams/requirement/requirementDetector';
-import sequence from '../diagrams/sequence/sequenceDetector';
-import classDiagram from '../diagrams/class/classDetector';
-import classDiagramV2 from '../diagrams/class/classDetector-V2';
-import state from '../diagrams/state/stateDetector';
-import stateV2 from '../diagrams/state/stateDetector-V2';
-import journey from '../diagrams/user-journey/journeyDetector';
-import errorDiagram from '../diagrams/error/errorDiagram';
-import flowchartElk from '../diagrams/flowchart/elk/detector';
-import timeline from '../diagrams/timeline/detector';
-import mindmap from '../diagrams/mindmap/detector';
-import { registerLazyLoadedDiagrams } from './detectType';
-import { registerDiagram } from './diagramAPI';
+import c4 from '../diagrams/c4/c4Detector.js';
+import flowchart from '../diagrams/flowchart/flowDetector.js';
+import flowchartV2 from '../diagrams/flowchart/flowDetector-v2.js';
+import er from '../diagrams/er/erDetector.js';
+import git from '../diagrams/git/gitGraphDetector.js';
+import gantt from '../diagrams/gantt/ganttDetector.js';
+import info from '../diagrams/info/infoDetector.js';
+import pie from '../diagrams/pie/pieDetector.js';
+import requirement from '../diagrams/requirement/requirementDetector.js';
+import sequence from '../diagrams/sequence/sequenceDetector.js';
+import classDiagram from '../diagrams/class/classDetector.js';
+import classDiagramV2 from '../diagrams/class/classDetector-V2.js';
+import state from '../diagrams/state/stateDetector.js';
+import stateV2 from '../diagrams/state/stateDetector-V2.js';
+import journey from '../diagrams/user-journey/journeyDetector.js';
+import errorDiagram from '../diagrams/error/errorDiagram.js';
+import flowchartElk from '../diagrams/flowchart/elk/detector.js';
+import timeline from '../diagrams/timeline/detector.js';
+import mindmap from '../diagrams/mindmap/detector.js';
+import { registerLazyLoadedDiagrams } from './detectType.js';
+import { registerDiagram } from './diagramAPI.js';
 
 let hasLoadedDiagrams = false;
 export const addDiagrams = () => {

packages/mermaid/src/diagram-api/diagramAPI.spec.ts

@@ -1,8 +1,8 @@
-import { detectType } from './detectType';
-import { getDiagram, registerDiagram } from './diagramAPI';
-import { addDiagrams } from './diagram-orchestration';
-import { DiagramDetector } from './types';
-import { getDiagramFromText } from '../Diagram';
+import { detectType } from './detectType.js';
+import { getDiagram, registerDiagram } from './diagramAPI.js';
+import { addDiagrams } from './diagram-orchestration.js';
+import { DiagramDetector } from './types.js';
+import { getDiagramFromText } from '../Diagram.js';
 import { it, describe, expect, beforeAll } from 'vitest';
 
 addDiagrams();

packages/mermaid/src/diagram-api/diagramAPI.ts

@@ -1,12 +1,12 @@
-import { addDetector } from './detectType';
-import { log as _log, setLogLevel as _setLogLevel } from '../logger';
-import { getConfig as _getConfig } from '../config';
-import { sanitizeText as _sanitizeText } from '../diagrams/common/common';
-import { setupGraphViewbox as _setupGraphViewbox } from '../setupGraphViewbox';
-import { addStylesForDiagram } from '../styles';
-import { DiagramDefinition, DiagramDetector } from './types';
-import * as _commonDb from '../commonDb';
-import { parseDirective as _parseDirective } from '../directiveUtils';
+import { addDetector } from './detectType.js';
+import { log as _log, setLogLevel as _setLogLevel } from '../logger.js';
+import { getConfig as _getConfig } from '../config.js';
+import { sanitizeText as _sanitizeText } from '../diagrams/common/common.js';
+import { setupGraphViewbox as _setupGraphViewbox } from '../setupGraphViewbox.js';
+import { addStylesForDiagram } from '../styles.js';
+import { DiagramDefinition, DiagramDetector } from './types.js';
+import * as _commonDb from '../commonDb.js';
+import { parseDirective as _parseDirective } from '../directiveUtils.js';
 
 /*
   Packaging and exposing resources for external diagrams so that they can import

packages/mermaid/src/diagram-api/frontmatter.spec.ts

@@ -1,5 +1,5 @@
 import { vi } from 'vitest';
-import { extractFrontMatter } from './frontmatter';
+import { extractFrontMatter } from './frontmatter.js';
 
 const dbMock = () => ({ setDiagramTitle: vi.fn() });
 

packages/mermaid/src/diagram-api/frontmatter.ts

@@ -1,4 +1,4 @@
-import { DiagramDb } from './types';
+import { DiagramDb } from './types.js';
 // The "* as yaml" part is necessary for tree-shaking
 import * as yaml from 'js-yaml';
 

packages/mermaid/src/diagram-api/types.ts

@@ -1,4 +1,4 @@
-import { MermaidConfig } from '../config.type';
+import { MermaidConfig } from '../config.type.js';
 
 export interface InjectUtils {
   _log: any;

packages/mermaid/src/diagram.spec.ts

@@ -1,7 +1,7 @@
 import { describe, test, expect } from 'vitest';
-import { Diagram, getDiagramFromText } from './Diagram';
-import { addDetector } from './diagram-api/detectType';
-import { addDiagrams } from './diagram-api/diagram-orchestration';
+import { Diagram, getDiagramFromText } from './Diagram.js';
+import { addDetector } from './diagram-api/detectType.js';
+import { addDiagrams } from './diagram-api/diagram-orchestration.js';
 
 addDiagrams();
 

packages/mermaid/src/diagrams/c4/c4Db.js

@@ -1,7 +1,7 @@
-import mermaidAPI from '../../mermaidAPI';
-import * as configApi from '../../config';
-import { sanitizeText } from '../common/common';
-import { setAccTitle, getAccTitle, getAccDescription, setAccDescription } from '../../commonDb';
+import mermaidAPI from '../../mermaidAPI.js';
+import * as configApi from '../../config.js';
+import { sanitizeText } from '../common/common.js';
+import { setAccTitle, getAccTitle, getAccDescription, setAccDescription } from '../../commonDb.js';
 
 let c4ShapeArray = [];
 let boundaryParseStack = [''];

packages/mermaid/src/diagrams/c4/c4Detector.ts

@@ -1,4 +1,4 @@
-import type { ExternalDiagramDefinition } from '../../diagram-api/types';
+import type { ExternalDiagramDefinition } from '../../diagram-api/types.js';
 
 const id = 'c4';
 
@@ -7,7 +7,7 @@ const detector = (txt: string) => {
 };
 
 const loader = async () => {
-  const { diagram } = await import('./c4Diagram');
+  const { diagram } = await import('./c4Diagram.js');
   return { id, diagram };
 };
 

packages/mermaid/src/diagrams/c4/c4Diagram.ts

@@ -1,10 +1,10 @@
 // @ts-ignore: TODO Fix ts errors
-import c4Parser from './parser/c4Diagram';
-import c4Db from './c4Db';
-import c4Renderer from './c4Renderer';
-import c4Styles from './styles';
-import { MermaidConfig } from '../../config.type';
-import { DiagramDefinition } from '../../diagram-api/types';
+import c4Parser from './parser/c4Diagram.jison';
+import c4Db from './c4Db.js';
+import c4Renderer from './c4Renderer.js';
+import c4Styles from './styles.js';
+import { MermaidConfig } from '../../config.type.js';
+import { DiagramDefinition } from '../../diagram-api/types.js';
 
 export const diagram: DiagramDefinition = {
   parser: c4Parser,

packages/mermaid/src/diagrams/c4/c4Renderer.js

@@ -1,13 +1,13 @@
 import { select } from 'd3';
-import svgDraw from './svgDraw';
-import { log } from '../../logger';
-import { parser } from './parser/c4Diagram';
-import common from '../common/common';
-import c4Db from './c4Db';
-import * as configApi from '../../config';
-import assignWithDepth from '../../assignWithDepth';
-import { wrapLabel, calculateTextWidth, calculateTextHeight } from '../../utils';
-import { configureSvgSize } from '../../setupGraphViewbox';
+import svgDraw from './svgDraw.js';
+import { log } from '../../logger.js';
+import { parser } from './parser/c4Diagram.jison';
+import common from '../common/common.js';
+import c4Db from './c4Db.js';
+import * as configApi from '../../config.js';
+import assignWithDepth from '../../assignWithDepth.js';
+import { wrapLabel, calculateTextWidth, calculateTextHeight } from '../../utils.js';
+import { configureSvgSize } from '../../setupGraphViewbox.js';
 
 let globalBoundaryMaxX = 0,
   globalBoundaryMaxY = 0;

packages/mermaid/src/diagrams/c4/parser/c4Boundary.spec.js

@@ -1,6 +1,6 @@
-import c4Db from '../c4Db';
+import c4Db from '../c4Db.js';
 import c4 from './c4Diagram.jison';
-import { setConfig } from '../../../config';
+import { setConfig } from '../../../config.js';
 
 setConfig({
   securityLevel: 'strict',

packages/mermaid/src/diagrams/c4/parser/c4Diagram.spec.js

@@ -1,6 +1,6 @@
-import c4Db from '../c4Db';
+import c4Db from '../c4Db.js';
 import c4 from './c4Diagram.jison';
-import { setConfig } from '../../../config';
+import { setConfig } from '../../../config.js';
 
 setConfig({
   securityLevel: 'strict',

packages/mermaid/src/diagrams/c4/parser/c4Person.spec.js

@@ -1,6 +1,6 @@
-import c4Db from '../c4Db';
+import c4Db from '../c4Db.js';
 import c4 from './c4Diagram.jison';
-import { setConfig } from '../../../config';
+import { setConfig } from '../../../config.js';
 
 setConfig({
   securityLevel: 'strict',

packages/mermaid/src/diagrams/c4/parser/c4PersonExt.spec.js

@@ -1,6 +1,6 @@
-import c4Db from '../c4Db';
+import c4Db from '../c4Db.js';
 import c4 from './c4Diagram.jison';
-import { setConfig } from '../../../config';
+import { setConfig } from '../../../config.js';
 
 setConfig({
   securityLevel: 'strict',

packages/mermaid/src/diagrams/c4/parser/c4System.spec.js

@@ -1,6 +1,6 @@
-import c4Db from '../c4Db';
+import c4Db from '../c4Db.js';
 import c4 from './c4Diagram.jison';
-import { setConfig } from '../../../config';
+import { setConfig } from '../../../config.js';
 
 setConfig({
   securityLevel: 'strict',

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

@@ -1,4 +1,4 @@
-import common from '../common/common';
+import common from '../common/common.js';
 import { sanitizeUrl } from '@braintree/sanitize-url';
 
 export const drawRect = function (elem, rectData) {

packages/mermaid/src/diagrams/class/classDb.ts

@@ -1,10 +1,10 @@
 // @ts-expect-error - d3 types issue
 import { select, Selection } from 'd3';
-import { log } from '../../logger';
-import * as configApi from '../../config';
-import common from '../common/common';
-import utils from '../../utils';
-import mermaidAPI from '../../mermaidAPI';
+import { log } from '../../logger.js';
+import * as configApi from '../../config.js';
+import common from '../common/common.js';
+import utils from '../../utils.js';
+import mermaidAPI from '../../mermaidAPI.js';
 import {
   setAccTitle,
   getAccTitle,
@@ -13,8 +13,8 @@ import {
   clear as commonClear,
   setDiagramTitle,
   getDiagramTitle,
-} from '../../commonDb';
-import { ClassRelation, ClassNode, ClassNote, ClassMap } from './classTypes';
+} from '../../commonDb.js';
+import { ClassRelation, ClassNode, ClassNote, ClassMap } from './classTypes.js';
 
 const MERMAID_DOM_ID_PREFIX = 'classId-';
 
@@ -106,6 +106,7 @@ export const clear = function () {
 export const getClass = function (id: string) {
   return classes[id];
 };
+
 export const getClasses = function () {
   return classes;
 };
@@ -170,9 +171,10 @@ export const addMember = function (className: string, member: string) {
     const memberString = member.trim();
 
     if (memberString.startsWith('<<') && memberString.endsWith('>>')) {
-      // Remove leading and trailing brackets
+      // its an annotation
       theClass.annotations.push(sanitizeText(memberString.substring(2, memberString.length - 2)));
     } else if (memberString.indexOf(')') > 0) {
+      //its a method
       theClass.methods.push(sanitizeText(memberString));
     } else if (memberString) {
       theClass.members.push(sanitizeText(memberString));
@@ -234,6 +236,7 @@ const setTooltip = function (ids: string, tooltip?: string) {
     }
   });
 };
+
 export const getTooltip = function (id: string) {
   return classes[id].tooltip;
 };

packages/mermaid/src/diagrams/class/classDetector-V2.ts

@@ -1,4 +1,4 @@
-import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js';
 
 const id = 'classDiagram';
 
@@ -15,7 +15,7 @@ const detector: DiagramDetector = (txt, config) => {
 };
 
 const loader = async () => {
-  const { diagram } = await import('./classDiagram-v2');
+  const { diagram } = await import('./classDiagram-v2.js');
   return { id, diagram };
 };
 

packages/mermaid/src/diagrams/class/classDetector.ts

@@ -1,4 +1,4 @@
-import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js';
 
 const id = 'class';
 
@@ -12,7 +12,7 @@ const detector: DiagramDetector = (txt, config) => {
 };
 
 const loader = async () => {
-  const { diagram } = await import('./classDiagram');
+  const { diagram } = await import('./classDiagram.js');
   return { id, diagram };
 };
 

packages/mermaid/src/diagrams/class/classDiagram-styles.spec.js

@@ -1,5 +1,5 @@
-import { parser } from './parser/classDiagram';
-import classDb from './classDb';
+import { parser } from './parser/classDiagram.jison';
+import classDb from './classDb.js';
 
 describe('class diagram, ', function () {
   describe('when parsing data from a classDiagram it', function () {

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

@@ -1,9 +1,9 @@
-import { DiagramDefinition } from '../../diagram-api/types';
+import { DiagramDefinition } from '../../diagram-api/types.js';
 // @ts-ignore: TODO Fix ts errors
-import parser from './parser/classDiagram';
-import db from './classDb';
-import styles from './styles';
-import renderer from './classRenderer-v2';
+import parser from './parser/classDiagram.jison';
+import db from './classDb.js';
+import styles from './styles.js';
+import renderer from './classRenderer-v2.js';
 
 export const diagram: DiagramDefinition = {
   parser,

packages/mermaid/src/diagrams/class/classDiagram.ts

@@ -1,9 +1,9 @@
-import { DiagramDefinition } from '../../diagram-api/types';
+import { DiagramDefinition } from '../../diagram-api/types.js';
 // @ts-ignore: TODO Fix ts errors
-import parser from './parser/classDiagram';
-import db from './classDb';
-import styles from './styles';
-import renderer from './classRenderer';
+import parser from './parser/classDiagram.jison';
+import db from './classDb.js';
+import styles from './styles.js';
+import renderer from './classRenderer.js';
 
 export const diagram: DiagramDefinition = {
   parser,

packages/mermaid/src/diagrams/class/classDiagramGrammar.spec.js

@@ -1,13 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const fs = require('fs');
-
-import { LALRGenerator } from 'jison';
-
-describe('class diagram grammar', function () {
-  it('should introduce no new conflicts', function () {
-    const file = require.resolve('./parser/classDiagram.jison');
-    const grammarSource = fs.readFileSync(file, 'utf8');
-    const grammarParser = new LALRGenerator(grammarSource, {});
-    expect(grammarParser.conflicts < 16).toBe(true);
-  });
-});