Update: Added folder structure for usecase diagram

on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>

.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

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

.changeset/chatty-lemons-stick.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-chore: Remove the "-beta" suffix from the XYChart, Block, Sankey diagrams to reflect their stable status

.changeset/cold-sites-accept.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Position the edge label in state diagram correctly relative to the edge

.changeset/empty-clouds-cry.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Apply correct dateFormat in Gantt chart to show only day when specified

.changeset/fuzzy-pears-cough.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: handle exclude dates properly in Gantt charts when using dateFormat: 'YYYY-MM-DD HH:mm:ss'

.changeset/gold-spiders-join.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: fixed connection gaps in flowchart for roundedRect, stadium and diamond shape

.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/red-zebras-happen.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Allow equals sign in sequenceDiagram labels

.changeset/seven-papayas-film.md

@@ -1,9 +0,0 @@
----
-'mermaid': patch
----
-
-Add validation for negative values in pie charts:
-
-Prevents crashes during parsing by validating values post-parsing.
-
-Provides clearer, user-friendly error messages for invalid negative inputs.

.changeset/six-planets-rescue.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: node border style for handdrawn shapes

.changeset/spicy-ties-see.md

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

.changeset/strong-dryers-pay.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: correctly render non-directional lines for '---' in block diagrams

.changeset/strong-laws-confess.md

@@ -1,9 +0,0 @@
----
-'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.

.cspell/code-terms.txt

@@ -143,6 +143,7 @@ typeof
 typestr
 unshift
 urlsafe
+usecase
 verifymethod
 VERIFYMTHD
 WARN_DOCSDIR_DOESNT_MATCH

.cspell/mermaid-terms.txt

@@ -7,7 +7,6 @@ catmull
 compositTitleSize
 curv
 doublecircle
-elem
 elems
 gantt
 gitgraph

.github/workflows/e2e-timings.yml

@@ -58,7 +58,7 @@ jobs:
           echo "EOF" >> $GITHUB_OUTPUT
 
       - name: Commit and create pull request
-        uses: peter-evans/create-pull-request@1310d7dab503600742045e6fd4b84dda64352858
+        uses: peter-evans/create-pull-request@07cbaebb4bfc9c5d7db426ea5a5f585df29dd0a0
         with:
           add-paths: |
             cypress/timings.json

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

cypress/integration/rendering/block.spec.js

