Use tokens from secrets.

This reverts commit 42a6eeeef7.

.build/common.ts

@@ -33,9 +33,4 @@ export const packageOptions = {
     packageName: 'mermaid-layout-elk',
     file: 'layouts.ts',
   },
-  examples: {
-    name: 'mermaid-examples',
-    packageName: 'examples',
-    file: 'index.ts',
-  },
 } as const satisfies Record<string, PackageOptions>;

.build/types.ts

@@ -10,16 +10,13 @@ const buildType = (packageName: string) => {
       console.log(out.toString());
     }
   } catch (e) {
+    console.error(e);
     if (e.stdout.length > 0) {
       console.error(e.stdout.toString());
     }
     if (e.stderr.length > 0) {
       console.error(e.stderr.toString());
     }
-    // Exit the build process if we are in CI
-    if (process.env.CI) {
-      throw new Error(`Failed to build types for ${packageName}`);
-    }
   }
 };
 

.changeset/cute-crews-shake.md

@@ -0,0 +1,5 @@
+---
+'mermaid': minor
+---
+
+feat: Added IpSepCoLa algorithm for layout

.cspell/code-terms.txt

@@ -88,7 +88,6 @@ NODIR
 NSTR
 outdir
 Qcontrolx
-QSTR
 reinit
 rels
 reqs

.cspell/contributors.txt

@@ -2,7 +2,6 @@
 Ashish Jain
 cpettitt
 Dong Cai
-fourcube
 knsv
 Knut Sveidqvist
 Nikolay Rozhkov

.cspell/mermaid-terms.txt

@@ -12,6 +12,7 @@ gantt
 gitgraph
 gzipped
 handDrawn
+ipsepcola
 kanban
 marginx
 marginy

.github/lychee.toml

@@ -46,20 +46,13 @@ exclude = [
 # Drupal 403
 "https://(www.)?drupal.org",
 
-# Phbpp 403
-"https://(www.)?phpbb.com",
-
 # Swimm returns 404, even though the link is valid
 "https://docs.swimm.io",
 
-# Certificate Error
-"https://noteshub.app",
-
 # Timeout
 "https://huehive.co",
 "https://foswiki.org",
 "https://www.gnu.org",
-"https://redmine.org",
 "https://mermaid-preview.com"
 ]
 

.github/workflows/autofix.yml

@@ -42,4 +42,4 @@ jobs:
         working-directory: ./packages/mermaid
         run: pnpm run docs:build
 
-      - uses: autofix-ci/action@635ffb0c9798bd160680f18fd73371e355b85f27 # main
+      - uses: autofix-ci/action@551dded8c6cc8a1054039c8bc0b8b48c51dfc6ef # main

.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@889dce9eaba7900ce30494f5e1ac7220b27e5c81
         with:
           add-paths: |
             cypress/timings.json

.github/workflows/e2e.yml

@@ -148,4 +148,4 @@ jobs:
           name: mermaid-codecov
           fail_ci_if_error: false
           verbose: true
-          token: 6845cc80-77ee-4e17-85a1-026cd95e0766
+          token: ${{ secrets.CODECOV_TOKEN }}

.github/workflows/pr-labeler.yml

@@ -29,29 +29,3 @@ jobs:
           disable-releaser: true
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Add "Sponsored by MermaidChart" label
-        uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: |
-            const prNumber = context.payload.pull_request.number;
-            const { data: commits } = await github.rest.pulls.listCommits({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              pull_number: prNumber,
-            });
-
-            const isSponsored = commits.every(
-              (c) => c.commit.author.email?.endsWith('@mermaidchart.com')
-            );
-
-            if (isSponsored) {
-              console.log('PR is sponsored. Adding label.');
-              await github.rest.issues.addLabels({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                issue_number: prNumber,
-                labels: ['Sponsored by MermaidChart'],
-              });
-            }

.github/workflows/test.yml

@@ -52,4 +52,4 @@ jobs:
           name: mermaid-codecov
           fail_ci_if_error: false
           verbose: true
-          token: 6845cc80-77ee-4e17-85a1-026cd95e0766
+          token: ${{ secrets.CODECOV_TOKEN }}

.github/workflows/validate-lockfile.yml

@@ -21,8 +21,6 @@ jobs:
         with:
           node-version: 20
 
-      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
-
       - name: Validate pnpm-lock.yaml entries
         id: validate # give this step an ID so we can reference its outputs
         run: |

CHANGELOG.md

@@ -1 +0,0 @@
-./packages/mermaid/CHANGELOG.md

__mocks__/d3.ts

@@ -0,0 +1,13 @@
+import { MockedD3 } from '../packages/mermaid/src/tests/MockedD3.js';
+
+export const select = function () {
+  return new MockedD3();
+};
+
+export const selectAll = function () {
+  return new MockedD3();
+};
+
+export const curveBasis = 'basis';
+export const curveLinear = 'linear';
+export const curveCardinal = 'cardinal';

cypress.config.ts

@@ -26,10 +26,7 @@ export default eyesPlugin(
         config.env.useArgos = process.env.RUN_VISUAL_TEST === 'true';
 
         if (config.env.useArgos) {
-          registerArgosTask(on, config, {
-            // Enable upload to Argos only when it runs on CI.
-            uploadToArgos: !!process.env.CI,
-          });
+          registerArgosTask(on, config);
         } else {
           addMatchImageSnapshotPlugin(on, config);
         }

cypress/helpers/util.ts

@@ -14,7 +14,7 @@ interface CodeObject {
   mermaid: CypressMermaidConfig;
 }
 
-export const utf8ToB64 = (str: string): string => {
+const utf8ToB64 = (str: string): string => {
   return Buffer.from(decodeURIComponent(encodeURIComponent(str))).toString('base64');
 };
 
@@ -22,7 +22,7 @@ const batchId: string =
   'mermaid-batch-' +
   (Cypress.env('useAppli')
     ? Date.now().toString()
-    : (Cypress.env('CYPRESS_COMMIT') ?? Date.now().toString()));
+    : Cypress.env('CYPRESS_COMMIT') || Date.now().toString());
 
 export const mermaidUrl = (
   graphStr: string | string[],
@@ -61,7 +61,9 @@ export const imgSnapshotTest = (
     sequence: {
       ...(_options.sequence ?? {}),
       actorFontFamily: 'courier',
-      noteFontFamily: _options.sequence?.noteFontFamily ?? 'courier',
+      noteFontFamily: _options.sequence?.noteFontFamily
+        ? _options.sequence.noteFontFamily
+        : 'courier',
       messageFontFamily: 'courier',
     },
   };

cypress/integration/other/xss.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, mermaidUrl, utf8ToB64 } from '../../helpers/util.ts';
+import { mermaidUrl } from '../../helpers/util.ts';
 describe('XSS', () => {
   it('should handle xss in tags', () => {
     const str =
@@ -141,37 +141,4 @@ describe('XSS', () => {
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
   });
-
-  it('should sanitize icon labels in architecture diagrams', () => {
-    const str = JSON.stringify({
-      code: `architecture-beta
-    group api(cloud)[API]
-    service db "<img src=x onerror=\\"xssAttack()\\">" [Database] in api`,
-    });
-    imgSnapshotTest(utf8ToB64(str), {}, true);
-    cy.wait(1000);
-    cy.get('#the-malware').should('not.exist');
-  });
-
-  it('should sanitize katex blocks', () => {
-    const str = JSON.stringify({
-      code: `sequenceDiagram
-    participant A as Alice<img src="x" onerror="xssAttack()">$$\\text{Alice}$$
-    A->>John: Hello John, how are you?`,
-    });
-    imgSnapshotTest(utf8ToB64(str), {}, true);
-    cy.wait(1000);
-    cy.get('#the-malware').should('not.exist');
-  });
-
-  it('should sanitize labels', () => {
-    const str = JSON.stringify({
-      code: `erDiagram
-    "<img src=x onerror=xssAttack()>" ||--|| ENTITY2 : "<img src=x onerror=xssAttack()>"
-    `,
-    });
-    imgSnapshotTest(utf8ToB64(str), {}, true);
-    cy.wait(1000);
-    cy.get('#the-malware').should('not.exist');
-  });
 });

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
@@ -384,28 +384,4 @@ describe('Block diagram', () => {
       {}
     );
   });
-
-  it('BL30: block should overflow if too wide for columns', () => {
-    imgSnapshotTest(
-      `block-beta
-  columns 2
-  fit:2
-  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/classDiagram.spec.js

@@ -495,34 +495,4 @@ describe('Class diagram', () => {
       cy.get('a').should('have.attr', 'target', '_blank').should('have.attr', 'rel', 'noopener');
     });
   });
-
-  describe('Include char sequence "graph" in text (#6795)', () => {
-    it('has a label with char sequence "graph"', () => {
-      imgSnapshotTest(
-        `
-        classDiagram
-          class Person {
-            +String name
-            -Int id
-            #double age
-            +Text demographicProfile
-          }
-        `,
-        { flowchart: { defaultRenderer: 'elk' } }
-      );
-    });
-  });
-
-  it('should handle backticks for namespace and class names', () => {
-    imgSnapshotTest(
-      `
-      classDiagram
-          namespace \`A::B\` {
-              class \`IPC::Sender\`
-          }
-          RenderProcessHost --|> \`IPC::Sender\`
-      `,
-      {}
-    );
-  });
 });

cypress/integration/rendering/erDiagram.spec.js

@@ -354,19 +354,4 @@ ORDER ||--|{ LINE-ITEM : contains
       { logLevel: 1 }
     );
   });
-
-  describe('Include char sequence "graph" in text (#6795)', () => {
-    it('has a label with char sequence "graph"', () => {
-      imgSnapshotTest(
-        `
-        erDiagram
-          p[Photograph] {
-            varchar(12) jobId
-            date dateCreated
-          }
-        `,
-        { flowchart: { defaultRenderer: 'elk' } }
-      );
-    });
-  });
 });

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,77 +1113,4 @@ 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(
-      `flowchart TD
-      A e1@-->B e5@--> E
-      E e7@--> D
-      B e3@-->D
-      A e2@-->C e4@-->D
-      C e6@--> F
-      F e8@--> D
-      e1@{ curve: natural }
-      e2@{ curve: stepAfter }
-      e3@{ curve: monotoneY }
-      e4@{ curve: bumpY }
-      e5@{ curve: linear }
-      e6@{ curve: catmullRom }
-      e7@{ curve: cardinal }
-      `
-    );
-  });
-
-  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/ipsepCola.spec.ts

@@ -0,0 +1,153 @@
+import { imgSnapshotTest } from '../../helpers/util.ts';
+
+describe('Flowchart IPSepCoLa', () => {
+  it('1-ipsepCola: should render a simple flowchart', () => {
+    imgSnapshotTest(
+      `---
+        config:
+          layout: ipsepCola
+    ---
+    flowchart
+        A[Christmas] -->|Get money| B(Go shopping)
+        B --> C{Let me think}
+        C -->|One| D[Laptop]
+        C -->|Two| E[iPhone]
+        C -->|Three| F[fa:fa-car Car]
+      `
+    );
+  });
+  it('2-ipsepCola: handle bidirectional edges', () => {
+    imgSnapshotTest(
+      `---
+        config:
+          layout: ipsepCola
+    ---
+    flowchart TD
+        subgraph D
+          A --> B
+          A --> B
+          B --> A
+          B --> A
+        end
+      `
+    );
+  });
+  it('3-ipsepCola: handle multiple self loops', () => {
+    imgSnapshotTest(
+      `---
+        config:
+          layout: ipsepCola
+    ---
+    flowchart
+        a --> a
+        a --> a
+        a --> a
+        a --> a
+      `
+    );
+  });
+  it('4-ipsepCola: handle state diagram example', () => {
+    imgSnapshotTest(
+      `---
+        config:
+          layout: ipsepCola
+    ---
+    stateDiagram-v2
+        [*] --> Still
+        Still --> [*]
+        Still --> Moving
+        Moving --> Still
+        Moving --> Crash
+        Crash --> [*]
+      `
+    );
+  });
+  it('5-ipsepCola: handle multiple subgraphs with edges between them', () => {
+    imgSnapshotTest(
+      `---
+        config:
+          layout: ipsepCola
+    ---
+    flowchart LR
+        c1-->a2
+        subgraph one
+        a1-->a2
+        end
+        subgraph two
+        b1-->b2
+        end
+        subgraph three
+        c1-->c2
+        end
+        one --> two
+        three --> two
+        two --> c2
+      `
+    );
+  });
+  it('6-ipsepCola: handle class diagram example', () => {
+    imgSnapshotTest(
+      `---
+        config:
+          layout: ipsepCola
+    ---
+    classDiagram
+        class AuthService {
+          +login(username: string, password: string): boolean
+          +logout(): void
+          +register(): void
+        }
+
+        class User {
+          -username: string
+          -password: string
+          -role: Role
+          +changePassword(): void
+        }
+
+        class Role {
+          -name: string
+          -permissions: string[]
+          +hasPermission(): boolean
+        }
+
+        AuthService --> User
+        User --> Role
+      `
+    );
+  });
+  it('7-ipsepCola: should render a decision flowchart', () => {
+    imgSnapshotTest(
+      `---
+        config:
+          layout: ipsepCola
+    ---
+      flowchart TD
+        Start([Start]) --> Prep[Preparation Step]
+        Prep --> Split{Ready to Process?}
+        Split -->|Yes| T1[Task A]
+        Split -->|Yes| T2[Task B]
+        T1 --> Merge
+        T2 --> Merge
+        Merge((Join Results)) --> Finalize[Finalize Process]
+        Finalize --> End([End])
+      `
+    );
+  });
+  it('8-ipsepCola: handle nested subgraphs', () => {
+    imgSnapshotTest(
+      `---
+        config:
+          layout: ipsepCola
+    ---
+    flowchart LR
+        subgraph  main
+          subgraph subcontainer
+            subcontainer-child
+          end
+           subcontainer-child--> subcontainer-sibling
+        end
+      `
+    );
+  });
+});

cypress/integration/rendering/mindmap.spec.ts

@@ -246,22 +246,5 @@ Word!\`]
       );
     });
   });
-  describe('Include char sequence "graph" in text (#6795)', () => {
-    it('has a label with char sequence "graph"', () => {
-      imgSnapshotTest(
-        `
-        mindmap
-          root
-            Photograph
-              Waterfall
-              Landscape
-            Geography
-              Mountains
-              Rocks
-        `,
-        { flowchart: { defaultRenderer: 'elk' } }
-      );
-    });
-  });
   /* The end */
 });

cypress/integration/rendering/packet.spec.ts

@@ -1,7 +1,7 @@
 import { imgSnapshotTest } from '../../helpers/util';
 
 describe('packet structure', () => {
-  it('should render a simple packet-beta diagram', () => {
+  it('should render a simple packet diagram', () => {
     imgSnapshotTest(
       `packet-beta
   title Hello world
@@ -10,18 +10,9 @@ describe('packet structure', () => {
     );
   });
 
