Revert "update to warning format"

This reverts commit 89a1b67ad8.

.github/ISSUE_TEMPLATE/bug_report.yml

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

.github/workflows/build-docs.yml

@@ -1,29 +0,0 @@
-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,8 +38,15 @@ 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
@@ -47,22 +54,19 @@ jobs:
         env:
           # e.g. mermaid-js/mermaid/my-branch
           APPLITOOLS_BRANCH: ${{ github.repository }}/${{ github.ref_name }}
-          APPLITOOLS_PARENT_BRANCH: ${{ github.event.inputs.parent_branch }}
+          APPLITOOLS_PARENT_BRANCH: ${{ github.inputs.parent_branch }}
           APPLITOOLS_API_KEY: ${{ secrets.APPLITOOLS_API_KEY }}
           APPLITOOLS_SERVER_URL: 'https://eyesapi.applitools.com'
 
-      - name: Cypress run
-        uses: cypress-io/github-action@v4
-        id: cypress
-        with:
-          start: pnpm run dev
-          wait-on: 'http://localhost:9000'
+      - name: Run E2E Tests
+        run: pnpm run e2e
         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.event.inputs.parent_branch }}
+          APPLITOOLS_PARENT_BRANCH: ${{ github.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.7.0
+        uses: lycheeverse/lychee-action@v1.6.1
         with:
           args: >-
             --verbose

.github/workflows/publish-docs.yml

@@ -5,6 +5,10 @@ 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:
@@ -49,6 +53,7 @@ jobs:
 
   # Deployment job
   deploy:
+    if: ${{ github.event_name == 'push' && github.ref == 'refs/heads/master' }}
     environment:
       name: github-pages
     runs-on: ubuntu-latest
@@ -56,4 +61,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v1

.github/workflows/release-publish.yml

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

.vite/build.ts

@@ -3,7 +3,6 @@ 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';
 
@@ -11,7 +10,6 @@ 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'],
@@ -61,15 +59,9 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
     {
       name,
       format: 'esm',
-      sourcemap,
+      sourcemap: true,
       entryFileNames: `${name}.esm${minify ? '.min' : ''}.mjs`,
     },
-    {
-      name,
-      format: 'umd',
-      sourcemap,
-      entryFileNames: `${name}${minify ? '.min' : ''}.js`,
-    },
   ];
 
   if (core) {
@@ -86,7 +78,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
       {
         name,
         format: 'esm',
-        sourcemap,
+        sourcemap: true,
         entryFileNames: `${name}.core.mjs`,
       },
     ];
@@ -110,14 +102,9 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
       },
     },
     resolve: {
-      extensions: [],
+      extensions: ['.jison', '.js', '.ts', '.json'],
     },
