Merge pull request #6861 from Baraka24/docs/6339_update-tiki-in-integrations-community-list

docs(integrations): update Tiki to Tiki Wiki CMS Groupware community in list cms/ecm to avoid confusion

.build/common.ts

@@ -33,11 +33,6 @@ export const packageOptions = {
     packageName: 'mermaid-layout-elk',
     file: 'layouts.ts',
   },
-  'mermaid-layout-tidy-tree': {
-    name: 'mermaid-layout-tidy-tree',
-    packageName: 'mermaid-layout-tidy-tree',
-    file: 'index.ts',
-  },
   examples: {
     name: 'mermaid-examples',
     packageName: 'examples',

.changeset/busy-clocks-melt.md

@@ -0,0 +1,6 @@
+---
+'@mermaid-js/layout-elk': patch
+'mermaid': patch
+---
+
+feat: Exposing elk configuration forceNodeModelOrder and considerModelOrder to the mermaid configuration

.changeset/hungry-guests-drive.md

@@ -1,7 +0,0 @@
----
-'mermaid': minor
-'@mermaid-js/layout-tidy-tree': minor
-'@mermaid-js/layout-elk': minor
----
-
-feat: Update mindmap rendering to support multiple layouts, improved edge intersections, and new shapes

.changeset/spicy-ties-see.md

@@ -0,0 +1,5 @@
+---
+'@mermaid-js/layout-elk': patch
+---
+
+Make elk not force node model order, but strongly consider it instead

.changeset/strong-laws-confess.md

@@ -0,0 +1,9 @@
+---
+'mermaid': patch
+---
+
+fix: fallback to raw text instead of rendering _Unsupported markdown_ or empty blocks
+
+Instead of printing **Unsupported markdown: XXX**, or empty blocks when using a markdown feature
+that Mermaid does not yet support when `htmlLabels: true`(default) or `htmlLabels: false`,
+fallback to the raw markdown text.

.github/workflows/validate-lockfile.yml

@@ -35,7 +35,7 @@ jobs:
 
           # 2) No unwanted vitepress paths
           if grep -qF 'packages/mermaid/src/vitepress' pnpm-lock.yaml; then
-            issues+=("• Disallowed path 'packages/mermaid/src/vitepress' present. Run \`rm -rf packages/mermaid/src/vitepress && pnpm install\` to regenerate.")
+            issues+=("• Disallowed path 'packages/mermaid/src/vitepress' present. Run `rm -rf packages/mermaid/src/vitepress && pnpm install` to regenerate.")
           fi
 
           # 3) Lockfile only changes when package.json changes

.gitignore

@@ -4,7 +4,6 @@ node_modules/
 coverage/
 .idea/
 .pnpm-store/
-.instructions/
 
 dist
 v8-compile-cache-0

.lintstagedrc.mjs

@@ -7,5 +7,6 @@ export default {
     'prettier --write',
   ],
   '.cspell/*.txt': ['tsx scripts/fixCSpell.ts'],
+  '**/*.md': ['pnpm cspell'],
   '**/*.jison': ['pnpm -w run lint:jison'],
 };

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

@@ -1053,6 +1053,21 @@ flowchart LR
       });
     });
   });
+
+  it('6647-elk: should keep node order when using elk layout unless it would add crossings', () => {
+    imgSnapshotTest(
+      `---
+config:
+  layout: elk
+---
+      flowchart TB
+        a --> a1 & a2 & a3 & a4
+        b --> b1 & b2
+        b2 --> b3
+        b1 --> b4
+      `
+    );
+  });
 });
 
 describe('Title and arrow styling #4813', () => {

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

@@ -1164,4 +1164,26 @@ end
       `
     );
   });
+
+  describe('when rendering unsuported markdown', () => {
+    const graph = `flowchart TB
+    mermaid{"What is\nyourmermaid version?"} --> v10["<11"] --"\`<**1**1\`"--> fine["No bug"]
+    mermaid --> v11[">= v11"] -- ">= v11" --> broken["Affected by https://github.com/mermaid-js/mermaid/issues/5824"]
+    subgraph subgraph1["\`How to fix **fix**\`"]
+        broken --> B["B"]
+    end
+    githost["Github, Gitlab, BitBucket, etc."]
+    githost2["\`Github, Gitlab, BitBucket, etc.\`"]
+    a["1."]
+    b["- x"]
+      `;
+
+    it('should render raw strings', () => {
+      imgSnapshotTest(graph);
+    });
+
+    it('should render raw strings with htmlLabels: false', () => {
+      imgSnapshotTest(graph, { htmlLabels: false });
+    });
+  });
 });

cypress/integration/rendering/mindmap.spec.ts

@@ -159,10 +159,12 @@ root
   });
   it('square shape', () => {
     imgSnapshotTest(
-      `mindmap
+      `
+mindmap
     root[
       The root
-    ]`,
+    ]
+      `,
       {},
       undefined,
       shouldHaveRoot
@@ -170,10 +172,12 @@ root
   });
   it('rounded rect shape', () => {
     imgSnapshotTest(
-      `mindmap
+      `
+mindmap
     root((
       The root
-    ))`,
+    ))
+      `,
       {},
       undefined,
       shouldHaveRoot
@@ -181,10 +185,12 @@ root
   });
   it('circle shape', () => {
     imgSnapshotTest(
-      `mindmap
+      `
+mindmap
     root(
       The root
-    )`,
+    )
+      `,
       {},
       undefined,
       shouldHaveRoot
@@ -192,8 +198,10 @@ root
   });
   it('default shape', () => {
     imgSnapshotTest(
-      `mindmap
-  The root`,
+      `
+mindmap
+  The root
+      `,
       {},
       undefined,
       shouldHaveRoot
@@ -201,10 +209,12 @@ root
   });
   it('adding children', () => {
     imgSnapshotTest(
-      `mindmap
+      `
+mindmap
   The root
     child1
-    child2`,
+    child2
+      `,
       {},
       undefined,
       shouldHaveRoot
@@ -212,11 +222,13 @@ root
   });
   it('adding grand children', () => {
     imgSnapshotTest(
-      `mindmap
+      `
+mindmap
   The root
     child1
       child2
-      child3`,
+      child3
+      `,
       {},
       undefined,
       shouldHaveRoot

cypress/platform/knsv2.html

@@ -130,77 +130,23 @@
   </head>
 
   <body>
-    <pre id="diagram4" class="mermaid2">
-      ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap))
-        Origins
-          Long history
-          ::icon(fa fa-book)
-          Popularisation
-            British popular psychology author Tony Buzan
-        Research
-          On effectiveness<br/>and features
-          On Automatic creation
-            Uses
-                Creative techniques
-                Strategic planning
-                Argument mapping
-        Tools
-          Pen and paper
-          Mermaid
-
-    </pre>
     <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap is a long thing))
-        A
-        B
-        C
-        D
-      </pre
+---
+config:
+  layout: elk
+  elk:
+    mergeEdges: false
+    forceNodeModelOrder: false
+    considerModelOrder: NONE
+
+---
+            flowchart TB
+              a --> a1 & a2 & a3 & a4
+              b --> b1 & b2
+              b2 --> b3
+              b1 --> b4</pre
     >
     <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap))
-        A
-        B
-      </pre
-    >
-    <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap))
-        A
-          a
-            apa[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-            apa2[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          b
-          c
-          d
-        B
-            apa3[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-        D
-          apa5[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          apa4[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-
-    </pre>
-
-    <pre id="diagram4" class="mermaid">
 treemap
 "Section 1"
     "Leaf 1.1": 12
@@ -245,145 +191,8 @@ treemap
           "Item B2": 25
     </pre>
     <pre id="diagram4" class="mermaid2">
-      ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap))
-        a
-          apa[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          apa2[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-        b
-          apa3[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          apa4[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-
-
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-      ---
-      config:
-        layout: tidy-tree
-      ---
-      flowchart TB
-          A --> n0["1"]
-          A --> n1["2"]
-          A --> n2["3"]
-          A --> n3["4"] --> Q & R & S & T
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-      ---
-      config:
-        layout: elk
-      ---
-      flowchart TB
-          A --> n0["1"]
-          A --> n1["2"]
-          A --> n2["3"]
-          A --> n3["4"] --> Q & R & S & T
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-      ---
-      config:
-        layout: dagre
-      ---
-      mindmap
-      root((mindmap is a long thing))
-        Origins
-          Long history
-          ::icon(fa fa-book)
-          Popularisation
-            British popular psychology author Tony Buzan
-        Research
-          On effectiveness&lt;br/>and features
-          On Automatic creation
-            Uses
-                Creative techniques
-                Strategic planning
-                Argument mapping
-        Tools
-          Pen and paper
-          Mermaid
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-      ---
-      config:
-        layout: cose-bilkent
-      ---
-      mindmap
-      root((mindmap))
-        Origins
-          Long history
-          ::icon(fa fa-book)
-          Popularisation
-            British popular psychology author Tony Buzan
-        Research
-          On effectiveness&lt;br/>and features
-          On Automatic creation
-            Uses
-                Creative techniques
-                Strategic planning
-                Argument mapping
-        Tools
-          Pen and paper
-          Mermaid
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-      ---
-      config:
-        layout: elk
-      ---
-      mindmap
-      root((mindmap))
-        Origins
-          Long history
-          ::icon(fa fa-book)
-          Popularisation
-            British popular psychology author Tony Buzan
-        Research
-          On effectiveness&lt;br/>and features
-          On Automatic creation
-            Uses
-                Creative techniques
-                Strategic planning
-                Argument mapping
-        Tools
-          Pen and paper
-          Mermaid
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-      ---
-      config:
-        layout: cose-bilkent
-      ---
       flowchart LR
-      root{mindmap} --- Origins --- Europe
-      Origins --> Asia
-      root --- Background --- Rich
-      Background --- Poor
-      subgraph apa
-        Background
-        Poor
-      end
-
-
-
-
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-      ---
-      config:
-        layout: elk
-      ---
-      flowchart LR
-      root{mindmap} --- Origins --- Europe
-      Origins --> Asia
-      root --- Background --- Rich
-      Background --- Poor
-
-
-
-
+        AB["apa@apa@"] --> B(("`apa@apa`"))
     </pre>
     <pre id="diagram4" class="mermaid2">
       flowchart
@@ -465,44 +274,6 @@ config:
     </pre>
     <pre id="diagram4" class="mermaid2">
 ---
-config:
-  layout: elk
----
-      flowchart LR
-      a
-      subgraph s0["APA"]
-      subgraph s8["APA"]
-      subgraph s1["APA"]
-        D{"X"}
-        E[Q]
-      end
-      subgraph s3["BAPA"]
-        F[Q]
-        I
-      end
-            D --> I
-            D --> I
-            D --> I
-
-      I{"X"}
-      end
-      end
-    </pre>
-    <pre id="diagram4" class="mermaid2">
----
-config:
-  layout: elk
----
-      flowchart LR
-      a
-        D{"Use the editor"}
-
-      D -- Mermaid js --> I{"fa:fa-code Text"}
-      D-->I
-      D-->I
-    </pre>
-    <pre id="diagram4" class="mermaid2">
----
 config:
   layout: elk
 ---

cypress/platform/mindmap-layouts.html

@@ -1,379 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>Mermaid Quick Test Page</title>
-    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
-    <style>
-      div.mermaid {
-        font-family: 'Courier New', Courier, monospace !important;
-      }
-    </style>
-  </head>
-
-  <body>
-    <pre class="mermaid">
- ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap))
-        A
-        B
-    </pre>
-    <pre class="mermaid">
- ---
-      config:
-        layout: dagre
-      ---
-      mindmap
-      root((mindmap))
-        A
-        B
-    </pre>
-    <pre class="mermaid">
- ---
-      config:
-        layout: elk
-      ---
-      mindmap
-      root((mindmap))
-        A
-        B
-    </pre>
-    <pre class="mermaid">
- ---
-      config:
-        layout: cose-bilkent
-      ---
-      mindmap
-      root((mindmap))
-        A
-        B
-    </pre>
-    <pre class="mermaid">
-    ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap is a long thing))
-        A
-        B
-        C
-        D
-    </pre>
-    <pre class="mermaid">
-    ---
-      config:
-        layout: dagre
-      ---
-      mindmap
-      root((mindmap is a long thing))
-        A
-        B
-        C
-        D
-    </pre>
-    <pre class="mermaid">
-    ---
-      config:
-        layout: elk
-      ---
-      mindmap
-      root((mindmap is a long thing))
-        A
-        B
-        C
-        D
-    </pre>
-    <pre class="mermaid">
-    ---
-      config:
-        layout: cose-bilkent
-      ---
-      mindmap
-      root((mindmap is a long thing))
-        A
-        B
-        C
-        D
-    </pre>
-    <pre class="mermaid">
-      mindmap
-      root((mindmap is a long thing))
-        A
-        B
-        C
-        D
-    </pre>
-    <pre class="mermaid">
-    ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap))
-        Origins
-          Long history
-          ::icon(fa fa-book)
-          Popularisation
-            British popular psychology author Tony Buzan
-        Research
-          On effectiveness&lt;br/>and features
-          On Automatic creation
-            Uses
-                Creative techniques
-                Strategic planning
-                Argument mapping
-        Tools
-              id)I am a cloud(
-                  id))I am a bang((
-                    Tools
-    </pre>
-    <pre class="mermaid">
-    ---
-      config:
-        layout: dagre
-      ---
-      mindmap
-      root((mindmap))
-        Origins
-          Long history
-          ::icon(fa fa-book)
-          Popularisation
-            British popular psychology author Tony Buzan
-        Research
-          On effectiveness&lt;br/>and features
-          On Automatic creation
-            Uses
-                Creative techniques
-                Strategic planning
-                Argument mapping
-        Tools
-              id)I am a cloud(
-                  id))I am a bang((
-                    Tools
-    </pre>
-    <pre class="mermaid">
-    ---
-      config:
-        layout: elk
-      ---
-      mindmap
-      root((mindmap))
-        Origins
-          Long history
-          ::icon(fa fa-book)
-          Popularisation
-            British popular psychology author Tony Buzan
-        Research
-          On effectiveness&lt;br/>and features
-          On Automatic creation
-            Uses
-                Creative techniques
-                Strategic planning
-                Argument mapping
-        Tools
-              id)I am a cloud(
-                  id))I am a bang((
-                    Tools
-    </pre>
-    <pre class="mermaid">
-    ---
-      config:
-        layout: cose-bilkent
-      ---
-      mindmap
-      root((mindmap))
-        Origins
-          Long history
-          ::icon(fa fa-book)
-          Popularisation
-            British popular psychology author Tony Buzan
-        Research
-          On effectiveness&lt;br/>and features
-          On Automatic creation
-            Uses
-                Creative techniques
-                Strategic planning
-                Argument mapping
-        Tools
-              id)I am a cloud(
-                  id))I am a bang((
-                    Tools
-    </pre>
-    <pre class="mermaid">
-      ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap))
-        A
-          a
-            apa[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-            apa2[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          b
-          c
-          d
-        B
-            apa3[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-        D
-          apa5[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          apa4[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-
-    </pre>
-    <pre class="mermaid">
-      ---
-      config:
-        layout: dagre
-      ---
-      mindmap
-      root((mindmap))
-        A
-          a
-            apa[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-            apa2[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          b
-          c
-          d
-        B
-            apa3[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-        D
-          apa5[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          apa4[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-
-    </pre>
-    <pre class="mermaid">
-      ---
-      config:
-        layout: elk
-      ---
-      mindmap
-      root((mindmap))
-        A
-          a
-            apa[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-            apa2[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          b
-          c
-          d
-        B
-            apa3[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-        D
-          apa5[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          apa4[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-
-    </pre>
-    <pre class="mermaid">
-      ---
-      config:
-        layout: cose-bilkent
-      ---
-      mindmap
-      root((mindmap))
-        A
-          a
-            apa[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-            apa2[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          b
-          c
-          d
-        B
-            apa3[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-        D
-          apa5[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          apa4[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-
-    </pre>
-
-    <pre class="mermaid">
- ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      ((This is a mindmap))
-        child1
-         grandchild 1
-         grandchild 2
-        child2
-         grandchild 3
-         grandchild 4
-        child3
-         grandchild 5
-         grandchild 6
-      
-    </pre>
-
-    <pre class="mermaid">
- ---
-      config:
-        layout: dagre
-      ---
-      mindmap
-      ((This is a mindmap))
-        child1
-         grandchild 1
-         grandchild 2
-        child2
-         grandchild 3
-         grandchild 4
-        child3
-         grandchild 5
-         grandchild 6
-      
-    </pre>
-
-    <pre class="mermaid">
- ---
-      config:
-        layout: elk
-      ---
-      mindmap
-      ((This is a mindmap))
-        child1
-         grandchild 1
-         grandchild 2
-        child2
-         grandchild 3
-         grandchild 4
-        child3
-         grandchild 5
-         grandchild 6
-      
-    </pre>
-
-    <pre class="mermaid">
- ---
-      config:
-        layout: cose-bilkent
-      ---
-      mindmap
-      ((This is a mindmap))
-        child1
-         grandchild 1
-         grandchild 2
-        child2
-         grandchild 3
-         grandchild 4
-        child3
-         grandchild 5
-         grandchild 6
-      
-    </pre>
-
-    <hr />
-    <script type="module">
-      import mermaid from '/mermaid.esm.mjs';
-      mermaid.initialize({
-        theme: 'default',
-        logLevel: 3,
-        securityLevel: 'loose',
-      });
-    </script>
-  </body>
-</html>

cypress/timings.json

@@ -2,219 +2,219 @@
   "durations": [
     {
       "spec": "cypress/integration/other/configuration.spec.js",
-      "duration": 5672
+      "duration": 5815
     },
     {
       "spec": "cypress/integration/other/external-diagrams.spec.js",
-      "duration": 1990
+      "duration": 2035
     },
     {
       "spec": "cypress/integration/other/ghsa.spec.js",
-      "duration": 3186
+      "duration": 3386
     },
     {
       "spec": "cypress/integration/other/iife.spec.js",
-      "duration": 1948
+      "duration": 2089
     },
     {
       "spec": "cypress/integration/other/interaction.spec.js",
-      "duration": 11938
+      "duration": 11578
     },
     {
       "spec": "cypress/integration/other/rerender.spec.js",
-      "duration": 1932
+      "duration": 2119
     },
     {
       "spec": "cypress/integration/other/xss.spec.js",
-      "duration": 27237
+      "duration": 27282
     },
     {
       "spec": "cypress/integration/rendering/appli.spec.js",
-      "duration": 3170
+      "duration": 3377
     },
     {
       "spec": "cypress/integration/rendering/architecture.spec.ts",
-      "duration": 104
+      "duration": 97
     },
     {
       "spec": "cypress/integration/rendering/block.spec.js",
-      "duration": 17390
+      "duration": 18137
     },
     {
       "spec": "cypress/integration/rendering/c4.spec.js",
-      "duration": 5296
+      "duration": 5455
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-elk-v3.spec.js",
-      "duration": 39004
+      "duration": 40850
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-handDrawn-v3.spec.js",
-      "duration": 37653
+      "duration": 37964
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-v2.spec.js",
-      "duration": 23278
+      "duration": 23446
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-v3.spec.js",
-      "duration": 36645
+      "duration": 37207
     },
     {
       "spec": "cypress/integration/rendering/classDiagram.spec.js",
-      "duration": 15418
+      "duration": 16531
     },
     {
       "spec": "cypress/integration/rendering/conf-and-directives.spec.js",
-      "duration": 9684
+      "duration": 9385
     },
     {
       "spec": "cypress/integration/rendering/current.spec.js",
-      "duration": 2570
+      "duration": 2697
     },
     {
       "spec": "cypress/integration/rendering/erDiagram-unified.spec.js",
-      "duration": 84687
+      "duration": 88648
     },
     {
       "spec": "cypress/integration/rendering/erDiagram.spec.js",
-      "duration": 14819
+      "duration": 15094
     },
     {
       "spec": "cypress/integration/rendering/errorDiagram.spec.js",
-      "duration": 3371
+      "duration": 3548
     },
     {
       "spec": "cypress/integration/rendering/flowchart-elk.spec.js",
-      "duration": 39925
+      "duration": 44889
     },
     {
       "spec": "cypress/integration/rendering/flowchart-handDrawn.spec.js",
-      "duration": 34694
+      "duration": 30487
     },
     {
       "spec": "cypress/integration/rendering/flowchart-icon.spec.js",
-      "duration": 7137
+      "duration": 7375
     },
     {
       "spec": "cypress/integration/rendering/flowchart-shape-alias.spec.ts",
-      "duration": 24740
+      "duration": 24913
     },
     {
       "spec": "cypress/integration/rendering/flowchart-v2.spec.js",
-      "duration": 42077
+      "duration": 51927
     },
     {
       "spec": "cypress/integration/rendering/flowchart.spec.js",
-      "duration": 30642
+      "duration": 31676
     },
     {
       "spec": "cypress/integration/rendering/gantt.spec.js",
-      "duration": 18085
+      "duration": 19897
     },
     {
       "spec": "cypress/integration/rendering/gitGraph.spec.js",
-      "duration": 50107
+      "duration": 53450
     },
     {
       "spec": "cypress/integration/rendering/iconShape.spec.ts",
-      "duration": 276279
+      "duration": 287035
     },
     {
       "spec": "cypress/integration/rendering/imageShape.spec.ts",
-      "duration": 56505
+      "duration": 58555
     },
     {
       "spec": "cypress/integration/rendering/info.spec.ts",
-      "duration": 3036
+      "duration": 3179
     },
     {
       "spec": "cypress/integration/rendering/journey.spec.js",
-      "duration": 6889
+      "duration": 7099
     },
     {
       "spec": "cypress/integration/rendering/kanban.spec.ts",
-      "duration": 7353
+      "duration": 7628
     },
     {
       "spec": "cypress/integration/rendering/katex.spec.js",
-      "duration": 3580
+      "duration": 3764
     },
     {
       "spec": "cypress/integration/rendering/marker_unique_id.spec.js",
-      "duration": 2508
+      "duration": 2573
     },
     {
       "spec": "cypress/integration/rendering/mindmap.spec.ts",
-      "duration": 10939
+      "duration": 11269
     },
     {
       "spec": "cypress/integration/rendering/newShapes.spec.ts",
-      "duration": 149102
+      "duration": 148389
     },
     {
       "spec": "cypress/integration/rendering/oldShapes.spec.ts",
-      "duration": 113987
+      "duration": 113395
     },
     {
       "spec": "cypress/integration/rendering/packet.spec.ts",
-      "duration": 4060
+      "duration": 4714
     },
     {
       "spec": "cypress/integration/rendering/pie.spec.ts",
-      "duration": 5715
+      "duration": 6446
     },
     {
       "spec": "cypress/integration/rendering/quadrantChart.spec.js",
-      "duration": 8945
+      "duration": 9133
     },
     {
       "spec": "cypress/integration/rendering/radar.spec.js",
-      "duration": 5337
+      "duration": 5544
     },
     {
       "spec": "cypress/integration/rendering/requirement.spec.js",
-      "duration": 2643
+      "duration": 2709
     },
     {
       "spec": "cypress/integration/rendering/requirementDiagram-unified.spec.js",
-      "duration": 52072
+      "duration": 55647
     },
     {
       "spec": "cypress/integration/rendering/sankey.spec.ts",
-      "duration": 6692
+      "duration": 6751
     },
     {
       "spec": "cypress/integration/rendering/sequencediagram.spec.js",
-      "duration": 35721
+      "duration": 36618
     },
     {
       "spec": "cypress/integration/rendering/stateDiagram-v2.spec.js",
-      "duration": 26030
+      "duration": 29642
     },
     {
       "spec": "cypress/integration/rendering/stateDiagram.spec.js",
-      "duration": 16333
+      "duration": 16037
     },
     {
       "spec": "cypress/integration/rendering/theme.spec.js",
-      "duration": 29287
+      "duration": 30006
     },
     {
       "spec": "cypress/integration/rendering/timeline.spec.ts",
-      "duration": 8491
+      "duration": 8451
     },
     {
       "spec": "cypress/integration/rendering/treemap.spec.ts",
-      "duration": 12291
+      "duration": 11996
     },
     {
       "spec": "cypress/integration/rendering/xyChart.spec.js",
-      "duration": 20651
+      "duration": 20627
     },
     {
       "spec": "cypress/integration/rendering/zenuml.spec.js",
-      "duration": 3218
+      "duration": 3472
     }
   ]
 }

docs/community/contributing.md

@@ -29,8 +29,7 @@ In GitHub, you first [**fork a mermaid repository**](https://github.com/mermaid-
 
 Then you **clone** a copy to your local development machine (e.g. where you code) to make a copy with all the files to work with.
 
-> **💡 Tip**
-> [Here is a GitHub document that gives an overview of the process](https://docs.github.com/en/get-started/quickstart/fork-a-repo).
+> **💡 Tip** > [Here is a GitHub document that gives an overview of the process](https://docs.github.com/en/get-started/quickstart/fork-a-repo).
 
 ```bash
 git clone git@github.com/your-fork/mermaid

docs/community/intro.md

@@ -33,8 +33,7 @@ mindmap
 
 ## Join the Development
 
-> **💡 Tip**
-> **Check out our** [**detailed contribution guide**](./contributing.md).
+> **💡 Tip** > **Check out our** [**detailed contribution guide**](./contributing.md).
 
 Where to start:
 
@@ -48,8 +47,7 @@ Where to start:
 
 ## A Question Or a Suggestion?
 
-> **💡 Tip**
-> **Have a look at** [**how to open an issue**](./questions-and-suggestions.md).
+> **💡 Tip** > **Have a look at** [**how to open an issue**](./questions-and-suggestions.md).
 
 If you have faced a vulnerability [report it to us](./security.md).
 

docs/config/directives.md

@@ -22,6 +22,7 @@ While directives allow you to change most of the default configuration settings,
 Mermaid basically supports two types of configuration options to be overridden by directives.
 
 1. _General/Top Level configurations_ : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are:
+
    - theme
    - fontFamily
    - logLevel

docs/config/setup/defaultConfig/variables/configKeys.md

@@ -12,4 +12,4 @@
 
 > `const` **configKeys**: `Set`<`string`>
 
-Defined in: [packages/mermaid/src/defaultConfig.ts:290](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L290)
+Defined in: [packages/mermaid/src/defaultConfig.ts:292](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L292)

docs/config/setup/mermaid/README.md

@@ -10,6 +10,10 @@
 
 # mermaid
 
+## Classes
+
+- [UnknownDiagramError](classes/UnknownDiagramError.md)
+
 ## Interfaces
 
 - [DetailedError](interfaces/DetailedError.md)
@@ -23,7 +27,6 @@
 - [RenderOptions](interfaces/RenderOptions.md)
 - [RenderResult](interfaces/RenderResult.md)
 - [RunOptions](interfaces/RunOptions.md)
-- [UnknownDiagramError](interfaces/UnknownDiagramError.md)
 
 ## Type Aliases
 

docs/config/setup/mermaid/classes/UnknownDiagramError.md