@@ -16,7 +16,7 @@ describe('Block diagram', () => {
 
   it('BL2: should handle columns statement in sub-blocks', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   id1["Hello"]
   block
     columns 3
@@ -32,7 +32,7 @@ describe('Block diagram', () => {
 
   it('BL3: should align block widths and handle columns statement in sub-blocks', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   block
     columns 1
     id1
@@ -48,7 +48,7 @@ describe('Block diagram', () => {
 
   it('BL4: should align block widths and handle columns statements in deeper sub-blocks then 1 level', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   columns 1
   block
     columns 1
@@ -68,7 +68,7 @@ describe('Block diagram', () => {
 
   it('BL5: should align block widths and handle columns statements in deeper sub-blocks then 1 level (alt)', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   columns 1
   block
     id1
@@ -87,7 +87,7 @@ describe('Block diagram', () => {
 
   it('BL6: should handle block arrows and spece statements', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
     columns 3
     space:3
     ida idb idc
@@ -106,7 +106,7 @@ describe('Block diagram', () => {
 
   it('BL7: should handle different types of edges', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
       columns 3
       A space:5
       A --o B
@@ -119,7 +119,7 @@ describe('Block diagram', () => {
 
   it('BL8: should handle sub-blocks without columns statements', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
       columns 2
       C A B
       block
@@ -133,7 +133,7 @@ describe('Block diagram', () => {
 
   it('BL9: should handle edges from blocks in sub blocks to other blocks', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
       columns 3
       B space
       block
@@ -147,7 +147,7 @@ describe('Block diagram', () => {
 
   it('BL10: should handle edges from composite blocks', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
       columns 3
       B space
       block BL
@@ -161,7 +161,7 @@ describe('Block diagram', () => {
 
   it('BL11: should handle edges to composite blocks', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
       columns 3
       B space
       block BL
@@ -175,7 +175,7 @@ describe('Block diagram', () => {
 
   it('BL12: edges should handle labels', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
       A
       space
       A -- "apa" --> E
@@ -186,7 +186,7 @@ describe('Block diagram', () => {
 
   it('BL13: should handle block arrows in different directions', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
       columns 3
       space blockArrowId1<["down"]>(down) space
       blockArrowId2<["right"]>(right) blockArrowId3<["Sync"]>(x, y) blockArrowId4<["left"]>(left)
@@ -199,7 +199,7 @@ describe('Block diagram', () => {
 
   it('BL14: should style statements and class statements', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
     A
     B
     classDef blue fill:#66f,stroke:#333,stroke-width:2px;
@@ -212,7 +212,7 @@ describe('Block diagram', () => {
 
   it('BL15: width alignment - D and E should share available space', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   block
     D
     E
@@ -225,7 +225,7 @@ describe('Block diagram', () => {
 
   it('BL16: width alignment - C should be as wide as the composite block', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   block
     A("This is the text")
     B
@@ -238,7 +238,7 @@ describe('Block diagram', () => {
 
   it('BL17: width alignment - blocks should be equal in width', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
     A("This is the text")
     B
     C
@@ -249,7 +249,7 @@ describe('Block diagram', () => {
 
   it('BL18: block types 1 - square, rounded and circle', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
     A["square"]
     B("rounded")
     C(("circle"))
@@ -260,7 +260,7 @@ describe('Block diagram', () => {
 
   it('BL19: block types 2 - odd, diamond and hexagon', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
     A>"rect_left_inv_arrow"]
     B{"diamond"}
     C{{"hexagon"}}
@@ -271,7 +271,7 @@ describe('Block diagram', () => {
 
   it('BL20: block types 3 - stadium', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
     A(["stadium"])
       `,
       {}
@@ -280,7 +280,7 @@ describe('Block diagram', () => {
 
   it('BL21: block types 4 - lean right, lean left, trapezoid and inv trapezoid', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
     A[/"lean right"/]
     B[\"lean left"\]
     C[/"trapezoid"\]
@@ -292,7 +292,7 @@ describe('Block diagram', () => {
 
   it('BL22: block types 1 - square, rounded and circle', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
     A["square"]
     B("rounded")
     C(("circle"))
@@ -303,7 +303,7 @@ describe('Block diagram', () => {
 
   it('BL23: sizing - it should be possible to make a block wider', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
       A("rounded"):2
       B:2
       C
@@ -314,7 +314,7 @@ describe('Block diagram', () => {
 
   it('BL24: sizing - it should be possible to make a composite block wider', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
       block:2
         A
       end
@@ -326,7 +326,7 @@ describe('Block diagram', () => {
 
   it('BL25: block in the middle with space on each side', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
         columns 3
         space
         middle["In the middle"]
@@ -337,7 +337,7 @@ describe('Block diagram', () => {
   });
   it('BL26: space and an edge', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   columns 5
     A space B
     A --x B
@@ -347,7 +347,7 @@ describe('Block diagram', () => {
   });
   it('BL27: block sizes for regular blocks', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   columns 3
     a["A wide one"] b:2 c:2 d
       `,
@@ -356,7 +356,7 @@ describe('Block diagram', () => {
   });
   it('BL28: composite block with a set width - f should use the available space', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   columns 3
   a:3
   block:e:3
@@ -370,7 +370,7 @@ describe('Block diagram', () => {
 
   it('BL29: composite block with a set width - f and g should split the available space', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   columns 3
   a:3
   block:e:3
@@ -393,17 +393,6 @@ describe('Block diagram', () => {
   overflow:3
   short:1
   also_overflow:2
-`,
-      {}
-    );
-  });
-
-  it('BL31: edge without arrow syntax should render with no arrowheads', () => {
-    imgSnapshotTest(
-      `block-beta
-  a
-  b
-  a --- b
 `,
       {}
     );

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

@@ -1053,21 +1053,6 @@ 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

@@ -1113,37 +1113,6 @@ end
       );
     });
   });
-  describe('Flowchart Node Shape Rendering', () => {
-    it('should render a stadium-shaped node', () => {
-      imgSnapshotTest(
-        `flowchart TB
-          A(["Start"]) --> n1["Untitled Node"]
-          A --> n2["Untitled Node"]     
-        `,
-        {}
-      );
-    });
-    it('should render a diamond-shaped node using shape config', () => {
-      imgSnapshotTest(
-        `flowchart BT
-          n2["Untitled Node"] --> n1["Diamond"]
-          n1@{ shape: diam}     
-        `,
-        {}
-      );
-    });
-    it('should render a rounded rectangle and a normal rectangle', () => {
-      imgSnapshotTest(
-        `flowchart BT
-        n2["Untitled Node"] --> n1["Rounded Rectangle"]
-        n3["Untitled Node"] --> n1
-        n1@{ shape: rounded}
-        n3@{ shape: rect}  
-    `,
-        {}
-      );
-    });
-  });
 
   it('6617: Per Link Curve Styling using edge Ids', () => {
     imgSnapshotTest(
@@ -1164,26 +1133,4 @@ 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/gantt.spec.js

@@ -565,18 +565,6 @@ describe('Gantt diagram', () => {
     );
   });
 
-  it('should render only the day when using dateFormat D', () => {
-    imgSnapshotTest(
-      `
-    gantt
-      title Test
-      dateFormat D
-      A :a, 1, 1d
-    `,
-      {}
-    );
-  });
-
   // TODO: fix it
   //
   // This test is skipped deliberately
@@ -659,49 +647,6 @@ describe('Gantt diagram', () => {
     );
   });
 
-  it('should render a gantt diagram excluding a specific date in YYYY-MM-DD HH:mm:ss format', () => {
-    imgSnapshotTest(
-      `
-    gantt
-      dateFormat  YYYY-MM-DD HH:mm:ss
-      excludes    2025-07-07
-      section     Section
-      A task      :a1, 2025-07-04 20:30:30, 2025-07-08 10:30:30
-      Another task:after a1, 20h
-    `,
-      {}
-    );
-  });
-
-  it('should render a gantt diagram excluding saturday and sunday in YYYY-MM-DD HH:mm:ss format', () => {
-    imgSnapshotTest(
-      `
-        gantt
-      dateFormat  YYYY-MM-DD HH:mm:ss
-      excludes    weekends
-       weekend saturday
-      section     Section
-      A task      :a1, 2025-07-04 20:30:30, 2025-07-08 10:30:30
-      Another task:after a1, 20h
-    `,
-      {}
-    );
-  });
-  it('should render a gantt diagram excluding friday and saturday in YYYY-MM-DD HH:mm:ss format', () => {
-    imgSnapshotTest(
-      `
-        gantt
-      dateFormat  YYYY-MM-DD HH:mm:ss
-      excludes    weekends
-       weekend friday
-      section     Section
-      A task      :a1, 2025-07-04 20:30:30, 2025-07-08 10:30:30
-      Another task:after a1, 20h
-    `,
-      {}
-    );
-  });
-
   it("should render when there's a semicolon in the title", () => {
     imgSnapshotTest(
       `

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/integration/rendering/pie.spec.ts

@@ -82,13 +82,4 @@ describe('pie chart', () => {
       `
     );
   });
-  it('should render pie slices only for non-zero values but shows all legends', () => {
-    imgSnapshotTest(
-      `   pie title Pets adopted by volunteers
-    "Dogs" : 386
-    "Cats" : 85
-    "Rats" : 1
-      `
-    );
-  });
 });

cypress/integration/rendering/sankey.spec.ts

@@ -15,7 +15,7 @@ describe('Sankey Diagram', () => {
   describe('when given a linkColor', function () {
     this.beforeAll(() => {
       cy.wrap(
-        `sankey
+        `sankey-beta
       a,b,10
       `
       ).as('graph');
@@ -62,7 +62,7 @@ describe('Sankey Diagram', () => {
     this.beforeAll(() => {
       cy.wrap(
         `
-        sankey
+        sankey-beta
         
         a,b,8
         b,c,8

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

@@ -602,231 +602,6 @@ State1 --> [*]
       --
       55
   }
-`,
-      {}
-    );
-  });
-  it('should render edge labels correctly', () => {
-    imgSnapshotTest(
-      `---
-title: On The Way To Something Something DarkSide
-config:
-  look: default
-  theme: default
----
-
-stateDiagram-v2
-
-   state State1_____________
-   {
-      c0
-   }
-
-   state State2_____________
-   {
-      c1
-   }
-
-   state State3_____________
-   {
-      c7
-   }
-
-   state State4_____________
-   {
-      c2
-   }
-
-   state State5_____________
-   {
-      c3
-   }
-
-   state State6_____________
-   {
-      c4
-   }
-
-   state State7_____________
-   {
-      c5
-   }
-
-   state State8_____________
-   {
-      c6
-   }
-
-
-[*] --> State1_____________
-State1_____________ --> State2_____________   : Transition1_____
-State2_____________ --> State4_____________   : Transition2_____
-State2_____________ --> State3_____________   : Transition3_____
-State3_____________ --> State2_____________
-State4_____________ --> State2_____________   : Transition5_____
-State4_____________ --> State5_____________   : Transition6_____
-State5_____________ --> State6_____________   : Transition7_____
-State6_____________ --> State4_____________   : Transition8_____
-State2_____________ --> State7_____________   : Transition4_____
-State4_____________ --> State7_____________   : Transition4_____
-State5_____________ --> State7_____________   : Transition4_____
-State6_____________ --> State7_____________   : Transition4_____
-State7_____________ --> State1_____________   : Transition9_____
-State5_____________ --> State8_____________   : Transition10____
-State8_____________ --> State5_____________   : Transition11____
-`,
-      {}
-    );
-  });
-  it('should render edge labels correctly with multiple transitions', () => {
-    imgSnapshotTest(
-      `---
-title: Multiple Transitions
-config:
-  look: default
-  theme: default
----
-
-stateDiagram-v2
-
-   state State1_____________
-   {
-      c0
-   }
-
-   state State2_____________
-   {
-      c1
-   }
-
-   state State3_____________
-   {
-      c7
-   }
-
-   state State4_____________
-   {
-      c2
-   }
-
-   state State5_____________
-   {
-      c3
-   }
-
-   state State6_____________
-   {
-      c4
-   }
-
-   state State7_____________
-   {
-      c5
-   }
-
-   state State8_____________
-   {
-      c6
-   }
-
-   state State9_____________
-   {
-      c9
-   }
-
-[*] --> State1_____________
-State1_____________ --> State2_____________   : Transition1_____
-State2_____________ --> State4_____________   : Transition2_____
-State2_____________ --> State3_____________   : Transition3_____
-State3_____________ --> State2_____________
-State4_____________ --> State2_____________   : Transition5_____
-State4_____________ --> State5_____________   : Transition6_____
-State5_____________ --> State6_____________   : Transition7_____
-State6_____________ --> State4_____________   : Transition8_____
-State2_____________ --> State7_____________   : Transition4_____
-State4_____________ --> State7_____________   : Transition4_____
-State5_____________ --> State7_____________   : Transition4_____
-State6_____________ --> State7_____________   : Transition4_____
-State7_____________ --> State1_____________   : Transition9_____
-State5_____________ --> State8_____________   : Transition10____
-State8_____________ --> State5_____________   : Transition11____
-State9_____________ --> State8_____________   : Transition12____
-`,
-      {}
-    );
-  });
-
-  it('should render edge labels correctly with multiple states', () => {
-    imgSnapshotTest(
-      `---
-title: Multiple States
-config:
-  look: default
-  theme: default
----
-
-stateDiagram-v2
-
-   state State1_____________
-   {
-      c0
-   }
-
-   state State2_____________
-   {
-      c1
-   }
-
-   state State3_____________
-   {
-      c7
-   }
-
-   state State4_____________
-   {
-      c2
-   }
-
-   state State5_____________
-   {
-      c3
-   }
-
-   state State6_____________
-   {
-      c4
-   }
-
-   state State7_____________
-   {
-      c5
-   }
-
-   state State8_____________
-   {
-      c6
-   }
-
-   state State9_____________
-   {
-      c9
-   }
-
-   state State10_____________
-   {
-      c10
-   }
-
-[*] --> State1_____________
-State1_____________ --> State2_____________   : Transition1_____
-State2_____________ --> State3_____________   : Transition2_____
-State3_____________ --> State4_____________   : Transition3_____
-State4_____________ --> State5_____________   : Transition4_____
-State5_____________ --> State6_____________   : Transition5_____
-State6_____________ --> State7_____________   : Transition6_____
-State7_____________ --> State8_____________   : Transition7_____
-State8_____________ --> State9_____________   : Transition8_____
-State9_____________ --> State10_____________   : Transition9_____
 `,
       {}
     );

cypress/integration/rendering/xyChart.spec.js

@@ -1,7 +1,7 @@
 import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
 describe('XY Chart', () => {
-  it('should render the simplest possible xy-beta chart', () => {
+  it('should render the simplest possible chart', () => {
     imgSnapshotTest(
       `
       xychart-beta
@@ -10,19 +10,10 @@ describe('XY Chart', () => {
       {}
     );
   });
-  it('should render the simplest possible xy chart', () => {
-    imgSnapshotTest(
-      `
-      xychart
-        line [10, 30, 20]
-      `,
-      {}
-    );
-  });
   it('Should render a complete chart', () => {
     imgSnapshotTest(
       `
-      xychart
+      xychart-beta
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
@@ -35,7 +26,7 @@ describe('XY Chart', () => {
   it('Should render a chart without title', () => {
     imgSnapshotTest(
       `
-      xychart
+      xychart-beta
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
         bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
@@ -47,7 +38,7 @@ describe('XY Chart', () => {
   it('y-axis title not required', () => {
     imgSnapshotTest(
       `
-      xychart
+      xychart-beta
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis 4000 --> 11000
         bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
@@ -59,7 +50,7 @@ describe('XY Chart', () => {
   it('Should render a chart without y-axis with different range', () => {
     imgSnapshotTest(
       `
-      xychart
+      xychart-beta
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000]
         line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800]
@@ -70,7 +61,7 @@ describe('XY Chart', () => {
   it('x axis title not required', () => {
     imgSnapshotTest(
       `
-      xychart
+      xychart-beta
         x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000]
         line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800]
@@ -81,7 +72,7 @@ describe('XY Chart', () => {
   it('Multiple plots can be rendered', () => {
     imgSnapshotTest(
       `
-      xychart
+      xychart-beta
         line [23, 46, 77, 34]
         line [45, 32, 33, 12]
         bar [87, 54, 99, 85]
@@ -95,7 +86,7 @@ describe('XY Chart', () => {
   it('Decimals and negative numbers are supported', () => {
     imgSnapshotTest(
       `
-      xychart
+      xychart-beta
         y-axis -2.4 --> 3.5
         line [+1.3, .6, 2.4, -.34]
       `,
@@ -113,7 +104,7 @@ describe('XY Chart', () => {
           height: 20
           plotReservedSpacePercent: 100
       ---
-      xychart
+      xychart-beta
         line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
       `,
       {}
@@ -139,7 +130,7 @@ describe('XY Chart', () => {
             showTick: false
             showAxisLine: false
       ---
-      xychart
+      xychart-beta
         bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
       `,
       {}
@@ -149,7 +140,7 @@ describe('XY Chart', () => {
     imgSnapshotTest(
       `
       %%{init: {"xyChart": {"width": 1000, "height": 600, "titlePadding": 5, "titleFontSize": 10, "xAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5},  "yAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "plotBorderWidth": 5, "chartOrientation": "horizontal", "plotReservedSpacePercent": 60  }}}%%
-      xychart
+      xychart-beta
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
@@ -190,7 +181,7 @@ describe('XY Chart', () => {
           plotReservedSpacePercent: 60
           showDataLabel: true
       ---
-      xychart
+      xychart-beta
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
@@ -211,7 +202,7 @@ describe('XY Chart', () => {
           yAxis:
             showTitle: false
       ---
-      xychart
+      xychart-beta
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
@@ -232,7 +223,7 @@ describe('XY Chart', () => {
           yAxis:
             showLabel: false
       ---
-      xychart
+      xychart-beta
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
@@ -253,7 +244,7 @@ describe('XY Chart', () => {
           yAxis:
             showTick: false
       ---
-      xychart
+      xychart-beta
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
@@ -274,7 +265,7 @@ describe('XY Chart', () => {
           yAxis:
             showAxisLine: false
       ---
-      xychart
+      xychart-beta
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
@@ -303,7 +294,7 @@ describe('XY Chart', () => {
             xAxisLineColor: "#87ceeb"
             plotColorPalette: "#008000, #faba63"
       ---
-      xychart
+      xychart-beta
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
@@ -316,7 +307,7 @@ describe('XY Chart', () => {
   it('should use the correct distances between data points', () => {
     imgSnapshotTest(
       `
-      xychart
+      xychart-beta
         x-axis 0 --> 2
         line [0, 1, 0, 1]
         bar [1, 0, 1, 0]
@@ -334,7 +325,7 @@ describe('XY Chart', () => {
       xyChart:
         showDataLabel: true
     ---
-    xychart
+    xychart-beta
       title "Sales Revenue"
       x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
       y-axis "Revenue (in $)" 4000 --> 11000
@@ -353,7 +344,7 @@ describe('XY Chart', () => {
         showDataLabel: true
         chartOrientation: horizontal
     ---
-    xychart
+    xychart-beta
       title "Sales Revenue"
       x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
       y-axis "Revenue (in $)" 4000 --> 11000
@@ -366,7 +357,7 @@ describe('XY Chart', () => {
   it('should render vertical bar chart without labels by default', () => {
     imgSnapshotTest(
       `
-    xychart
+    xychart-beta
       title "Sales Revenue"
       x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
       y-axis "Revenue (in $)" 4000 --> 11000
@@ -384,7 +375,7 @@ describe('XY Chart', () => {
       xyChart:
         chartOrientation: horizontal
     ---
-    xychart
+    xychart-beta
       title "Sales Revenue"
       x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
       y-axis "Revenue (in $)" 4000 --> 11000
@@ -402,7 +393,7 @@ describe('XY Chart', () => {
       xyChart:
         showDataLabel: true
     ---
-      xychart
+      xychart-beta
         title "Multiple Bar Plots"
         x-axis Categories [A, B, C]
         y-axis "Values" 0 --> 100
@@ -421,7 +412,7 @@ describe('XY Chart', () => {
         showDataLabel: true
         chartOrientation: horizontal
     ---
-      xychart
+      xychart-beta
         title "Multiple Bar Plots"
         x-axis Categories [A, B, C]
         y-axis "Values" 0 --> 100
@@ -439,7 +430,7 @@ describe('XY Chart', () => {
       xyChart:
         showDataLabel: true
     ---
-      xychart
+      xychart-beta
         title "Single Bar Chart"
         x-axis Categories [A]
         y-axis "Value" 0 --> 100
@@ -458,7 +449,7 @@ describe('XY Chart', () => {
         showDataLabel: true
         chartOrientation: horizontal
     ---
-      xychart
+      xychart-beta
         title "Single Bar Chart"
         x-axis Categories [A]
         y-axis "Value" 0 --> 100
@@ -476,7 +467,7 @@ describe('XY Chart', () => {
       xyChart:
         showDataLabel: true
     ---
-      xychart
+      xychart-beta
         title "Decimal and Negative Values"
         x-axis Categories [A, B, C]
         y-axis -10 --> 10
@@ -495,7 +486,7 @@ describe('XY Chart', () => {
         showDataLabel: true
         chartOrientation: horizontal
     ---
-      xychart
+      xychart-beta
         title "Decimal and Negative Values"
         x-axis Categories [A, B, C]
         y-axis -10 --> 10
@@ -513,7 +504,7 @@ describe('XY Chart', () => {
       xyChart:
         showDataLabel: true
     ---
-    xychart
+    xychart-beta
             title "Sales Revenue"
             x-axis Months [jan,b,c]
             y-axis "Revenue (in $)" 4000 --> 12000
@@ -570,7 +561,7 @@ describe('XY Chart', () => {
         showDataLabel: true
         chartOrientation: horizontal
     ---
-    xychart
+    xychart-beta
             title "Sales Revenue"
             x-axis Months [jan,b,c]
             y-axis "Revenue (in $)" 4000 --> 12000
@@ -624,7 +615,7 @@ describe('XY Chart', () => {
         xyChart:
           showDataLabel: true
       ---
-      xychart
+      xychart-beta
         title "Sales Revenue"
         x-axis Months [jan,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s]
         y-axis "Revenue (in $)" 4000 --> 12000
@@ -681,7 +672,7 @@ describe('XY Chart', () => {
         showDataLabel: true
         chartOrientation: horizontal
     ---
-    xychart
+    xychart-beta
       title "Sales Revenue"
       x-axis Months [jan,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s]
       y-axis "Revenue (in $)" 4000 --> 12000
@@ -735,7 +726,7 @@ describe('XY Chart', () => {
       xyChart:
         showDataLabel: true
     ---
-    xychart
+    xychart-beta
             title "Sales Revenue"
             x-axis Months [jan]
             y-axis "Revenue (in $)" 3000 --> 12000
@@ -792,7 +783,7 @@ describe('XY Chart', () => {
         showDataLabel: true
         chartOrientation: horizontal
     ---
-    xychart
+    xychart-beta
             title "Sales Revenue"
             x-axis Months [jan]
             y-axis "Revenue (in $)" 3000 --> 12000

cypress/platform/darshan.html

@@ -1,35 +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>
-    <h1>Pie chart demos</h1>
-    <pre class="mermaid">
-     pie title Default text position: Animal adoption
-        accTitle: simple pie char demo
-        accDescr: pie chart with 3 sections: dogs, cats, rats. Most are dogs.
-         "dogs" : -60.67
-        "rats" : 40.12
-    </pre>
-
-    <hr />
-    <script type="module">
-      import mermaid from '/mermaid.esm.mjs';
-      mermaid.initialize({
-        theme: 'forest',
-        logLevel: 3,
-        securityLevel: 'loose',
-      });
-    </script>
-  </body>
-</html>

cypress/platform/knsv2.html

@@ -131,35 +131,6 @@
 
   <body>
     <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: elk
-        flowchart:
-          curve: linear
-      ---
-      flowchart LR
-          D["Use<br/>the<br/>editor"] -- Mermaid js --> I["fa:fa-code Text"]
-          I --> D & D
-          D@{ shape: question}
-          I@{ shape: question}
-</pre>
-    <pre id="diagram4" class="mermaid2">
----
-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">
 treemap
 "Section 1"
     "Leaf 1.1": 12
@@ -170,149 +141,84 @@ treemap
     "Leaf 2.2": 25
     "Leaf 2.3": 12
 
-    </pre>
+classDef class1   fill:red,color:blue,stroke:#FFD600;
-    <pre id="diagram5" class="mermaid">
-      ---
-      config:
-        layout: elk
-        flowchart:
-          curve: rounded
-      ---
-      flowchart LR
-          I["fa:fa-code Text"] -- Mermaid js --> D["Use<br/>the<br/>editor!"]
-          I --> D & D
-          D@{ shape: question}
-          I@{ shape: question}
 
-    </pre>
-    <pre id="diagram4" 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<br/>and features
-          On Automatic creation
-            Uses
-                Creative techniques
-                Strategic planning
-                Argument mapping
-        Tools
-          Pen and paper
-          Mermaid
 
-    </pre>
+</pre
-    <pre id="diagram4" class="mermaid">
+    >
-      ---
+    <pre id="diagram4" class="mermaid2">
-      config:
-        layout: elk
-        flowchart:
-          curve: linear
-      ---
-      flowchart LR
-          A[A] --> B[B]
-          A[A] --- B([C])
-          A@{ shape: diamond}
-          %%B@{ shape: diamond}
-
-    </pre>
-    <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: elk
-        flowchart:
-          curve: linear
-      ---
-      flowchart LR
-          A[A] -- Mermaid js --> B[B]
-          A[A] -- Mermaid js --- B[B]
-          A@{ shape: diamond}
-          B@{ shape: diamond}
-
-    </pre>
-    <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: elk
-        flowchart:
-          curve: rounded
-      ---
-      flowchart LR
-          D["Use the editor"] -- Mermaid js --> I["fa:fa-code Text"]
-          I --> D & D
-          D@{ shape: question}
-          I@{ shape: question}
-    </pre>
-    <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: elk
-        flowchart:
-          curve: rounded
-        elk:
-          nodePlacementStrategy: NETWORK_SIMPLEX
-      ---
-      flowchart LR
-          D["Use the editor"] -- Mermaid js --> I["fa:fa-code Text"]
-          D --> I & I
-          a["a"]
-          D@{ shape: trap-b}
-          I@{ shape: lean-l}
-    </pre>
-    <pre id="diagram4" class="mermaid">
 ---
 config:
-  layout: elk
+  treemap:
-
+    valueFormat: '$0,0'
 ---
-flowchart LR
+treemap
- %% subgraph s1["Untitled subgraph"]
+"Budget"
-        C["Evaluate"]
+    "Operations"
- %% end
+        "Salaries": 7000
+        "Equipment": 2000
+        "Supplies": 1000
+    "Marketing"
+        "Advertising": 4000
+        "Events": 1000
 
-    B --> C
+</pre
-    </pre>
+    >
     <pre id="diagram4" class="mermaid">
----
+    treemap
-config:
+      title Accessible Treemap Title
-  layout: elk
+      "Category A"
-  flowchart:
+          "Item A1": 10
-    //curve: linear
+          "Item A2": 20
----
+      "Category B"
-flowchart LR
+          "Item B1": 15
-%% A ==> B
+          "Item B2": 25
-%% A2 --> B2
-A{A} --> B((Bo boo)) & B & B & B
-
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
-      ---
-      config:
-        layout: elk
-        theme: default
-        look: classic
-      ---
       flowchart LR
-       subgraph s1["APA"]
+        AB["apa@apa@"] --> B(("`apa@apa`"))
-              D{"Use the editor"}
-        end
-       subgraph S2["S2"]
-              s1
-              I>"fa:fa-code Text"]
-              E["E"]
-        end
-          D -- Mermaid js --> I
-          D --> I & E
-          E --> I
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
+      flowchart
+        D(("for D"))
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+      flowchart LR
+        A e1@==> B
+        e1@{ animate: true}
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+  A e1@--> B
+  classDef animate stroke-width:2,stroke-dasharray:10\,8,stroke-dashoffset:-180,animation: edge-animation-frame 6s linear infinite, stroke-linecap: round
+  class e1 animate
+    </pre>
+    <h2>infinite</h2>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+  A e1@--> B
+  classDef animate stroke-dasharray: 9\,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
+  class e1 animate
+    </pre>
+    <h2>Mermaid - edge-animation-slow</h2>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+  A e1@--> B
+e1@{ animation: fast}
+    </pre>
+    <h2>Mermaid - edge-animation-fast</h2>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+  A e1@--> B
+  classDef animate stroke-dasharray: 1000,stroke-dashoffset: 1000,animation: dash 10s linear;
+  class e1 edge-animation-fast
+    </pre>
+
+    <pre id="diagram4" class="mermaid2">
+
+info    </pre
+    >
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
   layout: elk
@@ -337,7 +243,7 @@ config:
       end
       end
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
   layout: elk
@@ -350,7 +256,7 @@ config:
       D-->I
       D-->I
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
   layout: elk
@@ -389,7 +295,7 @@ flowchart LR
     n8@{ shape: rect}
 
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
   layout: elk
@@ -405,7 +311,7 @@ flowchart LR
 
 
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
   layout: elk
@@ -414,7 +320,7 @@ flowchart LR
     A{A} --> B & C
 </pre
     >
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
   layout: elk
@@ -426,7 +332,7 @@ flowchart LR
     end
 </pre
     >
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
   layout: elk
@@ -444,7 +350,7 @@ flowchart LR
 
 
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
   kanban:
@@ -463,81 +369,81 @@ kanban
     task3[💻 Develop login feature]@{ ticket: 103 }
 
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Default] --> A@{ icon: 'fa:bell', form: 'rounded' }
 
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Style] --> A@{ icon: 'fa:bell', form: 'rounded' }
 style A fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Class] --> A@{ icon: 'fa:bell', form: 'rounded' }
 A:::AClass
 classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
   nA[Class] --> A@{ icon: 'logos:aws', form: 'rounded' }
 
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Default] --> A@{ icon: 'fa:bell', form: 'square' }
 
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Style] --> A@{ icon: 'fa:bell', form: 'square' }
 style A fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Class] --> A@{ icon: 'fa:bell', form: 'square' }
 A:::AClass
 classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
   nA[Class] --> A@{ icon: 'logos:aws', form: 'square' }
 
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Default] --> A@{ icon: 'fa:bell', form: 'circle' }
 
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Style] --> A@{ icon: 'fa:bell', form: 'circle' }
 style A fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Class] --> A@{ icon: 'fa:bell', form: 'circle' }
 A:::AClass
 classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
   nA[Class] --> A@{ icon: 'logos:aws', form: 'circle' }
   A:::AClass
   classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
   nA[Style] --> A@{ icon: 'logos:aws', form: 'circle' }
   style A fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 kanban
   id2[In progress]
     docs[Create Blog about the new diagram]@{ priority: 'Very Low', ticket: MC-2037, assigned: 'knsv' }
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
   kanban:
@@ -566,7 +472,6 @@ kanban
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
       import layouts from './mermaid-layout-elk.esm.mjs';
-      import tidyTreeLayouts from './mermaid-layout-tidy-tree.esm.mjs';
 
       const staticBellIconPack = {
         prefix: 'fa6-regular',
@@ -592,7 +497,6 @@ kanban
         },
       ]);
       mermaid.registerLayoutLoaders(layouts);
-      mermaid.registerLayoutLoaders(tidyTreeLayouts);
       mermaid.parseError = function (err, hash) {
         console.error('Mermaid error: ', err);
       };
@@ -610,7 +514,7 @@ kanban
         // look: 'handDrawn',
         // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
         // layout: 'dagre',
-        layout: 'elk',
+        // layout: 'elk',
         // layout: 'fixed',
         // htmlLabels: false,
         flowchart: { titleTopMargin: 10 },

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

demos/block.html

@@ -10,7 +10,7 @@
   <body>
     <h1>Block diagram demos</h1>
     <pre id="diagram" class="mermaid">
-block
+block-beta
 columns 1
   db(("DB"))
   blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
@@ -26,7 +26,7 @@ columns 1
   style B fill:#f9F,stroke:#333,stroke-width:4px
     </pre>
     <pre id="diagram" class="mermaid">
-block
+block-beta
     A1["square"]
     B1("rounded")
     C1(("circle"))
@@ -36,7 +36,7 @@ block
     </pre>
 
     <pre id="diagram" class="mermaid">
-block
+block-beta
     A1(["stadium"])
     A2[["subroutine"]]
     B1[("cylinder")]
@@ -48,7 +48,7 @@ block
     </pre>
 
     <pre id="diagram" class="mermaid">
-block
+block-beta
   block:e:4
     columns 2
       f
@@ -57,7 +57,7 @@ block
 
     </pre>
     <pre id="diagram" class="mermaid">
-block
+block-beta
   block:e:4
     columns 2
       f
@@ -67,7 +67,7 @@ block
 
     </pre>
     <pre id="diagram" class="mermaid">
-block
+block-beta
   columns 3
   a:3
   block:e:3
@@ -80,7 +80,7 @@ block
 
     </pre>
     <pre id="diagram" class="mermaid">
-block
+block-beta
   columns 4
   a b c d
   block:e:4
@@ -97,19 +97,19 @@ flowchart LR
   X-- "a label" -->z
     </pre>
     <pre id="diagram" class="mermaid">
-block
+block-beta
 columns 5
    A space B
    A --x B
     </pre>
     <pre id="diagram" class="mermaid">
-block
+block-beta
 columns 3
   a["A wide one"] b:2 c:2 d
     </pre>
 
     <pre id="diagram" class="mermaid">
-block
+block-beta
 columns 3
   a b c
   e:3
@@ -117,7 +117,7 @@ columns 3
     </pre>
 
     <pre id="diagram" class="mermaid">
-block
+block-beta
 
   A1:3
   A2:1

demos/sankey.html

@@ -20,14 +20,12 @@
           width: 800
           nodeAlignment: left
       ---
-     sankey   
+      sankey-beta
-        a,b,8
+        Revenue,Expenses,10
-        b,c,8
+        Revenue,Profit,10
-        c,d,8
+        Expenses,Manufacturing,5
-        d,e,8
+        Expenses,Tax,3
-        
+        Expenses,Research,2
-        x,c,4
-        c,y,4 
     </pre>
 
     <h2>Energy flow</h2>
@@ -42,7 +40,7 @@
           linkColor: gradient
           nodeAlignment: justify
       ---
-      sankey
+      sankey-beta
 
       Agricultural 'waste',Bio-conversion,124.729
       Bio-conversion,Liquid,0.597

demos/xychart.html

@@ -16,7 +16,7 @@
   <body>
     <h1>XY Charts demos</h1>
     <pre class="mermaid">
-    xychart
+    xychart-beta
     title "Sales Revenue (in $)"
     x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
     y-axis "Revenue (in $)" 4000 --> 11000
@@ -26,7 +26,7 @@
     <hr />
     <h1>XY Charts horizontal</h1>
     <pre class="mermaid">
-    xychart horizontal
+    xychart-beta horizontal
     title "Basic xychart"
     x-axis "this is x axis" [category1, "category 2", category3, category4]
     y-axis yaxisText 10 --> 150
@@ -36,7 +36,7 @@
     <hr />
     <h1>XY Charts only lines and bar</h1>
     <pre class="mermaid">
-    xychart
+    xychart-beta
     line [23, 46, 77, 34]
     line [45, 32, 33, 12]
     line [87, 54, 99, 85]
@@ -48,13 +48,13 @@
     <hr />
     <h1>XY Charts with +ve and -ve numbers</h1>
     <pre class="mermaid">
-    xychart
+    xychart-beta
     line [+1.3, .6, 2.4, -.34]
     </pre>
 
     <h1>XY Charts Bar with multiple category</h1>
     <pre class="mermaid">
-    xychart
+    xychart-beta
     title "Basic xychart with many categories"
     x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
     y-axis yaxisText 10 --> 150
@@ -63,7 +63,7 @@
 
     <h1>XY Charts line with multiple category</h1>
     <pre class="mermaid">
-    xychart
+    xychart-beta
     title "Line chart with many category"
     x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
     y-axis yaxisText 10 --> 150
@@ -72,7 +72,7 @@
 
     <h1>XY Charts category with large text</h1>
     <pre class="mermaid">
-    xychart
+    xychart-beta
     title "Basic xychart with many categories with category overlap"
     x-axis "this is x axis" [category1, "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.", category3, category4, category5, category6, category7]
     y-axis yaxisText 10 --> 150
@@ -89,7 +89,7 @@ config:
     height: 20
     plotReservedSpacePercent: 100
 ---
-    xychart
+    xychart-beta
       line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
     </pre>
 
@@ -103,7 +103,7 @@ config:
     height: 20
     plotReservedSpacePercent: 100
 ---
-    xychart
+    xychart-beta
       bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
     </pre>
 
@@ -136,7 +136,7 @@ config:
     chartOrientation: horizontal
     plotReservedSpacePercent: 60
 ---
-    xychart
+    xychart-beta
       title "Sales Revenue"
       x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
       y-axis "Revenue (in $)" 4000 --> 11000
@@ -162,7 +162,7 @@ config:
       xAxisLineColor: "#87ceeb"
       plotColorPalette: "#008000, #faba63"
 ---
-    xychart
+    xychart-beta
       title "Sales Revenue"
       x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
       y-axis "Revenue (in $)" 4000 --> 11000

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

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

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

@@ -10,7 +10,7 @@
 
 # Interface: LayoutLoaderDefinition
 
-Defined in: [packages/mermaid/src/rendering-util/render.ts:24](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L24)
+Defined in: [packages/mermaid/src/rendering-util/render.ts:21](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L21)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/rendering-util/render.ts:24](https://github.co
 
 > `optional` **algorithm**: `string`
 
-Defined in: [packages/mermaid/src/rendering-util/render.ts:27](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L27)
+Defined in: [packages/mermaid/src/rendering-util/render.ts:24](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L24)
 
 ---
 
@@ -26,7 +26,7 @@ Defined in: [packages/mermaid/src/rendering-util/render.ts:27](https://github.co
 
 > **loader**: `LayoutLoader`
 
-Defined in: [packages/mermaid/src/rendering-util/render.ts:26](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L26)
+Defined in: [packages/mermaid/src/rendering-util/render.ts:23](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L23)
 
 ---
 
@@ -34,4 +34,4 @@ Defined in: [packages/mermaid/src/rendering-util/render.ts:26](https://github.co
 
 > **name**: `string`
 
-Defined in: [packages/mermaid/src/rendering-util/render.ts:25](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L25)
+Defined in: [packages/mermaid/src/rendering-util/render.ts:22](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L22)

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:132](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L132)
+Defined in: [packages/mermaid/src/config.type.ts:122](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L122)
 
 ---
 
@@ -26,7 +26,7 @@ Defined in: [packages/mermaid/src/config.type.ts:132](https://github.com/mermaid
 
 > `optional` **architecture**: `ArchitectureDiagramConfig`
 
-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:194](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L194)
 
 ---
 
@@ -34,7 +34,7 @@ Defined in: [packages/mermaid/src/config.type.ts:204](https://github.com/mermaid
 
 > `optional` **arrowMarkerAbsolute**: `boolean`
 
-Defined in: [packages/mermaid/src/config.type.ts:151](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L151)
+Defined in: [packages/mermaid/src/config.type.ts:141](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L141)
 
 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:211](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L211)
+Defined in: [packages/mermaid/src/config.type.ts:201](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L201)
 
 ---
 
@@ -53,7 +53,7 @@ Defined in: [packages/mermaid/src/config.type.ts:211](https://github.com/mermaid
 
 > `optional` **c4**: `C4DiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:208](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L208)
+Defined in: [packages/mermaid/src/config.type.ts:198](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L198)
 
 ---
 
@@ -61,7 +61,7 @@ Defined in: [packages/mermaid/src/config.type.ts:208](https://github.com/mermaid
 
 > `optional` **class**: `ClassDiagramConfig`
 
-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:187](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L187)
 
 ---
 
@@ -69,7 +69,7 @@ Defined in: [packages/mermaid/src/config.type.ts:197](https://github.com/mermaid
 
 > `optional` **darkMode**: `boolean`
 
-Defined in: [packages/mermaid/src/config.type.ts:123](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L123)
+Defined in: [packages/mermaid/src/config.type.ts:113](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L113)
 
 ---
 
@@ -77,7 +77,7 @@ Defined in: [packages/mermaid/src/config.type.ts:123](https://github.com/mermaid
 
 > `optional` **deterministicIds**: `boolean`
 
-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:174](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L174)
 
 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:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L191)
+Defined in: [packages/mermaid/src/config.type.ts:181](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L181)
 
 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:213](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L213)
+Defined in: [packages/mermaid/src/config.type.ts:203](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L203)
 
 ---
 
@@ -115,24 +115,12 @@ Defined in: [packages/mermaid/src/config.type.ts:213](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`
@@ -151,7 +139,7 @@ Elk specific option affecting how nodes are placed.
 
 > `optional` **er**: `ErDiagramConfig`
 
-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:189](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L189)
 
 ---
 
@@ -159,7 +147,7 @@ Defined in: [packages/mermaid/src/config.type.ts:199](https://github.com/mermaid
 
 > `optional` **flowchart**: `FlowchartDiagramConfig`
 
-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:182](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L182)
 
 ---
 
@@ -167,7 +155,7 @@ Defined in: [packages/mermaid/src/config.type.ts:192](https://github.com/mermaid
 
 > `optional` **fontFamily**: `string`
 
-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:121](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L121)
 
 Specifies the font to be used in the rendered diagrams.
 Can be any possible CSS `font-family`.
@@ -179,7 +167,7 @@ See <https://developer.mozilla.org/en-US/docs/Web/CSS/font-family>
 
 > `optional` **fontSize**: `number`
 
-Defined in: [packages/mermaid/src/config.type.ts:215](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L215)
+Defined in: [packages/mermaid/src/config.type.ts:205](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L205)
 
 ---
 
@@ -187,7 +175,7 @@ Defined in: [packages/mermaid/src/config.type.ts:215](https://github.com/mermaid
 
 > `optional` **forceLegacyMathML**: `boolean`
 
-Defined in: [packages/mermaid/src/config.type.ts:173](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L173)
+Defined in: [packages/mermaid/src/config.type.ts:163](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L163)
 
 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.
@@ -199,7 +187,7 @@ If set to true, ignores legacyMathML.
 
 > `optional` **gantt**: `GanttDiagramConfig`
 
-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:184](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L184)
 
 ---
 
@@ -207,7 +195,7 @@ Defined in: [packages/mermaid/src/config.type.ts:194](https://github.com/mermaid
 
 > `optional` **gitGraph**: `GitGraphDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:207](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L207)
+Defined in: [packages/mermaid/src/config.type.ts:197](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L197)
 
 ---
 
@@ -225,7 +213,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:124](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L124)
+Defined in: [packages/mermaid/src/config.type.ts:114](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L114)
 
 ---
 
@@ -233,7 +221,7 @@ Defined in: [packages/mermaid/src/config.type.ts:124](https://github.com/mermaid
 
 > `optional` **journey**: `JourneyDiagramConfig`
 
-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:185](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L185)
 
 ---
 
@@ -241,7 +229,7 @@ Defined in: [packages/mermaid/src/config.type.ts:195](https://github.com/mermaid
 
 > `optional` **kanban**: `KanbanDiagramConfig`
 
-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:196](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L196)
 
 ---
 
@@ -259,7 +247,7 @@ Defines which layout algorithm to use for rendering the diagram.
 
 > `optional` **legacyMathML**: `boolean`
 
-Defined in: [packages/mermaid/src/config.type.ts:166](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L166)
+Defined in: [packages/mermaid/src/config.type.ts:156](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L156)
 
 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
@@ -272,7 +260,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:137](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L137)
+Defined in: [packages/mermaid/src/config.type.ts:127](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L127)
 
 This option decides the amount of logging to be used by mermaid.
 
@@ -292,7 +280,7 @@ Defines which main look to use for the diagram.
 
 > `optional` **markdownAutoWrap**: `boolean`
 
-Defined in: [packages/mermaid/src/config.type.ts:216](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L216)
+Defined in: [packages/mermaid/src/config.type.ts:206](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L206)
 
 ---
 
@@ -320,7 +308,7 @@ The maximum allowed size of the users text diagram
 
 > `optional` **mindmap**: `MindmapDiagramConfig`
 
-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:195](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L195)
 
 ---
 
@@ -328,7 +316,7 @@ Defined in: [packages/mermaid/src/config.type.ts:205](https://github.com/mermaid
 
 > `optional` **packet**: `PacketDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:210](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L210)
+Defined in: [packages/mermaid/src/config.type.ts:200](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L200)
 
 ---
 
@@ -336,7 +324,7 @@ Defined in: [packages/mermaid/src/config.type.ts:210](https://github.com/mermaid
 
 > `optional` **pie**: `PieDiagramConfig`
 
-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:190](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L190)
 
 ---
 
@@ -344,7 +332,7 @@ Defined in: [packages/mermaid/src/config.type.ts:200](https://github.com/mermaid
 
 > `optional` **quadrantChart**: `QuadrantChartConfig`
 
-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:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L191)
 
 ---
 
@@ -352,7 +340,7 @@ Defined in: [packages/mermaid/src/config.type.ts:201](https://github.com/mermaid
 
 > `optional` **radar**: `RadarDiagramConfig`
 
-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:202](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L202)
 
 ---
 
@@ -360,7 +348,7 @@ Defined in: [packages/mermaid/src/config.type.ts:212](https://github.com/mermaid
 
 > `optional` **requirement**: `RequirementDiagramConfig`
 
-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:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L193)
 
 ---
 
@@ -368,7 +356,7 @@ Defined in: [packages/mermaid/src/config.type.ts:203](https://github.com/mermaid
 
 > `optional` **sankey**: `SankeyDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:209](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L209)
+Defined in: [packages/mermaid/src/config.type.ts:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L199)
 
 ---
 
@@ -376,7 +364,7 @@ Defined in: [packages/mermaid/src/config.type.ts:209](https://github.com/mermaid
 
 > `optional` **secure**: `string`\[]
 
-Defined in: [packages/mermaid/src/config.type.ts:158](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L158)
+Defined in: [packages/mermaid/src/config.type.ts:148](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L148)
 
 This option controls which `currentConfig` keys are considered secure and
 can only be changed via call to `mermaid.initialize`.
@@ -388,7 +376,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:141](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L141)
+Defined in: [packages/mermaid/src/config.type.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L131)
 
 Level of trust for parsed diagram
 
@@ -398,7 +386,7 @@ Level of trust for parsed diagram
 
 > `optional` **sequence**: `SequenceDiagramConfig`
 
-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:183](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L183)
 
 ---
 
@@ -406,7 +394,7 @@ Defined in: [packages/mermaid/src/config.type.ts:193](https://github.com/mermaid
 
 > `optional` **startOnLoad**: `boolean`
 
-Defined in: [packages/mermaid/src/config.type.ts:145](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L145)
+Defined in: [packages/mermaid/src/config.type.ts:135](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L135)
 
 Dictates whether mermaid starts on Page load
 
@@ -416,7 +404,7 @@ Dictates whether mermaid starts on Page load
 
 > `optional` **state**: `StateDiagramConfig`
 
-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:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L188)
 
 ---
 
@@ -424,7 +412,7 @@ Defined in: [packages/mermaid/src/config.type.ts:198](https://github.com/mermaid
 
 > `optional` **suppressErrorRendering**: `boolean`
 
-Defined in: [packages/mermaid/src/config.type.ts:222](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L222)
+Defined in: [packages/mermaid/src/config.type.ts:212](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L212)
 
 Suppresses inserting 'Syntax error' diagram in the DOM.
 This is useful when you want to control how to handle syntax errors in your application.
@@ -462,7 +450,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:196](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L196)
+Defined in: [packages/mermaid/src/config.type.ts:186](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L186)
 
 ---
 
@@ -470,7 +458,7 @@ Defined in: [packages/mermaid/src/config.type.ts:196](https://github.com/mermaid
 
 > `optional` **wrap**: `boolean`
 
-Defined in: [packages/mermaid/src/config.type.ts:214](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L214)
+Defined in: [packages/mermaid/src/config.type.ts:204](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L204)
 
 ---
 
@@ -478,4 +466,4 @@ Defined in: [packages/mermaid/src/config.type.ts:214](https://github.com/mermaid
 
 > `optional` **xyChart**: `XYChartConfig`
 
-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:192](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L192)

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

@@ -10,7 +10,7 @@
 
 # Interface: RenderOptions
 
-Defined in: [packages/mermaid/src/rendering-util/render.ts:10](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L10)
+Defined in: [packages/mermaid/src/rendering-util/render.ts:7](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L7)
 
 ## Properties
 
@@ -18,4 +18,4 @@ Defined in: [packages/mermaid/src/rendering-util/render.ts:10](https://github.co
 
 > `optional` **algorithm**: `string`
 
-Defined in: [packages/mermaid/src/rendering-util/render.ts:11](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L11)
+Defined in: [packages/mermaid/src/rendering-util/render.ts:8](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L8)

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/syntax/block.md

@@ -9,7 +9,7 @@
 ## Introduction to Block Diagrams
 
 ```mermaid-example
-block
+block-beta
 columns 1
   db(("DB"))
   blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
@@ -26,7 +26,7 @@ columns 1
 ```
 
 ```mermaid
-block
+block-beta
 columns 1
   db(("DB"))
   blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
@@ -80,12 +80,12 @@ At its core, a block diagram consists of blocks representing different entities
 To create a simple block diagram with three blocks labeled 'a', 'b', and 'c', the syntax is as follows:
 
 ```mermaid-example
-block
+block-beta
   a b c
 ```
 
 ```mermaid
-block
+block-beta
   a b c
 ```
 
@@ -101,13 +101,13 @@ While simple block diagrams are linear and straightforward, more complex systems
 In scenarios where you need to distribute blocks across multiple columns, you can specify the number of columns and arrange the blocks accordingly. Here's how to create a block diagram with three columns and four blocks, where the fourth block appears in a second row:
 
 ```mermaid-example
-block
+block-beta
   columns 3
   a b c d
 ```
 
 ```mermaid
-block
+block-beta
   columns 3
   a b c d
 ```
@@ -130,13 +130,13 @@ In more complex diagrams, you may need blocks that span multiple columns to emph
 To create a block diagram where one block spans across two columns, you can specify the desired width for each block:
 
 ```mermaid-example
-block
+block-beta
   columns 3
   a["A label"] b:2 c:2 d
 ```
 
 ```mermaid
-block
+block-beta
   columns 3
   a["A label"] b:2 c:2 d
 ```
@@ -153,7 +153,7 @@ Composite blocks, or blocks within blocks, are an advanced feature in Mermaid's
 Creating a composite block involves defining a parent block and then nesting other blocks within it. Here's how to define a composite block with nested elements:
 
 ```mermaid-example
-block
+block-beta
     block
       D
     end
@@ -161,7 +161,7 @@ block
 ```
 
 ```mermaid
-block
+block-beta
     block
       D
     end
@@ -180,7 +180,7 @@ Mermaid also allows for dynamic adjustment of column widths based on the content
 In diagrams with varying block sizes, Mermaid automatically adjusts the column widths to fit the largest block in each column. Here's an example:
 
 ```mermaid-example
-block
+block-beta
   columns 3
   a:3
   block:group1:2
@@ -195,7 +195,7 @@ block
 ```
 
 ```mermaid
-block
+block-beta
   columns 3
   a:3
   block:group1:2
@@ -215,7 +215,7 @@ This example demonstrates how Mermaid dynamically adjusts the width of the colum
 In scenarios where you need to stack blocks horizontally, you can use column width to accomplish the task. Blocks can be arranged vertically by putting them in a single column. Here is how you can create a block diagram in which 4 blocks are stacked on top of each other:
 
 ```mermaid-example
-block
+block-beta
   block
     columns 1
     a["A label"] b c d
@@ -223,7 +223,7 @@ block
 ```
 
 ```mermaid
-block
+block-beta
   block
     columns 1
     a["A label"] b c d
@@ -247,12 +247,12 @@ Mermaid supports a range of block shapes to suit different diagramming needs, fr
 To create a block with round edges, which can be used to represent a softer or more flexible component:
 
 ```mermaid-example
-block
+block-beta
     id1("This is the text in the box")
 ```
 
 ```mermaid
-block
+block-beta
     id1("This is the text in the box")
 ```
 
@@ -261,12 +261,12 @@ block
 A stadium-shaped block, resembling an elongated circle, can be used for components that are process-oriented:
 
 ```mermaid-example
-block
+block-beta
     id1(["This is the text in the box"])
 ```
 
 ```mermaid
-block
+block-beta
     id1(["This is the text in the box"])
 ```
 
@@ -275,12 +275,12 @@ block
 For representing subroutines or contained processes, a block with double vertical lines is useful:
 
 ```mermaid-example
-block
+block-beta
     id1[["This is the text in the box"]]
 ```
 
 ```mermaid
-block
+block-beta
     id1[["This is the text in the box"]]
 ```
 
@@ -289,12 +289,12 @@ block
 The cylindrical shape is ideal for representing databases or storage components:
 
 ```mermaid-example
-block
+block-beta
     id1[("Database")]
 ```
 
 ```mermaid
-block
+block-beta
     id1[("Database")]
 ```
 
@@ -303,12 +303,12 @@ block
 A circle can be used for centralized or pivotal components:
 
 ```mermaid-example
-block
+block-beta
     id1(("This is the text in the circle"))
 ```
 
 ```mermaid
-block
+block-beta
     id1(("This is the text in the circle"))
 ```
 
@@ -319,36 +319,36 @@ For decision points, use a rhombus, and for unique or specialized processes, asy
 **Asymmetric**
 
 ```mermaid-example
-block
+block-beta
   id1>"This is the text in the box"]
 ```
 
 ```mermaid
-block
+block-beta
   id1>"This is the text in the box"]
 ```
 
 **Rhombus**
 
 ```mermaid-example
-block
+block-beta
     id1{"This is the text in the box"}
 ```
 
 ```mermaid
-block
+block-beta
     id1{"This is the text in the box"}
 ```
 
 **Hexagon**
 
 ```mermaid-example
-block
+block-beta
     id1{{"This is the text in the box"}}
 ```
 
 ```mermaid
-block
+block-beta
     id1{{"This is the text in the box"}}
 ```
 
@@ -357,7 +357,7 @@ block
 Parallelogram and trapezoid shapes are perfect for inputs/outputs and transitional processes:
 
 ```mermaid-example
-block
+block-beta
   id1[/"This is the text in the box"/]
   id2[\"This is the text in the box"\]
   A[/"Christmas"\]
@@ -365,7 +365,7 @@ block
 ```
 
 ```mermaid
-block
+block-beta
   id1[/"This is the text in the box"/]
   id2[\"This is the text in the box"\]
   A[/"Christmas"\]
@@ -377,12 +377,12 @@ block
 For highlighting critical or high-priority components, a double circle can be effective:
 
 ```mermaid-example
-block
+block-beta
     id1((("This is the text in the circle")))
 ```
 
 ```mermaid
-block
+block-beta
     id1((("This is the text in the circle")))
 ```
 
@@ -395,7 +395,7 @@ Mermaid also offers unique shapes like block arrows and space blocks for directi
 Block arrows can visually indicate direction or flow within a process:
 
 ```mermaid-example
-block
+block-beta
   blockArrowId<["Label"]>(right)
   blockArrowId2<["Label"]>(left)
   blockArrowId3<["Label"]>(up)
@@ -406,7 +406,7 @@ block
 ```
 
 ```mermaid
-block
+block-beta
   blockArrowId<["Label"]>(right)
   blockArrowId2<["Label"]>(left)
   blockArrowId3<["Label"]>(up)
@@ -421,14 +421,14 @@ block
 Space blocks can be used to create intentional empty spaces in the diagram, which is useful for layout and readability:
 
 ```mermaid-example
-block
+block-beta
   columns 3
   a space b
   c   d   e
 ```
 
 ```mermaid
-block
+block-beta
   columns 3
   a space b
   c   d   e
@@ -437,12 +437,12 @@ block
 or
 
 ```mermaid-example
-block
+block-beta
   ida space:3 idb idc
 ```
 
 ```mermaid
-block
+block-beta
   ida space:3 idb idc
 ```
 
@@ -467,13 +467,13 @@ The most fundamental aspect of connecting blocks is the use of arrows or links.
 A simple link with an arrow can be created to show direction or flow from one block to another:
 
 ```mermaid-example
-block
+block-beta
   A space B
   A-->B
 ```
 
 ```mermaid
-block
+block-beta
   A space B
   A-->B
 ```
@@ -490,13 +490,13 @@ Example - Text with Links
 To add text to a link, the syntax includes the text within the link definition:
 
 ```mermaid-example
-block
+block-beta
   A space:2 B
   A-- "X" -->B
 ```
 
 ```mermaid
-block
+block-beta
   A space:2 B
   A-- "X" -->B
 ```
@@ -506,7 +506,7 @@ This example show how to add descriptive text to the links, enhancing the inform
 Example - Edges and Styles:
 
 ```mermaid-example
-block
+block-beta
 columns 1
   db(("DB"))
   blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
@@ -523,7 +523,7 @@ columns 1
 ```
 
 ```mermaid
-block
+block-beta
 columns 1
   db(("DB"))
   blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
@@ -552,7 +552,7 @@ Mermaid enables detailed styling of individual blocks, allowing you to apply var
 To apply custom styles to a block, you can use the `style` keyword followed by the block identifier and the desired CSS properties:
 
 ```mermaid-example
-block
+block-beta
   id1 space id2
   id1("Start")-->id2("Stop")
   style id1 fill:#636,stroke:#333,stroke-width:4px
@@ -560,7 +560,7 @@ block
 ```
 
 ```mermaid
-block
+block-beta
   id1 space id2
   id1("Start")-->id2("Stop")
   style id1 fill:#636,stroke:#333,stroke-width:4px
@@ -574,7 +574,7 @@ Mermaid enables applying styling to classes, which could make styling easier if
 #### Example - Styling a Single Class
 
 ```mermaid-example
-block
+block-beta
   A space B
   A-->B
   classDef blue fill:#6e6ce6,stroke:#333,stroke-width:4px;
@@ -583,7 +583,7 @@ block
 ```
 
 ```mermaid
-block
+block-beta
   A space B
   A-->B
   classDef blue fill:#6e6ce6,stroke:#333,stroke-width:4px;
@@ -608,7 +608,7 @@ Combining the elements of structure, linking, and styling, we can create compreh
 Illustrating a simple software system architecture with interconnected components:
 
 ```mermaid-example
-block
+block-beta
   columns 3
   Frontend blockArrowId6<[" "]>(right) Backend
   space:2 down<[" "]>(down)
@@ -621,7 +621,7 @@ block
 ```
 
 ```mermaid
-block
+block-beta
   columns 3
   Frontend blockArrowId6<[" "]>(right) Backend
   space:2 down<[" "]>(down)
@@ -640,7 +640,7 @@ This example shows a basic architecture with a frontend, backend, and database.
 Representing a business process flow with decision points and multiple stages:
 
 ```mermaid-example
-block
+block-beta
   columns 3
   Start(("Start")) space:2
   down<[" "]>(down) space:2
@@ -653,7 +653,7 @@ block
 ```
 
 ```mermaid
-block
+block-beta
   columns 3
   Start(("Start")) space:2
   down<[" "]>(down) space:2
@@ -682,7 +682,7 @@ Understanding and avoiding common syntax errors is key to a smooth experience wi
 A common mistake is incorrect linking syntax, which can lead to unexpected results or broken diagrams:
 
 ```
-block
+block-beta
   A - B
 ```
 
@@ -690,13 +690,13 @@ block
 Ensure that links between blocks are correctly specified with arrows (--> or ---) to define the direction and type of connection. Also remember that one of the fundamentals for block diagram is to give the author full control of where the boxes are positioned so in the example you need to add a space between the boxes:
 
 ```mermaid-example
-block
+block-beta
   A space B
   A --> B
 ```
 
 ```mermaid
-block
+block-beta
   A space B
   A --> B
 ```
@@ -706,13 +706,13 @@ block
 Applying styles in the wrong context or with incorrect syntax can lead to blocks not being styled as intended:
 
 ```mermaid-example
-  block
+  block-beta
     A
     style A fill#969;
 ```
 
 ```mermaid
-  block
+  block-beta
     A
     style A fill#969;
 ```
@@ -721,14 +721,14 @@ Applying styles in the wrong context or with incorrect syntax can lead to blocks
 Correct the syntax by ensuring proper separation of style properties with commas and using the correct CSS property format:
 
 ```mermaid-example
-block
+block-beta
   A
   style A fill:#969,stroke:#333;
 
 ```
 
 ```mermaid
-block
+block-beta
   A
   style A fill:#969,stroke:#333;
 

docs/syntax/flowchart.md

@@ -326,9 +326,7 @@ Below is a comprehensive list of the newly introduced shapes and their correspon
 
 | **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`                                             |

docs/syntax/pie.md

@@ -37,11 +37,6 @@ Drawing a pie chart is really simple in mermaid.
   - Followed by `:` colon as separator
   - Followed by `positive numeric value` (supported up to two decimal places)
 
-**Note:**
-
-> Pie chart values must be **positive numbers greater than zero**.\
-> **Negative values are not allowed** and will result in an error.
-
 \[pie] \[showData] (OPTIONAL)
 \[title] \[titlevalue] (OPTIONAL)
 "\[datakey1]" : \[dataValue1]

docs/syntax/sankey.md

@@ -23,7 +23,7 @@ config:
   sankey:
     showValues: false
 ---
-sankey
+sankey-beta
 
 Agricultural 'waste',Bio-conversion,124.729
 Bio-conversion,Liquid,0.597
@@ -101,7 +101,7 @@ config:
   sankey:
     showValues: false
 ---
-sankey
+sankey-beta
 
 Agricultural 'waste',Bio-conversion,124.729
 Bio-conversion,Liquid,0.597
@@ -175,7 +175,7 @@ Wind,Electricity grid,289.366
 
 ## Syntax
 
-The idea behind syntax is that a user types `sankey` keyword first, then pastes raw CSV below and get the result.
+The idea behind syntax is that a user types `sankey-beta` keyword first, then pastes raw CSV below and get the result.
 
 It implements CSV standard as [described here](https://www.ietf.org/rfc/rfc4180.txt) with subtle **differences**:
 
@@ -187,7 +187,7 @@ It implements CSV standard as [described here](https://www.ietf.org/rfc/rfc4180.
 It is implied that 3 columns inside CSV should represent `source`, `target` and `value` accordingly:
 
 ```mermaid-example
-sankey
+sankey-beta
 
 %% source,target,value
 Electricity grid,Over generation / exports,104.453
@@ -196,7 +196,7 @@ Electricity grid,H2 conversion,27.14
 ```
 
 ```mermaid
-sankey
+sankey-beta
 
 %% source,target,value
 Electricity grid,Over generation / exports,104.453
@@ -209,7 +209,7 @@ Electricity grid,H2 conversion,27.14
 CSV does not support empty lines without comma delimiters by default. But you can add them if needed:
 
 ```mermaid-example
-sankey
+sankey-beta
 
 Bio-conversion,Losses,26.862
 
@@ -219,7 +219,7 @@ Bio-conversion,Gas,81.144
 ```
 
 ```mermaid
-sankey
+sankey-beta
 
 Bio-conversion,Losses,26.862
 
@@ -233,14 +233,14 @@ Bio-conversion,Gas,81.144
 If you need to have a comma, wrap it in double quotes:
 
 ```mermaid-example
-sankey
+sankey-beta
 
 Pumped heat,"Heating and cooling, homes",193.026
 Pumped heat,"Heating and cooling, commercial",70.672
 ```
 
 ```mermaid
-sankey
+sankey-beta
 
 Pumped heat,"Heating and cooling, homes",193.026
 Pumped heat,"Heating and cooling, commercial",70.672
@@ -251,14 +251,14 @@ Pumped heat,"Heating and cooling, commercial",70.672
 If you need to have double quote, put a pair of them inside quoted string:
 
 ```mermaid-example
-sankey
+sankey-beta
 
 Pumped heat,"Heating and cooling, ""homes""",193.026
 Pumped heat,"Heating and cooling, ""commercial""",70.672
 ```
 
 ```mermaid
-sankey
+sankey-beta
 
 Pumped heat,"Heating and cooling, ""homes""",193.026
 Pumped heat,"Heating and cooling, ""commercial""",70.672

docs/syntax/xyChart.md

@@ -13,7 +13,7 @@
 ## Example
 
 ```mermaid-example
-xychart
+xychart-beta
     title "Sales Revenue"
     x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
     y-axis "Revenue (in $)" 4000 --> 11000
@@ -22,7 +22,7 @@ xychart
 ```
 
 ```mermaid
-xychart
+xychart-beta
     title "Sales Revenue"
     x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
     y-axis "Revenue (in $)" 4000 --> 11000
@@ -40,7 +40,7 @@ xychart
 The chart can be drawn horizontal or vertical, default value is vertical.
 
 ```
-xychart horizontal
+xychart-beta horizontal
 ...
 ```
 
@@ -51,7 +51,7 @@ The title is a short description of the chart and it will always render on top o
 #### Example
 
 ```
-xychart
+xychart-beta
     title "This is a simple example"
     ...
 ```
@@ -98,10 +98,10 @@ A bar chart offers the capability to graphically depict bars.
 
 #### Simplest example
 
-The only two things required are the chart name (`xychart`) and one data set. So you will be able to draw a chart with a simple config like
+The only two things required are the chart name (`xychart-beta`) and one data set. So you will be able to draw a chart with a simple config like
 
 ```
-xychart
+xychart-beta
     line [+1.3, .6, 2.4, -.34]
 ```
 
@@ -176,7 +176,7 @@ config:
         xyChart:
             titleColor: "#ff0000"
 ---
-xychart
+xychart-beta
     title "Sales Revenue"
     x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
     y-axis "Revenue (in $)" 4000 --> 11000
@@ -195,7 +195,7 @@ config:
         xyChart:
             titleColor: "#ff0000"
 ---
-xychart
+xychart-beta
     title "Sales Revenue"
     x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
     y-axis "Revenue (in $)" 4000 --> 11000

eslint.config.js

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

instructions.md

@@ -1,145 +0,0 @@
-Please help me to implement the tidy-tree algorithm.
-
-- I have added a placeholder with the correct signature in `packages/mermaid/src/rendering-util/layout-algorithms/tidy-tree/`.
-
-Replace the cytoscape layout with one using tidy-tree.
-
-This is the API for tidy-tree:
-
-```
-# non-layered-tidy-tree-layout
-
-Draw non-layered tidy trees in linear time.
-
-> This a JavaScript port from the project [cwi-swat/non-layered-tidy-trees](https://github.com/cwi-swat/non-layered-tidy-trees), which is written in Java. The algorithm used in that project is from the paper by _A.J. van der Ploeg_, [Drawing Non-layered Tidy Trees in Linear Time](http://oai.cwi.nl/oai/asset/21856/21856B.pdf). There is another JavaScript port from that project [d3-flextree](https://github.com/Klortho/d3-flextree), which depends on _d3-hierarchy_. This project is dependency free.
-
-## Getting started
-
-### Installation
-
-```
-
-npm install non-layered-tidy-tree-layout
-
-```
-
-Or
-
-```
-
-yarn add non-layered-tidy-tree-layout
-
-````
-
-There's also a built verison: `dist/non-layered-tidy-tree-layout.js` for use with browser `<script>` tag, or as a Javascript module.
-
-### Usage
-
-```js
-import { BoundingBox, Layout } from 'non-layered-tidy-tree-layout'
-
-// BoundingBox(gap, bottomPadding)
-const bb = new BoundingBox(10, 20)
-const layout = new Layout(bb)
-const treeData = {
-  id: 0,
-  width: 40,
-  height: 40,
-  children: [
-    {
-      id: 1,
-      width: 40,
-      height: 40,
-      children: [{ id: 6, width: 400, height: 40 }]
-    },
-    { id: 2, width: 40, height: 40 },
-    { id: 3, width: 40, height: 40 },
-    { id: 4, width: 40, height: 40 },
-    { id: 5, width: 40, height: 80 }
-  ]
-}
-const { result, boundingBox } = layout.layout(treeData)
-
-// result:
-// {
-//   id: 0,
-//   x: 300,
-//   y: 0,
-//   width: 40,
-//   height: 40,
-//   children: [
-//     {
-//       id: 1,
-//       x: 185,
-//       y: 60,
-//       width: 40,
-//       height: 40,
-//       children: [
-//         { id: 6, x: 5, y: 120, width: 400, height: 40 }
-//       ]
-//     },
-//     { id: 2, x: 242.5, y: 60, width: 40, height: 40 },
-//     { id: 3, x: 300, y: 60, width: 40, height: 40 },
-//     { id: 4, x: 357.5, y: 60, width: 40, height: 40 },
-//     { id: 5, x: 415, y: 60, width: 40, height: 80 }
-//   ]
-// }
-//
-// boundingBox:
-// {
-//   left: 5,
-//   right: 455,
-//   top: 0,
-//   bottom: 160
-// }
-````
-
-The method `Layout.layout` modifies `treeData` inplace. It returns an object like `{ result: treeData, boundingBox: {left: num, right: num, top: num, bottom: num} }`. `result` is the same object `treeData` with calculated coordinates, `boundingBox` are the coordinates for the whole tree:
-
-![](./screenshots/1.png)
-
-The red dashed lines are the bounding boxes for each node. `Layout.layout()` produces coordinates to draw nodes, which are the grey boxes with black border.
-
-The library also provides a class `Tree` and a method `layout`.
-
-```js
-/**
- * Constructor for Tree.
- * @param {number} width - width of bounding box
- * @param {number} height - height of bounding box
- * @param {number} y - veritcal coordinate of bounding box
- * @param {array} children - a list of Tree instances
- */
-new Tree(width, height, y, children);
-
-/**
- * Calculate x, y coordindates and assign them to tree.
- * @param {Object} tree - a Tree object
- */
-layout(tree);
-```
-
-In case your data structure are not the same as provided by the example above, you can refer to `src/helpers.js` to implement a `Layout` class that converts your data to a `Tree`, then call `layout` to calculate the coordinates for drawing.
-
-## License
-
-[MIT](./LICENSE)
-
-## Changelog
-
-### [2.0.1]
-
-- Fixed bounding box calculation in `Layout.getSize` and `Layout.assignLayout` and `Layout.layout`
-
-### [2.0.0]
-
-- Added `Layout.layout`
-- Removed `Layout.layoutTreeData`
-
-### [1.0.0]
-
-- Added `Layout`, `BoundingBox`, `layout`, `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.d.ts

@@ -1,19 +0,0 @@
-import type { InternalHelpers, LayoutData, RenderOptions, SVG } from 'mermaid';
-export declare const render: (
-  data4Layout: LayoutData,
-  svg: SVG,
-  {
-    common,
-    getConfig,
-    insertCluster,
-    insertEdge,
-    insertEdgeLabel,
-    insertMarkers,
-    insertNode,
-    interpolateToCurve,
-    labelHelper,
-    log,
-    positionEdgeLabel,
-  }: InternalHelpers,
-  { algorithm }: RenderOptions
-) => Promise<void>;

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

@@ -1,23 +1,10 @@
-import type {
-  InternalHelpers,
-  LayoutData,
-  RenderOptions,
-  SVG,
-  SVGGroup,
-} from '@mermaid-chart/mermaid';
-// @ts-ignore TODO: Investigate D3 issue
 import { curveLinear } from 'd3';
 import ELK from 'elkjs/lib/elk.bundled.js';
+import type { InternalHelpers, LayoutData, RenderOptions, SVG, SVGGroup } from 'mermaid';
 import { type TreeData, findCommonAncestor } from './find-common-ancestor.js';
 
 type Node = LayoutData['nodes'][number];
 
-// Minimal structural type to avoid depending on d3 Selection typings
-interface D3Selection<T extends Element> {
-  node(): T | null;
-  attr(name: string, value: string): D3Selection<T>;
-}
-
 interface LabelData {
   width: number;
   height: number;
@@ -26,9 +13,9 @@ interface LabelData {
 }
 
 interface NodeWithVertex extends Omit<Node, 'domId'> {
-  children?: LayoutData['nodes'];
+  children?: unknown[];
   labelData?: LabelData;
-  domId?: D3Selection<SVGAElement | SVGGElement>;
+  domId?: Node['domId'] | SVGGroup | d3.Selection<SVGAElement, unknown, Element | null, unknown>;
 }
 
 export const render = async (
@@ -64,13 +51,14 @@ export const render = async (
 
     // Add the element to the DOM
     if (!node.isGroup) {
-      const child = node as NodeWithVertex;
+      const child: NodeWithVertex = {
+        ...node,
+      };
       graph.children.push(child);
-      nodeDb[node.id] = node;
+      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.width = boundingBox.width;
       child.height = boundingBox.height;
@@ -80,9 +68,7 @@ export const render = async (
         ...node,
         children: [],
       };
-      // Let elk render with the copy
       graph.children.push(child);
-      // Save the original containing the intersection function
       nodeDb[node.id] = child;
       await addVertices(nodeEl, nodeArr, child, node.id);
 
@@ -157,7 +143,7 @@ export const render = async (
             height: node.height,
           };
           if (node.isGroup) {
-            log.debug('Id abc88 subgraph = ', node.id, node.x, node.y, node.labelData);
+            log.debug('id abc88 subgraph = ', node.id, node.x, node.y, node.labelData);
             const subgraphEl = subgraphsEl.insert('g').attr('class', 'subgraph');
             // TODO use faster way of cloning
             const clusterNode = JSON.parse(JSON.stringify(node));
@@ -166,10 +152,10 @@ export const render = async (
             clusterNode.width = Math.max(clusterNode.width, node.labelData.width);
             await insertCluster(subgraphEl, clusterNode);
 
-            log.debug('Id (UIO)= ', node.id, node.width, node.shape, node.labels);
+            log.debug('id (UIO)= ', node.id, node.width, node.shape, node.labels);
           } else {
             log.info(
-              'Id NODE = ',
+              'id NODE = ',
               node.id,
               node.x,
               node.y,
@@ -211,19 +197,25 @@ export const render = async (
       });
     });
 
+    subgraphs.forEach(function (subgraph: { id: string | number }) {
+      const data: any = { id: subgraph.id };
+      if (parentLookupDb.parentById[subgraph.id] !== undefined) {
+        data.parent = parentLookupDb.parentById[subgraph.id];
+      }
+    });
     return parentLookupDb;
   };
 
   const getEdgeStartEndPoint = (edge: any) => {
-    // edge.start and edge.end are IDs (string/number) in our layout data
+    const source: any = edge.start;
-    const sourceId: string | number = edge.start;
+    const target: any = edge.end;
-    const targetId: string | number = edge.end;
 
-    const source = sourceId;
+    // Save the original source and target
-    const target = targetId;
+    const sourceId = source;
+    const targetId = target;
 
-    const startNode = nodeDb[sourceId];
+    const startNode = nodeDb[edge.start.id];
-    const endNode = nodeDb[targetId];
+    const endNode = nodeDb[edge.end.id];
 
     if (!startNode || !endNode) {
       return { source, target };
@@ -267,6 +259,7 @@ export const render = async (
     const edges = dataForLayout.edges;
     const labelsEl = svg.insert('g').attr('class', 'edgeLabels');
     const linkIdCnt: any = {};
+    const dir = dataForLayout.direction || 'DOWN';
     let defaultStyle: string | undefined;
     let defaultLabelStyle: string | undefined;
 
@@ -296,7 +289,7 @@ export const render = async (
           linkIdCnt[linkIdBase]++;
           log.info('abc78 new entry', linkIdBase, linkIdCnt[linkIdBase]);
         }
-        const linkId = linkIdBase; // + '_' + linkIdCnt[linkIdBase];
+        const linkId = linkIdBase + '_' + linkIdCnt[linkIdBase];
         edge.id = linkId;
         log.info('abc78 new link id to be used is', linkIdBase, linkId, linkIdCnt[linkIdBase]);
         const linkNameStart = 'LS_' + edge.start;
@@ -365,8 +358,8 @@ export const render = async (
             break;
         }
 
-        edgeData.style += style;
+        edgeData.style = edgeData.style += style;
-        edgeData.labelStyle += labelStyle;
+        edgeData.labelStyle = edgeData.labelStyle += labelStyle;
 
         const conf = getConfig();
         if (edge.interpolate !== undefined) {
@@ -403,11 +396,13 @@ export const render = async (
 
         // calculate start and end points of the edge, note that the source and target
         // can be modified for shapes that have ports
-
+        // @ts-ignore TODO: fix this
-        const { source, target, sourceId, targetId } = getEdgeStartEndPoint(edge);
+        const { source, target, sourceId, targetId } = getEdgeStartEndPoint(edge, dir);
         log.debug('abc78 source and target', source, target);
         // Add the edge to the graph
         graph.edges.push({
+          // @ts-ignore TODO: fix this
+          id: 'e' + edge.start + edge.end,
           ...edge,
           sources: [source],
           targets: [target],
@@ -441,7 +436,6 @@ export const render = async (
       case 'RL':
         return 'LEFT';
       case 'TB':
-      case 'TD': // TD is an alias for TB in Mermaid
         return 'DOWN';
       case 'BT':
         return 'UP';
@@ -465,6 +459,155 @@ 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 },
@@ -510,7 +653,7 @@ export const render = async (
 
       return res;
     } else {
-      // Intersection onn sides of rect
+      // Intersection on sides of rect
       if (insidePoint.x < outsidePoint.x) {
         r = outsidePoint.x - w - x;
       } else {
@@ -553,298 +696,62 @@ export const render = async (
     }
     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;
 
-  const cutter2 = (startNode: any, endNode: any, _points: any[]) => {
+        if (isDiamond) {
-    const startBounds = {
+          const inter2 = diamondIntersection(bounds, lastPointOutside, point);
-      x: startNode.offset.posX + startNode.width / 2,
-      y: startNode.offset.posY + startNode.height / 2,
-      width: startNode.width,
-      height: startNode.height,
-      padding: startNode.padding,
-    };
-    const endBounds = {
-      x: endNode.offset.posX + endNode.width / 2,
-      y: endNode.offset.posY + endNode.height / 2,
-      width: endNode.width,
-      height: endNode.height,
-      padding: endNode.padding,
-    };
-
-    if (_points.length === 0) {
-      return [];
-    }
-
-    // Copy the original points array
-    const points = [..._points];
-
-    // The first point is the center of sNode, the last point is the center of eNode
-    const startCenter = points[0];
-    const endCenter = points[points.length - 1];
-
-    log.debug('UIO cutter2: startCenter:', startCenter);
-    log.debug('UIO cutter2: endCenter:', endCenter);
-
-    let firstOutsideStartIndex = -1;
-    let lastOutsideEndIndex = -1;
-
-    // Single iteration through the array
-    for (const [i, point] of points.entries()) {
-      // Check if this is the first point outside the start node
-      if (firstOutsideStartIndex === -1 && outsideNode(startBounds, point)) {
-        firstOutsideStartIndex = i;
-        log.debug('UIO cutter2: First point outside start node at index', i, point);
-      }
-
-      // Check if this point is outside the end node (keep updating to find the last one)
-      if (outsideNode(endBounds, point)) {
-        lastOutsideEndIndex = i;
-        log.debug('UIO cutter2: Point outside end node at index', i, point);
-      }
-    }
-
-    log.debug(
-      'UIO cutter2: firstOutsideStartIndex:',
-      firstOutsideStartIndex,
-      'lastOutsideEndIndex:',
-      lastOutsideEndIndex
-    );
-    log.debug('UIO cutter2: startBounds:', startBounds);
-    log.debug('UIO cutter2: endBounds:', endBounds);
-    log.debug('UIO cutter2: original points:', _points);
-
-    // Calculate intersection with start node if we found a point outside it
-    if (firstOutsideStartIndex !== -1) {
-      const outsidePoint = points[firstOutsideStartIndex];
-      let startIntersection;
-
-      // Try using the node's intersect method first
-      if (startNode.intersect) {
-        startIntersection = startNode.intersect(outsidePoint);
-
-        // Check if the intersection is valid (distance > 1)
-        const distance = Math.sqrt(
-          (startCenter.x - startIntersection.x) ** 2 + (startCenter.y - startIntersection.y) ** 2
-        );
-        if (distance <= 1) {
-          startIntersection = null;
-        }
-      }
-
-      // Fallback to intersection function
-      if (!startIntersection) {
-        startIntersection = intersection(startBounds, startCenter, outsidePoint);
-      }
-
-      // Replace the first point with the intersection
-      if (startIntersection) {
-        // Check if the intersection is the same as any existing point
-        const isDuplicate = points.some(
-          (p, index) =>
-            index > 0 &&
-            Math.abs(p.x - startIntersection.x) < 0.1 &&
-            Math.abs(p.y - startIntersection.y) < 0.1
-        );
-
-        if (isDuplicate) {
-          log.debug(
-            'UIO cutter2: Start intersection is duplicate of existing point, removing first point instead'
-          );
-          points.shift(); // Remove the first point instead of replacing it
-        } else {
-          log.debug(
-            'UIO cutter2: Replacing first point',
-            points[0],
-            'with intersection',
-            startIntersection
-          );
-          points[0] = startIntersection;
-        }
-      }
-    }
-
-    // Calculate intersection with end node
-    // Need to recalculate indices since we may have removed the first point
-    let outsidePointForEnd = null;
-    let outsideIndexForEnd = -1;
-
-    // Find the last point that's outside the end node in the current points array
-    for (let i = points.length - 1; i >= 0; i--) {
-      if (outsideNode(endBounds, points[i])) {
-        outsidePointForEnd = points[i];
-        outsideIndexForEnd = i;
-        log.debug('UIO cutter2: Found point outside end node at current index:', i, points[i]);
-        break;
-      }
-    }
-
-    if (!outsidePointForEnd && points.length > 1) {
-      // No points outside end node, try using the second-to-last point
-      log.debug('UIO cutter2: No points outside end node, trying second-to-last point');
-      outsidePointForEnd = points[points.length - 2];
-      outsideIndexForEnd = points.length - 2;
-    }
-
-    if (outsidePointForEnd) {
-      // Check if the outside point is actually on the boundary (distance = 0 from intersection)
-      // If so, we need to create a truly outside point
-      let actualOutsidePoint = outsidePointForEnd;
-
-      // Quick check: if the point is very close to the node boundary, move it further out
-      const dx = Math.abs(outsidePointForEnd.x - endBounds.x);
-      const dy = Math.abs(outsidePointForEnd.y - endBounds.y);
-      const w = endBounds.width / 2;
-      const h = endBounds.height / 2;
-
-      log.debug('UIO cutter2: Checking if outside point is truly outside:', {
-        outsidePoint: outsidePointForEnd,
-        dx,
-        dy,
-        w,
-        h,
-        isOnBoundary: Math.abs(dx - w) < 1 || Math.abs(dy - h) < 1,
-      });
-
-      // If the point is on or very close to the boundary, move it further out
-      if (Math.abs(dx - w) < 1 || Math.abs(dy - h) < 1) {
-        log.debug('UIO cutter2: Outside point is on boundary, creating truly outside point');
-        // Move the point further away from the node center
-        const directionX = outsidePointForEnd.x - endBounds.x;
-        const directionY = outsidePointForEnd.y - endBounds.y;
-        const length = Math.sqrt(directionX * directionX + directionY * directionY);
-
-        if (length > 0) {
-          // Move the point 10 pixels further out in the same direction
-          actualOutsidePoint = {
-            x: endBounds.x + (directionX / length) * (length + 10),
-            y: endBounds.y + (directionY / length) * (length + 10),
-          };
-          log.debug('UIO cutter2: Created truly outside point:', actualOutsidePoint);
-        }
-      }
-
-      let endIntersection;
-
-      // Try using the node's intersect method first
-      if (endNode.intersect) {
-        endIntersection = endNode.intersect(actualOutsidePoint);
-        log.debug('UIO cutter2: endNode.intersect result:', endIntersection);
-
-        // Check if the intersection is on the wrong side of the node
-        const isWrongSide =
-          (actualOutsidePoint.x < endBounds.x && endIntersection.x > endBounds.x) ||
-          (actualOutsidePoint.x > endBounds.x && endIntersection.x < endBounds.x);
-
-        if (isWrongSide) {
-          log.debug('UIO cutter2: endNode.intersect returned wrong side, setting to null');
-          endIntersection = null;
-        } else {
-          // Check if the intersection is valid (distance > 1)
           const distance = Math.sqrt(
-            (actualOutsidePoint.x - endIntersection.x) ** 2 +
+            (lastPointOutside.x - inter2.x) ** 2 + (lastPointOutside.y - inter2.y) ** 2
-              (actualOutsidePoint.y - endIntersection.y) ** 2
           );
-          log.debug('UIO cutter2: Distance from outside point to intersection:', distance);
+          if (distance > 1) {
-          if (distance <= 1) {
+            inter = inter2;
-            log.debug('UIO cutter2: endNode.intersect distance too small, setting to null');
-            endIntersection = null;
           }
         }
-      } else {
+        if (!inter) {
-        log.debug('UIO cutter2: endNode.intersect method not available');
+          inter = intersection(bounds, lastPointOutside, point);
-      }
+        }
 
-      // Fallback to intersection function
+        // Check case where the intersection is the same as the last point
-      if (!endIntersection) {
+        let pointPresent = false;
-        // Create a proper inside point that's on the correct side of the node
+        points.forEach((p) => {
-        // The inside point should be between the outside point and the far edge
+          pointPresent = pointPresent || (p.x === inter.x && p.y === inter.y);
-        const insidePoint = {
-          x:
-            actualOutsidePoint.x < endBounds.x
-              ? endBounds.x - endBounds.width / 4
-              : endBounds.x + endBounds.width / 4,
-          y: endCenter.y,
-        };
-
-        log.debug('UIO cutter2: Using fallback intersection function with:', {
-          endBounds,
-          actualOutsidePoint,
-          insidePoint,
-          endCenter,
         });
-        endIntersection = intersection(endBounds, actualOutsidePoint, insidePoint);
+        // if (!pointPresent) {
-        log.debug('UIO cutter2: Fallback intersection result:', endIntersection);
+        if (!points.some((e) => e.x === inter.x && e.y === inter.y)) {
-      }
+          points.push(inter);
-
-      // Replace the last point with the intersection
-      if (endIntersection) {
-        // Check if the intersection is the same as any existing point
-        const isDuplicate = points.some(
-          (p, index) =>
-            index < points.length - 1 &&
-            Math.abs(p.x - endIntersection.x) < 0.1 &&
-            Math.abs(p.y - endIntersection.y) < 0.1
-        );
-
-        if (isDuplicate) {
-          log.debug(
-            'UIO cutter2: End intersection is duplicate of existing point, removing last point instead'
-          );
-          points.pop(); // Remove the last point instead of replacing it
         } else {
-          log.debug(
+          log.debug('abc88 no intersect', inter, points);
-            'UIO cutter2: Replacing last point',
+        }
-            points[points.length - 1],
+        // points.push(inter);
-            'with intersection',
+        isInside = true;
-            endIntersection,
+      } else {
-            'using outside point at index',
+        // Outside
-            outsideIndexForEnd
+        log.debug('abc88 outside', point, lastPointOutside, points);
-          );
+        lastPointOutside = point;
-          points[points.length - 1] = endIntersection;
+        // points.push(point);
+        if (!isInside) {
+          points.push(point);
         }
       }
-    } else {
+    });
-      log.debug('UIO cutter2: No suitable outside point found for end node intersection');
-    }
-
-    // Final cleanup: Check if the last point is too close to the previous point
-    if (points.length > 1) {
-      const lastPoint = points[points.length - 1];
-      const secondLastPoint = points[points.length - 2];
-      const distance = Math.sqrt(
-        (lastPoint.x - secondLastPoint.x) ** 2 + (lastPoint.y - secondLastPoint.y) ** 2
-      );
-
-      // If the distance is very small (less than 2 pixels), remove the last point
-      if (distance < 2) {
-        log.debug(
-          'UIO cutter2: Last point too close to previous point, removing it. Distance:',
-          distance
-        );
-        log.debug('UIO cutter2: Removing last point:', lastPoint, 'keeping:', secondLastPoint);
-        points.pop();
-      }
-    }
-
-    log.debug('UIO cutter2: Final points:', points);
-
-    // Debug: Check which side of the end node we're ending at
-    if (points.length > 0) {
-      const finalPoint = points[points.length - 1];
-      const endNodeCenter = endBounds.x;
-      const endNodeLeftEdge = endNodeCenter - endBounds.width / 2;
-      const endNodeRightEdge = endNodeCenter + endBounds.width / 2;
-
-      log.debug('UIO cutter2: End node analysis:', {
-        finalPoint,
-        endNodeCenter,
-        endNodeLeftEdge,
-        endNodeRightEdge,
-        endingSide: finalPoint.x < endNodeCenter ? 'LEFT' : 'RIGHT',
-        distanceFromLeftEdge: Math.abs(finalPoint.x - endNodeLeftEdge),
-        distanceFromRightEdge: Math.abs(finalPoint.x - endNodeRightEdge),
-      });
-    }
-
     return points;
   };
 
@@ -859,19 +766,14 @@ export const render = async (
     id: 'root',
     layoutOptions: {
       'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
-      'elk.layered.crossingMinimization.forceNodeModelOrder':
+      'elk.layered.crossingMinimization.forceNodeModelOrder': true,
-        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,
       'elk.direction': 'DOWN',
-      'spacing.baseValue': 25,
+      'spacing.baseValue': 35,
-      // 'elk.layered.unnecessaryBendpoints': true,
+      'elk.layered.unnecessaryBendpoints': true,
-      // 'elk.layered.cycleBreaking.strategy': data4Layout.config.elk?.cycleBreakingStrategy,
+      'elk.layered.cycleBreaking.strategy': data4Layout.config.elk?.cycleBreakingStrategy,
-      // 'elk.layered.cycleBreaking.strategy': 'GREEDY_MODEL_ORDER',
-      // 'elk.layered.cycleBreaking.strategy': 'MODEL_ORDER',
       // 'spacing.nodeNode': 20,
       // 'spacing.nodeNodeBetweenLayers': 25,
       // 'spacing.edgeNode': 20,
@@ -879,29 +781,23 @@ export const render = async (
       // 'spacing.edgeEdge': 10,
       // 'spacing.edgeEdgeBetweenLayers': 20,
       // 'spacing.nodeSelfLoop': 20,
-
       // Tweaking options
-      'nodePlacement.favorStraightEdges': true,
+      // 'elk.layered.nodePlacement.favorStraightEdges': true,
-      'elk.layered.nodePlacement.favorStraightEdges': true,
+      // 'nodePlacement.feedbackEdges': true,
-      'nodePlacement.feedbackEdges': true,
+      // 'elk.layered.wrapping.multiEdge.improveCuts': true,
-      'elk.layered.wrapping.multiEdge.improveCuts': true,
+      // 'elk.layered.wrapping.multiEdge.improveWrappedEdges': true,
-      'elk.layered.wrapping.multiEdge.improveWrappedEdges': true,
+      // 'elk.layered.wrapping.strategy': 'MULTI_EDGE',
-      'elk.layered.wrapping.strategy': 'MULTI_EDGE',
+      // 'elk.layered.edgeRouting.selfLoopDistribution': 'EQUALLY',
-      // 'elk.layered.wrapping.strategy': 'SINGLE_EDGE',
+      // 'elk.layered.mergeHierarchyEdges': true,
-      'elk.layered.edgeRouting.selfLoopDistribution': 'EQUALLY',
+      // 'elk.layered.feedbackEdges': true,
-      'elk.layered.mergeHierarchyEdges': true,
+      // 'elk.layered.crossingMinimization.semiInteractive': true,
-
+      // 'elk.layered.edgeRouting.splines.sloppy.layerSpacingFactor': 1,
-      'elk.layered.feedbackEdges': true,
+      // 'elk.layered.edgeRouting.polyline.slopedEdgeZoneWidth': 4.0,
-      'elk.layered.crossingMinimization.semiInteractive': true,
+      // 'elk.layered.wrapping.validify.strategy': 'LOOK_BACK',
-      'elk.layered.edgeRouting.splines.sloppy.layerSpacingFactor': 1,
+      // 'elk.insideSelfLoops.activate': true,
-      'elk.layered.edgeRouting.polyline.slopedEdgeZoneWidth': 4.0,
+      // 'elk.alg.layered.options.EdgeStraighteningStrategy': 'NONE',
-      'elk.layered.wrapping.validify.strategy': 'LOOK_BACK',
-      'elk.insideSelfLoops.activate': true,
-      'elk.separateConnectedComponents': true,
-      'elk.alg.layered.options.EdgeStraighteningStrategy': 'NONE',
       // 'elk.layered.considerModelOrder.strategy': 'NODES_AND_EDGES', // NODES_AND_EDGES
-      'elk.layered.considerModelOrder.strategy': 'EDGES', // NODES_AND_EDGES
+      // 'elk.layered.wrapping.cutting.strategy': 'ARD', // NODES_AND_EDGES
-      'elk.layered.wrapping.cutting.strategy': 'ARD', // NODES_AND_EDGES
     },
     children: [],
     edges: [],
@@ -941,16 +837,15 @@ export const render = async (
 
     // Subgraph
     if (parentLookupDb.childrenById[node.id] !== undefined) {
-      // Set label and adjust node width separately (avoid side effects in labels array)
       node.labels = [
         {
           text: node.label,
-          width: node?.labelData?.width ?? 50,
+          width: node?.labelData?.width || 50,
-          height: node?.labelData?.height ?? 50,
+          height: node?.labelData?.height || 50,
         },
+        (node.width = node.width + 2 * node.padding),
+        log.debug('UIO node label', node?.labelData?.width, node.padding),
       ];
-      node.width = node.width + 2 * node.padding;
-      log.debug('UIO node label', node?.labelData?.width, node.padding);
       node.layoutOptions = {
         'spacing.baseValue': 30,
         'nodeLabels.placement': '[H_CENTER V_TOP, INSIDE]',
@@ -971,16 +866,11 @@ export const render = async (
       delete node.height;
     }
   });
-  log.debug('APA01 processing edges, count:', elkGraph.edges.length);
+  elkGraph.edges.forEach((edge: any) => {
-  elkGraph.edges.forEach((edge: any, index: number) => {
-    log.debug('APA01 processing edge', index, ':', edge);
     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);
@@ -988,37 +878,7 @@ export const render = async (
     }
   });
 
-  log.debug('APA01 before');
+  const g = await elk.layout(elkGraph);
-  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.info('APA01 layout result:', JSON.stringify(g, null, 2));
-  } catch (error) {
-    log.error('APA01 ELK layout error:', error);
-    throw error;
-  }
 
   // debugger;
   await drawNodes(0, 0, g.children, svg, subGraphsEl, 0);
@@ -1078,7 +938,7 @@ export const render = async (
           log.debug(
             'UIO width',
             startNode.id,
-            startNode.width,
+            startNode.with,
             'bbox.width=',
             bbox.width,
             'lw=',
@@ -1098,7 +958,7 @@ export const render = async (
           log.debug(
             'UIO width',
             startNode.id,
-            startNode.width,
+            startNode.with,
             bbox.width,
             'EW = ',
             ew,
@@ -1106,26 +966,43 @@ export const render = async (
             startNode.innerHTML
           );
         }
-        startNode.x = startNode.offset.posX + startNode.width / 2;
+        if (startNode.shape === 'diamond' || startNode.shape === 'diam') {
-        startNode.y = startNode.offset.posY + startNode.height / 2;
-        endNode.x = endNode.offset.posX + endNode.width / 2;
-        endNode.y = endNode.offset.posY + endNode.height / 2;
-        if (startNode.shape !== 'rect33') {
           edge.points.unshift({
-            x: startNode.x,
+            x: startNode.offset.posX + startNode.width / 2,
-            y: startNode.y,
+            y: startNode.offset.posY + startNode.height / 2,
           });
         }
-        if (endNode.shape !== 'rect33') {
+        if (endNode.shape === 'diamond' || endNode.shape === 'diam') {
           edge.points.push({
-            x: endNode.x,
+            x: endNode.offset.posX + endNode.width / 2,
-            y: endNode.y,
+            y: endNode.offset.posY + endNode.height / 2,
           });
         }
 
-        log.debug('UIO cutter2: Points before cutter2:', edge.points);
+        edge.points = cutPathAtIntersect(
-        edge.points = cutter2(startNode, endNode, edge.points);
+          edge.points.reverse(),
-        log.debug('UIO cutter2: Points after cutter2:', edge.points);
+          {
+            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,
@@ -1133,8 +1010,7 @@ export const render = async (
           data4Layout.type,
           startNode,
           endNode,
-          data4Layout.diagramId,
+          data4Layout.diagramId
-          true
         );
         log.info('APA12 edge points after insert', JSON.stringify(edge.points));
 

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": "^0.27.8",
-    "typedoc-plugin-markdown": "^4.8.0",
+    "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,16 +109,6 @@ 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;
@@ -1075,10 +1065,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,8 +24,6 @@ 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
+	A-->B
-    %% This is a comment
+	%% This is a comment
-    C-->D
+	C-->D
 `;
     expect(cleanupComments(text)).toMatchInlineSnapshot(`
       "graph TD
-          A-->B
+	A-->B
-          C-->D
+	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 text.replace(/^\s*%%(?!{)[^\n]+\n?/gm, '').trimStart();
-  return cleaned.trimStart();
 };

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

@@ -28,6 +28,7 @@ import architecture from '../diagrams/architecture/architectureDetector.js';
 import { registerLazyLoadedDiagrams } from './detectType.js';
 import { registerDiagram } from './diagramAPI.js';
 import { treemap } from '../diagrams/treemap/detector.js';
+import { usecase } from '../diagrams/usecase/detector.js';
 import '../type.d.ts';
 
 let hasLoadedDiagrams = false;
@@ -101,6 +102,7 @@ export const addDiagrams = () => {
     xychart,
     block,
     radar,
-    treemap
+    treemap,
+    usecase
   );
 };

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/block/blockDB.ts

@@ -238,15 +238,13 @@ export function edgeTypeStr2Type(typeStr: string): string {
 }
 
 export function edgeStrToEdgeData(typeStr: string): string {
-  switch (typeStr.replace(/^[\s-]+|[\s-]+$/g, '')) {
+  switch (typeStr.trim()) {
-    case 'x':
+    case '--x':
       return 'arrow_cross';
-    case 'o':
+    case '--o':
       return 'arrow_circle';
-    case '>':
-      return 'arrow_point';
     default:
-      return '';
+      return 'arrow_point';
   }
 }
 

packages/mermaid/src/diagrams/block/blockDetector.ts

@@ -3,7 +3,7 @@ import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-a
 const id = 'block';
 
 const detector: DiagramDetector = (txt) => {
-  return /^\s*block(-beta)?/.test(txt);
+  return /^\s*block-beta/.test(txt);
 };
 
 const loader = async () => {

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

@@ -36,10 +36,10 @@ CRLF \u000D\u000A
 
 %%
 
-"block-beta"              { yy.getLogger().debug('Found block-beta'); return 'BLOCK_DIAGRAM_KEY'; }
+"block-beta"                                             { return 'BLOCK_DIAGRAM_KEY'; }
-"block:"                  { yy.getLogger().debug('Found id-block'); return 'id-block'; }
+"block"\s+            { yy.getLogger().debug('Found space-block'); return 'block';}
-"block"                   { yy.getLogger().debug('Found block'); return 'BLOCK_DIAGRAM_KEY'; }
+"block"\n+            { yy.getLogger().debug('Found nl-block'); return 'block';}
-
+"block:"            { yy.getLogger().debug('Found space-block'); return 'id-block';}
 // \s*\%\%.*                                                       { yy.getLogger().debug('Found comment',yytext); }
 [\s]+                                                           { yy.getLogger().debug('.', yytext); /* skip all whitespace */  }
 [\n]+ {yy.getLogger().debug('_', yytext);                 /* skip all whitespace */   }
@@ -240,7 +240,7 @@ columnsStatement
 
 blockStatement
   : id-block nodeStatement document end { yy.getLogger().debug('Rule: id-block statement : ', $2, $3); const id2 = yy.generateId(); $$ = { ...$2, type:'composite', children: $3 }; }
-  | BLOCK_DIAGRAM_KEY document end { yy.getLogger().debug('Rule: blockStatement : ', $1, $2, $3); const id = yy.generateId(); $$ = { id, type:'composite', label:'', children: $2 }; }
+  | block document end { yy.getLogger().debug('Rule: blockStatement : ', $1, $2, $3); const id = yy.generateId(); $$ = { id, type:'composite', label:'', children: $2 }; }
   ;
 
 node

packages/mermaid/src/diagrams/block/parser/block.spec.ts

@@ -23,7 +23,7 @@ describe('Block diagram', function () {
       expect(blocks[0].label).toBe('id');
     });
     it('a node with a square shape and a label', () => {
-      const str = `block
+      const str = `block-beta
           id["A label"]
           `;
 
@@ -35,7 +35,7 @@ describe('Block diagram', function () {
       expect(blocks[0].type).toBe('square');
     });
     it('a diagram with multiple nodes', () => {
-      const str = `block
+      const str = `block-beta
           id1
           id2
       `;
@@ -51,7 +51,7 @@ describe('Block diagram', function () {
       expect(blocks[1].type).toBe('na');
     });
     it('a diagram with multiple nodes', () => {
-      const str = `block
+      const str = `block-beta
           id1
           id2
           id3
@@ -72,7 +72,7 @@ describe('Block diagram', function () {
     });
 
     it('a node with a square shape and a label', () => {
-      const str = `block
+      const str = `block-beta
           id["A label"]
           id2`;
 
@@ -87,7 +87,7 @@ describe('Block diagram', function () {
       expect(blocks[1].type).toBe('na');
     });
     it('a diagram with multiple nodes with edges abc123', () => {
-      const str = `block
+      const str = `block-beta
           id1["first"]  -->   id2["second"]
       `;
 
@@ -101,7 +101,7 @@ describe('Block diagram', function () {
       expect(edges[0].arrowTypeEnd).toBe('arrow_point');
     });
     it('a diagram with multiple nodes with edges abc123', () => {
-      const str = `block
+      const str = `block-beta
           id1["first"]  -- "a label" -->   id2["second"]
       `;
 
@@ -116,7 +116,7 @@ describe('Block diagram', function () {
       expect(edges[0].label).toBe('a label');
     });
     it('a diagram with column statements', () => {
-      const str = `block
+      const str = `block-beta
           columns 2
           block1["Block 1"]
       `;
@@ -127,7 +127,7 @@ describe('Block diagram', function () {
       expect(blocks.length).toBe(1);
     });
     it('a diagram without column statements', () => {
-      const str = `block
+      const str = `block-beta
           block1["Block 1"]
       `;
 
@@ -137,7 +137,7 @@ describe('Block diagram', function () {
       expect(blocks.length).toBe(1);
     });
     it('a diagram with auto column statements', () => {
-      const str = `block
+      const str = `block-beta
           columns auto
           block1["Block 1"]
       `;
@@ -149,7 +149,7 @@ describe('Block diagram', function () {
     });
 
     it('blocks next to each other', () => {
-      const str = `block
+      const str = `block-beta
           columns 2
           block1["Block 1"]
           block2["Block 2"]
@@ -163,7 +163,7 @@ describe('Block diagram', function () {
     });
 
     it('blocks on top of each other', () => {
-      const str = `block
+      const str = `block-beta
           columns 1
           block1["Block 1"]
           block2["Block 2"]
@@ -177,7 +177,7 @@ describe('Block diagram', function () {
     });
 
     it('compound blocks 2', () => {
-      const str = `block
+      const str = `block-beta
           block
             aBlock["ABlock"]
             bBlock["BBlock"]
@@ -205,7 +205,7 @@ describe('Block diagram', function () {
       expect(bBlock.type).toBe('square');
     });
     it('compound blocks of compound blocks', () => {
-      const str = `block
+      const str = `block-beta
           block
             aBlock["ABlock"]
             block
@@ -240,7 +240,7 @@ describe('Block diagram', function () {
       expect(bBlock.type).toBe('square');
     });
     it('compound blocks with title', () => {
-      const str = `block
+      const str = `block-beta
           block:compoundBlock["Compound block"]
             columns 1
             block2["Block 2"]
@@ -265,7 +265,7 @@ describe('Block diagram', function () {
       expect(block2.type).toBe('square');
     });
     it('blocks mixed with compound blocks', () => {
-      const str = `block
+      const str = `block-beta
           columns 1
           block1["Block 1"]
 
@@ -292,7 +292,7 @@ describe('Block diagram', function () {
     });
 
     it('Arrow blocks', () => {
-      const str = `block
+      const str = `block-beta
         columns 3
         block1["Block 1"]
         blockArrow<["&nbsp;&nbsp;&nbsp;"]>(right)
@@ -316,7 +316,7 @@ describe('Block diagram', function () {
       expect(blockArrow.directions).toContain('right');
     });
     it('Arrow blocks with multiple points', () => {
-      const str = `block
+      const str = `block-beta
         columns 1
         A
         blockArrow<["&nbsp;&nbsp;&nbsp;"]>(up, down)
@@ -339,7 +339,7 @@ describe('Block diagram', function () {
       expect(blockArrow.directions).not.toContain('right');
     });
     it('blocks with different widths', () => {
-      const str = `block
+      const str = `block-beta
         columns 3
         one["One Slot"]
         two["Two slots"]:2
@@ -354,7 +354,7 @@ describe('Block diagram', function () {
       expect(two.widthInColumns).toBe(2);
     });
     it('empty blocks', () => {
-      const str = `block
+      const str = `block-beta
         columns 3
         space
         middle["In the middle"]
@@ -373,7 +373,7 @@ describe('Block diagram', function () {
       expect(middle.label).toBe('In the middle');
     });
     it('classDef statements applied to a block', () => {
-      const str = `block
+      const str = `block-beta
         classDef black color:#ffffff, fill:#000000;
 
         mc["Memcache"]
@@ -391,7 +391,7 @@ describe('Block diagram', function () {
       expect(black.styles[0]).toEqual('color:#ffffff');
     });
     it('style statements applied to a block', () => {
-      const str = `block
+      const str = `block-beta
 columns 1
     B["A wide one in the middle"]
   style B fill:#f9F,stroke:#333,stroke-width:4px
@@ -426,9 +426,9 @@ columns 1
 
   describe('prototype properties', function () {
     function validateProperty(prop: string) {
-      expect(() => block.parse(`block\n${prop}`)).not.toThrow();
+      expect(() => block.parse(`block-beta\n${prop}`)).not.toThrow();
       expect(() =>
-        block.parse(`block\nA; classDef ${prop} color:#ffffff,fill:#000000; class A ${prop}`)
+        block.parse(`block-beta\nA; classDef ${prop} color:#ffffff,fill:#000000; class A ${prop}`)
       ).not.toThrow();
     }
 

packages/mermaid/src/diagrams/common/common.ts

@@ -33,13 +33,13 @@ function setupDompurifyHooks() {
   const TEMPORARY_ATTRIBUTE = 'data-temp-href-target';
 
   DOMPurify.addHook('beforeSanitizeAttributes', (node) => {
-    if (node.tagName === 'A' && node.hasAttribute('target')) {
+    if (node instanceof Element && node.tagName === 'A' && node.hasAttribute('target')) {
       node.setAttribute(TEMPORARY_ATTRIBUTE, node.getAttribute('target') ?? '');
     }
   });
 
   DOMPurify.addHook('afterSanitizeAttributes', (node) => {
-    if (node.tagName === 'A' && node.hasAttribute(TEMPORARY_ATTRIBUTE)) {
+    if (node instanceof Element && node.tagName === 'A' && node.hasAttribute(TEMPORARY_ATTRIBUTE)) {
       node.setAttribute('target', node.getAttribute(TEMPORARY_ATTRIBUTE) ?? '');
       node.removeAttribute(TEMPORARY_ATTRIBUTE);
       if (node.getAttribute('target') === '_blank') {

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

@@ -167,10 +167,7 @@ export const getTasks = function () {
 };
 
 export const isInvalidDate = function (date, dateFormat, excludes, includes) {
-  const formattedDate = date.format(dateFormat.trim());
+  if (includes.includes(date.format(dateFormat.trim()))) {
-  const dateOnly = date.format('YYYY-MM-DD');
-
-  if (includes.includes(formattedDate) || includes.includes(dateOnly)) {
     return false;
   }
   if (
@@ -183,7 +180,7 @@ export const isInvalidDate = function (date, dateFormat, excludes, includes) {
   if (excludes.includes(date.format('dddd').toLowerCase())) {
     return true;
   }
-  return excludes.includes(formattedDate) || excludes.includes(dateOnly);
+  return excludes.includes(date.format(dateFormat.trim()));
 };
 
 export const setWeekday = function (txt) {

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

@@ -581,11 +581,17 @@ export const draw = function (text, id, version, diagObj) {
 
     rectangles
       .append('rect')
-      .attr('id', (d) => 'exclude-' + d.start.format('YYYY-MM-DD'))
+      .attr('id', function (d) {
-      .attr('x', (d) => timeScale(d.start.startOf('day')) + theSidePad)
+        return 'exclude-' + d.start.format('YYYY-MM-DD');
+      })
+      .attr('x', function (d) {
+        return timeScale(d.start) + theSidePad;
+      })
       .attr('y', conf.gridLineStartPadding)
-      .attr('width', (d) => timeScale(d.end.endOf('day')) - timeScale(d.start.startOf('day')))
+      .attr('width', function (d) {
-
+        const renderEnd = d.end.add(1, 'day');
+        return timeScale(renderEnd) - timeScale(d.start);
+      })
       .attr('height', h - theTopPad - conf.gridLineStartPadding)
       .attr('transform-origin', function (d, i) {
         return (
@@ -609,20 +615,9 @@ export const draw = function (text, id, version, diagObj) {
    * @param h
    */
   function makeGrid(theSidePad, theTopPad, w, h) {
-    const dateFormat = diagObj.db.getDateFormat();
-    const userAxisFormat = diagObj.db.getAxisFormat();
-    let axisFormat;
-    if (userAxisFormat) {
-      axisFormat = userAxisFormat;
-    } else if (dateFormat === 'D') {
-      axisFormat = '%d';
-    } else {
-      axisFormat = conf.axisFormat ?? '%Y-%m-%d';
-    }
-
     let bottomXAxis = axisBottom(timeScale)
       .tickSize(-h + theTopPad + conf.gridLineStartPadding)
-      .tickFormat(timeFormat(axisFormat));
+      .tickFormat(timeFormat(diagObj.db.getAxisFormat() || conf.axisFormat || '%Y-%m-%d'));
 
     const reTickInterval = /^([1-9]\d*)(millisecond|second|minute|hour|day|week|month)$/;
     const resultTickInterval = reTickInterval.exec(
@@ -674,7 +669,7 @@ export const draw = function (text, id, version, diagObj) {
     if (diagObj.db.topAxisEnabled() || conf.topAxis) {
       let topXAxis = axisTop(timeScale)
         .tickSize(-h + theTopPad + conf.gridLineStartPadding)
-        .tickFormat(timeFormat(axisFormat));
+        .tickFormat(timeFormat(diagObj.db.getAxisFormat() || conf.axisFormat || '%Y-%m-%d'));
 
       if (resultTickInterval !== null) {
         const every = resultTickInterval[1];

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,214 +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:
-        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 type { D3Element } from '../../types.js';
-import { getRegisteredLayoutAlgorithm, render } from '../../rendering-util/render.js';
+import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
-import { setupViewPortForSVG } from '../../rendering-util/setupViewPortForSVG.js';
+import { setupGraphViewbox } from '../../setupGraphViewbox.js';
-import type { LayoutData } from '../../rendering-util/types.js';
+import type { FilledMindMapNode, MindmapNode } from './mindmapTypes.js';
-import type { FilledMindMapNode } from './mindmapTypes.js';
+import { drawNode, positionNode } from './svgDraw.js';
-import { drawNode } 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)
       )
     );
   }
 }
 
-/**
+declare module 'cytoscape' {
- * Update the layout data with actual node dimensions after drawing
+  interface EdgeSingular {
- */
+    _private: {
-function _updateNodeDimensions(data4Layout: LayoutData, mindmapRoot: FilledMindMapNode) {
+      bodyBounds: unknown;
-  const updateNode = (node: FilledMindMapNode) => {
+      rscratch: {
-    // Find the corresponding node in the layout data
+        startX: number;
-    const layoutNode = data4Layout.nodes.find((n) => n.id === node.id.toString());
+        startY: number;
-    if (layoutNode) {
+        midX: number;
-      // Update with the actual dimensions calculated by drawNode
+        midY: number;
-      layoutNode.width = node.width;
+        endX: number;
-      layoutNode.height = node.height;
+        endY: number;
-      log.debug('Updated node dimensions:', node.id, 'width:', node.width, 'height:', node.height);
+      };
-    }
+    };
+  }
+}
 
-    // Recursively update children
+function drawEdges(edgesEl: D3Element, cy: cytoscape.Core) {
-    if (node.children) {
+  cy.edges().map((edge, id) => {
-      node.children.forEach(updateNode);
+    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
+  const conf = getConfig();
-  await render(data4Layout, svg);
+  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,
+    conf.mindmap?.padding ?? defaultConfig.mindmap.padding,
-    'mindmapDiagram',
+    conf.mindmap?.useMaxWidth ?? defaultConfig.mindmap.useMaxWidth
-    conf?.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/pie/pie.spec.ts

@@ -139,32 +139,6 @@ describe('pie', () => {
       }).rejects.toThrowError();
     });
 
-    it('should handle simple pie with zero slice value', async () => {
-      await parser.parse(`pie title Default text position: Animal adoption
-        accTitle: simple pie char demo
-        accDescr: pie chart with 3 sections: dogs, cats, rats. Most are dogs.
-         "dogs" : 0
-        "rats" : 40.12
-      `);
-
-      const sections = db.getSections();
-      expect(sections.get('dogs')).toBe(0);
-      expect(sections.get('rats')).toBe(40.12);
-    });
-
-    it('should handle simple pie with negative slice value', async () => {
-      await expect(async () => {
-        await parser.parse(`pie title Default text position: Animal adoption
-        accTitle: simple pie char demo
-        accDescr: pie chart with 3 sections: dogs, cats, rats. Most are dogs.
-         "dogs" : -60.67
-        "rats" : 40.12
-    `);
-      }).rejects.toThrowError(
-        '"dogs" has invalid value: -60.67. Negative values are not allowed in pie charts. All slice values must be >= 0.'
-      );
-    });
-
     it('should handle unsafe properties', async () => {
       await expect(
         parser.parse(`pie title Unsafe props test

packages/mermaid/src/diagrams/pie/pieDb.ts

@@ -34,11 +34,6 @@ const clear = (): void => {
 };
 
 const addSection = ({ label, value }: D3Section): void => {
-  if (value < 0) {
-    throw new Error(
-      `"${label}" has invalid value: ${value}. Negative values are not allowed in pie charts. All slice values must be >= 0.`
-    );
-  }
   if (!sections.has(label)) {
     sections.set(label, value);
     log.debug(`added new section: ${label}, with value: ${value}`);

packages/mermaid/src/diagrams/pie/pieRenderer.ts

@@ -10,14 +10,20 @@ import { cleanAndMerge, parseFontSize } from '../../utils.js';
 import type { D3Section, PieDB, Sections } from './pieTypes.js';
 
 const createPieArcs = (sections: Sections): d3.PieArcDatum<D3Section>[] => {
-  const sum = [...sections.values()].reduce((acc, val) => acc + val, 0);
+  // Compute the position of each group on the pie:
-
   const pieData: D3Section[] = [...sections.entries()]
-    .map(([label, value]) => ({ label, value }))
+    .map((element: [string, number]): D3Section => {
-    .filter((d) => (d.value / sum) * 100 >= 1) // Remove values < 1%
+      return {
-    .sort((a, b) => b.value - a.value);
+        label: element[0],
-
+        value: element[1],
-  const pie: d3.Pie<unknown, D3Section> = d3pie<D3Section>().value((d) => d.value);
+      };
+    })
+    .sort((a: D3Section, b: D3Section): number => {
+      return b.value - a.value;
+    });
+  const pie: d3.Pie<unknown, D3Section> = d3pie<D3Section>().value(
+    (d3Section: D3Section): number => d3Section.value
+  );
   return pie(pieData);
 };
 
@@ -83,21 +89,13 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
     themeVariables.pie11,
     themeVariables.pie12,
   ];
-  let sum = 0;
-  sections.forEach((section) => {
-    sum += section;
-  });
-
-  // Filter out arcs that would render as 0%
-  const filteredArcs = arcs.filter((datum) => ((datum.data.value / sum) * 100).toFixed(0) !== '0');
-
   // Set the color scale
   const color: d3.ScaleOrdinal<string, 12, never> = scaleOrdinal(myGeneratedColors);
 
   // Build the pie chart: each part of the pie is a path that we build using the arc function.
   group
     .selectAll('mySlices')
-    .data(filteredArcs)
+    .data(arcs)
     .enter()
     .append('path')
     .attr('d', arcGenerator)
@@ -106,11 +104,15 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
     })
     .attr('class', 'pieCircle');
 
+  let sum = 0;
+  sections.forEach((section) => {
+    sum += section;
+  });
   // Now add the percentage.
   // Use the centroid method to get the best coordinates.
   group
     .selectAll('mySlices')
-    .data(filteredArcs)
+    .data(arcs)
     .enter()
     .append('text')
     .text((datum: d3.PieArcDatum<D3Section>): string => {
@@ -131,20 +133,15 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
     .attr('class', 'pieTitleText');
 
   // Add the legends/annotations for each section
-  const allSectionData: D3Section[] = [...sections.entries()].map(([label, value]) => ({
-    label,
-    value,
-  }));
-
   const legend = group
     .selectAll('.legend')
-    .data(allSectionData)
+    .data(color.domain())
     .enter()
     .append('g')
     .attr('class', 'legend')
     .attr('transform', (_datum, index: number): string => {
       const height = LEGEND_RECT_SIZE + LEGEND_SPACING;
-      const offset = (height * allSectionData.length) / 2;
+      const offset = (height * color.domain().length) / 2;
       const horizontal = 12 * LEGEND_RECT_SIZE;
       const vertical = index * height - offset;
       return 'translate(' + horizontal + ',' + vertical + ')';
@@ -154,18 +151,20 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
     .append('rect')
     .attr('width', LEGEND_RECT_SIZE)
     .attr('height', LEGEND_RECT_SIZE)
-    .style('fill', (d) => color(d.label))
+    .style('fill', color)
-    .style('stroke', (d) => color(d.label));
+    .style('stroke', color);
 
   legend
+    .data(arcs)
     .append('text')
     .attr('x', LEGEND_RECT_SIZE + LEGEND_SPACING)
     .attr('y', LEGEND_RECT_SIZE - LEGEND_SPACING)
-    .text((d) => {
+    .text((datum: d3.PieArcDatum<D3Section>): string => {
+      const { label, value } = datum.data;
       if (db.getShowData()) {
-        return `${d.label} [${d.value}]`;
+        return `${label} [${value}]`;
       }
-      return d.label;
+      return label;
     });
 
   const longestTextWidth = Math.max(

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

@@ -27,7 +27,6 @@ TEXTDATA [\u0020-\u0021\u0023-\u002B\u002D-\u007E]
 %%
 
 <INITIAL>"sankey-beta"                         { this.pushState('csv'); return 'SANKEY'; }
-<INITIAL>"sankey"                              { this.pushState('csv'); return 'SANKEY'; }
 <INITIAL,csv><<EOF>>                           { return 'EOF' } // match end of file
 <INITIAL,csv>({CRLF}|{LF})                     { return 'NEWLINE' }
 <INITIAL,csv>{COMMA}                           { return 'COMMA' }

packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts

@@ -13,7 +13,7 @@ describe('Sankey diagram', function () {
       sankey.parser.yy.clear();
     });
 
-    it('parses csv with sankey-beta syntax', () => {
+    it('parses csv', () => {
       const csv = path.resolve(__dirname, './energy.csv');
       const data = fs.readFileSync(csv, 'utf8');
       const graphDefinition = prepareTextForParsing(cleanupComments('sankey-beta\n\n ' + data));
@@ -21,15 +21,7 @@ describe('Sankey diagram', function () {
       sankey.parser.parse(graphDefinition);
     });
 
-    it('parses csv with sankey syntax', () => {
+    it('allows __proto__ as id', function () {
-      const csv = path.resolve(__dirname, './energy.csv');
-      const data = fs.readFileSync(csv, 'utf8');
-      const graphDefinition = prepareTextForParsing(cleanupComments('sankey\n\n ' + data));
-
-      sankey.parser.parse(graphDefinition);
-    });
-
-    it('allows __proto__ as id with sankey-beta syntax', function () {
       sankey.parser.parse(
         prepareTextForParsing(`sankey-beta
       __proto__,A,0.597
@@ -37,14 +29,5 @@ describe('Sankey diagram', function () {
       `)
       );
     });
-
-    it('allows __proto__ as id with sankey syntax', function () {
-      sankey.parser.parse(
-        prepareTextForParsing(`sankey
-      __proto__,A,0.597
-      A,__proto__,0.403
-      `)
-      );
-    });
   });
 });

packages/mermaid/src/diagrams/sankey/sankeyDetector.ts

@@ -3,7 +3,7 @@ import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-a
 const id = 'sankey';
 
 const detector: DiagramDetector = (txt) => {
-  return /^\s*sankey(-beta)?/.test(txt);
+  return /^\s*sankey-beta/.test(txt);
 };
 
 const loader = async () => {

packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison

@@ -33,7 +33,7 @@
 "actor"                                                   		{ this.begin('ID'); return 'participant_actor'; }
 "create"                                                        return 'create';
 "destroy"                                                       { this.begin('ID'); return 'destroy'; }
-<ID>[^<\->\->:\n,;]+?([\-]*[^<\->\->:\n,;]+?)*?(?=((?!\n)\s)+"as"(?!\n)\s|[#\n;]|$)     { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; }
+<ID>[^\<->\->:\n,;]+?([\-]*[^\<->\->:\n,;]+?)*?(?=((?!\n)\s)+"as"(?!\n)\s|[#\n;]|$)     { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; }
 <ALIAS>"as"                                                     { this.popState(); this.popState(); this.begin('LINE'); return 'AS'; }
 <ALIAS>(?:)                                                     { this.popState(); this.popState(); return 'NEWLINE'; }
 "loop"                                                          { this.begin('LINE'); return 'loop'; }
@@ -73,7 +73,7 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 "off"															return 'off';
 ","                                                             return ',';
 ";"                                                             return 'NEWLINE';
-[^+<\->\->:\n,;]+((?!(\-x|\-\-x|\-\)|\-\-\)))[\-]*[^\+<\->\->:\n,;]+)*             { yytext = yytext.trim(); return 'ACTOR'; }
+[^\+\<->\->:\n,;]+((?!(\-x|\-\-x|\-\)|\-\-\)))[\-]*[^\+\<->\->:\n,;]+)*             { yytext = yytext.trim(); return 'ACTOR'; }
 "->>"                                                           return 'SOLID_ARROW';
 "<<->>"                                                           return 'BIDIRECTIONAL_SOLID_ARROW';
 "-->>"                                                          return 'DOTTED_ARROW';

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

@@ -350,26 +350,6 @@ Bob-->Alice-in-Wonderland:I am good thanks!`);
     expect(messages[1].from).toBe('Bob');
   });
 
-  it('should handle equals in participant names', async () => {
-    const diagram = await Diagram.fromText(`
-sequenceDiagram
-participant Alice=Wonderland
-participant Bob
-Alice=Wonderland->Bob:Hello Bob, how are - you?
-Bob-->Alice=Wonderland:I am good thanks!`);
-
-    const actors = diagram.db.getActors();
-    expect([...actors.keys()]).toEqual(['Alice=Wonderland', 'Bob']);
-    expect(actors.get('Alice=Wonderland').description).toBe('Alice=Wonderland');
-    expect(actors.get('Bob').description).toBe('Bob');
-
-    const messages = diagram.db.getMessages();
-
-    expect(messages.length).toBe(2);
-    expect(messages[0].from).toBe('Alice=Wonderland');
-    expect(messages[1].from).toBe('Bob');
-  });
-
   it('should alias participants', async () => {
     const diagram = await Diagram.fromText(`
 sequenceDiagram
@@ -1368,7 +1348,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 +1364,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/diagrams/usecase/db.ts

@@ -0,0 +1,38 @@
+import type { DiagramDB } from '../../diagram-api/types.js';
+import type { UsecaseDiagramConfig, UsecaseNode } from './types.js';
+import { cleanAndMerge } from '../../utils.js';
+
+export class UsecaseDiagramDB implements DiagramDB {
+  public getNodes() {
+    return [];
+  }
+
+  public getConfig() {
+    return cleanAndMerge({}) as Required<UsecaseDiagramConfig>;
+  }
+
+  public addNode(node: UsecaseNode, level: number) {
+    if (level === 0) {
+      // TODO
+    }
+  }
+
+  public getRoot() {
+    return { name: '', children: [] };
+  }
+
+  public addClass(_id: string, _style: string) {
+    // TODO
+  }
+  public getClasses() {
+    // TODO
+  }
+
+  public getStylesForClass(_classSelector: string) {
+    // TODO
+  }
+
+  public clear() {
+    // commonClear();
+  }
+}

packages/mermaid/src/diagrams/usecase/detector.ts

@@ -0,0 +1,22 @@
+import type {
+  DiagramDetector,
+  DiagramLoader,
+  ExternalDiagramDefinition,
+} from '../../diagram-api/types.js';
+
+const id = 'usecase';
+
+const detector: DiagramDetector = (txt) => {
+  return /^\s*usecase/.test(txt);
+};
+
+const loader: DiagramLoader = async () => {
+  const { diagram } = await import('./diagram.js');
+  return { id, diagram };
+};
+
+export const usecase: ExternalDiagramDefinition = {
+  id,
+  detector,
+  loader,
+};

packages/mermaid/src/diagrams/usecase/diagram.ts

@@ -0,0 +1,14 @@
+import type { DiagramDefinition } from '../../diagram-api/types.js';
+import { UsecaseDiagramDB } from './db.js';
+import { parser } from './parser.js';
+import { renderer } from './renderer.js';
+import styles from './styles.js';
+
+export const diagram: DiagramDefinition = {
+  parser,
+  get db() {
+    return new UsecaseDiagramDB();
+  },
+  renderer,
+  styles,
+};

packages/mermaid/src/diagrams/usecase/parser.ts

@@ -0,0 +1,40 @@
+import { parse } from '@mermaid-js/parser';
+import type { ParserDefinition } from '../../diagram-api/types.js';
+import { log } from '../../logger.js';
+import { populateCommonDb } from '../common/populateCommonDb.js';
+import type { UsecaseAst } from './types.js';
+import { UsecaseDiagramDB } from './db.js';
+
+/**
+ * Populates the database with data from the Usecase AST
+ * @param ast - The Usecase AST
+ */
+const populate = (ast: UsecaseAst, db: UsecaseDiagramDB) => {
+  // We need to bypass the type checking for populateCommonDb
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  populateCommonDb(ast as any, db);
+};
+
+export const parser: ParserDefinition = {
+  // @ts-expect-error - UsecaseDB is not assignable to DiagramDB
+  parser: { yy: undefined },
+  parse: async (text: string): Promise<void> => {
+    try {
+      // Use a generic parse that accepts any diagram type
+
+      const parseFunc = parse as (diagramType: string, text: string) => Promise<UsecaseAst>;
+      const ast = await parseFunc('usecase', text);
+      log.debug('Usecase AST:', ast);
+      const db = parser.parser?.yy;
+      if (!(db instanceof UsecaseDiagramDB)) {
+        throw new Error(
+          'parser.parser?.yy was not a UsecaseDiagramDB. This is due to a bug within Mermaid, please report this issue at https://github.com/mermaid-js/mermaid/issues.'
+        );
+      }
+      populate(ast, db);
+    } catch (error) {
+      log.error('Error parsing usecase:', error);
+      throw error;
+    }
+  },
+};

packages/mermaid/src/diagrams/usecase/renderer.ts

@@ -0,0 +1,21 @@
+import type { Diagram } from '../../Diagram.js';
+import type {
+  DiagramRenderer,
+  DiagramStyleClassDef,
+  DrawDefinition,
+} from '../../diagram-api/types.js';
+
+/**
+ * Draws the Usecase diagram
+ */
+const draw: DrawDefinition = (_text, _id, _version, _diagram: Diagram) => {
+  // TODO: Implement the draw function for the usecase diagram
+};
+
+const getClasses = function (
+  _text: string,
+  _diagramObj: Pick<Diagram, 'db'>
+): Map<string, DiagramStyleClassDef> {
+  return new Map<string, DiagramStyleClassDef>();
+};
+export const renderer: DiagramRenderer = { draw, getClasses };

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

@@ -0,0 +1,51 @@
+import type { DiagramStylesProvider } from '../../diagram-api/types.js';
+import { cleanAndMerge } from '../../utils.js';
+import type { UsecaseStyleOptions } from './types.js';
+
+const defaultUsecaseStyleOptions: UsecaseStyleOptions = {
+  sectionStrokeColor: 'black',
+  sectionStrokeWidth: '1',
+  sectionFillColor: '#efefef',
+  leafStrokeColor: 'black',
+  leafStrokeWidth: '1',
+  leafFillColor: '#efefef',
+  labelColor: 'black',
+  labelFontSize: '12px',
+  valueFontSize: '10px',
+  valueColor: 'black',
+  titleColor: 'black',
+  titleFontSize: '14px',
+};
+
+export const getStyles: DiagramStylesProvider = ({
+  usecase,
+}: { usecase?: UsecaseStyleOptions } = {}) => {
+  const options = cleanAndMerge(defaultUsecaseStyleOptions, usecase);
+
+  return `
+  .usecaseNode.section {
+    stroke: ${options.sectionStrokeColor};
+    stroke-width: ${options.sectionStrokeWidth};
+    fill: ${options.sectionFillColor};
+  }
+  .usecaseNode.leaf {
+    stroke: ${options.leafStrokeColor};
+    stroke-width: ${options.leafStrokeWidth};
+    fill: ${options.leafFillColor};
+  }
+  .usecaseLabel {
+    fill: ${options.labelColor};
+    font-size: ${options.labelFontSize};
+  }
+  .usecaseValue {
+    fill: ${options.valueColor};
+    font-size: ${options.valueFontSize};
+  }
+  .usecaseTitle {
+    fill: ${options.titleColor};
+    font-size: ${options.titleFontSize};
+  }
+  `;
+};
+
+export default getStyles;