-    plugins: [
-      jisonPlugin(),
-      // @ts-expect-error According to the type definitions, rollup plugins are incompatible with vite
-      typescript({ compilerOptions: { declaration: false } }),
-      ...visualizerOptions(packageName, core),
-    ],
+    plugins: [jisonPlugin(), ...visualizerOptions(packageName, core)],
   };
 
   if (watch && config.build) {

__mocks__/d3.ts

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

cSpell.json

@@ -65,7 +65,6 @@
     "mdast",
     "mdbook",
     "mermerd",
-    "micromark",
     "mindaugas",
     "mindmap",
     "mindmaps",
@@ -84,7 +83,6 @@
     "rect",
     "rects",
     "redmine",
-    "rehype",
     "roledescription",
     "sandboxed",
     "setupgraphviewbox",

cypress/integration/other/configuration.spec.js

@@ -1,4 +1,4 @@
-import { renderGraph } from '../../helpers/util.js';
+import { renderGraph } from '../../helpers/util';
 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.js';
+import { urlSnapshotTest } from '../../helpers/util';
 
 describe('mermaid', () => {
   describe('registerDiagram', () => {

cypress/integration/other/ghsa.spec.js

@@ -1,4 +1,4 @@
-import { urlSnapshotTest } from '../../helpers/util.js';
+import { urlSnapshotTest } from '../../helpers/util';
 
 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.js';
+import { imgSnapshotTest } from '../../helpers/util';
 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.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util';
 
 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 to multiple classes', () => {
+  it('15: should render a simple class diagram with css classes applied two multiple classes', () => {
     imgSnapshotTest(
       `
     classDiagram

cypress/integration/rendering/current.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.js';
+import { imgSnapshotTest } from '../../helpers/util';
 
 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.js';
+import { imgSnapshotTest } from '../../helpers/util';
 
 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.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util';
 
 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.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util';
 
 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.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util';
 
 describe('Flowchart v2', () => {
   it('1: should render a simple flowchart', () => {
@@ -685,16 +685,6 @@ 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.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util';
 
 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.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util';
 
 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.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util';
 
 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.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util';
 
 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 './mermaid.esm.mjs';
+      import mermaid from '../../packages/mermaid/src/mermaid';
       // await mermaid.registerExternalDiagrams([]);
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);

cypress/platform/bundle-test.js

@@ -1,5 +1,4 @@
-// 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';
+import mermaid from '../../packages/mermaid/src/mermaid';
 
 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/dist/mermaid-example-diagram.core.mjs';
+      import exampleDiagram from '../../packages/mermaid-example-diagram/src/detector';
       // import example from '../../packages/mermaid-example-diagram/src/detector';
-      import mermaid from './mermaid.esm.mjs';
+      import mermaid from '../../packages/mermaid/src/mermaid';
 
       await mermaid.registerExternalDiagrams([exampleDiagram]);
       await mermaid.initialize({ logLevel: 0 });

cypress/platform/flow2.html

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

cypress/platform/knsv2.html

@@ -393,9 +393,9 @@ mindmap
 
     <script type="module">
       // import mindmap from '../../packages/mermaid-mindmap/src/detector';
-      // import example from '../../packages/mermaid-example-diagram/src/mermaid-example-diagram.core.mjs';
-      import mermaid from './mermaid.esm.mjs';
-      // await mermaid.registerExternalDiagrams([example]);
+      import example from '../../packages/mermaid-example-diagram/src/detector';
+      import mermaid from '../../packages/mermaid/src/mermaid';
+      await mermaid.registerExternalDiagrams([example]);
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };

cypress/platform/knsv3.html

@@ -40,7 +40,7 @@
 
     <script type="module">
       // import mermaid from './mermaid.esm.mjs';
-      import mermaid from '../../packages/mermaid/dist/mermaid.esm.mjs';
+      import mermaid from '../../packages/mermaid/src/mermaid';
       // 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 './mermaid.esm.mjs';
-import externalExample from '../../packages/mermaid-example-diagram/dist/mermaid-example-diagram.core.mjs';
+import mermaid2 from '../../packages/mermaid/src/mermaid';
+import externalExample from '../../packages/mermaid-example-diagram/src/detector';
 
 function b64ToUtf8(str) {
   return decodeURIComponent(escape(window.atob(str)));

demos/pie.html

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

docs/ecosystem/integrations.md

@@ -23,11 +23,10 @@ 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/Editing+and+formatting/Advanced+formatting+syntax#Diagram) (**Native support**)
+- [Obsidian](https://help.obsidian.md/How+to/Format+your+notes#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)
@@ -161,7 +160,6 @@ 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, insert a `script` tag with an absolute address and a `mermaid.initialize` call into the HTML using the following example:**
+**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:**
 
 ```html
 <script type="module">
@@ -272,9 +272,9 @@ To Deploy Mermaid:
 </script>
 ```
 
-**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.**
+**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.**
 
-**Examples can be found in** [Other examples](../syntax/examples.md)
+**Examples can be found at** [Other examples](../syntax/examples.md)
 
 ## Sibling projects
 

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), underscores, and dashes (-).
+Naming convention: a class name should be composed only of alphanumeric characters (including unicode), and underscores.
 
 ### 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 `()` or after the return type:
+> _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 `()`:
 >
-> - `*` Abstract e.g.: `someAbstractMethod()*` or `someAbstractMethod() int*`
-> - `$` Static e.g.: `someStaticMethod()$` or `someStaticMethod() String$`
+> - `*` Abstract e.g.: `someAbstractMethod()*`
+> - `$` Static e.g.: `someStaticMethod()$`
 
-> _note_ you can also include additional _classifiers_ to a field definition by adding the following notation to the very end:
+> _note_ you can also include additional _classifiers_ to a field definition by adding the following notation to the end of its name:
 >
 > - `$` Static e.g.: `String someField$`
 
@@ -604,26 +604,10 @@ You would define these actions on a separate line after all classes have been de
 
 ## Notes
 
-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"`.
+It is possible to add notes on diagram using `note "line1\nline2"` or note for class using `note for class "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,45 +55,7 @@ flowchart LR
     id1[This is the text in the box]
 ```
 
-#### 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
+## Graph
 
 This statement declares the direction of the Flowchart.
 
@@ -121,13 +83,15 @@ 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
 
@@ -778,9 +742,9 @@ 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.
+- 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.
 

package.json

@@ -4,7 +4,7 @@
   "version": "10.1.0",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
-  "packageManager": "pnpm@8.3.1",
+  "packageManager": "pnpm@7.30.1",
   "keywords": [
     "diagram",
     "markdown",
@@ -54,65 +54,64 @@
     ]
   },
   "devDependencies": {
-    "@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",
+    "@applitools/eyes-cypress": "^3.27.6",
+    "@commitlint/cli": "^17.2.0",
+    "@commitlint/config-conventional": "^17.2.0",
+    "@cspell/eslint-plugin": "^6.14.2",
     "@types/cors": "^2.8.13",
-    "@types/eslint": "^8.37.0",
+    "@types/eslint": "^8.4.10",
     "@types/express": "^4.17.17",
     "@types/js-yaml": "^4.0.5",
-    "@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/jsdom": "^21.0.0",
+    "@types/lodash": "^4.14.188",
+    "@types/mdast": "^3.0.10",
+    "@types/node": "^18.11.9",
+    "@types/prettier": "^2.7.1",
     "@types/rollup-plugin-visualizer": "^4.2.1",
-    "@typescript-eslint/eslint-plugin": "^5.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",
+    "@typescript-eslint/eslint-plugin": "^5.48.2",
+    "@typescript-eslint/parser": "^5.48.2",
+    "@vitest/coverage-c8": "^0.29.0",
+    "@vitest/spy": "^0.29.0",
+    "@vitest/ui": "^0.29.0",
+    "concurrently": "^7.5.0",
     "cors": "^2.8.5",
     "coveralls": "^3.1.1",
-    "cypress": "^12.10.0",
+    "cypress": "^12.0.0",
     "cypress-image-snapshot": "^4.0.1",
-    "esbuild": "^0.17.18",
-    "eslint": "^8.39.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-cypress": "^2.13.2",
+    "esbuild": "^0.17.0",
+    "eslint": "^8.32.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-html": "^7.1.0",
-    "eslint-plugin-jest": "^27.2.1",
-    "eslint-plugin-jsdoc": "^43.0.7",
+    "eslint-plugin-jest": "^27.1.5",
+    "eslint-plugin-jsdoc": "^39.6.2",
     "eslint-plugin-json": "^3.1.0",
     "eslint-plugin-lodash": "^7.4.0",
     "eslint-plugin-markdown": "^3.0.0",
     "eslint-plugin-no-only-tests": "^3.1.0",
     "eslint-plugin-tsdoc": "^0.2.17",
-    "eslint-plugin-unicorn": "^46.0.0",
+    "eslint-plugin-unicorn": "^45.0.0",
     "express": "^4.18.2",
-    "globby": "^13.1.4",
-    "husky": "^8.0.3",
-    "jest": "^29.5.0",
+    "globby": "^13.1.2",
+    "husky": "^8.0.2",
+    "jest": "^29.3.1",
     "jison": "^0.4.18",
     "js-yaml": "^4.1.0",
-    "jsdom": "^21.1.1",
-    "lint-staged": "^13.2.1",
+    "jsdom": "^21.0.0",
+    "lint-staged": "^13.0.3",
     "path-browserify": "^1.0.1",
-    "pnpm": "^8.3.1",
-    "prettier": "^2.8.8",
+    "pnpm": "^7.15.0",
+    "prettier": "^2.7.1",
     "prettier-plugin-jsdoc": "^0.4.2",
-    "rimraf": "^5.0.0",
-    "rollup-plugin-visualizer": "^5.9.0",
-    "start-server-and-test": "^2.0.0",
+    "rimraf": "^4.0.0",
+    "rollup-plugin-visualizer": "^5.8.3",
+    "start-server-and-test": "^1.15.4",
     "ts-node": "^10.9.1",
-    "typescript": "^5.0.4",
-    "vite": "^4.3.1",
-    "vitest": "^0.30.1"
+    "typescript": "^4.8.4",
+    "vite": "^4.1.1",
+    "vitest": "^0.29.0"
   },
   "volta": {
-    "node": "18.16.0"
+    "node": "18.15.0"
   }
 }

packages/mermaid-example-diagram/package.json

@@ -48,8 +48,8 @@
   },
   "devDependencies": {
     "@types/cytoscape": "^3.19.9",
-    "concurrently": "^8.0.0",
-    "rimraf": "^5.0.0",
+    "concurrently": "^7.5.0",
+    "rimraf": "^4.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.jison';
-import * as db from './exampleDiagramDb.js';
-import renderer from './exampleDiagramRenderer.js';
-import styles from './styles.js';
-import { injectUtils } from './mermaidUtils.js';
+import parser from './parser/exampleDiagram';
+import * as db from './exampleDiagramDb';
+import renderer from './exampleDiagramRenderer';
+import styles from './styles';
+import { injectUtils } from './mermaidUtils';
 
 export const diagram = {
   db,

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

@@ -1,6 +1,6 @@
-import { parser } from './parser/exampleDiagram.jison';
-import * as db from './exampleDiagramDb.js';
-import { injectUtils } from './mermaidUtils.js';
+import { parser } from './parser/exampleDiagram';
+import * as db from './exampleDiagramDb';
+import { injectUtils } from './mermaidUtils';
 // Todo fix utils functions for tests
 import {
   log,
@@ -8,7 +8,7 @@ import {
   getConfig,
   sanitizeText,
   setupGraphViewBox,
-} from '../../mermaid/src/diagram-api/diagramAPI.js';
+} from '../../mermaid/src/diagram-api/diagramAPI';
 
 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.js';
+import { log } from './mermaidUtils';
 
 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.js';
+import { log, getConfig, setupGraphViewbox } from './mermaidUtils';
 
 /**
  * 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,5 +1,6 @@
 {
   "extends": "../../tsconfig.json",
+  "module": "esnext",
   "compilerOptions": {
     "rootDir": "./src",
     "outDir": "./dist"

packages/mermaid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "10.2.0-rc.2",
+  "version": "10.1.0",
   "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
   "module": "./dist/mermaid.core.mjs",
@@ -52,72 +52,63 @@
     ]
   },
   "dependencies": {
-    "@braintree/sanitize-url": "^6.0.2",
+    "@braintree/sanitize-url": "^6.0.0",
+    "@khanacademy/simple-markdown": "^0.8.6",
     "cytoscape": "^3.23.0",
     "cytoscape-cose-bilkent": "^4.1.0",
     "cytoscape-fcose": "^2.1.0",
     "d3": "^7.4.0",
     "dagre-d3-es": "7.0.10",
     "dayjs": "^1.11.7",
-    "dompurify": "3.0.2",
+    "dompurify": "2.4.5",
     "elkjs": "^0.8.2",
     "khroma": "^2.0.0",
     "lodash-es": "^4.17.21",
     "non-layered-tidy-tree-layout": "^2.0.2",
-    "rehype-sanitize": "^5.0.1",
-    "rehype-stringify": "^9.0.3",
-    "remark-breaks": "^3.0.2",
-    "remark-parse": "^10.0.1",
-    "remark-rehype": "^10.1.0",
-    "stylis": "^4.1.3",
+    "stylis": "^4.1.2",
     "ts-dedent": "^2.2.0",
-    "unified": "^10.1.2",
     "uuid": "^9.0.0",
     "web-worker": "^1.2.0"
   },
   "devDependencies": {
     "@types/cytoscape": "^3.19.9",
     "@types/d3": "^7.4.0",
-    "@types/dompurify": "^3.0.2",
-    "@types/jsdom": "^21.1.1",
+    "@types/dompurify": "^2.4.0",
+    "@types/jsdom": "^21.0.0",
     "@types/lodash-es": "^4.17.7",
     "@types/micromatch": "^4.0.2",
-    "@types/prettier": "^2.7.2",
+    "@types/prettier": "^2.7.1",
     "@types/stylis": "^4.0.2",
-    "@types/uuid": "^9.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.59.0",
-    "@typescript-eslint/parser": "^5.59.0",
+    "@types/uuid": "^9.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.42.1",
+    "@typescript-eslint/parser": "^5.42.1",
     "chokidar": "^3.5.3",
-    "concurrently": "^8.0.1",
+    "concurrently": "^7.5.0",
     "coveralls": "^3.1.1",
     "cpy-cli": "^4.2.0",
-    "cspell": "^6.31.1",
-    "csstree-validator": "^3.0.0",
-    "globby": "^13.1.4",
+    "cspell": "^6.14.3",
+    "globby": "^13.1.2",
     "jison": "^0.4.18",
-    "js-base64": "^3.7.5",
-    "jsdom": "^21.1.1",
+    "js-base64": "^3.7.2",
+    "jsdom": "^21.0.0",
     "micromatch": "^4.0.5",
     "path-browserify": "^1.0.1",
-    "prettier": "^2.8.8",
+    "prettier": "^2.7.1",
     "remark": "^14.0.2",
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1",
-    "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",
+    "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",
     "unist-util-flatmap": "^1.0.0",
-    "vitepress": "^1.0.0-alpha.72",
-    "vitepress-plugin-search": "^1.0.4-alpha.20"
+    "vitepress": "^1.0.0-alpha.46",
+    "vitepress-plugin-search": "^1.0.4-alpha.19"
   },
   "files": [
-    "dist/",
+    "dist",
     "README.md"
   ],
-  "sideEffects": false,
-  "publishConfig": {
-    "access": "public"
-  }
+  "sideEffects": false
 }

packages/mermaid/src/Diagram.ts

@@ -1,11 +1,11 @@
-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';
+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';
 
 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.js';
+import * as configApi from '../config';
 import { vi } from 'vitest';
-import { mermaidAPI as mAPI } from '../mermaidAPI.js';
+import { mermaidAPI as mAPI } from '../mermaidAPI';
 
 // 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.js';
-import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility.js';
-import { D3Element } from './mermaidAPI.js';
+import { MockedD3 } from './tests/MockedD3';
+import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility';
+import { D3Element } from './mermaidAPI';
 
 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.js';
+import { D3Element } from './mermaidAPI';
 
 import isEmpty from 'lodash-es/isEmpty.js';
 

packages/mermaid/src/commonDb.ts

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

packages/mermaid/src/config.spec.js

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

packages/mermaid/src/config.ts

@@ -1,8 +1,8 @@
-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';
+import assignWithDepth from './assignWithDepth';
+import { log } from './logger';
+import theme from './themes';
+import config from './defaultConfig';
+import type { MermaidConfig } from './config.type';
 
 export const defaultConfig: MermaidConfig = Object.freeze(config);
 

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

@@ -1,10 +1,10 @@
-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 intersectRect from './intersect/intersect-rect';
+import { log } from '../logger';
+import createLabel from './createLabel';
+import { createText } from '../rendering-util/createText';
 import { select } from 'd3';
-import { getConfig } from '../config.js';
-import { evaluate } from '../diagrams/common/common.js';
+import { getConfig } from '../config';
+import { evaluate } from '../diagrams/common/common';
 
 const rect = (parent, node) => {
   log.info('Creating subgraph rect for ', node.id, node);

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

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

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

@@ -1,10 +1,10 @@
-import { log } from '../logger.js';
-import createLabel from './createLabel.js';
-import { createText } from '../rendering-util/createText.js';
+import { log } from '../logger';
+import createLabel from './createLabel';
+import { createText } from '../rendering-util/createText';
 import { line, curveBasis, select } from 'd3';
-import { getConfig } from '../config.js';
-import utils from '../utils.js';
-import { evaluate } from '../diagrams/common/common.js';
+import { getConfig } from '../config';
+import utils from '../utils';
+import { evaluate } from '../diagrams/common/common';
 
 let edgeLabels = {};
 let terminalLabels = {};

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

@@ -1,5 +1,5 @@
-import { intersection } from './edges.js';
-import { setLogLevel } from '../logger.js';
+import { intersection } from './edges';
+import { setLogLevel } from '../logger';
 
 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.js';
-import { updateNodeBounds } from './shapes/util.js';
+import insertMarkers from './markers';
+import { updateNodeBounds } from './shapes/util';
 import {
   clear as clearGraphlib,
   clusterDb,
   adjustClustersAndEdges,
   findNonClusterChild,
   sortNodesByHierarchy,
-} 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';
+} 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';
 
-const recursiveRender = async (_elem, graph, diagramtype, parentCluster) => {
+const recursiveRender = (_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,46 +35,44 @@ const recursiveRender = async (_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
-  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);
-        }
+  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);
       }
-      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.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.warn('Recursive render complete ', 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));
       } 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));
-        } else {
-          log.info('Node - the non recursive path', v, node.id, node);
-          await insertNode(nodes, graph.node(v), dir);
-        }
+        log.info('Node - the non recursive path', v, node.id, node);
+        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
@@ -148,7 +146,7 @@ const recursiveRender = async (_elem, graph, diagramtype, parentCluster) => {
   return { elem, diff };
 };
 
-export const render = async (elem, graph, markers, diagramtype, id) => {
+export const render = (elem, graph, markers, diagramtype, id) => {
   insertMarkers(elem, markers, diagramtype, id);
   clearNodes();
   clearEdges();
@@ -159,7 +157,7 @@ export const render = async (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));
-  await recursiveRender(elem, graph, diagramtype);
+  recursiveRender(elem, graph, diagramtype);
 };
 
 // const shapeDefinitions = {};

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

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

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

@@ -1,6 +1,6 @@
 /* eslint "no-console": off */
 
-import intersectLine from './intersect-line.js';
+import intersectLine from './intersect-line';
 
 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.js';
+import { log } from '../logger';
 
 // 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 10 10')
+    .attr('viewBox', '0 0 12 20')
     .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.js';
+import { log } from '../logger';
 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.js';
-import { setLogLevel, log } from '../logger.js';
+} from './mermaid-graphlib';
+import { setLogLevel, log } from '../logger';
 
 describe('Graphlib decorations', () => {
   let g;

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

@@ -1,15 +1,15 @@
 import { select } from 'd3';
-import { log } from '../logger.js';
-import { labelHelper, updateNodeBounds, insertPolygonShape } from './shapes/util.js';
-import { getConfig } from '../config.js';
+import { log } from '../logger';
+import { labelHelper, updateNodeBounds, insertPolygonShape } from './shapes/util';
+import { getConfig } from '../config';
 import intersect from './intersect/index.js';
-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';
+import createLabel from './createLabel';
+import note from './shapes/note';
+import { parseMember } from '../diagrams/class/svgDraw';
+import { evaluate } from '../diagrams/common/common';
 
-const question = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+const question = (parent, node) => {
+  const { shapeSvg, bbox } = 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 = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+const hexagon = (parent, node) => {
+  const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
 
   const f = 4;
   const h = bbox.height + node.padding;
@@ -96,8 +96,8 @@ const hexagon = async (parent, node) => {
   return shapeSvg;
 };
 
-const rect_left_inv_arrow = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+const rect_left_inv_arrow = (parent, node) => {
+  const { shapeSvg, bbox } = 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 = async (parent, node) => {
   return shapeSvg;
 };
 
-const lean_right = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+const lean_right = (parent, node) => {
+  const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
@@ -145,8 +145,8 @@ const lean_right = async (parent, node) => {
   return shapeSvg;
 };
 
-const lean_left = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+const lean_left = (parent, node) => {
+  const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
@@ -168,8 +168,8 @@ const lean_left = async (parent, node) => {
   return shapeSvg;
 };
 
-const trapezoid = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+const trapezoid = (parent, node) => {
+  const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
@@ -191,8 +191,8 @@ const trapezoid = async (parent, node) => {
   return shapeSvg;
 };
 
-const inv_trapezoid = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+const inv_trapezoid = (parent, node) => {
+  const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
@@ -214,8 +214,8 @@ const inv_trapezoid = async (parent, node) => {
   return shapeSvg;
 };
 
-const rect_right_inv_arrow = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+const rect_right_inv_arrow = (parent, node) => {
+  const { shapeSvg, bbox } = 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 = async (parent, node) => {
   return shapeSvg;
 };
 
-const cylinder = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+const cylinder = (parent, node) => {
+  const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
 
   const w = bbox.width + node.padding;
   const rx = w / 2;
@@ -310,13 +310,8 @@ const cylinder = async (parent, node) => {
   return shapeSvg;
 };
 
-const rect = async (parent, node) => {
-  const { shapeSvg, bbox, halfPadding } = await labelHelper(
-    parent,
-    node,
-    'node ' + node.classes,
-    true
-  );
+const rect = (parent, node) => {
+  const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes, true);
 
   // add the rect
   const rect = shapeSvg.insert('rect', ':first-child');
@@ -357,8 +352,8 @@ const rect = async (parent, node) => {
   return shapeSvg;
 };
 
-const labelRect = async (parent, node) => {
-  const { shapeSvg } = await labelHelper(parent, node, 'label', true);
+const labelRect = (parent, node) => {
+  const { shapeSvg } = labelHelper(parent, node, 'label', true);
 
   log.trace('Classes = ', node.classes);
   // add the rect
@@ -544,8 +539,8 @@ const rectWithTitle = (parent, node) => {
   return shapeSvg;
 };
 
-const stadium = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+const stadium = (parent, node) => {
+  const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
 
   const h = bbox.height + node.padding;
   const w = bbox.width + h / 4 + node.padding;
@@ -570,8 +565,8 @@ const stadium = async (parent, node) => {
   return shapeSvg;
 };
 
-const circle = async (parent, node) => {
-  const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, undefined, true);
+const circle = (parent, node) => {
+  const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, undefined, true);
   const circle = shapeSvg.insert('circle', ':first-child');
 
   // center the circle around its coordinate
@@ -595,8 +590,8 @@ const circle = async (parent, node) => {
   return shapeSvg;
 };
 
-const doublecircle = async (parent, node) => {
-  const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, undefined, true);
+const doublecircle = (parent, node) => {
+  const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, undefined, true);
   const gap = 5;
   const circleGroup = shapeSvg.insert('g', ':first-child');
   const outerCircle = circleGroup.insert('circle');
@@ -631,8 +626,8 @@ const doublecircle = async (parent, node) => {
   return shapeSvg;
 };
 
-const subroutine = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+const subroutine = (parent, node) => {
+  const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
@@ -981,7 +976,7 @@ const shapes = {
 
 let nodeElems = {};
 
-export const insertNode = async (elem, node, dir) => {
+export const insertNode = (elem, node, dir) => {
   let newEl;
   let el;
 
@@ -994,9 +989,9 @@ export const insertNode = async (elem, node, dir) => {
       target = node.linkTarget || '_blank';
     }
     newEl = elem.insert('svg:a').attr('xlink:href', node.link).attr('target', target);
-    el = await shapes[node.shape](newEl, node, dir);
+    el = shapes[node.shape](newEl, node, dir);
   } else {
-    el = await shapes[node.shape](elem, node, dir);
+    el = shapes[node.shape](elem, node, dir);
     newEl = el;
   }
   if (node.tooltip) {
@@ -1022,7 +1017,6 @@ 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.js';
+// import { log } from '../logger';
 
 // 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,19 +1,14 @@
-import { updateNodeBounds, labelHelper } from './util.js';
-import { log } from '../../logger.js';
-import { getConfig } from '../../config.js';
+import { updateNodeBounds, labelHelper } from './util';
+import { log } from '../../logger';
+import { getConfig } from '../../config';
 import intersect from '../intersect/index.js';
 
-const note = async (parent, node) => {
+const note = (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
-  );
+  const { shapeSvg, bbox, halfPadding } = 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,10 @@
-import createLabel from '../createLabel.js';
-import { createText } from '../../rendering-util/createText.js';
-import { getConfig } from '../../config.js';
-import { decodeEntities } from '../../mermaidAPI.js';
+import createLabel from '../createLabel';
+import { createText } from '../../rendering-util/createText';
+import { getConfig } from '../../config';
+import { decodeEntities } from '../../mermaidAPI';
 import { select } from 'd3';
-import { evaluate, sanitizeText } from '../../diagrams/common/common.js';
-
-export const labelHelper = async (parent, node, _classes, isNode) => {
+import { evaluate, sanitizeText } from '../../diagrams/common/common';
+export const labelHelper = (parent, node, _classes, isNode) => {
   let classes;
   const useHtmlLabels = node.useHtmlLabels || evaluate(getConfig().flowchart.htmlLabels);
   if (!_classes) {
@@ -52,47 +51,17 @@ export const labelHelper = async (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 (useHtmlLabels) {
     label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');

packages/mermaid/src/defaultConfig.ts

@@ -1,5 +1,5 @@
-import theme from './themes/index.js';
-import { MermaidConfig } from './config.type.js';
+import theme from './themes';
+import { MermaidConfig } from './config.type';
 /**
  * **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.js';
+import { cleanupComments } from './comments';
 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.js';
-import { log } from '../logger.js';
+import { MermaidConfig } from '../config.type';
+import { log } from '../logger';
 import type {
   DetectorRecord,
   DiagramDetector,
   DiagramLoader,
   ExternalDiagramDefinition,
-} from './types.js';
-import { frontMatterRegex } from './frontmatter.js';
-import { getDiagram, registerDiagram } from './diagramAPI.js';
-import { UnknownDiagramError } from '../errors.js';
+} from './types';
+import { frontMatterRegex } from './frontmatter';
+import { getDiagram, registerDiagram } from './diagramAPI';
+import { UnknownDiagramError } from '../errors';
 
 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.js';
-import { addDiagrams } from './diagram-orchestration.js';
+import { detectType } from './detectType';
+import { addDiagrams } from './diagram-orchestration';
 
 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.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';
+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';
 
 let hasLoadedDiagrams = false;
 export const addDiagrams = () => {

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

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

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

@@ -1,12 +1,12 @@
-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';
+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';
 
 /*
   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.js';
+import { extractFrontMatter } from './frontmatter';
 
 const dbMock = () => ({ setDiagramTitle: vi.fn() });
 

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

@@ -1,4 +1,4 @@
-import { DiagramDb } from './types.js';
+import { DiagramDb } from './types';
 // 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.js';
+import { MermaidConfig } from '../config.type';
 
 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.js';
-import { addDetector } from './diagram-api/detectType.js';
-import { addDiagrams } from './diagram-api/diagram-orchestration.js';
+import { Diagram, getDiagramFromText } from './Diagram';
+import { addDetector } from './diagram-api/detectType';
+import { addDiagrams } from './diagram-api/diagram-orchestration';
 
 addDiagrams();
 

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

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

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

@@ -1,4 +1,4 @@
-import type { ExternalDiagramDefinition } from '../../diagram-api/types.js';
+import type { ExternalDiagramDefinition } from '../../diagram-api/types';
 
 const id = 'c4';
 
@@ -7,7 +7,7 @@ const detector = (txt: string) => {
 };
 
 const loader = async () => {
-  const { diagram } = await import('./c4Diagram.js');
+  const { diagram } = await import('./c4Diagram');
   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.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';
+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';
 
 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.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';
+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';
 
 let globalBoundaryMaxX = 0,
   globalBoundaryMaxY = 0;

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

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-import common from '../common/common.js';
+import common from '../common/common';
 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.js';
-import * as configApi from '../../config.js';
-import common from '../common/common.js';
-import utils from '../../utils.js';
-import mermaidAPI from '../../mermaidAPI.js';
+import { log } from '../../logger';
+import * as configApi from '../../config';
+import common from '../common/common';
+import utils from '../../utils';
+import mermaidAPI from '../../mermaidAPI';
 import {
   setAccTitle,
   getAccTitle,
@@ -13,8 +13,8 @@ import {
   clear as commonClear,
   setDiagramTitle,
   getDiagramTitle,
-} from '../../commonDb.js';
-import { ClassRelation, ClassNode, ClassNote, ClassMap } from './classTypes.js';
+} from '../../commonDb';
+import { ClassRelation, ClassNode, ClassNote, ClassMap } from './classTypes';
 
 const MERMAID_DOM_ID_PREFIX = 'classId-';
 
@@ -106,7 +106,6 @@ export const clear = function () {
 export const getClass = function (id: string) {
   return classes[id];
 };
-
 export const getClasses = function () {
   return classes;
 };
@@ -171,10 +170,9 @@ export const addMember = function (className: string, member: string) {
     const memberString = member.trim();
 
     if (memberString.startsWith('<<') && memberString.endsWith('>>')) {
-      // its an annotation
+      // Remove leading and trailing brackets
       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));
@@ -236,7 +234,6 @@ 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.js';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';
 
 const id = 'classDiagram';
 
@@ -15,7 +15,7 @@ const detector: DiagramDetector = (txt, config) => {
 };
 
 const loader = async () => {
-  const { diagram } = await import('./classDiagram-v2.js');
+  const { diagram } = await import('./classDiagram-v2');
   return { id, diagram };
 };
 

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

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

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

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

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

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

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

@@ -0,0 +1,13 @@
+// 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);
+  });
+});

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

@@ -1,16 +0,0 @@
-import { readFile } from 'node:fs/promises';
-// @ts-ignore - no types
-import { LALRGenerator } from 'jison';
-import path from 'path';
-
-const getAbsolutePath = (relativePath: string) => {
-  return new URL(path.join(path.dirname(import.meta.url), relativePath)).pathname;
-};
-
-describe('class diagram grammar', function () {
-  it('should have no conflicts', async function () {
-    const grammarSource = await readFile(getAbsolutePath('./parser/classDiagram.jison'), 'utf8');
-    const grammarParser = new LALRGenerator(grammarSource, {});
-    expect(grammarParser.conflicts).toBe(0);
-  });
-});

packages/mermaid/src/diagrams/class/classParser.spec.ts

@@ -1,78 +0,0 @@
-import { setConfig } from '../../config.js';
-import classDB from './classDb.js';
-// @ts-ignore - no types in jison
-import classDiagram from './parser/classDiagram.jison';
-
-setConfig({
-  securityLevel: 'strict',
-});
-
-describe('when parsing class diagram', function () {
-  beforeEach(function () {
-    classDiagram.parser.yy = classDB;
-    classDiagram.parser.yy.clear();
-  });
-
-  it('should parse diagram with direction', () => {
-    classDiagram.parser.parse(`classDiagram
-        direction TB
-        class Student {
-          -idCard : IdCard
-        }
-        class IdCard{
-          -id : int
-          -name : string
-        }
-        class Bike{
-          -id : int
-          -name : string
-        }
-        Student "1" --o "1" IdCard : carries
-        Student "1" --o "1" Bike : rides`);
-
-    expect(Object.keys(classDB.getClasses()).length).toBe(3);
-    expect(classDB.getClasses().Student).toMatchInlineSnapshot(`
-      {
-        "annotations": [],
-        "cssClasses": [],
-        "domId": "classId-Student-0",
-        "id": "Student",
-        "label": "Student",
-        "members": [
-          "-idCard : IdCard",
-        ],
-        "methods": [],
-        "type": "",
-      }
-    `);
-    expect(classDB.getRelations().length).toBe(2);
-    expect(classDB.getRelations()).toMatchInlineSnapshot(`
-      [
-        {
-          "id1": "Student",
-          "id2": "IdCard",
-          "relation": {
-            "lineType": 0,
-            "type1": "none",
-            "type2": 0,
-          },
-          "relationTitle1": "1",
-          "relationTitle2": "1",
-          "title": "carries",
-        },
-        {
-          "id1": "Student",
-          "id2": "Bike",
-          "relation": {
-            "lineType": 0,
-            "type1": "none",
-            "type2": 0,
-          },
-          "relationTitle1": "1",
-          "relationTitle2": "1",
-          "title": "rides",
-        },
-      ]
-    `);
-  });
-});

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

@@ -1,14 +1,14 @@
 // @ts-ignore d3 types are not available
 import { select, curveLinear } from 'd3';
 import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
-import { log } from '../../logger.js';
-import { getConfig } from '../../config.js';
+import { log } from '../../logger';
+import { getConfig } from '../../config';
 import { render } from '../../dagre-wrapper/index.js';
-import utils from '../../utils.js';
-import { interpolateToCurve, getStylesFromArray } from '../../utils.js';
-import { setupGraphViewbox } from '../../setupGraphViewbox.js';
-import common from '../common/common.js';
-import { ClassRelation, ClassNote, ClassMap, EdgeData } from './classTypes.js';
+import utils from '../../utils';
+import { interpolateToCurve, getStylesFromArray } from '../../utils';
+import { setupGraphViewbox } from '../../setupGraphViewbox';
+import common from '../common/common';
+import { ClassRelation, ClassNote, ClassMap, EdgeData } from './classTypes';
 
 const sanitizeText = (txt: string) => common.sanitizeText(txt, getConfig());
 
@@ -248,7 +248,7 @@ export const setConf = function (cnf: any) {
  * @param _version -
  * @param diagObj -
  */
-export const draw = async function (text: string, id: string, _version: string, diagObj: any) {
+export const draw = function (text: string, id: string, _version: string, diagObj: any) {
   log.info('Drawing class - ', id);
 
   // TODO V10: Why flowchart? Might be a mistake when copying.
@@ -300,7 +300,7 @@ export const draw = async function (text: string, id: string, _version: string,
   // Run the renderer. This is what draws the final graph.
   // @ts-ignore Ignore type error for now
   const element = root.select('#' + id + ' g');
-  await render(
+  render(
     element,
     g,
     ['aggregation', 'extension', 'composition', 'dependency', 'lollipop'],

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

@@ -1,10 +1,10 @@
 import { select } from 'd3';
 import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
 import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
-import { log } from '../../logger.js';
-import svgDraw from './svgDraw.js';
-import { configureSvgSize } from '../../setupGraphViewbox.js';
-import { getConfig } from '../../config.js';
+import { log } from '../../logger';
+import svgDraw from './svgDraw';
+import { configureSvgSize } from '../../setupGraphViewbox';
+import { getConfig } from '../../config';
 
 let idCache = {};
 const padding = 20;

packages/mermaid/src/diagrams/class/parser/classDiagram.jison

@@ -200,8 +200,9 @@ Function arguments are optional: 'call <callback_name>()' simply executes 'callb
 
 start
     : mermaidDoc
+    | statments
+    | direction
     | directive start
-    | statements
     ;
 
 direction
@@ -258,8 +259,8 @@ className
     : alphaNumToken { $$=$1; }
     | classLiteralName { $$=$1; }
     | alphaNumToken className { $$=$1+$2; }
-    | alphaNumToken GENERICTYPE { $$=$1+'~'+$2+'~'; }
-    | classLiteralName GENERICTYPE { $$=$1+'~'+$2+'~'; }
+    | alphaNumToken GENERICTYPE { $$=$1+'~'+$2; }
+    | classLiteralName GENERICTYPE { $$=$1+'~'+$2; }
     ;
 
 statement
@@ -271,6 +272,7 @@ statement
     | clickStatement
     | cssClassStatement
     | noteStatement
+    | directive
     | direction
     | acc_title acc_title_value  { $$=$2.trim();yy.setAccTitle($$); }
     | acc_descr acc_descr_value  { $$=$2.trim();yy.setAccDescription($$); }
@@ -364,7 +366,7 @@ textToken      : textNoTagsToken | TAGSTART | TAGEND | '=='  | '--' | PCT | DEFA
 
 textNoTagsToken: alphaNumToken | SPACE | MINUS | keywords ;
 
-alphaNumToken  : UNICODE_TEXT | NUM | ALPHA | MINUS;
+alphaNumToken  : UNICODE_TEXT | NUM | ALPHA;
 
 classLiteralName : BQUOTE_STR;
 

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

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