@@ -0,0 +1,159 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/mermaid/classes/UnknownDiagramError.md](../../../../../packages/mermaid/src/docs/config/setup/mermaid/classes/UnknownDiagramError.md).
+
+[**mermaid**](../../README.md)
+
+---
+
+# Class: UnknownDiagramError
+
+Defined in: [packages/mermaid/src/errors.ts:1](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/errors.ts#L1)
+
+## Extends
+
+- `Error`
+
+## Constructors
+
+### new UnknownDiagramError()
+
+> **new UnknownDiagramError**(`message`): [`UnknownDiagramError`](UnknownDiagramError.md)
+
+Defined in: [packages/mermaid/src/errors.ts:2](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/errors.ts#L2)
+
+#### Parameters
+
+##### message
+
+`string`
+
+#### Returns
+
+[`UnknownDiagramError`](UnknownDiagramError.md)
+
+#### Overrides
+
+`Error.constructor`
+
+## Properties
+
+### cause?
+
+> `optional` **cause**: `unknown`
+
+Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+`Error.cause`
+
+---
+
+### message
+
+> **message**: `string`
+
+Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+`Error.message`
+
+---
+
+### name
+
+> **name**: `string`
+
+Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+`Error.name`
+
+---
+
+### stack?
+
+> `optional` **stack**: `string`
+
+Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+`Error.stack`
+
+---
+
+### prepareStackTrace()?
+
+> `static` `optional` **prepareStackTrace**: (`err`, `stackTraces`) => `any`
+
+Defined in: node_modules/.pnpm/@types+node\@22.13.5/node_modules/@types/node/globals.d.ts:143
+
+Optional override for formatting stack traces
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`\[]
+
+#### Returns
+
+`any`
+
+#### See
+
+<https://v8.dev/docs/stack-trace-api#customizing-stack-traces>
+
+#### Inherited from
+
+`Error.prepareStackTrace`
+
+---
+
+### stackTraceLimit
+
+> `static` **stackTraceLimit**: `number`
+
+Defined in: node_modules/.pnpm/@types+node\@22.13.5/node_modules/@types/node/globals.d.ts:145
+
+#### Inherited from
+
+`Error.stackTraceLimit`
+
+## Methods
+
+### captureStackTrace()
+
+> `static` **captureStackTrace**(`targetObject`, `constructorOpt`?): `void`
+
+Defined in: node_modules/.pnpm/@types+node\@22.13.5/node_modules/@types/node/globals.d.ts:136
+
+Create .stack property on a target object
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+`Error.captureStackTrace`

docs/config/setup/mermaid/interfaces/LayoutData.md

@@ -10,7 +10,7 @@
 
 # Interface: LayoutData
 
-Defined in: [packages/mermaid/src/rendering-util/types.ts:170](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L170)
+Defined in: [packages/mermaid/src/rendering-util/types.ts:145](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L145)
 
 ## Indexable
 
@@ -22,7 +22,7 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:170](https://github.co
 
 > **config**: [`MermaidConfig`](MermaidConfig.md)
 
-Defined in: [packages/mermaid/src/rendering-util/types.ts:173](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L173)
+Defined in: [packages/mermaid/src/rendering-util/types.ts:148](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L148)
 
 ---
 
@@ -30,7 +30,7 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:173](https://github.co
 
 > **edges**: `Edge`\[]
 
-Defined in: [packages/mermaid/src/rendering-util/types.ts:172](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L172)
+Defined in: [packages/mermaid/src/rendering-util/types.ts:147](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L147)
 
 ---
 
@@ -38,4 +38,4 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:172](https://github.co
 
 > **nodes**: `Node`\[]
 
-Defined in: [packages/mermaid/src/rendering-util/types.ts:171](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L171)
+Defined in: [packages/mermaid/src/rendering-util/types.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L146)

docs/config/setup/mermaid/interfaces/Mermaid.md

@@ -32,7 +32,7 @@ page.
 
 ### detectType()
 
-> **detectType**: (`text`, `config?`) => `string`
+> **detectType**: (`text`, `config`?) => `string`
 
 Defined in: [packages/mermaid/src/mermaid.ts:449](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L449)
 
@@ -105,7 +105,7 @@ An array of objects with the id of the diagram.
 
 ### ~~init()~~
 
-> **init**: (`config?`, `nodes?`, `callback?`) => `Promise`<`void`>
+> **init**: (`config`?, `nodes`?, `callback`?) => `Promise`<`void`>
 
 Defined in: [packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L442)
 
@@ -117,7 +117,7 @@ Defined in: [packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/
 
 [`MermaidConfig`](MermaidConfig.md)
 
-**Deprecated**, please set configuration in [initialize](#initialize).
+**Deprecated**, please set configuration in [initialize](Mermaid.md#initialize).
 
 ##### nodes?
 
@@ -141,13 +141,13 @@ Called once for each rendered diagram's id.
 
 #### Deprecated
 
-Use [initialize](#initialize) and [run](#run) instead.
+Use [initialize](Mermaid.md#initialize) and [run](Mermaid.md#run) instead.
 
 Renders the mermaid diagrams
 
 #### Deprecated
 
-Use [initialize](#initialize) and [run](#run) instead.
+Use [initialize](Mermaid.md#initialize) and [run](Mermaid.md#run) instead.
 
 ---
 
@@ -176,7 +176,7 @@ Configuration object for mermaid.
 
 ### ~~mermaidAPI~~
 
-> **mermaidAPI**: `Readonly`<{ `defaultConfig`: [`MermaidConfig`](MermaidConfig.md); `getConfig`: () => [`MermaidConfig`](MermaidConfig.md); `getDiagramFromText`: (`text`, `metadata`) => `Promise`<`Diagram`>; `getSiteConfig`: () => [`MermaidConfig`](MermaidConfig.md); `globalReset`: () => `void`; `initialize`: (`userOptions`) => `void`; `parse`: {(`text`, `parseOptions`): `Promise`<`false` | [`ParseResult`](ParseResult.md)>; (`text`, `parseOptions?`): `Promise`<[`ParseResult`](ParseResult.md)>; }; `render`: (`id`, `text`, `svgContainingElement?`) => `Promise`<[`RenderResult`](RenderResult.md)>; `reset`: () => `void`; `setConfig`: (`conf`) => [`MermaidConfig`](MermaidConfig.md); `updateSiteConfig`: (`conf`) => [`MermaidConfig`](MermaidConfig.md); }>
+> **mermaidAPI**: `Readonly`<{ `defaultConfig`: [`MermaidConfig`](MermaidConfig.md); `getConfig`: () => [`MermaidConfig`](MermaidConfig.md); `getDiagramFromText`: (`text`, `metadata`) => `Promise`<`Diagram`>; `getSiteConfig`: () => [`MermaidConfig`](MermaidConfig.md); `globalReset`: () => `void`; `initialize`: (`userOptions`) => `void`; `parse`: (`text`, `parseOptions`) => `Promise`<`false` | [`ParseResult`](ParseResult.md)>(`text`, `parseOptions`?) => `Promise`<[`ParseResult`](ParseResult.md)>; `render`: (`id`, `text`, `svgContainingElement`?) => `Promise`<[`RenderResult`](RenderResult.md)>; `reset`: () => `void`; `setConfig`: (`conf`) => [`MermaidConfig`](MermaidConfig.md); `updateSiteConfig`: (`conf`) => [`MermaidConfig`](MermaidConfig.md); }>
 
 Defined in: [packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L436)
 
@@ -184,81 +184,73 @@ Defined in: [packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/
 
 #### Deprecated
 
-Use [parse](#parse) and [render](#render) instead. Please [open a discussion](https://github.com/mermaid-js/mermaid/discussions) if your use case does not fit the new API.
+Use [parse](Mermaid.md#parse) and [render](Mermaid.md#render) instead. Please [open a discussion](https://github.com/mermaid-js/mermaid/discussions) if your use case does not fit the new API.
 
 ---
 
 ### parse()
 
-> **parse**: {(`text`, `parseOptions`): `Promise`<`false` | [`ParseResult`](ParseResult.md)>; (`text`, `parseOptions?`): `Promise`<[`ParseResult`](ParseResult.md)>; }
+> **parse**: (`text`, `parseOptions`) => `Promise`<`false` | [`ParseResult`](ParseResult.md)>(`text`, `parseOptions`?) => `Promise`<[`ParseResult`](ParseResult.md)>
 
 Defined in: [packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437)
 
-#### Call Signature
-
-> (`text`, `parseOptions`): `Promise`<`false` | [`ParseResult`](ParseResult.md)>
-
 Parse the text and validate the syntax.
 
-##### Parameters
+#### Parameters
 
-###### text
+##### text
 
 `string`
 
 The mermaid diagram definition.
 
-###### parseOptions
+##### parseOptions
 
 [`ParseOptions`](ParseOptions.md) & `object`
 
 Options for parsing.
 
-##### Returns
+#### Returns
 
 `Promise`<`false` | [`ParseResult`](ParseResult.md)>
 
 An object with the `diagramType` set to type of the diagram if valid. Otherwise `false` if parseOptions.suppressErrors is `true`.
 
-##### See
+#### See
 
 [ParseOptions](ParseOptions.md)
 
-##### Throws
+#### Throws
 
 Error if the diagram is invalid and parseOptions.suppressErrors is false or not set.
 
-#### Call Signature
-
-> (`text`, `parseOptions?`): `Promise`<[`ParseResult`](ParseResult.md)>
-
 Parse the text and validate the syntax.
 
-##### Parameters
+#### Parameters
 
-###### text
+##### text
 
 `string`
 
 The mermaid diagram definition.
 
-###### parseOptions?
+##### parseOptions?
 
 [`ParseOptions`](ParseOptions.md)
 
 Options for parsing.
 
-##### Returns
+#### Returns
 
 `Promise`<[`ParseResult`](ParseResult.md)>
 
 An object with the `diagramType` set to type of the diagram if valid. Otherwise `false` if parseOptions.suppressErrors is `true`.
 
-##### See
+#### See
 
 [ParseOptions](ParseOptions.md)
 
-##### Throws
+#### Throws
 
 Error if the diagram is invalid and parseOptions.suppressErrors is false or not set.
 
@@ -340,7 +332,7 @@ Defined in: [packages/mermaid/src/mermaid.ts:444](https://github.com/mermaid-js/
 
 ### render()
 
-> **render**: (`id`, `text`, `svgContainingElement?`) => `Promise`<[`RenderResult`](RenderResult.md)>
+> **render**: (`id`, `text`, `svgContainingElement`?) => `Promise`<[`RenderResult`](RenderResult.md)>
 
 Defined in: [packages/mermaid/src/mermaid.ts:438](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L438)
 

docs/config/setup/mermaid/interfaces/MermaidConfig.md

@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/config.type.ts:58](https://github.com/mermaid-
 
 > `optional` **altFontFamily**: `string`
 
-Defined in: [packages/mermaid/src/config.type.ts:122](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L122)
+Defined in: [packages/mermaid/src/config.type.ts:132](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L132)
 
 ---
 
@@ -26,7 +26,7 @@ Defined in: [packages/mermaid/src/config.type.ts:122](https://github.com/mermaid
 
 > `optional` **architecture**: `ArchitectureDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:194](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L194)
+Defined in: [packages/mermaid/src/config.type.ts:204](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L204)
 
 ---
 
@@ -34,7 +34,7 @@ Defined in: [packages/mermaid/src/config.type.ts:194](https://github.com/mermaid
 
 > `optional` **arrowMarkerAbsolute**: `boolean`
 
-Defined in: [packages/mermaid/src/config.type.ts:141](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L141)
+Defined in: [packages/mermaid/src/config.type.ts:151](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L151)
 
 Controls whether or arrow markers in html code are absolute paths or anchors.
 This matters if you are using base tag settings.
@@ -45,7 +45,7 @@ This matters if you are using base tag settings.
 
 > `optional` **block**: `BlockDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:201](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L201)
+Defined in: [packages/mermaid/src/config.type.ts:211](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L211)
 
 ---
 
@@ -53,7 +53,7 @@ Defined in: [packages/mermaid/src/config.type.ts:201](https://github.com/mermaid
 
 > `optional` **c4**: `C4DiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:198](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L198)
+Defined in: [packages/mermaid/src/config.type.ts:208](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L208)
 
 ---
 
@@ -61,7 +61,7 @@ Defined in: [packages/mermaid/src/config.type.ts:198](https://github.com/mermaid
 
 > `optional` **class**: `ClassDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:187](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L187)
+Defined in: [packages/mermaid/src/config.type.ts:197](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L197)
 
 ---
 
@@ -69,7 +69,7 @@ Defined in: [packages/mermaid/src/config.type.ts:187](https://github.com/mermaid
 
 > `optional` **darkMode**: `boolean`
 
-Defined in: [packages/mermaid/src/config.type.ts:113](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L113)
+Defined in: [packages/mermaid/src/config.type.ts:123](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L123)
 
 ---
 
@@ -77,7 +77,7 @@ Defined in: [packages/mermaid/src/config.type.ts:113](https://github.com/mermaid
 
 > `optional` **deterministicIds**: `boolean`
 
-Defined in: [packages/mermaid/src/config.type.ts:174](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L174)
+Defined in: [packages/mermaid/src/config.type.ts:184](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L184)
 
 This option controls if the generated ids of nodes in the SVG are
 generated randomly or based on a seed.
@@ -93,7 +93,7 @@ should not change unless content is changed.
 
 > `optional` **deterministicIDSeed**: `string`
 
-Defined in: [packages/mermaid/src/config.type.ts:181](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L181)
+Defined in: [packages/mermaid/src/config.type.ts:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L191)
 
 This option is the optional seed for deterministic ids.
 If set to `undefined` but deterministicIds is `true`, a simple number iterator is used.
@@ -105,7 +105,7 @@ You can set this attribute to base the seed on a static string.
 
 > `optional` **dompurifyConfig**: `Config`
 
-Defined in: [packages/mermaid/src/config.type.ts:203](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L203)
+Defined in: [packages/mermaid/src/config.type.ts:213](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L213)
 
 ---
 
@@ -115,12 +115,24 @@ Defined in: [packages/mermaid/src/config.type.ts:203](https://github.com/mermaid
 
 Defined in: [packages/mermaid/src/config.type.ts:91](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L91)
 
+#### considerModelOrder?
+
+> `optional` **considerModelOrder**: `"NONE"` | `"NODES_AND_EDGES"` | `"PREFER_EDGES"` | `"PREFER_NODES"`
+
+Preserves the order of nodes and edges in the model file if this does not lead to additional edge crossings. Depending on the strategy this is not always possible since the node and edge order might be conflicting.
+
 #### cycleBreakingStrategy?
 
 > `optional` **cycleBreakingStrategy**: `"GREEDY"` | `"DEPTH_FIRST"` | `"INTERACTIVE"` | `"MODEL_ORDER"` | `"GREEDY_MODEL_ORDER"`
 
 This strategy decides how to find cycles in the graph and deciding which edges need adjustment to break loops.
 
+#### forceNodeModelOrder?
+
+> `optional` **forceNodeModelOrder**: `boolean`
+
+The node order given by the model does not change to produce a better layout. E.g. if node A is before node B in the model this is not changed during crossing minimization. This assumes that the node model order is already respected before crossing minimization. This can be achieved by setting considerModelOrder.strategy to NODES_AND_EDGES.
+
 #### mergeEdges?
 
 > `optional` **mergeEdges**: `boolean`
@@ -139,7 +151,7 @@ Elk specific option affecting how nodes are placed.
 
 > `optional` **er**: `ErDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:189](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L189)
+Defined in: [packages/mermaid/src/config.type.ts:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L199)
 
 ---
 
@@ -147,7 +159,7 @@ Defined in: [packages/mermaid/src/config.type.ts:189](https://github.com/mermaid
 
 > `optional` **flowchart**: `FlowchartDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:182](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L182)
+Defined in: [packages/mermaid/src/config.type.ts:192](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L192)
 
 ---
 
@@ -155,7 +167,7 @@ Defined in: [packages/mermaid/src/config.type.ts:182](https://github.com/mermaid
 
 > `optional` **fontFamily**: `string`
 
-Defined in: [packages/mermaid/src/config.type.ts:121](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L121)
+Defined in: [packages/mermaid/src/config.type.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L131)
 
 Specifies the font to be used in the rendered diagrams.
 Can be any possible CSS `font-family`.
@@ -167,7 +179,7 @@ See <https://developer.mozilla.org/en-US/docs/Web/CSS/font-family>
 
 > `optional` **fontSize**: `number`
 
-Defined in: [packages/mermaid/src/config.type.ts:205](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L205)
+Defined in: [packages/mermaid/src/config.type.ts:215](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L215)
 
 ---
 
@@ -175,7 +187,7 @@ Defined in: [packages/mermaid/src/config.type.ts:205](https://github.com/mermaid
 
 > `optional` **forceLegacyMathML**: `boolean`
 
-Defined in: [packages/mermaid/src/config.type.ts:163](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L163)
+Defined in: [packages/mermaid/src/config.type.ts:173](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L173)
 
 This option forces Mermaid to rely on KaTeX's own stylesheet for rendering MathML. Due to differences between OS
 fonts and browser's MathML implementation, this option is recommended if consistent rendering is important.
@@ -187,7 +199,7 @@ If set to true, ignores legacyMathML.
 
 > `optional` **gantt**: `GanttDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:184](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L184)
+Defined in: [packages/mermaid/src/config.type.ts:194](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L194)
 
 ---
 
@@ -195,7 +207,7 @@ Defined in: [packages/mermaid/src/config.type.ts:184](https://github.com/mermaid
 
 > `optional` **gitGraph**: `GitGraphDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:197](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L197)
+Defined in: [packages/mermaid/src/config.type.ts:207](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L207)
 
 ---
 
@@ -213,7 +225,7 @@ Defines the seed to be used when using handDrawn look. This is important for the
 
 > `optional` **htmlLabels**: `boolean`
 
-Defined in: [packages/mermaid/src/config.type.ts:114](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L114)
+Defined in: [packages/mermaid/src/config.type.ts:124](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L124)
 
 ---
 
@@ -221,7 +233,7 @@ Defined in: [packages/mermaid/src/config.type.ts:114](https://github.com/mermaid
 
 > `optional` **journey**: `JourneyDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:185](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L185)
+Defined in: [packages/mermaid/src/config.type.ts:195](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L195)
 
 ---
 
@@ -229,7 +241,7 @@ Defined in: [packages/mermaid/src/config.type.ts:185](https://github.com/mermaid
 
 > `optional` **kanban**: `KanbanDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:196](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L196)
+Defined in: [packages/mermaid/src/config.type.ts:206](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L206)
 
 ---
 
@@ -247,7 +259,7 @@ Defines which layout algorithm to use for rendering the diagram.
 
 > `optional` **legacyMathML**: `boolean`
 
-Defined in: [packages/mermaid/src/config.type.ts:156](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L156)
+Defined in: [packages/mermaid/src/config.type.ts:166](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L166)
 
 This option specifies if Mermaid can expect the dependent to include KaTeX stylesheets for browsers
 without their own MathML implementation. If this option is disabled and MathML is not supported, the math
@@ -260,7 +272,7 @@ fall back to legacy rendering for KaTeX.
 
 > `optional` **logLevel**: `0` | `2` | `1` | `"trace"` | `"debug"` | `"info"` | `"warn"` | `"error"` | `"fatal"` | `3` | `4` | `5`
 
-Defined in: [packages/mermaid/src/config.type.ts:127](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L127)
+Defined in: [packages/mermaid/src/config.type.ts:137](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L137)
 
 This option decides the amount of logging to be used by mermaid.
 
@@ -280,7 +292,7 @@ Defines which main look to use for the diagram.
 
 > `optional` **markdownAutoWrap**: `boolean`
 
-Defined in: [packages/mermaid/src/config.type.ts:206](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L206)
+Defined in: [packages/mermaid/src/config.type.ts:216](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L216)
 
 ---
 
@@ -308,7 +320,7 @@ The maximum allowed size of the users text diagram
 
 > `optional` **mindmap**: `MindmapDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:195](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L195)
+Defined in: [packages/mermaid/src/config.type.ts:205](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L205)
 
 ---
 
@@ -316,7 +328,7 @@ Defined in: [packages/mermaid/src/config.type.ts:195](https://github.com/mermaid
 
 > `optional` **packet**: `PacketDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:200](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L200)
+Defined in: [packages/mermaid/src/config.type.ts:210](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L210)
 
 ---
 
@@ -324,7 +336,7 @@ Defined in: [packages/mermaid/src/config.type.ts:200](https://github.com/mermaid
 
 > `optional` **pie**: `PieDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:190](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L190)
+Defined in: [packages/mermaid/src/config.type.ts:200](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L200)
 
 ---
 
@@ -332,7 +344,7 @@ Defined in: [packages/mermaid/src/config.type.ts:190](https://github.com/mermaid
 
 > `optional` **quadrantChart**: `QuadrantChartConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L191)
+Defined in: [packages/mermaid/src/config.type.ts:201](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L201)
 
 ---
 
@@ -340,7 +352,7 @@ Defined in: [packages/mermaid/src/config.type.ts:191](https://github.com/mermaid
 
 > `optional` **radar**: `RadarDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:202](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L202)
+Defined in: [packages/mermaid/src/config.type.ts:212](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L212)
 
 ---
 
@@ -348,7 +360,7 @@ Defined in: [packages/mermaid/src/config.type.ts:202](https://github.com/mermaid
 
 > `optional` **requirement**: `RequirementDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L193)
+Defined in: [packages/mermaid/src/config.type.ts:203](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L203)
 
 ---
 
@@ -356,7 +368,7 @@ Defined in: [packages/mermaid/src/config.type.ts:193](https://github.com/mermaid
 
 > `optional` **sankey**: `SankeyDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L199)
+Defined in: [packages/mermaid/src/config.type.ts:209](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L209)
 
 ---
 
@@ -364,7 +376,7 @@ Defined in: [packages/mermaid/src/config.type.ts:199](https://github.com/mermaid
 
 > `optional` **secure**: `string`\[]
 
-Defined in: [packages/mermaid/src/config.type.ts:148](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L148)
+Defined in: [packages/mermaid/src/config.type.ts:158](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L158)
 
 This option controls which `currentConfig` keys are considered secure and
 can only be changed via call to `mermaid.initialize`.
@@ -376,7 +388,7 @@ This prevents malicious graph directives from overriding a site's default securi
 
 > `optional` **securityLevel**: `"strict"` | `"loose"` | `"antiscript"` | `"sandbox"`
 
-Defined in: [packages/mermaid/src/config.type.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L131)
+Defined in: [packages/mermaid/src/config.type.ts:141](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L141)
 
 Level of trust for parsed diagram
 
@@ -386,7 +398,7 @@ Level of trust for parsed diagram
 
 > `optional` **sequence**: `SequenceDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:183](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L183)
+Defined in: [packages/mermaid/src/config.type.ts:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L193)
 
 ---
 
@@ -394,7 +406,7 @@ Defined in: [packages/mermaid/src/config.type.ts:183](https://github.com/mermaid
 
 > `optional` **startOnLoad**: `boolean`
 
-Defined in: [packages/mermaid/src/config.type.ts:135](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L135)
+Defined in: [packages/mermaid/src/config.type.ts:145](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L145)
 
 Dictates whether mermaid starts on Page load
 
@@ -404,7 +416,7 @@ Dictates whether mermaid starts on Page load
 
 > `optional` **state**: `StateDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L188)
+Defined in: [packages/mermaid/src/config.type.ts:198](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L198)
 
 ---
 
@@ -412,7 +424,7 @@ Defined in: [packages/mermaid/src/config.type.ts:188](https://github.com/mermaid
 
 > `optional` **suppressErrorRendering**: `boolean`
 
-Defined in: [packages/mermaid/src/config.type.ts:212](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L212)
+Defined in: [packages/mermaid/src/config.type.ts:222](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L222)
 
 Suppresses inserting 'Syntax error' diagram in the DOM.
 This is useful when you want to control how to handle syntax errors in your application.
@@ -450,7 +462,7 @@ Defined in: [packages/mermaid/src/config.type.ts:65](https://github.com/mermaid-
 
 > `optional` **timeline**: `TimelineDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:186](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L186)
+Defined in: [packages/mermaid/src/config.type.ts:196](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L196)
 
 ---
 
@@ -458,7 +470,7 @@ Defined in: [packages/mermaid/src/config.type.ts:186](https://github.com/mermaid
 
 > `optional` **wrap**: `boolean`
 
-Defined in: [packages/mermaid/src/config.type.ts:204](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L204)
+Defined in: [packages/mermaid/src/config.type.ts:214](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L214)
 
 ---
 
@@ -466,4 +478,4 @@ Defined in: [packages/mermaid/src/config.type.ts:204](https://github.com/mermaid
 
 > `optional` **xyChart**: `XYChartConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:192](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L192)
+Defined in: [packages/mermaid/src/config.type.ts:202](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L202)

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

@@ -10,7 +10,7 @@
 
 # Interface: ParseOptions
 
-Defined in: [packages/mermaid/src/types.ts:76](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L76)
+Defined in: [packages/mermaid/src/types.ts:72](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L72)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:76](https://github.com/mermaid-js/mer
 
 > `optional` **suppressErrors**: `boolean`
 
-Defined in: [packages/mermaid/src/types.ts:81](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L81)
+Defined in: [packages/mermaid/src/types.ts:77](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L77)
 
 If `true`, parse will return `false` instead of throwing error when the diagram is invalid.
 The `parseError` function will not be called.

docs/config/setup/mermaid/interfaces/ParseResult.md

@@ -10,7 +10,7 @@
 
 # Interface: ParseResult
 
-Defined in: [packages/mermaid/src/types.ts:84](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L84)
+Defined in: [packages/mermaid/src/types.ts:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L80)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:84](https://github.com/mermaid-js/mer
 
 > **config**: [`MermaidConfig`](MermaidConfig.md)
 
-Defined in: [packages/mermaid/src/types.ts:92](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L92)
+Defined in: [packages/mermaid/src/types.ts:88](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L88)
 
 The config passed as YAML frontmatter or directives
 
@@ -28,6 +28,6 @@ The config passed as YAML frontmatter or directives
 
 > **diagramType**: `string`
 
-Defined in: [packages/mermaid/src/types.ts:88](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L88)
+Defined in: [packages/mermaid/src/types.ts:84](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L84)
 
 The diagram type, e.g. 'flowchart', 'sequence', etc.

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

@@ -10,7 +10,7 @@
 
 # Interface: RenderResult
 
-Defined in: [packages/mermaid/src/types.ts:102](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L102)
+Defined in: [packages/mermaid/src/types.ts:98](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L98)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:102](https://github.com/mermaid-js/me
 
 > `optional` **bindFunctions**: (`element`) => `void`
 
-Defined in: [packages/mermaid/src/types.ts:120](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L120)
+Defined in: [packages/mermaid/src/types.ts:116](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L116)
 
 Bind function to be called after the svg has been inserted into the DOM.
 This is necessary for adding event listeners to the elements in the svg.
@@ -45,7 +45,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.
 
 > **diagramType**: `string`
 
-Defined in: [packages/mermaid/src/types.ts:110](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L110)
+Defined in: [packages/mermaid/src/types.ts:106](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L106)
 
 The diagram type, e.g. 'flowchart', 'sequence', etc.
 
@@ -55,6 +55,6 @@ The diagram type, e.g. 'flowchart', 'sequence', etc.
 
 > **svg**: `string`
 
-Defined in: [packages/mermaid/src/types.ts:106](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L106)
+Defined in: [packages/mermaid/src/types.ts:102](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L102)
 
 The svg code for the rendered graph.

docs/config/setup/mermaid/interfaces/UnknownDiagramError.md

@@ -1,65 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/mermaid/interfaces/UnknownDiagramError.md](../../../../../packages/mermaid/src/docs/config/setup/mermaid/interfaces/UnknownDiagramError.md).
-
-[**mermaid**](../../README.md)
-
----
-
-# Interface: UnknownDiagramError
-
-Defined in: [packages/mermaid/src/errors.ts:1](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/errors.ts#L1)
-
-## Extends
-
-- `Error`
-
-## Properties
-
-### cause?
-
-> `optional` **cause**: `unknown`
-
-Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es2022.error.d.ts:26
-
-#### Inherited from
-
-`Error.cause`
-
----
-
-### message
-
-> **message**: `string`
-
-Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es5.d.ts:1077
-
-#### Inherited from
-
-`Error.message`
-
----
-
-### name
-
-> **name**: `string`
-
-Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es5.d.ts:1076
-
-#### Inherited from
-
-`Error.name`
-
----
-
-### stack?
-
-> `optional` **stack**: `string`
-
-Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es5.d.ts:1078
-
-#### Inherited from
-
-`Error.stack`

docs/config/setup/mermaid/type-aliases/InternalHelpers.md

@@ -10,6 +10,6 @@
 
 # Type Alias: InternalHelpers
 
-> **InternalHelpers** = _typeof_ `internalHelpers`
+> **InternalHelpers**: _typeof_ `internalHelpers`
 
 Defined in: [packages/mermaid/src/internals.ts:33](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/internals.ts#L33)

docs/config/setup/mermaid/type-aliases/ParseErrorFunction.md

@@ -10,7 +10,7 @@
 
 # Type Alias: ParseErrorFunction()
 
-> **ParseErrorFunction** = (`err`, `hash?`) => `void`
+> **ParseErrorFunction**: (`err`, `hash`?) => `void`
 
 Defined in: [packages/mermaid/src/Diagram.ts:10](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/Diagram.ts#L10)
 

docs/config/setup/mermaid/type-aliases/SVG.md

@@ -10,6 +10,6 @@
 
 # Type Alias: SVG
 
-> **SVG** = `d3.Selection`<`SVGSVGElement`, `unknown`, `Element` | `null`, `unknown`>
+> **SVG**: `d3.Selection`<`SVGSVGElement`, `unknown`, `Element` | `null`, `unknown`>
 
 Defined in: [packages/mermaid/src/diagram-api/types.ts:126](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L126)

docs/config/setup/mermaid/type-aliases/SVGGroup.md

@@ -10,6 +10,6 @@
 
 # Type Alias: SVGGroup
 
-> **SVGGroup** = `d3.Selection`<`SVGGElement`, `unknown`, `Element` | `null`, `unknown`>
+> **SVGGroup**: `d3.Selection`<`SVGGElement`, `unknown`, `Element` | `null`, `unknown`>
 
 Defined in: [packages/mermaid/src/diagram-api/types.ts:128](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L128)

docs/config/tidy-tree.md

@@ -1,63 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/tidy-tree.md](../../packages/mermaid/src/docs/config/tidy-tree.md).
-
-# Tidy-tree Layout Instructions
-
-Instructions to use the Tidy-tree layout algorithm.
-
-## Getting Started
-
-### Installation
-
-```bash
-npm install non-layered-tidy-tree-layout
-# or
-yarn add non-layered-tidy-tree-layout
-
-```
-
-There's also a built version: `dist/non-layered-tidy-tree-layout.js` for use with browser `<script>` tag, or as a Javascript module.
-
-## Tidy tree Layouts
-
-Mermaid also supports a Tidy Tree layout for mindmaps.
-
-```
----
-config:
-  layout: tidy-tree
----
-mindmap
-root((mindmap is a long thing))
-  A
-  B
-  C
-  D
-```
-
-### With bundlers
-
-```sh
-npm install @mermaid-js/layout-tidy-tree
-```
-
-```ts
-import mermaid from 'mermaid';
-import tidyTreeLayouts from '@mermaid-js/layout-tidy-tree';
-
-mermaid.registerLayoutLoaders(tidyTreeLayouts);
-```
-
-### With CDN
-
-```html
-<script type="module">
-  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
-  import tidyTreeLayouts from 'https://cdn.jsdelivr.net/npm/@mermaid-js/layout-tidy-tree@0/dist/mermaid-layout-tidy-tree.esm.min.mjs';
-
-  mermaid.registerLayoutLoaders(tidyTreeLayouts);
-</script>
-```

docs/ecosystem/integrations-community.md

@@ -117,7 +117,7 @@ Content Management Systems/Enterprise Content Management
 - [Grav CMS](https://getgrav.org/)
   - [Mermaid Diagrams Plugin](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams)
   - [GitLab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
-- [Tiki](https://tiki.org)
+- [Tiki Wiki CMS Groupware](https://tiki.org)
   - [Tracker Entity Relationship Diagram](https://doc.tiki.org/Tracker-Entity-Relationship-Diagram)
 - [VitePress](https://vitepress.vuejs.org/)
   - [Plugin for Mermaid.js](https://emersonbottero.github.io/vitepress-plugin-mermaid/)

docs/ecosystem/mermaid-chart.md

@@ -29,6 +29,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun
 - **Plugins** - A plugin system for extending the functionality of Mermaid.
 
   Official Mermaid Chart plugins:
+
   - [Mermaid Chart GPT](https://chatgpt.com/g/g-684cc36f30208191b21383b88650a45d-mermaid-chart-diagrams-and-charts)
   - [Confluence](https://marketplace.atlassian.com/apps/1234056/mermaid-chart-for-confluence?hosting=cloud&tab=overview)
   - [Jira](https://marketplace.atlassian.com/apps/1234810/mermaid-chart-for-jira?tab=overview&hosting=cloud)

docs/news/announcements.md

@@ -35,11 +35,13 @@ The Mermaid Chart team is excited to introduce a new Visual Editor for Flowchart
 Learn more:
 
 - Visual Editor For Flowcharts
+
   - [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-releases-new-visual-editor-for-flowcharts)
 
   - [Demo video](https://www.youtube.com/watch?v=5aja0gijoO0)
 
 - Visual Editor For Sequence diagrams
+
   - [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-unveils-visual-editor-for-sequence-diagrams)
 
   - [Demo video](https://youtu.be/imc2u5_N6Dc)

docs/syntax/c4.md

@@ -139,6 +139,7 @@ The following unfinished features are not supported in the short term.
 - [ ] Legend
 
 - [x] System Context
+
   - [x] Person(alias, label, ?descr, ?sprite, ?tags, $link)
   - [x] Person_Ext
   - [x] System(alias, label, ?descr, ?sprite, ?tags, $link)
@@ -152,6 +153,7 @@ The following unfinished features are not supported in the short term.
   - [x] System_Boundary
 
 - [x] Container diagram
+
   - [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
   - [x] ContainerDb
   - [x] ContainerQueue
@@ -161,6 +163,7 @@ The following unfinished features are not supported in the short term.
   - [x] Container_Boundary(alias, label, ?tags, $link)
 
 - [x] Component diagram
+
   - [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
   - [x] ComponentDb
   - [x] ComponentQueue
@@ -169,15 +172,18 @@ The following unfinished features are not supported in the short term.
   - [x] ComponentQueue_Ext
 
 - [x] Dynamic diagram
+
   - [x] RelIndex(index, from, to, label, ?tags, $link)
 
 - [x] Deployment diagram
+
   - [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
   - [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node()
   - [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()
   - [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()
 
 - [x] Relationship Types
+
   - [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
   - [x] BiRel (bidirectional relationship)
   - [x] Rel_U, Rel_Up

docs/syntax/flowchart.md

@@ -324,56 +324,53 @@ This syntax creates a node A as a rectangle. It renders in the same way as `A["A
 
 Below is a comprehensive list of the newly introduced shapes and their corresponding semantic meanings, short names, and aliases:
 
-| **Semantic Name**                 | **Shape Name**         | **Short Name**    | **Description**                | **Alias Supported**                                              |
-| --------------------------------- | ---------------------- | ----------------- | ------------------------------ | ---------------------------------------------------------------- |
-| Bang                              | Bang                   | `bang`            | Bang                           | `bang`                                                           |
-| Card                              | Notched Rectangle      | `notch-rect`      | Represents a card              | `card`, `notched-rectangle`                                      |
-| Cloud                             | Cloud                  | `cloud`           | cloud                          | `cloud`                                                          |
-| Collate                           | Hourglass              | `hourglass`       | Represents a collate operation | `collate`, `hourglass`                                           |
-| Com Link                          | Lightning Bolt         | `bolt`            | Communication link             | `com-link`, `lightning-bolt`                                     |
-| Comment                           | Curly Brace            | `brace`           | Adds a comment                 | `brace-l`, `comment`                                             |
-| Comment Right                     | Curly Brace            | `brace-r`         | Adds a comment                 |                                                                  |
-| Comment with braces on both sides | Curly Braces           | `braces`          | Adds a comment                 |                                                                  |
-| Data Input/Output                 | Lean Right             | `lean-r`          | Represents input or output     | `in-out`, `lean-right`                                           |
-| Data Input/Output                 | Lean Left              | `lean-l`          | Represents output or input     | `lean-left`, `out-in`                                            |
-| Database                          | Cylinder               | `cyl`             | Database storage               | `cylinder`, `database`, `db`                                     |
-| Decision                          | Diamond                | `diam`            | Decision-making step           | `decision`, `diamond`, `question`                                |
-| Default Mindmap Node              | defaultMindmapNode     | `default-mindmap` | defaultMindmapNode             | `default-mindmap`, `defaultMindmapNode`                          |
-| Delay                             | Half-Rounded Rectangle | `delay`           | Represents a delay             | `half-rounded-rectangle`                                         |
-| Direct Access Storage             | Horizontal Cylinder    | `h-cyl`           | Direct access storage          | `das`, `horizontal-cylinder`                                     |
-| Disk Storage                      | Lined Cylinder         | `lin-cyl`         | Disk storage                   | `disk`, `lined-cylinder`                                         |
-| Display                           | Curved Trapezoid       | `curv-trap`       | Represents a display           | `curved-trapezoid`, `display`                                    |
-| Divided Process                   | Divided Rectangle      | `div-rect`        | Divided process shape          | `div-proc`, `divided-process`, `divided-rectangle`               |
-| Document                          | Document               | `doc`             | Represents a document          | `doc`, `document`                                                |
-| Event                             | Rounded Rectangle      | `rounded`         | Represents an event            | `event`                                                          |
-| Extract                           | Triangle               | `tri`             | Extraction process             | `extract`, `triangle`                                            |
-| Fork/Join                         | Filled Rectangle       | `fork`            | Fork or join in process flow   | `join`                                                           |
-| Internal Storage                  | Window Pane            | `win-pane`        | Internal storage               | `internal-storage`, `window-pane`                                |
-| Junction                          | Filled Circle          | `f-circ`          | Junction point                 | `filled-circle`, `junction`                                      |
-| Lined Document                    | Lined Document         | `lin-doc`         | Lined document                 | `lined-document`                                                 |
-| Lined/Shaded Process              | Lined Rectangle        | `lin-rect`        | Lined process shape            | `lin-proc`, `lined-process`, `lined-rectangle`, `shaded-process` |
-| Loop Limit                        | Trapezoidal Pentagon   | `notch-pent`      | Loop limit step                | `loop-limit`, `notched-pentagon`                                 |
-| Manual File                       | Flipped Triangle       | `flip-tri`        | Manual file operation          | `flipped-triangle`, `manual-file`                                |
-| Manual Input                      | Sloped Rectangle       | `sl-rect`         | Manual input step              | `manual-input`, `sloped-rectangle`                               |
-| Manual Operation                  | Trapezoid Base Top     | `trap-t`          | Represents a manual task       | `inv-trapezoid`, `manual`, `trapezoid-top`                       |
-| Multi-Document                    | Stacked Document       | `docs`            | Multiple documents             | `documents`, `st-doc`, `stacked-document`                        |
-| Multi-Process                     | Stacked Rectangle      | `st-rect`         | Multiple processes             | `processes`, `procs`, `stacked-rectangle`                        |
-| Odd                               | Odd                    | `odd`             | Odd shape                      |                                                                  |
-| Paper Tape                        | Flag                   | `flag`            | Paper tape                     | `paper-tape`                                                     |
-| Prepare Conditional               | Hexagon                | `hex`             | Preparation or condition step  | `hexagon`, `prepare`                                             |
-| Priority Action                   | Trapezoid Base Bottom  | `trap-b`          | Priority action                | `priority`, `trapezoid`, `trapezoid-bottom`                      |
-| Process                           | Rectangle              | `rect`            | Standard process shape         | `proc`, `process`, `rectangle`                                   |
-| Start                             | Circle                 | `circle`          | Starting point                 | `circ`                                                           |
-| Start                             | Small Circle           | `sm-circ`         | Small starting point           | `small-circle`, `start`                                          |
-| Stop                              | Double Circle          | `dbl-circ`        | Represents a stop point        | `double-circle`                                                  |
-| Stop                              | Framed Circle          | `fr-circ`         | Stop point                     | `framed-circle`, `stop`                                          |
-| Stored Data                       | Bow Tie Rectangle      | `bow-rect`        | Stored data                    | `bow-tie-rectangle`, `stored-data`                               |
-| Subprocess                        | Framed Rectangle       | `fr-rect`         | Subprocess                     | `framed-rectangle`, `subproc`, `subprocess`, `subroutine`        |
-| Summary                           | Crossed Circle         | `cross-circ`      | Summary                        | `crossed-circle`, `summary`                                      |
-| Tagged Document                   | Tagged Document        | `tag-doc`         | Tagged document                | `tag-doc`, `tagged-document`                                     |
-| Tagged Process                    | Tagged Rectangle       | `tag-rect`        | Tagged process                 | `tag-proc`, `tagged-process`, `tagged-rectangle`                 |
-| Terminal Point                    | Stadium                | `stadium`         | Terminal point                 | `pill`, `terminal`                                               |
-| Text Block                        | Text Block             | `text`            | Text block                     |                                                                  |
+| **Semantic Name**                 | **Shape Name**         | **Short Name** | **Description**                | **Alias Supported**                                              |
+| --------------------------------- | ---------------------- | -------------- | ------------------------------ | ---------------------------------------------------------------- |
+| Card                              | Notched Rectangle      | `notch-rect`   | Represents a card              | `card`, `notched-rectangle`                                      |
+| Collate                           | Hourglass              | `hourglass`    | Represents a collate operation | `collate`, `hourglass`                                           |
+| Com Link                          | Lightning Bolt         | `bolt`         | Communication link             | `com-link`, `lightning-bolt`                                     |
+| Comment                           | Curly Brace            | `brace`        | Adds a comment                 | `brace-l`, `comment`                                             |
+| Comment Right                     | Curly Brace            | `brace-r`      | Adds a comment                 |                                                                  |
+| Comment with braces on both sides | Curly Braces           | `braces`       | Adds a comment                 |                                                                  |
+| Data Input/Output                 | Lean Right             | `lean-r`       | Represents input or output     | `in-out`, `lean-right`                                           |
+| Data Input/Output                 | Lean Left              | `lean-l`       | Represents output or input     | `lean-left`, `out-in`                                            |
+| Database                          | Cylinder               | `cyl`          | Database storage               | `cylinder`, `database`, `db`                                     |
+| Decision                          | Diamond                | `diam`         | Decision-making step           | `decision`, `diamond`, `question`                                |
+| Delay                             | Half-Rounded Rectangle | `delay`        | Represents a delay             | `half-rounded-rectangle`                                         |
+| Direct Access Storage             | Horizontal Cylinder    | `h-cyl`        | Direct access storage          | `das`, `horizontal-cylinder`                                     |
+| Disk Storage                      | Lined Cylinder         | `lin-cyl`      | Disk storage                   | `disk`, `lined-cylinder`                                         |
+| Display                           | Curved Trapezoid       | `curv-trap`    | Represents a display           | `curved-trapezoid`, `display`                                    |
+| Divided Process                   | Divided Rectangle      | `div-rect`     | Divided process shape          | `div-proc`, `divided-process`, `divided-rectangle`               |
+| Document                          | Document               | `doc`          | Represents a document          | `doc`, `document`                                                |
+| Event                             | Rounded Rectangle      | `rounded`      | Represents an event            | `event`                                                          |
+| Extract                           | Triangle               | `tri`          | Extraction process             | `extract`, `triangle`                                            |
+| Fork/Join                         | Filled Rectangle       | `fork`         | Fork or join in process flow   | `join`                                                           |
+| Internal Storage                  | Window Pane            | `win-pane`     | Internal storage               | `internal-storage`, `window-pane`                                |
+| Junction                          | Filled Circle          | `f-circ`       | Junction point                 | `filled-circle`, `junction`                                      |
+| Lined Document                    | Lined Document         | `lin-doc`      | Lined document                 | `lined-document`                                                 |
+| Lined/Shaded Process              | Lined Rectangle        | `lin-rect`     | Lined process shape            | `lin-proc`, `lined-process`, `lined-rectangle`, `shaded-process` |
+| Loop Limit                        | Trapezoidal Pentagon   | `notch-pent`   | Loop limit step                | `loop-limit`, `notched-pentagon`                                 |
+| Manual File                       | Flipped Triangle       | `flip-tri`     | Manual file operation          | `flipped-triangle`, `manual-file`                                |
+| Manual Input                      | Sloped Rectangle       | `sl-rect`      | Manual input step              | `manual-input`, `sloped-rectangle`                               |
+| Manual Operation                  | Trapezoid Base Top     | `trap-t`       | Represents a manual task       | `inv-trapezoid`, `manual`, `trapezoid-top`                       |
+| Multi-Document                    | Stacked Document       | `docs`         | Multiple documents             | `documents`, `st-doc`, `stacked-document`                        |
+| Multi-Process                     | Stacked Rectangle      | `st-rect`      | Multiple processes             | `processes`, `procs`, `stacked-rectangle`                        |
+| Odd                               | Odd                    | `odd`          | Odd shape                      |                                                                  |
+| Paper Tape                        | Flag                   | `flag`         | Paper tape                     | `paper-tape`                                                     |
+| Prepare Conditional               | Hexagon                | `hex`          | Preparation or condition step  | `hexagon`, `prepare`                                             |
+| Priority Action                   | Trapezoid Base Bottom  | `trap-b`       | Priority action                | `priority`, `trapezoid`, `trapezoid-bottom`                      |
+| Process                           | Rectangle              | `rect`         | Standard process shape         | `proc`, `process`, `rectangle`                                   |
+| Start                             | Circle                 | `circle`       | Starting point                 | `circ`                                                           |
+| Start                             | Small Circle           | `sm-circ`      | Small starting point           | `small-circle`, `start`                                          |
+| Stop                              | Double Circle          | `dbl-circ`     | Represents a stop point        | `double-circle`                                                  |
+| Stop                              | Framed Circle          | `fr-circ`      | Stop point                     | `framed-circle`, `stop`                                          |
+| Stored Data                       | Bow Tie Rectangle      | `bow-rect`     | Stored data                    | `bow-tie-rectangle`, `stored-data`                               |
+| Subprocess                        | Framed Rectangle       | `fr-rect`      | Subprocess                     | `framed-rectangle`, `subproc`, `subprocess`, `subroutine`        |
+| Summary                           | Crossed Circle         | `cross-circ`   | Summary                        | `crossed-circle`, `summary`                                      |
+| Tagged Document                   | Tagged Document        | `tag-doc`      | Tagged document                | `tag-doc`, `tagged-document`                                     |
+| Tagged Process                    | Tagged Rectangle       | `tag-rect`     | Tagged process                 | `tag-proc`, `tagged-process`, `tagged-rectangle`                 |
+| Terminal Point                    | Stadium                | `stadium`      | Terminal point                 | `pill`, `terminal`                                               |
+| Text Block                        | Text Block             | `text`         | Text block                     |                                                                  |
 
 ### Example Flowchart with New Shapes
 

docs/syntax/gantt.md

@@ -360,8 +360,7 @@ gantt
   weekday monday
 ```
 
-> **Warning**
-> `millisecond` and `second` support was added in v10.3.0
+> **Warning** > `millisecond` and `second` support was added in v10.3.0
 
 ## Output in compact mode
 

docs/syntax/mindmap.md

@@ -314,22 +314,3 @@ You can also refer the [implementation in the live editor](https://github.com/me
 cspell:locale en,en-gb
 cspell:ignore Buzan
 --->
-
-## Layouts
-
-Mermaid also supports a Tidy Tree layout for mindmaps.
-
-```
----
-config:
-  layout: tidy-tree
----
-mindmap
-root((mindmap is a long thing))
-  A
-  B
-  C
-  D
-```
-
-Instructions to add and register tidy-tree layout are present in [Tidy Tree Configuration](/config/tidy-tree)

eslint.config.js

@@ -17,7 +17,6 @@ export default tseslint.config(
   ...tseslint.configs.stylisticTypeChecked,
   {
     ignores: [
-      '**/*.d.ts',
       '**/dist/',
       '**/node_modules/',
       '.git/',

instructions.md

@@ -1 +0,0 @@
-The instructions for Tidy-Tree layout can be found in [Tidy Tree Configuration](/config/tidy-tree)

packages/mermaid-layout-elk/README.md

@@ -2,7 +2,7 @@
 
 This package provides a layout engine for Mermaid based on the [ELK](https://www.eclipse.org/elk/) layout engine.
 
-> [!NOTE]
+> [!NOTE]  
 > The ELK Layout engine will not be available in all providers that support mermaid by default.
 > The websites will have to install the `@mermaid-js/layout-elk` package to use the ELK layout engine.
 
@@ -69,4 +69,4 @@ mermaid.registerLayoutLoaders(elkLayouts);
 - `elk.mrtree`: Multi-root tree layout
 - `elk.sporeOverlap`: Spore overlap layout
 
-<!-- TODO: Add images for these layouts, as GitHub doesn't support natively. -->
+<!-- TODO: Add images for these layouts, as GitHub doesn't support natively -->

packages/mermaid-layout-elk/src/find-common-ancestor.d.ts

@@ -1,9 +0,0 @@
-export interface TreeData {
-  parentById: Record<string, string>;
-  childrenById: Record<string, string[]>;
-}
-export declare const findCommonAncestor: (
-  id1: string,
-  id2: string,
-  { parentById }: TreeData
-) => string;

packages/mermaid-layout-elk/src/render.ts

@@ -4,8 +4,7 @@ import type { InternalHelpers, LayoutData, RenderOptions, SVG, SVGGroup } from '
 import { type TreeData, findCommonAncestor } from './find-common-ancestor.js';
 
 type Node = LayoutData['nodes'][number];
-// Used to calculate distances in order to avoid floating number rounding issues when comparing floating numbers
-const epsilon = 0.0001;
+
 interface LabelData {
   width: number;
   height: number;
@@ -14,20 +13,11 @@ interface LabelData {
 }
 
 interface NodeWithVertex extends Omit<Node, 'domId'> {
-  children?: LayoutData['nodes'];
+  children?: unknown[];
   labelData?: LabelData;
   domId?: Node['domId'] | SVGGroup | d3.Selection<SVGAElement, unknown, Element | null, unknown>;
 }
-interface Point {
-  x: number;
-  y: number;
-}
-function distance(p1?: Point, p2?: Point): number {
-  if (!p1 || !p2) {
-    return 0;
-  }
-  return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
-}
+
 export const render = async (
   data4Layout: LayoutData,
   svg: SVG,
@@ -61,30 +51,15 @@ export const render = async (
 
     // Add the element to the DOM
     if (!node.isGroup) {
-      // Create a clean node object for ELK with only the properties it expects
       const child: NodeWithVertex = {
-        id: node.id,
-        width: node.width,
-        height: node.height,
-        // Store the original node data for later use
-        label: node.label,
-        isGroup: node.isGroup,
-        shape: node.shape,
-        padding: node.padding,
-        cssClasses: node.cssClasses,
-        cssStyles: node.cssStyles,
-        look: node.look,
-        // Include parentId for subgraph processing
-        parentId: node.parentId,
+        ...node,
       };
       graph.children.push(child);
       nodeDb[node.id] = child;
 
       const childNodeEl = await insertNode(nodeEl, node, { config, dir: node.dir });
       const boundingBox = childNodeEl.node()!.getBBox();
-      // Store the domId separately for rendering, not in the ELK graph
       child.domId = childNodeEl;
-      child.calcIntersect = node.calcIntersect;
       child.width = boundingBox.width;
       child.height = boundingBox.height;
     } else {
@@ -484,6 +459,302 @@ export const render = async (
     }
   }
 
+  function intersectLine(
+    p1: { y: number; x: number },
+    p2: { y: number; x: number },
+    q1: { x: any; y: any },
+    q2: { x: any; y: any }
+  ) {
+    log.debug('UIO intersectLine', p1, p2, q1, q2);
+    // Algorithm from J. Avro, (ed.) Graphics Gems, No 2, Morgan Kaufmann, 1994,
+    // p7 and p473.
+
+    // let a1, a2, b1, b2, c1, c2;
+    // let r1, r2, r3, r4;
+    // let denom, offset, num;
+    // let x, y;
+
+    // Compute a1, b1, c1, where line joining points 1 and 2 is F(x,y) = a1 x +
+    // b1 y + c1 = 0.
+    const a1 = p2.y - p1.y;
+    const b1 = p1.x - p2.x;
+    const c1 = p2.x * p1.y - p1.x * p2.y;
+
+    // Compute r3 and r4.
+    const r3 = a1 * q1.x + b1 * q1.y + c1;
+    const r4 = a1 * q2.x + b1 * q2.y + c1;
+
+    const epsilon = 1e-6;
+
+    // Check signs of r3 and r4. If both point 3 and point 4 lie on
+    // same side of line 1, the line segments do not intersect.
+    if (r3 !== 0 && r4 !== 0 && sameSign(r3, r4)) {
+      return /*DON'T_INTERSECT*/;
+    }
+
+    // Compute a2, b2, c2 where line joining points 3 and 4 is G(x,y) = a2 x + b2 y + c2 = 0
+    const a2 = q2.y - q1.y;
+    const b2 = q1.x - q2.x;
+    const c2 = q2.x * q1.y - q1.x * q2.y;
+
+    // Compute r1 and r2
+    const r1 = a2 * p1.x + b2 * p1.y + c2;
+    const r2 = a2 * p2.x + b2 * p2.y + c2;
+
+    // Check signs of r1 and r2. If both point 1 and point 2 lie
+    // on same side of second line segment, the line segments do
+    // not intersect.
+    if (Math.abs(r1) < epsilon && Math.abs(r2) < epsilon && sameSign(r1, r2)) {
+      return /*DON'T_INTERSECT*/;
+    }
+
+    // Line segments intersect: compute intersection point.
+    const denom = a1 * b2 - a2 * b1;
+    if (denom === 0) {
+      return /*COLLINEAR*/;
+    }
+
+    const offset = Math.abs(denom / 2);
+
+    // The denom/2 is to get rounding instead of truncating. It
+    // is added or subtracted to the numerator, depending upon the
+    // sign of the numerator.
+    let num = b1 * c2 - b2 * c1;
+    const x = num < 0 ? (num - offset) / denom : (num + offset) / denom;
+
+    num = a2 * c1 - a1 * c2;
+    const y = num < 0 ? (num - offset) / denom : (num + offset) / denom;
+
+    return { x: x, y: y };
+  }
+
+  function sameSign(r1: number, r2: number) {
+    return r1 * r2 > 0;
+  }
+  const diamondIntersection = (
+    bounds: { x: any; y: any; width: any; height: any },
+    outsidePoint: { x: number; y: number },
+    insidePoint: any
+  ) => {
+    const x1 = bounds.x;
+    const y1 = bounds.y;
+
+    const w = bounds.width; //+ bounds.padding;
+    const h = bounds.height; // + bounds.padding;
+
+    const polyPoints = [
+      { x: x1, y: y1 - h / 2 },
+      { x: x1 + w / 2, y: y1 },
+      { x: x1, y: y1 + h / 2 },
+      { x: x1 - w / 2, y: y1 },
+    ];
+    log.debug(
+      `APA16 diamondIntersection calc abc89:
+  outsidePoint: ${JSON.stringify(outsidePoint)}
+  insidePoint : ${JSON.stringify(insidePoint)}
+  node-bounds       : x:${bounds.x} y:${bounds.y} w:${bounds.width} h:${bounds.height}`,
+      JSON.stringify(polyPoints)
+    );
+
+    const intersections = [];
+
+    let minX = Number.POSITIVE_INFINITY;
+    let minY = Number.POSITIVE_INFINITY;
+
+    polyPoints.forEach(function (entry) {
+      minX = Math.min(minX, entry.x);
+      minY = Math.min(minY, entry.y);
+    });
+
+    const left = x1 - w / 2 - minX;
+    const top = y1 - h / 2 - minY;
+
+    for (let i = 0; i < polyPoints.length; i++) {
+      const p1 = polyPoints[i];
+      const p2 = polyPoints[i < polyPoints.length - 1 ? i + 1 : 0];
+      const intersect = intersectLine(
+        bounds,
+        outsidePoint,
+        { x: left + p1.x, y: top + p1.y },
+        { x: left + p2.x, y: top + p2.y }
+      );
+
+      if (intersect) {
+        intersections.push(intersect);
+      }
+    }
+
+    if (!intersections.length) {
+      return bounds;
+    }
+
+    log.debug('UIO intersections', intersections);
+
+    if (intersections.length > 1) {
+      // More intersections, find the one nearest to edge end point
+      intersections.sort(function (p, q) {
+        const pdx = p.x - outsidePoint.x;
+        const pdy = p.y - outsidePoint.y;
+        const distp = Math.sqrt(pdx * pdx + pdy * pdy);
+
+        const qdx = q.x - outsidePoint.x;
+        const qdy = q.y - outsidePoint.y;
+        const distq = Math.sqrt(qdx * qdx + qdy * qdy);
+
+        return distp < distq ? -1 : distp === distq ? 0 : 1;
+      });
+    }
+
+    return intersections[0];
+  };
+
+  const intersection = (
+    node: { x: any; y: any; width: number; height: number },
+    outsidePoint: { x: number; y: number },
+    insidePoint: { x: number; y: number }
+  ) => {
+    log.debug(`intersection calc abc89:
+  outsidePoint: ${JSON.stringify(outsidePoint)}
+  insidePoint : ${JSON.stringify(insidePoint)}
+  node        : x:${node.x} y:${node.y} w:${node.width} h:${node.height}`);
+    const x = node.x;
+    const y = node.y;
+
+    const dx = Math.abs(x - insidePoint.x);
+    // const dy = Math.abs(y - insidePoint.y);
+    const w = node.width / 2;
+    let r = insidePoint.x < outsidePoint.x ? w - dx : w + dx;
+    const h = node.height / 2;
+
+    const Q = Math.abs(outsidePoint.y - insidePoint.y);
+    const R = Math.abs(outsidePoint.x - insidePoint.x);
+
+    if (Math.abs(y - outsidePoint.y) * w > Math.abs(x - outsidePoint.x) * h) {
+      // Intersection is top or bottom of rect.
+      const q = insidePoint.y < outsidePoint.y ? outsidePoint.y - h - y : y - h - outsidePoint.y;
+      r = (R * q) / Q;
+      const res = {
+        x: insidePoint.x < outsidePoint.x ? insidePoint.x + r : insidePoint.x - R + r,
+        y: insidePoint.y < outsidePoint.y ? insidePoint.y + Q - q : insidePoint.y - Q + q,
+      };
+
+      if (r === 0) {
+        res.x = outsidePoint.x;
+        res.y = outsidePoint.y;
+      }
+      if (R === 0) {
+        res.x = outsidePoint.x;
+      }
+      if (Q === 0) {
+        res.y = outsidePoint.y;
+      }
+
+      log.debug(`abc89 topp/bott calc, Q ${Q}, q ${q}, R ${R}, r ${r}`, res); // cspell: disable-line
+
+      return res;
+    } else {
+      // Intersection on sides of rect
+      if (insidePoint.x < outsidePoint.x) {
+        r = outsidePoint.x - w - x;
+      } else {
+        // r = outsidePoint.x - w - x;
+        r = x - w - outsidePoint.x;
+      }
+      const q = (Q * r) / R;
+      //  OK let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : insidePoint.x + dx - w;
+      // OK let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : outsidePoint.x + r;
+      let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : insidePoint.x - R + r;
+      // let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : outsidePoint.x + r;
+      let _y = insidePoint.y < outsidePoint.y ? insidePoint.y + q : insidePoint.y - q;
+      log.debug(`sides calc abc89, Q ${Q}, q ${q}, R ${R}, r ${r}`, { _x, _y });
+      if (r === 0) {
+        _x = outsidePoint.x;
+        _y = outsidePoint.y;
+      }
+      if (R === 0) {
+        _x = outsidePoint.x;
+      }
+      if (Q === 0) {
+        _y = outsidePoint.y;
+      }
+
+      return { x: _x, y: _y };
+    }
+  };
+  const outsideNode = (
+    node: { x: any; y: any; width: number; height: number },
+    point: { x: number; y: number }
+  ) => {
+    const x = node.x;
+    const y = node.y;
+    const dx = Math.abs(point.x - x);
+    const dy = Math.abs(point.y - y);
+    const w = node.width / 2;
+    const h = node.height / 2;
+    if (dx >= w || dy >= h) {
+      return true;
+    }
+    return false;
+  };
+  /**
+   * This function will page a path and node where the last point(s) in the path is inside the node
+   * and return an update path ending by the border of the node.
+   */
+  const cutPathAtIntersect = (
+    _points: any[],
+    bounds: { x: any; y: any; width: any; height: any; padding: any },
+    isDiamond: boolean
+  ) => {
+    log.debug('APA18 cutPathAtIntersect Points:', _points, 'node:', bounds, 'isDiamond', isDiamond);
+    const points: any[] = [];
+    let lastPointOutside = _points[0];
+    let isInside = false;
+    _points.forEach((point: any) => {
+      // check if point is inside the boundary rect
+      if (!outsideNode(bounds, point) && !isInside) {
+        // First point inside the rect found
+        // Calc the intersection coord between the point and the last point outside the rect
+        let inter;
+
+        if (isDiamond) {
+          const inter2 = diamondIntersection(bounds, lastPointOutside, point);
+          const distance = Math.sqrt(
+            (lastPointOutside.x - inter2.x) ** 2 + (lastPointOutside.y - inter2.y) ** 2
+          );
+          if (distance > 1) {
+            inter = inter2;
+          }
+        }
+        if (!inter) {
+          inter = intersection(bounds, lastPointOutside, point);
+        }
+
+        // Check case where the intersection is the same as the last point
+        let pointPresent = false;
+        points.forEach((p) => {
+          pointPresent = pointPresent || (p.x === inter.x && p.y === inter.y);
+        });
+        // if (!pointPresent) {
+        if (!points.some((e) => e.x === inter.x && e.y === inter.y)) {
+          points.push(inter);
+        } else {
+          log.debug('abc88 no intersect', inter, points);
+        }
+        // points.push(inter);
+        isInside = true;
+      } else {
+        // Outside
+        log.debug('abc88 outside', point, lastPointOutside, points);
+        lastPointOutside = point;
+        // points.push(point);
+        if (!isInside) {
+          points.push(point);
+        }
+      }
+    });
+    return points;
+  };
+
   // @ts-ignore - ELK is not typed
   const elk = new ELK();
   const element = svg.select('g');
@@ -495,7 +766,10 @@ export const render = async (
     id: 'root',
     layoutOptions: {
       'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
-      'elk.layered.crossingMinimization.forceNodeModelOrder': true,
+      'elk.layered.crossingMinimization.forceNodeModelOrder':
+        data4Layout.config.elk?.forceNodeModelOrder,
+      'elk.layered.considerModelOrder.strategy': data4Layout.config.elk?.considerModelOrder,
+
       'elk.algorithm': algorithm,
       'nodePlacement.strategy': data4Layout.config.elk?.nodePlacementStrategy,
       'elk.layered.mergeEdges': data4Layout.config.elk?.mergeEdges,
@@ -595,16 +869,11 @@ export const render = async (
       delete node.height;
     }
   });
-  log.debug('APA01 processing edges, count:', elkGraph.edges.length);
-  elkGraph.edges.forEach((edge: any, index: number) => {
-    log.debug('APA01 processing edge', index, ':', edge);
+  elkGraph.edges.forEach((edge: any) => {
     const source = edge.sources[0];
     const target = edge.targets[0];
-    log.debug('APA01 source:', source, 'target:', target);
-    log.debug('APA01 nodeDb[source]:', nodeDb[source]);
-    log.debug('APA01 nodeDb[target]:', nodeDb[target]);
 
-    if (nodeDb[source] && nodeDb[target] && nodeDb[source].parentId !== nodeDb[target].parentId) {
+    if (nodeDb[source].parentId !== nodeDb[target].parentId) {
       const ancestorId = findCommonAncestor(source, target, parentLookupDb);
       // an edge that breaks a subgraph has been identified, set configuration accordingly
       setIncludeChildrenPolicy(source, ancestorId);
@@ -612,37 +881,7 @@ export const render = async (
     }
   });
 
-  log.debug('APA01 before');
-  log.debug('APA01 elkGraph structure:', JSON.stringify(elkGraph, null, 2));
-  log.debug('APA01 elkGraph.children length:', elkGraph.children?.length);
-  log.debug('APA01 elkGraph.edges length:', elkGraph.edges?.length);
-
-  // Validate that all edge references exist as nodes
-  elkGraph.edges?.forEach((edge: any, index: number) => {
-    log.debug(`APA01 validating edge ${index}:`, edge);
-    if (edge.sources) {
-      edge.sources.forEach((sourceId: any) => {
-        const sourceExists = elkGraph.children?.some((child: any) => child.id === sourceId);
-        log.debug(`APA01 source ${sourceId} exists:`, sourceExists);
-      });
-    }
-    if (edge.targets) {
-      edge.targets.forEach((targetId: any) => {
-        const targetExists = elkGraph.children?.some((child: any) => child.id === targetId);
-        log.debug(`APA01 target ${targetId} exists:`, targetExists);
-      });
-    }
-  });
-
-  let g;
-  try {
-    g = await elk.layout(elkGraph);
-    log.debug('APA01 after - success');
-    log.debug('APA01 layout result:', JSON.stringify(g, null, 2));
-  } catch (error) {
-    log.error('APA01 ELK layout error:', error);
-    throw error;
-  }
+  const g = await elk.layout(elkGraph);
 
   // debugger;
   await drawNodes(0, 0, g.children, svg, subGraphsEl, 0);
@@ -730,38 +969,43 @@ export const render = async (
             startNode.innerHTML
           );
         }
-
-        if (startNode.calcIntersect) {
-          const intersection = startNode.calcIntersect(
-            {
-              x: startNode.offset.posX + startNode.width / 2,
-              y: startNode.offset.posY + startNode.height / 2,
-              width: startNode.width,
-              height: startNode.height,
-            },
-            edge.points[0]
-          );
-
-          if (distance(intersection, edge.points[0]) > epsilon) {
-            edge.points.unshift(intersection);
-          }
+        if (startNode.shape === 'diamond' || startNode.shape === 'diam') {
+          edge.points.unshift({
+            x: startNode.offset.posX + startNode.width / 2,
+            y: startNode.offset.posY + startNode.height / 2,
+          });
         }
-        if (endNode.calcIntersect) {
-          const intersection = endNode.calcIntersect(
-            {
-              x: endNode.offset.posX + endNode.width / 2,
-              y: endNode.offset.posY + endNode.height / 2,
-              width: endNode.width,
-              height: endNode.height,
-            },
-            edge.points[edge.points.length - 1]
-          );
-
-          if (distance(intersection, edge.points[edge.points.length - 1]) > epsilon) {
-            edge.points.push(intersection);
-          }
+        if (endNode.shape === 'diamond' || endNode.shape === 'diam') {
+          edge.points.push({
+            x: endNode.offset.posX + endNode.width / 2,
+            y: endNode.offset.posY + endNode.height / 2,
+          });
         }
 
+        edge.points = cutPathAtIntersect(
+          edge.points.reverse(),
+          {
+            x: startNode.offset.posX + startNode.width / 2,
+            y: startNode.offset.posY + startNode.height / 2,
+            width: sw,
+            height: startNode.height,
+            padding: startNode.padding,
+          },
+          startNode.shape === 'diamond' || startNode.shape === 'diam'
+        ).reverse();
+
+        edge.points = cutPathAtIntersect(
+          edge.points,
+          {
+            x: endNode.offset.posX + endNode.width / 2,
+            y: endNode.offset.posY + endNode.height / 2,
+            width: ew,
+            height: endNode.height,
+            padding: endNode.padding,
+          },
+          endNode.shape === 'diamond' || endNode.shape === 'diam'
+        );
+
         const paths = insertEdge(
           edgesEl,
           edge,
@@ -771,6 +1015,7 @@ export const render = async (
           endNode,
           data4Layout.diagramId
         );
+        log.info('APA12 edge points after insert', JSON.stringify(edge.points));
 
         edge.x = edge.labels[0].x + offset.x + edge.labels[0].width / 2;
         edge.y = edge.labels[0].y + offset.y + edge.labels[0].height / 2;

packages/mermaid-layout-elk/tsconfig.json

@@ -5,6 +5,6 @@
     "outDir": "./dist",
     "types": ["vitest/importMeta", "vitest/globals"]
   },
-  "include": ["./src/**/*.ts", "./src/**/*.d.ts"],
+  "include": ["./src/**/*.ts"],
   "typeRoots": ["./src/types"]
 }

packages/mermaid-layout-tidy-tree/README.md

@@ -1,59 +0,0 @@
-# @mermaid-js/layout-tidy-tree
-
-This package provides a bidirectional tidy tree layout engine for Mermaid based on the non-layered-tidy-tree-layout algorithm.
-
-> [!NOTE]
-> The Tidy Tree Layout engine will not be available in all providers that support mermaid by default.
-> The websites will have to install the @mermaid-js/layout-tidy-tree package to use the Tidy Tree layout engine.
-
-## Usage
-
-```
----
-config:
-  layout: tidy-tree
----
-mindmap
-root((mindmap))
-  A
-  B
-```
-
-### With bundlers
-
-```sh
-npm install @mermaid-js/layout-tidy-tree
-```
-
-```ts
-import mermaid from 'mermaid';
-import tidyTreeLayouts from '@mermaid-js/layout-tidy-tree';
-
-mermaid.registerLayoutLoaders(tidyTreeLayouts);
-```
-
-### With CDN
-
-```html
-<script type="module">
-  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
-  import tidyTreeLayouts from 'https://cdn.jsdelivr.net/npm/@mermaid-js/layout-tidy-tree@0/dist/mermaid-layout-tidy-tree.esm.min.mjs';
-
-  mermaid.registerLayoutLoaders(tidyTreeLayouts);
-</script>
-```
-
-## Tidy Tree Layout Overview
-
-tidy-tree: The bidirectional tidy tree layout
-
-The bidirectional tidy tree layout algorithm creates two separate trees that grow horizontally in opposite directions from a central root node:
-Left tree: grows horizontally to the left (children alternate: 1st, 3rd, 5th...)
-Right tree: grows horizontally to the right (children alternate: 2nd, 4th, 6th...)
-
-This creates a balanced, symmetric layout that is ideal for mindmaps, organizational charts, and other tree-based diagrams.
-
-Layout Structure:
-[Child 3] ← [Child 1] ← [Root] → [Child 2] → [Child 4]
-↓ ↓ ↓ ↓
-[GrandChild] [GrandChild] [GrandChild] [GrandChild]

packages/mermaid-layout-tidy-tree/package.json

@@ -1,46 +0,0 @@
-{
-  "name": "@mermaid-js/layout-tidy-tree",
-  "version": "0.1.0",
-  "description": "Tidy-tree layout engine for mermaid",
-  "module": "dist/mermaid-layout-tidy-tree.core.mjs",
-  "types": "dist/layouts.d.ts",
-  "type": "module",
-  "exports": {
-    ".": {
-      "import": "./dist/mermaid-layout-tidy-tree.core.mjs",
-      "types": "./dist/layouts.d.ts"
-    },
-    "./": "./"
-  },
-  "keywords": [
-    "diagram",
-    "markdown",
-    "tidy-tree",
-    "mermaid",
-    "layout"
-  ],
-  "scripts": {},
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/mermaid-js/mermaid"
-  },
-  "contributors": [
-    "Knut Sveidqvist",
-    "Sidharth Vinod"
-  ],
-  "license": "MIT",
-  "dependencies": {
-    "d3": "^7.9.0",
-    "non-layered-tidy-tree-layout": "^2.0.2"
-  },
-  "devDependencies": {
-    "@types/d3": "^7.4.3",
-    "mermaid": "workspace:^"
-  },
-  "peerDependencies": {
-    "mermaid": "^11.0.2"
-  },
-  "files": [
-    "dist"
-  ]
-}

packages/mermaid-layout-tidy-tree/src/index.ts

@@ -1,50 +0,0 @@
-/**
- * Bidirectional Tidy-Tree Layout Algorithm for Generic Diagrams
- *
- * This module provides a layout algorithm implementation using the
- * non-layered-tidy-tree-layout algorithm for positioning nodes and edges
- * in tree structures with a bidirectional approach.
- *
- * The algorithm creates two separate trees that grow horizontally in opposite
- * directions from a central root node:
- * - Left tree: grows horizontally to the left (children alternate: 1st, 3rd, 5th...)
- * - Right tree: grows horizontally to the right (children alternate: 2nd, 4th, 6th...)
- *
- * This creates a balanced, symmetric layout that is ideal for mindmaps,
- * organizational charts, and other tree-based diagrams.
- *
- * The algorithm follows the unified rendering pattern and can be used
- * by any diagram type that provides compatible LayoutData.
- */
-
-/**
- * Render function for the bidirectional tidy-tree layout algorithm
- *
- * This function follows the unified rendering pattern used by all layout algorithms.
- * It takes LayoutData, inserts nodes into DOM, runs the bidirectional tidy-tree layout algorithm,
- * and renders the positioned elements to the SVG.
- *
- * Features:
- * - Alternates root children between left and right trees
- * - Left tree grows horizontally to the left (rotated 90° counterclockwise)
- * - Right tree grows horizontally to the right (rotated 90° clockwise)
- * - Uses tidy-tree algorithm for optimal spacing within each tree
- * - Creates symmetric, balanced layouts
- * - Maintains proper edge connections between all nodes
- *
- * Layout Structure:
- * ```
- * [Child 3] ← [Child 1] ← [Root] → [Child 2] → [Child 4]
- *     ↓           ↓                     ↓           ↓
- * [GrandChild]  [GrandChild]      [GrandChild]  [GrandChild]
- * ```
- *
- * @param layoutData - Layout data containing nodes, edges, and configuration
- * @param svg - SVG element to render to
- * @param helpers - Internal helper functions for rendering
- * @param options - Rendering options
- */
-export { default } from './layouts.js';
-export * from './types.js';
-export * from './layout.js';
-export { render } from './render.js';

packages/mermaid-layout-tidy-tree/src/layout.test.ts

@@ -1,410 +0,0 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-
-// Mock non-layered-tidy-tree-layout
-vi.mock('non-layered-tidy-tree-layout', () => ({
-  BoundingBox: vi.fn().mockImplementation(() => ({})),
-  Layout: vi.fn().mockImplementation(() => ({
-    layout: vi.fn().mockImplementation((treeData) => {
-      const result = { ...treeData };
-
-      if (result.id?.toString().startsWith('virtual-root')) {
-        result.x = 0;
-        result.y = 0;
-      } else {
-        result.x = 100;
-        result.y = 50;
-      }
-
-      if (result.children) {
-        result.children.forEach((child: any, index: number) => {
-          child.x = 50 + index * 100;
-          child.y = 100;
-
-          if (child.children) {
-            child.children.forEach((grandchild: any, gIndex: number) => {
-              grandchild.x = 25 + gIndex * 50;
-              grandchild.y = 200;
-            });
-          }
-        });
-      }
-
-      return {
-        result,
-        boundingBox: {
-          left: 0,
-          right: 200,
-          top: 0,
-          bottom: 250,
-        },
-      };
-    }),
-  })),
-}));
-
-import { executeTidyTreeLayout, validateLayoutData } from './layout.js';
-import type { LayoutResult } from './types.js';
-import type { LayoutData, MermaidConfig } from 'mermaid';
-
-describe('Tidy-Tree Layout Algorithm', () => {
-  let mockConfig: MermaidConfig;
-  let mockLayoutData: LayoutData;
-
-  beforeEach(() => {
-    mockConfig = {
-      theme: 'default',
-    } as MermaidConfig;
-
-    mockLayoutData = {
-      nodes: [
-        {
-          id: 'root',
-          label: 'Root',
-          isGroup: false,
-          shape: 'rect',
-          width: 100,
-          height: 50,
-          padding: 10,
-          x: 0,
-          y: 0,
-          cssClasses: '',
-          cssStyles: [],
-          look: 'default',
-        },
-        {
-          id: 'child1',
-          label: 'Child 1',
-          isGroup: false,
-          shape: 'rect',
-          width: 80,
-          height: 40,
-          padding: 10,
-          x: 0,
-          y: 0,
-          cssClasses: '',
-          cssStyles: [],
-          look: 'default',
-        },
-        {
-          id: 'child2',
-          label: 'Child 2',
-          isGroup: false,
-          shape: 'rect',
-          width: 80,
-          height: 40,
-          padding: 10,
-          x: 0,
-          y: 0,
-          cssClasses: '',
-          cssStyles: [],
-          look: 'default',
-        },
-        {
-          id: 'child3',
-          label: 'Child 3',
-          isGroup: false,
-          shape: 'rect',
-          width: 80,
-          height: 40,
-          padding: 10,
-          x: 0,
-          y: 0,
-          cssClasses: '',
-          cssStyles: [],
-          look: 'default',
-        },
-        {
-          id: 'child4',
-          label: 'Child 4',
-          isGroup: false,
-          shape: 'rect',
-          width: 80,
-          height: 40,
-          padding: 10,
-          x: 0,
-          y: 0,
-          cssClasses: '',
-          cssStyles: [],
-          look: 'default',
-        },
-      ],
-      edges: [
-        {
-          id: 'root_child1',
-          start: 'root',
-          end: 'child1',
-          type: 'edge',
-          classes: '',
-          style: [],
-          animate: false,
-          arrowTypeEnd: 'arrow_point',
-          arrowTypeStart: 'none',
-        },
-        {
-          id: 'root_child2',
-          start: 'root',
-          end: 'child2',
-          type: 'edge',
-          classes: '',
-          style: [],
-          animate: false,
-          arrowTypeEnd: 'arrow_point',
-          arrowTypeStart: 'none',
-        },
-        {
-          id: 'root_child3',
-          start: 'root',
-          end: 'child3',
-          type: 'edge',
-          classes: '',
-          style: [],
-          animate: false,
-          arrowTypeEnd: 'arrow_point',
-          arrowTypeStart: 'none',
-        },
-        {
-          id: 'root_child4',
-          start: 'root',
-          end: 'child4',
-          type: 'edge',
-          classes: '',
-          style: [],
-          animate: false,
-          arrowTypeEnd: 'arrow_point',
-          arrowTypeStart: 'none',
-        },
-      ],
-      config: mockConfig,
-      direction: 'TB',
-      type: 'test',
-      diagramId: 'test-diagram',
-      markers: [],
-    };
-  });
-
-  describe('validateLayoutData', () => {
-    it('should validate correct layout data', () => {
-      expect(() => validateLayoutData(mockLayoutData)).not.toThrow();
-    });
-
-    it('should throw error for missing data', () => {
-      expect(() => validateLayoutData(null as any)).toThrow('Layout data is required');
-    });
-
-    it('should throw error for missing config', () => {
-      const invalidData = { ...mockLayoutData, config: null as any };
-      expect(() => validateLayoutData(invalidData)).toThrow('Configuration is required');
-    });
-
-    it('should throw error for invalid nodes array', () => {
-      const invalidData = { ...mockLayoutData, nodes: null as any };
-      expect(() => validateLayoutData(invalidData)).toThrow('Nodes array is required');
-    });
-
-    it('should throw error for invalid edges array', () => {
-      const invalidData = { ...mockLayoutData, edges: null as any };
-      expect(() => validateLayoutData(invalidData)).toThrow('Edges array is required');
-    });
-  });
-
-  describe('executeTidyTreeLayout function', () => {
-    it('should execute layout algorithm successfully', async () => {
-      const result: LayoutResult = await executeTidyTreeLayout(mockLayoutData, mockConfig);
-
-      expect(result).toBeDefined();
-      expect(result.nodes).toBeDefined();
-      expect(result.edges).toBeDefined();
-      expect(Array.isArray(result.nodes)).toBe(true);
-      expect(Array.isArray(result.edges)).toBe(true);
-    });
-
-    it('should return positioned nodes with coordinates', async () => {
-      const result: LayoutResult = await executeTidyTreeLayout(mockLayoutData, mockConfig);
-
-      expect(result.nodes.length).toBeGreaterThan(0);
-      result.nodes.forEach((node) => {
-        expect(node.x).toBeDefined();
-        expect(node.y).toBeDefined();
-        expect(typeof node.x).toBe('number');
-        expect(typeof node.y).toBe('number');
-      });
-    });
-
-    it('should return positioned edges with coordinates', async () => {
-      const result: LayoutResult = await executeTidyTreeLayout(mockLayoutData, mockConfig);
-
-      expect(result.edges.length).toBeGreaterThan(0);
-      result.edges.forEach((edge) => {
-        expect(edge.startX).toBeDefined();
-        expect(edge.startY).toBeDefined();
-        expect(edge.midX).toBeDefined();
-        expect(edge.midY).toBeDefined();
-        expect(edge.endX).toBeDefined();
-        expect(edge.endY).toBeDefined();
-      });
-    });
-
-    it('should handle empty layout data gracefully', async () => {
-      const emptyData: LayoutData = {
-        ...mockLayoutData,
-        nodes: [],
-        edges: [],
-      };
-
-      await expect(executeTidyTreeLayout(emptyData, mockConfig)).rejects.toThrow(
-        'No nodes found in layout data'
-      );
-    });
-
-    it('should throw error for missing nodes', async () => {
-      const invalidData = { ...mockLayoutData, nodes: [] };
-
-      await expect(executeTidyTreeLayout(invalidData, mockConfig)).rejects.toThrow(
-        'No nodes found in layout data'
-      );
-    });
-
-    it('should handle empty edges (single node tree)', async () => {
-      const singleNodeData = {
-        ...mockLayoutData,
-        edges: [],
-        nodes: [mockLayoutData.nodes[0]],
-      };
-
-      const result = await executeTidyTreeLayout(singleNodeData, mockConfig);
-      expect(result).toBeDefined();
-      expect(result.nodes).toHaveLength(1);
-      expect(result.edges).toHaveLength(0);
-    });
-
-    it('should create bidirectional dual-tree layout with alternating left/right children', async () => {
-      const result = await executeTidyTreeLayout(mockLayoutData, mockConfig);
-
-      expect(result).toBeDefined();
-      expect(result.nodes).toHaveLength(5);
-
-      const rootNode = result.nodes.find((node) => node.id === 'root');
-      expect(rootNode).toBeDefined();
-      expect(rootNode!.x).toBe(0);
-      expect(rootNode!.y).toBe(20);
-
-      const child1 = result.nodes.find((node) => node.id === 'child1');
-      const child2 = result.nodes.find((node) => node.id === 'child2');
-      const child3 = result.nodes.find((node) => node.id === 'child3');
-      const child4 = result.nodes.find((node) => node.id === 'child4');
-
-      expect(child1).toBeDefined();
-      expect(child2).toBeDefined();
-      expect(child3).toBeDefined();
-      expect(child4).toBeDefined();
-
-      expect(child1!.x).toBeLessThan(rootNode!.x);
-      expect(child2!.x).toBeGreaterThan(rootNode!.x);
-      expect(child3!.x).toBeLessThan(rootNode!.x);
-      expect(child4!.x).toBeGreaterThan(rootNode!.x);
-
-      expect(child1!.x).toBeLessThan(-100);
-      expect(child3!.x).toBeLessThan(-100);
-
-      expect(child2!.x).toBeGreaterThan(100);
-      expect(child4!.x).toBeGreaterThan(100);
-    });
-
-    it('should correctly transpose coordinates to prevent high nodes from covering nodes above them', async () => {
-      const testData = {
-        ...mockLayoutData,
-        nodes: [
-          {
-            id: 'root',
-            label: 'Root',
-            isGroup: false,
-            shape: 'rect' as const,
-            width: 100,
-            height: 50,
-            padding: 10,
-            x: 0,
-            y: 0,
-            cssClasses: '',
-            cssStyles: [],
-            look: 'default',
-          },
-          {
-            id: 'tall-child',
-            label: 'Tall Child',
-            isGroup: false,
-            shape: 'rect' as const,
-            width: 80,
-            height: 120,
-            padding: 10,
-            x: 0,
-            y: 0,
-            cssClasses: '',
-            cssStyles: [],
-            look: 'default',
-          },
-          {
-            id: 'short-child',
-            label: 'Short Child',
-            isGroup: false,
-            shape: 'rect' as const,
-            width: 80,
-            height: 30,
-            padding: 10,
-            x: 0,
-            y: 0,
-            cssClasses: '',
-            cssStyles: [],
-            look: 'default',
-          },
-        ],
-        edges: [
-          {
-            id: 'root_tall',
-            start: 'root',
-            end: 'tall-child',
-            type: 'edge',
-            classes: '',
-            style: [],
-            animate: false,
-            arrowTypeEnd: 'arrow_point',
-            arrowTypeStart: 'none',
-          },
-          {
-            id: 'root_short',
-            start: 'root',
-            end: 'short-child',
-            type: 'edge',
-            classes: '',
-            style: [],
-            animate: false,
-            arrowTypeEnd: 'arrow_point',
-            arrowTypeStart: 'none',
-          },
-        ],
-      };
-
-      const result = await executeTidyTreeLayout(testData, mockConfig);
-
-      expect(result).toBeDefined();
-      expect(result.nodes).toHaveLength(3);
-
-      const rootNode = result.nodes.find((node) => node.id === 'root');
-      const tallChild = result.nodes.find((node) => node.id === 'tall-child');
-      const shortChild = result.nodes.find((node) => node.id === 'short-child');
-
-      expect(rootNode).toBeDefined();
-      expect(tallChild).toBeDefined();
-      expect(shortChild).toBeDefined();
-
-      expect(tallChild!.x).not.toBe(shortChild!.x);
-
-      expect(tallChild!.width).toBe(80);
-      expect(tallChild!.height).toBe(120);
-      expect(shortChild!.width).toBe(80);
-      expect(shortChild!.height).toBe(30);
-
-      const yDifference = Math.abs(tallChild!.y - shortChild!.y);
-      expect(yDifference).toBeGreaterThanOrEqual(0);
-    });
-  });
-});

packages/mermaid-layout-tidy-tree/src/layout.ts

@@ -1,638 +0,0 @@
-import { BoundingBox, Layout } from 'non-layered-tidy-tree-layout';
-import type { MermaidConfig, LayoutData } from 'mermaid';
-import type {
-  LayoutResult,
-  TidyTreeNode,
-  PositionedNode,
-  PositionedEdge,
-  Node,
-  Edge,
-} from './types.js';
-
-/**
- * Execute the tidy-tree layout algorithm on generic layout data
- *
- * This function takes layout data and uses the non-layered-tidy-tree-layout
- * algorithm to calculate optimal node positions for tree structures.
- *
- * @param data - The layout data containing nodes, edges, and configuration
- * @param config - Mermaid configuration object
- * @returns Promise resolving to layout result with positioned nodes and edges
- */
-export function executeTidyTreeLayout(
-  data: LayoutData,
-  _config: MermaidConfig
-): Promise<LayoutResult> {
-  let intersectionShift = 50;
-
-  return new Promise((resolve, reject) => {
-    try {
-      if (!data.nodes || !Array.isArray(data.nodes) || data.nodes.length === 0) {
-        throw new Error('No nodes found in layout data');
-      }
-
-      if (!data.edges || !Array.isArray(data.edges)) {
-        data.edges = [];
-      }
-
-      const { leftTree, rightTree, rootNode } = convertToDualTreeFormat(data);
-
-      const gap = 20;
-      const bottomPadding = 40;
-      intersectionShift = 30;
-
-      const bb = new BoundingBox(gap, bottomPadding);
-      const layout = new Layout(bb);
-
-      let leftResult = null;
-      let rightResult = null;
-      let leftBoundingBox = null;
-      let rightBoundingBox = null;
-
-      if (leftTree) {
-        const leftLayoutResult = layout.layout(leftTree);
-        leftResult = leftLayoutResult.result;
-        leftBoundingBox = leftLayoutResult.boundingBox;
-      }
-
-      if (rightTree) {
-        const rightLayoutResult = layout.layout(rightTree);
-        rightResult = rightLayoutResult.result;
-        rightBoundingBox = rightLayoutResult.boundingBox;
-      }
-
-      const positionedNodes = combineAndPositionTrees(
-        rootNode,
-        leftResult,
-        rightResult,
-        leftBoundingBox,
-        rightBoundingBox,
-        data
-      );
-      const positionedEdges = calculateEdgePositions(
-        data.edges,
-        positionedNodes,
-        intersectionShift
-      );
-
-      resolve({
-        nodes: positionedNodes,
-        edges: positionedEdges,
-      });
-    } catch (error) {
-      reject(error);
-    }
-  });
-}
-
-/**
- * Convert LayoutData to dual-tree format (left and right trees)
- *
- * This function builds two separate tree structures from the nodes and edges,
- * alternating children between left and right trees.
- */
-function convertToDualTreeFormat(data: LayoutData): {
-  leftTree: TidyTreeNode | null;
-  rightTree: TidyTreeNode | null;
-  rootNode: TidyTreeNode;
-} {
-  const { nodes, edges } = data;
-
-  const nodeMap = new Map<string, Node>();
-  nodes.forEach((node) => nodeMap.set(node.id, node));
-
-  const children = new Map<string, string[]>();
-  const parents = new Map<string, string>();
-
-  edges.forEach((edge) => {
-    const parentId = edge.start;
-    const childId = edge.end;
-
-    if (parentId && childId) {
-      if (!children.has(parentId)) {
-        children.set(parentId, []);
-      }
-      children.get(parentId)!.push(childId);
-      parents.set(childId, parentId);
-    }
-  });
-
-  const rootNodeData = nodes.find((node) => !parents.has(node.id));
-  if (!rootNodeData && nodes.length === 0) {
-    throw new Error('No nodes available to create tree');
-  }
-
-  const actualRoot = rootNodeData ?? nodes[0];
-
-  const rootNode: TidyTreeNode = {
-    id: actualRoot.id,
-    width: actualRoot.width ?? 100,
-    height: actualRoot.height ?? 50,
-    _originalNode: actualRoot,
-  };
-
-  const rootChildren = children.get(actualRoot.id) ?? [];
-  const leftChildren: string[] = [];
-  const rightChildren: string[] = [];
-
-  rootChildren.forEach((childId, index) => {
-    if (index % 2 === 0) {
-      leftChildren.push(childId);
-    } else {
-      rightChildren.push(childId);
-    }
-  });
-
-  const leftTree = leftChildren.length > 0 ? buildSubTree(leftChildren, children, nodeMap) : null;
-
-  const rightTree =
-    rightChildren.length > 0 ? buildSubTree(rightChildren, children, nodeMap) : null;
-
-  return { leftTree, rightTree, rootNode };
-}
-
-/**
- * Build a subtree from a list of root children
- * For horizontal trees, we need to transpose width/height since the tree will be rotated 90°
- */
-function buildSubTree(
-  rootChildren: string[],
-  children: Map<string, string[]>,
-  nodeMap: Map<string, Node>
-): TidyTreeNode {
-  const virtualRoot: TidyTreeNode = {
-    id: `virtual-root-${Math.random()}`,
-    width: 1,
-    height: 1,
-    children: rootChildren
-      .map((childId) => nodeMap.get(childId))
-      .filter((child): child is Node => child !== undefined)
-      .map((child) => convertNodeToTidyTreeTransposed(child, children, nodeMap)),
-  };
-
-  return virtualRoot;
-}
-
-/**
- * Recursively convert a node and its children to tidy-tree format
- * This version transposes width/height for horizontal tree layout
- */
-function convertNodeToTidyTreeTransposed(
-  node: Node,
-  children: Map<string, string[]>,
-  nodeMap: Map<string, Node>
-): TidyTreeNode {
-  const childIds = children.get(node.id) ?? [];
-  const childNodes = childIds
-    .map((childId) => nodeMap.get(childId))
-    .filter((child): child is Node => child !== undefined)
-    .map((child) => convertNodeToTidyTreeTransposed(child, children, nodeMap));
-
-  return {
-    id: node.id,
-    width: node.height ?? 50,
-    height: node.width ?? 100,
-    children: childNodes.length > 0 ? childNodes : undefined,
-    _originalNode: node,
-  };
-}
-/**
- * Combine and position the left and right trees around the root node
- * Creates a bidirectional layout where left tree grows left and right tree grows right
- */
-function combineAndPositionTrees(
-  rootNode: TidyTreeNode,
-  leftResult: TidyTreeNode | null,
-  rightResult: TidyTreeNode | null,
-  _leftBoundingBox: any,
-  _rightBoundingBox: any,
-  _data: LayoutData
-): PositionedNode[] {
-  const positionedNodes: PositionedNode[] = [];
-
-  const rootX = 0;
-  const rootY = 0;
-
-  const treeSpacing = rootNode.width / 2 + 30;
-  const leftTreeNodes: PositionedNode[] = [];
-  const rightTreeNodes: PositionedNode[] = [];
-
-  if (leftResult?.children) {
-    positionLeftTreeBidirectional(leftResult.children, leftTreeNodes, rootX - treeSpacing, rootY);
-  }
-
-  if (rightResult?.children) {
-    positionRightTreeBidirectional(
-      rightResult.children,
-      rightTreeNodes,
-      rootX + treeSpacing,
-      rootY
-    );
-  }
-
-  let leftTreeCenterY = 0;
-  let rightTreeCenterY = 0;
-
-  if (leftTreeNodes.length > 0) {
-    const leftTreeXPositions = [...new Set(leftTreeNodes.map((node) => node.x))].sort(
-      (a, b) => b - a
-    );
-    const firstLevelLeftX = leftTreeXPositions[0];
-    const firstLevelLeftNodes = leftTreeNodes.filter((node) => node.x === firstLevelLeftX);
-
-    if (firstLevelLeftNodes.length > 0) {
-      const leftMinY = Math.min(
-        ...firstLevelLeftNodes.map((node) => node.y - (node.height ?? 50) / 2)
-      );
-      const leftMaxY = Math.max(
-        ...firstLevelLeftNodes.map((node) => node.y + (node.height ?? 50) / 2)
-      );
-      leftTreeCenterY = (leftMinY + leftMaxY) / 2;
-    }
-  }
-
-  if (rightTreeNodes.length > 0) {
-    const rightTreeXPositions = [...new Set(rightTreeNodes.map((node) => node.x))].sort(
-      (a, b) => a - b
-    );
-    const firstLevelRightX = rightTreeXPositions[0];
-    const firstLevelRightNodes = rightTreeNodes.filter((node) => node.x === firstLevelRightX);
-
-    if (firstLevelRightNodes.length > 0) {
-      const rightMinY = Math.min(
-        ...firstLevelRightNodes.map((node) => node.y - (node.height ?? 50) / 2)
-      );
-      const rightMaxY = Math.max(
-        ...firstLevelRightNodes.map((node) => node.y + (node.height ?? 50) / 2)
-      );
-      rightTreeCenterY = (rightMinY + rightMaxY) / 2;
-    }
-  }
-
-  const leftTreeOffset = -leftTreeCenterY;
-  const rightTreeOffset = -rightTreeCenterY;
-
-  positionedNodes.push({
-    id: String(rootNode.id),
-    x: rootX,
-    y: rootY + 20,
-    section: 'root',
-    width: rootNode._originalNode?.width ?? rootNode.width,
-    height: rootNode._originalNode?.height ?? rootNode.height,
-    originalNode: rootNode._originalNode,
-  });
-
-  const leftTreeNodesWithOffset = leftTreeNodes.map((node) => ({
-    id: node.id,
-    x: node.x - (node.width ?? 0) / 2,
-    y: node.y + leftTreeOffset + (node.height ?? 0) / 2,
-    section: 'left' as const,
-    width: node.width,
-    height: node.height,
-    originalNode: node.originalNode,
-  }));
-
-  const rightTreeNodesWithOffset = rightTreeNodes.map((node) => ({
-    id: node.id,
-    x: node.x + (node.width ?? 0) / 2,
-    y: node.y + rightTreeOffset + (node.height ?? 0) / 2,
-    section: 'right' as const,
-    width: node.width,
-    height: node.height,
-    originalNode: node.originalNode,
-  }));
-
-  positionedNodes.push(...leftTreeNodesWithOffset);
-  positionedNodes.push(...rightTreeNodesWithOffset);
-
-  return positionedNodes;
-}
-
-/**
- * Position nodes from the left tree in a bidirectional layout (grows to the left)
- * Rotates the tree 90 degrees counterclockwise so it grows horizontally to the left
- */
-function positionLeftTreeBidirectional(
-  nodes: TidyTreeNode[],
-  positionedNodes: PositionedNode[],
-  offsetX: number,
-  offsetY: number
-): void {
-  nodes.forEach((node) => {
-    const distanceFromRoot = node.y ?? 0;
-    const verticalPosition = node.x ?? 0;
-
-    const originalWidth = node._originalNode?.width ?? 100;
-    const originalHeight = node._originalNode?.height ?? 50;
-
-    const adjustedY = offsetY + verticalPosition;
-
-    positionedNodes.push({
-      id: String(node.id),
-      x: offsetX - distanceFromRoot,
-      y: adjustedY,
-      width: originalWidth,
-      height: originalHeight,
-      originalNode: node._originalNode,
-    });
-
-    if (node.children) {
-      positionLeftTreeBidirectional(node.children, positionedNodes, offsetX, offsetY);
-    }
-  });
-}
-
-/**
- * Position nodes from the right tree in a bidirectional layout (grows to the right)
- * Rotates the tree 90 degrees clockwise so it grows horizontally to the right
- */
-function positionRightTreeBidirectional(
-  nodes: TidyTreeNode[],
-  positionedNodes: PositionedNode[],
-  offsetX: number,
-  offsetY: number
-): void {
-  nodes.forEach((node) => {
-    const distanceFromRoot = node.y ?? 0;
-    const verticalPosition = node.x ?? 0;
-
-    const originalWidth = node._originalNode?.width ?? 100;
-    const originalHeight = node._originalNode?.height ?? 50;
-
-    const adjustedY = offsetY + verticalPosition;
-
-    positionedNodes.push({
-      id: String(node.id),
-      x: offsetX + distanceFromRoot,
-      y: adjustedY,
-      width: originalWidth,
-      height: originalHeight,
-      originalNode: node._originalNode,
-    });
-
-    if (node.children) {
-      positionRightTreeBidirectional(node.children, positionedNodes, offsetX, offsetY);
-    }
-  });
-}
-
-/**
- * Calculate the intersection point of a line with a circle
- * @param circle - Circle coordinates and radius
- * @param lineStart - Starting point of the line
- * @param lineEnd - Ending point of the line
- * @returns The intersection point
- */
-function computeCircleEdgeIntersection(
-  circle: { x: number; y: number; width: number; height: number },
-  lineStart: { x: number; y: number },
-  lineEnd: { x: number; y: number }
-): { x: number; y: number } {
-  const radius = Math.min(circle.width, circle.height) / 2;
-
-  const dx = lineEnd.x - lineStart.x;
-  const dy = lineEnd.y - lineStart.y;
-  const length = Math.sqrt(dx * dx + dy * dy);
-
-  if (length === 0) {
-    return lineStart;
-  }
-
-  const nx = dx / length;
-  const ny = dy / length;
-
-  return {
-    x: circle.x - nx * radius,
-    y: circle.y - ny * radius,
-  };
-}
-
-/**
- * Calculate intersection point of a line with a rectangle
- * This is a simplified version that we'll use instead of importing from mermaid
- */
-function intersection(
-  node: { x: number; y: number; width?: number; height?: number },
-  point1: { x: number; y: number },
-  point2: { x: number; y: number }
-): { x: number; y: number } {
-  const nodeWidth = node.width ?? 100;
-  const nodeHeight = node.height ?? 50;
-
-  const centerX = node.x;
-  const centerY = node.y;
-
-  const dx = point2.x - point1.x;
-  const dy = point2.y - point1.y;
-
-  if (dx === 0 && dy === 0) {
-    return { x: centerX, y: centerY };
-  }
-
-  const halfWidth = nodeWidth / 2;
-  const halfHeight = nodeHeight / 2;
-
-  let intersectionX = centerX;
-  let intersectionY = centerY;
-
-  if (Math.abs(dx) > Math.abs(dy)) {
-    if (dx > 0) {
-      intersectionX = centerX + halfWidth;
-      intersectionY = centerY + (halfWidth * dy) / dx;
-    } else {
-      intersectionX = centerX - halfWidth;
-      intersectionY = centerY - (halfWidth * dy) / dx;
-    }
-  } else {
-    if (dy > 0) {
-      intersectionY = centerY + halfHeight;
-      intersectionX = centerX + (halfHeight * dx) / dy;
-    } else {
-      intersectionY = centerY - halfHeight;
-      intersectionX = centerX - (halfHeight * dx) / dy;
-    }
-  }
-
-  return { x: intersectionX, y: intersectionY };
-}
-
-/**
- * Calculate edge positions based on positioned nodes
- * Now includes tree membership and node dimensions for precise edge calculations
- * Edges now stop at shape boundaries instead of extending to centers
- */
-function calculateEdgePositions(
-  edges: Edge[],
-  positionedNodes: PositionedNode[],
-  intersectionShift: number
-): PositionedEdge[] {
-  const nodeInfo = new Map<string, PositionedNode>();
-  positionedNodes.forEach((node) => {
-    nodeInfo.set(node.id, node);
-  });
-
-  return edges.map((edge) => {
-    const sourceNode = nodeInfo.get(edge.start ?? '');
-    const targetNode = nodeInfo.get(edge.end ?? '');
-
-    if (!sourceNode || !targetNode) {
-      return {
-        id: edge.id,
-        source: edge.start ?? '',
-        target: edge.end ?? '',
-        startX: 0,
-        startY: 0,
-        midX: 0,
-        midY: 0,
-        endX: 0,
-        endY: 0,
-        points: [{ x: 0, y: 0 }],
-        sourceSection: undefined,
-        targetSection: undefined,
-        sourceWidth: undefined,
-        sourceHeight: undefined,
-        targetWidth: undefined,
-        targetHeight: undefined,
-      };
-    }
-
-    const sourceCenter = { x: sourceNode.x, y: sourceNode.y };
-    const targetCenter = { x: targetNode.x, y: targetNode.y };
-
-    const isSourceRound = ['circle', 'cloud', 'bang'].includes(
-      sourceNode.originalNode?.shape ?? ''
-    );
-    const isTargetRound = ['circle', 'cloud', 'bang'].includes(
-      targetNode.originalNode?.shape ?? ''
-    );
-
-    let startPos = isSourceRound
-      ? computeCircleEdgeIntersection(
-          {
-            x: sourceNode.x,
-            y: sourceNode.y,
-            width: sourceNode.width ?? 100,
-            height: sourceNode.height ?? 100,
-          },
-          targetCenter,
-          sourceCenter
-        )
-      : intersection(sourceNode, sourceCenter, targetCenter);
-
-    let endPos = isTargetRound
-      ? computeCircleEdgeIntersection(
-          {
-            x: targetNode.x,
-            y: targetNode.y,
-            width: targetNode.width ?? 100,
-            height: targetNode.height ?? 100,
-          },
-          sourceCenter,
-          targetCenter
-        )
-      : intersection(targetNode, targetCenter, sourceCenter);
-
-    const midX = (startPos.x + endPos.x) / 2;
-    const midY = (startPos.y + endPos.y) / 2;
-
-    const points = [startPos];
-    if (sourceNode.section === 'left') {
-      points.push({
-        x: sourceNode.x - (sourceNode.width ?? 0) / 2 - intersectionShift,
-        y: sourceNode.y,
-      });
-    } else if (sourceNode.section === 'right') {
-      points.push({
-        x: sourceNode.x + (sourceNode.width ?? 0) / 2 + intersectionShift,
-        y: sourceNode.y,
-      });
-    }
-    if (targetNode.section === 'left') {
-      points.push({
-        x: targetNode.x + (targetNode.width ?? 0) / 2 + intersectionShift,
-        y: targetNode.y,
-      });
-    } else if (targetNode.section === 'right') {
-      points.push({
-        x: targetNode.x - (targetNode.width ?? 0) / 2 - intersectionShift,
-        y: targetNode.y,
-      });
-    }
-
-    points.push(endPos);
-
-    const secondPoint = points.length > 1 ? points[1] : targetCenter;
-    startPos = isSourceRound
-      ? computeCircleEdgeIntersection(
-          {
-            x: sourceNode.x,
-            y: sourceNode.y,
-            width: sourceNode.width ?? 100,
-            height: sourceNode.height ?? 100,
-          },
-          secondPoint,
-          sourceCenter
-        )
-      : intersection(sourceNode, secondPoint, sourceCenter);
-    points[0] = startPos;
-
-    const secondLastPoint = points.length > 1 ? points[points.length - 2] : sourceCenter;
-    endPos = isTargetRound
-      ? computeCircleEdgeIntersection(
-          {
-            x: targetNode.x,
-            y: targetNode.y,
-            width: targetNode.width ?? 100,
-            height: targetNode.height ?? 100,
-          },
-          secondLastPoint,
-          targetCenter
-        )
-      : intersection(targetNode, secondLastPoint, targetCenter);
-    points[points.length - 1] = endPos;
-
-    return {
-      id: edge.id,
-      source: edge.start ?? '',
-      target: edge.end ?? '',
-      startX: startPos.x,
-      startY: startPos.y,
-      midX,
-      midY,
-      endX: endPos.x,
-      endY: endPos.y,
-      points,
-      sourceSection: sourceNode?.section,
-      targetSection: targetNode?.section,
-      sourceWidth: sourceNode?.width,
-      sourceHeight: sourceNode?.height,
-      targetWidth: targetNode?.width,
-      targetHeight: targetNode?.height,
-    };
-  });
-}
-
-/**
- * Validate layout data structure
- * @param data - The data to validate
- * @returns True if data is valid, throws error otherwise
- */
-export function validateLayoutData(data: LayoutData): boolean {
-  if (!data) {
-    throw new Error('Layout data is required');
-  }
-
-  if (!data.config) {
-    throw new Error('Configuration is required in layout data');
-  }
-
-  if (!Array.isArray(data.nodes)) {
-    throw new Error('Nodes array is required in layout data');
-  }
-
-  if (!Array.isArray(data.edges)) {
-    throw new Error('Edges array is required in layout data');
-  }
-
-  return true;
-}

packages/mermaid-layout-tidy-tree/src/layouts.ts

@@ -1,13 +0,0 @@
-import type { LayoutLoaderDefinition } from 'mermaid';
-
-const loader = async () => await import(`./render.js`);
-
-const tidyTreeLayout: LayoutLoaderDefinition[] = [
-  {
-    name: 'tidy-tree',
-    loader,
-    algorithm: 'tidy-tree',
-  },
-];
-
-export default tidyTreeLayout;

packages/mermaid-layout-tidy-tree/src/non-layered-tidy-tree-layout.d.ts

@@ -1,18 +0,0 @@
-declare module 'non-layered-tidy-tree-layout' {
-  export class BoundingBox {
-    constructor(gap: number, bottomPadding: number);
-  }
-
-  export class Layout {
-    constructor(boundingBox: BoundingBox);
-    layout(data: any): {
-      result: any;
-      boundingBox: {
-        left: number;
-        right: number;
-        top: number;
-        bottom: number;
-      };
-    };
-  }
-}

packages/mermaid-layout-tidy-tree/src/render.ts

@@ -1,180 +0,0 @@
-import type { InternalHelpers, LayoutData, RenderOptions, SVG } from 'mermaid';
-import { executeTidyTreeLayout } from './layout.js';
-
-interface NodeWithPosition {
-  id: string;
-  x?: number;
-  y?: number;
-  width?: number;
-  height?: number;
-  domId?: any;
-  [key: string]: any;
-}
-
-/**
- * Render function for bidirectional tidy-tree layout algorithm
- *
- * This follows the same pattern as ELK and dagre renderers:
- * 1. Insert nodes into DOM to get their actual dimensions
- * 2. Run the bidirectional tidy-tree layout algorithm to calculate positions
- * 3. Position the nodes and edges based on layout results
- *
- * The bidirectional layout creates two trees that grow horizontally in opposite
- * directions from a central root node:
- * - Left tree: grows horizontally to the left (children: 1st, 3rd, 5th...)
- * - Right tree: grows horizontally to the right (children: 2nd, 4th, 6th...)
- */
-export const render = async (
-  data4Layout: LayoutData,
-  svg: SVG,
-  {
-    insertCluster,
-    insertEdge,
-    insertEdgeLabel,
-    insertMarkers,
-    insertNode,
-    log,
-    positionEdgeLabel,
-  }: InternalHelpers,
-  { algorithm: _algorithm }: RenderOptions
-) => {
-  const nodeDb: Record<string, NodeWithPosition> = {};
-  const clusterDb: Record<string, any> = {};
-
-  const element = svg.select('g');
-  insertMarkers(element, data4Layout.markers, data4Layout.type, data4Layout.diagramId);
-
-  const subGraphsEl = element.insert('g').attr('class', 'subgraphs');
-  const edgePaths = element.insert('g').attr('class', 'edgePaths');
-  const edgeLabels = element.insert('g').attr('class', 'edgeLabels');
-  const nodes = element.insert('g').attr('class', 'nodes');
-  // Step 1: Insert nodes into DOM to get their actual dimensions
-  log.debug('Inserting nodes into DOM for dimension calculation');
-
-  await Promise.all(
-    data4Layout.nodes.map(async (node) => {
-      if (node.isGroup) {
-        const clusterNode: NodeWithPosition = {
-          ...node,
-          id: node.id,
-          width: node.width,
-          height: node.height,
-        };
-        clusterDb[node.id] = clusterNode;
-        nodeDb[node.id] = clusterNode;
-
-        await insertCluster(subGraphsEl, node);
-      } else {
-        const nodeWithPosition: NodeWithPosition = {
-          ...node,
-          id: node.id,
-          width: node.width,
-          height: node.height,
-        };
-        nodeDb[node.id] = nodeWithPosition;
-
-        const nodeEl = await insertNode(nodes, node, {
-          config: data4Layout.config,
-          dir: data4Layout.direction || 'TB',
-        });
-
-        const boundingBox = nodeEl.node()!.getBBox();
-        nodeWithPosition.width = boundingBox.width;
-        nodeWithPosition.height = boundingBox.height;
-        nodeWithPosition.domId = nodeEl;
-
-        log.debug(`Node ${node.id} dimensions: ${boundingBox.width}x${boundingBox.height}`);
-      }
-    })
-  );
-  // Step 2: Run the bidirectional tidy-tree layout algorithm
-  log.debug('Running bidirectional tidy-tree layout algorithm');
-
-  const updatedLayoutData = {
-    ...data4Layout,
-    nodes: data4Layout.nodes.map((node) => {
-      const nodeWithDimensions = nodeDb[node.id];
-      return {
-        ...node,
-        width: nodeWithDimensions.width ?? node.width ?? 100,
-        height: nodeWithDimensions.height ?? node.height ?? 50,
-      };
-    }),
-  };
-
-  const layoutResult = await executeTidyTreeLayout(updatedLayoutData, data4Layout.config);
-  // Step 3: Position the nodes based on bidirectional layout results
-  log.debug('Positioning nodes based on bidirectional layout results');
-
-  layoutResult.nodes.forEach((positionedNode) => {
-    const node = nodeDb[positionedNode.id];
-    if (node?.domId) {
-      // Position the node at the calculated coordinates from bidirectional layout
-      // The layout algorithm has already calculated positions for:
-      // - Root node at center (0, 0)
-      // - Left tree nodes with negative x coordinates (growing left)
-      // - Right tree nodes with positive x coordinates (growing right)
-      node.domId.attr('transform', `translate(${positionedNode.x}, ${positionedNode.y})`);
-      // Store the final position
-      node.x = positionedNode.x;
-      node.y = positionedNode.y;
-      // Step 3: Position the nodes based on bidirectional layout results
-      log.debug(`Positioned node ${node.id} at (${positionedNode.x}, ${positionedNode.y})`);
-    }
-  });
-
-  log.debug('Inserting and positioning edges');
-
-  await Promise.all(
-    data4Layout.edges.map(async (edge) => {
-      await insertEdgeLabel(edgeLabels, edge);
-
-      const startNode = nodeDb[edge.start ?? ''];
-      const endNode = nodeDb[edge.end ?? ''];
-
-      if (startNode && endNode) {
-        const positionedEdge = layoutResult.edges.find((e) => e.id === edge.id);
-
-        if (positionedEdge) {
-          log.debug('APA01 positionedEdge', positionedEdge);
-          const edgeWithPath = {
-            ...edge,
-            points: positionedEdge.points,
-          };
-          const paths = insertEdge(
-            edgePaths,
-            edgeWithPath,
-            clusterDb,
-            data4Layout.type,
-            startNode,
-            endNode,
-            data4Layout.diagramId
-          );
-
-          positionEdgeLabel(edgeWithPath, paths);
-        } else {
-          const edgeWithPath = {
-            ...edge,
-            points: [
-              { x: startNode.x ?? 0, y: startNode.y ?? 0 },
-              { x: endNode.x ?? 0, y: endNode.y ?? 0 },
-            ],
-          };
-
-          const paths = insertEdge(
-            edgePaths,
-            edgeWithPath,
-            clusterDb,
-            data4Layout.type,
-            startNode,
-            endNode,
-            data4Layout.diagramId
-          );
-          positionEdgeLabel(edgeWithPath, paths);
-        }
-      }
-    })
-  );
-
-  log.debug('Bidirectional tidy-tree rendering completed');
-};

packages/mermaid-layout-tidy-tree/src/types.ts

@@ -1,69 +0,0 @@
-import type { LayoutData } from 'mermaid';
-
-export type Node = LayoutData['nodes'][number];
-export type Edge = LayoutData['edges'][number];
-
-/**
- * Positioned node after layout calculation
- */
-export interface PositionedNode {
-  id: string;
-  x: number;
-  y: number;
-  section?: 'root' | 'left' | 'right';
-  width?: number;
-  height?: number;
-  originalNode?: Node;
-  [key: string]: unknown;
-}
-
-/**
- * Positioned edge after layout calculation
- */
-export interface PositionedEdge {
-  id: string;
-  source: string;
-  target: string;
-  startX: number;
-  startY: number;
-  midX: number;
-  midY: number;
-  endX: number;
-  endY: number;
-  sourceSection?: 'root' | 'left' | 'right';
-  targetSection?: 'root' | 'left' | 'right';
-  sourceWidth?: number;
-  sourceHeight?: number;
-  targetWidth?: number;
-  targetHeight?: number;
-  [key: string]: unknown;
-}
-
-/**
- * Result of layout algorithm execution
- */
-export interface LayoutResult {
-  nodes: PositionedNode[];
-  edges: PositionedEdge[];
-}
-
-/**
- * Tidy-tree node structure compatible with non-layered-tidy-tree-layout
- */
-export interface TidyTreeNode {
-  id: string | number;
-  width: number;
-  height: number;
-  x?: number;
-  y?: number;
-  children?: TidyTreeNode[];
-  _originalNode?: Node;
-}
-
-/**
- * Tidy-tree layout configuration
- */
-export interface TidyTreeLayoutConfig {
-  gap: number;
-  bottomPadding: number;
-}

packages/mermaid-layout-tidy-tree/tsconfig.json

@@ -1,10 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "rootDir": "./src",
-    "outDir": "./dist",
-    "types": ["vitest/importMeta", "vitest/globals"]
-  },
-  "include": ["./src/**/*.ts", "./src/**/*.d.ts"],
-  "typeRoots": ["./src/types"]
-}

packages/mermaid/CHANGELOG.md

@@ -87,6 +87,7 @@
 ### Minor Changes
 
 - [#6408](https://github.com/mermaid-js/mermaid/pull/6408) [`ad65313`](https://github.com/mermaid-js/mermaid/commit/ad653138e16765d095613a6e5de86dc5e52ac8f0) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - fix: restore curve type configuration functionality for flowcharts. This fixes the issue where curve type settings were not being applied when configured through any of the following methods:
+
   - Config
   - Init directive (%%{ init: { 'flowchart': { 'curve': '...' } } }%%)
   - LinkStyle command (linkStyle default interpolate ...)
@@ -105,12 +106,14 @@
 ### Minor Changes
 
 - [#6187](https://github.com/mermaid-js/mermaid/pull/6187) [`7809b5a`](https://github.com/mermaid-js/mermaid/commit/7809b5a93fae127f45727071f5ff14325222c518) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - Flowchart new syntax for node metadata bugs
+
   - Incorrect label mapping for nodes when using `&`
   - Syntax error when `}` with trailing spaces before new line
 
 - [#6136](https://github.com/mermaid-js/mermaid/pull/6136) [`ec0d9c3`](https://github.com/mermaid-js/mermaid/commit/ec0d9c389aa6018043187654044c1e0b5aa4f600) Thanks [@knsv](https://github.com/knsv)! - Adding support for animation of flowchart edges
 
 - [#6373](https://github.com/mermaid-js/mermaid/pull/6373) [`05bdf0e`](https://github.com/mermaid-js/mermaid/commit/05bdf0e20e2629fe77513218fbd4e28e65f75882) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - Upgrade Requirement and ER diagram to use the common renderer flow
+
   - Added support for directions
   - Added support for hand drawn look
 
@@ -159,6 +162,7 @@
 - [#5999](https://github.com/mermaid-js/mermaid/pull/5999) [`742ad7c`](https://github.com/mermaid-js/mermaid/commit/742ad7c130964df1fb5544e909d9556081285f68) Thanks [@knsv](https://github.com/knsv)! - Adding Kanban board, a new diagram type
 
 - [#5880](https://github.com/mermaid-js/mermaid/pull/5880) [`bdf145f`](https://github.com/mermaid-js/mermaid/commit/bdf145ffe362462176d9c1e68d5f3ff5c9d962b0) Thanks [@yari-dewalt](https://github.com/yari-dewalt)! - Class diagram changes:
+
   - Updates the class diagram to the new unified way of rendering.
   - Includes a new "classBox" shape to be used in diagrams
   - Other updates such as:

packages/mermaid/package.json

@@ -82,7 +82,7 @@
     "katex": "^0.16.22",
     "khroma": "^2.1.0",
     "lodash-es": "^4.17.21",
-    "marked": "^15.0.7",
+    "marked": "^16.0.0",
     "roughjs": "^4.6.6",
     "stylis": "^4.3.6",
     "ts-dedent": "^2.2.0",
@@ -123,8 +123,8 @@
     "rimraf": "^6.0.1",
     "start-server-and-test": "^2.0.10",
     "type-fest": "^4.35.0",
-    "typedoc": "^0.28.9",
-    "typedoc-plugin-markdown": "^4.8.0",
+    "typedoc": "^0.27.8",
+    "typedoc-plugin-markdown": "^4.4.2",
     "typescript": "~5.7.3",
     "unist-util-flatmap": "^1.0.0",
     "unist-util-visit": "^5.0.0",

packages/mermaid/scripts/docs.spec.ts

@@ -171,9 +171,7 @@ This Markdown should be kept.
       expect(buildShapeDoc()).toMatchInlineSnapshot(`
         "| **Semantic Name**                 | **Shape Name**         | **Short Name** | **Description**                | **Alias Supported**                                              |
         | --------------------------------- | ---------------------- | -------------- | ------------------------------ | ---------------------------------------------------------------- |
-        | Bang                              | Bang                   | \`bang\`         | Bang                           | \`bang\`                                                           |
         | Card                              | Notched Rectangle      | \`notch-rect\`   | Represents a card              | \`card\`, \`notched-rectangle\`                                      |
-        | Cloud                             | Cloud                  | \`cloud\`        | cloud                          | \`cloud\`                                                          |
         | Collate                           | Hourglass              | \`hourglass\`    | Represents a collate operation | \`collate\`, \`hourglass\`                                           |
         | Com Link                          | Lightning Bolt         | \`bolt\`         | Communication link             | \`com-link\`, \`lightning-bolt\`                                     |
         | Comment                           | Curly Brace            | \`brace\`        | Adds a comment                 | \`brace-l\`, \`comment\`                                             |

packages/mermaid/src/config.type.ts

@@ -109,6 +109,16 @@ export interface MermaidConfig {
       | 'INTERACTIVE'
       | 'MODEL_ORDER'
       | 'GREEDY_MODEL_ORDER';
+    /**
+     * The node order given by the model does not change to produce a better layout. E.g. if node A is before node B in the model this is not changed during crossing minimization. This assumes that the node model order is already respected before crossing minimization. This can be achieved by setting considerModelOrder.strategy to NODES_AND_EDGES.
+     *
+     */
+    forceNodeModelOrder?: boolean;
+    /**
+     * Preserves the order of nodes and edges in the model file if this does not lead to additional edge crossings. Depending on the strategy this is not always possible since the node and edge order might be conflicting.
+     *
+     */
+    considerModelOrder?: 'NONE' | 'NODES_AND_EDGES' | 'PREFER_EDGES' | 'PREFER_NODES';
   };
   darkMode?: boolean;
   htmlLabels?: boolean;
@@ -1065,10 +1075,6 @@ export interface ArchitectureDiagramConfig extends BaseDiagramConfig {
 export interface MindmapDiagramConfig extends BaseDiagramConfig {
   padding?: number;
   maxNodeWidth?: number;
-  /**
-   * Layout algorithm to use for positioning mindmap nodes
-   */
-  layoutAlgorithm?: string;
 }
 /**
  * The object containing configurations specific for kanban diagrams

packages/mermaid/src/defaultConfig.ts

@@ -24,6 +24,8 @@ const config: RequiredDeep<MermaidConfig> = {
     // mergeEdges is needed here to be considered
     mergeEdges: false,
     nodePlacementStrategy: 'BRANDES_KOEPF',
+    forceNodeModelOrder: false,
+    considerModelOrder: 'NODES_AND_EDGES',
   },
   themeCSS: undefined,
 

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

@@ -1,3 +1,5 @@
+// tests to check that comments are removed
+
 import { cleanupComments } from './comments.js';
 import { describe, it, expect } from 'vitest';
 
@@ -8,12 +10,12 @@ describe('comments', () => {
 %% This is a comment
 %% This is another comment
 graph TD
-    A-->B
+	A-->B
 %% This is a comment
 `;
     expect(cleanupComments(text)).toMatchInlineSnapshot(`
       "graph TD
-          A-->B
+      	A-->B
       "
     `);
   });
@@ -27,9 +29,9 @@ graph TD
 %%{ init: {'theme': 'space before init'}}%%
 %%{init: {'theme': 'space after ending'}}%%
 graph TD
-    A-->B
+	A-->B
 
-    B-->C
+	B-->C
 %% This is a comment
 `;
     expect(cleanupComments(text)).toMatchInlineSnapshot(`
@@ -37,9 +39,9 @@ graph TD
       %%{ init: {'theme': 'space before init'}}%%
       %%{init: {'theme': 'space after ending'}}%%
       graph TD
-          A-->B
+      	A-->B
 
-          B-->C
+      	B-->C
       "
     `);
   });
@@ -48,14 +50,14 @@ graph TD
     const text = `
 %% This is a comment
 graph TD
-    A-->B
-    %% This is a comment
-    C-->D
+	A-->B
+	%% This is a comment
+	C-->D
 `;
     expect(cleanupComments(text)).toMatchInlineSnapshot(`
       "graph TD
-          A-->B
-          C-->D
+	A-->B
+	C-->D
       "
     `);
   });
@@ -68,11 +70,11 @@ graph TD
 
 %% This is a comment
 graph TD
-    A-->B
+	A-->B
 `;
     expect(cleanupComments(text)).toMatchInlineSnapshot(`
       "graph TD
-          A-->B
+      	A-->B
       "
     `);
   });
@@ -80,12 +82,12 @@ graph TD
   it('should remove comments at end of text with no newline', () => {
     const text = `
 graph TD
-    A-->B
+	A-->B
 %% This is a comment`;
 
     expect(cleanupComments(text)).toMatchInlineSnapshot(`
       "graph TD
-          A-->B
+	A-->B
       "
     `);
   });

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

@@ -4,6 +4,5 @@
  * @returns cleaned text
  */
 export const cleanupComments = (text: string): string => {
-  const cleaned = text.replace(/^\s*%%(?!{)[^\n]+\n?/gm, '');
-  return cleaned.trimStart();
+  return text.replace(/^\s*%%(?!{)[^\n]+\n?/gm, '').trimStart();
 };

packages/mermaid/src/diagrams/architecture/architectureRenderer.ts

@@ -1,5 +1,6 @@
-import type { LayoutOptions, Position } from 'cytoscape';
+import type { Position } from 'cytoscape';
 import cytoscape from 'cytoscape';
+import type { FcoseLayoutOptions } from 'cytoscape-fcose';
 import fcose from 'cytoscape-fcose';
 import { select } from 'd3';
 import type { DrawDefinition, SVG } from '../../diagram-api/types.js';
@@ -40,7 +41,7 @@ registerIconPacks([
     icons: architectureIcons,
   },
 ]);
-cytoscape.use(fcose as any);
+cytoscape.use(fcose);
 
 function addServices(services: ArchitectureService[], cy: cytoscape.Core, db: ArchitectureDB) {
   services.forEach((service) => {
@@ -428,7 +429,7 @@ function layoutArchitecture(
       },
       alignmentConstraint,
       relativePlacementConstraint,
-    } as LayoutOptions);
+    } as FcoseLayoutOptions);
 
     // Once the diagram has been generated and the service's position cords are set, adjust the XY edges to have a 90deg bend
     layout.one('layoutstop', () => {

packages/mermaid/src/diagrams/mindmap/mindmapDb.getData.test.ts

@@ -1,297 +0,0 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { MindmapDB } from './mindmapDb.js';
-import type { MindmapLayoutNode, MindmapLayoutEdge } from './mindmapDb.js';
-import type { Edge } from '../../rendering-util/types.js';
-
-// Mock the getConfig function
-vi.mock('../../diagram-api/diagramAPI.js', () => ({
-  getConfig: vi.fn(() => ({
-    mindmap: {
-      layoutAlgorithm: 'cose-bilkent',
-      padding: 10,
-      maxNodeWidth: 200,
-      useMaxWidth: true,
-    },
-  })),
-}));
-
-describe('MindmapDb getData function', () => {
-  let db: MindmapDB;
-
-  beforeEach(() => {
-    db = new MindmapDB();
-    // Clear the database before each test
-    db.clear();
-  });
-
-  describe('getData', () => {
-    it('should return empty data when no mindmap is set', () => {
-      const result = db.getData();
-
-      expect(result.nodes).toEqual([]);
-      expect(result.edges).toEqual([]);
-      expect(result.config).toBeDefined();
-      expect(result.rootNode).toBeUndefined();
-    });
-
-    it('should return structured data for simple mindmap', () => {
-      // Create a simple mindmap structure
-      db.addNode(0, 'root', 'Root Node', 0);
-      db.addNode(1, 'child1', 'Child 1', 0);
-      db.addNode(1, 'child2', 'Child 2', 0);
-
-      const result = db.getData();
-
-      expect(result.nodes).toHaveLength(3);
-      expect(result.edges).toHaveLength(2);
-      expect(result.config).toBeDefined();
-      expect(result.rootNode).toBeDefined();
-
-      // Check root node
-      const rootNode = (result.nodes as MindmapLayoutNode[]).find((n) => n.id === '0');
-      expect(rootNode).toBeDefined();
-      expect(rootNode?.label).toBe('Root Node');
-      expect(rootNode?.level).toBe(0);
-
-      // Check child nodes
-      const child1 = (result.nodes as MindmapLayoutNode[]).find((n) => n.id === '1');
-      expect(child1).toBeDefined();
-      expect(child1?.label).toBe('Child 1');
-      expect(child1?.level).toBe(1);
-
-      // Check edges
-      expect(result.edges).toContainEqual(
-        expect.objectContaining({
-          start: '0',
-          end: '1',
-          depth: 0,
-        })
-      );
-    });
-
-    it('should return structured data for hierarchical mindmap', () => {
-      // Create a hierarchical mindmap structure
-      db.addNode(0, 'root', 'Root Node', 0);
-      db.addNode(1, 'child1', 'Child 1', 0);
-      db.addNode(2, 'grandchild1', 'Grandchild 1', 0);
-      db.addNode(2, 'grandchild2', 'Grandchild 2', 0);
-      db.addNode(1, 'child2', 'Child 2', 0);
-
-      const result = db.getData();
-
-      expect(result.nodes).toHaveLength(5);
-      expect(result.edges).toHaveLength(4);
-
-      // Check that all levels are represented
-      const levels = result.nodes.map((n) => (n as MindmapLayoutNode).level);
-      expect(levels).toContain(0); // root
-      expect(levels).toContain(1); // children
-      expect(levels).toContain(2); // grandchildren
-
-      // Check edge relationships
-      const edgeRelations = result.edges.map(
-        (e) => `${(e as MindmapLayoutEdge).start}->${(e as MindmapLayoutEdge).end}`
-      );
-      expect(edgeRelations).toContain('0->1'); // root to child1
-      expect(edgeRelations).toContain('1->2'); // child1 to grandchild1
-      expect(edgeRelations).toContain('1->3'); // child1 to grandchild2
-      expect(edgeRelations).toContain('0->4'); // root to child2
-    });
-
-    it('should preserve node properties in processed data', () => {
-      // Add a node with specific properties
-      db.addNode(0, 'root', 'Root Node', 2); // type 2 = rectangle
-
-      // Set additional properties
-      const mindmap = db.getMindmap();
-      if (mindmap) {
-        mindmap.width = 150;
-        mindmap.height = 75;
-        mindmap.padding = 15;
-        mindmap.section = 1;
-        mindmap.class = 'custom-class';
-        mindmap.icon = 'star';
-      }
-
-      const result = db.getData();
-
-      expect(result.nodes).toHaveLength(1);
-      const node = result.nodes[0] as MindmapLayoutNode;
-
-      expect(node.type).toBe(2);
-      expect(node.width).toBe(150);
-      expect(node.height).toBe(75);
-      expect(node.padding).toBe(15);
-      expect(node.section).toBeUndefined(); // Root node has undefined section
-      expect(node.cssClasses).toBe('mindmap-node section-root section--1 custom-class');
-      expect(node.icon).toBe('star');
-    });
-
-    it('should generate unique edge IDs', () => {
-      db.addNode(0, 'root', 'Root Node', 0);
-      db.addNode(1, 'child1', 'Child 1', 0);
-      db.addNode(1, 'child2', 'Child 2', 0);
-      db.addNode(1, 'child3', 'Child 3', 0);
-
-      const result = db.getData();
-
-      const edgeIds = result.edges.map((e: Edge) => e.id);
-      const uniqueIds = new Set(edgeIds);
-
-      expect(edgeIds).toHaveLength(3);
-      expect(uniqueIds.size).toBe(3); // All IDs should be unique
-    });
-
-    it('should handle nodes with missing optional properties', () => {
-      db.addNode(0, 'root', 'Root Node', 0);
-
-      const result = db.getData();
-      const node = result.nodes[0] as MindmapLayoutNode;
-
-      // Should handle undefined/missing properties gracefully
-      expect(node.section).toBeUndefined(); // Root node has undefined section
-      expect(node.cssClasses).toBe('mindmap-node section-root section--1'); // Root node gets special classes
-      expect(node.icon).toBeUndefined();
-      expect(node.x).toBeUndefined();
-      expect(node.y).toBeUndefined();
-    });
-
-    it('should assign correct section classes based on sibling position', () => {
-      // Create the example mindmap structure:
-      // A
-      //   a0
-      //     aa0
-      //   a1
-      //     aaa
-      //   a2
-      db.addNode(0, 'A', 'A', 0); // Root
-      db.addNode(1, 'a0', 'a0', 0); // First child of root
-      db.addNode(2, 'aa0', 'aa0', 0); // Child of a0
-      db.addNode(1, 'a1', 'a1', 0); // Second child of root
-      db.addNode(2, 'aaa', 'aaa', 0); // Child of a1
-      db.addNode(1, 'a2', 'a2', 0); // Third child of root
-
-      const result = db.getData();
-
-      // Find nodes by their labels
-      const nodeA = result.nodes.find((n) => n.label === 'A') as MindmapLayoutNode;
-      const nodeA0 = result.nodes.find((n) => n.label === 'a0') as MindmapLayoutNode;
-      const nodeAa0 = result.nodes.find((n) => n.label === 'aa0') as MindmapLayoutNode;
-      const nodeA1 = result.nodes.find((n) => n.label === 'a1') as MindmapLayoutNode;
-      const nodeAaa = result.nodes.find((n) => n.label === 'aaa') as MindmapLayoutNode;
-      const nodeA2 = result.nodes.find((n) => n.label === 'a2') as MindmapLayoutNode;
-
-      // Check section assignments
-      expect(nodeA.section).toBeUndefined(); // Root has undefined section
-      expect(nodeA0.section).toBe(0); // First child of root
-      expect(nodeAa0.section).toBe(0); // Inherits from parent a0
-      expect(nodeA1.section).toBe(1); // Second child of root
-      expect(nodeAaa.section).toBe(1); // Inherits from parent a1
-      expect(nodeA2.section).toBe(2); // Third child of root
-
-      // Check CSS classes
-      expect(nodeA.cssClasses).toBe('mindmap-node section-root section--1');
-      expect(nodeA0.cssClasses).toBe('mindmap-node section-0');
-      expect(nodeAa0.cssClasses).toBe('mindmap-node section-0');
-      expect(nodeA1.cssClasses).toBe('mindmap-node section-1');
-      expect(nodeAaa.cssClasses).toBe('mindmap-node section-1');
-      expect(nodeA2.cssClasses).toBe('mindmap-node section-2');
-    });
-
-    it('should preserve custom classes while adding section classes', () => {
-      db.addNode(0, 'root', 'Root Node', 0);
-      db.addNode(1, 'child', 'Child Node', 0);
-
-      // Add custom classes to nodes
-      const mindmap = db.getMindmap();
-      if (mindmap) {
-        mindmap.class = 'custom-root-class';
-        if (mindmap.children?.[0]) {
-          mindmap.children[0].class = 'custom-child-class';
-        }
-      }
-
-      const result = db.getData();
-      const rootNode = result.nodes.find((n) => n.label === 'Root Node') as MindmapLayoutNode;
-      const childNode = result.nodes.find((n) => n.label === 'Child Node') as MindmapLayoutNode;
-
-      // Should include both section classes and custom classes
-      expect(rootNode.cssClasses).toBe('mindmap-node section-root section--1 custom-root-class');
-      expect(childNode.cssClasses).toBe('mindmap-node section-0 custom-child-class');
-    });
-
-    it('should not create any fake root nodes', () => {
-      // Create a simple mindmap
-      db.addNode(0, 'A', 'A', 0);
-      db.addNode(1, 'a0', 'a0', 0);
-      db.addNode(1, 'a1', 'a1', 0);
-
-      const result = db.getData();
-
-      // Check that we only have the expected nodes
-      expect(result.nodes).toHaveLength(3);
-      expect(result.nodes.map((n) => n.label)).toEqual(['A', 'a0', 'a1']);
-
-      // Check that there's no node with label "mindmap" or any other fake root
-      const mindmapNode = result.nodes.find((n) => n.label === 'mindmap');
-      expect(mindmapNode).toBeUndefined();
-
-      // Verify the root node has the correct classes
-      const rootNode = result.nodes.find((n) => n.label === 'A') as MindmapLayoutNode;
-      expect(rootNode.cssClasses).toBe('mindmap-node section-root section--1');
-      expect(rootNode.level).toBe(0);
-    });
-
-    it('should assign correct section classes to edges', () => {
-      // Create the example mindmap structure:
-      // A
-      //   a0
-      //     aa0
-      //   a1
-      //     aaa
-      //   a2
-      db.addNode(0, 'A', 'A', 0); // Root
-      db.addNode(1, 'a0', 'a0', 0); // First child of root
-      db.addNode(2, 'aa0', 'aa0', 0); // Child of a0
-      db.addNode(1, 'a1', 'a1', 0); // Second child of root
-      db.addNode(2, 'aaa', 'aaa', 0); // Child of a1
-      db.addNode(1, 'a2', 'a2', 0); // Third child of root
-
-      const result = db.getData();
-
-      // Should have 5 edges: A->a0, a0->aa0, A->a1, a1->aaa, A->a2
-      expect(result.edges).toHaveLength(5);
-
-      // Find edges by their start and end nodes
-      const edgeA_a0 = result.edges.find(
-        (e) => e.start === '0' && e.end === '1'
-      ) as MindmapLayoutEdge;
-      const edgeA0_aa0 = result.edges.find(
-        (e) => e.start === '1' && e.end === '2'
-      ) as MindmapLayoutEdge;
-      const edgeA_a1 = result.edges.find(
-        (e) => e.start === '0' && e.end === '3'
-      ) as MindmapLayoutEdge;
-      const edgeA1_aaa = result.edges.find(
-        (e) => e.start === '3' && e.end === '4'
-      ) as MindmapLayoutEdge;
-      const edgeA_a2 = result.edges.find(
-        (e) => e.start === '0' && e.end === '5'
-      ) as MindmapLayoutEdge;
-
-      // Check edge classes
-      expect(edgeA_a0.classes).toBe('edge section-edge-0 edge-depth-1'); // A->a0: section-0, depth-1
-      expect(edgeA0_aa0.classes).toBe('edge section-edge-0 edge-depth-2'); // a0->aa0: section-0, depth-2
-      expect(edgeA_a1.classes).toBe('edge section-edge-1 edge-depth-1'); // A->a1: section-1, depth-1
-      expect(edgeA1_aaa.classes).toBe('edge section-edge-1 edge-depth-2'); // a1->aaa: section-1, depth-2
-      expect(edgeA_a2.classes).toBe('edge section-edge-2 edge-depth-1'); // A->a2: section-2, depth-1
-
-      // Check section assignments match the child nodes
-      expect(edgeA_a0.section).toBe(0);
-      expect(edgeA0_aa0.section).toBe(0);
-      expect(edgeA_a1.section).toBe(1);
-      expect(edgeA1_aaa.section).toBe(1);
-      expect(edgeA_a2.section).toBe(2);
-    });
-  });
-});

packages/mermaid/src/diagrams/mindmap/mindmapDb.ts

@@ -5,22 +5,6 @@ import { log } from '../../logger.js';
 import type { MindmapNode } from './mindmapTypes.js';
 import defaultConfig from '../../defaultConfig.js';
 
-import type { LayoutData, Node, Edge } from '../../rendering-util/types.js';
-
-// Extend Node type for mindmap-specific properties
-export type MindmapLayoutNode = Node & {
-  level: number;
-  nodeId: string;
-  type: number;
-  section?: number;
-};
-
-// Extend Edge type for mindmap-specific properties
-export type MindmapLayoutEdge = Edge & {
-  depth: number;
-  section?: number;
-};
-
 const nodeType = {
   DEFAULT: 0,
   NO_BORDER: 0,
@@ -43,6 +27,7 @@ export class MindmapDB {
     this.nodeType = nodeType;
     this.clear();
     this.getType = this.getType.bind(this);
+    this.getMindmap = this.getMindmap.bind(this);
     this.getElementById = this.getElementById.bind(this);
     this.getParent = this.getParent.bind(this);
     this.getMindmap = this.getMindmap.bind(this);
@@ -171,215 +156,6 @@ export class MindmapDB {
     }
   }
 
-  /**
-   * Assign section numbers to nodes based on their position relative to root
-   * @param node - The mindmap node to process
-   * @param sectionNumber - The section number to assign (undefined for root)
-   */
-  public assignSections(node: MindmapNode, sectionNumber?: number): void {
-    // For root node, section should be undefined (not -1)
-    if (node.level === 0) {
-      node.section = undefined;
-    } else {
-      // For non-root nodes, assign the section number
-      node.section = sectionNumber;
-    }
-    // For root node's children, assign section numbers based on their index
-    // For other nodes, inherit parent's section number
-    if (node.children) {
-      for (const [index, child] of node.children.entries()) {
-        const childSectionNumber = node.level === 0 ? index : sectionNumber;
-        this.assignSections(child, childSectionNumber);
-      }
-    }
-  }
-
-  /**
-   * Convert mindmap tree structure to flat array of nodes
-   * @param node - The mindmap node to process
-   * @param processedNodes - Array to collect processed nodes
-   */
-  public flattenNodes(node: MindmapNode, processedNodes: MindmapLayoutNode[]): void {
-    // Build CSS classes for the node
-    const cssClasses = ['mindmap-node'];
-
-    // Add section-specific classes
-    if (node.level === 0) {
-      // Root node gets special classes
-      cssClasses.push('section-root', 'section--1');
-    } else if (node.section !== undefined) {
-      // Child nodes get section class based on their section number
-      cssClasses.push(`section-${node.section}`);
-    }
-
-    // Add any custom classes from the node
-    if (node.class) {
-      cssClasses.push(node.class);
-    }
-
-    const classes = cssClasses.join(' ');
-
-    // Map mindmap node type to valid shape name
-    const getShapeFromType = (type: number) => {
-      switch (type) {
-        case nodeType.CIRCLE:
-          return 'circle';
-        case nodeType.RECT:
-          return 'rect';
-        case nodeType.ROUNDED_RECT:
-          return 'rounded';
-        case nodeType.CLOUD:
-          return 'cloud';
-        case nodeType.BANG:
-          return 'bang';
-        case nodeType.HEXAGON:
-          return 'hexagon';
-        case nodeType.DEFAULT:
-          return 'defaultMindmapNode';
-        case nodeType.NO_BORDER:
-        default:
-          return 'rect';
-      }
-    };
-
-    const processedNode: MindmapLayoutNode = {
-      id: node.id.toString(),
-      domId: 'node_' + node.id.toString(),
-      label: node.descr,
-      isGroup: false,
-      shape: getShapeFromType(node.type),
-      width: node.width,
-      height: node.height ?? 0,
-      padding: node.padding,
-      cssClasses: classes,
-      cssStyles: [],
-      look: 'default',
-      icon: node.icon,
-      x: node.x,
-      y: node.y,
-      // Mindmap-specific properties
-      level: node.level,
-      nodeId: node.nodeId,
-      type: node.type,
-      section: node.section,
-    };
-
-    processedNodes.push(processedNode);
-
-    // Recursively process children
-    if (node.children) {
-      for (const child of node.children) {
-        this.flattenNodes(child, processedNodes);
-      }
-    }
-  }
-
-  /**
-   * Generate edges from parent-child relationships in mindmap tree
-   * @param node - The mindmap node to process
-   * @param edges - Array to collect edges
-   */
-  public generateEdges(node: MindmapNode, edges: MindmapLayoutEdge[]): void {
-    if (!node.children) {
-      return;
-    }
-    for (const child of node.children) {
-      // Build CSS classes for the edge
-      let edgeClasses = 'edge';
-
-      // Add section-specific classes based on the child's section
-      if (child.section !== undefined) {
-        edgeClasses += ` section-edge-${child.section}`;
-      }
-
-      // Add depth class based on the parent's level + 1 (depth of the edge)
-      const edgeDepth = node.level + 1;
-      edgeClasses += ` edge-depth-${edgeDepth}`;
-
-      const edge: MindmapLayoutEdge = {
-        id: `edge_${node.id}_${child.id}`,
-        start: node.id.toString(),
-        end: child.id.toString(),
-        type: 'normal',
-        curve: 'basis',
-        thickness: 'normal',
-        look: 'default',
-        classes: edgeClasses,
-        // Store mindmap-specific data
-        depth: node.level,
-        section: child.section,
-      };
-
-      edges.push(edge);
-
-      // Recursively process child edges
-      this.generateEdges(child, edges);
-    }
-  }
-
-  /**
-   * Get structured data for layout algorithms
-   * Following the pattern established by ER diagrams
-   * @returns Structured data containing nodes, edges, and config
-   */
-  public getData(): LayoutData {
-    const mindmapRoot = this.getMindmap();
-    const config = getConfig();
-
-    if (!mindmapRoot) {
-      return {
-        nodes: [],
-        edges: [],
-        config,
-      };
-    }
-    log.debug('getData: mindmapRoot', mindmapRoot, config);
-
-    // Assign section numbers to all nodes based on their position relative to root
-    this.assignSections(mindmapRoot);
-
-    // Convert tree structure to flat arrays
-    const processedNodes: MindmapLayoutNode[] = [];
-    const processedEdges: MindmapLayoutEdge[] = [];
-
-    this.flattenNodes(mindmapRoot, processedNodes);
-    this.generateEdges(mindmapRoot, processedEdges);
-
-    log.debug(
-      `getData: processed ${processedNodes.length} nodes and ${processedEdges.length} edges`
-    );
-
-    // Create shapes map for ELK compatibility
-    const shapes = new Map<string, any>();
-    for (const node of processedNodes) {
-      shapes.set(node.id, {
-        shape: node.shape,
-        width: node.width,
-        height: node.height,
-        padding: node.padding,
-      });
-    }
-
-    return {
-      nodes: processedNodes,
-      edges: processedEdges,
-      config,
-      // Store the root node for mindmap-specific layout algorithms
-      rootNode: mindmapRoot,
-      // Properties required by dagre layout algorithm
-      markers: [], // Mindmaps don't use markers
-      direction: 'TB', // Top-to-bottom direction for mindmaps
-      nodeSpacing: 50, // Default spacing between nodes
-      rankSpacing: 50, // Default spacing between ranks
-      // Add shapes for ELK compatibility
-      shapes: Object.fromEntries(shapes),
-      // Additional properties that layout algorithms might expect
-      type: 'mindmap',
-      diagramId: 'mindmap-' + Date.now(),
-    };
-  }
-
-  // Expose logger to grammar
   public getLogger() {
     return log;
   }

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

@@ -1,94 +1,200 @@
+import cytoscape from 'cytoscape';
+// @ts-expect-error No types available
+import coseBilkent from 'cytoscape-cose-bilkent';
+import { select } from 'd3';
+import type { MermaidConfig } from '../../config.type.js';
 import { getConfig } from '../../diagram-api/diagramAPI.js';
 import type { DrawDefinition } from '../../diagram-api/types.js';
 import { log } from '../../logger.js';
-import { getDiagramElement } from '../../rendering-util/insertElementsForSize.js';
-import { getRegisteredLayoutAlgorithm, render } from '../../rendering-util/render.js';
-import { setupViewPortForSVG } from '../../rendering-util/setupViewPortForSVG.js';
-import type { LayoutData } from '../../rendering-util/types.js';
-import type { FilledMindMapNode } from './mindmapTypes.js';
-import { drawNode } from './svgDraw.js';
+import type { D3Element } from '../../types.js';
+import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
+import { setupGraphViewbox } from '../../setupGraphViewbox.js';
+import type { FilledMindMapNode, MindmapNode } from './mindmapTypes.js';
+import { drawNode, positionNode } from './svgDraw.js';
 import defaultConfig from '../../defaultConfig.js';
 import type { MindmapDB } from './mindmapDb.js';
+// Inject the layout algorithm into cytoscape
+cytoscape.use(coseBilkent);
 
-async function _drawNodes(
+async function drawNodes(
   db: MindmapDB,
-  svg: any,
+  svg: D3Element,
   mindmap: FilledMindMapNode,
   section: number,
-  conf: any
+  conf: MermaidConfig
 ) {
   await drawNode(db, svg, mindmap, section, conf);
   if (mindmap.children) {
     await Promise.all(
       mindmap.children.map((child, index) =>
-        _drawNodes(db, svg, child, section < 0 ? index : section, conf)
+        drawNodes(db, svg, child, section < 0 ? index : section, conf)
       )
     );
   }
 }
 
-/**
- * Update the layout data with actual node dimensions after drawing
- */
-function _updateNodeDimensions(data4Layout: LayoutData, mindmapRoot: FilledMindMapNode) {
-  const updateNode = (node: FilledMindMapNode) => {
-    // Find the corresponding node in the layout data
-    const layoutNode = data4Layout.nodes.find((n) => n.id === node.id.toString());
-    if (layoutNode) {
-      // Update with the actual dimensions calculated by drawNode
-      layoutNode.width = node.width;
-      layoutNode.height = node.height;
-      log.debug('Updated node dimensions:', node.id, 'width:', node.width, 'height:', node.height);
-    }
+declare module 'cytoscape' {
+  interface EdgeSingular {
+    _private: {
+      bodyBounds: unknown;
+      rscratch: {
+        startX: number;
+        startY: number;
+        midX: number;
+        midY: number;
+        endX: number;
+        endY: number;
+      };
+    };
+  }
+}
 
-    // Recursively update children
-    if (node.children) {
-      node.children.forEach(updateNode);
+function drawEdges(edgesEl: D3Element, cy: cytoscape.Core) {
+  cy.edges().map((edge, id) => {
+    const data = edge.data();
+    if (edge[0]._private.bodyBounds) {
+      const bounds = edge[0]._private.rscratch;
+      log.trace('Edge: ', id, data);
+      edgesEl
+        .insert('path')
+        .attr(
+          'd',
+          `M ${bounds.startX},${bounds.startY} L ${bounds.midX},${bounds.midY} L${bounds.endX},${bounds.endY} `
+        )
+        .attr('class', 'edge section-edge-' + data.section + ' edge-depth-' + data.depth);
     }
-  };
+  });
+}
 
-  updateNode(mindmapRoot);
+function addNodes(mindmap: MindmapNode, cy: cytoscape.Core, conf: MermaidConfig, level: number) {
+  cy.add({
+    group: 'nodes',
+    data: {
+      id: mindmap.id.toString(),
+      labelText: mindmap.descr,
+      height: mindmap.height,
+      width: mindmap.width,
+      level: level,
+      nodeId: mindmap.id,
+      padding: mindmap.padding,
+      type: mindmap.type,
+    },
+    position: {
+      x: mindmap.x!,
+      y: mindmap.y!,
+    },
+  });
+  if (mindmap.children) {
+    mindmap.children.forEach((child) => {
+      addNodes(child, cy, conf, level + 1);
+      cy.add({
+        group: 'edges',
+        data: {
+          id: `${mindmap.id}_${child.id}`,
+          source: mindmap.id,
+          target: child.id,
+          depth: level,
+          section: child.section,
+        },
+      });
+    });
+  }
+}
+
+function layoutMindmap(node: MindmapNode, conf: MermaidConfig): Promise<cytoscape.Core> {
+  return new Promise((resolve) => {
+    // Add temporary render element
+    const renderEl = select('body').append('div').attr('id', 'cy').attr('style', 'display:none');
+    const cy = cytoscape({
+      container: document.getElementById('cy'), // container to render in
+      style: [
+        {
+          selector: 'edge',
+          style: {
+            'curve-style': 'bezier',
+          },
+        },
+      ],
+    });
+    // Remove element after layout
+    renderEl.remove();
+    addNodes(node, cy, conf, 0);
+
+    // Make cytoscape care about the dimensions of the nodes
+    cy.nodes().forEach(function (n) {
+      n.layoutDimensions = () => {
+        const data = n.data();
+        return { w: data.width, h: data.height };
+      };
+    });
+
+    cy.layout({
+      name: 'cose-bilkent',
+      // @ts-ignore Types for cose-bilkent are not correct?
+      quality: 'proof',
+      styleEnabled: false,
+      animate: false,
+    }).run();
+    cy.ready((e) => {
+      log.info('Ready', e);
+      resolve(cy);
+    });
+  });
+}
+
+function positionNodes(db: MindmapDB, cy: cytoscape.Core) {
+  cy.nodes().map((node, id) => {
+    const data = node.data();
+    data.x = node.position().x;
+    data.y = node.position().y;
+    positionNode(db, data);
+    const el = db.getElementById(data.nodeId);
+    log.info('id:', id, 'Position: (', node.position().x, ', ', node.position().y, ')', data);
+    el.attr(
+      'transform',
+      `translate(${node.position().x - data.width / 2}, ${node.position().y - data.height / 2})`
+    );
+    el.attr('attr', `apa-${id})`);
+  });
 }
 
 export const draw: DrawDefinition = async (text, id, _version, diagObj) => {
   log.debug('Rendering mindmap diagram\n' + text);
-  const { securityLevel, mindmap: conf, layout } = getConfig();
 
-  // Draw the nodes first to get their dimensions, then update the layout data
   const db = diagObj.db as MindmapDB;
-
-  // The getData method provided in all supported diagrams is used to extract the data from the parsed structure
-  // into the Layout data format
-  const data4Layout = db.getData();
-
-  // Create the root SVG - the element is the div containing the SVG element
-  const svg = getDiagramElement(id, securityLevel);
-
-  data4Layout.type = diagObj.type;
-  data4Layout.layoutAlgorithm = getRegisteredLayoutAlgorithm(layout, {
-    fallback: 'cose-bilkent',
-  });
-  // For mindmap diagrams, prioritize mindmap-specific layout algorithm configuration
-
-  data4Layout.diagramId = id;
-
-  // Ensure required properties are set for compatibility with different layout algorithms
-  data4Layout.markers = ['point'];
-  data4Layout.direction = 'TB';
-
   const mm = db.getMindmap();
   if (!mm) {
     return;
   }
 
-  // Use the unified rendering system
-  await render(data4Layout, svg);
+  const conf = getConfig();
+  conf.htmlLabels = false;
+
+  const svg = selectSvgElement(id);
+
+  // Draw the graph and start with drawing the nodes without proper position
+  // this gives us the size of the nodes and we can set the positions later
+
+  const edgesElem = svg.append('g');
+  edgesElem.attr('class', 'mindmap-edges');
+  const nodesElem = svg.append('g');
+  nodesElem.attr('class', 'mindmap-nodes');
+  await drawNodes(db, nodesElem, mm as FilledMindMapNode, -1, conf);
+
+  // Next step is to layout the mindmap, giving each node a position
+
+  const cy = await layoutMindmap(mm, conf);
+
+  // After this we can draw, first the edges and the then nodes with the correct position
+  drawEdges(edgesElem, cy);
+  positionNodes(db, cy);
+
   // Setup the view box and size of the svg element
-  setupViewPortForSVG(
+  setupGraphViewbox(
+    undefined,
     svg,
-    conf?.padding ?? defaultConfig.mindmap.padding,
-    'mindmapDiagram',
-    conf?.useMaxWidth ?? defaultConfig.mindmap.useMaxWidth
+    conf.mindmap?.padding ?? defaultConfig.mindmap.padding,
+    conf.mindmap?.useMaxWidth ?? defaultConfig.mindmap.useMaxWidth
   );
 };
 

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

@@ -64,9 +64,6 @@ const getStyles: DiagramStylesProvider = (options) =>
   .section-root text {
     fill: ${options.gitBranchLabel0};
   }
-  .section-root span {
-    color: ${options.gitBranchLabel0};
-  }
   .icon-container {
     height:100%;
     display: flex;

packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js

@@ -1368,7 +1368,7 @@ link a: Tests @ https://tests.contoso.com/?svc=alice@contoso.com
   it('should handle box without description', async () => {
     const diagram = await Diagram.fromText(`
   sequenceDiagram
-  box aqua
+  box Aqua
   participant a as Alice
   participant b as Bob
   end
@@ -1384,7 +1384,7 @@ link a: Tests @ https://tests.contoso.com/?svc=alice@contoso.com
     const boxes = diagram.db.getBoxes();
     expect(boxes[0].name).toBeFalsy();
     expect(boxes[0].actorKeys).toEqual(['a', 'b']);
-    expect(boxes[0].fill).toEqual('aqua');
+    expect(boxes[0].fill).toEqual('Aqua');
   });
 
   it('should handle simple actor creation', async () => {

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

@@ -203,7 +203,6 @@ function sidebarConfig() {
         { text: 'Accessibility', link: '/config/accessibility' },
         { text: 'Mermaid CLI', link: '/config/mermaidCLI' },
         { text: 'FAQ', link: '/config/faq' },
-        { text: 'Tidy tree layout Instructions', link: '/config/tidy-tree' },
       ],
     },
   ];

packages/mermaid/src/docs/config/directives.md

@@ -17,6 +17,7 @@ While directives allow you to change most of the default configuration settings,
 Mermaid basically supports two types of configuration options to be overridden by directives.
 
 1. _General/Top Level configurations_ : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are:
+
    - theme
    - fontFamily
    - logLevel

packages/mermaid/src/docs/config/tidy-tree.md

@@ -1,57 +0,0 @@
-# Tidy-tree Layout Instructions
-
-Instructions to use the Tidy-tree layout algorithm.
-
-## Getting Started
-
-### Installation
-
-```bash
-npm install non-layered-tidy-tree-layout
-# or
-yarn add non-layered-tidy-tree-layout
-
-```
-
-There's also a built version: `dist/non-layered-tidy-tree-layout.js` for use with browser `<script>` tag, or as a Javascript module.
-
-## Tidy tree Layouts
-
-Mermaid also supports a Tidy Tree layout for mindmaps.
-
-```
----
-config:
-  layout: tidy-tree
----
-mindmap
-root((mindmap is a long thing))
-  A
-  B
-  C
-  D
-```
-
-### With bundlers
-
-```sh
-npm install @mermaid-js/layout-tidy-tree
-```
-
-```ts
-import mermaid from 'mermaid';
-import tidyTreeLayouts from '@mermaid-js/layout-tidy-tree';
-
-mermaid.registerLayoutLoaders(tidyTreeLayouts);
-```
-
-### With CDN
-
-```html
-<script type="module">
-  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
-  import tidyTreeLayouts from 'https://cdn.jsdelivr.net/npm/@mermaid-js/layout-tidy-tree@0/dist/mermaid-layout-tidy-tree.esm.min.mjs';
-
-  mermaid.registerLayoutLoaders(tidyTreeLayouts);
-</script>
-```

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

@@ -112,7 +112,7 @@ Content Management Systems/Enterprise Content Management
 - [Grav CMS](https://getgrav.org/)
   - [Mermaid Diagrams Plugin](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams)
   - [GitLab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
-- [Tiki](https://tiki.org)
+- [Tiki Wiki CMS Groupware](https://tiki.org)
   - [Tracker Entity Relationship Diagram](https://doc.tiki.org/Tracker-Entity-Relationship-Diagram)
 - [VitePress](https://vitepress.vuejs.org/)
   - [Plugin for Mermaid.js](https://emersonbottero.github.io/vitepress-plugin-mermaid/)

packages/mermaid/src/docs/ecosystem/mermaid-chart.md

@@ -23,6 +23,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun
 - **Plugins** - A plugin system for extending the functionality of Mermaid.
 
   Official Mermaid Chart plugins:
+
   - [Mermaid Chart GPT](https://chatgpt.com/g/g-684cc36f30208191b21383b88650a45d-mermaid-chart-diagrams-and-charts)
   - [Confluence](https://marketplace.atlassian.com/apps/1234056/mermaid-chart-for-confluence?hosting=cloud&tab=overview)
   - [Jira](https://marketplace.atlassian.com/apps/1234810/mermaid-chart-for-jira?tab=overview&hosting=cloud)

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

@@ -33,11 +33,13 @@ The Mermaid Chart team is excited to introduce a new Visual Editor for Flowchart
 Learn more:
 
 - Visual Editor For Flowcharts
+
   - [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-releases-new-visual-editor-for-flowcharts)
 
   - [Demo video](https://www.youtube.com/watch?v=5aja0gijoO0)
 
 - Visual Editor For Sequence diagrams
+
   - [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-unveils-visual-editor-for-sequence-diagrams)
 
   - [Demo video](https://youtu.be/imc2u5_N6Dc)

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

@@ -83,6 +83,7 @@ The following unfinished features are not supported in the short term.
 - [ ] Legend
 
 - [x] System Context
+
   - [x] Person(alias, label, ?descr, ?sprite, ?tags, $link)
   - [x] Person_Ext
   - [x] System(alias, label, ?descr, ?sprite, ?tags, $link)
@@ -96,6 +97,7 @@ The following unfinished features are not supported in the short term.
   - [x] System_Boundary
 
 - [x] Container diagram
+
   - [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
   - [x] ContainerDb
   - [x] ContainerQueue
@@ -105,6 +107,7 @@ The following unfinished features are not supported in the short term.
   - [x] Container_Boundary(alias, label, ?tags, $link)
 
 - [x] Component diagram
+
   - [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
   - [x] ComponentDb
   - [x] ComponentQueue
@@ -113,15 +116,18 @@ The following unfinished features are not supported in the short term.
   - [x] ComponentQueue_Ext
 
 - [x] Dynamic diagram
+
   - [x] RelIndex(index, from, to, label, ?tags, $link)
 
 - [x] Deployment diagram
+
   - [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
   - [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node()
   - [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()
   - [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()
 
 - [x] Relationship Types
+
   - [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
   - [x] BiRel (bidirectional relationship)
   - [x] Rel_U, Rel_Up

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

@@ -209,22 +209,3 @@ You can also refer the [implementation in the live editor](https://github.com/me
 cspell:locale en,en-gb
 cspell:ignore Buzan
 --->
-
-## Layouts
-
-Mermaid also supports a Tidy Tree layout for mindmaps.
-
-```
----
-config:
-  layout: tidy-tree
----
-mindmap
-root((mindmap is a long thing))
-  A
-  B
-  C
-  D
-```
-
-Instructions to add and register tidy-tree layout are present in [Tidy Tree Configuration](/config/tidy-tree)

packages/mermaid/src/preprocess.ts

@@ -1,5 +1,4 @@
 import { cleanupComments } from './diagram-api/comments.js';
-import { detectType } from './diagram-api/detectType.js';
 import { extractFrontMatter } from './diagram-api/frontmatter.js';
 import type { DiagramMetadata } from './diagram-api/types.js';
 import utils, { cleanAndMerge, removeDirectives } from './utils.js';
@@ -19,7 +18,6 @@ const cleanupText = (code: string) => {
 
 const processFrontmatter = (code: string) => {
   const { text, metadata } = extractFrontMatter(code);
-  const diagramType = detectType(text);
   const { displayMode, title, config = {} } = metadata;
   if (displayMode) {
     // Needs to be supported for legacy reasons
@@ -28,9 +26,6 @@ const processFrontmatter = (code: string) => {
     }
     config.gantt.displayMode = displayMode;
   }
-  if (diagramType === 'mindmap' && !config.layout) {
-    config.layout = 'tidy-tree';
-  }
   return { title, config, text };
 };
 

packages/mermaid/src/rendering-util/createGraph.ts

@@ -1,148 +0,0 @@
-import { insertNode } from './rendering-elements/nodes.js';
-import type { LayoutData, NonClusterNode } from './types.ts';
-import type { Selection } from 'd3';
-import { getConfig } from '../diagram-api/diagramAPI.js';
-import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
-
-// Update type:
-type D3Selection<T extends SVGElement = SVGElement> = Selection<
-  T,
-  unknown,
-  Element | null,
-  unknown
->;
-
-/**
- * Creates a  graph by merging the graph construction and DOM element insertion.
- *
- * This function creates the graph, inserts the SVG groups (clusters, edgePaths, edgeLabels, nodes)
- * into the provided element, and uses `insertNode` to add nodes to the diagram. Node dimensions
- * are computed using each node's bounding box.
- *
- * @param element - The D3 selection in which the SVG groups are inserted.
- * @param data4Layout - The layout data containing nodes and edges.
- * @returns A promise resolving to an object containing the Graphology graph and the inserted groups.
- */
-export async function createGraphWithElements(
-  element: D3Selection,
-  data4Layout: LayoutData
-): Promise<{
-  graph: graphlib.Graph;
-  groups: {
-    clusters: D3Selection<SVGGElement>;
-    edgePaths: D3Selection<SVGGElement>;
-    edgeLabels: D3Selection<SVGGElement>;
-    nodes: D3Selection<SVGGElement>;
-    rootGroups: D3Selection<SVGGElement>;
-  };
-  nodeElements: Map<string, D3Selection<SVGElement | SVGGElement>>;
-}> {
-  // Create a directed, multi graph.
-  const graph = new graphlib.Graph({
-    multigraph: true,
-    compound: true,
-  });
-  const edgesToProcess = [...data4Layout.edges];
-  const config = getConfig();
-  // Create groups for clusters, edge paths, edge labels, and nodes.
-  const clusters = element.insert('g').attr('class', 'clusters');
-  const edgePaths = element.insert('g').attr('class', 'edges edgePath');
-  const edgeLabels = element.insert('g').attr('class', 'edgeLabels');
-  const nodesGroup = element.insert('g').attr('class', 'nodes');
-  const rootGroups = element.insert('g').attr('class', 'root');
-
-  const nodeElements = new Map<string, D3Selection<SVGElement | SVGGElement>>();
-
-  // Insert nodes into the DOM and add them to the graph.
-  await Promise.all(
-    data4Layout.nodes.map(async (node) => {
-      if (node.isGroup) {
-        graph.setNode(node.id, { ...node });
-      } else {
-        const childNodeEl = await insertNode(nodesGroup, node, { config, dir: node.dir });
-        const boundingBox = childNodeEl.node()?.getBBox() ?? { width: 0, height: 0 };
-        nodeElements.set(node.id, childNodeEl as D3Selection<SVGElement | SVGGElement>);
-        node.width = boundingBox.width;
-        node.height = boundingBox.height;
-        graph.setNode(node.id, { ...node });
-      }
-    })
-  );
-  // Add edges to the graph.
-  for (const edge of edgesToProcess) {
-    if (edge.label && edge.label?.length > 0) {
-      // Create a label node for the edge
-      const labelNodeId = `edge-label-${edge.start}-${edge.end}-${edge.id}`;
-      const labelNode = {
-        id: labelNodeId,
-        label: edge.label,
-        edgeStart: edge.start,
-        edgeEnd: edge.end,
-        shape: 'labelRect',
-        width: 0, // Will be updated after insertion
-        height: 0, // Will be updated after insertion
-        isEdgeLabel: true,
-        isDummy: true,
-        isGroup: false,
-        parentId: edge.parentId,
-        ...(edge.dir ? { dir: edge.dir } : {}),
-      } as NonClusterNode;
-
-      // Insert the label node into the DOM
-      const labelNodeEl = await insertNode(nodesGroup, labelNode, { config, dir: edge.dir });
-      const boundingBox = labelNodeEl.node()?.getBBox() ?? { width: 0, height: 0 };
-
-      // Update node dimensions
-      labelNode.width = boundingBox.width;
-      labelNode.height = boundingBox.height;
-
-      // Add to graph and tracking maps
-      graph.setNode(labelNodeId, { ...labelNode });
-      nodeElements.set(labelNodeId, labelNodeEl as D3Selection<SVGElement | SVGGElement>);
-      data4Layout.nodes.push(labelNode);
-
-      // Create two edges to replace the original one
-      const edgeToLabel = {
-        ...edge,
-        id: `${edge.id}-to-label`,
-        end: labelNodeId,
-        label: undefined,
-        isLabelEdge: true,
-        arrowTypeEnd: 'none',
-        arrowTypeStart: 'none',
-      };
-      const edgeFromLabel = {
-        ...edge,
-        id: `${edge.id}-from-label`,
-        start: labelNodeId,
-        end: edge.end,
-        label: undefined,
-        isLabelEdge: true,
-        arrowTypeStart: 'none',
-        arrowTypeEnd: 'arrow_point',
-      };
-      graph.setEdge(edgeToLabel.id, edgeToLabel.start, edgeToLabel.end, { ...edgeToLabel });
-      graph.setEdge(edgeFromLabel.id, edgeFromLabel.start, edgeFromLabel.end, { ...edgeFromLabel });
-      data4Layout.edges.push(edgeToLabel, edgeFromLabel);
-      const edgeIdToRemove = edge.id;
-      data4Layout.edges = data4Layout.edges.filter((edge) => edge.id !== edgeIdToRemove);
-      const indexInOriginal = data4Layout.edges.findIndex((e) => e.id === edge.id);
-      if (indexInOriginal !== -1) {
-        data4Layout.edges.splice(indexInOriginal, 1);
-      }
-    } else {
-      // Regular edge without label
-      graph.setEdge(edge.id, edge.start, edge.end, { ...edge });
-      const edgeExists = data4Layout.edges.some((existingEdge) => existingEdge.id === edge.id);
-      if (!edgeExists) {
-        data4Layout.edges.push(edge);
-      }
-    }
-  }
-
-  return {
-    graph,
-    groups: { clusters, edgePaths, edgeLabels, nodes: nodesGroup, rootGroups },
-    nodeElements,
-  };
-}

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

@@ -285,7 +285,11 @@ test('markdownToHTML - Unsupported formatting', () => {
   - l1
   - l2
   - l3`)
-  ).toMatchInlineSnapshot('"<p>Hello</p>Unsupported markdown: list"');
+  ).toMatchInlineSnapshot(`
+    "<p>Hello</p>  - l1
+      - l2
+      - l3"
+  `);
 });
 
 test('markdownToHTML - no auto wrapping', () => {

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

@@ -3,6 +3,7 @@ import { marked } from 'marked';
 import { dedent } from 'ts-dedent';
 import type { MarkdownLine, MarkdownWordType } from './types.js';
 import type { MermaidConfig } from '../config.type.js';
+import { log } from '../logger.js';
 
 /**
  * @param markdown - markdown to process
@@ -61,6 +62,8 @@ export function markdownToLines(markdown: string, config: MermaidConfig = {}): M
       });
     } else if (treeNode.type === 'html') {
       lines[currentLine].push({ content: treeNode.text, type: 'normal' });
+    } else {
+      lines[currentLine].push({ content: treeNode.raw, type: 'normal' });
     }
   });
 
@@ -89,7 +92,8 @@ export function markdownToHTML(markdown: string, { markdownAutoWrap }: MermaidCo
     } else if (node.type === 'escape') {
       return node.text;
     }
-    return `Unsupported markdown: ${node.type}`;
+    log.warn(`Unsupported markdown: ${node.type}`);
+    return node.raw;
   }
 
   return nodes.map(output).join('');

packages/mermaid/src/rendering-util/layout-algorithms/cose-bilkent/cytoscape-setup.test.ts

@@ -1,269 +0,0 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import {
-  addNodes,
-  addEdges,
-  extractPositionedNodes,
-  extractPositionedEdges,
-} from './cytoscape-setup.js';
-import type { Node, Edge } from '../../types.js';
-
-// Mock cytoscape
-const mockCy = {
-  add: vi.fn(),
-  nodes: vi.fn(),
-  edges: vi.fn(),
-};
-
-vi.mock('cytoscape', () => {
-  const mockCytoscape = vi.fn(() => mockCy) as any;
-  mockCytoscape.use = vi.fn();
-  return {
-    default: mockCytoscape,
-  };
-});
-
-vi.mock('cytoscape-cose-bilkent', () => ({
-  default: vi.fn(),
-}));
-
-describe('Cytoscape Setup', () => {
-  let mockNodes: Node[];
-  let mockEdges: Edge[];
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-
-    mockNodes = [
-      {
-        id: '1',
-        label: 'Root',
-        isGroup: false,
-        shape: 'rect',
-        width: 100,
-        height: 50,
-        padding: 10,
-        x: 100,
-        y: 100,
-        cssClasses: '',
-        cssStyles: [],
-        look: 'default',
-      },
-      {
-        id: '2',
-        label: 'Child 1',
-        isGroup: false,
-        shape: 'rect',
-        width: 80,
-        height: 40,
-        padding: 10,
-        x: 150,
-        y: 150,
-        cssClasses: '',
-        cssStyles: [],
-        look: 'default',
-      },
-    ];
-
-    mockEdges = [
-      {
-        id: '1_2',
-        start: '1',
-        end: '2',
-        type: 'edge',
-        classes: '',
-        style: [],
-        animate: false,
-        arrowTypeEnd: 'arrow_point',
-        arrowTypeStart: 'none',
-      },
-    ];
-  });
-
-  describe('addNodes', () => {
-    it('should add nodes to cytoscape', () => {
-      addNodes([mockNodes[0]], mockCy as unknown as any);
-
-      expect(mockCy.add).toHaveBeenCalledWith({
-        group: 'nodes',
-        data: {
-          id: '1',
-          labelText: 'Root',
-          height: 50,
-          width: 100,
-          padding: 10,
-          isGroup: false,
-          shape: 'rect',
-          cssClasses: '',
-          cssStyles: [],
-          look: 'default',
-        },
-        position: {
-          x: 100,
-          y: 100,
-        },
-      });
-    });
-
-    it('should add multiple nodes to cytoscape', () => {
-      addNodes(mockNodes, mockCy as unknown as any);
-
-      expect(mockCy.add).toHaveBeenCalledTimes(2);
-
-      expect(mockCy.add).toHaveBeenCalledWith({
-        group: 'nodes',
-        data: {
-          id: '1',
-          labelText: 'Root',
-          height: 50,
-          width: 100,
-          padding: 10,
-          isGroup: false,
-          shape: 'rect',
-          cssClasses: '',
-          cssStyles: [],
-          look: 'default',
-        },
-        position: {
-          x: 100,
-          y: 100,
-        },
-      });
-
-      expect(mockCy.add).toHaveBeenCalledWith({
-        group: 'nodes',
-        data: {
-          id: '2',
-          labelText: 'Child 1',
-          height: 40,
-          width: 80,
-          padding: 10,
-          isGroup: false,
-          shape: 'rect',
-          cssClasses: '',
-          cssStyles: [],
-          look: 'default',
-        },
-        position: {
-          x: 150,
-          y: 150,
-        },
-      });
-    });
-  });
-
-  describe('addEdges', () => {
-    it('should add edges to cytoscape', () => {
-      addEdges(mockEdges, mockCy as unknown as any);
-
-      expect(mockCy.add).toHaveBeenCalledWith({
-        group: 'edges',
-        data: {
-          id: '1_2',
-          source: '1',
-          target: '2',
-          type: 'edge',
-          classes: '',
-          style: [],
-          animate: false,
-          arrowTypeEnd: 'arrow_point',
-          arrowTypeStart: 'none',
-        },
-      });
-    });
-  });
-
-  describe('extractPositionedNodes', () => {
-    it('should extract positioned nodes from cytoscape', () => {
-      const mockCytoscapeNodes = [
-        {
-          data: () => ({
-            id: '1',
-            labelText: 'Root',
-            width: 100,
-            height: 50,
-            padding: 10,
-            isGroup: false,
-            shape: 'rect',
-          }),
-          position: () => ({ x: 100, y: 100 }),
-        },
-        {
-          data: () => ({
-            id: '2',
-            labelText: 'Child 1',
-            width: 80,
-            height: 40,
-            padding: 10,
-            isGroup: false,
-            shape: 'rect',
-          }),
-          position: () => ({ x: 150, y: 150 }),
-        },
-      ];
-
-      mockCy.nodes.mockReturnValue({
-        map: (fn: unknown) => mockCytoscapeNodes.map(fn as any),
-      });
-
-      const result = extractPositionedNodes(mockCy as unknown as any);
-
-      expect(result).toHaveLength(2);
-      expect(result[0]).toEqual({
-        id: '1',
-        x: 100,
-        y: 100,
-        labelText: 'Root',
-        width: 100,
-        height: 50,
-        padding: 10,
-        isGroup: false,
-        shape: 'rect',
-      });
-    });
-  });
-
-  describe('extractPositionedEdges', () => {
-    it('should extract positioned edges from cytoscape', () => {
-      const mockCytoscapeEdges = [
-        {
-          data: () => ({
-            id: '1_2',
-            source: '1',
-            target: '2',
-            type: 'edge',
-          }),
-          _private: {
-            rscratch: {
-              startX: 100,
-              startY: 100,
-              midX: 125,
-              midY: 125,
-              endX: 150,
-              endY: 150,
-            },
-          },
-        },
-      ];
-
-      mockCy.edges.mockReturnValue({
-        map: (fn: unknown) => mockCytoscapeEdges.map(fn as any),
-      });
-
-      const result = extractPositionedEdges(mockCy as unknown as any);
-
-      expect(result).toHaveLength(1);
-      expect(result[0]).toEqual({
-        id: '1_2',
-        source: '1',
-        target: '2',
-        type: 'edge',
-        startX: 100,
-        startY: 100,
-        midX: 125,
-        midY: 125,
-        endX: 150,
-        endY: 150,
-      });
-    });
-  });
-});

packages/mermaid/src/rendering-util/layout-algorithms/cose-bilkent/cytoscape-setup.ts

@@ -1,207 +0,0 @@
-import cytoscape from 'cytoscape';
-import coseBilkent from 'cytoscape-cose-bilkent';
-import { select } from 'd3';
-import { log } from '../../../logger.js';
-import type { LayoutData, Node, Edge } from '../../types.js';
-import type { CytoscapeLayoutConfig, PositionedNode, PositionedEdge } from './types.js';
-
-// Inject the layout algorithm into cytoscape
-cytoscape.use(coseBilkent);
-
-/**
- * Declare module augmentation for cytoscape edge types
- */
-declare module 'cytoscape' {
-  interface EdgeSingular {
-    _private: {
-      bodyBounds: unknown;
-      rscratch: {
-        startX: number;
-        startY: number;
-        midX: number;
-        midY: number;
-        endX: number;
-        endY: number;
-      };
-    };
-  }
-}
-
-/**
- * Add nodes to cytoscape instance from provided node array
- * This function processes only the nodes provided in the data structure
- * @param nodes - Array of nodes to add
- * @param cy - The cytoscape instance
- */
-export function addNodes(nodes: Node[], cy: cytoscape.Core): void {
-  nodes.forEach((node) => {
-    const nodeData: Record<string, unknown> = {
-      id: node.id,
-      labelText: node.label,
-      height: node.height,
-      width: node.width,
-      padding: node.padding ?? 0,
-    };
-
-    // Add any additional properties from the node
-    Object.keys(node).forEach((key) => {
-      if (!['id', 'label', 'height', 'width', 'padding', 'x', 'y'].includes(key)) {
-        nodeData[key] = (node as unknown as Record<string, unknown>)[key];
-      }
-    });
-
-    cy.add({
-      group: 'nodes',
-      data: nodeData,
-      position: {
-        x: node.x ?? 0,
-        y: node.y ?? 0,
-      },
-    });
-  });
-}
-
-/**
- * Add edges to cytoscape instance from provided edge array
- * This function processes only the edges provided in the data structure
- * @param edges - Array of edges to add
- * @param cy - The cytoscape instance
- */
-export function addEdges(edges: Edge[], cy: cytoscape.Core): void {
-  edges.forEach((edge) => {
-    const edgeData: Record<string, unknown> = {
-      id: edge.id,
-      source: edge.start,
-      target: edge.end,
-    };
-
-    // Add any additional properties from the edge
-    Object.keys(edge).forEach((key) => {
-      if (!['id', 'start', 'end'].includes(key)) {
-        edgeData[key] = (edge as unknown as Record<string, unknown>)[key];
-      }
-    });
-
-    cy.add({
-      group: 'edges',
-      data: edgeData,
-    });
-  });
-}
-
-/**
- * Create and configure cytoscape instance
- * @param data - Layout data containing nodes and edges
- * @returns Promise resolving to configured cytoscape instance
- */
-export function createCytoscapeInstance(data: LayoutData): Promise<cytoscape.Core> {
-  return new Promise((resolve) => {
-    // Add temporary render element
-    const renderEl = select('body').append('div').attr('id', 'cy').attr('style', 'display:none');
-
-    const cy = cytoscape({
-      container: document.getElementById('cy'), // container to render in
-      style: [
-        {
-          selector: 'edge',
-          style: {
-            'curve-style': 'bezier',
-          },
-        },
-      ],
-    });
-
-    // Remove element after layout
-    renderEl.remove();
-
-    // Add all nodes and edges to cytoscape using the generic functions
-    addNodes(data.nodes, cy);
-    addEdges(data.edges, cy);
-
-    // Make cytoscape care about the dimensions of the nodes
-    cy.nodes().forEach(function (n) {
-      n.layoutDimensions = () => {
-        const nodeData = n.data();
-        return { w: nodeData.width, h: nodeData.height };
-      };
-    });
-
-    // Configure and run the cose-bilkent layout
-    const layoutConfig: CytoscapeLayoutConfig = {
-      name: 'cose-bilkent',
-      // @ts-ignore Types for cose-bilkent are not correct?
-      quality: 'proof',
-      styleEnabled: false,
-      animate: false,
-    };
-
-    cy.layout(layoutConfig).run();
-
-    cy.ready((e) => {
-      log.info('Cytoscape ready', e);
-      resolve(cy);
-    });
-  });
-}
-
-/**
- * Extract positioned nodes from cytoscape instance
- * @param cy - The cytoscape instance after layout
- * @returns Array of positioned nodes
- */
-export function extractPositionedNodes(cy: cytoscape.Core): PositionedNode[] {
-  return cy.nodes().map((node) => {
-    const data = node.data();
-    const position = node.position();
-
-    // Create a positioned node with all original data plus position
-    const positionedNode: PositionedNode = {
-      id: data.id,
-      x: position.x,
-      y: position.y,
-    };
-
-    // Add all other properties from the original data
-    Object.keys(data).forEach((key) => {
-      if (key !== 'id') {
-        positionedNode[key] = data[key];
-      }
-    });
-
-    return positionedNode;
-  });
-}
-
-/**
- * Extract positioned edges from cytoscape instance
- * @param cy - The cytoscape instance after layout
- * @returns Array of positioned edges
- */
-export function extractPositionedEdges(cy: cytoscape.Core): PositionedEdge[] {
-  return cy.edges().map((edge) => {
-    const data = edge.data();
-    const rscratch = edge._private.rscratch;
-
-    // Create a positioned edge with all original data plus position
-    const positionedEdge: PositionedEdge = {
-      id: data.id,
-      source: data.source,
-      target: data.target,
-      startX: rscratch.startX,
-      startY: rscratch.startY,
-      midX: rscratch.midX,
-      midY: rscratch.midY,
-      endX: rscratch.endX,
-      endY: rscratch.endY,
-    };
-
-    // Add all other properties from the original data
-    Object.keys(data).forEach((key) => {
-      if (!['id', 'source', 'target'].includes(key)) {
-        positionedEdge[key] = data[key];
-      }
-    });
-
-    return positionedEdge;
-  });
-}

packages/mermaid/src/rendering-util/layout-algorithms/cose-bilkent/index.ts

@@ -1,25 +0,0 @@
-import { render as renderWithCoseBilkent } from './render.js';
-
-/**
- * Cose-Bilkent Layout Algorithm for Generic Diagrams
- *
- * This module provides a layout algorithm implementation using Cytoscape
- * with the cose-bilkent algorithm for positioning nodes and edges.
- *
- * The algorithm follows the unified rendering pattern and can be used
- * by any diagram type that provides compatible LayoutData.
- */
-
-/**
- * Render function for the cose-bilkent layout algorithm
- *
- * This function follows the unified rendering pattern used by all layout algorithms.
- * It takes LayoutData, inserts nodes into DOM, runs the cose-bilkent layout algorithm,
- * and renders the positioned elements to the SVG.
- *
- * @param layoutData - Layout data containing nodes, edges, and configuration
- * @param svg - SVG element to render to
- * @param helpers - Internal helper functions for rendering
- * @param options - Rendering options
- */
-export const render = renderWithCoseBilkent;

packages/mermaid/src/rendering-util/layout-algorithms/cose-bilkent/layout.test.ts

@@ -1,253 +0,0 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-
-// Mock cytoscape and cytoscape-cose-bilkent before importing the modules
-vi.mock('cytoscape', () => {
-  const mockCy = {
-    add: vi.fn(),
-    nodes: vi.fn(() => ({
-      forEach: vi.fn(),
-      map: vi.fn((fn) => [
-        fn({
-          data: () => ({
-            id: '1',
-            nodeId: '1',
-            labelText: 'Root',
-            level: 0,
-            type: 0,
-            width: 100,
-            height: 50,
-            padding: 10,
-          }),
-          position: () => ({ x: 100, y: 100 }),
-        }),
-      ]),
-    })),
-    edges: vi.fn(() => ({
-      map: vi.fn((fn) => [
-        fn({
-          data: () => ({
-            id: '1_2',
-            source: '1',
-            target: '2',
-            depth: 0,
-          }),
-          _private: {
-            rscratch: {
-              startX: 100,
-              startY: 100,
-              midX: 150,
-              midY: 150,
-              endX: 200,
-              endY: 200,
-            },
-          },
-        }),
-      ]),
-    })),
-    layout: vi.fn(() => ({
-      run: vi.fn(),
-    })),
-    ready: vi.fn((callback) => callback({})),
-  };
-
-  const mockCytoscape = vi.fn(() => mockCy);
-  (mockCytoscape as any).use = vi.fn();
-
-  return {
-    default: mockCytoscape,
-  };
-});
-
-vi.mock('cytoscape-cose-bilkent', () => ({
-  default: vi.fn(),
-}));
-
-vi.mock('d3', () => ({
-  select: vi.fn(() => ({
-    append: vi.fn(() => ({
-      attr: vi.fn(() => ({
-        attr: vi.fn(() => ({
-          remove: vi.fn(),
-        })),
-      })),
-    })),
-  })),
-}));
-
-// Import modules after mocks
-import { validateLayoutData, executeCoseBilkentLayout } from './layout.js';
-import type { LayoutResult } from './types.js';
-import type { MindmapNode } from '../../../diagrams/mindmap/mindmapTypes.js';
-import type { MermaidConfig } from '../../../config.type.js';
-import type { LayoutData } from '../../types.js';
-
-describe('Cose-Bilkent Layout Algorithm', () => {
-  let mockConfig: MermaidConfig;
-  let mockRootNode: MindmapNode;
-  let mockLayoutData: LayoutData;
-
-  beforeEach(() => {
-    mockConfig = {
-      mindmap: {
-        layoutAlgorithm: 'cose-bilkent',
-        padding: 10,
-        maxNodeWidth: 200,
-        useMaxWidth: true,
-      },
-    } as MermaidConfig;
-
-    mockRootNode = {
-      id: 1,
-      nodeId: '1',
-      level: 0,
-      descr: 'Root',
-      type: 0,
-      width: 100,
-      height: 50,
-      padding: 10,
-      x: 0,
-      y: 0,
-      children: [
-        {
-          id: 2,
-          nodeId: '2',
-          level: 1,
-          descr: 'Child 1',
-          type: 0,
-          width: 80,
-          height: 40,
-          padding: 10,
-          x: 0,
-          y: 0,
-        },
-      ],
-    } as MindmapNode;
-
-    mockLayoutData = {
-      nodes: [
-        {
-          id: '1',
-          nodeId: '1',
-          level: 0,
-          descr: 'Root',
-          type: 0,
-          width: 100,
-          height: 50,
-          padding: 10,
-          isGroup: false,
-        },
-        {
-          id: '2',
-          nodeId: '2',
-          level: 1,
-          descr: 'Child 1',
-          type: 0,
-          width: 80,
-          height: 40,
-          padding: 10,
-          isGroup: false,
-        },
-      ],
-      edges: [
-        {
-          id: '1_2',
-          source: '1',
-          target: '2',
-          depth: 0,
-        },
-      ],
-      config: mockConfig,
-      rootNode: mockRootNode,
-    };
-  });
-
-  describe('validateLayoutData', () => {
-    it('should validate correct layout data', () => {
-      expect(() => validateLayoutData(mockLayoutData)).not.toThrow();
-    });
-
-    it('should throw error for missing data', () => {
-      expect(() => validateLayoutData(null as any)).toThrow('Layout data is required');
-    });
-
-    it('should throw error for missing root node', () => {
-      const invalidData = { ...mockLayoutData, rootNode: null as any };
-      expect(() => validateLayoutData(invalidData)).toThrow('Root node is required');
-    });
-
-    it('should throw error for missing config', () => {
-      const invalidData = { ...mockLayoutData, config: null as any };
-      expect(() => validateLayoutData(invalidData)).toThrow('Configuration is required');
-    });
-
-    it('should throw error for invalid nodes array', () => {
-      const invalidData = { ...mockLayoutData, nodes: null as any };
-      expect(() => validateLayoutData(invalidData)).toThrow('No nodes found in layout data');
-    });
-
-    it('should throw error for invalid edges array', () => {
-      const invalidData = { ...mockLayoutData, edges: null as any };
-      expect(() => validateLayoutData(invalidData)).toThrow('Edges array is required');
-    });
-  });
-
-  describe('layout function', () => {
-    it('should execute layout algorithm successfully', async () => {
-      const result: LayoutResult = await executeCoseBilkentLayout(mockLayoutData, mockConfig);
-
-      expect(result).toBeDefined();
-      expect(result.nodes).toBeDefined();
-      expect(result.edges).toBeDefined();
-      expect(Array.isArray(result.nodes)).toBe(true);
-      expect(Array.isArray(result.edges)).toBe(true);
-    });
-
-    it('should return positioned nodes with coordinates', async () => {
-      const result: LayoutResult = await executeCoseBilkentLayout(mockLayoutData, mockConfig);
-
-      expect(result.nodes.length).toBeGreaterThan(0);
-      result.nodes.forEach((node) => {
-        expect(node.x).toBeDefined();
-        expect(node.y).toBeDefined();
-        expect(typeof node.x).toBe('number');
-        expect(typeof node.y).toBe('number');
-      });
-    });
-
-    it('should return positioned edges with coordinates', async () => {
-      const result: LayoutResult = await executeCoseBilkentLayout(mockLayoutData, mockConfig);
-
-      expect(result.edges.length).toBeGreaterThan(0);
-      result.edges.forEach((edge) => {
-        expect(edge.startX).toBeDefined();
-        expect(edge.startY).toBeDefined();
-        expect(edge.midX).toBeDefined();
-        expect(edge.midY).toBeDefined();
-        expect(edge.endX).toBeDefined();
-        expect(edge.endY).toBeDefined();
-      });
-    });
-
-    it('should handle empty mindmap data gracefully', async () => {
-      const emptyData: LayoutData = {
-        nodes: [],
-        edges: [],
-        config: mockConfig,
-        rootNode: mockRootNode,
-      };
-
-      const result: LayoutResult = await executeCoseBilkentLayout(emptyData, mockConfig);
-      expect(result).toBeDefined();
-      expect(result.nodes).toBeDefined();
-      expect(result.edges).toBeDefined();
-      expect(Array.isArray(result.nodes)).toBe(true);
-      expect(Array.isArray(result.edges)).toBe(true);
-    });
-
-    it('should throw error for invalid data', async () => {
-      const invalidData = { ...mockLayoutData, rootNode: null as any };
-
-      await expect(executeCoseBilkentLayout(invalidData, mockConfig)).rejects.toThrow();
-    });
-  });
-});

packages/mermaid/src/rendering-util/layout-algorithms/cose-bilkent/layout.ts

@@ -1,77 +0,0 @@
-import type { MermaidConfig } from '../../../config.type.js';
-import { log } from '../../../logger.js';
-import type { LayoutData } from '../../types.js';
-import type { LayoutResult } from './types.js';
-import {
-  createCytoscapeInstance,
-  extractPositionedNodes,
-  extractPositionedEdges,
-} from './cytoscape-setup.js';
-
-/**
- * Execute the cose-bilkent layout algorithm on generic layout data
- *
- * This function takes layout data and uses Cytoscape with the cose-bilkent
- * algorithm to calculate optimal node positions and edge paths.
- *
- * @param data - The layout data containing nodes, edges, and configuration
- * @param config - Mermaid configuration object
- * @returns Promise resolving to layout result with positioned nodes and edges
- */
-export async function executeCoseBilkentLayout(
-  data: LayoutData,
-  _config: MermaidConfig
-): Promise<LayoutResult> {
-  log.debug('Starting cose-bilkent layout algorithm');
-
-  try {
-    // Validate layout data structure
-    validateLayoutData(data);
-
-    // Create and configure cytoscape instance
-    const cy = await createCytoscapeInstance(data);
-
-    // Extract positioned nodes and edges after layout
-    const positionedNodes = extractPositionedNodes(cy);
-    const positionedEdges = extractPositionedEdges(cy);
-
-    log.debug(`Layout completed: ${positionedNodes.length} nodes, ${positionedEdges.length} edges`);
-
-    return {
-      nodes: positionedNodes,
-      edges: positionedEdges,
-    };
-  } catch (error) {
-    log.error('Error in cose-bilkent layout algorithm:', error);
-    throw error;
-  }
-}
-
-/**
- * Validate layout data structure
- * @param data - The data to validate
- * @returns True if data is valid, throws error otherwise
- */
-export function validateLayoutData(data: LayoutData): boolean {
-  if (!data) {
-    throw new Error('Layout data is required');
-  }
-
-  if (!data.config) {
-    throw new Error('Configuration is required in layout data');
-  }
-
-  if (!data.rootNode) {
-    throw new Error('Root node is required');
-  }
-
-  if (!data.nodes || !Array.isArray(data.nodes)) {
-    throw new Error('No nodes found in layout data');
-  }
-
-  if (!Array.isArray(data.edges)) {
-    throw new Error('Edges array is required in layout data');
-  }
-
-  return true;
-}

packages/mermaid/src/rendering-util/layout-algorithms/cose-bilkent/render.ts

@@ -1,197 +0,0 @@
-import type { InternalHelpers, LayoutData, RenderOptions, SVG, SVGGroup } from 'mermaid';
-import { executeCoseBilkentLayout } from './layout.js';
-import type { D3Selection } from '../../../types.js';
-
-type Node = Record<string, unknown>;
-
-interface NodeWithPosition extends Node {
-  x?: number;
-  y?: number;
-  domId?: string | SVGGroup | D3Selection<SVGAElement>;
-  width?: number;
-  height?: number;
-  id?: string;
-}
-
-/**
- * Render function for cose-bilkent layout algorithm
- *
- * This follows the same pattern as ELK and dagre renderers:
- * 1. Insert nodes into DOM to get their actual dimensions
- * 2. Run the layout algorithm to calculate positions
- * 3. Position the nodes and edges based on layout results
- */
-export const render = async (
-  data4Layout: LayoutData,
-  svg: SVG,
-  {
-    insertCluster,
-    insertEdge,
-    insertEdgeLabel,
-    insertMarkers,
-    insertNode,
-    log,
-    positionEdgeLabel,
-  }: InternalHelpers,
-  { algorithm: _algorithm }: RenderOptions
-) => {
-  const nodeDb: Record<string, NodeWithPosition> = {};
-  const clusterDb: Record<string, any> = {};
-
-  // Insert markers for edges
-  const element = svg.select('g');
-  insertMarkers(element, data4Layout.markers, data4Layout.type, data4Layout.diagramId);
-
-  // Create container groups
-  const subGraphsEl = element.insert('g').attr('class', 'subgraphs');
-  const edgePaths = element.insert('g').attr('class', 'edgePaths');
-  const edgeLabels = element.insert('g').attr('class', 'edgeLabels');
-  const nodes = element.insert('g').attr('class', 'nodes');
-
-  // Step 1: Insert nodes into DOM to get their actual dimensions
-  log.debug('Inserting nodes into DOM for dimension calculation');
-
-  await Promise.all(
-    data4Layout.nodes.map(async (node) => {
-      if (node.isGroup) {
-        // Handle subgraphs/clusters
-        const clusterNode: NodeWithPosition = { ...node };
-        clusterDb[node.id] = clusterNode;
-        nodeDb[node.id] = clusterNode;
-
-        // Insert cluster to get dimensions
-        await insertCluster(subGraphsEl, node);
-      } else {
-        // Handle regular nodes
-        const nodeWithPosition: NodeWithPosition = { ...node };
-        nodeDb[node.id] = nodeWithPosition;
-
-        // Insert node to get actual dimensions
-        const nodeEl = await insertNode(nodes, node, {
-          config: data4Layout.config,
-          dir: data4Layout.direction || 'TB',
-        });
-
-        // Get the actual bounding box after insertion
-        const boundingBox = nodeEl.node()!.getBBox();
-        nodeWithPosition.width = boundingBox.width;
-        nodeWithPosition.height = boundingBox.height;
-        nodeWithPosition.domId = nodeEl;
-
-        log.debug(`Node ${node.id} dimensions: ${boundingBox.width}x${boundingBox.height}`);
-      }
-    })
-  );
-
-  // Step 2: Run the cose-bilkent layout algorithm
-  log.debug('Running cose-bilkent layout algorithm');
-
-  // Update the layout data with actual dimensions
-  const updatedLayoutData = {
-    ...data4Layout,
-    nodes: data4Layout.nodes.map((node) => {
-      const nodeWithDimensions = nodeDb[node.id];
-      return {
-        ...node,
-        width: nodeWithDimensions.width,
-        height: nodeWithDimensions.height,
-      };
-    }),
-  };
-
-  const layoutResult = await executeCoseBilkentLayout(updatedLayoutData, data4Layout.config);
-
-  // Step 3: Position the nodes based on layout results
-  log.debug('Positioning nodes based on layout results');
-
-  layoutResult.nodes.forEach((positionedNode) => {
-    const node = nodeDb[positionedNode.id];
-    if (node?.domId) {
-      // Position the node at the calculated coordinates
-      // The positionedNode.x/y represents the center of the node, so use directly
-      (node.domId as D3Selection<SVGAElement>).attr(
-        'transform',
-        `translate(${positionedNode.x}, ${positionedNode.y})`
-      );
-
-      // Store the final position
-      node.x = positionedNode.x;
-      node.y = positionedNode.y;
-
-      log.debug(`Positioned node ${node.id} at center (${positionedNode.x}, ${positionedNode.y})`);
-    }
-  });
-
-  layoutResult.edges.forEach((positionedEdge) => {
-    const edge = data4Layout.edges.find((e) => e.id === positionedEdge.id);
-    if (edge) {
-      // Update the edge data with positioned coordinates
-      edge.points = [
-        { x: positionedEdge.startX, y: positionedEdge.startY },
-        { x: positionedEdge.midX, y: positionedEdge.midY },
-        { x: positionedEdge.endX, y: positionedEdge.endY },
-      ];
-    }
-  });
-
-  // Step 4: Insert and position edges
-  log.debug('Inserting and positioning edges');
-
-  await Promise.all(
-    data4Layout.edges.map(async (edge) => {
-      // Insert edge label first
-      const _edgeLabel = await insertEdgeLabel(edgeLabels, edge);
-
-      // Get start and end nodes
-      const startNode = nodeDb[edge.start ?? ''];
-      const endNode = nodeDb[edge.end ?? ''];
-
-      if (startNode && endNode) {
-        // Find the positioned edge data
-        const positionedEdge = layoutResult.edges.find((e) => e.id === edge.id);
-
-        if (positionedEdge) {
-          log.debug('APA01 positionedEdge', positionedEdge);
-          // Create edge path with positioned coordinates
-          const edgeWithPath = { ...edge };
-
-          // Insert the edge path
-          const paths = insertEdge(
-            edgePaths,
-            edgeWithPath,
-            clusterDb,
-            data4Layout.type,
-            startNode,
-            endNode,
-            data4Layout.diagramId
-          );
-
-          // Position the edge label
-          positionEdgeLabel(edgeWithPath, paths);
-        } else {
-          // Fallback: create a simple straight line between nodes
-          const edgeWithPath = {
-            ...edge,
-            points: [
-              { x: startNode.x || 0, y: startNode.y || 0 },
-              { x: endNode.x || 0, y: endNode.y || 0 },
-            ],
-          };
-
-          const paths = insertEdge(
-            edgePaths,
-            edgeWithPath,
-            clusterDb,
-            data4Layout.type,
-            startNode,
-            endNode,
-            data4Layout.diagramId
-          );
-          positionEdgeLabel(edgeWithPath, paths);
-        }
-      }
-    })
-  );
-
-  log.debug('Cose-bilkent rendering completed');
-};

packages/mermaid/src/rendering-util/layout-algorithms/cose-bilkent/types.ts

@@ -1,43 +0,0 @@
-/**
- * Positioned node after layout calculation
- */
-export interface PositionedNode {
-  id: string;
-  x: number;
-  y: number;
-  [key: string]: unknown; // Allow additional properties
-}
-
-/**
- * Positioned edge after layout calculation
- */
-export interface PositionedEdge {
-  id: string;
-  source: string;
-  target: string;
-  startX: number;
-  startY: number;
-  midX: number;
-  midY: number;
-  endX: number;
-  endY: number;
-  [key: string]: unknown; // Allow additional properties
-}
-
-/**
- * Result of layout algorithm execution
- */
-export interface LayoutResult {
-  nodes: PositionedNode[];
-  edges: PositionedEdge[];
-}
-
-/**
- * Cytoscape layout configuration
- */
-export interface CytoscapeLayoutConfig {
-  name: 'cose-bilkent';
-  quality: 'proof';
-  styleEnabled: boolean;
-  animate: boolean;
-}

packages/mermaid/src/rendering-util/render.ts

@@ -39,14 +39,6 @@ const registerDefaultLayoutLoaders = () => {
       name: 'dagre',
       loader: async () => await import('./layout-algorithms/dagre/index.js'),
     },
-    ...(includeLargeFeatures
-      ? [
-          {
-            name: 'cose-bilkent',
-            loader: async () => await import('./layout-algorithms/cose-bilkent/index.js'),
-          },
-        ]
-      : []),
   ]);
 };
 

packages/mermaid/src/rendering-util/rendering-elements/edges.js

@@ -438,6 +438,7 @@ const fixCorners = function (lineData) {
   }
   return newLineData;
 };
+
 export const insertEdge = function (elem, edge, clusterDb, diagramType, startNode, endNode, id) {
   const { handDrawnSeed } = getConfig();
   let points = edge.points;
@@ -485,7 +486,6 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
   }
 
   let lineData = points.filter((p) => !Number.isNaN(p.y));
-  //lineData = adjustForArrowHeads(lineData);
   lineData = fixCorners(lineData);
   let curve = curveBasis;
   curve = curveLinear;
@@ -622,9 +622,9 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
   // lineData.forEach((point) => {
   //   elem
   //     .append('circle')
-  //     .style('stroke', 'red')
-  //     .style('fill', 'red')
-  //     .attr('r', 1)
+  //     .style('stroke', 'blue')
+  //     .style('fill', 'blue')
+  //     .attr('r', 3)
   //     .attr('cx', point.x)
   //     .attr('cy', point.y);
   // });

packages/mermaid/src/rendering-util/rendering-elements/intersect/intersect-line.js

@@ -2,63 +2,64 @@
  * Returns the point at which two lines, p and q, intersect or returns undefined if they do not intersect.
  */
 function intersectLine(p1, p2, q1, q2) {
-  {
-    // Algorithm from J. Avro, (ed.) Graphics Gems, No 2, Morgan Kaufmann, 1994,
-    // p7 and p473.
+  // Algorithm from J. Avro, (ed.) Graphics Gems, No 2, Morgan Kaufmann, 1994,
+  // p7 and p473.
 
-    // Compute a1, b1, c1, where line joining points 1 and 2 is F(x,y) = a1 x +
-    // b1 y + c1 = 0.
-    const a1 = p2.y - p1.y;
-    const b1 = p1.x - p2.x;
-    const c1 = p2.x * p1.y - p1.x * p2.y;
+  var a1, a2, b1, b2, c1, c2;
+  var r1, r2, r3, r4;
+  var denom, offset, num;
+  var x, y;
 
-    // Compute r3 and r4.
-    const r3 = a1 * q1.x + b1 * q1.y + c1;
-    const r4 = a1 * q2.x + b1 * q2.y + c1;
+  // Compute a1, b1, c1, where line joining points 1 and 2 is F(x,y) = a1 x +
+  // b1 y + c1 = 0.
+  a1 = p2.y - p1.y;
+  b1 = p1.x - p2.x;
+  c1 = p2.x * p1.y - p1.x * p2.y;
 
-    const epsilon = 1e-6;
+  // Compute r3 and r4.
+  r3 = a1 * q1.x + b1 * q1.y + c1;
+  r4 = a1 * q2.x + b1 * q2.y + c1;
 
-    // Check signs of r3 and r4. If both point 3 and point 4 lie on
-    // same side of line 1, the line segments do not intersect.
-    if (r3 !== 0 && r4 !== 0 && sameSign(r3, r4)) {
-      return /*DON'T_INTERSECT*/;
-    }
-
-    // Compute a2, b2, c2 where line joining points 3 and 4 is G(x,y) = a2 x + b2 y + c2 = 0
-    const a2 = q2.y - q1.y;
-    const b2 = q1.x - q2.x;
-    const c2 = q2.x * q1.y - q1.x * q2.y;
-
-    // Compute r1 and r2
-    const r1 = a2 * p1.x + b2 * p1.y + c2;
-    const r2 = a2 * p2.x + b2 * p2.y + c2;
-
-    // Check signs of r1 and r2. If both point 1 and point 2 lie
-    // on same side of second line segment, the line segments do
-    // not intersect.
-    if (Math.abs(r1) < epsilon && Math.abs(r2) < epsilon && sameSign(r1, r2)) {
-      return /*DON'T_INTERSECT*/;
-    }
-
-    // Line segments intersect: compute intersection point.
-    const denom = a1 * b2 - a2 * b1;
-    if (denom === 0) {
-      return /*COLLINEAR*/;
-    }
-
-    const offset = Math.abs(denom / 2);
-
-    // The denom/2 is to get rounding instead of truncating. It
-    // is added or subtracted to the numerator, depending upon the
-    // sign of the numerator.
-    let num = b1 * c2 - b2 * c1;
-    const x = num < 0 ? (num - offset) / denom : (num + offset) / denom;
-
-    num = a2 * c1 - a1 * c2;
-    const y = num < 0 ? (num - offset) / denom : (num + offset) / denom;
-
-    return { x: x, y: y };
+  // Check signs of r3 and r4. If both point 3 and point 4 lie on
+  // same side of line 1, the line segments do not intersect.
+  if (r3 !== 0 && r4 !== 0 && sameSign(r3, r4)) {
+    return /*DON'T_INTERSECT*/;
   }
+
+  // Compute a2, b2, c2 where line joining points 3 and 4 is G(x,y) = a2 x + b2 y + c2 = 0
+  a2 = q2.y - q1.y;
+  b2 = q1.x - q2.x;
+  c2 = q2.x * q1.y - q1.x * q2.y;
+
+  // Compute r1 and r2
+  r1 = a2 * p1.x + b2 * p1.y + c2;
+  r2 = a2 * p2.x + b2 * p2.y + c2;
+
+  // Check signs of r1 and r2. If both point 1 and point 2 lie
+  // on same side of second line segment, the line segments do
+  // not intersect.
+  if (r1 !== 0 && r2 !== 0 && sameSign(r1, r2)) {
+    return /*DON'T_INTERSECT*/;
+  }
+
+  // Line segments intersect: compute intersection point.
+  denom = a1 * b2 - a2 * b1;
+  if (denom === 0) {
+    return /*COLLINEAR*/;
+  }
+
+  offset = Math.abs(denom / 2);
+
+  // The denom/2 is to get rounding instead of truncating. It
+  // is added or subtracted to the numerator, depending upon the
+  // sign of the numerator.
+  num = b1 * c2 - b2 * c1;
+  x = num < 0 ? (num - offset) / denom : (num + offset) / denom;
+
+  num = a2 * c1 - a1 * c2;
+  y = num < 0 ? (num - offset) / denom : (num + offset) / denom;
+
+  return { x: x, y: y };
 }
 
 function sameSign(r1, r2) {

packages/mermaid/src/rendering-util/rendering-elements/shapes.ts

@@ -61,9 +61,6 @@ import { erBox } from './shapes/erBox.js';
 import { classBox } from './shapes/classBox.js';
 import { requirementBox } from './shapes/requirementBox.js';
 import { kanbanItem } from './shapes/kanbanItem.js';
-import { bang } from './shapes/bang.js';
-import { cloud } from './shapes/cloud.js';
-import { defaultMindmapNode } from './shapes/defaultMindmapNode.js';
 
 type ShapeHandler = <T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
@@ -138,30 +135,6 @@ export const shapesDefs = [
     aliases: ['circ'],
     handler: circle,
   },
-  {
-    semanticName: 'Bang',
-    name: 'Bang',
-    shortName: 'bang',
-    description: 'Bang',
-    aliases: ['bang'],
-    handler: bang,
-  },
-  {
-    semanticName: 'Default Mindmap Node',
-    name: 'defaultMindmapNode',
-    shortName: 'default-mindmap',
-    description: 'defaultMindmapNode',
-    aliases: ['default-mindmap', 'defaultMindmapNode'],
-    handler: defaultMindmapNode,
-  },
-  {
-    semanticName: 'Cloud',
-    name: 'Cloud',
-    shortName: 'cloud',
-    description: 'cloud',
-    aliases: ['cloud'],
-    handler: cloud,
-  },
   {
     semanticName: 'Decision',
     name: 'Diamond',

packages/mermaid/src/rendering-util/rendering-elements/shapes/bang.ts

@@ -1,77 +0,0 @@
-import { log } from '../../../logger.js';
-import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
-import intersect from '../intersect/index.js';
-import type { Node } from '../../types.js';
-import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
-import rough from 'roughjs';
-import type { D3Selection } from '../../../types.js';
-import { handleUndefinedAttr } from '../../../utils.js';
-import type { Bounds, Point } from '../../../types.js';
-
-export async function bang<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
-  const { labelStyles, nodeStyles } = styles2String(node);
-  node.labelStyle = labelStyles;
-  const { shapeSvg, bbox, halfPadding, label } = await labelHelper(
-    parent,
-    node,
-    getNodeClasses(node)
-  );
-
-  const w = bbox.width + 8 * halfPadding;
-  const h = bbox.height + 2 * halfPadding;
-  const r = 0.15 * w;
-  const { cssStyles } = node;
-
-  // Label centered around (0,0)
-  label.attr('transform', `translate(${-bbox.width / 2}, ${-bbox.height / 2})`);
-
-  let bangElem;
-  const path = `M0 0 
-    a${r},${r} 1 0,0 ${w * 0.25},${-1 * h * 0.1}
-    a${r},${r} 1 0,0 ${w * 0.25},${0}
-    a${r},${r} 1 0,0 ${w * 0.25},${0}
-    a${r},${r} 1 0,0 ${w * 0.25},${h * 0.1}
-
-    a${r},${r} 1 0,0 ${w * 0.15},${h * 0.33}
-    a${r * 0.8},${r * 0.8} 1 0,0 0,${h * 0.34}
-    a${r},${r} 1 0,0 ${-1 * w * 0.15},${h * 0.33}
-
-    a${r},${r} 1 0,0 ${-1 * w * 0.25},${h * 0.15}
-    a${r},${r} 1 0,0 ${-1 * w * 0.25},0
-    a${r},${r} 1 0,0 ${-1 * w * 0.25},0
-    a${r},${r} 1 0,0 ${-1 * w * 0.25},${-1 * h * 0.15}
-
-    a${r},${r} 1 0,0 ${-1 * w * 0.1},${-1 * h * 0.33}
-    a${r * 0.8},${r * 0.8} 1 0,0 0,${-1 * h * 0.34}
-    a${r},${r} 1 0,0 ${w * 0.1},${-1 * h * 0.33}
-  H0 V0 Z`;
-
-  if (node.look === 'handDrawn') {
-    // @ts-expect-error -- Passing a D3.Selection seems to work for some reason
-    const rc = rough.svg(shapeSvg);
-    const options = userNodeOverrides(node, {});
-    const roughNode = rc.path(path, options);
-    bangElem = shapeSvg.insert(() => roughNode, ':first-child');
-    bangElem.attr('class', 'basic label-container').attr('style', handleUndefinedAttr(cssStyles));
-  } else {
-    bangElem = shapeSvg
-      .insert('path', ':first-child')
-      .attr('class', 'basic label-container')
-      .attr('style', nodeStyles)
-      .attr('d', path);
-  }
-
-  // Translate the path (center the shape)
-  bangElem.attr('transform', `translate(${-w / 2}, ${-h / 2})`);
-
-  updateNodeBounds(node, bangElem);
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    return intersect.rect(bounds, point);
-  };
-  node.intersect = function (point) {
-    log.info('Bang intersect', node, point);
-    return intersect.rect(node, point);
-  };
-
-  return shapeSvg;
-}

packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts

@@ -1,11 +1,11 @@
-import rough from 'roughjs';
 import { log } from '../../../logger.js';
-import type { Bounds, D3Selection, Point } from '../../../types.js';
-import { handleUndefinedAttr } from '../../../utils.js';
-import type { Node } from '../../types.js';
+import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
+import type { Node } from '../../types.js';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
-import { getNodeClasses, labelHelper, updateNodeBounds } from './util.js';
+import rough from 'roughjs';
+import type { D3Selection } from '../../../types.js';
+import { handleUndefinedAttr } from '../../../utils.js';
 
 export async function circle<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
   const { labelStyles, nodeStyles } = styles2String(node);
@@ -35,10 +35,7 @@ export async function circle<T extends SVGGraphicsElement>(parent: D3Selection<T
   }
 
   updateNodeBounds(node, circleElem);
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    const radius = bounds.width / 2;
-    return intersect.circle(bounds, radius, point);
-  };
+
   node.intersect = function (point) {
     log.info('Circle intersect', node, radius, point);
     return intersect.circle(node, radius, point);

packages/mermaid/src/rendering-util/rendering-elements/shapes/cloud.ts

@@ -1,80 +0,0 @@
-import rough from 'roughjs';
-import { log } from '../../../logger.js';
-import type { Bounds, D3Selection, Point } from '../../../types.js';
-import { handleUndefinedAttr } from '../../../utils.js';
-import type { Node } from '../../types.js';
-import intersect from '../intersect/index.js';
-import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
-import { getNodeClasses, labelHelper, updateNodeBounds } from './util.js';
-
-export async function cloud<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
-  const { labelStyles, nodeStyles } = styles2String(node);
-  node.labelStyle = labelStyles;
-
-  const { shapeSvg, bbox, halfPadding, label } = await labelHelper(
-    parent,
-    node,
-    getNodeClasses(node)
-  );
-
-  const w = bbox.width + 2 * halfPadding;
-  const h = bbox.height + 2 * halfPadding;
-
-  // Cloud radii
-  const r1 = 0.15 * w;
-  const r2 = 0.25 * w;
-  const r3 = 0.35 * w;
-  const r4 = 0.2 * w;
-
-  const { cssStyles } = node;
-  let cloudElem;
-
-  // Cloud path
-  const path = `M0 0 
-    a${r1},${r1} 0 0,1 ${w * 0.25},${-1 * w * 0.1}
-    a${r3},${r3} 1 0,1 ${w * 0.4},${-1 * w * 0.1}
-    a${r2},${r2} 1 0,1 ${w * 0.35},${w * 0.2}
-
-    a${r1},${r1} 1 0,1 ${w * 0.15},${h * 0.35}
-    a${r4},${r4} 1 0,1 ${-1 * w * 0.15},${h * 0.65}
-
-    a${r2},${r1} 1 0,1 ${-1 * w * 0.25},${w * 0.15}
-    a${r3},${r3} 1 0,1 ${-1 * w * 0.5},0
-    a${r1},${r1} 1 0,1 ${-1 * w * 0.25},${-1 * w * 0.15}
-
-    a${r1},${r1} 1 0,1 ${-1 * w * 0.1},${-1 * h * 0.35}
-    a${r4},${r4} 1 0,1 ${w * 0.1},${-1 * h * 0.65}
-  H0 V0 Z`;
-
-  if (node.look === 'handDrawn') {
-    // @ts-expect-error -- Passing a D3.Selection seems to work for some reason
-    const rc = rough.svg(shapeSvg);
-    const options = userNodeOverrides(node, {});
-    const roughNode = rc.path(path, options);
-    cloudElem = shapeSvg.insert(() => roughNode, ':first-child');
-    cloudElem.attr('class', 'basic label-container').attr('style', handleUndefinedAttr(cssStyles));
-  } else {
-    cloudElem = shapeSvg
-      .insert('path', ':first-child')
-      .attr('class', 'basic label-container')
-      .attr('style', nodeStyles)
-      .attr('d', path);
-  }
-
-  label.attr('transform', `translate(${-bbox.width / 2}, ${-bbox.height / 2})`);
-
-  // Center the shape
-  cloudElem.attr('transform', `translate(${-w / 2}, ${-h / 2})`);
-
-  updateNodeBounds(node, cloudElem);
-
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    return intersect.rect(bounds, point);
-  };
-  node.intersect = function (point) {
-    log.info('Cloud intersect', node, point);
-    return intersect.rect(node, point);
-  };
-
-  return shapeSvg;
-}

packages/mermaid/src/rendering-util/rendering-elements/shapes/defaultMindmapNode.ts

@@ -1,64 +0,0 @@
-import type { Bounds, D3Selection, Point } from '../../../types.js';
-import type { Node } from '../../types.js';
-import intersect from '../intersect/index.js';
-import { styles2String } from './handDrawnShapeStyles.js';
-import { getNodeClasses, labelHelper, updateNodeBounds } from './util.js';
-
-export async function defaultMindmapNode<T extends SVGGraphicsElement>(
-  parent: D3Selection<T>,
-  node: Node
-) {
-  const { labelStyles, nodeStyles } = styles2String(node);
-  node.labelStyle = labelStyles;
-
-  const { shapeSvg, bbox, halfPadding, label } = await labelHelper(
-    parent,
-    node,
-    getNodeClasses(node)
-  );
-
-  const w = bbox.width + 8 * halfPadding;
-  const h = bbox.height + 2 * halfPadding;
-  const rd = 5;
-
-  const rectPath = `
-    M${-w / 2} ${h / 2 - rd}
-    v${-h + 2 * rd}
-    q0,-${rd} ${rd},-${rd}
-    h${w - 2 * rd}
-    q${rd},0 ${rd},${rd}
-    v${h - 2 * rd}
-    q0,${rd} -${rd},${rd}
-    h${-w + 2 * rd}
-    q-${rd},0 -${rd},-${rd}
-    Z
-  `;
-
-  const bg = shapeSvg
-    .append('path')
-    .attr('id', 'node-' + node.id)
-    .attr('class', 'node-bkg node-' + node.type)
-    .attr('style', nodeStyles)
-    .attr('d', rectPath);
-
-  shapeSvg
-    .append('line')
-    .attr('class', 'node-line-')
-    .attr('x1', -w / 2)
-    .attr('y1', h / 2)
-    .attr('x2', w / 2)
-    .attr('y2', h / 2);
-
-  label.attr('transform', `translate(${-bbox.width / 2}, ${-bbox.height / 2})`);
-  shapeSvg.append(() => label.node());
-
-  updateNodeBounds(node, bg);
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    return intersect.rect(bounds, point);
-  };
-  node.intersect = function (point) {
-    return intersect.rect(node, point);
-  };
-
-  return shapeSvg;
-}

packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts

@@ -6,7 +6,6 @@ import { userNodeOverrides, styles2String } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import type { D3Selection } from '../../../types.js';
 import { handleUndefinedAttr } from '../../../utils.js';
-import type { Bounds, Point } from '../../../types.js';
 
 export async function drawRect<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
@@ -63,10 +62,6 @@ export async function drawRect<T extends SVGGraphicsElement>(
 
   updateNodeBounds(node, rect);
 
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    return intersect.rect(bounds, point);
-  };
-
   node.intersect = function (point) {
     return intersect.rect(node, point);
   };

packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts

@@ -1,3 +1,4 @@
+import { log } from '../../../logger.js';
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
 import type { Node } from '../../types.js';
@@ -5,7 +6,6 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 import type { D3Selection } from '../../../types.js';
-import type { Bounds, Point } from '../../../types.js';
 
 export const createDecisionBoxPathD = (x: number, y: number, size: number): string => {
   return [
@@ -61,26 +61,17 @@ export async function question<T extends SVGGraphicsElement>(parent: D3Selection
   }
 
   updateNodeBounds(node, polygon);
-  node.calcIntersect = function (bounds: Bounds, point: Point) {
-    const s = bounds.width;
-
-    // Define polygon points
-    const points = [
-      { x: s / 2, y: 0 },
-      { x: s, y: -s / 2 },
-      { x: s / 2, y: -s },
-      { x: 0, y: -s / 2 },
-    ];
-
-    // Calculate the intersection point
-    const res = intersect.polygon(bounds, points, point);
-
-    return { x: res.x - 0.5, y: res.y - 0.5 }; // Adjusted result
-  };
 
   node.intersect = function (point) {
-    // @ts-ignore TODO fix this (KNSV)
-    return this.calcIntersect(node as Bounds, point);
+    log.debug(
+      'APA12 Intersect called SPLIT\npoint:',
+      point,
+      '\nnode:\n',
+      node,
+      '\nres:',
+      intersect.polygon(node, points, point)
+    );
+    return intersect.polygon(node, points, point);
   };
 
   return shapeSvg;

packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts

@@ -98,15 +98,13 @@ export async function roundedRect<T extends SVGGraphicsElement>(
 
   const w = (node?.width ? node?.width : bbox.width) + labelPaddingX * 2;
   const h = (node?.height ? node?.height : bbox.height) + labelPaddingY * 2;
-  const radius = 15;
-  const taper = 15; // Taper width for the rounded corners
+  const radius = 5;
+  const taper = 5; // Taper width for the rounded corners
   const { cssStyles } = node;
   // @ts-expect-error -- Passing a D3.Selection seems to work for some reason
   const rc = rough.svg(shapeSvg);
-  const options = {
-    ...userNodeOverrides(node, {}),
-    stroke: 'none',
-  };
+  const options = userNodeOverrides(node, {});
+
   if (node.look !== 'handDrawn') {
     options.roughness = 0;
     options.fillStyle = 'solid';

packages/mermaid/src/rendering-util/types.ts

@@ -2,7 +2,6 @@ export type MarkdownWordType = 'normal' | 'strong' | 'em';
 import type { MermaidConfig } from '../config.type.js';
 import type { ClusterShapeID } from './rendering-elements/clusters.js';
 import type { ShapeID } from './rendering-elements/shapes.js';
-import type { Bounds, Point } from '../types.js';
 export interface MarkdownWord {
   content: string;
   type: MarkdownWordType;
@@ -39,12 +38,11 @@ interface BaseNode {
   linkTarget?: string;
   tooltip?: string;
   padding?: number; //REMOVE?, use from LayoutData.config - Keep, this could be shape specific
-  isGroup?: boolean;
+  isGroup: boolean;
   width?: number;
   height?: number;
   // Specific properties for State Diagram nodes TODO remove and use generic properties
   intersect?: (point: any) => any;
-  calcIntersect?: (bounds: Bounds, point: Point) => any;
 
   // Non-generic properties
   rx?: number; // Used for rounded corners in Rect, Ellipse, etc.Maybe it to specialized RectNode, EllipseNode, etc.
@@ -79,31 +77,14 @@ interface BaseNode {
 /**
  * Group/cluster nodes, e.g. nodes that contain other nodes.
  */
-export type NodeChildren = Node[];
-
 export interface ClusterNode extends BaseNode {
   shape?: ClusterShapeID;
   isGroup: true;
-  children?: NodeChildren;
-  nodeId?: string;
-  level?: number;
-  descr?: string;
-  type?: number;
-  height?: number;
-  width?: number;
-  padding?: number;
 }
+
 export interface NonClusterNode extends BaseNode {
   shape?: ShapeID;
   isGroup: false;
-  children?: NodeChildren;
-  nodeId?: string;
-  level?: number;
-  descr?: string;
-  type?: number;
-  height?: number;
-  width?: number;
-  padding?: number;
 }
 
 // Common properties for any node in the system
@@ -132,7 +113,7 @@ export interface Edge {
   start?: string;
   stroke?: string;
   text?: string;
-  type?: string;
+  type: string;
   // Class Diagram specific properties
   startLabelRight?: string;
   endLabelLeft?: string;
@@ -145,12 +126,6 @@ export interface Edge {
   thickness?: 'normal' | 'thick' | 'invisible' | 'dotted';
   look?: string;
   isUserDefinedId?: boolean;
-  points?: Point[];
-  parentId?: string;
-  dir?: string;
-  source?: string;
-  target?: string;
-  depth?: number;
 }
 
 export interface RectOptions {

packages/mermaid/src/schemas/config.schema.yaml

@@ -133,6 +133,21 @@ properties:
           - MODEL_ORDER
           - GREEDY_MODEL_ORDER
         default: GREEDY_MODEL_ORDER
+      forceNodeModelOrder:
+        description: |
+          The node order given by the model does not change to produce a better layout. E.g. if node A is before node B in the model this is not changed during crossing minimization. This assumes that the node model order is already respected before crossing minimization. This can be achieved by setting considerModelOrder.strategy to NODES_AND_EDGES.
+        type: boolean
+        default: false
+      considerModelOrder:
+        description: |
+          Preserves the order of nodes and edges in the model file if this does not lead to additional edge crossings. Depending on the strategy this is not always possible since the node and edge order might be conflicting.
+        type: string
+        enum:
+          - NONE
+          - NODES_AND_EDGES
+          - PREFER_EDGES
+          - PREFER_NODES
+        default: 'NODES_AND_EDGES'
   darkMode:
     type: boolean
     default: false
@@ -962,7 +977,6 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file)
       - useMaxWidth
       - padding
       - maxNodeWidth
-      - layoutAlgorithm
     properties:
       padding:
         type: number
@@ -970,10 +984,6 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file)
       maxNodeWidth:
         type: number
         default: 200
-      layoutAlgorithm:
-        description: Layout algorithm to use for positioning mindmap nodes
-        type: string
-        default: 'cose-bilkent'
 
   KanbanDiagramConfig:
     title: Kanban Diagram Config