-  it('should render a simple packet diagram', () => {
-    imgSnapshotTest(
-      `packet
-  title Hello world
-  0-10: "hello"
-`
-    );
-  });
-
   it('should render a simple packet diagram without ranges', () => {
     imgSnapshotTest(
-      `packet
+      `packet-beta
   0: "h"
   1: "i"
 `
@@ -30,7 +21,7 @@ describe('packet structure', () => {
 
   it('should render a complex packet diagram', () => {
     imgSnapshotTest(
-      `packet
+      `packet-beta
         0-15: "Source Port"
         16-31: "Destination Port"
         32-63: "Sequence Number"
@@ -61,7 +52,7 @@ describe('packet structure', () => {
         packet:
           showBits: false
       ---
-      packet
+      packet-beta
         0-15: "Source Port"
         16-31: "Destination Port"
         32-63: "Sequence Number"

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/treemap.spec.ts

@@ -1,382 +0,0 @@
-import { imgSnapshotTest } from '../../helpers/util.ts';
-
-describe('Treemap Diagram', () => {
-  it('1: should render a basic treemap', () => {
-    imgSnapshotTest(
-      `treemap-beta
-"Category A"
-    "Item A1": 10
-    "Item A2": 20
-"Category B"
-    "Item B1": 15
-    "Item B2": 25
-      `,
-      {}
-    );
-  });
-
-  it('2: should render a hierarchical treemap', () => {
-    imgSnapshotTest(
-      `treemap-beta
-"Products"
-    "Electronics"
-        "Phones": 50
-        "Computers": 30
-        "Accessories": 20
-    "Clothing"
-        "Men's"
-            "Shirts": 10
-            "Pants": 15
-        "Women's"
-            "Dresses": 20
-            "Skirts": 10
-      `,
-      {}
-    );
-  });
-
-  it('3: should render a treemap with styling using classDef', () => {
-    imgSnapshotTest(
-      `treemap-beta
-"Section 1"
-    "Leaf 1.1": 12
-    "Section 1.2":::class1
-      "Leaf 1.2.1": 12
-"Section 2"
-    "Leaf 2.1": 20:::class1
-    "Leaf 2.2": 25
-    "Leaf 2.3": 12
-
-classDef class1 fill:red,color:blue,stroke:#FFD600;
-      `,
-      {}
-    );
-  });
-
-  it('4: should handle long text that wraps', () => {
-    imgSnapshotTest(
-      `treemap-beta
-"Main Category"
-    "This is a very long item name that should wrap to the next line when rendered in the treemap diagram": 50
-    "Short item": 20
-      `,
-      {}
-    );
-  });
-
-  it('5: should render with a forest theme', () => {
-    imgSnapshotTest(
-      `---
-config:
-  theme: forest
----
-treemap-beta
-"Category A"
-    "Item A1": 10
-    "Item A2": 20
-"Category B"
-    "Item B1": 15
-    "Item B2": 25
-      `,
-      {}
-    );
-  });
-
-  it('6: should handle multiple levels of nesting', () => {
-    imgSnapshotTest(
-      `treemap-beta
-"Level 1"
-    "Level 2A"
-        "Level 3A": 10
-        "Level 3B": 15
-    "Level 2B"
-        "Level 3C": 20
-        "Level 3D"
-            "Level 4A": 5
-            "Level 4B": 5
-      `,
-      {}
-    );
-  });
-
-  it('7: should handle classDef with multiple styles', () => {
-    imgSnapshotTest(
-      `treemap-beta
-"Main"
-    "A": 20
-    "B":::important
-        "B1": 10
-        "B2": 15
-    "C": 5:::secondary
-
-classDef important fill:#f96,stroke:#333,stroke-width:2px;
-classDef secondary fill:#6cf,stroke:#333,stroke-dasharray:5 5;
-      `,
-      {}
-    );
-  });
-
-  it('8: should handle dollar value formatting with thousands separator', () => {
-    imgSnapshotTest(
-      `---
-config:
-  treemap:
-    valueFormat: "$0,0"
----
-treemap
-"Budget"
-    "Operations"
-        "Salaries": 700000
-        "Equipment": 200000
-        "Supplies": 100000
-    "Marketing"
-        "Advertising": 400000
-        "Events": 100000
-      `,
-      {}
-    );
-  });
-
-  it('8a: should handle percentage formatting', () => {
-    imgSnapshotTest(
-      `---
-config:
-  treemap:
-    valueFormat: ".1%"
----
-treemap-beta
-"Market Share"
-    "Company A": 0.35
-    "Company B": 0.25
-    "Company C": 0.15
-    "Others": 0.25
-      `,
-      {}
-    );
-  });
-
-  it('8b: should handle decimal formatting', () => {
-    imgSnapshotTest(
-      `---
-config:
-  treemap:
-    valueFormat: ".2f"
----
-treemap-beta
-"Metrics"
-    "Conversion Rate": 0.0567
-    "Bounce Rate": 0.6723
-    "Click-through Rate": 0.1289
-    "Engagement": 0.4521
-      `,
-      {}
-    );
-  });
-
-  it('8c: should handle dollar sign with decimal places', () => {
-    imgSnapshotTest(
-      `---
-config:
-  treemap:
-    valueFormat: "$.2f"
----
-treemap-beta
-"Product Prices"
-    "Basic": 19.99
-    "Standard": 49.99
-    "Premium": 99.99
-    "Enterprise": 199.99
-      `,
-      {}
-    );
-  });
-
-  it('8d: should handle dollar sign with thousands separator and decimal places', () => {
-    imgSnapshotTest(
-      `---
-config:
-  treemap:
-    valueFormat: "$,.2f"
----
-treemap-beta
-"Revenue"
-    "Q1": 1250345.75
-    "Q2": 1645789.25
-    "Q3": 1845123.50
-    "Q4": 2145678.75
-      `,
-      {}
-    );
-  });
-
-  it('8e: should handle simple thousands separator', () => {
-    imgSnapshotTest(
-      `---
-config:
-  treemap:
-    valueFormat: ","
----
-treemap-beta
-"User Counts"
-    "Active Users": 1250345
-    "New Signups": 45789
-    "Churned": 12350
-    "Converted": 78975
-      `,
-      {}
-    );
-  });
-
-  it('8f: should handle valueFormat set via directive with dollar and thousands separator', () => {
-    imgSnapshotTest(
-      `---
-config:
-  treemap:
-    valueFormat: "$,.0f"
----
-treemap-beta
-"Sales by Region"
-    "North": 1234567
-    "South": 7654321
-    "East": 4567890
-    "West": 9876543
-      `,
-      {}
-    );
-  });
-
-  it('8g: should handle scientific notation format', () => {
-    imgSnapshotTest(
-      `---
-config:
-  treemap:
-    valueFormat: ".2e"
----
-treemap-beta
-"Scientific Values"
-    "Value 1": 1234567
-    "Value 2": 0.0000123
-    "Value 3": 1000000000
-      `,
-      {}
-    );
-  });
-
-  it('9: should handle a complex example with multiple features', () => {
-    imgSnapshotTest(
-      `---
-config:
-  theme: dark
-  treemap:
-    valueFormat: "$0,0"
----
-treemap-beta
-"Company Budget"
-    "Engineering":::engineering
-        "Frontend": 300000
-        "Backend": 400000
-        "DevOps": 200000
-    "Marketing":::marketing
-        "Digital": 250000
-        "Print": 100000
-        "Events": 150000
-    "Sales":::sales
-        "Direct": 500000
-        "Channel": 300000
-
-classDef engineering fill:#6b9bc3,stroke:#333;
-classDef marketing fill:#c36b9b,stroke:#333;
-classDef sales fill:#c3a66b,stroke:#333;
-      `,
-      {}
-    );
-  });
-
-  it('10: should render the example from documentation', () => {
-    imgSnapshotTest(
-      `
-    treemap-beta
-      "Section 1"
-          "Leaf 1.1": 12
-          "Section 1.2":::class1
-            "Leaf 1.2.1": 12
-      "Section 2"
-          "Leaf 2.1": 20:::class1
-          "Leaf 2.2": 25
-          "Leaf 2.3": 12
-
-      classDef class1 fill:red,color:blue,stroke:#FFD600;
-      `,
-      {}
-    );
-  });
-
-  it('11: should handle comments', () => {
-    imgSnapshotTest(
-      `
-    treemap-beta
-      %% This is a comment
-      "Category A"
-          "Item A1": 10
-          "Item A2": 20
-      %% Another comment
-      "Category B"
-          "Item B1": 15
-          "Item B2": 25
-      `,
-      {}
-    );
-  });
-  /*
-  it.skip('12: should render a treemap with title', () => {
-    imgSnapshotTest(
-      `
-    treemap-beta
-      title Treemap with Title
-      "Category A"
-          "Item A1": 10
-          "Item A2": 20
-      "Category B"
-          "Item B1": 15
-          "Item B2": 25
-      `,
-      {}
-    );
-  });
-
-  it.skip('13: should render a treemap with accessibility attributes', () => {
-    imgSnapshotTest(
-      `
-    treemap-beta
-      accTitle: Accessible Treemap Title
-      accDescr: This is a description of the treemap for accessibility purposes
-      "Category A"
-          "Item A1": 10
-          "Item A2": 20
-      "Category B"
-          "Item B1": 15
-          "Item B2": 25
-      `,
-      {}
-    );
-  });
-
-  it.skip('14: should render a treemap with title and accessibility attributes', () => {
-    imgSnapshotTest(
-      `
-    treemap
-      title Treemap with Title and Accessibility
-      accTitle: Accessible Treemap Title
-      accDescr: This is a description of the treemap for accessibility purposes
-      "Category A"
-          "Item A1": 10
-          "Item A2": 20
-      "Category B"
-          "Item B1": 15
-          "Item B2": 25
-      `,
-      {}
-    );
-  });
-  */
-});

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/ipsepcola_sample.html

@@ -0,0 +1,601 @@
+<html>
+  <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+    />
+    <link
+      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
+      rel="stylesheet"
+    />
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
+      rel="stylesheet"
+    />
+
+    <style>
+      body {
+        /* background: #333; */
+        font-family: 'Arial';
+      }
+
+      h1 {
+        color: grey;
+      }
+
+      .mermaid2 {
+        display: none;
+      }
+
+      svg {
+        border: 3px solid #300;
+        margin: 10px;
+      }
+
+      pre {
+        width: 100%;
+      }
+    </style>
+  </head>
+
+  <body>
+    <pre id="diagram4" class="mermaid">
+      flowchart
+          A --> B
+      subgraph hello
+          C --> D
+        end
+      </pre
+    >
+
+    <pre id="diagram4" class="mermaid">
+      flowchart
+      A --> B
+      A --> B
+      </pre
+    >
+    <pre id="diagram4" class="mermaid">
+        flowchart
+          A[hello] --> A
+        </pre
+    >
+
+    <pre id="diagram4" class="mermaid">
+        flowchart
+          subgraph C
+          c
+        end
+        A --> C
+        </pre
+    >
+    <pre id="diagram4" class="mermaid">
+        flowchart
+          subgraph C
+            c
+          end
+        A --> c
+        </pre
+    >
+
+    <pre id="diagram4" class="mermaid">
+      flowchart TD
+      subgraph D
+        A --> B
+        A --> B
+        B --> A
+        B --> A
+      end
+      </pre
+    >
+    <pre id="diagram4" class="mermaid">
+flowchart
+subgraph B2
+A --> B --> C
+B --> D
+end
+
+B2 --> X
+</pre
+    >
+    <pre id="diagram4" class="mermaid">
+      stateDiagram-v2
+      [*] --> Still
+      Still --> [*]
+      Still --> Moving
+      Moving --> Still
+      Moving --> Crash
+      Crash --> [*]
+      </pre
+    >
+
+    <pre id="diagram4" class="mermaid">
+classDiagram
+    Animal <|-- Duck
+    Animal <|-- Fish
+    Animal <|-- Zebra
+    Animal : +int age
+    Animal : +String gender
+    Animal: +isMammal()
+    Animal: +mate()
+    class Duck{
+      +String beakColor
+      +swim()
+      +quack()
+    }
+    class Fish{
+      -int sizeInFeet
+      -canEat()
+    }
+    class Zebra{
+      +bool is_wild
+      +run()
+    }
+      </pre
+    >
+    <pre id="diagram4" class="mermaid">
+flowchart TD
+        P1
+        P1 -->P1.5
+        subgraph P1.5
+          P2
+          P2.5(( A ))
+          P3
+        end
+        P2 --> P4
+        P3 --> P6
+        P1.5 --> P5
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      %% Length of edges
+flowchart TD
+      L1 --- L2
+      L2 --- C
+      M1 ---> C
+      R1 .-> R2
+      R2 <.-> C
+      C -->|Label 1| E1
+      C <-- Label 2 ---> E2
+      C ----> E3
+      C <-...-> E4
+      C ======> E5
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      %% Stadium shape
+flowchart TD
+      A([stadium shape test])
+      A -->|Get money| B([Go shopping])
+      B --> C([Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?])
+      C -->|One| D([Laptop])
+      C -->|Two| E([iPhone])
+      C -->|Three| F([Car<br/>wroom wroom])
+      click A "index.html#link-clicked" "link test"
+      click B testClick "click test"
+      classDef someclass fill:#f96;
+      class A someclass;
+      class C someclass;
+    </pre>
+
+    <pre id="diagram4" class="mermaid">
+      %% should render escaped without html labels
+flowchart TD
+        a["<strong>Haiya</strong>"]---->b
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      %% nested subgraphs in reverse order
+flowchart LR
+        a -->b
+        subgraph A
+        B
+        end
+        subgraph B
+        b
+        end
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      %% nested subgraphs in several levels
+flowchart LR
+    b-->B
+    a-->c
+    subgraph O
+      A
+    end
+    subgraph B
+      c
+    end
+    subgraph A
+        a
+        b
+        B
+    end
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      %% nested subgraphs with edges in and out
+flowchart LR
+  internet
+  nat
+  routeur
+  lb1
+  lb2
+  compute1
+  compute2
+  subgraph project
+  routeur
+  nat
+    subgraph subnet1
+      compute1
+      lb1
+    end
+    subgraph subnet2
+      compute2
+      lb2
+    end
+  end
+  internet --> routeur
+  routeur --> subnet1 & subnet2
+  subnet1 & subnet2 --> nat --> internet
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      %% nested subgraphs with outgoing links
+flowchart LR
+  subgraph  main
+    subgraph subcontainer
+      subcontainer-child
+    end
+     subcontainer-child--> subcontainer-sibling
+  end
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      %% nested subgraphs with ingoing links
+flowchart LR
+subgraph one[One]
+    subgraph sub_one[Sub One]
+        _sub_one
+    end
+    subgraph sub_two[Sub Two]
+        _sub_two
+    end
+    _one
+end
+
+%% here, either the first or the second one
+sub_one --> sub_two
+_one --> b
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      %% nested subgraphs with outgoing links 3
+flowchart LR
+  subgraph container_Beta
+    process_C-->Process_D
+  end
+  subgraph container_Alpha
+    process_A-->process_B
+    process_A-->|messages|process_C
+    end
+    process_B-->|via_AWSBatch|container_Beta
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      %% nested subgraphs with outgoing links 4
+flowchart LR
+subgraph A
+a -->b
+end
+subgraph B
+b
+end
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      %% nested subgraphs with outgoing links 2
+flowchart LR
+    c1-->a2
+    subgraph one
+    a1-->a2
+    end
+    subgraph two
+    b1-->b2
+    end
+    subgraph three
+    c1-->c2
+    end
+    one --> two
+    three --> two
+    two --> c2
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      %% nested subgraphs with outgoing links 5
+flowchart LR
+  subgraph container_Beta
+    process_C-->Process_D
+  end
+  subgraph container_Alpha
+    process_A-->process_B
+    process_B-->|via_AWSBatch|container_Beta
+    process_A-->|messages|process_C
+  end
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      %% More subgraphs
+      flowchart LR
+    subgraph two
+    b1
+    end
+    subgraph three
+    c2
+    end
+
+    three --> two
+    two --> c2
+    note[There are two links in this diagram]
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      %% nested subgraphs with outgoing links 5
+flowchart LR
+      A[red text] -->|default style| B(blue text)
+      C([red text]) -->|default style| D[[blue text]]
+      E[(red text)] -->|default style| F((blue text))
+      G>red text] -->|default style| H{blue text}
+      I{{red text}} -->|default style| J[/blue text/]
+      K[\\ red text\\] -->|default style| L[/blue text\\]
+      M[\\ red text/] -->|default style| N[blue text];
+      O(((red text))) -->|default style| P(((blue text)));
+      linkStyle default color:Sienna;
+      style A stroke:#ff0000,fill:#ffcccc,color:#ff0000;
+      style B stroke:#0000ff,fill:#ccccff,color:#0000ff;
+      style C stroke:#ff0000,fill:#ffcccc,color:#ff0000;
+      style D stroke:#0000ff,fill:#ccccff,color:#0000ff;
+      style E stroke:#ff0000,fill:#ffcccc,color:#ff0000;
+      style F stroke:#0000ff,fill:#ccccff,color:#0000ff;
+      style G stroke:#ff0000,fill:#ffcccc,color:#ff0000;
+      style H stroke:#0000ff,fill:#ccccff,color:#0000ff;
+      style I stroke:#ff0000,fill:#ffcccc,color:#ff0000;
+      style J stroke:#0000ff,fill:#ccccff,color:#0000ff;
+      style K stroke:#ff0000,fill:#ffcccc,color:#ff0000;
+      style L stroke:#0000ff,fill:#ccccff,color:#0000ff;
+      style M stroke:#ff0000,fill:#ffcccc,color:#ff0000;
+      style N stroke:#0000ff,fill:#ccccff,color:#0000ff;
+      style O stroke:#ff0000,fill:#ffcccc,color:#ff0000;
+      style P stroke:#0000ff,fill:#ccccff,color:#0000ff;
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      %% labels on edges in a cluster
+flowchart RL
+    subgraph one
+      a1 -- I am a long label --> a2
+      a1 -- Another long label --> a2
+    end
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      %% labels on edges in a cluster
+flowchart RL
+    subgraph one
+      a1[Iam a node with a super long label] -- I am a long label --> a2[I am another node with a mega long label]
+      a1 -- Another long label --> a2
+      a3 --> a1 & a2 & a3 & a4
+      a1 --> a4
+    end
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      %% labels on edges in a cluster
+flowchart RL
+    subgraph one
+      a1[Iam a node with a super long label]
+      a2[I am another node with a mega long label]
+      a3[I am a node with a super long label]
+      a4[I am another node with a mega long label]
+      a1 -- Another long label --> a2
+      a3 --> a1 & a2 & a3 & a4
+      a1 --> a4
+    end
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      %% labels on edges in a cluster
+flowchart RL
+      a1[I am a node with a super long label. I am a node with a super long label. I am a node with a super long label. I am a node with a super long label. I am a node with a super long label. ]
+      a2[I am another node with a mega long label]
+      a3[I am a node with a super long label]
+      a4[I am another node with a mega long label]
+      a1 & a2 & a3 & a4 -->  a5 & a6 & a7 & a8 & a9 & a10
+
+    </pre>
+    <pre id="diagram4" class="mermaid">
+         flowchart
+        subgraph Z
+        subgraph X
+        a --> b
+        end
+        subgraph Y
+        c --> d
+        end
+        end
+        Y --> X
+        X --> P
+        P --> Y
+    
+        </pre
+    >
+    <pre id="diagram4" class="mermaid">
+            flowchart
+            
+            a --> b
+            b --> c
+            b --> d
+            c --> a
+            
+                    </pre
+    >
+
+    <pre id="diagram3" class="mermaid">
+flowchart TD
+  Start([Start]) --> Prep[Preparation Step]
+  Prep --> Split{Ready to Process?}
+  Split -->|Yes| T1[Task A]
+  Split -->|Yes| T2[Task B]
+  T1 --> Merge
+  T2 --> Merge
+  Merge((Join Results)) --> Finalize[Finalize Process]
+  Finalize --> End([End])
+</pre
+    >
+    <pre id="diagram4" class="mermaid">
+flowchart TD
+  A[Start Build] --> B[Compile Source]
+  B --> C[Test Suite]
+  C --> D{Tests Passed?}
+  D -->|No| E[Notify Developer]
+  E --> A
+  D -->|Yes| F[Build Docker Image]
+
+  subgraph Deploy Pipeline
+    F --> G[Deploy to Staging]
+    G --> H[Run Integration Tests]
+    H --> I{Tests Passed?}
+    I -->|No| J[Rollback & Alert]
+    I -->|Yes| K[Deploy to Production]
+  end
+
+  K --> L([Success])
+</pre
+    >
+
+    <pre class="mermaid">
+classDiagram
+class Controller {
+  +handleRequest(): void
+}
+
+class View {
+  +render(): void
+}
+
+class Model {
+  +getData(): any
+  +setData(data: any): void
+}
+
+Controller --> Model
+Controller --> View
+Model --> View : notifyChange()
+</pre
+    >
+
+    <pre class="mermaid">
+classDiagram
+class AuthService {
+  +login(username: string, password: string): boolean
+  +logout(): void
+  +register(): void
+}
+
+class User {
+  -username: string
+  -password: string
+  -role: Role
+  +changePassword(): void
+}
+
+class Role {
+  -name: string
+  -permissions: string[]
+  +hasPermission(): boolean
+}
+
+AuthService --> User
+User --> Role
+</pre
+    >
+
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      import layouts from './mermaid-layout-elk.esm.mjs';
+
+      const staticBellIconPack = {
+        prefix: 'fa6-regular',
+        icons: {
+          bell: {
+            body: '<path fill="currentColor" d="M224 0c-17.7 0-32 14.3-32 32v19.2C119 66 64 130.6 64 208v25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416h400c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6c-28.3-35.5-43.8-79.6-43.8-125V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32m0 96c61.9 0 112 50.1 112 112v25.4c0 47.9 13.9 94.6 39.7 134.6H72.3c25.8-40 39.7-86.7 39.7-134.6V208c0-61.9 50.1-112 112-112m64 352H160c0 17 6.7 33.3 18.7 45.3S207 512 224 512s33.3-6.7 45.3-18.7S288 465 288 448"/>',
+            width: 448,
+          },
+        },
+        width: 512,
+        height: 512,
+      };
+
+      mermaid.registerIconPacks([
+        {
+          name: 'logos',
+          loader: () =>
+            fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()),
+        },
+        {
+          name: 'fa',
+          loader: () => staticBellIconPack,
+        },
+      ]);
+      mermaid.registerLayoutLoaders(layouts);
+      mermaid.parseError = function (err, hash) {
+        console.error('Mermaid error: ', err);
+      };
+      window.callback = function () {
+        alert('A callback was triggered');
+      };
+      function callback() {
+        alert('It worked');
+      }
+      await mermaid.initialize({
+        theme: 'redux-dark',
+        // theme: 'default',
+        // theme: 'forest',
+        handDrawnSeed: 12,
+        look: 'classic  ',
+        // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
+        // layout: 'dagre',
+        layout: 'ipsepCola',
+        // layout: 'elk',
+        // layout: 'sugiyama',
+        // htmlLabels: false,
+        flowchart: { titleTopMargin: 10 },
+
+        // fontFamily: 'Caveat',
+        // fontFamily: 'Kalam',
+        // fontFamily: 'courier',
+        fontFamily: 'arial',
+        sequence: {
+          actorFontFamily: 'courier',
+          noteFontFamily: 'courier',
+          messageFontFamily: 'courier',
+        },
+        kanban: {
+          htmlLabels: false,
+        },
+        fontSize: 12,
+        logLevel: 0,
+        securityLevel: 'loose',
+        callback,
+      });
+
+      mermaid.parseError = function (err, hash) {
+        console.error('In parse error:');
+        console.error(err);
+      };
+    </script>
+  </body>
+</html>

cypress/platform/knsv2.html

@@ -32,26 +32,8 @@
       href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
       rel="stylesheet"
     />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Recursive:wght@300..1000&display=swap"
-      rel="stylesheet"
-    />
 
     <style>
-      .recursive-mermaid {
-        font-family: 'Recursive', sans-serif;
-        font-optical-sizing: auto;
-        font-weight: 500;
-        font-style: normal;
-        font-variation-settings:
-          'slnt' 0,
-          'CASL' 0,
-          'CRSV' 0.5,
-          'MONO' 0;
-      }
-
       body {
         /* background: rgb(221, 208, 208); */
         /* background: #333; */
@@ -63,9 +45,7 @@
       h1 {
         color: grey;
       }
-      .mermaid {
-        border: 1px solid red;
-      }
+
       .mermaid2 {
         display: none;
       }
@@ -103,11 +83,6 @@
         width: 100%;
       }
 
-      .class2 {
-        fill: red;
-        fill-opacity: 1;
-      }
-
       /* tspan {
               font-size: 6px !important;
             } */
@@ -131,79 +106,19 @@
 
   <body>
     <pre id="diagram4" class="mermaid">
----
-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
-    "Section 1.2":::class1
-      "Leaf 1.2.1": 12
-"Section 2"
-    "Leaf 2.1": 20:::class1
-    "Leaf 2.2": 25
-    "Leaf 2.3": 12
-
-classDef class1   fill:red,color:blue,stroke:#FFD600;
-
-
-</pre
-    >
-    <pre id="diagram4" class="mermaid2">
----
-config:
-  treemap:
-    valueFormat: '$0,0'
----
-treemap
-"Budget"
-    "Operations"
-        "Salaries": 7000
-        "Equipment": 2000
-        "Supplies": 1000
-    "Marketing"
-        "Advertising": 4000
-        "Events": 1000
-
-</pre
-    >
-    <pre id="diagram4" class="mermaid">
-    treemap
-      title Accessible Treemap Title
-      "Category A"
-          "Item A1": 10
-          "Item A2": 20
-      "Category B"
-          "Item B1": 15
-          "Item B2": 25
-    </pre>
-    <pre id="diagram4" class="mermaid2">
       flowchart LR
         AB["apa@apa@"] --> B(("`apa@apa`"))
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
       flowchart
         D(("for D"))
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
       flowchart LR
         A e1@==> B
         e1@{ animate: true}
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 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
@@ -523,7 +438,7 @@ kanban
         alert('It worked');
       }
       await mermaid.initialize({
-        // theme: 'forest',
+        // theme: 'base',
         // theme: 'default',
         // theme: 'forest',
         // handDrawnSeed: 12,
@@ -534,7 +449,11 @@ kanban
         // layout: 'fixed',
         // htmlLabels: false,
         flowchart: { titleTopMargin: 10 },
-        fontFamily: "'Recursive', sans-serif",
+
+        // fontFamily: 'Caveat',
+        // fontFamily: 'Kalam',
+        // fontFamily: 'courier',
+        fontFamily: 'arial',
         sequence: {
           actorFontFamily: 'courier',
           noteFontFamily: 'courier',

cypress/platform/sidv.html

@@ -41,6 +41,10 @@ graph TB
       const { svg } = await mermaid.render('d22', value);
       console.log(svg);
       el.innerHTML = svg;
+      // mermaid.test1('first_slow', 1200).then((r) => console.info(r));
+      // mermaid.test1('second_fast', 200).then((r) => console.info(r));
+      // mermaid.test1('third_fast', 200).then((r) => console.info(r));
+      // mermaid.test1('forth_slow', 1200).then((r) => console.info(r));
     </script>
   </body>
 </html>

cypress/platform/viewer.js

@@ -182,7 +182,7 @@ const contentLoadedApi = async function () {
       for (let i = 0; i < numCodes; i++) {
         const { svg, bindFunctions } = await mermaid.render('newid' + i, graphObj.code[i], divs[i]);
         div.innerHTML = svg;
-        bindFunctions?.(div);
+        bindFunctions(div);
       }
     } else {
       const div = document.createElement('div');
@@ -194,7 +194,7 @@ const contentLoadedApi = async function () {
       const { svg, bindFunctions } = await mermaid.render('newid', graphObj.code, div);
       div.innerHTML = svg;
       console.log(div.innerHTML);
-      bindFunctions?.(div);
+      bindFunctions(div);
     }
   }
 };

cypress/timings.json

@@ -2,219 +2,215 @@
   "durations": [
     {
       "spec": "cypress/integration/other/configuration.spec.js",
-      "duration": 6297
+      "duration": 6130
     },
     {
       "spec": "cypress/integration/other/external-diagrams.spec.js",
-      "duration": 2187
+      "duration": 1974
     },
     {
       "spec": "cypress/integration/other/ghsa.spec.js",
-      "duration": 3509
+      "duration": 3308
     },
     {
       "spec": "cypress/integration/other/iife.spec.js",
-      "duration": 2218
+      "duration": 1877
     },
     {
       "spec": "cypress/integration/other/interaction.spec.js",
-      "duration": 12104
+      "duration": 10902
     },
     {
       "spec": "cypress/integration/other/rerender.spec.js",
-      "duration": 2151
+      "duration": 1836
     },
     {
       "spec": "cypress/integration/other/xss.spec.js",
-      "duration": 33064
+      "duration": 26467
     },
     {
       "spec": "cypress/integration/rendering/appli.spec.js",
-      "duration": 3488
+      "duration": 3129
     },
     {
       "spec": "cypress/integration/rendering/architecture.spec.ts",
-      "duration": 106
+      "duration": 104
     },
     {
       "spec": "cypress/integration/rendering/block.spec.js",
-      "duration": 18317
+      "duration": 16230
     },
     {
       "spec": "cypress/integration/rendering/c4.spec.js",
-      "duration": 5592
+      "duration": 5231
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-elk-v3.spec.js",
-      "duration": 39358
+      "duration": 38113
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-handDrawn-v3.spec.js",
-      "duration": 37160
+      "duration": 36423
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-v2.spec.js",
-      "duration": 23660
+      "duration": 22509
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-v3.spec.js",
-      "duration": 36866
+      "duration": 34933
     },
     {
       "spec": "cypress/integration/rendering/classDiagram.spec.js",
-      "duration": 17334
+      "duration": 14681
     },
     {
       "spec": "cypress/integration/rendering/conf-and-directives.spec.js",
-      "duration": 9871
+      "duration": 8877
     },
     {
       "spec": "cypress/integration/rendering/current.spec.js",
-      "duration": 2833
+      "duration": 2517
     },
     {
       "spec": "cypress/integration/rendering/erDiagram-unified.spec.js",
-      "duration": 85321
+      "duration": 81226
     },
     {
       "spec": "cypress/integration/rendering/erDiagram.spec.js",
-      "duration": 15673
+      "duration": 14211
     },
     {
       "spec": "cypress/integration/rendering/errorDiagram.spec.js",
-      "duration": 3724
+      "duration": 3355
     },
     {
       "spec": "cypress/integration/rendering/flowchart-elk.spec.js",
-      "duration": 41178
+      "duration": 38857
     },
     {
       "spec": "cypress/integration/rendering/flowchart-handDrawn.spec.js",
-      "duration": 29966
+      "duration": 28570
     },
     {
       "spec": "cypress/integration/rendering/flowchart-icon.spec.js",
-      "duration": 7689
+      "duration": 6902
     },
     {
       "spec": "cypress/integration/rendering/flowchart-shape-alias.spec.ts",
-      "duration": 24709
+      "duration": 23075
     },
     {
       "spec": "cypress/integration/rendering/flowchart-v2.spec.js",
-      "duration": 45565
+      "duration": 40514
     },
     {
       "spec": "cypress/integration/rendering/flowchart.spec.js",
-      "duration": 31144
+      "duration": 28611
     },
     {
       "spec": "cypress/integration/rendering/gantt.spec.js",
-      "duration": 20808
+      "duration": 16605
     },
     {
       "spec": "cypress/integration/rendering/gitGraph.spec.js",
-      "duration": 49985
+      "duration": 47636
     },
     {
       "spec": "cypress/integration/rendering/iconShape.spec.ts",
-      "duration": 273272
+      "duration": 262219
     },
     {
       "spec": "cypress/integration/rendering/imageShape.spec.ts",
-      "duration": 55880
+      "duration": 54111
     },
     {
       "spec": "cypress/integration/rendering/info.spec.ts",
-      "duration": 3271
+      "duration": 3006
     },
     {
       "spec": "cypress/integration/rendering/journey.spec.js",
-      "duration": 7293
+      "duration": 6858
     },
     {
       "spec": "cypress/integration/rendering/kanban.spec.ts",
-      "duration": 7861
+      "duration": 7281
     },
     {
       "spec": "cypress/integration/rendering/katex.spec.js",
-      "duration": 3922
+      "duration": 3579
     },
     {
       "spec": "cypress/integration/rendering/marker_unique_id.spec.js",
-      "duration": 2726
+      "duration": 2448
     },
     {
       "spec": "cypress/integration/rendering/mindmap.spec.ts",
-      "duration": 11670
+      "duration": 10618
     },
     {
       "spec": "cypress/integration/rendering/newShapes.spec.ts",
-      "duration": 146020
+      "duration": 140874
     },
     {
       "spec": "cypress/integration/rendering/oldShapes.spec.ts",
-      "duration": 114244
+      "duration": 108015
     },
     {
       "spec": "cypress/integration/rendering/packet.spec.ts",
-      "duration": 5036
+      "duration": 4241
     },
     {
       "spec": "cypress/integration/rendering/pie.spec.ts",
-      "duration": 6545
+      "duration": 5645
     },
     {
       "spec": "cypress/integration/rendering/quadrantChart.spec.js",
-      "duration": 9097
+      "duration": 8524
     },
     {
       "spec": "cypress/integration/rendering/radar.spec.js",
-      "duration": 5676
+      "duration": 5203
     },
     {
       "spec": "cypress/integration/rendering/requirement.spec.js",
-      "duration": 2795
+      "duration": 2635
     },
     {
       "spec": "cypress/integration/rendering/requirementDiagram-unified.spec.js",
-      "duration": 51660
+      "duration": 50512
     },
     {
       "spec": "cypress/integration/rendering/sankey.spec.ts",
-      "duration": 6957
+      "duration": 6692
     },
     {
       "spec": "cypress/integration/rendering/sequencediagram.spec.js",
-      "duration": 36026
+      "duration": 34559
     },
     {
       "spec": "cypress/integration/rendering/stateDiagram-v2.spec.js",
-      "duration": 29551
+      "duration": 24421
     },
     {
       "spec": "cypress/integration/rendering/stateDiagram.spec.js",
-      "duration": 17364
+      "duration": 15316
     },
     {
       "spec": "cypress/integration/rendering/theme.spec.js",
-      "duration": 30209
+      "duration": 28240
     },
     {
       "spec": "cypress/integration/rendering/timeline.spec.ts",
-      "duration": 8699
-    },
-    {
-      "spec": "cypress/integration/rendering/treemap.spec.ts",
-      "duration": 12168
+      "duration": 6808
     },
     {
       "spec": "cypress/integration/rendering/xyChart.spec.js",
-      "duration": 21453
+      "duration": 19359
     },
     {
       "spec": "cypress/integration/rendering/zenuml.spec.js",
-      "duration": 3577
+      "duration": 3164
     }
   ]
 }

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/er-multiline.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
     />
     <link
       href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"

demos/packet.html

@@ -17,7 +17,7 @@
 
     <div class="diagrams">
       <pre class="mermaid">
-      packet
+      packet-beta
         0-15: "Source Port"
         16-31: "Destination Port"
         32-63: "Sequence Number"
@@ -44,7 +44,7 @@
         packet:
           showBits: false
       ---
-      packet
+      packet-beta
         0-15: "Source Port"
         16-31: "Destination Port"
         32-63: "Sequence Number"
@@ -70,7 +70,7 @@
       config:
         theme: forest
       ---
-      packet
+      packet-beta
         title Forest theme
         0-15: "Source Port"
         16-31: "Destination Port"
@@ -97,7 +97,7 @@
       config:
         theme: dark
       ---
-      packet
+      packet-beta
         title Dark theme
         0-15: "Source Port"
         16-31: "Destination Port"

demos/sankey.html

@@ -20,14 +20,12 @@
           width: 800
           nodeAlignment: left
       ---
-     sankey
-        a,b,8
-        b,c,8
-        c,d,8
-        d,e,8
-
-        x,c,4
-        c,y,4
+      sankey-beta
+        Revenue,Expenses,10
+        Revenue,Profit,10
+        Expenses,Manufacturing,5
+        Expenses,Tax,3
+        Expenses,Research,2
     </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/treemap.html

@@ -1,75 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Mermaid Treemap Diagram Demo</title>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <style>
-      body {
-        font-family: 'Montserrat', sans-serif;
-        margin: 0 auto;
-        max-width: 900px;
-        padding: 20px;
-      }
-      .mermaid {
-        margin: 30px 0;
-      }
-      h1,
-      h2 {
-        color: #333;
-      }
-      pre {
-        background-color: #f5f5f5;
-        padding: 15px;
-        border-radius: 5px;
-      }
-    </style>
-  </head>
-  <body>
-    <h1>Treemap Diagram Demo</h1>
-    <p>This is a demo of the new treemap diagram type in Mermaid.</p>
-
-    <h2>Basic Treemap Example</h2>
-    <pre class="mermaid">
-treemap
-    "Root"
-        "Branch 1"
-            "Leaf 1.1": 10
-            "Leaf 1.2": 15
-        "Branch 2"
-            "Branch 2.1"
-                "Leaf 2.1.1": 20
-                "Leaf 2.1.2": 25
-            "Leaf 2.2": 25
-            "Leaf 2.3": 30
-    </pre>
-
-    <h2>Technology Stack Treemap Example</h2>
-    <pre class="mermaid">
-treemap
-    "Technology Stack"
-        "Frontend"
-            "React": 35
-            "CSS": 15
-            "HTML": 10
-        "Backend"
-            "Node.js": 25
-            "Express": 10
-            "MongoDB": 15
-        "DevOps"
-            "Docker": 10
-            "Kubernetes": 15
-            "CI/CD": 5
-    </pre>
-
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      mermaid.initialize({
-        theme: 'forest',
-        logLevel: 1,
-        securityLevel: 'loose',
-      });
-    </script>
-  </body>
-</html>

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/community/contributing.md

@@ -301,7 +301,7 @@ If you are adding a feature, you will definitely need to add tests. Depending on
 
 Unit tests are tests that test a single function or module. They are the easiest to write and the fastest to run.
 
-Unit tests are mandatory for all code except the layout tests. (The layouts are tested with integration tests.)
+Unit tests are mandatory for all code except the renderers. (The renderers are tested with integration tests.)
 
 We use [Vitest](https://vitest.dev) to run unit tests.
 
@@ -327,30 +327,6 @@ When using Docker prepend your command with `./run`:
 ./run pnpm test
 ```
 
-##### Testing the DOM
-
-One can use `jsdomIt` to test any part of Mermaid that interacts with the DOM, as long as it is not related to the layout.
-
-The function `jsdomIt` ([developed in utils.ts](../../tests/util.ts)) overrides `it` from `vitest`, and creates a pseudo-browser environment that works almost like the real deal for the duration of the test. It uses JSDOM to create a DOM, and adds objects `window` and `document` to `global` to mock the browser environment.
-
-> \[!NOTE]
-> The layout cannot work in `jsdomIt` tests because JSDOM has no rendering engine, hence the pseudo-browser environment.
-
-Example :
-
-```typescript
-import { ensureNodeFromSelector, jsdomIt } from './tests/util.js';
-
-jsdomIt('should add element "thing" in the SVG', ({ svg }) => {
-  // Code in this block runs in a pseudo-browser environment
-  addThing(svg); // The svg item is the D3 selection of the SVG node
-  const svgNode = ensureNodeFromSelector('svg'); // Retrieve the DOM node using the DOM API
-  expect(svgNode.querySelector('thing')).not.toBeNull(); // Test the structure of the SVG
-});
-```
-
-They can be used to test any method that interacts with the DOM, including for testing renderers. For renderers, additional integration testing is necessary to test the layout though.
-
 #### Integration / End-to-End (E2E) Tests
 
 These test the rendering and visual appearance of the diagrams.

docs/community/new-diagram.md

@@ -111,13 +111,3 @@ const themes = {
 ```
 
 The actual options and values for the colors are defined in **src/theme/theme-\[xyz].js**. If you provide the options your diagram needs in the existing theme files then the theming will work smoothly without hiccups.
-
-## Examples
-
-The `@mermaid-js/examples` package contains a collection of examples that are used by tools like mermaid.live to help users get started with the new diagram.
-
-You can duplicate an existing diagram example file, eg: `packages/examples/src/examples/flowchart.ts`, and modify it with details specific to your diagram.
-
-Then you can import the example in the `packages/examples/src/index.ts` file and add it to the `examples` array.
-
-Each diagram should have at least one example, and that should be marked as default. It is good to add more examples to showcase different features of the diagram.

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:278](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L278)

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

@@ -10,7 +10,7 @@
 
 # Interface: ExternalDiagramDefinition
 
-Defined in: [packages/mermaid/src/diagram-api/types.ts:94](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L94)
+Defined in: [packages/mermaid/src/diagram-api/types.ts:99](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L99)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:94](https://github.com/me
 
 > **detector**: `DiagramDetector`
 
-Defined in: [packages/mermaid/src/diagram-api/types.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L96)
+Defined in: [packages/mermaid/src/diagram-api/types.ts:101](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L101)
 
 ---
 
@@ -26,7 +26,7 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:96](https://github.com/me
 
 > **id**: `string`
 
-Defined in: [packages/mermaid/src/diagram-api/types.ts:95](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L95)
+Defined in: [packages/mermaid/src/diagram-api/types.ts:100](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L100)
 
 ---
 
@@ -34,4 +34,4 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:95](https://github.com/me
 
 > **loader**: `DiagramLoader`
 
-Defined in: [packages/mermaid/src/diagram-api/types.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L97)
+Defined in: [packages/mermaid/src/diagram-api/types.ts:102](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L102)

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

@@ -10,7 +10,7 @@
 
 # Interface: LayoutData
 
-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)
+Defined in: [packages/mermaid/src/rendering-util/types.ts:159](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L159)
 
 ## Indexable
 
@@ -22,7 +22,7 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:145](https://github.co
 
 > **config**: [`MermaidConfig`](MermaidConfig.md)
 
-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)
+Defined in: [packages/mermaid/src/rendering-util/types.ts:162](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L162)
 
 ---
 
@@ -30,7 +30,7 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:148](https://github.co
 
 > **edges**: `Edge`\[]
 
-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)
+Defined in: [packages/mermaid/src/rendering-util/types.ts:161](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L161)
 
 ---
 
@@ -38,4 +38,4 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:147](https://github.co
 
 > **nodes**: `Node`\[]
 
-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)
+Defined in: [packages/mermaid/src/rendering-util/types.ts:160](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L160)

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

@@ -10,7 +10,7 @@
 
 # Interface: Mermaid
 
-Defined in: [packages/mermaid/src/mermaid.ts:429](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L429)
+Defined in: [packages/mermaid/src/mermaid.ts:418](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L418)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/mermaid.ts:429](https://github.com/mermaid-js/
 
 > **contentLoaded**: () => `void`
 
-Defined in: [packages/mermaid/src/mermaid.ts:447](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L447)
+Defined in: [packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L436)
 
 \##contentLoaded Callback function that is called when page is loaded. This functions fetches
 configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the
@@ -34,7 +34,7 @@ page.
 
 > **detectType**: (`text`, `config`?) => `string`
 
-Defined in: [packages/mermaid/src/mermaid.ts:449](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L449)
+Defined in: [packages/mermaid/src/mermaid.ts:438](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L438)
 
 Detects the type of the graph text.
 
@@ -86,28 +86,11 @@ A graph definition key
 
 ---
 
-### getRegisteredDiagramsMetadata()
-
-> **getRegisteredDiagramsMetadata**: () => `Pick`<[`ExternalDiagramDefinition`](ExternalDiagramDefinition.md), `"id"`>\[]
-
-Defined in: [packages/mermaid/src/mermaid.ts:451](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L451)
-
-Gets the metadata for all registered diagrams.
-Currently only the id is returned.
-
-#### Returns
-
-`Pick`<[`ExternalDiagramDefinition`](ExternalDiagramDefinition.md), `"id"`>\[]
-
-An array of objects with the id of the diagram.
-
----
-
 ### ~~init()~~
 
 > **init**: (`config`?, `nodes`?, `callback`?) => `Promise`<`void`>
 
-Defined in: [packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L442)
+Defined in: [packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431)
 
 ## init
 
@@ -155,7 +138,7 @@ Use [initialize](Mermaid.md#initialize) and [run](Mermaid.md#run) instead.
 
 > **initialize**: (`config`) => `void`
 
-Defined in: [packages/mermaid/src/mermaid.ts:446](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L446)
+Defined in: [packages/mermaid/src/mermaid.ts:435](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L435)
 
 Used to set configurations for mermaid.
 This function should be called before the run function.
@@ -178,7 +161,7 @@ Configuration object for mermaid.
 
 > **mermaidAPI**: `Readonly`<{ `defaultConfig`: [`MermaidConfig`](MermaidConfig.md); `getConfig`: () => [`MermaidConfig`](MermaidConfig.md); `getDiagramFromText`: (`text`, `metadata`) => `Promise`<`Diagram`>; `getSiteConfig`: () => [`MermaidConfig`](MermaidConfig.md); `globalReset`: () => `void`; `initialize`: (`userOptions`) => `void`; `parse`: (`text`, `parseOptions`) => `Promise`<`false` | [`ParseResult`](ParseResult.md)>(`text`, `parseOptions`?) => `Promise`<[`ParseResult`](ParseResult.md)>; `render`: (`id`, `text`, `svgContainingElement`?) => `Promise`<[`RenderResult`](RenderResult.md)>; `reset`: () => `void`; `setConfig`: (`conf`) => [`MermaidConfig`](MermaidConfig.md); `updateSiteConfig`: (`conf`) => [`MermaidConfig`](MermaidConfig.md); }>
 
-Defined in: [packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L436)
+Defined in: [packages/mermaid/src/mermaid.ts:425](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L425)
 
 **`Internal`**
 
@@ -192,7 +175,7 @@ Use [parse](Mermaid.md#parse) and [render](Mermaid.md#render) instead. Please [o
 
 > **parse**: (`text`, `parseOptions`) => `Promise`<`false` | [`ParseResult`](ParseResult.md)>(`text`, `parseOptions`?) => `Promise`<[`ParseResult`](ParseResult.md)>
 
-Defined in: [packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437)
+Defined in: [packages/mermaid/src/mermaid.ts:426](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L426)
 
 Parse the text and validate the syntax.
 
@@ -260,7 +243,7 @@ Error if the diagram is invalid and parseOptions.suppressErrors is false or not
 
 > `optional` **parseError**: [`ParseErrorFunction`](../type-aliases/ParseErrorFunction.md)
 
-Defined in: [packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431)
+Defined in: [packages/mermaid/src/mermaid.ts:420](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L420)
 
 ---
 
@@ -268,7 +251,7 @@ Defined in: [packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/
 
 > **registerExternalDiagrams**: (`diagrams`, `opts`) => `Promise`<`void`>
 
-Defined in: [packages/mermaid/src/mermaid.ts:445](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L445)
+Defined in: [packages/mermaid/src/mermaid.ts:434](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L434)
 
 Used to register external diagram types.
 
@@ -298,7 +281,7 @@ If opts.lazyLoad is false, the diagrams will be loaded immediately.
 
 > **registerIconPacks**: (`iconLoaders`) => `void`
 
-Defined in: [packages/mermaid/src/mermaid.ts:450](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L450)
+Defined in: [packages/mermaid/src/mermaid.ts:439](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L439)
 
 #### Parameters
 
@@ -316,7 +299,7 @@ Defined in: [packages/mermaid/src/mermaid.ts:450](https://github.com/mermaid-js/
 
 > **registerLayoutLoaders**: (`loaders`) => `void`
 
-Defined in: [packages/mermaid/src/mermaid.ts:444](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L444)
+Defined in: [packages/mermaid/src/mermaid.ts:433](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L433)
 
 #### Parameters
 
@@ -334,7 +317,7 @@ Defined in: [packages/mermaid/src/mermaid.ts:444](https://github.com/mermaid-js/
 
 > **render**: (`id`, `text`, `svgContainingElement`?) => `Promise`<[`RenderResult`](RenderResult.md)>
 
-Defined in: [packages/mermaid/src/mermaid.ts:438](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L438)
+Defined in: [packages/mermaid/src/mermaid.ts:427](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L427)
 
 #### Parameters
 
@@ -366,7 +349,7 @@ Deprecated for external use.
 
 > **run**: (`options`) => `Promise`<`void`>
 
-Defined in: [packages/mermaid/src/mermaid.ts:443](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L443)
+Defined in: [packages/mermaid/src/mermaid.ts:432](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L432)
 
 ## run
 
@@ -410,7 +393,7 @@ Optional runtime configs
 
 > **setParseErrorHandler**: (`parseErrorHandler`) => `void`
 
-Defined in: [packages/mermaid/src/mermaid.ts:448](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L448)
+Defined in: [packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437)
 
 ## setParseErrorHandler Alternative to directly setting parseError using:
 
@@ -441,4 +424,4 @@ New parseError() callback.
 
 > **startOnLoad**: `boolean`
 
-Defined in: [packages/mermaid/src/mermaid.ts:430](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L430)
+Defined in: [packages/mermaid/src/mermaid.ts:419](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L419)

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:72](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L72)
+Defined in: [packages/mermaid/src/types.ts:59](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L59)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:72](https://github.com/mermaid-js/mer
 
 > `optional` **suppressErrors**: `boolean`
 
-Defined in: [packages/mermaid/src/types.ts:77](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L77)
+Defined in: [packages/mermaid/src/types.ts:64](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L64)
 
 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:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L80)
+Defined in: [packages/mermaid/src/types.ts:67](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L67)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:80](https://github.com/mermaid-js/mer
 
 > **config**: [`MermaidConfig`](MermaidConfig.md)
 
-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:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L75)
 
 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:84](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L84)
+Defined in: [packages/mermaid/src/types.ts:71](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L71)
 
 The diagram type, e.g. 'flowchart', 'sequence', etc.

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

@@ -10,7 +10,7 @@
 
 # Interface: RenderResult
 
-Defined in: [packages/mermaid/src/types.ts:98](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L98)
+Defined in: [packages/mermaid/src/types.ts:85](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L85)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:98](https://github.com/mermaid-js/mer
 
 > `optional` **bindFunctions**: (`element`) => `void`
 
-Defined in: [packages/mermaid/src/types.ts:116](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L116)
+Defined in: [packages/mermaid/src/types.ts:103](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L103)
 
 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:106](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L106)
+Defined in: [packages/mermaid/src/types.ts:93](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L93)
 
 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:102](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L102)
+Defined in: [packages/mermaid/src/types.ts:89](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L89)
 
 The svg code for the rendered graph.

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

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

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

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

docs/config/setup/mermaid/variables/default.md

@@ -12,4 +12,4 @@
 
 > `const` **default**: [`Mermaid`](../interfaces/Mermaid.md)
 
-Defined in: [packages/mermaid/src/mermaid.ts:454](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L454)
+Defined in: [packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L442)

docs/diagrams/flowchart-code-flow.mmd

@@ -1,189 +0,0 @@
----
-references:
-  - "File: /packages/mermaid/src/diagrams/flowchart/flowDiagram.ts"
-  - "File: /packages/mermaid/src/diagrams/flowchart/flowDb.ts"
-  - "File: /packages/mermaid/src/diagrams/flowchart/flowDetector.ts"
-  - "File: /packages/mermaid/src/diagrams/flowchart/flowDetector-v2.ts"
-  - "File: /packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts"
-  - "File: /packages/mermaid/src/diagrams/flowchart/styles.ts"
-  - "File: /packages/mermaid/src/diagrams/flowchart/types.ts"
-  - "File: /packages/mermaid/src/diagrams/flowchart/flowChartShapes.js"
-  - "File: /packages/mermaid/src/diagrams/flowchart/parser/flowParser.ts"
-  - "File: /packages/mermaid/src/diagrams/flowchart/elk/detector.ts"
-generationTime: 2025-07-23T10:31:53.266Z
----
-flowchart TD
-    %% Entry Points and Detection
-    Input["User Input Text"] --> Detection{Detection Phase}
-    
-    Detection --> flowDetector["flowDetector.ts<br/>detector(txt, config)"]
-    Detection --> flowDetectorV2["flowDetector-v2.ts<br/>detector(txt, config)"]
-    Detection --> elkDetector["elk/detector.ts<br/>detector(txt, config)"]
-    
-    flowDetector --> |"Checks /^\s*graph/"| DetectLegacy{Legacy Flowchart?}
-    flowDetectorV2 --> |"Checks /^\s*flowchart/"| DetectNew{New Flowchart?}
-    elkDetector --> |"Checks /^\s*flowchart-elk/"| DetectElk{ELK Layout?}
-    
-    DetectLegacy --> |Yes| LoadDiagram
-    DetectNew --> |Yes| LoadDiagram
-    DetectElk --> |Yes| LoadDiagram
-    
-    %% Loading Phase
-    LoadDiagram["loader() function"] --> flowDiagram["flowDiagram.ts<br/>diagram object"]
-    
-    flowDiagram --> DiagramStructure{Diagram Components}
-    DiagramStructure --> Parser["parser: flowParser"]
-    DiagramStructure --> Database["db: new FlowDB()"]
-    DiagramStructure --> Renderer["renderer: flowRenderer-v3-unified"]
-    DiagramStructure --> Styles["styles: flowStyles"]
-    DiagramStructure --> Init["init: (cnf: MermaidConfig)"]
-    
-    %% Parser Phase
-    Parser --> flowParser["parser/flowParser.ts<br/>newParser.parse(src)"]
-    flowParser --> |"Preprocesses src"| RemoveWhitespace["Remove trailing whitespace<br/>src.replace(/}\s*\n/g, '}\n')"]
-    RemoveWhitespace --> flowJison["parser/flow.jison<br/>flowJisonParser.parse(newSrc)"]
-    
-    flowJison --> ParseGraph["Parse Graph Structure"]
-    ParseGraph --> ParseVertices["Parse Vertices"]
-    ParseGraph --> ParseEdges["Parse Edges"]
-    ParseGraph --> ParseSubgraphs["Parse Subgraphs"]
-    ParseGraph --> ParseClasses["Parse Classes"]
-    ParseGraph --> ParseStyles["Parse Styles"]
-    
-    %% Database Phase - FlowDB Class
-    Database --> FlowDBClass["flowDb.ts<br/>FlowDB class"]
-    
-    FlowDBClass --> DBInit["constructor()<br/>- Initialize counters<br/>- Bind methods<br/>- Setup toolTips<br/>- Call clear()"]
-    
-    DBInit --> DBMethods{FlowDB Methods}
-    
-    DBMethods --> addVertex["addVertex(id, textObj, type, style,<br/>classes, dir, props, metadata)"]
-    DBMethods --> addLink["addLink(_start[], _end[], linkData)"]
-    DBMethods --> addSingleLink["addSingleLink(_start, _end, type, id)"]
-    DBMethods --> setDirection["setDirection(dir)"]
-    DBMethods --> addSubGraph["addSubGraph(nodes[], id, title)"]
-    DBMethods --> addClass["addClass(id, style)"]
-    DBMethods --> setClass["setClass(ids, className)"]
-    DBMethods --> setTooltip["setTooltip(ids, tooltip)"]
-    DBMethods --> setClickEvent["setClickEvent(id, functionName, args)"]
-    DBMethods --> setClickFun["setClickFun(id, functionName, args)"]
-    
-    %% Vertex Processing
-    addVertex --> VertexProcess{Vertex Processing}
-    VertexProcess --> CreateVertex["Create FlowVertex object<br/>- id, labelType, domId<br/>- styles[], classes[]"]
-    VertexProcess --> SanitizeText["sanitizeText(textObj.text)"]
-    VertexProcess --> ParseMetadata["Parse YAML metadata<br/>yaml.load(yamlData)"]
-    VertexProcess --> SetVertexProps["Set vertex properties<br/>- shape, label, icon, form<br/>- pos, img, constraint, w, h"]
-    
-    %% Edge Processing  
-    addSingleLink --> EdgeProcess{Edge Processing}
-    EdgeProcess --> CreateEdge["Create FlowEdge object<br/>- start, end, type, text<br/>- labelType, classes[]"]
-    EdgeProcess --> ProcessLinkText["Process link text<br/>- sanitizeText()<br/>- strip quotes"]
-    EdgeProcess --> SetEdgeProps["Set edge properties<br/>- type, stroke, length"]
-    EdgeProcess --> GenerateEdgeId["Generate edge ID<br/>getEdgeId(start, end, counter)"]
-    EdgeProcess --> ValidateEdgeLimit["Validate edge limit<br/>maxEdges check"]
-    
-    %% Data Collection
-    DBMethods --> GetData["getData()"]
-    GetData --> CollectNodes["Collect nodes[] from vertices"]
-    GetData --> CollectEdges["Collect edges[] from edges"]
-    GetData --> ProcessSubGraphs["Process subgraphs<br/>- parentDB Map<br/>- subGraphDB Map"]
-    GetData --> AddNodeFromVertex["addNodeFromVertex()<br/>for each vertex"]
-    GetData --> ProcessEdgeTypes["destructEdgeType()<br/>arrowTypeStart, arrowTypeEnd"]
-    
-    %% Node Creation
-    AddNodeFromVertex --> NodeCreation{Node Creation}
-    NodeCreation --> FindExistingNode["findNode(nodes, vertex.id)"]
-    NodeCreation --> CreateBaseNode["Create base node<br/>- id, label, parentId<br/>- cssStyles, cssClasses<br/>- shape, domId, tooltip"]
-    NodeCreation --> GetCompiledStyles["getCompiledStyles(classDefs)"]
-    NodeCreation --> GetTypeFromVertex["getTypeFromVertex(vertex)"]
-    
-    %% Rendering Phase
-    Renderer --> flowRendererV3["flowRenderer-v3-unified.ts<br/>draw(text, id, version, diag)"]
-    
-    flowRendererV3 --> RenderInit["Initialize rendering<br/>- getConfig()<br/>- handle securityLevel<br/>- getDiagramElement()"]
-    
-    RenderInit --> GetLayoutData["diag.db.getData()<br/>as LayoutData"]
-    GetLayoutData --> SetupLayoutData["Setup layout data<br/>- type, layoutAlgorithm<br/>- direction, spacing<br/>- markers, diagramId"]
-    
-    SetupLayoutData --> CallRender["render(data4Layout, svg)"]
-    CallRender --> SetupViewPort["setupViewPortForSVG(svg, padding)"]
-    SetupViewPort --> ProcessLinks["Process vertex links<br/>- create anchor elements<br/>- handle click events"]
-    
-    %% Shape Rendering
-    CallRender --> ShapeSystem["flowChartShapes.js<br/>Shape Functions"]
-    
-    ShapeSystem --> ShapeFunctions{Shape Functions}
-    ShapeFunctions --> question["question(parent, bbox, node)"]
-    ShapeFunctions --> hexagon["hexagon(parent, bbox, node)"]
-    ShapeFunctions --> rect_left_inv_arrow["rect_left_inv_arrow(parent, bbox, node)"]
-    ShapeFunctions --> lean_right["lean_right(parent, bbox, node)"]
-    ShapeFunctions --> lean_left["lean_left(parent, bbox, node)"]
-    
-    ShapeFunctions --> insertPolygonShape["insertPolygonShape(parent, w, h, points)"]
-    ShapeFunctions --> intersectPolygon["intersectPolygon(node, points, point)"]
-    ShapeFunctions --> intersectRect["intersectRect(node, point)"]
-    
-    %% Styling System
-    Styles --> stylesTS["styles.ts<br/>getStyles(options)"]
-    stylesTS --> StyleOptions["FlowChartStyleOptions<br/>- arrowheadColor, border2<br/>- clusterBkg, mainBkg<br/>- fontFamily, textColor"]
-    
-    StyleOptions --> GenerateCSS["Generate CSS styles<br/>- .label, .cluster-label<br/>- .node, .edgePath<br/>- .flowchart-link, .edgeLabel"]
-    GenerateCSS --> GetIconStyles["getIconStyles()"]
-    
-    %% Type System
-    Parser --> TypeSystem["types.ts<br/>Type Definitions"]
-    TypeSystem --> FlowVertex["FlowVertex interface"]
-    TypeSystem --> FlowEdge["FlowEdge interface"]
-    TypeSystem --> FlowClass["FlowClass interface"]
-    TypeSystem --> FlowSubGraph["FlowSubGraph interface"]
-    TypeSystem --> FlowVertexTypeParam["FlowVertexTypeParam<br/>Shape types"]
-    
-    %% Utility Functions
-    DBMethods --> UtilityFunctions{Utility Functions}
-    UtilityFunctions --> lookUpDomId["lookUpDomId(id)"]
-    UtilityFunctions --> getClasses["getClasses()"]
-    UtilityFunctions --> getDirection["getDirection()"]
-    UtilityFunctions --> getVertices["getVertices()"]
-    UtilityFunctions --> getEdges["getEdges()"]
-    UtilityFunctions --> getSubGraphs["getSubGraphs()"]
-    UtilityFunctions --> clear["clear()"]
-    UtilityFunctions --> defaultConfig["defaultConfig()"]
-    
-    %% Event Handling
-    ProcessLinks --> EventHandling{Event Handling}
-    EventHandling --> setupToolTips["setupToolTips(element)"]
-    EventHandling --> bindFunctions["bindFunctions(element)"]
-    EventHandling --> runFunc["utils.runFunc(functionName, args)"]
-    
-    %% Common Database Functions
-    DBMethods --> CommonDB["commonDb.js functions"]
-    CommonDB --> setAccTitle["setAccTitle()"]
-    CommonDB --> getAccTitle["getAccTitle()"]
-    CommonDB --> setAccDescription["setAccDescription()"]
-    CommonDB --> getAccDescription["getAccDescription()"]
-    CommonDB --> setDiagramTitle["setDiagramTitle()"]
-    CommonDB --> getDiagramTitle["getDiagramTitle()"]
-    CommonDB --> commonClear["clear()"]
-    
-    %% Final Output
-    ProcessLinks --> FinalSVG["Final SVG Output"]
-    
-    %% Layout Algorithm Selection
-    SetupLayoutData --> LayoutAlgorithm{Layout Algorithm}
-    LayoutAlgorithm --> Dagre["dagre<br/>(default)"]
-    LayoutAlgorithm --> DagreWrapper["dagre-wrapper<br/>(v2 renderer)"]
-    LayoutAlgorithm --> ELK["elk<br/>(external package)"]
-    
-    %% Testing Components
-    FlowDBClass --> TestFiles["Test Files"]
-    TestFiles --> flowDbSpec["flowDb.spec.ts"]
-    TestFiles --> flowChartShapesSpec["flowChartShapes.spec.js"]
-    TestFiles --> ParserTests["parser/*.spec.js files<br/>- flow-text.spec.js<br/>- flow-edges.spec.js<br/>- flow-style.spec.js<br/>- subgraph.spec.js"]
-    
-    %% Configuration
-    Init --> ConfigSetup["Configuration Setup"]
-    ConfigSetup --> FlowchartConfig["cnf.flowchart config"]
-    ConfigSetup --> ArrowMarkers["arrowMarkerAbsolute"]
-    ConfigSetup --> LayoutConfig["layout config"]
-    ConfigSetup --> SetConfig["setConfig() calls"]

docs/diagrams/mermaid-api-sequence.mmd

@@ -1,307 +0,0 @@
----
-references:
-  - "File: /packages/mermaid/src/mermaidAPI.ts"
-  - "File: /packages/mermaid/src/mermaid.ts"
-generationTime: 2025-01-28T16:30:00.000Z
----
-sequenceDiagram
-    participant User as User/Browser
-    participant Mermaid as mermaid.ts
-    participant Queue as executionQueue
-    participant API as mermaidAPI.ts
-    participant Config as configApi
-    participant Preprocessor as preprocessDiagram
-    participant DiagramAPI as diagram-api
-    participant Diagram as Diagram.fromText
-    participant Renderer as diagram.renderer
-    participant Styles as Styling System
-    participant DOM as DOM/SVG
-
-    Note over User, DOM: Mermaid Complete API Flow
-
-    %% Initialization Phase
-    User->>+Mermaid: mermaid.initialize(config)
-    Mermaid->>+API: mermaidAPI.initialize(config)
-    
-    API->>API: assignWithDepth({}, userOptions)
-    API->>API: handle legacy fontFamily config
-    API->>Config: saveConfigFromInitialize(options)
-    
-    alt Theme Configuration Available
-        API->>API: check if theme in theme object
-        API->>API: set themeVariables from theme
-    else Default Theme
-        API->>API: use default theme variables
-    end
-    
-    API->>Config: setSiteConfig(options) or getSiteConfig()
-    API->>API: setLogLevel(config.logLevel)
-    API->>DiagramAPI: addDiagrams()
-    
-    API-->>-Mermaid: initialization complete
-    Mermaid-->>-User: ready to render
-
-    %% Content Loaded Event
-    User->>DOM: document.load event
-    DOM->>+Mermaid: contentLoaded()
-    
-    opt startOnLoad is true
-        Mermaid->>Config: getConfig()
-        Config-->>Mermaid: { startOnLoad: true }
-        Mermaid->>Mermaid: run()
-    end
-    
-    Mermaid-->>-DOM: event handling complete
-
-    %% Main Run Function
-    User->>+Mermaid: mermaid.run(options)
-    
-    Mermaid->>Mermaid: runThrowsErrors(options)
-    Mermaid->>Config: getConfig()
-    Config-->>Mermaid: configuration object
-    
-    alt nodes provided
-        Mermaid->>Mermaid: use provided nodes
-    else querySelector provided
-        Mermaid->>DOM: document.querySelectorAll(querySelector)
-        DOM-->>Mermaid: nodesToProcess
-    end
-    
-    Mermaid->>Mermaid: new InitIDGenerator(deterministicIds, seed)
-    
-    loop For each diagram element
-        Mermaid->>DOM: check element.getAttribute('data-processed')
-        
-        opt not processed
-            Mermaid->>DOM: element.setAttribute('data-processed', 'true')
-            Mermaid->>Mermaid: generate unique id
-            Mermaid->>DOM: get element.innerHTML
-            Mermaid->>Mermaid: entityDecode and clean text
-            Mermaid->>Mermaid: detectInit(txt)
-            
-            Mermaid->>Queue: render(id, txt, element)
-        end
-    end
-    
-    Mermaid-->>-User: processing initiated
-
-    %% Render Function (Queued)
-    activate Queue
-    Queue->>+API: mermaidAPI.render(id, text, container)
-    
-    API->>DiagramAPI: addDiagrams()
-    API->>+Preprocessor: processAndSetConfigs(text)
-    
-    Preprocessor->>Preprocessor: preprocessDiagram(text)
-    Preprocessor->>Config: reset()
-    Preprocessor->>Config: addDirective(processed.config)
-    Preprocessor-->>-API: { code, config }
-    
-    API->>Config: getConfig()
-    Config-->>API: current configuration
-    
-    opt text length > maxTextSize
-        API->>API: text = MAX_TEXTLENGTH_EXCEEDED_MSG
-    end
-    
-    API->>API: setup id selectors and element IDs
-    API->>API: determine security level (sandbox/loose)
-
-    %% DOM Setup
-    alt svgContainingElement provided
-        alt isSandboxed
-            API->>DOM: sandboxedIframe(select(svgContainingElement), iFrameID)
-            API->>DOM: select iframe contentDocument body
-        else
-            API->>DOM: select(svgContainingElement)
-        end
-    else no container
-        API->>API: removeExistingElements(document, id, divId, iFrameId)
-        alt isSandboxed
-            API->>DOM: sandboxedIframe(select('body'), iFrameID)
-        else
-            API->>DOM: select('body')
-        end
-    end
-    
-    API->>DOM: appendDivSvgG(root, id, enclosingDivID, fontFamily, XMLNS_XLINK_STD)
-
-    %% Diagram Creation
-    API->>+Diagram: Diagram.fromText(text, { title: processed.title })
-    
-    Diagram->>DiagramAPI: detect diagram type
-    Diagram->>DiagramAPI: load appropriate diagram
-    Diagram-->>-API: diagram instance
-    
-    opt parsing error occurred
-        API->>+Diagram: Diagram.fromText('error')
-        Diagram-->>-API: error diagram
-        API->>API: store parseEncounteredException
-    end
-
-    %% Style Generation
-    API->>DOM: get svg element and firstChild
-    API->>Renderer: diag.renderer.getClasses(text, diag)
-    Renderer-->>API: diagramClassDefs
-    
-    API->>+Styles: createUserStyles(config, diagramType, diagramClassDefs, idSelector)
-    
-    Styles->>Styles: createCssStyles(config, classDefs)
-    
-    opt config.themeCSS defined
-        Styles->>Styles: append themeCSS
-    end
-    
-    opt fontFamily configured
-        Styles->>Styles: add CSS variables for fonts
-    end
-    
-    opt classDefs exist
-        loop For each styleClassDef
-            opt has styles
-                Styles->>Styles: cssImportantStyles for each CSS element
-            end
-            opt has textStyles
-                Styles->>Styles: cssImportantStyles for tspan elements
-            end
-        end
-    end
-    
-    Styles->>Styles: getStyles(graphType, userCSSstyles, themeVariables)
-    Styles->>Styles: serialize(compile(svgId{allStyles}), stringify)
-    Styles-->>-API: compiled CSS rules
-    
-    API->>DOM: create style element
-    API->>DOM: style.innerHTML = rules
-    API->>DOM: svg.insertBefore(style, firstChild)
-
-    %% Diagram Rendering
-    API->>+Renderer: diag.renderer.draw(text, id, version, diag)
-    
-    Renderer->>Renderer: diagram-specific rendering logic
-    Renderer->>DOM: create SVG elements
-    Renderer->>DOM: apply positioning and styling
-    Renderer-->>-API: rendered diagram
-    
-    opt rendering error
-        alt suppressErrorRendering
-            API->>API: removeTempElements()
-            API->>Mermaid: throw error
-        else
-            API->>Renderer: errorRenderer.draw(text, id, version)
-        end
-    end
-
-    %% Accessibility and Cleanup
-    API->>DOM: select svg element
-    API->>Diagram: diag.db.getAccTitle()
-    API->>Diagram: diag.db.getAccDescription()
-    API->>API: addA11yInfo(diagramType, svgNode, a11yTitle, a11yDescr)
-    
-    API->>DOM: set xmlns for foreignobject elements
-    API->>DOM: get innerHTML from enclosing div
-    
-    API->>+API: cleanUpSvgCode(svgCode, isSandboxed, arrowMarkerAbsolute)
-    
-    opt not useArrowMarkerUrls and not sandboxed
-        API->>API: replace marker-end URLs with anchors
-    end
-    
-    API->>API: decodeEntities(svgCode)
-    API->>API: replace <br> with <br/>
-    API-->>-API: cleaned SVG code
-    
-    alt isSandboxed
-        API->>+API: putIntoIFrame(svgCode, svgEl)
-        API->>API: calculate iframe height
-        API->>API: toBase64 encode SVG content
-        API->>API: create iframe with sandbox attributes
-        API-->>-API: iframe HTML
-    else not loose security
-        API->>API: DOMPurify.sanitize(svgCode, options)
-    end
-    
-    API->>API: attachFunctions()
-    API->>API: removeTempElements()
-    
-    opt parseEncounteredException
-        API->>Mermaid: throw parseEncounteredException
-    end
-    
-    API-->>-Queue: { diagramType, svg: svgCode, bindFunctions }
-
-    %% Return to Web Integration
-    activate Mermaid
-    Queue-->>Mermaid: render result
-    Mermaid->>DOM: element.innerHTML = svg
-    
-    opt postRenderCallback
-        Mermaid->>User: postRenderCallback(id)
-    end
-    
-    opt bindFunctions exist
-        Mermaid->>DOM: bindFunctions(element)
-    end
-    deactivate Mermaid
-
-    %% Parse Function Flow
-    User->>+Mermaid: mermaid.parse(text, parseOptions)
-    activate Queue
-    
-    Queue->>+API: mermaidAPI.parse(text, parseOptions)
-    
-    API->>DiagramAPI: addDiagrams()
-    API->>Preprocessor: processAndSetConfigs(text)
-    Preprocessor-->>API: { code, config }
-    API->>Diagram: getDiagramFromText(code)
-    Diagram-->>API: diagram instance
-    API-->>-Queue: { diagramType: diagram.type, config }
-    
-    Queue-->>-Mermaid: parse result
-    Mermaid-->>-User: ParseResult or false
-
-    %% External Diagram Registration
-    User->>+Mermaid: registerExternalDiagrams(diagrams, options)
-    
-    Mermaid->>DiagramAPI: addDiagrams()
-    Mermaid->>DiagramAPI: registerLazyLoadedDiagrams(...diagrams)
-    
-    opt lazyLoad is false
-        Mermaid->>DiagramAPI: loadRegisteredDiagrams()
-    end
-    
-    Mermaid-->>-User: registration complete
-
-    %% Error Handling
-    Note over Mermaid, API: Error Handling Throughout
-    alt Error occurs
-        API->>Mermaid: throw error
-        Mermaid->>+Mermaid: handleError(error, errors, parseError)
-        
-        Mermaid->>Mermaid: log.warn(error)
-        
-        alt isDetailedError
-            Mermaid->>User: parseError(error.str, error.hash)
-        else
-            Mermaid->>User: parseError(error)
-        end
-        
-        opt not suppressErrors
-            Mermaid->>User: throw error
-        end
-        
-        Mermaid-->>-User: error handled
-    end
-
-    %% Configuration Details
-    Note over Config: Configuration Functions
-    Note right of Config: Functions:<br/>- reset()<br/>- getConfig()<br/>- setConfig()<br/>- getSiteConfig()<br/>- updateSiteConfig()<br/>- saveConfigFromInitialize()
-    
-    Note over Styles: CSS Generation
-    Note right of Styles: Features:<br/>- createCssStyles()<br/>- createUserStyles()<br/>- cssImportantStyles()<br/>- Theme integration<br/>- Class definitions
-    
-    Note over API: Security Levels
-    Note right of API: Modes:<br/>- sandbox: iframe isolation<br/>- loose: minimal sanitization<br/>- default: DOMPurify sanitization
-    
-    Note over API: Helper Functions
-    Note right of API: Utilities:<br/>- cleanUpSvgCode()<br/>- putIntoIFrame()<br/>- appendDivSvgG()<br/>- removeExistingElements() 

docs/diagrams/mindmap-implementation-sequence.mmd

@@ -1,180 +0,0 @@
----
-references:
-  - "File: /packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts"
-  - "File: /packages/mermaid/src/diagrams/mindmap/mindmapDb.ts"
-  - "File: /packages/mermaid/src/diagrams/mindmap/detector.ts"
-  - "File: /packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts"
-  - "File: /packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts"
-  - "File: /packages/mermaid/src/diagrams/mindmap/styles.ts"
-  - "File: /packages/mermaid/src/diagrams/mindmap/svgDraw.ts"
-generationTime: 2025-01-28T16:00:00.000Z
----
-sequenceDiagram
-    participant User as User Input Text
-    participant Detector as detector.ts
-    participant Loader as DiagramLoader
-    participant Definition as mindmap-definition.ts
-    participant Parser as parser/mindmap.jison
-    participant DB as MindmapDB
-    participant Renderer as mindmapRenderer.ts
-    participant Cytoscape as cytoscape.js
-    participant SVGDraw as svgDraw.ts
-    participant Styles as styles.ts
-    participant Output as Final SVG
-
-    Note over User, Output: Mindmap Implementation Flow
-
-    %% Detection Phase
-    User->>Detector: /^\s*mindmap/ text input
-    activate Detector
-    Detector->>Detector: detector(txt) validates pattern
-    Detector->>Loader: loader() function called
-    deactivate Detector
-    
-    activate Loader
-    Loader->>Definition: import mindmap-definition.js
-    deactivate Loader
-
-    %% Core Structure Setup
-    activate Definition
-    Definition->>DB: get db() → new MindmapDB()
-    Definition->>Renderer: setup renderer
-    Definition->>Parser: setup parser
-    Definition->>Styles: setup styles
-    deactivate Definition
-
-    %% Database Initialization
-    activate DB
-    Note over DB: MindmapDB Constructor
-    DB->>DB: initialize nodes array
-    DB->>DB: setup nodeType constants
-    DB->>DB: bind methods
-    DB->>DB: clear() state
-    
-    %% Parsing Phase
-    activate Parser
-    User->>Parser: mindmap syntax text
-    
-    loop For each node in hierarchy
-        Parser->>DB: addNode(level, id, descr, type)
-        activate DB
-        DB->>DB: sanitizeText(id, descr)
-        DB->>DB: getType(startStr, endStr)
-        Note right of DB: Shape Detection:<br/>[ → RECT<br/>( → ROUNDED_RECT<br/>(( → CIRCLE<br/>)) → BANG<br/>{{ → HEXAGON
-        DB->>DB: getParent(level)
-        DB->>DB: create MindmapNode
-        DB->>DB: add to hierarchy
-        deactivate DB
-    end
-
-    opt Icon/Class Decoration
-        Parser->>DB: decorateNode(decoration)
-        DB->>DB: set icon/class properties
-    end
-    deactivate Parser
-
-    %% Data Preparation
-    Renderer->>DB: getData() for layout
-    activate DB
-    DB->>DB: collect all nodes
-    DB->>DB: build parent-child relationships
-    DB-->>Renderer: return node hierarchy
-    deactivate DB
-
-    %% Rendering Pipeline
-    activate Renderer
-    Note over Renderer: Rendering Phase
-    
-    Renderer->>Cytoscape: initialize cytoscape
-    activate Cytoscape
-    
-    loop For each node in mindmap
-        Renderer->>Cytoscape: addNodes(mindmap, cy, conf, level)
-        Cytoscape->>Cytoscape: create node data
-        Cytoscape->>Cytoscape: set position (x, y)
-    end
-
-    loop For parent-child relationships
-        Renderer->>Cytoscape: add edges
-        Cytoscape->>Cytoscape: create edge data
-    end
-
-    Renderer->>Cytoscape: configure cose-bilkent layout
-    Cytoscape->>Cytoscape: calculate optimal positions
-    Cytoscape-->>Renderer: return positioned graph
-    deactivate Cytoscape
-
-    %% SVG Generation
-    Renderer->>SVGDraw: drawNodes(db, svg, mindmap, section, conf)
-    activate SVGDraw
-    
-    loop For each node recursively
-        SVGDraw->>SVGDraw: select shape function
-        
-        alt Default Shape
-            SVGDraw->>SVGDraw: defaultBkg() - rounded rectangle
-        else Rectangle Shape
-            SVGDraw->>SVGDraw: rectBkg() - sharp corners
-        else Circle Shape
-            SVGDraw->>SVGDraw: circleBkg() - perfect circle
-        else Cloud Shape
-            SVGDraw->>SVGDraw: cloudBkg() - organic curves
-        else Bang Shape
-            SVGDraw->>SVGDraw: bangBkg() - explosion style
-        else Hexagon Shape
-            SVGDraw->>SVGDraw: hexagonBkg() - six sides
-        end
-        
-        SVGDraw->>SVGDraw: create SVG elements
-        SVGDraw->>SVGDraw: add text labels
-        SVGDraw->>SVGDraw: position node
-        
-        opt Node has children
-            SVGDraw->>SVGDraw: drawNodes() recursive call
-        end
-    end
-    deactivate SVGDraw
-
-    %% Edge Rendering
-    Renderer->>Renderer: drawEdges(edgesEl, cy)
-    loop For each edge
-        Renderer->>Renderer: extract edge bounds
-        Renderer->>Renderer: draw SVG path
-    end
-
-    %% Styling Application
-    Renderer->>Styles: getStyles(options)
-    activate Styles
-    
-    Styles->>Styles: genSections(options)
-    loop For THEME_COLOR_LIMIT sections
-        Styles->>Styles: generate color scale
-        Styles->>Styles: create CSS rules
-        Note right of Styles: .section-X fills<br/>.edge-depth-X widths<br/>.node-icon-X colors
-    end
-    
-    Styles->>Styles: apply theme integration
-    Styles-->>Renderer: return compiled CSS
-    deactivate Styles
-
-    %% Final Assembly
-    Renderer->>Output: selectSvgElement()
-    Renderer->>Output: setupGraphViewbox()
-    Renderer->>Output: apply styles
-    Renderer->>Output: add interactive elements
-    deactivate Renderer
-
-    activate Output
-    Note over Output: Final Mindmap Features
-    Output->>Output: responsive layout
-    Output->>Output: accessibility attributes
-    Output->>Output: hover effects
-    Output->>Output: click handling
-    Output-->>User: rendered mindmap
-    deactivate Output
-
-    %% Configuration Details
-    Note over DB, Styles: Configuration Options
-    Note right of DB: Padding Calculations:<br/>Base padding from config<br/>RECT: ×2 padding<br/>ROUNDED_RECT: ×2 padding<br/>HEXAGON: ×2 padding
-    Note right of Styles: Section Management:<br/>MAX_SECTIONS = 12<br/>Dynamic color generation<br/>Git theme integration
-    Note right of Renderer: Layout Parameters:<br/>Cytoscape configuration<br/>coseBilkent settings<br/>Node spacing rules 

docs/ecosystem/integrations-community.md

@@ -73,7 +73,7 @@ To add an integration to this list, see the [Integrations - create page](./integ
 - [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) ✅
 - [Outline](https://docs.getoutline.com/s/guide/doc/diagrams-KQiKoT4wzK) ✅
 - [Redmine](https://redmine.org)
-  - [Mermaid Macro](https://redmine.org/plugins/redmine_mermaid_macro)
+  - [Mermaid Macro](https://www.redmine.org/plugins/redmine_mermaid_macro)
   - [Markdown for mermaid plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin)
   - [redmine-mermaid](https://github.com/styz/redmine_mermaid)
 - Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive)
@@ -84,7 +84,6 @@ To add an integration to this list, see the [Integrations - create page](./integ
 LLM integrations to create mermaid diagrams using AI from text descriptions.
 
 - [HueHive - Create mermaid diagrams with text](https://huehive.co/tools/diagrams)
-- [MCP Server Mermaid](https://github.com/hustcc/mcp-mermaid) - Generate mermaid diagram and chart with AI MCP dynamically.
 
 ### CRM/ERP
 
@@ -104,7 +103,6 @@ Blogging frameworks and platforms
   - [Mermaid](https://nextra.site/docs/guide/mermaid)
 - [WordPress](https://wordpress.org)
   - [MerPRess](https://wordpress.org/plugins/merpress/)
-  - [WP Documentation](https://wordpress.org/themes/wp-documentation/)
 
 ### CMS/ECM
 
@@ -117,7 +115,7 @@ Content Management Systems/Enterprise Content Management
 - [Grav CMS](https://getgrav.org/)
   - [Mermaid Diagrams Plugin](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams)
   - [GitLab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
-- [Tiki Wiki CMS Groupware](https://tiki.org)
+- [Tiki](https://tiki.org)
   - [Tracker Entity Relationship Diagram](https://doc.tiki.org/Tracker-Entity-Relationship-Diagram)
 - [VitePress](https://vitepress.vuejs.org/)
   - [Plugin for Mermaid.js](https://emersonbottero.github.io/vitepress-plugin-mermaid/)
@@ -247,7 +245,7 @@ Communication tools and platforms
 | GitHub + Mermaid         | -                                                                                                           | [🦊🔗](https://addons.mozilla.org/firefox/addon/github-mermaid/)               | -                                                                              | -                                                                                                                            | [🐙🔗](https://github.com/BackMarket/github-mermaid-extension)                                       |
 | Asciidoctor Live Preview | [🎡🔗](https://chromewebstore.google.com/detail/asciidoctorjs-live-previe/iaalpfgpbocpdfblpnhhgllgbdbchmia) | -                                                                              | -                                                                              | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/asciidoctorjs-live-previ/pefkelkanablhjdekgdahplkccnbdggd?hl=en-US) | -                                                                                                    |
 | Diagram Tab              | -                                                                                                           | -                                                                              | -                                                                              | -                                                                                                                            | [🐙🔗](https://github.com/khafast/diagramtab)                                                        |
-| Markdown Diagrams        | [🎡🔗](https://chromewebstore.google.com/detail/markdown-diagrams/pmoglnmodacnbbofbgcagndelmgaclel)         | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-diagrams/)      | -                                                                              | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/markdown-diagrams/hceenoomhhdkjjijnmlclkpenkapfihe)                 | [🐙🔗](https://github.com/marcozaccari/markdown-diagrams-browser-extension/tree/master/doc/examples) |
+| Markdown Diagrams        | [🎡🔗](https://chromewebstore.google.com/detail/markdown-diagrams/pmoglnmodacnbbofbgcagndelmgaclel)         | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-diagrams/)      | [🔴🔗](https://addons.opera.com/en/extensions/details/markdown-diagrams/)      | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/markdown-diagrams/hceenoomhhdkjjijnmlclkpenkapfihe)                 | [🐙🔗](https://github.com/marcozaccari/markdown-diagrams-browser-extension/tree/master/doc/examples) |
 | Markdown Viewer          | -                                                                                                           | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | -                                                                              | -                                                                                                                            | [🐙🔗](https://github.com/simov/markdown-viewer)                                                     |
 | Extensions for Mermaid   | -                                                                                                           | -                                                                              | [🔴🔗](https://addons.opera.com/en/extensions/details/extensions-for-mermaid/) | -                                                                                                                            | [🐙🔗](https://github.com/Stefan-S/mermaid-extension)                                                |
 | Chrome Diagrammer        | [🎡🔗](https://chromewebstore.google.com/detail/chrome-diagrammer/bkpbgjmkomfoakfklcjeoegkklgjnnpk)         | -                                                                              | -                                                                              | -                                                                                                                            | -                                                                                                    |

docs/ecosystem/integrations-create.md

@@ -16,7 +16,9 @@ Applications that support Mermaid files [SHOULD](https://datatracker.ietf.org/do
 
 ### MIME Type
 
-The recommended [MIME type](https://www.iana.org/assignments/media-types/media-types.xhtml) for Mermaid media is [`text/vnd.mermaid`](https://www.iana.org/assignments/media-types/application/vnd.mermaid).
+The recommended [MIME type](https://www.iana.org/assignments/media-types/media-types.xhtml) for Mermaid media is `text/vnd.mermaid`.
+
+Currently pending [IANA](https://www.iana.org/) recognition.
 
 ## Showcase
 

docs/ecosystem/mermaid-chart.md

@@ -30,7 +30,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun
 
   Official Mermaid Chart plugins:
 
-  - [Mermaid Chart GPT](https://chatgpt.com/g/g-684cc36f30208191b21383b88650a45d-mermaid-chart-diagrams-and-charts)
+  - [Mermaid Chart GPT](https://chat.openai.com/g/g-1IRFKwq4G-mermaid-chart)
   - [Confluence](https://marketplace.atlassian.com/apps/1234056/mermaid-chart-for-confluence?hosting=cloud&tab=overview)
   - [Jira](https://marketplace.atlassian.com/apps/1234810/mermaid-chart-for-jira?tab=overview&hosting=cloud)
   - [Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MermaidChart.vscode-mermaid-chart)

docs/layouts/development.md

@@ -0,0 +1,177 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/layouts/development.md](../../packages/mermaid/src/docs/layouts/development.md).
+
+# 🛠️ How to Create a New Layout Algorithm in Mermaid
+
+Mermaid supports pluggable layout engines, and contributors can add custom layout algorithms to support specialized rendering needs such as clustered layouts, nested structures, or domain-specific visualizations.
+
+This guide outlines the steps required to **create and integrate a new layout algorithm** into the Mermaid codebase.
+
+---
+
+## 📦 Prerequisites
+
+Before starting, ensure the following:
+
+- You have [Node.js](https://nodejs.org/) installed.
+- You have [pnpm](https://pnpm.io/) installed globally:
+  ```bash
+  npm install -g pnpm
+  ```
+
+---
+
+## 🔄 Step-by-Step Integration
+
+### 1. Clone the Mermaid Repository
+
+```bash
+git clone https://github.com/mermaid-js/mermaid.git
+cd mermaid
+```
+
+### 2. Install Dependencies
+
+Mermaid uses `pnpm` for dependency management:
+
+```bash
+pnpm i
+```
+
+### 3. Start the Development Server
+
+This will spin up a local dev environment with hot reload:
+
+```bash
+pnpm dev
+```
+
+---
+
+## 🧠 Implementing Your Custom Layout Algorithm
+
+### 4. Create Your Layout Folder
+
+Navigate to the relevant source directory and create a folder for your new algorithm:
+
+```bash
+cd packages/mermaid/src/layout
+mkdir myCustomLayout
+touch myCustomLayout/index.ts
+```
+
+> 📁 You can organize supporting files, utils, and types inside this folder.
+
+### 5. Register the Layout Algorithm
+
+Open the file:
+
+```
+packages/mermaid/src/rendering-util/render.ts
+```
+
+Inside the function `registerDefaultLayoutLoaders`, find the `layoutLoaders` array. Add your layout here:
+
+```ts
+registerDefaultLayoutLoaders([
+  ...,
+  {
+    id: 'myCustomLayout',
+    loader: () => import('../layout/myCustomLayout'),
+  },
+]);
+```
+
+This tells Mermaid how to load your layout dynamically by name (`id`).
+
+---
+
+## 🧪 Testing Your Algorithm
+
+### 6. Create a Test File
+
+To visually test your layout implementation, create a test HTML file in:
+
+```
+cypress/platform/
+```
+
+Example:
+
+```bash
+touch cypress/platform/myCustomLayoutTest.html
+```
+
+Inside the file, load your diagram like this:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <script type="module">
+      import mermaid from '/dist/mermaid.esm.mjs';
+
+      mermaid.initialize({
+        startOnLoad: true,
+        theme: 'default',
+        layout: 'myCustomLayout', // Use your layout here
+      });
+    </script>
+  </head>
+  <body>
+    <div class="mermaid">graph TD A[Node A] --> B[Node B] B --> C[Node C]</div>
+  </body>
+</html>
+```
+
+### 7. Open in Browser
+
+After running `pnpm dev`, open your test in the browser:
+
+```
+http://localhost:9000/myCustomLayoutTest.html
+```
+
+You should see your diagram rendered using your new layout engine.
+
+---
+
+## 📝 Tips
+
+- Keep your layout algorithm modular and readable.
+- Use TypeScript types and helper functions for better structure.
+- Add comments and constraints where necessary.
+- If applicable, create a unit test and add a visual test for Cypress.
+
+---
+
+## 📚 Example File Structure
+
+```
+packages/
+└── mermaid/
+    └── src/
+        └── layout/
+            └── myCustomLayout/
+                ├── index.ts
+                ├── utils.ts
+                └── types.ts
+```
+
+---
+
+## ✅ Final Checklist
+
+- [ ] All dependencies installed via `pnpm i`
+- [ ] Layout folder and files created under `src/layout/`
+- [ ] Entry registered in `registerDefaultLayoutLoaders`
+- [ ] HTML test file added under `cypress/platform/`
+- [ ] Diagram renders as expected at `localhost:9000`
+- [ ] Code is linted and documented
+
+---
+
+> 💡 You’re now ready to build advanced layout algorithms and contribute to Mermaid's growing visualization capabilities!

docs/layouts/introduction.md

@@ -0,0 +1,138 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/layouts/introduction.md](../../packages/mermaid/src/docs/layouts/introduction.md).
+
+# 📊 Layout Algorithms in Mermaid
+
+Mermaid is a popular JavaScript-based diagramming tool that supports auto-layout for graphs using pluggable layout engines. Layout algorithms play a critical role in rendering nodes and edges in a clean, readable, and meaningful way. Mermaid currently uses engines like **Dagre** and **ELK**, and will soon introduce a powerful new layout engine: **IPSep-CoLa**.
+
+---
+
+## 🔹 Dagre Layout
+
+**Dagre** is a layout engine inspired by the **Sugiyama algorithm**, optimized for directed acyclic graphs (DAGs). It arranges nodes in layers and computes edge routing to minimize crossings and improve readability.
+
+### Key Features:
+
+- **Layered (Sugiyama-style) layout**: Ideal for top-down or left-to-right flow.
+- **Edge routing**: Attempts to reduce edge crossings and bends.
+- **Ranking**: Vertices are assigned ranks to group related elements into the same level.
+- **Lightweight and fast**: Suitable for small to medium-sized graphs.
+
+### Technical Overview:
+
+- Works in four stages:
+  1. **Cycle Removal**
+  2. **Layer Assignment**
+  3. **Node Ordering**
+  4. **Coordinate Assignment**
+- Outputs crisp layouts where edge direction is clear and logical.
+
+### Limitations:
+
+- No native support for **grouped or nested structures**.
+- Not ideal for graphs with **non-hierarchical** or **dense cyclic connections**.
+- Limited edge label placement capabilities.
+
+---
+
+## 🔸 ELK (Eclipse Layout Kernel)
+
+**ELK** is a modular, extensible layout framework developed as part of the Eclipse ecosystem. It supports a wide variety of graph types and layout strategies.
+
+### Key Features:
+
+- **Multiple layout styles**: Hierarchical, force-based, layered, orthogonal, etc.
+- **Support for ports**: Allows fine-grained edge anchoring on specific sides of nodes.
+- **Group and hierarchy awareness**: Ideal for nested and compartmentalized diagrams.
+- **Rich configuration**: Offers control over spacing, edge routing, direction, padding, and more.
+
+### Technical Overview:
+
+- Uses a **model-driven approach** with a well-defined intermediate representation (ELK Graph Model).
+- Different engines are plugged in depending on the chosen layout strategy.
+- Works well with large, complex, and deeply nested graphs.
+
+### Limitations:
+
+- Requires verbose configuration for best results.
+- Can be slower than Dagre for small or simple diagrams.
+- More complex to integrate and control dynamically.
+
+---
+
+## 🆕 IPSep-CoLa
+
+### 🌐 Introduction
+
+**IPSep-CoLa** stands for **Incremental Procedure for Separation Constraint Layout**, a next-generation layout algorithm tailored for **grouped, nested, and labeled graphs**. It is an enhancement over standard force-directed layouts, offering constraint enforcement and iterative refinement.
+
+It is particularly useful for diagrams where:
+
+- **Group integrity** is important (e.g., modules, clusters).
+- **Edge labels** need smart placement.
+- **Overlaps** must be prevented even under tight space constraints.
+
+---
+
+### ⚙️ How IPSep-CoLa Works
+
+#### 1. **Constraint-Based Force Simulation**:
+
+It builds on top of standard force-directed approaches (like CoLa), but adds **constraints** to influence the final positions of nodes:
+
+- **Separation constraints**: Minimum distances between nodes, edge labels, and groups.
+- **Containment constraints**: Child nodes must stay within the bounds of parent groups.
+- **Alignment constraints**: Nodes can be aligned in rows or columns if desired.
+
+#### 2. **Incremental Refinement**:
+
+Unlike one-pass algorithms, IPSep-CoLa works in **phases**:
+
+- Initial layout is produced using a base force simulation.
+- The layout is iteratively adjusted using **constraint solvers**.
+- Additional forces (spring, collision avoidance, containment) are incrementally added.
+
+#### 3. **Edge Label Handling**:
+
+One of the distinguishing features of IPSep-CoLa is its support for **multi-segment edge routing with mid-edge label positioning**, ensuring labels do not clutter or overlap.
+
+---
+
+### 📌 Use Cases
+
+IPSep-CoLa is ideal for:
+
+- **Hierarchical graphs** with complex nesting (e.g., software architecture, UML diagrams).
+- **Clustered views** (e.g., social network groupings).
+- **Diagrams with heavy labeling** where label placement affects readability.
+- **Diagrams with strict visual structure** needs — maintaining boundaries, margins, or padding.
+
+---
+
+## 🔍 Comparison Table
+
+| Feature                   | Dagre       | ELK                 | IPSep-CoLa (Upcoming)          |
+| ------------------------- | ----------- | ------------------- | ------------------------------ |
+| Layout Type               | Layered DAG | Modular (varied)    | Constraint-driven force layout |
+| Edge Labeling             | ⚠️ Basic    | ✅ Yes              | ✅ Smart Placement             |
+| Overlap Avoidance         | ⚠️ Partial  | ✅ Configurable     | ✅ Automatic                   |
+| Layout Performance        | ✅ Fast     | ⚠️ Medium           | ⚠️ Medium                      |
+| Customization Flexibility | ⚠️ Limited  | ✅ Extensive        | ✅ Moderate to High            |
+| Best For                  | Simple DAGs | Complex hierarchies | Grouped and labeled graphs     |
+
+---
+
+## 🧾 Summary
+
+Each layout engine in Mermaid serves a different purpose:
+
+- **Dagre** is best for fast, simple, and readable DAGs.
+- **ELK** is powerful for modular, layered, or port-based diagrams with a need for rich customization.
+- **IPSep-CoLa** will soon offer a flexible, constraint-respecting layout engine that excels at **visual clarity in grouped and complex diagrams**.
+
+The addition of IPSep-CoLa to Mermaid's layout stack represents a significant leap forward in layout control and quality — making it easier than ever to visualize rich, structured, and annotated graphs.
+
+---

docs/layouts/ipsepcola/implementation.md

@@ -0,0 +1,46 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/layouts/ipsepcola/implementation.md](../../../packages/mermaid/src/docs/layouts/ipsepcola/implementation.md).
+
+## IPSEPCOLA Documentation :
+
+IPSep-CoLa: An Incremental Procedure for Separation Constraint Layout of Graphs
+
+## How IPSep-CoLa built :
+
+IPSep-CoLa follows a multi-stage process to compute a well-structured layout:
+
+1. Layer Assignment :
+   The layer assignment algorithm organizes nodes into hierarchical layers to create a structured layout for directed graphs. It begins by detecting and temporarily removing cyclic edges using a depth-first search (DFS) approach, ensuring the graph becomes a Directed Acyclic Graph (DAG) for proper layering. The algorithm then performs a topological sort using Kahn's method, calculating node ranks (layers) based on in-degree counts. Each node's layer is determined by its position in the topological order, with parent nodes always appearing in higher layers than their children to maintain proper flow direction.
+
+   The implementation handles special cases like nested nodes by considering parent-child relationships when calculating layers. Nodes without dependencies are placed in layer 0, while subsequent nodes are assigned to layers one level below their nearest parent. The algorithm efficiently processes nodes using a queue system, decrementing in-degrees as it progresses, and ultimately stores the layer information directly in the node objects. Though cyclic edges are removed during processing, they could potentially be reintroduced after layer assignment if needed for visualization purposes.
+
+2. Node ordering:
+   After assigning layers to nodes, this step organizes nodes horizontally within each layer to minimize edge crossings and create a clean, readable layout. It uses the barycenter method—a technique that positions each node based on the average position of its connected neighbors (either incoming or outgoing). Nodes with no connections are pushed to the end of their layer.
+
+   The algorithm works in multiple passes (iterations) to refine the order: first adjusting nodes based on their incoming connections (from the layer above), then outgoing connections (to the layer below). Group nodes (like containers) are handled separately—their position is determined by averaging the positions of their children, ensuring they stay properly aligned with their contents. This approach keeps the layout structured while reducing visual clutter.
+
+3. AssignInitial positions to node :
+   This step calculates the starting (x, y) positions for each node based on its assigned layer (vertical level) and order (horizontal position). Nodes are spaced evenly—horizontally using nodeSpacing and vertically using layerHeight. For example, a node in layer 2 with order 3 will be placed at (3 \_ nodeSpacing, 2 \_ layerHeight). This creates a grid-like structure where nodes align neatly in rows (layers) and columns (orders).
+
+   The initial positioning is simple but crucial—it provides a structured starting point before more advanced adjustments (like reducing edge crossings or compacting the layout) are applied. Group nodes follow the same logic, ensuring they align with their children. This method ensures a readable, organized foundation for further refinement.
+
+4. Force-Directed Simulation with Constraints :
+
+   - Spring Forces: Attracts connected nodes to maintain desired edge lengths.
+   - Repulsion Forces: Pushes nodes apart to prevent overlaps.
+   - Group Constraints: Ensures child nodes stay near their parent groups.
+   - Cooling Factor: Gradually reduces movement to stabilize the layout.
+
+5. Incremental Refinement :
+
+   - Overlap Resolution: Iteratively adjusts node positions to eliminate overlaps.
+   - Edge Routing: Computes smooth paths for edges, including curved paths for parallel edges and self-loops.
+   - Group Boundary Adjustment: Dynamically resizes group containers to fit nested elements.
+
+6. Adjusting the Final Layout :
+   This step takes the calculated node positions and applies them to the visual elements of the graph. Nodes are placed at their assigned (x, y) coordinates—regular nodes are positioned directly, while group nodes (clusters) are rendered as containers that may include other nodes. Edges (connections between nodes) are drawn based on their start and end points, ensuring they follow the structured layout.
+
+   The adjustment phase bridges the mathematical layout with the actual rendering, updating the SVG or canvas elements to reflect the computed positions. This ensures that the graph is not only logically organized but also visually coherent, with proper spacing, alignment, and connections. The result is a clean, readable diagram ready for display.

docs/layouts/ipsepcola/overview.md

@@ -0,0 +1,186 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/layouts/ipsepcola/overview.md](../../../packages/mermaid/src/docs/layouts/ipsepcola/overview.md).
+
+## IPSEPCOLA Documentation :
+
+IPSep-CoLa: An Incremental Procedure for Separation Constraint Layout of Graphs
+
+## Introduction :
+
+IPSep-CoLa (Incremental Procedure for Separation Constraint Layout) is an advanced graph layout algorithm designed to handle complex diagrams with separation constraints, such as grouped nodes, edge labels, and hierarchical structures. Unlike traditional force-directed algorithms, IPSep-CoLa incrementally refines node positions while enforcing geometric constraints to prevent overlaps, maintain group cohesion, and optimize edge routing.
+
+The algorithm is particularly effective for visualizing nested and clustered graphs, where maintaining clear separation between elements is crucial. It combines techniques from force-directed layout, constraint satisfaction, and incremental refinement to produce readable and aesthetically pleasing diagrams.
+
+## How IPSep-CoLa Works :
+
+IPSep-CoLa follows a multi-stage process to compute a well-structured layout:
+
+1. Graph Preprocessing :
+   Cycle Removal: Detects and temporarily removes cyclic dependencies to enable proper layering.
+   Layer Assignment: Assigns nodes to hierarchical layers using topological sorting.
+   Node Ordering: Uses the barycenter heuristic to minimize edge crossings within layers.
+
+2. Force-Directed Simulation with Constraints :
+   Spring Forces: Attracts connected nodes to maintain desired edge lengths.
+   Repulsion Forces: Pushes nodes apart to prevent overlaps.
+   Group Constraints: Ensures child nodes stay near their parent groups.
+   Cooling Factor: Gradually reduces movement to stabilize the layout.
+
+3. Incremental Refinement :
+   Overlap Resolution: Iteratively adjusts node positions to eliminate overlaps.
+   Edge Routing: Computes smooth paths for edges, including curved paths for parallel edges and self-loops.
+   Group Boundary Adjustment: Dynamically resizes group containers to fit nested elements.
+
+## Key Features :
+
+1. Group-Aware Layout: Maintains separation between nested structures.
+2. Edge Label Placement: Uses edge labels as virtual nodes and automatically positions labels inside their parent groups.
+3. Stable Convergence: Uses cooling factors and incremental updates for smooth refinement.
+4. Support for Self-Loops & Parallel Edges: Avoids visual clutter with intelligent edge routing.
+
+## Use Cases :
+
+1. Hierarchical Diagrams (org charts, flowcharts, decision trees)
+2. Network Visualization (dependency graphs, data pipelines)
+3. Interactive Graph Editors (real-time layout adjustments)
+4. Clustered Data Visualization (UML diagrams, biological networks)
+
+## **Examples**
+
+### **Example 1**
+
+```
+---
+config:
+   layout: ipsepCola
+---
+
+flowchart TD
+CEO --> MKT["Marketing Head"]
+CEO --> ENG["Engineering Head"]
+ENG --> DEV["Developer"]
+ENG --> QA["QA Tester"]
+```
+
+### **Example 2**
+
+```
+---
+config:
+   layout: ipsepCola
+---
+
+flowchart TD
+  Start["Start"] --> Red{"Is it red?"}
+  Red -- Yes --> Round{"Is it round?"}
+  Red -- No --> NotApple["❌ Not an Apple"]
+  Round -- Yes --> Apple["✅ It's an Apple"]
+  Round -- No --> NotApple2["❌ Not an Apple"]
+```
+
+### **Example 3**
+
+```
+---
+config:
+   layout: ipsepCola
+---
+
+flowchart TD
+A[Module A] --> B[Module B]
+A --> C[Module C]
+B --> D[Module D]
+C --> D
+D --> E[Module E]
+```
+
+### **Example 4**
+
+```
+---
+config:
+   layout: ipsepCola
+---
+
+flowchart TD
+Source1["📦 Raw Data (CSV)"]
+Source2["🌐 API Data"]
+
+Source1 --> Clean["🧹 Clean & Format"]
+Source2 --> Clean
+
+Clean --> Transform["🔄 Transform Data"]
+Transform --> Load["📥 Load into Data Warehouse"]
+Load --> BI["📊 BI Dashboard"]
+```
+
+### **Example 5**
+
+```
+---
+config:
+   layout: ipsepCola
+---
+classDiagram
+  class Person {
+    -String name
+    -int age
+    +greet(): void
+  }
+
+  class Employee {
+    -int employeeId
+    +calculateSalary(): float
+  }
+
+  class Manager {
+    -String department
+    +assignTask(): void
+  }
+
+  Person <|-- Employee
+  Employee <|-- Manager
+```
+
+### **Example 6**
+
+```
+---
+config:
+   layout: ipsepCola
+---
+flowchart TD
+  Sunlight["☀️ Sunlight"] --> Leaf["🌿 Leaf"]
+  Leaf --> Glucose["🍬 Glucose"]
+  Leaf --> Oxygen["💨 Oxygen"]
+```
+
+### **Example 7**
+
+```
+---
+config:
+   layout: ipsepCola
+---
+flowchart TD
+  Internet["🌐 Internet"] --> Router["📡 Router"]
+  Router --> Server1["🖥️ Server A"]
+  Router --> Server2["🖥️ Server B"]
+  Router --> Laptop["💻 Laptop"]
+
+  %% New device joins
+  Router --> Mobile["📱 Mobile"]
+```
+
+## Limitations :
+
+1. Computational Cost: More iterations may be needed for large graphs (>1000 nodes).
+2. Parameter Tuning: Requires adjustments for different graph types.
+3. Non-Determinism: Small variations may occur between runs due to force simulation.
+
+## Conclusion :
+
+IPSep-CoLa provides a robust solution for constraint-based graph layout, particularly for structured and clustered diagrams. By combining incremental refinement with separation constraints, it achieves readable and well-organized visualizations. Future improvements could include GPU acceleration and adaptive parameter tuning for large-scale graphs.

docs/news/blog.md

@@ -6,66 +6,6 @@
 
 # Blog
 
-## [Mermaid introduces the Visual Editor for Entity Relationship diagrams](https://docs.mermaidchart.com/blog/posts/mermaid-introduces-the-visual-editor-for-entity-relationship-diagrams)
-
-7/15/2025 • 7 mins
-
-Mermaid just introduced a Visual Editor for Entity Relationship diagrams, letting anyone map database structures through a simple point-and-click interface instead of code. This no-code ER builder now sits alongside Mermaid’s editors for flowcharts, sequence, and class diagrams, enabling teams to craft and share polished data models for apps, AI, and business processes.
-
-## [Mermaid supports Treemap Diagrams now!!!](https://docs.mermaidchart.com/blog/posts/mermaid-have-treemap-diagrams-now)
-
-7/3/2025 • 4 mins
-
-Mermaid has introduced Treemap diagrams, currently in beta, enhancing hierarchical data visualization. Treemap diagrams use nested rectangles to represent data relationships, focusing on size and proportions. They offer various applications, including budget visualization and market analysis. With simple syntax and customization options, users can effectively present complex data hierarchies.
-
-## [AI Diagram Generators and Data Visualization: Best Practices](https://docs.mermaidchart.com/blog/posts/ai-diagram-generators-and-data-visualization-best-practices)
-
-7/2/2025 • 6 mins
-
-AI diagram generators transform complex data into clear, interactive visuals – enabling faster analysis, better decisions, and stronger collaboration across teams. By combining automation with manual refinement, these tools empower anyone to communicate insights effectively, regardless of technical skill level.
-
-## [How to Choose the Best AI Diagram Generator for Your Needs (2025)](https://docs.mermaidchart.com/blog/posts/how-to-choose-the-best-ai-diagram-generator-for-your-needs-2025)
-
-6/26/2025 • 14 mins
-
-AI diagram generators are transforming how developers visualize and communicate complex systems, reducing hours of manual work into minutes. With tools like Mermaid AI, users benefit from both code-based and visual editing, enabling seamless collaboration and precision. Whether you’re diagramming workflows, software architecture, or data relationships, the right AI tool can significantly boost productivity and streamline communication.
-
-## [5 Time-Saving Tips for Using Mermaid’s AI Diagram Generator Effectively](https://docs.mermaidchart.com/blog/posts/5-time-saving-tips-for-using-mermaids-ai-diagram-generator-effectively)
-
-6/11/2025 • 10 mins
-
-See how developers can save time and boost productivity using Mermaid Chart’s AI diagram generator. Learn five practical tips that help turn plain language into powerful, professional diagrams.
-
-## [Enhancing Team Collaboration with AI-Powered Diagrams](https://docs.mermaidchart.com/blog/posts/enhancing-team-collaboration-with-ai-powered-diagrams)
-
-5/27/2025 • 6 mins
-
-Software teams move fast, but old-school diagramming tools can’t keep up. Mermaid Chart replaces static slides and whiteboards with real-time, AI-generated visuals that evolve with your code and ideas. Just describe a process in plain English, and watch it come to life.
-
-## [What is an AI Diagram Generator? Benefits and Use Cases](https://docs.mermaidchart.com/blog/posts/what-is-an-ai-diagram-generator-benefits-and-use-cases)
-
-5/22/2025 • 6 mins
-
-Discover how AI diagram generators like Mermaid Chart transform developer workflows. Instantly turn text into flowcharts, ERDs, and system diagrams, no manual drag-and-drop needed. Learn how it works, key benefits, and real-world use cases.
-
-## [How to Use Mermaid Chart as an AI Diagram Generator for Developers](https://docs.mermaidchart.com/blog/posts/how-to-use-mermaid-chart-as-an-ai-diagram-generator)
-
-5/21/2025 • 9 mins
-
-Would an AI diagram generator make your life easier? We think it would!
-
-## [Mermaid Chart VS Code Plugin: Create and Edit Mermaid.js Diagrams in Visual Studio Code](https://docs.mermaidchart.com/blog/posts/mermaid-chart-vs-code-plugin-create-and-edit-mermaid-js-diagrams-in-visual-studio-code)
-
-3/21/2025 • 5 mins
-
-The Mermaid Chart VS Code Plugin is a powerful developer diagramming tool that brings Mermaid.js diagramming directly into your Visual Studio Code environment. Whether you’re visualizing software architecture, documenting API flows, fixing bad documentation, or managing flowcharts and sequence diagrams, this plugin integrates seamlessly into your workflow. Key Features of the Mermaid Chart VS Code \[…]
-
-## [Mermaid Chart: The Evolution of Mermaid](https://docs.mermaidchart.com/blog/posts/mermaid-chart-the-evolution-of-mermaid)
-
-1/30/2025 • 3 mins
-
-Mermaid revolutionized diagramming with its simple, markdown-style syntax, empowering millions of developers worldwide. Now, Mermaid Chart takes it further with AI-powered visuals, a GUI for seamless editing, real-time collaboration, and advanced design tools. Experience the next generation of diagramming—faster, smarter, and built for modern teams. Try Mermaid Chart today!
-
 ## [GUI for editing Mermaid Class Diagrams](https://docs.mermaidchart.com/blog/posts/gui-for-editing-mermaid-class-diagrams)
 
 1/17/2025 • 5 mins

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

@@ -1795,54 +1795,15 @@ It is possible to style the type of curve used for lines between items, if the d
 Available curve styles include `basis`, `bumpX`, `bumpY`, `cardinal`, `catmullRom`, `linear`, `monotoneX`, `monotoneY`,
 `natural`, `step`, `stepAfter`, and `stepBefore`.
 
-For a full list of available curves, including an explanation of custom curves, refer to
-the [Shapes](https://d3js.org/d3-shape/curve) documentation in the [d3-shape](https://github.com/d3/d3-shape/) project.
-
-Line styling can be achieved in two ways:
-
-1. Change the curve style of all the lines
-2. Change the curve style of a particular line
-
-#### Diagram level curve style
-
 In this example, a left-to-right graph uses the `stepBefore` curve style:
 
 ```
----
-config:
-  flowchart:
-    curve: stepBefore
----
+%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
 graph LR
 ```
 
-#### Edge level curve style using Edge IDs (v11.10.0+)
-
-You can assign IDs to [edges](#attaching-an-id-to-edges). After assigning an ID you can modify the line style by modifying the edge's `curve` property using the following syntax:
-
-```mermaid-example
-flowchart LR
-    A e1@==> B
-    A e2@--> C
-    e1@{ curve: linear }
-    e2@{ curve: natural }
-```
-
-```mermaid
-flowchart LR
-    A e1@==> B
-    A e2@--> C
-    e1@{ curve: linear }
-    e2@{ curve: natural }
-```
-
-```info
-Any edge curve style modified at the edge level overrides the diagram level style.
-```
-
-```info
-If the same edge is modified multiple times the last modification will be rendered.
-```
+For a full list of available curves, including an explanation of custom curves, refer to
+the [Shapes](https://d3js.org/d3-shape/curve) documentation in the [d3-shape](https://github.com/d3/d3-shape/) project.
 
 ### Styling a node
 

docs/syntax/packet.md

@@ -17,7 +17,7 @@ This diagram type is particularly useful for developers, network engineers, educ
 ## Syntax
 
 ```
-packet
+packet-beta
 start: "Block name" %% Single-bit block
 start-end: "Block name" %% Multi-bit blocks
 ... More Fields ...
@@ -28,7 +28,7 @@ start-end: "Block name" %% Multi-bit blocks
 Using start and end bit counts can be difficult, especially when modifying a design. For this we add a bit count field, which starts from the end of the previous field automagically. Use `+<count>` to set the number of bits, thus:
 
 ```
-packet
+packet-beta
 +1: "Block name" %% Single-bit block
 +8: "Block name" %% 8-bit block
 9-15: "Manually set start and end, it's fine to mix and match"
@@ -41,7 +41,7 @@ packet
 ---
 title: "TCP Packet"
 ---
-packet
+packet-beta
 0-15: "Source Port"
 16-31: "Destination Port"
 32-63: "Sequence Number"
@@ -65,7 +65,7 @@ packet
 ---
 title: "TCP Packet"
 ---
-packet
+packet-beta
 0-15: "Source Port"
 16-31: "Destination Port"
 32-63: "Sequence Number"
@@ -86,7 +86,7 @@ packet
 ```
 
 ```mermaid-example
-packet
+packet-beta
 title UDP Packet
 +16: "Source Port"
 +16: "Destination Port"
@@ -96,7 +96,7 @@ title UDP Packet
 ```
 
 ```mermaid
-packet
+packet-beta
 title UDP Packet
 +16: "Source Port"
 +16: "Destination Port"
@@ -144,7 +144,7 @@ config:
     packet:
       startByteColor: red
 ---
-packet
+packet-beta
 0-15: "Source Port"
 16-31: "Destination Port"
 32-63: "Sequence Number"

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

@@ -1,353 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/treemap.md](../../packages/mermaid/src/docs/syntax/treemap.md).
-
-# Treemap Diagram
-
-> A treemap diagram displays hierarchical data as a set of nested rectangles. Each branch of the tree is represented by a rectangle, which is then tiled with smaller rectangles representing sub-branches.
-
-> **Warning**
-> This is a new diagram type in Mermaid. Its syntax may evolve in future versions.
-
-## Introduction
-
-Treemap diagrams are an effective way to visualize hierarchical data and show proportions between categories and subcategories. The size of each rectangle is proportional to the value it represents, making it easy to compare different parts of a hierarchy.
-
-Treemap diagrams are particularly useful for:
-
-- Visualizing hierarchical data structures
-- Comparing proportions between categories
-- Displaying large amounts of hierarchical data in a limited space
-- Identifying patterns and outliers in hierarchical data
-
-## Syntax
-
-```
-treemap-beta
-"Section 1"
-    "Leaf 1.1": 12
-    "Section 1.2"
-      "Leaf 1.2.1": 12
-"Section 2"
-    "Leaf 2.1": 20
-    "Leaf 2.2": 25
-```
-
-### Node Definition
-
-Nodes in a treemap are defined using the following syntax:
-
-- **Section/Parent nodes**: Defined with quoted text `"Section Name"`
-- **Leaf nodes with values**: Defined with quoted text followed by a colon and value `"Leaf Name": value`
-- **Hierarchy**: Created using indentation (spaces or tabs)
-- **Styling**: Nodes can be styled using the `:::class` syntax
-
-## Examples
-
-### Basic Treemap
-
-```mermaid-example
-treemap-beta
-"Category A"
-    "Item A1": 10
-    "Item A2": 20
-"Category B"
-    "Item B1": 15
-    "Item B2": 25
-```
-
-```mermaid
-treemap-beta
-"Category A"
-    "Item A1": 10
-    "Item A2": 20
-"Category B"
-    "Item B1": 15
-    "Item B2": 25
-```
-
-### Hierarchical Treemap
-
-```mermaid-example
-treemap-beta
-"Products"
-    "Electronics"
-        "Phones": 50
-        "Computers": 30
-        "Accessories": 20
-    "Clothing"
-        "Men's": 40
-        "Women's": 40
-```
-
-```mermaid
-treemap-beta
-"Products"
-    "Electronics"
-        "Phones": 50
-        "Computers": 30
-        "Accessories": 20
-    "Clothing"
-        "Men's": 40
-        "Women's": 40
-```
-
-### Treemap with Styling
-
-```mermaid-example
-treemap-beta
-"Section 1"
-    "Leaf 1.1": 12
-    "Section 1.2":::class1
-      "Leaf 1.2.1": 12
-"Section 2"
-    "Leaf 2.1": 20:::class1
-    "Leaf 2.2": 25
-    "Leaf 2.3": 12
-
-classDef class1 fill:red,color:blue,stroke:#FFD600;
-```
-
-```mermaid
-treemap-beta
-"Section 1"
-    "Leaf 1.1": 12
-    "Section 1.2":::class1
-      "Leaf 1.2.1": 12
-"Section 2"
-    "Leaf 2.1": 20:::class1
-    "Leaf 2.2": 25
-    "Leaf 2.3": 12
-
-classDef class1 fill:red,color:blue,stroke:#FFD600;
-```
-
-## Styling and Configuration
-
-Treemap diagrams can be customized using Mermaid's styling and configuration options.
-
-### Using classDef for Styling
-
-You can define custom styles for nodes using the `classDef` syntax, which is a standard feature across many Mermaid diagram types:
-
-```mermaid-example
-treemap-beta
-"Main"
-    "A": 20
-    "B":::important
-        "B1": 10
-        "B2": 15
-    "C": 5
-
-classDef important fill:#f96,stroke:#333,stroke-width:2px;
-```
-
-```mermaid
-treemap-beta
-"Main"
-    "A": 20
-    "B":::important
-        "B1": 10
-        "B2": 15
-    "C": 5
-
-classDef important fill:#f96,stroke:#333,stroke-width:2px;
-```
-
-### Theme Configuration
-
-You can customize the colors of your treemap using the theme configuration:
-
-```mermaid-example
----
-config:
-    theme: 'forest'
----
-treemap-beta
-"Category A"
-    "Item A1": 10
-    "Item A2": 20
-"Category B"
-    "Item B1": 15
-    "Item B2": 25
-```
-
-```mermaid
----
-config:
-    theme: 'forest'
----
-treemap-beta
-"Category A"
-    "Item A1": 10
-    "Item A2": 20
-"Category B"
-    "Item B1": 15
-    "Item B2": 25
-```
-
-### Diagram Padding
-
-You can adjust the padding around the treemap diagram using the `diagramPadding` configuration option:
-
-```mermaid-example
----
-config:
-  treemap:
-    diagramPadding: 200
----
-treemap-beta
-"Category A"
-    "Item A1": 10
-    "Item A2": 20
-"Category B"
-    "Item B1": 15
-    "Item B2": 25
-```
-
-```mermaid
----
-config:
-  treemap:
-    diagramPadding: 200
----
-treemap-beta
-"Category A"
-    "Item A1": 10
-    "Item A2": 20
-"Category B"
-    "Item B1": 15
-    "Item B2": 25
-```
-
-## Configuration Options
-
-The treemap diagram supports the following configuration options:
-
-| Option         | Description                                                                 | Default |
-| -------------- | --------------------------------------------------------------------------- | ------- |
-| useMaxWidth    | When true, the diagram width is set to 100% and scales with available space | true    |
-| padding        | Internal padding between nodes                                              | 10      |
-| diagramPadding | Padding around the entire diagram                                           | 8       |
-| showValues     | Whether to show values in the treemap                                       | true    |
-| nodeWidth      | Width of nodes                                                              | 100     |
-| nodeHeight     | Height of nodes                                                             | 40      |
-| borderWidth    | Width of borders                                                            | 1       |
-| valueFontSize  | Font size for values                                                        | 12      |
-| labelFontSize  | Font size for labels                                                        | 14      |
-| valueFormat    | Format for values (see Value Formatting section)                            | ','     |
-
-## Advanced Features
-
-### Value Formatting
-
-Values in treemap diagrams can be formatted to display in different ways using the `valueFormat` configuration option. This option primarily uses [D3's format specifiers](https://github.com/d3/d3-format#locale_format) to control how numbers are displayed, with some additional special cases for common formats.
-
-Some common format patterns:
-
-- `,` - Thousands separator (default)
-- `$` - Add dollar sign
-- `.1f` - Show one decimal place
-- `.1%` - Show as percentage with one decimal place
-- `$0,0` - Dollar sign with thousands separator
-- `$.2f` - Dollar sign with 2 decimal places
-- `$,.2f` - Dollar sign with thousands separator and 2 decimal places
-
-The treemap diagram supports both standard D3 format specifiers and some common currency formats that combine the dollar sign with other formatting options.
-
-Example with currency formatting:
-
-```mermaid-example
----
-config:
-  treemap:
-    valueFormat: '$0,0'
----
-treemap-beta
-"Budget"
-    "Operations"
-        "Salaries": 700000
-        "Equipment": 200000
-        "Supplies": 100000
-    "Marketing"
-        "Advertising": 400000
-        "Events": 100000
-```
-
-```mermaid
----
-config:
-  treemap:
-    valueFormat: '$0,0'
----
-treemap-beta
-"Budget"
-    "Operations"
-        "Salaries": 700000
-        "Equipment": 200000
-        "Supplies": 100000
-    "Marketing"
-        "Advertising": 400000
-        "Events": 100000
-```
-
-Example with percentage formatting:
-
-```mermaid-example
----
-config:
-  treemap:
-    valueFormat: '$.1%'
----
-treemap-beta
-"Market Share"
-    "Company A": 0.35
-    "Company B": 0.25
-    "Company C": 0.15
-    "Others": 0.25
-```
-
-```mermaid
----
-config:
-  treemap:
-    valueFormat: '$.1%'
----
-treemap-beta
-"Market Share"
-    "Company A": 0.35
-    "Company B": 0.25
-    "Company C": 0.15
-    "Others": 0.25
-```
-
-## Common Use Cases
-
-Treemap diagrams are commonly used for:
-
-1. **Financial Data**: Visualizing budget allocations, market shares, or portfolio compositions
-2. **File System Analysis**: Showing disk space usage by folders and files
-3. **Population Demographics**: Displaying population distribution across regions and subregions
-4. **Product Hierarchies**: Visualizing product categories and their sales volumes
-5. **Organizational Structures**: Representing departments and team sizes in a company
-
-## Limitations
-
-- Treemap diagrams work best when the data has a natural hierarchy
-- Very small values may be difficult to see or label in a treemap diagram
-- Deep hierarchies (many levels) can be challenging to represent clearly
-- Treemap diagrams are not well suited for representing data with negative values
-
-## Related Diagrams
-
-If treemap diagrams don't suit your needs, consider these alternatives:
-
-- [**Pie Charts**](./pie.md): For simple proportion comparisons without hierarchy
-- **Sunburst Diagrams**: For hierarchical data with a radial layout (yet to be released in Mermaid).
-- [**Sankey Diagrams**](./sankey.md): For flow-based hierarchical data
-
-## Notes
-
-The treemap diagram implementation in Mermaid is designed to be simple to use while providing powerful visualization capabilities. As this is a newer diagram type, feedback and feature requests are welcome through the Mermaid GitHub repository.

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

package.json

@@ -37,7 +37,7 @@
     "e2e:coverage": "start-server-and-test dev:coverage http://localhost:9000/ cypress",
     "coverage:cypress:clean": "rimraf .nyc_output coverage/cypress",
     "coverage:merge": "tsx scripts/coverage.ts",
-    "coverage": "pnpm test:coverage --run && pnpm e2e:coverage && pnpm coverage:merge",
+    "coverage": "pnpm test:coverage --run && pnpm coverage:merge",
     "ci": "vitest run",
     "test": "pnpm lint && vitest run",
     "test:watch": "vitest --watch",
@@ -64,10 +64,10 @@
   },
   "devDependencies": {
     "@applitools/eyes-cypress": "^3.44.9",
-    "@argos-ci/cypress": "^5.0.2",
+    "@argos-ci/cypress": "^4.0.3",
     "@changesets/changelog-github": "^0.5.1",
     "@changesets/cli": "^2.27.12",
-    "@cspell/eslint-plugin": "^8.19.4",
+    "@cspell/eslint-plugin": "^8.19.3",
     "@cypress/code-coverage": "^3.12.49",
     "@eslint/js": "^9.26.0",
     "@rollup/plugin-typescript": "^12.1.2",
@@ -83,51 +83,51 @@
     "@vitest/spy": "^3.0.6",
     "@vitest/ui": "^3.0.6",
     "ajv": "^8.17.1",
-    "chokidar": "3.6.0",
+    "chokidar": "^4.0.3",
     "concurrently": "^9.1.2",
     "cors": "^2.8.5",
     "cpy-cli": "^5.0.0",
     "cross-env": "^7.0.3",
-    "cspell": "^9.1.3",
-    "cypress": "^14.5.1",
+    "cspell": "^8.6.1",
+    "cypress": "^14.0.3",
     "cypress-image-snapshot": "^4.0.1",
     "cypress-split": "^1.24.14",
     "esbuild": "^0.25.0",
     "eslint": "^9.26.0",
-    "eslint-config-prettier": "^10.1.8",
+    "eslint-config-prettier": "^10.1.1",
     "eslint-plugin-cypress": "^4.3.0",
-    "eslint-plugin-html": "^8.1.3",
-    "eslint-plugin-jest": "^28.14.0",
-    "eslint-plugin-jsdoc": "^50.8.0",
+    "eslint-plugin-html": "^8.1.2",
+    "eslint-plugin-jest": "^28.11.0",
+    "eslint-plugin-jsdoc": "^50.6.9",
     "eslint-plugin-json": "^4.0.1",
     "eslint-plugin-lodash": "^8.0.0",
     "eslint-plugin-markdown": "^5.1.0",
     "eslint-plugin-no-only-tests": "^3.3.0",
     "eslint-plugin-tsdoc": "^0.4.0",
-    "eslint-plugin-unicorn": "^59.0.1",
+    "eslint-plugin-unicorn": "^59.0.0",
     "express": "^5.1.0",
     "globals": "^16.0.0",
     "globby": "^14.0.2",
     "husky": "^9.1.7",
-    "jest": "^30.0.4",
+    "jest": "^29.7.0",
     "jison": "^0.4.18",
     "js-yaml": "^4.1.0",
-    "jsdom": "^26.1.0",
+    "jsdom": "^26.0.0",
     "langium-cli": "3.3.0",
-    "lint-staged": "^16.1.2",
+    "lint-staged": "^15.2.11",
     "markdown-table": "^3.0.4",
     "nyc": "^17.1.0",
     "path-browserify": "^1.0.1",
     "prettier": "^3.5.2",
     "prettier-plugin-jsdoc": "^1.3.2",
     "rimraf": "^6.0.1",
-    "rollup-plugin-visualizer": "^6.0.3",
+    "rollup-plugin-visualizer": "^5.14.0",
     "start-server-and-test": "^2.0.10",
     "tslib": "^2.8.1",
     "tsx": "^4.7.3",
     "typescript": "~5.7.3",
-    "typescript-eslint": "^8.38.0",
-    "vite": "^7.0.3",
+    "typescript-eslint": "^8.32.0",
+    "vite": "^6.1.1",
     "vite-plugin-istanbul": "^7.0.0",
     "vitest": "^3.0.6"
   },
@@ -139,13 +139,8 @@
       "roughjs": "patches/roughjs.patch"
     },
     "onlyBuiltDependencies": [
-      "canvas",
       "cypress",
       "esbuild"
-    ],
-    "ignoredBuiltDependencies": [
-      "sharp",
-      "vue-demi"
     ]
   }
 }

packages/examples/CHANGELOG.md

@@ -1,14 +0,0 @@
-# @mermaid-js/examples
-
-## 1.0.0
-
-### Minor Changes
-
-- [#6453](https://github.com/mermaid-js/mermaid/pull/6453) [`4936ef5`](https://github.com/mermaid-js/mermaid/commit/4936ef5c306d2f892cca9a95a5deac4af6d4882b) Thanks [@sidharthv96](https://github.com/sidharthv96)! - feat: Add examples for diagrams in the `@mermaid-js/examples` package
-
-### Patch Changes
-
-- [#6510](https://github.com/mermaid-js/mermaid/pull/6510) [`7a38eb7`](https://github.com/mermaid-js/mermaid/commit/7a38eb715d795cd5c66cb59357d64ec197b432e6) Thanks [@sidharthv96](https://github.com/sidharthv96)! - chore: Move packet diagram out of beta
-
-- Updated dependencies [[`5acbd7e`](https://github.com/mermaid-js/mermaid/commit/5acbd7e762469d9d89a9c77faf6617ee13367f3a), [`d90634b`](https://github.com/mermaid-js/mermaid/commit/d90634bf2b09e586b055729e07e9a1a31b21827c), [`7a38eb7`](https://github.com/mermaid-js/mermaid/commit/7a38eb715d795cd5c66cb59357d64ec197b432e6), [`3e3ae08`](https://github.com/mermaid-js/mermaid/commit/3e3ae089305e1c7b9948b9e149eba6854fe7f2d6), [`d3e2be3`](https://github.com/mermaid-js/mermaid/commit/d3e2be35be066adeb7fd502b4a24c223c3b53947), [`637680d`](https://github.com/mermaid-js/mermaid/commit/637680d4d9e39b4f8cb6f05b4cb261e8f5693ac3)]:
-  - mermaid@11.9.0

packages/examples/README.md

@@ -1,41 +0,0 @@
-# @mermaid-js/examples
-
-The `@mermaid-js/examples` package contains a collection of examples used by tools like [mermaid.live](https://mermaid.live) to help users get started with new diagrams.
-
-You can duplicate an existing diagram example file, e.g., `packages/examples/src/examples/flowchart.ts`, and modify it with details specific to your diagram.
-
-Then, import the example in the `packages/examples/src/index.ts` file and add it to the `examples` array.
-
-Each diagram should have at least one example, which should be marked as the default. It's a good idea to add more examples to showcase different features of the diagram.
-
-## Usage
-
-```bash
-pnpm add @mermaid-js/examples
-```
-
-A sample usage of the package in mermaid.live, to get the default example for every diagram type:
-
-```ts
-import { diagramData } from '@mermaid-js/examples';
-
-type DiagramDefinition = (typeof diagramData)[number];
-
-const isValidDiagram = (diagram: DiagramDefinition): diagram is Required<DiagramDefinition> => {
-  return Boolean(diagram.name && diagram.examples && diagram.examples.length > 0);
-};
-
-export const getSampleDiagrams = () => {
-  const diagrams = diagramData
-    .filter((d) => isValidDiagram(d))
-    .map(({ examples, ...rest }) => ({
-      ...rest,
-      example: examples?.filter(({ isDefault }) => isDefault)[0],
-    }));
-  const examples: Record<string, string> = {};
-  for (const diagram of diagrams) {
-    examples[diagram.name.replace(/ (Diagram|Chart|Graph)/, '')] = diagram.example.code;
-  }
-  return examples;
-};
-```

packages/examples/package.json

@@ -1,33 +0,0 @@
-{
-  "name": "@mermaid-js/examples",
-  "version": "1.0.0",
-  "description": "Mermaid examples package",
-  "author": "Sidharth Vinod",
-  "type": "module",
-  "module": "./dist/mermaid-examples.core.mjs",
-  "types": "./dist/mermaid.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/mermaid-examples.core.mjs",
-      "default": "./dist/mermaid-examples.core.mjs"
-    }
-  },
-  "files": [
-    "dist"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/mermaid-js/mermaid"
-  },
-  "scripts": {
-    "clean": "rimraf dist"
-  },
-  "dependencies": {},
-  "devDependencies": {
-    "mermaid": "workspace:*"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}

packages/examples/src/example.spec.ts

@@ -1,34 +0,0 @@
-import mermaid from 'mermaid';
-import { diagramData } from './index.js';
-
-describe('examples', () => {
-  beforeAll(async () => {
-    // To trigger the diagram registration
-    await mermaid.registerExternalDiagrams([]);
-  });
-
-  it('should have examples for each diagrams', () => {
-    const skippedDiagrams = [
-      // These diagrams have no examples
-      'error',
-      'info',
-      '---',
-      // These diagrams have v2 versions, with examples
-      'class',
-      'graph',
-      'flowchart-elk',
-      'flowchart',
-      'state',
-    ];
-    const diagrams = mermaid
-      .getRegisteredDiagramsMetadata()
-      .filter((d) => !skippedDiagrams.includes(d.id));
-    expect(diagrams.length).toBeGreaterThan(0);
-    for (const diagram of diagrams) {
-      const data = diagramData.find((d) => d.id === diagram.id)!;
-      expect(data, `Example for ${diagram.id} is not defined`).toBeDefined();
-      expect(data.examples.length).toBeGreaterThan(0);
-      expect(data.examples.filter((e) => e.isDefault).length).toBe(1);
-    }
-  });
-});

packages/examples/src/examples/architecture.ts

@@ -1,24 +0,0 @@
-import type { DiagramMetadata } from '../types.js';
-
-export default {
-  id: 'architecture',
-  name: 'Architecture Diagram',
-  description: 'Visualize system architecture and components',
-  examples: [
-    {
-      title: 'Basic System Architecture',
-      isDefault: true,
-      code: `architecture-beta
-    group api(cloud)[API]
-
-    service db(database)[Database] in api
-    service disk1(disk)[Storage] in api
-    service disk2(disk)[Storage] in api
-    service server(server)[Server] in api
-
-    db:L -- R:server
-    disk1:T -- B:server
-    disk2:T -- B:db`,
-    },
-  ],
-} satisfies DiagramMetadata;

packages/examples/src/examples/block.ts

@@ -1,27 +0,0 @@
-import type { DiagramMetadata } from '../types.js';
-
-export default {
-  id: 'block',
-  name: 'Block Diagram',
-  description: 'Create block-based visualizations with beta styling',
-  examples: [
-    {
-      title: 'Basic Block Layout',
-      isDefault: true,
-      code: `block-beta
-columns 1
-  db(("DB"))
-  blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
-  block:ID
-    A
-    B["A wide one in the middle"]
-    C
-  end
-  space
-  D
-  ID --> D
-  C --> D
-  style B fill:#969,stroke:#333,stroke-width:4px`,
-    },
-  ],
-} satisfies DiagramMetadata;

packages/examples/src/examples/c4.ts

@@ -1,47 +0,0 @@
-import type { DiagramMetadata } from '../types.js';
-
-export default {
-  id: 'c4',
-  name: 'C4 Diagram',
-  description:
-    'Visualize software architecture using the C4 model (Context, Container, Component, Code)',
-  examples: [
-    {
-      title: 'Internet Banking System Context',
-      isDefault: true,
-      code: `C4Context
-    title System Context diagram for Internet Banking System
-    Enterprise_Boundary(b0, "BankBoundary0") {
-        Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
-        Person(customerB, "Banking Customer B")
-        Person_Ext(customerC, "Banking Customer C", "desc")
-
-        Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
-
-        System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
-
-        Enterprise_Boundary(b1, "BankBoundary") {
-            SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
-
-            System_Boundary(b2, "BankBoundary2") {
-                System(SystemA, "Banking System A")
-                System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
-            }
-
-            System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
-            SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
-
-            Boundary(b3, "BankBoundary3", "boundary") {
-                SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
-                SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
-            }
-        }
-    }
-
-    BiRel(customerA, SystemAA, "Uses")
-    BiRel(SystemAA, SystemE, "Uses")
-    Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
-    Rel(SystemC, customerA, "Sends e-mails to")`,
-    },
-  ],
-} satisfies DiagramMetadata;

packages/examples/src/examples/class.ts

@@ -1,34 +0,0 @@
-import type { DiagramMetadata } from '../types.js';
-
-export default {
-  id: 'classDiagram',
-  name: 'Class Diagram',
-  description: 'Visualize class structures and relationships in object-oriented programming',
-  examples: [
-    {
-      title: 'Basic Class Inheritance',
-      isDefault: true,
-      code: `classDiagram
-    Animal <|-- Duck
-    Animal <|-- Fish
-    Animal <|-- Zebra
-    Animal : +int age
-    Animal : +String gender
-    Animal: +isMammal()
-    Animal: +mate()
-    class Duck{
-      +String beakColor
-      +swim()
-      +quack()
-    }
-    class Fish{
-      -int sizeInFeet
-      -canEat()
-    }
-    class Zebra{
-      +bool is_wild
-      +run()
-    }`,
-    },
-  ],
-} satisfies DiagramMetadata;

packages/examples/src/examples/er.ts

@@ -1,36 +0,0 @@
-import type { DiagramMetadata } from '../types.js';
-
-export default {
-  id: 'er',
-  name: 'Entity Relationship Diagram',
-  description: 'Visualize database schemas and relationships between entities',
-  examples: [
-    {
-      title: 'Basic ER Schema',
-      isDefault: true,
-      code: `erDiagram
-    CUSTOMER ||--o{ ORDER : places
-    ORDER ||--|{ ORDER_ITEM : contains
-    PRODUCT ||--o{ ORDER_ITEM : includes
-    CUSTOMER {
-        string id
-        string name
-        string email
-    }
-    ORDER {
-        string id
-        date orderDate
-        string status
-    }
-    PRODUCT {
-        string id
-        string name
-        float price
-    }
-    ORDER_ITEM {
-        int quantity
-        float price
-    }`,
-    },
-  ],
-} satisfies DiagramMetadata;

packages/examples/src/examples/flowchart.ts

@@ -1,19 +0,0 @@
-import type { DiagramMetadata } from '../types.js';
-
-export default {
-  id: 'flowchart-v2',
-  name: 'Flowchart',
-  description: 'Visualize flowcharts and directed graphs',
-  examples: [
-    {
-      title: 'Basic Flowchart',
-      isDefault: true,
-      code: `flowchart TD
-    A[Christmas] -->|Get money| B(Go shopping)
-    B --> C{Let me think}
-    C -->|One| D[Laptop]
-    C -->|Two| E[iPhone]
-    C -->|Three| F[fa:fa-car Car]`,
-    },
-  ],
-} satisfies DiagramMetadata;

packages/examples/src/examples/gantt.ts

@@ -1,22 +0,0 @@
-import type { DiagramMetadata } from '../types.js';
-
-export default {
-  id: 'gantt',
-  name: 'Gantt Chart',
-  description: 'Visualize project schedules and timelines',
-  examples: [
-    {
-      title: 'Basic Project Timeline',
-      isDefault: true,
-      code: `gantt
-    title A Gantt Diagram
-    dateFormat  YYYY-MM-DD
-    section Section
-    A task           :a1, 2014-01-01, 30d
-    Another task     :after a1  , 20d
-    section Another
-    Task in sec      :2014-01-12  , 12d
-    another task      : 24d`,
-    },
-  ],
-} satisfies DiagramMetadata;

packages/examples/src/examples/git.ts

@@ -1,28 +0,0 @@
-import type { DiagramMetadata } from '../types.js';
-
-export default {
-  id: 'gitGraph',
-  name: 'Git Graph',
-  description: 'Visualize Git repository history and branch relationships',
-  examples: [
-    {
-      title: 'Basic Git Flow',
-      isDefault: true,
-      code: `gitGraph
-    commit
-    branch develop
-    checkout develop
-    commit
-    commit
-    checkout main
-    merge develop
-    commit
-    branch feature
-    checkout feature
-    commit
-    commit
-    checkout main
-    merge feature`,
-    },
-  ],
-} satisfies DiagramMetadata;

packages/examples/src/examples/kanban.ts

@@ -1,37 +0,0 @@
-import type { DiagramMetadata } from '../types.js';
-
-export default {
-  id: 'kanban',
-  name: 'Kanban Diagram',
-  description: 'Visualize work items in a Kanban board',
-  examples: [
-    {
-      title: 'Kanban Diagram',
-      isDefault: true,
-      code: `---
-config:
-  kanban:
-    ticketBaseUrl: 'https://github.com/mermaid-js/mermaid/issues/#TICKET#'
----
-kanban
-  Todo
-    [Create Documentation]
-    docs[Create Blog about the new diagram]
-  [In progress]
-    id6[Create renderer so that it works in all cases. We also add some extra text here for testing purposes. And some more just for the extra flare.]
-  id9[Ready for deploy]
-    id8[Design grammar]@{ assigned: 'knsv' }
-  id10[Ready for test]
-    id4[Create parsing tests]@{ ticket: 2038, assigned: 'K.Sveidqvist', priority: 'High' }
-    id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
-  id11[Done]
-    id5[define getData]
-    id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: 2036, priority: 'Very High'}
-    id3[Update DB function]@{ ticket: 2037, assigned: knsv, priority: 'High' }
-
-  id12[Can't reproduce]
-    id3[Weird flickering in Firefox]
-`,
-    },
-  ],
-} satisfies DiagramMetadata;

packages/examples/src/examples/mindmap.ts

@@ -1,32 +0,0 @@
-import type { DiagramMetadata } from '../types.js';
-
-export default {
-  id: 'mindmap',
-  name: 'Mindmap',
-  description: 'Visualize ideas and concepts in a tree-like structure',
-  examples: [
-    {
-      title: 'Basic Mindmap',
-      isDefault: true,
-      code: `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`,
-    },
-  ],
-} satisfies DiagramMetadata;
-
-// cspell:ignore Buzan

packages/examples/src/examples/packet.ts

@@ -1,34 +0,0 @@
-import type { DiagramMetadata } from '../types.js';
-
-export default {
-  id: 'packet',
-  name: 'Packet Diagram',
-  description: 'Visualize packet data and network traffic',
-  examples: [
-    {
-      title: 'TCP Packet',
-      isDefault: true,
-      code: `---
-title: "TCP Packet"
----
-packet
-0-15: "Source Port"
-16-31: "Destination Port"
-32-63: "Sequence Number"
-64-95: "Acknowledgment Number"
-96-99: "Data Offset"
-100-105: "Reserved"
-106: "URG"
-107: "ACK"
-108: "PSH"
-109: "RST"
-110: "SYN"
-111: "FIN"
-112-127: "Window"
-128-143: "Checksum"
-144-159: "Urgent Pointer"
-160-191: "(Options and Padding)"
-192-255: "Data (variable length)"`,
-    },
-  ],
-} satisfies DiagramMetadata;

packages/examples/src/examples/pie.ts

@@ -1,17 +0,0 @@
-import type { DiagramMetadata } from '../types.js';
-
-export default {
-  id: 'pie',
-  name: 'Pie Chart',
-  description: 'Visualize data as proportional segments of a circle',
-  examples: [
-    {
-      title: 'Basic Pie Chart',
-      isDefault: true,
-      code: `pie title Pets adopted by volunteers
-    "Dogs" : 386
-    "Cats" : 85
-    "Rats" : 15`,
-    },
-  ],
-} satisfies DiagramMetadata;

packages/examples/src/examples/quadrant-chart.ts

@@ -1,27 +0,0 @@
-import type { DiagramMetadata } from '../types.js';
-
-export default {
-  id: 'quadrantChart',
-  name: 'Quadrant Chart',
-  description: 'Visualize items in a 2x2 matrix based on two variables',
-  examples: [
-    {
-      title: 'Product Positioning',
-      isDefault: true,
-      code: `quadrantChart
-    title Reach and engagement of campaigns
-    x-axis Low Reach --> High Reach
-    y-axis Low Engagement --> High Engagement
-    quadrant-1 We should expand
-    quadrant-2 Need to promote
-    quadrant-3 Re-evaluate
-    quadrant-4 May be improved
-    Campaign A: [0.3, 0.6]
-    Campaign B: [0.45, 0.23]
-    Campaign C: [0.57, 0.69]
-    Campaign D: [0.78, 0.34]
-    Campaign E: [0.40, 0.34]
-    Campaign F: [0.35, 0.78]`,
-    },
-  ],
-} satisfies DiagramMetadata;

packages/examples/src/examples/radar.ts

@@ -1,25 +0,0 @@
-import type { DiagramMetadata } from '../types.js';
-
-export default {
-  id: 'radar',
-  name: 'Radar Diagram',
-  description: 'Visualize data in a radial format',
-  examples: [
-    {
-      title: 'Student Grades',
-      isDefault: true,
-      code: `---
-title: "Grades"
----
-radar-beta
-  axis m["Math"], s["Science"], e["English"]
-  axis h["History"], g["Geography"], a["Art"]
-  curve a["Alice"]{85, 90, 80, 70, 75, 90}
-  curve b["Bob"]{70, 75, 85, 80, 90, 85}
-
-  max 100
-  min 0
-`,
-    },
-  ],
-} satisfies DiagramMetadata;

packages/examples/src/examples/requirement.ts

@@ -1,27 +0,0 @@
-import type { DiagramMetadata } from '../types.js';
-
-export default {
-  id: 'requirement',
-  name: 'Requirement Diagram',
-  description: 'Visualize system requirements and their relationships',
-  examples: [
-    {
-      title: 'Basic Requirements',
-      code: `requirementDiagram
-
-    requirement test_req {
-    id: 1
-    text: the test text.
-    risk: high
-    verifymethod: test
-    }
-
-    element test_entity {
-    type: simulation
-    }
-
-    test_entity - satisfies -> test_req`,
-      isDefault: true,
-    },
-  ],
-} satisfies DiagramMetadata;

packages/examples/src/examples/sankey.ts

@@ -1,88 +0,0 @@
-import type { DiagramMetadata } from '../types.js';
-
-export default {
-  id: 'sankey',
-  name: 'Sankey Diagram',
-  description: 'Visualize flow quantities between different stages or processes',
-  examples: [
-    {
-      title: 'Energy Flow',
-      isDefault: true,
-      code: `---
-config:
-  sankey:
-    showValues: false
----
-sankey-beta
-
-Agricultural 'waste',Bio-conversion,124.729
-Bio-conversion,Liquid,0.597
-Bio-conversion,Losses,26.862
-Bio-conversion,Solid,280.322
-Bio-conversion,Gas,81.144
-Biofuel imports,Liquid,35
-Biomass imports,Solid,35
-Coal imports,Coal,11.606
-Coal reserves,Coal,63.965
-Coal,Solid,75.571
-District heating,Industry,10.639
-District heating,Heating and cooling - commercial,22.505
-District heating,Heating and cooling - homes,46.184
-Electricity grid,Over generation / exports,104.453
-Electricity grid,Heating and cooling - homes,113.726
-Electricity grid,H2 conversion,27.14
-Electricity grid,Industry,342.165
-Electricity grid,Road transport,37.797
-Electricity grid,Agriculture,4.412
-Electricity grid,Heating and cooling - commercial,40.858
-Electricity grid,Losses,56.691
-Electricity grid,Rail transport,7.863
-Electricity grid,Lighting & appliances - commercial,90.008
-Electricity grid,Lighting & appliances - homes,93.494
-Gas imports,NGas,40.719
-Gas reserves,NGas,82.233
-Gas,Heating and cooling - commercial,0.129
-Gas,Losses,1.401
-Gas,Thermal generation,151.891
-Gas,Agriculture,2.096
-Gas,Industry,48.58
-Geothermal,Electricity grid,7.013
-H2 conversion,H2,20.897
-H2 conversion,Losses,6.242
-H2,Road transport,20.897
-Hydro,Electricity grid,6.995
-Liquid,Industry,121.066
-Liquid,International shipping,128.69
-Liquid,Road transport,135.835
-Liquid,Domestic aviation,14.458
-Liquid,International aviation,206.267
-Liquid,Agriculture,3.64
-Liquid,National navigation,33.218
-Liquid,Rail transport,4.413
-Marine algae,Bio-conversion,4.375
-NGas,Gas,122.952
-Nuclear,Thermal generation,839.978
-Oil imports,Oil,504.287
-Oil reserves,Oil,107.703
-Oil,Liquid,611.99
-Other waste,Solid,56.587
-Other waste,Bio-conversion,77.81
-Pumped heat,Heating and cooling - homes,193.026
-Pumped heat,Heating and cooling - commercial,70.672
-Solar PV,Electricity grid,59.901
-Solar Thermal,Heating and cooling - homes,19.263
-Solar,Solar Thermal,19.263
-Solar,Solar PV,59.901
-Solid,Agriculture,0.882
-Solid,Thermal generation,400.12
-Solid,Industry,46.477
-Thermal generation,Electricity grid,525.531
-Thermal generation,Losses,787.129
-Thermal generation,District heating,79.329
-Tidal,Electricity grid,9.452
-UK land based bioenergy,Bio-conversion,182.01
-Wave,Electricity grid,19.013
-Wind,Electricity grid,289.366`,
-    },
-  ],
-} satisfies DiagramMetadata;

packages/examples/src/examples/sequence.ts

@@ -1,18 +0,0 @@
-import type { DiagramMetadata } from '../types.js';
-
-export default {
-  id: 'sequence',
-  name: 'Sequence Diagram',
-  description: 'Visualize interactions between objects over time',
-  examples: [
-    {
-      title: 'Basic Sequence',
-      isDefault: true,
-      code: `sequenceDiagram
-    Alice->>+John: Hello John, how are you?
-    Alice->>+John: John, can you hear me?
-    John-->>-Alice: Hi Alice, I can hear you!
-    John-->>-Alice: I feel great!`,
-    },
-  ],
-} satisfies DiagramMetadata;

packages/examples/src/examples/state.ts

@@ -1,20 +0,0 @@
-import type { DiagramMetadata } from '../types.js';
-
-export default {
-  id: 'stateDiagram',
-  name: 'State Diagram',
-  description: 'Visualize the states and transitions of a system',
-  examples: [
-    {
-      title: 'Basic State Diagram',
-      code: `stateDiagram-v2
-    [*] --> Still
-    Still --> [*]
-    Still --> Moving
-    Moving --> Still
-    Moving --> Crash
-    Crash --> [*]`,
-      isDefault: true,
-    },
-  ],
-} satisfies DiagramMetadata;

packages/examples/src/examples/timeline.ts

@@ -1,20 +0,0 @@
-import type { DiagramMetadata } from '../types.js';
-
-export default {
-  id: 'timeline',
-  name: 'Timeline Diagram',
-  description: 'Visualize events and milestones in chronological order',
-  examples: [
-    {
-      title: 'Project Timeline',
-      isDefault: true,
-      code: `timeline
-    title History of Social Media Platform
-    2002 : LinkedIn
-    2004 : Facebook
-         : Google
-    2005 : YouTube
-    2006 : Twitter`,
-    },
-  ],
-} satisfies DiagramMetadata;