Dummy Commit

2025-08-19 16:26:43 +02:00 · 2025-07-10 01:02:11 +05:30
166 changed files with 4385 additions and 9941 deletions
--- a/.changeset/beige-peas-shave.md
+++ b/.changeset/beige-peas-shave.md
@@ -1,5 +0,0 @@
---
-'@mermaid-js/mermaid-zenuml': patch
---
-
-Fixed a critical bug that the ZenUML diagram is not rendered.
--- a/.changeset/chatty-lemons-stick.md
+++ b/.changeset/chatty-lemons-stick.md
@@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-chore: Remove the "-beta" suffix from the XYChart, Block, Sankey diagrams to reflect their stable status
--- a/.changeset/cold-sites-accept.md
+++ b/.changeset/cold-sites-accept.md
@@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-fix: Position the edge label in state diagram correctly relative to the edge
--- a/.changeset/empty-clouds-cry.md
+++ b/.changeset/empty-clouds-cry.md
@@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-fix: Apply correct dateFormat in Gantt chart to show only day when specified
--- a/.changeset/fuzzy-pears-cough.md
+++ b/.changeset/fuzzy-pears-cough.md
@@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-fix: handle exclude dates properly in Gantt charts when using dateFormat: 'YYYY-MM-DD HH:mm:ss'
--- a/.changeset/gold-olives-rule.md
+++ b/.changeset/gold-olives-rule.md
@@ -0,0 +1,5 @@
+---
+'mermaid': minor
+---
+
+feat: Add `getRegisteredDiagramsMetadata` to `mermaid`, which returns all the registered diagram IDs in mermaid
--- a/.changeset/gold-spiders-join.md
+++ b/.changeset/gold-spiders-join.md
@@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-fix: fixed connection gaps in flowchart for roundedRect, stadium and diamond shape
--- a/.changeset/large-mirrors-cheer.md
+++ b/.changeset/large-mirrors-cheer.md
@@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-fix: Update casing of ID in requirement diagram
--- a/.changeset/lemon-masks-unite.md
+++ b/.changeset/lemon-masks-unite.md
@@ -1,5 +0,0 @@
---
-'mermaid': minor
---
-
-feat: Added support for per link curve styling in flowchart diagram using edge ids
--- a/.changeset/light-flowers-judge.md
+++ b/.changeset/light-flowers-judge.md
@@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-fix: Make flowchart elk detector regex match less greedy
--- a/.changeset/lovely-queens-own.md
+++ b/.changeset/lovely-queens-own.md
@@ -1,8 +0,0 @@
---
-'mermaid': patch
---
-
-fix(block): overflowing blocks no longer affect later lines
-
-This may change the layout of block diagrams that have overflowing lines
-(i.e. block diagrams that use up more columns that the `columns` specifier).
--- a/.changeset/ninety-roses-turn.md
+++ b/.changeset/ninety-roses-turn.md
@@ -1,7 +0,0 @@
---
-'mermaid': patch
---
-
-fix: log warning for blocks exceeding column width
-
-This update adds a validation check that logs a warning message when a block's width exceeds the defined column layout.
--- a/.changeset/platinum-olives-rule.md
+++ b/.changeset/platinum-olives-rule.md
@@ -0,0 +1,5 @@
+---
+'@mermaid-js/examples': minor
+---
+
+feat: Add examples for diagrams in the `@mermaid-js/examples` package
--- a/.changeset/rare-women-fly.md
+++ b/.changeset/rare-women-fly.md
@@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-fix: Add escaped class literal name on namespace
--- a/.changeset/seven-papayas-film.md
+++ b/.changeset/seven-papayas-film.md
@@ -1,9 +0,0 @@
---
-'mermaid': patch
---
-
-Add validation for negative values in pie charts:
-
-Prevents crashes during parsing by validating values post-parsing.
-
-Provides clearer, user-friendly error messages for invalid negative inputs.
--- a/.changeset/silver-eyes-build.md
+++ b/.changeset/silver-eyes-build.md
@@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-chore: migrate to class-based ArchitectureDB implementation
--- a/.changeset/six-planets-rescue.md
+++ b/.changeset/six-planets-rescue.md
@@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-fix: node border style for handdrawn shapes
--- a/.changeset/smart-humans-cover.md
+++ b/.changeset/smart-humans-cover.md
@@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-fix: Update flowchart direction TD's behavior to be the same as TB
--- a/.changeset/strong-dryers-pay.md
+++ b/.changeset/strong-dryers-pay.md
@@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-fix: correctly render non-directional lines for '---' in block diagrams
--- a/.changeset/vast-buses-see.md
+++ b/.changeset/vast-buses-see.md
@@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-chore: Update packet diagram to use new class-based database structure
--- a/.github/lychee.toml
+++ b/.github/lychee.toml
@@ -52,9 +52,6 @@ exclude = [
 # 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",
--- a/.github/workflows/autofix.yml
+++ b/.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
--- a/.github/workflows/e2e-timings.yml
+++ b/.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
--- a/.github/workflows/pr-labeler.yml
+++ b/.github/workflows/pr-labeler.yml
@@ -42,7 +42,7 @@ jobs:
              pull_number: prNumber,
            });

-            const isSponsored = commits.every(
+            const isSponsored = commits.some(
              (c) => c.commit.author.email?.endsWith('@mermaidchart.com')
            );

--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1 +0,0 @@
-./packages/mermaid/CHANGELOG.md
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
--- a/mocks/d3.ts
+++ b/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';
--- a/cypress.config.ts
+++ b/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);
        }
--- a/cypress/integration/rendering/block.spec.js
+++ b/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
-`,
-      {}
-    );
-  });
 });
--- a/cypress/integration/rendering/classDiagram.spec.js
+++ 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\`
-      `,
-      {}
-    );
-  });
 });
--- a/cypress/integration/rendering/erDiagram.spec.js
+++ b/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' } }
-      );
-    });
-  });
 });
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -1113,55 +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 }
-      `
-    );
-  });
 });
--- a/cypress/integration/rendering/gantt.spec.js
+++ b/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(
      `
--- a/cypress/integration/rendering/mindmap.spec.ts
+++ b/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 */
 });
--- a/cypress/integration/rendering/packet.spec.ts
+++ b/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"
--- a/cypress/integration/rendering/pie.spec.ts
+++ b/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
-      `
-    );
-  });
 });
--- a/cypress/integration/rendering/sankey.spec.ts
+++ b/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
--- a/cypress/integration/rendering/sequencediagram.spec.js
+++ b/cypress/integration/rendering/sequencediagram.spec.js
@@ -1042,167 +1042,4 @@ describe('Sequence diagram', () => {
      ]);
    });
  });
-  describe('render new arrow type', () => {
-    it('should render Solid half arrow top', () => {
-      imgSnapshotTest(
-        `
-    sequenceDiagram
-      Alice -|\\  John: Hello John, how are you? 
-      Alice-|\\  John: Hi Alice, I can hear you!
-      Alice -|\\  John: Test
-      `
-      );
-    });
-    it('should render Solid half arrow bottom', () => {
-      imgSnapshotTest(
-        `
-    sequenceDiagram
-      Alice-|/John: Hello John, how are you?
-      Alice-|/John: Hi Alice, I can hear you!
-      Alice-|/John: Test
-      `
-      );
-    });
-
-    it('should render Stick half arrow top ', () => {
-      imgSnapshotTest(
-        `
-     sequenceDiagram
-      Alice-\\\\John: Hello John, how are you?
-      Alice-\\\\John: Hi Alice, I can hear you!
-      Alice-\\\\John: Test
-      `
-      );
-    });
-    it('should render Stick half arrow bottom ', () => {
-      imgSnapshotTest(
-        `
-       sequenceDiagram
-      Alice-//John: Hello John, how are you?
-      Alice-//John: Hi Alice, I can hear you!
-      Alice-//John: Test
-      `
-      );
-    });
-    it('should render Solid half arrow top reverse ', () => {
-      imgSnapshotTest(
-        `
-       sequenceDiagram
-      Alice/|-John: Hello Alice, how are you?
-      Alice/|-John: Hi Alice, I can hear you!
-      Alice/|-John: Test
-
-      `
-      );
-    });
-
-    it('should render Solid half arrow bottom reverse ', () => {
-      imgSnapshotTest(
-        `sequenceDiagram
-        Alice \\|- John: Hello Alice, how are you?
-        Alice \\|- John: Hi Alice, I can hear you!
-        Alice \\|- John: Test`
-      );
-    });
-
-    it('should render Stick half arrow top reverse ', () => {
-      imgSnapshotTest(
-        `
-      sequenceDiagram
-      Alice //-John: Hello Alice, how are you?
-      Alice //-John: Hi Alice, I can hear you!
-      Alice //-John: Test`
-      );
-    });
-
-    it('should render Stick half arrow bottom reverse ', () => {
-      imgSnapshotTest(
-        `
-       sequenceDiagram
-      Alice \\\\-John: Hello Alice, how are you?
-      Alice \\\\-John: Hi Alice, I can hear you!
-      Alice \\\\-John: Test`
-      );
-    });
-
-    it('should render Solid half arrow top dotted', () => {
-      imgSnapshotTest(
-        `
-     sequenceDiagram
-      Alice --|\\John: Hello John, how are you?
-      Alice --|\\John: Hi Alice, I can hear you!
-      Alice --|\\John: Test`
-      );
-    });
-
-    it('should render Solid half arrow bottom dotted', () => {
-      imgSnapshotTest(
-        `
-     sequenceDiagram
-      Alice --|/John: Hello John, how are you?
-      Alice --|/John: Hi Alice, I can hear you!
-      Alice --|/John: Test`
-      );
-    });
-
-    it('should render Stick half arrow top dotted', () => {
-      imgSnapshotTest(
-        `
-     sequenceDiagram
-      Alice--\\\\John: Hello John, how are you?
-      Alice--\\\\John: Hi Alice, I can hear you!
-      Alice--\\\\John: Test`
-      );
-    });
-
-    it('should render Stick half arrow bottom dotted', () => {
-      imgSnapshotTest(
-        `
-     sequenceDiagram
-      Alice--//John: Hello John, how are you?
-      Alice--//John: Hi Alice, I can hear you!
-      Alice--//John: Test`
-      );
-    });
-
-    it('should render Solid half arrow top reverse dotted', () => {
-      imgSnapshotTest(
-        `
-  sequenceDiagram
-      Alice/|--John: Hello Alice, how are you?
-      Alice/|--John: Hi Alice, I can hear you!
-      Alice/|--John: Test`
-      );
-    });
-
-    it('should render Solid half arrow bottom reverse dotted', () => {
-      imgSnapshotTest(
-        `
-  sequenceDiagram
-      Alice\\|--John: Hello Alice, how are you?
-      Alice\\|--John: Hi Alice, I can hear you!
-      Alice\\|--John: Test`
-      );
-    });
-
-    it('should render Stick half arrow top reverse dotted ', () => {
-      imgSnapshotTest(
-        `
-  sequenceDiagram
-      Alice//--John: Hello Alice, how are you?
-      Alice//--John: Hi Alice, I can hear you!
-      Alice//--John: Test`
-      );
-    });
-
-    it('should render Stick half arrow bottom reverse dotted ', () => {
-      imgSnapshotTest(
-        `
-  sequenceDiagram
-      Alice\\\\--John: Hello Alice, how are you?
-      Alice\\\\--John: Hi Alice, I can hear you!
-      Alice\\\\--John: Test`
-      );
-    });
-  });
 });
--- a/cypress/integration/rendering/stateDiagram-v2.spec.js
+++ b/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_____
 `,
      {}
    );
--- a/cypress/integration/rendering/xyChart.spec.js
+++ b/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
--- a/cypress/platform/darshan.html
+++ b/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>
--- a/demos/block.html
+++ b/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
--- a/demos/er-multiline.html
+++ b/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"
--- a/demos/packet.html
+++ b/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"
--- a/demos/sankey.html
+++ b/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
--- a/demos/xychart.html
+++ b/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
--- a/docs/community/contributing.md
+++ b/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.
--- a/docs/config/setup/mermaid/interfaces/ParseOptions.md
+++ b/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.
--- a/docs/config/setup/mermaid/interfaces/ParseResult.md
+++ b/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.
--- a/docs/config/setup/mermaid/interfaces/RenderResult.md
+++ b/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.
--- a/docs/diagrams/flowchart-code-flow.mmd
+++ b/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"]
--- a/docs/diagrams/mermaid-api-sequence.mmd
+++ b/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() 
--- a/docs/diagrams/mindmap-implementation-sequence.mmd
+++ b/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 
--- a/docs/ecosystem/integrations-community.md
+++ b/docs/ecosystem/integrations-community.md
@@ -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

--- a/docs/ecosystem/integrations-create.md
+++ b/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

--- a/docs/syntax/block.md
+++ b/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;

--- a/docs/syntax/flowchart.md
+++ b/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 (v\<MERMAID_RELEASE_VERSION>+)
-
-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

--- a/docs/syntax/packet.md
+++ b/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"
--- a/docs/syntax/pie.md
+++ b/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]
--- a/docs/syntax/sankey.md
+++ b/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
--- a/docs/syntax/sequenceDiagram.md
+++ b/docs/syntax/sequenceDiagram.md
@@ -209,11 +209,7 @@ Messages can be of two displayed either solid or with a dotted line.
 [Actor][Arrow][Actor]:Message text
 ```

-Lines can be solid or dotted, and can end with various types of arrowheads, crosses, or open arrows.
-
-#### Supported Arrow Types
-
-**Standard Arrow Types**
+There are ten types of arrows currently supported:

 | Type     | Description                                          |
 | -------- | ---------------------------------------------------- |
@@ -228,58 +224,6 @@ Lines can be solid or dotted, and can end with various types of arrowheads, cros
 | `-)`     | Solid line with an open arrow at the end (async)     |
 | `--)`    | Dotted line with a open arrow at the end (async)     |

-**Half-Arrows**
-
-The following half-arrow types are now supported for more expressive sequence diagrams. Both solid and dotted variants are available by increasing the number of dashes (`-` → `--`).
-
---
-
-| Type    | Description                                          |
-| ------- | ---------------------------------------------------- |
-| `-\|\`  | Solid line with top half arrowhead                   |
-| `--\|\` | Dotted line with top half arrowhead                  |
-| `-\|/`  | Solid line with bottom half arrowhead                |
-| `--\|/` | Dotted line with bottom half arrowhead               |
-| `/\|-`  | Solid line with reverse top half arrowhead           |
-| `/\|--` | Dotted line with reverse top half arrowhead          |
-| `\\-`   | Solid line with reverse bottom half arrowhead        |
-| `\\--`  | Dotted line with reverse bottom half arrowhead       |
-| `-\\`   | Solid line with top stick half arrowhead             |
-| `--\\`  | Dotted line with top stick half arrowhead            |
-| `-//`   | Solid line with bottom stick half arrowhead          |
-| `--//`  | Dotted line with bottom stick half arrowhead         |
-| `//-`   | Solid line with reverse top stick half arrowhead     |
-| `//--`  | Dotted line with reverse top stick half arrowhead    |
-| `\\-`   | Solid line with reverse bottom stick half arrowhead  |
-| `\\--`  | Dotted line with reverse bottom stick half arrowhead |
-
-## Central Connections
-
-Mermaid sequence diagrams now support **central lifeline connections** using a `()`.\
-This is useful to represent messages or signals that connect to a central point, rather than from one actor directly to another.
-
-To indicate a central connection, append `()` to the arrow syntax.
-
-#### Basic Syntax
-
-```mermaid-example
-sequenceDiagram
-    participant Alice
-    participant John
-    Alice->>()John: Hello John
-    Alice()->>John: How are you?
-    John()->>()Alice: Great!
-```
-
-```mermaid
-sequenceDiagram
-    participant Alice
-    participant John
-    Alice->>()John: Hello John
-    Alice()->>John: How are you?
-    John()->>()Alice: Great!
-```
-
 ## Activations

 It is possible to activate and deactivate an actor. (de)activation can be dedicated declarations:
--- a/docs/syntax/xyChart.md
+++ b/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
--- a/dummy.txt
+++ b/dummy.txt
--- a/package.json
+++ b/package.json
@@ -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",
@@ -88,46 +88,46 @@
    "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"
    ]
  }
 }
--- a/packages/examples/CHANGELOG.md
+++ b/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
--- a/packages/examples/README.md
+++ b/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;
-};
-```
--- a/packages/examples/package.json
+++ b/packages/examples/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@mermaid-js/examples",
-  "version": "1.0.0",
+  "version": "0.0.1-beta.1",
  "description": "Mermaid examples package",
  "author": "Sidharth Vinod",
  "type": "module",
@@ -16,10 +16,6 @@
  "files": [
    "dist"
  ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/mermaid-js/mermaid"
-  },
  "scripts": {
    "clean": "rimraf dist"
  },
--- a/packages/examples/src/examples/packet.ts
+++ b/packages/examples/src/examples/packet.ts
@@ -11,7 +11,7 @@ export default {
      code: `---
 title: "TCP Packet"
 ---
-packet
+packet-beta
 0-15: "Source Port"
 16-31: "Destination Port"
 32-63: "Sequence Number"
--- a/packages/mermaid-zenuml/README.md
+++ b/packages/mermaid-zenuml/README.md
@@ -1,384 +0,0 @@
-# @mermaid-js/mermaid-zenuml
-
-MermaidJS plugin for ZenUML integration - A powerful sequence diagram rendering engine.
-
-> A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.
-
-Mermaid can render sequence diagrams with [ZenUML](https://zenuml.com). Note that ZenUML uses a different
-syntax than the original Sequence Diagram in mermaid.
-
-```mermaid
-zenuml
-    BookLibService.Borrow(id) {
-      User = Session.GetUser()
-      if(User.isActive) {
-        try {
-          BookRepository.Update(id, onLoan, User)
-          receipt = new Receipt(id, dueDate)
-        } catch (BookNotFoundException) {
-          ErrorService.onException(BookNotFoundException)
-        } finally {
-          Connection.close()
-        }
-      }
-      return receipt
-    }
-```
-
-## Installation
-
-### With bundlers
-
-```sh
-npm install @mermaid-js/mermaid-zenuml
-```
-
-```ts
-import mermaid from 'mermaid';
-import zenuml from '@mermaid-js/mermaid-zenuml';
-
-await mermaid.registerExternalDiagrams([zenuml]);
-```
-
-### With CDN
-
-```html
-<script type="module">
-  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
-  import zenuml from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-zenuml@0.2.0/dist/mermaid-zenuml.core.mjs';
-  await mermaid.registerExternalDiagrams([zenuml]);
-</script>
-```
-
-> [!NOTE]  
-> ZenUML uses experimental lazy loading & async rendering features which could change in the future.
-
-## Basic Usage
-
-Once the plugin is registered, you can create ZenUML diagrams using the `zenuml` syntax:
-
-```mermaid
-zenuml
-    Controller.Get(id) {
-        Service.Get(id) {
-            item = Repository.Get(id)
-            if(item) {
-                return item
-            } else {
-                return null
-            }
-        }
-        return result
-    }
-```
-
-## ZenUML Syntax Reference
-
-### Participants
-
-The participants can be defined implicitly as in the first example on this page. The participants or actors are
-rendered in order of appearance in the diagram source text. Sometimes you might want to show the participants in a
-different order than how they appear in the first message. It is possible to specify the actor's order of
-appearance by doing the following:
-
-```mermaid
-zenuml
-    title Declare participant (optional)
-    Bob
-    Alice
-    Alice->Bob: Hi Bob
-    Bob->Alice: Hi Alice
-```
-
-### Annotators
-
-If you specifically want to use symbols instead of just rectangles with text you can do so by using the annotator syntax to declare participants as per below.
-
-```mermaid
-zenuml
-    title Annotators
-    @Actor Alice
-    @Database Bob
-    Alice->Bob: Hi Bob
-    Bob->Alice: Hi Alice
-```
-
-Available annotators include:
-
- `@Actor` - Human figure
- `@Database` - Database symbol
- `@Boundary` - Boundary symbol
- `@Control` - Control symbol
- `@Entity` - Entity symbol
- `@Queue` - Queue symbol
-
-### Aliases
-
-The participants can have a convenient identifier and a descriptive label.
-
-```mermaid
-zenuml
-    title Aliases
-    A as Alice
-    J as John
-    A->J: Hello John, how are you?
-    J->A: Great!
-```
-
-## Messages
-
-Messages can be one of:
-
-1. Sync message
-2. Async message
-3. Creation message
-4. Reply message
-
-### Sync message
-
-You can think of a sync (blocking) method in a programming language.
-
-```mermaid
-zenuml
-    title Sync message
-    A.SyncMessage
-    A.SyncMessage(with, parameters) {
-      B.nestedSyncMessage()
-    }
-```
-
-### Async message
-
-You can think of an async (non-blocking) method in a programming language. Fire an event and forget about it.
-
-```mermaid
-zenuml
-    title Async message
-    Alice->Bob: How are you?
-```
-
-### Creation message
-
-We use `new` keyword to create an object.
-
-```mermaid
-zenuml
-    new A1
-    new A2(with, parameters)
-```
-
-### Reply message
-
-There are three ways to express a reply message:
-
-```mermaid
-zenuml
-    // 1. assign a variable from a sync message.
-    a = A.SyncMessage()
-
-    // 1.1. optionally give the variable a type
-    SomeType a = A.SyncMessage()
-
-    // 2. use return keyword
-    A.SyncMessage() {
-    return result
-    }
-
-    // 3. use @return or @reply annotator on an async message
-    @return
-    A->B: result
-```
-
-The third way `@return` is rarely used, but it is useful when you want to return to one level up.
-
-```mermaid
-zenuml
-    title Reply message
-    Client->A.method() {
-      B.method() {
-        if(condition) {
-          return x1
-          // return early
-          @return
-          A->Client: x11
-        }
-      }
-      return x2
-    }
-```
-
-## Advanced Features
-
-### Nesting
-
-Sync messages and Creation messages are naturally nestable with `{}`.
-
-```mermaid
-zenuml
-    A.method() {
-      B.nested_sync_method()
-      B->C: nested async message
-    }
-```
-
-### Comments
-
-It is possible to add comments to a sequence diagram with `// comment` syntax.
-Comments will be rendered above the messages or fragments. Comments on other places
-are ignored. Markdown is supported.
-
-```mermaid
-zenuml
-    // a comment on a participant will not be rendered
-    BookService
-    // a comment on a message.
-    // **Markdown** is supported.
-    BookService.getBook()
-```
-
-### Loops
-
-It is possible to express loops in a ZenUML diagram. This is done by any of the
-following notations:
-
-1. while
-2. for
-3. forEach, foreach
-4. loop
-
-```zenuml
-while(condition) {
-    ...statements...
-}
-```
-
-Example:
-
-```mermaid
-zenuml
-    Alice->John: Hello John, how are you?
-    while(true) {
-      John->Alice: Great!
-    }
-```
-
-### Alt (Alternative paths)
-
-It is possible to express alternative paths in a sequence diagram. This is done by the notation
-
-```zenuml
-if(condition1) {
-    ...statements...
-} else if(condition2) {
-    ...statements...
-} else {
-    ...statements...
-}
-```
-
-Example:
-
-```mermaid
-zenuml
-    Alice->Bob: Hello Bob, how are you?
-    if(is_sick) {
-      Bob->Alice: Not so good :(
-    } else {
-      Bob->Alice: Feeling fresh like a daisy
-    }
-```
-
-### Opt (Optional)
-
-It is possible to render an `opt` fragment. This is done by the notation
-
-```zenuml
-opt {
-  ...statements...
-}
-```
-
-Example:
-
-```mermaid
-zenuml
-    Alice->Bob: Hello Bob, how are you?
-    Bob->Alice: Not so good :(
-    opt {
-      Bob->Alice: Thanks for asking
-    }
-```
-
-### Parallel
-
-It is possible to show actions that are happening in parallel.
-
-This is done by the notation
-
-```zenuml
-par {
-  statement1
-  statement2
-  statement3
-}
-```
-
-Example:
-
-```mermaid
-zenuml
-    par {
-        Alice->Bob: Hello guys!
-        Alice->John: Hello guys!
-    }
-```
-
-### Try/Catch/Finally (Break)
-
-It is possible to indicate a stop of the sequence within the flow (usually used to model exceptions).
-
-This is done by the notation
-
-```
-try {
-  ...statements...
-} catch {
-  ...statements...
-} finally {
-  ...statements...
-}
-```
-
-Example:
-
-```mermaid
-zenuml
-    try {
-      Consumer->API: Book something
-      API->BookingService: Start booking process
-    } catch {
-      API->Consumer: show failure
-    } finally {
-      API->BookingService: rollback status
-    }
-```
-
-## Contributing
-
-This package is part of the [Mermaid](https://github.com/mermaid-js/mermaid) project. See the main repository for contributing guidelines.
-
-## Contributors
-
- [Peng Xiao](https://github.com/MrCoder)
- [Sidharth Vinod](https://sidharth.dev)
- [Dong Cai](https://github.com/dontry)
-
-## License
-
-MIT
-
-## Links
-
- [ZenUML Official Website](https://zenuml.com)
- [Mermaid Documentation](https://mermaid.js.org)
- [GitHub Repository](https://github.com/mermaid-js/mermaid)
--- a/packages/mermaid-zenuml/README.md
+++ b/packages/mermaid-zenuml/README.md
@@ -0,0 +1 @@
+../mermaid/src/docs/syntax/zenuml.md
--- a/packages/mermaid-zenuml/package.json
+++ b/packages/mermaid-zenuml/package.json
@@ -33,7 +33,7 @@
  ],
  "license": "MIT",
  "dependencies": {
-    "@zenuml/core": "^3.35.2"
+    "@zenuml/core": "^3.31.1"
  },
  "devDependencies": {
    "mermaid": "workspace:^"
--- a/packages/mermaid-zenuml/src/zenuml.d.ts
+++ b/packages/mermaid-zenuml/src/zenuml.d.ts
@@ -1,11 +0,0 @@
-declare module '@zenuml/core' {
-  interface RenderOptions {
-    theme?: string;
-    mode?: string;
-  }
-
-  export default class ZenUml {
-    constructor(container: Element);
-    render(text: string, options?: RenderOptions): Promise<void>;
-  }
-}
--- a/packages/mermaid-zenuml/src/zenumlRenderer.ts
+++ b/packages/mermaid-zenuml/src/zenumlRenderer.ts
@@ -53,6 +53,7 @@ export const draw = async function (text: string, id: string) {

  const { foreignObject, container, app } = createForeignObject(id);
  svgContainer.appendChild(foreignObject);
+  // @ts-expect-error @zenuml/core@3.0.0 exports the wrong type for ZenUml
  const zenuml = new ZenUml(app);
  // default is a theme name. More themes to be added and will be configurable in the future
  await zenuml.render(text, { theme: 'default', mode: 'static' });
--- a/packages/mermaid/CHANGELOG.md
+++ b/packages/mermaid/CHANGELOG.md
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -1,6 +1,6 @@
 {
  "name": "mermaid",
-  "version": "11.9.0",
+  "version": "11.8.1",
  "description": "Markdown-ish syntax for generating flowcharts, mindmaps, sequence diagrams, class diagrams, gantt charts, git graphs and more.",
  "type": "module",
  "module": "./dist/mermaid.core.mjs",
@@ -79,10 +79,10 @@
    "dagre-d3-es": "7.0.11",
    "dayjs": "^1.11.13",
    "dompurify": "^3.2.5",
-    "katex": "^0.16.22",
+    "katex": "^0.16.9",
    "khroma": "^2.1.0",
    "lodash-es": "^4.17.21",
-    "marked": "^16.0.0",
+    "marked": "^15.0.7",
    "roughjs": "^4.6.6",
    "stylis": "^4.3.6",
    "ts-dedent": "^2.2.0",
@@ -105,14 +105,13 @@
    "@types/stylis": "^4.2.7",
    "@types/uuid": "^10.0.0",
    "ajv": "^8.17.1",
-    "canvas": "^3.1.0",
    "chokidar": "3.6.0",
    "concurrently": "^9.1.2",
    "csstree-validator": "^4.0.1",
    "globby": "^14.0.2",
    "jison": "^0.4.18",
    "js-base64": "^3.7.7",
-    "jsdom": "^26.1.0",
+    "jsdom": "^26.0.0",
    "json-schema-to-typescript": "^15.0.4",
    "micromatch": "^4.0.8",
    "path-browserify": "^1.0.1",
--- a/packages/mermaid/src/accessibility.spec.ts
+++ b/packages/mermaid/src/accessibility.spec.ts
@@ -1,25 +1,28 @@
-import { addSVGa11yTitleDescription, setA11yDiagramInfo } from './accessibility.js';
-import { ensureNodeFromSelector, jsdomIt } from './tests/util.js';
-import { expect } from 'vitest';
+import { MockedD3 } from './tests/MockedD3.js';
+import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility.js';
+import type { D3Element } from './types.js';

 describe('accessibility', () => {
+  const fauxSvgNode: MockedD3 = new MockedD3();
+
  describe('setA11yDiagramInfo', () => {
-    jsdomIt('should set svg element role to "graphics-document document"', ({ svg }) => {
-      setA11yDiagramInfo(svg, 'flowchart');
-      const svgNode = ensureNodeFromSelector('svg');
-      expect(svgNode.getAttribute('role')).toBe('graphics-document document');
+    it('should set svg element role to "graphics-document document"', () => {
+      const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
+      setA11yDiagramInfo(fauxSvgNode, 'flowchart');
+      expect(svgAttrSpy).toHaveBeenCalledWith('role', 'graphics-document document');
    });

-    jsdomIt('should set aria-roledescription to the diagram type', ({ svg }) => {
-      setA11yDiagramInfo(svg, 'flowchart');
-      const svgNode = ensureNodeFromSelector('svg');
-      expect(svgNode.getAttribute('aria-roledescription')).toBe('flowchart');
+    it('should set aria-roledescription to the diagram type', () => {
+      const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
+      setA11yDiagramInfo(fauxSvgNode, 'flowchart');
+      expect(svgAttrSpy).toHaveBeenCalledWith('aria-roledescription', 'flowchart');
    });

-    jsdomIt('should not set aria-roledescription if the diagram type is empty', ({ svg }) => {
-      setA11yDiagramInfo(svg, '');
-      const svgNode = ensureNodeFromSelector('svg');
-      expect(svgNode.getAttribute('aria-roledescription')).toBeNull();
+    it('should not set aria-roledescription if the diagram type is empty', () => {
+      const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
+      setA11yDiagramInfo(fauxSvgNode, '');
+      expect(svgAttrSpy).toHaveBeenCalledTimes(1);
+      expect(svgAttrSpy).toHaveBeenCalledWith('role', expect.anything()); // only called to set the role
    });
  });

@@ -36,78 +39,115 @@ describe('accessibility', () => {
        expect(noInsertAttrSpy).not.toHaveBeenCalled();
      });

+      // convenience functions to DRY up the spec
+
+      function expectAriaLabelledByItTitleId(
+        svgD3Node: D3Element,
+        title: string | undefined,
+        desc: string | undefined,
+        givenId: string
+      ): void {
+        const svgAttrSpy = vi.spyOn(svgD3Node, 'attr').mockReturnValue(svgD3Node);
+        addSVGa11yTitleDescription(svgD3Node, title, desc, givenId);
+        expect(svgAttrSpy).toHaveBeenCalledWith('aria-labelledby', `chart-title-${givenId}`);
+      }
+
+      function expectAriaDescribedByItDescId(
+        svgD3Node: D3Element,
+        title: string | undefined,
+        desc: string | undefined,
+        givenId: string
+      ): void {
+        const svgAttrSpy = vi.spyOn(svgD3Node, 'attr').mockReturnValue(svgD3Node);
+        addSVGa11yTitleDescription(svgD3Node, title, desc, givenId);
+        expect(svgAttrSpy).toHaveBeenCalledWith('aria-describedby', `chart-desc-${givenId}`);
+      }
+
+      function a11yTitleTagInserted(
+        svgD3Node: D3Element,
+        title: string | undefined,
+        desc: string | undefined,
+        givenId: string,
+        callNumber: number
+      ): void {
+        a11yTagInserted(svgD3Node, title, desc, givenId, callNumber, 'title', title);
+      }
+
+      function a11yDescTagInserted(
+        svgD3Node: D3Element,
+        title: string | undefined,
+        desc: string | undefined,
+        givenId: string,
+        callNumber: number
+      ): void {
+        a11yTagInserted(svgD3Node, title, desc, givenId, callNumber, 'desc', desc);
+      }
+
+      function a11yTagInserted(
+        _svgD3Node: D3Element,
+        title: string | undefined,
+        desc: string | undefined,
+        givenId: string,
+        callNumber: number,
+        expectedPrefix: string,
+        expectedText: string | undefined
+      ): void {
+        const fauxInsertedD3: MockedD3 = new MockedD3();
+        const svginsertpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxInsertedD3);
+        const titleAttrSpy = vi.spyOn(fauxInsertedD3, 'attr').mockReturnValue(fauxInsertedD3);
+        const titleTextSpy = vi.spyOn(fauxInsertedD3, 'text');
+
+        addSVGa11yTitleDescription(fauxSvgNode, title, desc, givenId);
+        expect(svginsertpy).toHaveBeenCalledWith(expectedPrefix, ':first-child');
+        expect(titleAttrSpy).toHaveBeenCalledWith('id', `chart-${expectedPrefix}-${givenId}`);
+        expect(titleTextSpy).toHaveBeenNthCalledWith(callNumber, expectedText);
+      }
+
      describe('with a11y title', () => {
        const a11yTitle = 'a11y title';

        describe('with a11y description', () => {
          const a11yDesc = 'a11y description';

-          jsdomIt('should set aria-labelledby to the title id inserted as a child', ({ svg }) => {
-            addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId);
-            const svgNode = ensureNodeFromSelector('svg');
-            expect(svgNode.getAttribute('aria-labelledby')).toBe(`chart-title-${givenId}`);
+          it('should set aria-labelledby to the title id inserted as a child', () => {
+            expectAriaLabelledByItTitleId(fauxSvgNode, a11yTitle, a11yDesc, givenId);
          });

-          jsdomIt(
-            'should set aria-describedby to the description id inserted as a child',
-            ({ svg }) => {
-              addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId);
-              const svgNode = ensureNodeFromSelector('svg');
-              expect(svgNode.getAttribute('aria-describedby')).toBe(`chart-desc-${givenId}`);
-            }
-          );
+          it('should set aria-describedby to the description id inserted as a child', () => {
+            expectAriaDescribedByItDescId(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+          });

-          jsdomIt(
-            'should insert title tag as the first child with the text set to the accTitle given',
-            ({ svg }) => {
-              addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId);
-              const svgNode = ensureNodeFromSelector('svg');
-              const titleNode = ensureNodeFromSelector('title', svgNode);
-              expect(titleNode?.innerHTML).toBe(a11yTitle);
-            }
-          );
+          it('should insert title tag as the first child with the text set to the accTitle given', () => {
+            a11yTitleTagInserted(fauxSvgNode, a11yTitle, a11yDesc, givenId, 2);
+          });

-          jsdomIt(
-            'should insert desc tag as the 2nd child with the text set to accDescription given',
-            ({ svg }) => {
-              addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId);
-              const svgNode = ensureNodeFromSelector('svg');
-              const descNode = ensureNodeFromSelector('desc', svgNode);
-              expect(descNode?.innerHTML).toBe(a11yDesc);
-            }
-          );
+          it('should insert desc tag as the 2nd child with the text set to accDescription given', () => {
+            a11yDescTagInserted(fauxSvgNode, a11yTitle, a11yDesc, givenId, 1);
+          });
        });

-        describe(`without a11y description`, {}, () => {
+        describe(`without a11y description`, () => {
          const a11yDesc = undefined;

-          jsdomIt('should set aria-labelledby to the title id inserted as a child', ({ svg }) => {
-            addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId);
-            const svgNode = ensureNodeFromSelector('svg');
-            expect(svgNode.getAttribute('aria-labelledby')).toBe(`chart-title-${givenId}`);
+          it('should set aria-labelledby to the title id inserted as a child', () => {
+            expectAriaLabelledByItTitleId(fauxSvgNode, a11yTitle, a11yDesc, givenId);
          });

-          jsdomIt('should not set aria-describedby', ({ svg }) => {
-            addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId);
-            const svgNode = ensureNodeFromSelector('svg');
-            expect(svgNode.getAttribute('aria-describedby')).toBeNull();
+          it('should not set aria-describedby', () => {
+            const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
+            addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+            expect(svgAttrSpy).not.toHaveBeenCalledWith('aria-describedby', expect.anything());
          });

-          jsdomIt(
-            'should insert title tag as the first child with the text set to the accTitle given',
-            ({ svg }) => {
-              addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId);
-              const svgNode = ensureNodeFromSelector('svg');
-              const titleNode = ensureNodeFromSelector('title', svgNode);
-              expect(titleNode?.innerHTML).toBe(a11yTitle);
-            }
-          );
+          it('should insert title tag as the first child with the text set to the accTitle given', () => {
+            a11yTitleTagInserted(fauxSvgNode, a11yTitle, a11yDesc, givenId, 1);
+          });

-          jsdomIt('should not insert description tag', ({ svg }) => {
-            addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId);
-            const svgNode = ensureNodeFromSelector('svg');
-            const descNode = svgNode.querySelector('desc');
-            expect(descNode).toBeNull();
+          it('should not insert description tag', () => {
+            const fauxTitle: MockedD3 = new MockedD3();
+            const svginsertpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxTitle);
+            addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+            expect(svginsertpy).not.toHaveBeenCalledWith('desc', ':first-child');
          });
        });
      });
@@ -118,66 +158,55 @@ describe('accessibility', () => {
        describe('with a11y description', () => {
          const a11yDesc = 'a11y description';

-          jsdomIt('should not set aria-labelledby', ({ svg }) => {
-            addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId);
-            const svgNode = ensureNodeFromSelector('svg');
-            expect(svgNode.getAttribute('aria-labelledby')).toBeNull();
+          it('should not set aria-labelledby', () => {
+            const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
+            addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+            expect(svgAttrSpy).not.toHaveBeenCalledWith('aria-labelledby', expect.anything());
          });

-          jsdomIt('should not insert title tag', ({ svg }) => {
-            addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId);
-            const svgNode = ensureNodeFromSelector('svg');
-            const titleNode = svgNode.querySelector('title');
-            expect(titleNode).toBeNull();
+          it('should not insert title tag', () => {
+            const fauxTitle: MockedD3 = new MockedD3();
+            const svginsertpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxTitle);
+            addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+            expect(svginsertpy).not.toHaveBeenCalledWith('title', ':first-child');
          });

-          jsdomIt(
-            'should set aria-describedby to the description id inserted as a child',
-            ({ svg }) => {
-              addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId);
-              const svgNode = ensureNodeFromSelector('svg');
-              expect(svgNode.getAttribute('aria-describedby')).toBe(`chart-desc-${givenId}`);
-            }
-          );
+          it('should set aria-describedby to the description id inserted as a child', () => {
+            expectAriaDescribedByItDescId(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+          });

-          jsdomIt(
-            'should insert desc tag as the 2nd child with the text set to accDescription given',
-            ({ svg }) => {
-              addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId);
-              const svgNode = ensureNodeFromSelector('svg');
-              const descNode = ensureNodeFromSelector('desc', svgNode);
-              expect(descNode?.innerHTML).toBe(a11yDesc);
-            }
-          );
+          it('should insert desc tag as the 2nd child with the text set to accDescription given', () => {
+            a11yDescTagInserted(fauxSvgNode, a11yTitle, a11yDesc, givenId, 1);
+          });
        });

        describe('without a11y description', () => {
          const a11yDesc = undefined;

-          jsdomIt('should not set aria-labelledby', ({ svg }) => {
-            addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId);
-            const svgNode = ensureNodeFromSelector('svg');
-            expect(svgNode.getAttribute('aria-labelledby')).toBeNull();
+          it('should not set aria-labelledby', () => {
+            const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
+            addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+            expect(svgAttrSpy).not.toHaveBeenCalledWith('aria-labelledby', expect.anything());
          });

-          jsdomIt('should not set aria-describedby', ({ svg }) => {
-            addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId);
-            const svgNode = ensureNodeFromSelector('svg');
-            expect(svgNode.getAttribute('aria-describedby')).toBeNull();
+          it('should not set aria-describedby', () => {
+            const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
+            addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+            expect(svgAttrSpy).not.toHaveBeenCalledWith('aria-describedby', expect.anything());
          });

-          jsdomIt('should not insert title tag', ({ svg }) => {
-            addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId);
-            const svgNode = ensureNodeFromSelector('svg');
-            const titleNode = svgNode.querySelector('title');
-            expect(titleNode).toBeNull();
+          it('should not insert title tag', () => {
+            const fauxTitle: MockedD3 = new MockedD3();
+            const svginsertpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxTitle);
+            addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+            expect(svginsertpy).not.toHaveBeenCalledWith('title', ':first-child');
          });

-          jsdomIt('should not insert  description tag', ({ svg }) => {
-            addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId);
-            const svgNode = ensureNodeFromSelector('svg');
-            const descNode = svgNode.querySelector('desc');
-            expect(descNode).toBeNull();
+          it('should not insert  description tag', () => {
+            const fauxDesc: MockedD3 = new MockedD3();
+            const svginsertpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxDesc);
+            addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+            expect(svginsertpy).not.toHaveBeenCalledWith('desc', ':first-child');
          });
        });
      });
--- a/packages/mermaid/src/diagram-api/diagram-orchestration.spec.ts
+++ b/packages/mermaid/src/diagram-api/diagram-orchestration.spec.ts
@@ -78,41 +78,5 @@ describe('diagram-orchestration', () => {
      flowchart: 1 "pie" pie: 2 "pie"`)
      ).toBe('pie');
    });
-
-    it('should detect proper diagram when defaultRenderer is elk for flowchart', () => {
-      expect(
-        detectType('mindmap\n  root\n    Photograph\n      Waterfall', {
-          flowchart: { defaultRenderer: 'elk' },
-        })
-      ).toBe('mindmap');
-      expect(
-        detectType(
-          `
-          classDiagram
-            class Person {
-              +String name
-              -Int id
-              #double age
-              +Text demographicProfile
-            }
-          `,
-          { flowchart: { defaultRenderer: 'elk' } }
-        )
-      ).toBe('class');
-      expect(
-        detectType(
-          `
-          erDiagram
-            p[Photograph] {
-              varchar(12) jobId
-              date dateCreated
-            }
-          `,
-          {
-            flowchart: { defaultRenderer: 'elk' },
-          }
-        )
-      ).toBe('er');
-    });
  });
 });
--- a/packages/mermaid/src/diagrams/architecture/architecture.spec.ts
+++ b/packages/mermaid/src/diagrams/architecture/architecture.spec.ts
@@ -1,12 +1,21 @@
 import { it, describe, expect } from 'vitest';
+import { db } from './architectureDb.js';
 import { parser } from './architectureParser.js';
-import { ArchitectureDB } from './architectureDb.js';
+
+const {
+  clear,
+  getDiagramTitle,
+  getAccTitle,
+  getAccDescription,
+  getServices,
+  getGroups,
+  getEdges,
+  getJunctions,
+} = db;
+
 describe('architecture diagrams', () => {
-  let db: ArchitectureDB;
  beforeEach(() => {
-    db = new ArchitectureDB();
-    // @ts-expect-error since type is set to undefined we will have error
-    parser.parser?.yy = db;
+    clear();
  });

  describe('architecture diagram definitions', () => {
@@ -27,7 +36,7 @@ describe('architecture diagrams', () => {
    it('should handle title on the first line', async () => {
      const str = `architecture-beta title Simple Architecture Diagram`;
      await expect(parser.parse(str)).resolves.not.toThrow();
-      expect(db.getDiagramTitle()).toBe('Simple Architecture Diagram');
+      expect(getDiagramTitle()).toBe('Simple Architecture Diagram');
    });

    it('should handle title on another line', async () => {
@@ -35,7 +44,7 @@ describe('architecture diagrams', () => {
            title Simple Architecture Diagram
            `;
      await expect(parser.parse(str)).resolves.not.toThrow();
-      expect(db.getDiagramTitle()).toBe('Simple Architecture Diagram');
+      expect(getDiagramTitle()).toBe('Simple Architecture Diagram');
    });

    it('should handle accessibility title and description', async () => {
@@ -44,8 +53,8 @@ describe('architecture diagrams', () => {
            accDescr: Accessibility Description
            `;
      await expect(parser.parse(str)).resolves.not.toThrow();
-      expect(db.getAccTitle()).toBe('Accessibility Title');
-      expect(db.getAccDescription()).toBe('Accessibility Description');
+      expect(getAccTitle()).toBe('Accessibility Title');
+      expect(getAccDescription()).toBe('Accessibility Description');
    });

    it('should handle multiline accessibility description', async () => {
@@ -55,7 +64,7 @@ describe('architecture diagrams', () => {
            }
            `;
      await expect(parser.parse(str)).resolves.not.toThrow();
-      expect(db.getAccDescription()).toBe('Accessibility Description');
+      expect(getAccDescription()).toBe('Accessibility Description');
    });
  });
 });
--- a/packages/mermaid/src/diagrams/architecture/architectureDb.ts
+++ b/packages/mermaid/src/diagrams/architecture/architectureDb.ts
@@ -1,9 +1,8 @@
-import { getConfig as commonGetConfig } from '../../config.js';
 import type { ArchitectureDiagramConfig } from '../../config.type.js';
 import DEFAULT_CONFIG from '../../defaultConfig.js';
-import type { DiagramDB } from '../../diagram-api/types.js';
+import { getConfig as commonGetConfig } from '../../config.js';
 import type { D3Element } from '../../types.js';
-import { cleanAndMerge } from '../../utils.js';
+import { ImperativeState } from '../../utils/imperativeState.js';
 import {
  clear as commonClear,
  getAccDescription,
@@ -15,6 +14,7 @@ import {
 } from '../common/commonDb.js';
 import type {
  ArchitectureAlignment,
+  ArchitectureDB,
  ArchitectureDirectionPair,
  ArchitectureDirectionPairMap,
  ArchitectureEdge,
@@ -33,333 +33,330 @@ import {
  isArchitectureService,
  shiftPositionByArchitectureDirectionPair,
 } from './architectureTypes.js';
+import { cleanAndMerge } from '../../utils.js';

 const DEFAULT_ARCHITECTURE_CONFIG: Required<ArchitectureDiagramConfig> =
  DEFAULT_CONFIG.architecture;
-export class ArchitectureDB implements DiagramDB {
-  private nodes: Record<string, ArchitectureNode> = {};
-  private groups: Record<string, ArchitectureGroup> = {};
-  private edges: ArchitectureEdge[] = [];
-  private registeredIds: Record<string, 'node' | 'group'> = {};
-  private dataStructures?: ArchitectureState['dataStructures'];
-  private elements: Record<string, D3Element> = {};

-  constructor() {
-    this.clear();
+const state = new ImperativeState<ArchitectureState>(() => ({
+  nodes: {},
+  groups: {},
+  edges: [],
+  registeredIds: {},
+  config: DEFAULT_ARCHITECTURE_CONFIG,
+  dataStructures: undefined,
+  elements: {},
+}));
+
+const clear = (): void => {
+  state.reset();
+  commonClear();
+};
+
+const addService = function ({
+  id,
+  icon,
+  in: parent,
+  title,
+  iconText,
+}: Omit<ArchitectureService, 'edges'>) {
+  if (state.records.registeredIds[id] !== undefined) {
+    throw new Error(
+      `The service id [${id}] is already in use by another ${state.records.registeredIds[id]}`
+    );
+  }
+  if (parent !== undefined) {
+    if (id === parent) {
+      throw new Error(`The service [${id}] cannot be placed within itself`);
+    }
+    if (state.records.registeredIds[parent] === undefined) {
+      throw new Error(
+        `The service [${id}]'s parent does not exist. Please make sure the parent is created before this service`
+      );
+    }
+    if (state.records.registeredIds[parent] === 'node') {
+      throw new Error(`The service [${id}]'s parent is not a group`);
+    }
  }

-  public clear(): void {
-    this.nodes = {};
-    this.groups = {};
-    this.edges = [];
-    this.registeredIds = {};
-    this.dataStructures = undefined;
-    this.elements = {};
-    commonClear();
+  state.records.registeredIds[id] = 'node';
+
+  state.records.nodes[id] = {
+    id,
+    type: 'service',
+    icon,
+    iconText,
+    title,
+    edges: [],
+    in: parent,
+  };
+};
+
+const getServices = (): ArchitectureService[] =>
+  Object.values(state.records.nodes).filter<ArchitectureService>(isArchitectureService);
+
+const addJunction = function ({ id, in: parent }: Omit<ArchitectureJunction, 'edges'>) {
+  state.records.registeredIds[id] = 'node';
+
+  state.records.nodes[id] = {
+    id,
+    type: 'junction',
+    edges: [],
+    in: parent,
+  };
+};
+
+const getJunctions = (): ArchitectureJunction[] =>
+  Object.values(state.records.nodes).filter<ArchitectureJunction>(isArchitectureJunction);
+
+const getNodes = (): ArchitectureNode[] => Object.values(state.records.nodes);
+
+const getNode = (id: string): ArchitectureNode | null => state.records.nodes[id];
+
+const addGroup = function ({ id, icon, in: parent, title }: ArchitectureGroup) {
+  if (state.records.registeredIds[id] !== undefined) {
+    throw new Error(
+      `The group id [${id}] is already in use by another ${state.records.registeredIds[id]}`
+    );
+  }
+  if (parent !== undefined) {
+    if (id === parent) {
+      throw new Error(`The group [${id}] cannot be placed within itself`);
+    }
+    if (state.records.registeredIds[parent] === undefined) {
+      throw new Error(
+        `The group [${id}]'s parent does not exist. Please make sure the parent is created before this group`
+      );
+    }
+    if (state.records.registeredIds[parent] === 'node') {
+      throw new Error(`The group [${id}]'s parent is not a group`);
+    }
  }

-  public addService({
+  state.records.registeredIds[id] = 'group';
+
+  state.records.groups[id] = {
    id,
    icon,
-    in: parent,
    title,
-    iconText,
-  }: Omit<ArchitectureService, 'edges'>): void {
-    if (this.registeredIds[id] !== undefined) {
-      throw new Error(
-        `The service id [${id}] is already in use by another ${this.registeredIds[id]}`
-      );
-    }
-    if (parent !== undefined) {
-      if (id === parent) {
-        throw new Error(`The service [${id}] cannot be placed within itself`);
-      }
-      if (this.registeredIds[parent] === undefined) {
-        throw new Error(
-          `The service [${id}]'s parent does not exist. Please make sure the parent is created before this service`
-        );
-      }
-      if (this.registeredIds[parent] === 'node') {
-        throw new Error(`The service [${id}]'s parent is not a group`);
-      }
-    }
+    in: parent,
+  };
+};
+const getGroups = (): ArchitectureGroup[] => {
+  return Object.values(state.records.groups);
+};

-    this.registeredIds[id] = 'node';
-
-    this.nodes[id] = {
-      id,
-      type: 'service',
-      icon,
-      iconText,
-      title,
-      edges: [],
-      in: parent,
-    };
+const addEdge = function ({
+  lhsId,
+  rhsId,
+  lhsDir,
+  rhsDir,
+  lhsInto,
+  rhsInto,
+  lhsGroup,
+  rhsGroup,
+  title,
+}: ArchitectureEdge<string>) {
+  if (!isArchitectureDirection(lhsDir)) {
+    throw new Error(
+      `Invalid direction given for left hand side of edge ${lhsId}--${rhsId}. Expected (L,R,T,B) got ${lhsDir}`
+    );
+  }
+  if (!isArchitectureDirection(rhsDir)) {
+    throw new Error(
+      `Invalid direction given for right hand side of edge ${lhsId}--${rhsId}. Expected (L,R,T,B) got ${rhsDir}`
+    );
  }

-  public getServices(): ArchitectureService[] {
-    return Object.values(this.nodes).filter(isArchitectureService);
+  if (state.records.nodes[lhsId] === undefined && state.records.groups[lhsId] === undefined) {
+    throw new Error(
+      `The left-hand id [${lhsId}] does not yet exist. Please create the service/group before declaring an edge to it.`
+    );
+  }
+  if (state.records.nodes[rhsId] === undefined && state.records.groups[lhsId] === undefined) {
+    throw new Error(
+      `The right-hand id [${rhsId}] does not yet exist. Please create the service/group before declaring an edge to it.`
+    );
  }

-  public addJunction({ id, in: parent }: Omit<ArchitectureJunction, 'edges'>): void {
-    this.registeredIds[id] = 'node';
-
-    this.nodes[id] = {
-      id,
-      type: 'junction',
-      edges: [],
-      in: parent,
-    };
+  const lhsGroupId = state.records.nodes[lhsId].in;
+  const rhsGroupId = state.records.nodes[rhsId].in;
+  if (lhsGroup && lhsGroupId && rhsGroupId && lhsGroupId == rhsGroupId) {
+    throw new Error(
+      `The left-hand id [${lhsId}] is modified to traverse the group boundary, but the edge does not pass through two groups.`
+    );
+  }
+  if (rhsGroup && lhsGroupId && rhsGroupId && lhsGroupId == rhsGroupId) {
+    throw new Error(
+      `The right-hand id [${rhsId}] is modified to traverse the group boundary, but the edge does not pass through two groups.`
+    );
  }

-  public getJunctions(): ArchitectureJunction[] {
-    return Object.values(this.nodes).filter(isArchitectureJunction);
-  }
-
-  public getNodes(): ArchitectureNode[] {
-    return Object.values(this.nodes);
-  }
-
-  public getNode(id: string): ArchitectureNode | null {
-    return this.nodes[id] ?? null;
-  }
-
-  public addGroup({ id, icon, in: parent, title }: ArchitectureGroup): void {
-    if (this.registeredIds?.[id] !== undefined) {
-      throw new Error(
-        `The group id [${id}] is already in use by another ${this.registeredIds[id]}`
-      );
-    }
-    if (parent !== undefined) {
-      if (id === parent) {
-        throw new Error(`The group [${id}] cannot be placed within itself`);
-      }
-      if (this.registeredIds?.[parent] === undefined) {
-        throw new Error(
-          `The group [${id}]'s parent does not exist. Please make sure the parent is created before this group`
-        );
-      }
-      if (this.registeredIds?.[parent] === 'node') {
-        throw new Error(`The group [${id}]'s parent is not a group`);
-      }
-    }
-
-    this.registeredIds[id] = 'group';
-
-    this.groups[id] = {
-      id,
-      icon,
-      title,
-      in: parent,
-    };
-  }
-  public getGroups(): ArchitectureGroup[] {
-    return Object.values(this.groups);
-  }
-  public addEdge({
+  const edge = {
    lhsId,
-    rhsId,
    lhsDir,
-    rhsDir,
    lhsInto,
-    rhsInto,
    lhsGroup,
+    rhsId,
+    rhsDir,
+    rhsInto,
    rhsGroup,
    title,
-  }: ArchitectureEdge): void {
-    if (!isArchitectureDirection(lhsDir)) {
-      throw new Error(
-        `Invalid direction given for left hand side of edge ${lhsId}--${rhsId}. Expected (L,R,T,B) got ${String(lhsDir)}`
-      );
-    }
-    if (!isArchitectureDirection(rhsDir)) {
-      throw new Error(
-        `Invalid direction given for right hand side of edge ${lhsId}--${rhsId}. Expected (L,R,T,B) got ${String(rhsDir)}`
-      );
-    }
+  };

-    if (this.nodes[lhsId] === undefined && this.groups[lhsId] === undefined) {
-      throw new Error(
-        `The left-hand id [${lhsId}] does not yet exist. Please create the service/group before declaring an edge to it.`
-      );
-    }
-    if (this.nodes[rhsId] === undefined && this.groups[rhsId] === undefined) {
-      throw new Error(
-        `The right-hand id [${rhsId}] does not yet exist. Please create the service/group before declaring an edge to it.`
-      );
-    }
-
-    const lhsGroupId = this.nodes[lhsId].in;
-    const rhsGroupId = this.nodes[rhsId].in;
-    if (lhsGroup && lhsGroupId && rhsGroupId && lhsGroupId == rhsGroupId) {
-      throw new Error(
-        `The left-hand id [${lhsId}] is modified to traverse the group boundary, but the edge does not pass through two groups.`
-      );
-    }
-    if (rhsGroup && lhsGroupId && rhsGroupId && lhsGroupId == rhsGroupId) {
-      throw new Error(
-        `The right-hand id [${rhsId}] is modified to traverse the group boundary, but the edge does not pass through two groups.`
-      );
-    }
-
-    const edge = {
-      lhsId,
-      lhsDir,
-      lhsInto,
-      lhsGroup,
-      rhsId,
-      rhsDir,
-      rhsInto,
-      rhsGroup,
-      title,
-    };
-
-    this.edges.push(edge);
-    if (this.nodes[lhsId] && this.nodes[rhsId]) {
-      this.nodes[lhsId].edges.push(this.edges[this.edges.length - 1]);
-      this.nodes[rhsId].edges.push(this.edges[this.edges.length - 1]);
-    }
+  state.records.edges.push(edge);
+  if (state.records.nodes[lhsId] && state.records.nodes[rhsId]) {
+    state.records.nodes[lhsId].edges.push(state.records.edges[state.records.edges.length - 1]);
+    state.records.nodes[rhsId].edges.push(state.records.edges[state.records.edges.length - 1]);
  }
+};

-  public getEdges(): ArchitectureEdge[] {
-    return this.edges;
-  }
+const getEdges = (): ArchitectureEdge[] => state.records.edges;

-  /**
-   * Returns the current diagram's adjacency list, spatial map, & group alignments.
-   * If they have not been created, run the algorithms to generate them.
-   * @returns
-   */
-  public getDataStructures() {
-    if (this.dataStructures === undefined) {
-      // Tracks how groups are aligned with one another. Generated while creating the adj list
-      const groupAlignments: Record<
-        string,
-        Record<string, Exclude<ArchitectureAlignment, 'bend'>>
-      > = {};
+/**
+ * Returns the current diagram's adjacency list, spatial map, & group alignments.
+ * If they have not been created, run the algorithms to generate them.
+ * @returns
+ */
+const getDataStructures = () => {
+  if (state.records.dataStructures === undefined) {
+    // Tracks how groups are aligned with one another. Generated while creating the adj list
+    const groupAlignments: Record<
+      string,
+      Record<string, Exclude<ArchitectureAlignment, 'bend'>>
+    > = {};

-      // Create an adjacency list of the diagram to perform BFS on
-      // Outer reduce applied on all services
-      // Inner reduce applied on the edges for a service
-      const adjList = Object.entries(this.nodes).reduce<
-        Record<string, ArchitectureDirectionPairMap>
-      >((prevOuter, [id, service]) => {
-        prevOuter[id] = service.edges.reduce<ArchitectureDirectionPairMap>((prevInner, edge) => {
-          // track the direction groups connect to one another
-          const lhsGroupId = this.getNode(edge.lhsId)?.in;
-          const rhsGroupId = this.getNode(edge.rhsId)?.in;
-          if (lhsGroupId && rhsGroupId && lhsGroupId !== rhsGroupId) {
-            const alignment = getArchitectureDirectionAlignment(edge.lhsDir, edge.rhsDir);
-            if (alignment !== 'bend') {
-              groupAlignments[lhsGroupId] ??= {};
-              groupAlignments[lhsGroupId][rhsGroupId] = alignment;
-              groupAlignments[rhsGroupId] ??= {};
-              groupAlignments[rhsGroupId][lhsGroupId] = alignment;
-            }
-          }
-
-          if (edge.lhsId === id) {
-            // source is LHS
-            const pair = getArchitectureDirectionPair(edge.lhsDir, edge.rhsDir);
-            if (pair) {
-              prevInner[pair] = edge.rhsId;
-            }
-          } else {
-            // source is RHS
-            const pair = getArchitectureDirectionPair(edge.rhsDir, edge.lhsDir);
-            if (pair) {
-              prevInner[pair] = edge.lhsId;
-            }
-          }
-          return prevInner;
-        }, {});
-        return prevOuter;
-      }, {});
-
-      // Configuration for the initial pass of BFS
-      const firstId = Object.keys(adjList)[0];
-      const visited = { [firstId]: 1 };
-      // If a key is present in this object, it has not been visited
-      const notVisited = Object.keys(adjList).reduce(
-        (prev, id) => (id === firstId ? prev : { ...prev, [id]: 1 }),
-        {} as Record<string, number>
-      );
-
-      // Perform BFS on the adjacency list
-      const BFS = (startingId: string): ArchitectureSpatialMap => {
-        const spatialMap = { [startingId]: [0, 0] };
-        const queue = [startingId];
-        while (queue.length > 0) {
-          const id = queue.shift();
-          if (id) {
-            visited[id] = 1;
-            delete notVisited[id];
-            const adj = adjList[id];
-            const [posX, posY] = spatialMap[id];
-            Object.entries(adj).forEach(([dir, rhsId]) => {
-              if (!visited[rhsId]) {
-                spatialMap[rhsId] = shiftPositionByArchitectureDirectionPair(
-                  [posX, posY],
-                  dir as ArchitectureDirectionPair
-                );
-                queue.push(rhsId);
-              }
-            });
+    // Create an adjacency list of the diagram to perform BFS on
+    // Outer reduce applied on all services
+    // Inner reduce applied on the edges for a service
+    const adjList = Object.entries(state.records.nodes).reduce<
+      Record<string, ArchitectureDirectionPairMap>
+    >((prevOuter, [id, service]) => {
+      prevOuter[id] = service.edges.reduce<ArchitectureDirectionPairMap>((prevInner, edge) => {
+        // track the direction groups connect to one another
+        const lhsGroupId = getNode(edge.lhsId)?.in;
+        const rhsGroupId = getNode(edge.rhsId)?.in;
+        if (lhsGroupId && rhsGroupId && lhsGroupId !== rhsGroupId) {
+          const alignment = getArchitectureDirectionAlignment(edge.lhsDir, edge.rhsDir);
+          if (alignment !== 'bend') {
+            groupAlignments[lhsGroupId] ??= {};
+            groupAlignments[lhsGroupId][rhsGroupId] = alignment;
+            groupAlignments[rhsGroupId] ??= {};
+            groupAlignments[rhsGroupId][lhsGroupId] = alignment;
          }
        }
-        return spatialMap;
-      };
-      const spatialMaps = [BFS(firstId)];

-      // If our diagram is disconnected, keep adding additional spatial maps until all disconnected graphs have been found
-      while (Object.keys(notVisited).length > 0) {
-        spatialMaps.push(BFS(Object.keys(notVisited)[0]));
+        if (edge.lhsId === id) {
+          // source is LHS
+          const pair = getArchitectureDirectionPair(edge.lhsDir, edge.rhsDir);
+          if (pair) {
+            prevInner[pair] = edge.rhsId;
+          }
+        } else {
+          // source is RHS
+          const pair = getArchitectureDirectionPair(edge.rhsDir, edge.lhsDir);
+          if (pair) {
+            prevInner[pair] = edge.lhsId;
+          }
+        }
+        return prevInner;
+      }, {});
+      return prevOuter;
+    }, {});
+
+    // Configuration for the initial pass of BFS
+    const firstId = Object.keys(adjList)[0];
+    const visited = { [firstId]: 1 };
+    // If a key is present in this object, it has not been visited
+    const notVisited = Object.keys(adjList).reduce(
+      (prev, id) => (id === firstId ? prev : { ...prev, [id]: 1 }),
+      {} as Record<string, number>
+    );
+
+    // Perform BFS on the adjacency list
+    const BFS = (startingId: string): ArchitectureSpatialMap => {
+      const spatialMap = { [startingId]: [0, 0] };
+      const queue = [startingId];
+      while (queue.length > 0) {
+        const id = queue.shift();
+        if (id) {
+          visited[id] = 1;
+          delete notVisited[id];
+          const adj = adjList[id];
+          const [posX, posY] = spatialMap[id];
+          Object.entries(adj).forEach(([dir, rhsId]) => {
+            if (!visited[rhsId]) {
+              spatialMap[rhsId] = shiftPositionByArchitectureDirectionPair(
+                [posX, posY],
+                dir as ArchitectureDirectionPair
+              );
+              queue.push(rhsId);
+            }
+          });
+        }
      }
-      this.dataStructures = {
-        adjList,
-        spatialMaps,
-        groupAlignments,
-      };
+      return spatialMap;
+    };
+    const spatialMaps = [BFS(firstId)];
+
+    // If our diagram is disconnected, keep adding additional spatial maps until all disconnected graphs have been found
+    while (Object.keys(notVisited).length > 0) {
+      spatialMaps.push(BFS(Object.keys(notVisited)[0]));
    }
-    return this.dataStructures;
+    state.records.dataStructures = {
+      adjList,
+      spatialMaps,
+      groupAlignments,
+    };
  }
+  return state.records.dataStructures;
+};

-  public setElementForId(id: string, element: D3Element): void {
-    this.elements[id] = element;
-  }
+const setElementForId = (id: string, element: D3Element) => {
+  state.records.elements[id] = element;
+};
+const getElementById = (id: string) => state.records.elements[id];

-  public getElementById(id: string): D3Element {
-    return this.elements[id];
-  }
+const getConfig = (): Required<ArchitectureDiagramConfig> => {
+  const config = cleanAndMerge({
+    ...DEFAULT_ARCHITECTURE_CONFIG,
+    ...commonGetConfig().architecture,
+  });
+  return config;
+};

-  public getConfig(): Required<ArchitectureDiagramConfig> {
-    return cleanAndMerge({
-      ...DEFAULT_ARCHITECTURE_CONFIG,
-      ...commonGetConfig().architecture,
-    });
-  }
+export const db: ArchitectureDB = {
+  clear,
+  setDiagramTitle,
+  getDiagramTitle,
+  setAccTitle,
+  getAccTitle,
+  setAccDescription,
+  getAccDescription,
+  getConfig,

-  public getConfigField<T extends keyof ArchitectureDiagramConfig>(
-    field: T
-  ): Required<ArchitectureDiagramConfig>[T] {
-    return this.getConfig()[field];
-  }
-
-  public setAccTitle = setAccTitle;
-  public getAccTitle = getAccTitle;
-  public setDiagramTitle = setDiagramTitle;
-  public getDiagramTitle = getDiagramTitle;
-  public getAccDescription = getAccDescription;
-  public setAccDescription = setAccDescription;
-}
+  addService,
+  getServices,
+  addJunction,
+  getJunctions,
+  getNodes,
+  getNode,
+  addGroup,
+  getGroups,
+  addEdge,
+  getEdges,
+  setElementForId,
+  getElementById,
+  getDataStructures,
+};

 /**
 * Typed wrapper for resolving an architecture diagram's config fields. Returns the default value if undefined
 * @param field - the config field to access
 * @returns
 */
-// export function getConfigField<T extends keyof ArchitectureDiagramConfig>(
-//   field: T
-// ): Required<ArchitectureDiagramConfig>[T] {
-//   return db.getConfig()[field];
-// }
+export function getConfigField<T extends keyof ArchitectureDiagramConfig>(
+  field: T
+): Required<ArchitectureDiagramConfig>[T] {
+  return getConfig()[field];
+}
--- a/packages/mermaid/src/diagrams/architecture/architectureDiagram.ts
+++ b/packages/mermaid/src/diagrams/architecture/architectureDiagram.ts
@@ -1,14 +1,12 @@
 import type { DiagramDefinition } from '../../diagram-api/types.js';
 import { parser } from './architectureParser.js';
-import { ArchitectureDB } from './architectureDb.js';
+import { db } from './architectureDb.js';
 import styles from './architectureStyles.js';
 import { renderer } from './architectureRenderer.js';

 export const diagram: DiagramDefinition = {
  parser,
-  get db() {
-    return new ArchitectureDB();
-  },
+  db,
  renderer,
  styles,
 };
--- a/packages/mermaid/src/diagrams/architecture/architectureParser.ts
+++ b/packages/mermaid/src/diagrams/architecture/architectureParser.ts
@@ -1,33 +1,24 @@
 import type { Architecture } from '@mermaid-js/parser';
 import { parse } from '@mermaid-js/parser';
-import type { ParserDefinition } from '../../diagram-api/types.js';
 import { log } from '../../logger.js';
+import type { ParserDefinition } from '../../diagram-api/types.js';
 import { populateCommonDb } from '../common/populateCommonDb.js';
-import { ArchitectureDB } from './architectureDb.js';
+import type { ArchitectureDB } from './architectureTypes.js';
+import { db } from './architectureDb.js';

 const populateDb = (ast: Architecture, db: ArchitectureDB) => {
  populateCommonDb(ast, db);
-  ast.groups.map((group) => db.addGroup(group));
+  ast.groups.map(db.addGroup);
  ast.services.map((service) => db.addService({ ...service, type: 'service' }));
  ast.junctions.map((service) => db.addJunction({ ...service, type: 'junction' }));
  // @ts-ignore TODO our parser guarantees the type is L/R/T/B and not string. How to change to union type?
-  ast.edges.map((edge) => db.addEdge(edge));
+  ast.edges.map(db.addEdge);
 };

 export const parser: ParserDefinition = {
-  parser: {
-    // @ts-expect-error - ArchitectureDB is not assignable to DiagramDB
-    yy: undefined,
-  },
  parse: async (input: string): Promise<void> => {
    const ast: Architecture = await parse('architecture', input);
    log.debug(ast);
-    const db = parser.parser?.yy;
-    if (!(db instanceof ArchitectureDB)) {
-      throw new Error(
-        'parser.parser?.yy was not a ArchitectureDB. This is due to a bug within Mermaid, please report this issue at https://github.com/mermaid-js/mermaid/issues.'
-      );
-    }
    populateDb(ast, db);
  },
 };
--- a/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts
+++ b/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts
@@ -1,3 +1,4 @@
+import { registerIconPacks } from '../../rendering-util/icons.js';
 import type { Position } from 'cytoscape';
 import cytoscape from 'cytoscape';
 import type { FcoseLayoutOptions } from 'cytoscape-fcose';
@@ -6,10 +7,9 @@ import { select } from 'd3';
 import type { DrawDefinition, SVG } from '../../diagram-api/types.js';
 import type { Diagram } from '../../Diagram.js';
 import { log } from '../../logger.js';
-import { registerIconPacks } from '../../rendering-util/icons.js';
 import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
 import { setupGraphViewbox } from '../../setupGraphViewbox.js';
-import type { ArchitectureDB } from './architectureDb.js';
+import { getConfigField } from './architectureDb.js';
 import { architectureIcons } from './architectureIcons.js';
 import type {
  ArchitectureAlignment,
@@ -22,6 +22,7 @@ import type {
  NodeSingularData,
 } from './architectureTypes.js';
 import {
+  type ArchitectureDB,
  type ArchitectureDirection,
  type ArchitectureEdge,
  type ArchitectureGroup,
@@ -43,7 +44,7 @@ registerIconPacks([
 ]);
 cytoscape.use(fcose);

-function addServices(services: ArchitectureService[], cy: cytoscape.Core, db: ArchitectureDB) {
+function addServices(services: ArchitectureService[], cy: cytoscape.Core) {
  services.forEach((service) => {
    cy.add({
      group: 'nodes',
@@ -53,15 +54,15 @@ function addServices(services: ArchitectureService[], cy: cytoscape.Core, db: Ar
        icon: service.icon,
        label: service.title,
        parent: service.in,
-        width: db.getConfigField('iconSize'),
-        height: db.getConfigField('iconSize'),
+        width: getConfigField('iconSize'),
+        height: getConfigField('iconSize'),
      } as NodeSingularData,
      classes: 'node-service',
    });
  });
 }

-function addJunctions(junctions: ArchitectureJunction[], cy: cytoscape.Core, db: ArchitectureDB) {
+function addJunctions(junctions: ArchitectureJunction[], cy: cytoscape.Core) {
  junctions.forEach((junction) => {
    cy.add({
      group: 'nodes',
@@ -69,8 +70,8 @@ function addJunctions(junctions: ArchitectureJunction[], cy: cytoscape.Core, db:
        type: 'junction',
        id: junction.id,
        parent: junction.in,
-        width: db.getConfigField('iconSize'),
-        height: db.getConfigField('iconSize'),
+        width: getConfigField('iconSize'),
+        height: getConfigField('iconSize'),
      } as NodeSingularData,
      classes: 'node-junction',
    });
@@ -256,8 +257,7 @@ function getAlignments(
 }

 function getRelativeConstraints(
-  spatialMaps: ArchitectureSpatialMap[],
-  db: ArchitectureDB
+  spatialMaps: ArchitectureSpatialMap[]
 ): fcose.FcoseRelativePlacementConstraint[] {
  const relativeConstraints: fcose.FcoseRelativePlacementConstraint[] = [];
  const posToStr = (pos: number[]) => `${pos[0]},${pos[1]}`;
@@ -296,7 +296,7 @@ function getRelativeConstraints(
                [ArchitectureDirectionName[
                  getOppositeArchitectureDirection(dir as ArchitectureDirection)
                ]]: currId,
-                gap: 1.5 * db.getConfigField('iconSize'),
+                gap: 1.5 * getConfigField('iconSize'),
              });
            }
          });
@@ -353,7 +353,7 @@ function layoutArchitecture(
          style: {
            'text-valign': 'bottom',
            'text-halign': 'center',
-            'font-size': `${db.getConfigField('fontSize')}px`,
+            'font-size': `${getConfigField('fontSize')}px`,
          },
        },
        {
@@ -375,32 +375,23 @@ function layoutArchitecture(
          selector: '.node-group',
          style: {
            // @ts-ignore Incorrect library types
-            padding: `${db.getConfigField('padding')}px`,
+            padding: `${getConfigField('padding')}px`,
          },
        },
      ],
-      layout: {
-        name: 'grid',
-        boundingBox: {
-          x1: 0,
-          x2: 100,
-          y1: 0,
-          y2: 100,
-        },
-      },
    });
    // Remove element after layout
    renderEl.remove();

    addGroups(groups, cy);
-    addServices(services, cy, db);
-    addJunctions(junctions, cy, db);
+    addServices(services, cy);
+    addJunctions(junctions, cy);
    addEdges(edges, cy);
    // Use the spatial map to create alignment arrays for fcose
    const alignmentConstraint = getAlignments(db, spatialMaps, groupAlignments);

    // Create the relative constraints for fcose by using an inverse of the spatial map and performing BFS on it
-    const relativePlacementConstraint = getRelativeConstraints(spatialMaps, db);
+    const relativePlacementConstraint = getRelativeConstraints(spatialMaps);

    const layout = cy.layout({
      name: 'fcose',
@@ -415,9 +406,7 @@ function layoutArchitecture(
        const { parent: parentA } = nodeData(nodeA);
        const { parent: parentB } = nodeData(nodeB);
        const elasticity =
-          parentA === parentB
-            ? 1.5 * db.getConfigField('iconSize')
-            : 0.5 * db.getConfigField('iconSize');
+          parentA === parentB ? 1.5 * getConfigField('iconSize') : 0.5 * getConfigField('iconSize');
        return elasticity;
      },
      edgeElasticity(edge: EdgeSingular) {
@@ -537,11 +526,11 @@ export const draw: DrawDefinition = async (text, id, _version, diagObj: Diagram)

  const cy = await layoutArchitecture(services, junctions, groups, edges, db, ds);

-  await drawEdges(edgesElem, cy, db);
-  await drawGroups(groupElem, cy, db);
+  await drawEdges(edgesElem, cy);
+  await drawGroups(groupElem, cy);
  positionNodes(db, cy);

-  setupGraphViewbox(undefined, svg, db.getConfigField('padding'), db.getConfigField('useMaxWidth'));
+  setupGraphViewbox(undefined, svg, getConfigField('padding'), getConfigField('useMaxWidth'));
 };

 export const renderer = { draw };
--- a/packages/mermaid/src/diagrams/architecture/svgDraw.ts
+++ b/packages/mermaid/src/diagrams/architecture/svgDraw.ts
@@ -1,9 +1,9 @@
+import { getIconSVG } from '../../rendering-util/icons.js';
 import type cytoscape from 'cytoscape';
 import { getConfig } from '../../diagram-api/diagramAPI.js';
 import { createText } from '../../rendering-util/createText.js';
-import { getIconSVG } from '../../rendering-util/icons.js';
 import type { D3Element } from '../../types.js';
-import type { ArchitectureDB } from './architectureDb.js';
+import { db, getConfigField } from './architectureDb.js';
 import { architectureIcons } from './architectureIcons.js';
 import {
  ArchitectureDirectionArrow,
@@ -16,17 +16,14 @@ import {
  isArchitectureDirectionY,
  isArchitecturePairXY,
  nodeData,
+  type ArchitectureDB,
  type ArchitectureJunction,
  type ArchitectureService,
 } from './architectureTypes.js';

-export const drawEdges = async function (
-  edgesEl: D3Element,
-  cy: cytoscape.Core,
-  db: ArchitectureDB
-) {
-  const padding = db.getConfigField('padding');
-  const iconSize = db.getConfigField('iconSize');
+export const drawEdges = async function (edgesEl: D3Element, cy: cytoscape.Core) {
+  const padding = getConfigField('padding');
+  const iconSize = getConfigField('iconSize');
  const halfIconSize = iconSize / 2;
  const arrowSize = iconSize / 6;
  const halfArrowSize = arrowSize / 2;
@@ -186,17 +183,13 @@ export const drawEdges = async function (
  );
 };

-export const drawGroups = async function (
-  groupsEl: D3Element,
-  cy: cytoscape.Core,
-  db: ArchitectureDB
-) {
-  const padding = db.getConfigField('padding');
+export const drawGroups = async function (groupsEl: D3Element, cy: cytoscape.Core) {
+  const padding = getConfigField('padding');
  const groupIconSize = padding * 0.75;

-  const fontSize = db.getConfigField('fontSize');
+  const fontSize = getConfigField('fontSize');

-  const iconSize = db.getConfigField('iconSize');
+  const iconSize = getConfigField('iconSize');
  const halfIconSize = iconSize / 2;

  await Promise.all(
@@ -273,7 +266,7 @@ export const drawServices = async function (
 ): Promise<number> {
  for (const service of services) {
    const serviceElem = elem.append('g');
-    const iconSize = db.getConfigField('iconSize');
+    const iconSize = getConfigField('iconSize');

    if (service.title) {
      const textElem = serviceElem.append('g');
@@ -357,7 +350,7 @@ export const drawJunctions = function (
 ) {
  junctions.forEach((junction) => {
    const junctionElem = elem.append('g');
-    const iconSize = db.getConfigField('iconSize');
+    const iconSize = getConfigField('iconSize');

    const bkgElem = junctionElem.append('g');
    bkgElem
--- a/packages/mermaid/src/diagrams/block/blockDB.ts
+++ b/packages/mermaid/src/diagrams/block/blockDB.ts
@@ -92,20 +92,7 @@ export const setCssClass = function (itemIds: string, cssClassName: string) {
 const populateBlockDatabase = (_blockList: Block[], parent: Block): void => {
  const blockList = _blockList.flat();
  const children = [];
-  const columnSettingBlock = blockList.find((b) => b?.type === 'column-setting');
-  const column = columnSettingBlock?.columns ?? -1;
  for (const block of blockList) {
-    if (
-      typeof column === 'number' &&
-      column > 0 &&
-      block.type !== 'column-setting' &&
-      typeof block.widthInColumns === 'number' &&
-      block.widthInColumns > column
-    ) {
-      log.warn(
-        `Block ${block.id} width ${block.widthInColumns} exceeds configured column width ${column}`
-      );
-    }
    if (block.label) {
      block.label = sanitizeText(block.label);
    }
@@ -238,15 +225,13 @@ export function edgeTypeStr2Type(typeStr: string): string {
 }

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

@@ -302,7 +287,7 @@ const setBlock = (block: Block) => {
  blockDatabase.set(block.id, block);
 };

-const getLogger = () => log;
+const getLogger = () => console;

 /**
 * Return all of the style classes
--- a/packages/mermaid/src/diagrams/block/blockDetector.ts
+++ b/packages/mermaid/src/diagrams/block/blockDetector.ts
@@ -3,7 +3,7 @@ import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-a
 const id = 'block';

 const detector: DiagramDetector = (txt) => {
-  return /^\s*block(-beta)?/.test(txt);
+  return /^\s*block-beta/.test(txt);
 };

 const loader = async () => {
--- a/packages/mermaid/src/diagrams/block/layout.ts
+++ b/packages/mermaid/src/diagrams/block/layout.ts
@@ -270,12 +270,7 @@ function layoutBlocks(block: Block, db: BlockDB) {
      if (child.children) {
        layoutBlocks(child, db);
      }
-      let columnsFilled = child?.widthInColumns ?? 1;
-      if (columns > 0) {
-        // Make sure overflowing lines do not affect later lines
-        columnsFilled = Math.min(columnsFilled, columns - (columnPos % columns));
-      }
-      columnPos += columnsFilled;
+      columnPos += child?.widthInColumns ?? 1;
      log.debug('abc88 columnsPos', child, columnPos);
    }
  }
--- a/packages/mermaid/src/diagrams/block/parser/block.jison
+++ b/packages/mermaid/src/diagrams/block/parser/block.jison
@@ -36,10 +36,10 @@ CRLF \u000D\u000A

 %%

-"block-beta"              { yy.getLogger().debug('Found block-beta'); return 'BLOCK_DIAGRAM_KEY'; }
-"block:"                  { yy.getLogger().debug('Found id-block'); return 'id-block'; }
-"block"                   { yy.getLogger().debug('Found block'); return 'BLOCK_DIAGRAM_KEY'; }
-
+"block-beta"                                             { return 'BLOCK_DIAGRAM_KEY'; }
+"block"\s+            { yy.getLogger().debug('Found space-block'); return 'block';}
+"block"\n+            { yy.getLogger().debug('Found nl-block'); return 'block';}
+"block:"            { yy.getLogger().debug('Found space-block'); return 'id-block';}
 // \s*\%\%.*                                                       { yy.getLogger().debug('Found comment',yytext); }
 [\s]+                                                           { yy.getLogger().debug('.', yytext); /* skip all whitespace */  }
 [\n]+ {yy.getLogger().debug('_', yytext);                 /* skip all whitespace */   }
@@ -240,7 +240,7 @@ columnsStatement

 blockStatement
  : id-block nodeStatement document end { yy.getLogger().debug('Rule: id-block statement : ', $2, $3); const id2 = yy.generateId(); $$ = { ...$2, type:'composite', children: $3 }; }
-  | BLOCK_DIAGRAM_KEY document end { yy.getLogger().debug('Rule: blockStatement : ', $1, $2, $3); const id = yy.generateId(); $$ = { id, type:'composite', label:'', children: $2 }; }
+  | block document end { yy.getLogger().debug('Rule: blockStatement : ', $1, $2, $3); const id = yy.generateId(); $$ = { id, type:'composite', label:'', children: $2 }; }
  ;

 node
--- a/packages/mermaid/src/diagrams/block/parser/block.spec.ts
+++ b/packages/mermaid/src/diagrams/block/parser/block.spec.ts
@@ -1,7 +1,6 @@
 // @ts-ignore: jison doesn't export types
 import block from './block.jison';
 import db from '../blockDB.js';
-import { log } from '../../../logger.js';

 describe('Block diagram', function () {
  describe('when parsing a block diagram graph it should handle > ', function () {
@@ -23,7 +22,7 @@ describe('Block diagram', function () {
      expect(blocks[0].label).toBe('id');
    });
    it('a node with a square shape and a label', () => {
-      const str = `block
+      const str = `block-beta
          id["A label"]
          `;

@@ -35,7 +34,7 @@ describe('Block diagram', function () {
      expect(blocks[0].type).toBe('square');
    });
    it('a diagram with multiple nodes', () => {
-      const str = `block
+      const str = `block-beta
          id1
          id2
      `;
@@ -51,7 +50,7 @@ describe('Block diagram', function () {
      expect(blocks[1].type).toBe('na');
    });
    it('a diagram with multiple nodes', () => {
-      const str = `block
+      const str = `block-beta
          id1
          id2
          id3
@@ -72,7 +71,7 @@ describe('Block diagram', function () {
    });

    it('a node with a square shape and a label', () => {
-      const str = `block
+      const str = `block-beta
          id["A label"]
          id2`;

@@ -87,7 +86,7 @@ describe('Block diagram', function () {
      expect(blocks[1].type).toBe('na');
    });
    it('a diagram with multiple nodes with edges abc123', () => {
-      const str = `block
+      const str = `block-beta
          id1["first"]  -->   id2["second"]
      `;

@@ -101,7 +100,7 @@ describe('Block diagram', function () {
      expect(edges[0].arrowTypeEnd).toBe('arrow_point');
    });
    it('a diagram with multiple nodes with edges abc123', () => {
-      const str = `block
+      const str = `block-beta
          id1["first"]  -- "a label" -->   id2["second"]
      `;

@@ -116,7 +115,7 @@ describe('Block diagram', function () {
      expect(edges[0].label).toBe('a label');
    });
    it('a diagram with column statements', () => {
-      const str = `block
+      const str = `block-beta
          columns 2
          block1["Block 1"]
      `;
@@ -127,7 +126,7 @@ describe('Block diagram', function () {
      expect(blocks.length).toBe(1);
    });
    it('a diagram without column statements', () => {
-      const str = `block
+      const str = `block-beta
          block1["Block 1"]
      `;

@@ -137,7 +136,7 @@ describe('Block diagram', function () {
      expect(blocks.length).toBe(1);
    });
    it('a diagram with auto column statements', () => {
-      const str = `block
+      const str = `block-beta
          columns auto
          block1["Block 1"]
      `;
@@ -149,7 +148,7 @@ describe('Block diagram', function () {
    });

    it('blocks next to each other', () => {
-      const str = `block
+      const str = `block-beta
          columns 2
          block1["Block 1"]
          block2["Block 2"]
@@ -163,7 +162,7 @@ describe('Block diagram', function () {
    });

    it('blocks on top of each other', () => {
-      const str = `block
+      const str = `block-beta
          columns 1
          block1["Block 1"]
          block2["Block 2"]
@@ -177,7 +176,7 @@ describe('Block diagram', function () {
    });

    it('compound blocks 2', () => {
-      const str = `block
+      const str = `block-beta
          block
            aBlock["ABlock"]
            bBlock["BBlock"]
@@ -205,7 +204,7 @@ describe('Block diagram', function () {
      expect(bBlock.type).toBe('square');
    });
    it('compound blocks of compound blocks', () => {
-      const str = `block
+      const str = `block-beta
          block
            aBlock["ABlock"]
            block
@@ -240,7 +239,7 @@ describe('Block diagram', function () {
      expect(bBlock.type).toBe('square');
    });
    it('compound blocks with title', () => {
-      const str = `block
+      const str = `block-beta
          block:compoundBlock["Compound block"]
            columns 1
            block2["Block 2"]
@@ -265,7 +264,7 @@ describe('Block diagram', function () {
      expect(block2.type).toBe('square');
    });
    it('blocks mixed with compound blocks', () => {
-      const str = `block
+      const str = `block-beta
          columns 1
          block1["Block 1"]

@@ -292,7 +291,7 @@ describe('Block diagram', function () {
    });

    it('Arrow blocks', () => {
-      const str = `block
+      const str = `block-beta
        columns 3
        block1["Block 1"]
        blockArrow<["&nbsp;&nbsp;&nbsp;"]>(right)
@@ -316,7 +315,7 @@ describe('Block diagram', function () {
      expect(blockArrow.directions).toContain('right');
    });
    it('Arrow blocks with multiple points', () => {
-      const str = `block
+      const str = `block-beta
        columns 1
        A
        blockArrow<["&nbsp;&nbsp;&nbsp;"]>(up, down)
@@ -339,7 +338,7 @@ describe('Block diagram', function () {
      expect(blockArrow.directions).not.toContain('right');
    });
    it('blocks with different widths', () => {
-      const str = `block
+      const str = `block-beta
        columns 3
        one["One Slot"]
        two["Two slots"]:2
@@ -354,7 +353,7 @@ describe('Block diagram', function () {
      expect(two.widthInColumns).toBe(2);
    });
    it('empty blocks', () => {
-      const str = `block
+      const str = `block-beta
        columns 3
        space
        middle["In the middle"]
@@ -373,7 +372,7 @@ describe('Block diagram', function () {
      expect(middle.label).toBe('In the middle');
    });
    it('classDef statements applied to a block', () => {
-      const str = `block
+      const str = `block-beta
        classDef black color:#ffffff, fill:#000000;

        mc["Memcache"]
@@ -391,7 +390,7 @@ describe('Block diagram', function () {
      expect(black.styles[0]).toEqual('color:#ffffff');
    });
    it('style statements applied to a block', () => {
-      const str = `block
+      const str = `block-beta
 columns 1
    B["A wide one in the middle"]
  style B fill:#f9F,stroke:#333,stroke-width:4px
@@ -403,32 +402,13 @@ columns 1
      const B = blocks[0];
      expect(B.styles).toContain('fill:#f9F');
    });
-    it('should log a warning when block width exceeds column width', () => {
-      const str = `block-beta
-  columns 1
-  A:1
-  B:2
-  C:3
-  D:4
-  E:3
-  F:2
-  G:1`;
-
-      const logWarnSpy = vi.spyOn(log, 'warn').mockImplementation(() => undefined);
-
-      block.parse(str);
-
-      expect(logWarnSpy).toHaveBeenCalledWith('Block B width 2 exceeds configured column width 1');
-
-      logWarnSpy.mockRestore();
-    });
  });

  describe('prototype properties', function () {
    function validateProperty(prop: string) {
-      expect(() => block.parse(`block\n${prop}`)).not.toThrow();
+      expect(() => block.parse(`block-beta\n${prop}`)).not.toThrow();
      expect(() =>
-        block.parse(`block\nA; classDef ${prop} color:#ffffff,fill:#000000; class A ${prop}`)
+        block.parse(`block-beta\nA; classDef ${prop} color:#ffffff,fill:#000000; class A ${prop}`)
      ).not.toThrow();
    }

--- a/packages/mermaid/src/diagrams/class/parser/class.spec.js
+++ b/packages/mermaid/src/diagrams/class/parser/class.spec.js
@@ -15,12 +15,4 @@ describe('class diagram', function () {
      expect(() => parser.parse(`classDiagram\nnamespace ${prop} {\n\tclass A\n}`)).not.toThrow();
    });
  });
-
-  describe('backtick escaping', function () {
-    it('should handle backtick-quoted namespace names', function () {
-      expect(() =>
-        parser.parse(`classDiagram\nnamespace \`A::B\` {\n\tclass \`IPC::Sender\`\n}`)
-      ).not.toThrow();
-    });
-  });
 });
--- a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
+++ b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
@@ -242,7 +242,6 @@ classLabel

 namespaceName
    : alphaNumToken { $$=$1; }
-    | classLiteralName { $$=$1; }
    | alphaNumToken DOT namespaceName { $$=$1+'.'+$3; }
    | alphaNumToken namespaceName { $$=$1+$2; }
    ;
--- a/packages/mermaid/src/diagrams/common/common.ts
+++ b/packages/mermaid/src/diagrams/common/common.ts
@@ -33,13 +33,13 @@ function setupDompurifyHooks() {
  const TEMPORARY_ATTRIBUTE = 'data-temp-href-target';

  DOMPurify.addHook('beforeSanitizeAttributes', (node) => {
-    if (node.tagName === 'A' && node.hasAttribute('target')) {
+    if (node instanceof Element && node.tagName === 'A' && node.hasAttribute('target')) {
      node.setAttribute(TEMPORARY_ATTRIBUTE, node.getAttribute('target') ?? '');
    }
  });

  DOMPurify.addHook('afterSanitizeAttributes', (node) => {
-    if (node.tagName === 'A' && node.hasAttribute(TEMPORARY_ATTRIBUTE)) {
+    if (node instanceof Element && node.tagName === 'A' && node.hasAttribute(TEMPORARY_ATTRIBUTE)) {
      node.setAttribute('target', node.getAttribute(TEMPORARY_ATTRIBUTE) ?? '');
      node.removeAttribute(TEMPORARY_ATTRIBUTE);
      if (node.getAttribute('target') === '_blank') {
--- a/packages/mermaid/src/diagrams/flowchart/elk/detector.ts
+++ b/packages/mermaid/src/diagrams/flowchart/elk/detector.ts
@@ -11,7 +11,7 @@ const detector: DiagramDetector = (txt, config = {}): boolean => {
    // If diagram explicitly states flowchart-elk
    /^\s*flowchart-elk/.test(txt) ||
    // If a flowchart/graph diagram has their default renderer set to elk
-    (/^\s*(flowchart|graph)/.test(txt) && config?.flowchart?.defaultRenderer === 'elk')
+    (/^\s*flowchart|graph/.test(txt) && config?.flowchart?.defaultRenderer === 'elk')
  ) {
    config.layout = 'elk';
    return true;
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.spec.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.spec.ts
@@ -125,60 +125,4 @@ describe('flow db getData', () => {
    const { edges } = flowDb.getData();
    expect(edges[0].curve).toBe('basis');
  });
-
-  it('should support modifying interpolate using edge id syntax', () => {
-    flowDb.addVertex('A', { text: 'A', type: 'text' }, undefined, [], [], '', {}, undefined);
-    flowDb.addVertex('B', { text: 'B', type: 'text' }, undefined, [], [], '', {}, undefined);
-    flowDb.addVertex('C', { text: 'C', type: 'text' }, undefined, [], [], '', {}, undefined);
-    flowDb.addVertex('D', { text: 'D', type: 'text' }, undefined, [], [], '', {}, undefined);
-    flowDb.addLink(['A'], ['B'], {});
-    flowDb.addLink(['A'], ['C'], { id: 'e2' });
-    flowDb.addLink(['B'], ['D'], { id: 'e3' });
-    flowDb.addLink(['C'], ['D'], {});
-    flowDb.updateLinkInterpolate(['default'], 'stepBefore');
-    flowDb.updateLinkInterpolate([0], 'basis');
-    flowDb.addVertex(
-      'e2',
-      { text: 'Shouldnt be used', type: 'text' },
-      undefined,
-      [],
-      [],
-      '',
-      {},
-      ' curve: monotoneX '
-    );
-    flowDb.addVertex(
-      'e3',
-      { text: 'Shouldnt be used', type: 'text' },
-      undefined,
-      [],
-      [],
-      '',
-      {},
-      ' curve: catmullRom '
-    );
-
-    const { edges } = flowDb.getData();
-    expect(edges[0].curve).toBe('basis');
-    expect(edges[1].curve).toBe('monotoneX');
-    expect(edges[2].curve).toBe('catmullRom');
-    expect(edges[3].curve).toBe('stepBefore');
-  });
-});
-
-describe('flow db direction', () => {
-  let flowDb: FlowDB;
-  beforeEach(() => {
-    flowDb = new FlowDB();
-  });
-
-  it('should set direction to TB when TD is set', () => {
-    flowDb.setDirection('TD');
-    expect(flowDb.getDirection()).toBe('TB');
-  });
-
-  it('should correctly set direction irrespective of leading spaces', () => {
-    flowDb.setDirection(' TD');
-    expect(flowDb.getDirection()).toBe('TB');
-  });
 });
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.ts
@@ -139,9 +139,6 @@ export class FlowDB implements DiagramDB {
      if (edgeDoc?.animation !== undefined) {
        edge.animation = edgeDoc.animation;
      }
-      if (edgeDoc?.curve !== undefined) {
-        edge.interpolate = edgeDoc.curve;
-      }
      return;
    }

@@ -406,8 +403,7 @@ You have to call mermaid.initialize.`
   *
   */
  public setDirection(dir: string) {
-    this.direction = dir.trim();
-
+    this.direction = dir;
    if (/.*</.exec(this.direction)) {
      this.direction = 'RL';
    }
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-lines.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-lines.spec.js
@@ -37,59 +37,6 @@ describe('[Lines] when parsing', () => {
    expect(edges[1].interpolate).toBe('cardinal');
  });

-  it('should handle edge curve properties using edge ID', function () {
-    const res = flow.parser.parse(
-      'graph TD\n' +
-        'A e1@-->B\n' +
-        'A uniqueName@-->C\n' +
-        'e1@{curve: basis}\n' +
-        'uniqueName@{curve: cardinal}'
-    );
-
-    const vert = flow.parser.yy.getVertices();
-    const edges = flow.parser.yy.getEdges();
-
-    expect(edges[0].interpolate).toBe('basis');
-    expect(edges[1].interpolate).toBe('cardinal');
-  });
-
-  it('should handle edge curve properties using edge ID but without overriding default', function () {
-    const res = flow.parser.parse(
-      'graph TD\n' +
-        'A e1@-->B\n' +
-        'A-->C\n' +
-        'linkStyle default interpolate linear\n' +
-        'e1@{curve: stepAfter}'
-    );
-
-    const vert = flow.parser.yy.getVertices();
-    const edges = flow.parser.yy.getEdges();
-
-    expect(edges[0].interpolate).toBe('stepAfter');
-    expect(edges.defaultInterpolate).toBe('linear');
-  });
-
-  it('should handle edge curve properties using edge ID mixed with line interpolation', function () {
-    const res = flow.parser.parse(
-      'graph TD\n' +
-        'A e1@-->B-->D\n' +
-        'A-->C e4@-->D-->E\n' +
-        'linkStyle default interpolate linear\n' +
-        'linkStyle 1 interpolate basis\n' +
-        'e1@{curve: monotoneX}\n' +
-        'e4@{curve: stepBefore}'
-    );
-
-    const vert = flow.parser.yy.getVertices();
-    const edges = flow.parser.yy.getEdges();
-
-    expect(edges[0].interpolate).toBe('monotoneX');
-    expect(edges[1].interpolate).toBe('basis');
-    expect(edges.defaultInterpolate).toBe('linear');
-    expect(edges[3].interpolate).toBe('stepBefore');
-    expect(edges.defaultInterpolate).toBe('linear');
-  });
-
  it('should handle line interpolation multi-numbered definitions', function () {
    const res = flow.parser.parse(
      'graph TD\n' + 'A-->B\n' + 'A-->C\n' + 'linkStyle 0,1 interpolate basis'
--- a/packages/mermaid/src/diagrams/gantt/ganttDb.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttDb.js
@@ -167,10 +167,7 @@ export const getTasks = function () {
 };

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

 export const setWeekday = function (txt) {
--- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
@@ -581,11 +581,17 @@ export const draw = function (text, id, version, diagObj) {

    rectangles
      .append('rect')
-      .attr('id', (d) => 'exclude-' + d.start.format('YYYY-MM-DD'))
-      .attr('x', (d) => timeScale(d.start.startOf('day')) + theSidePad)
+      .attr('id', function (d) {
+        return 'exclude-' + d.start.format('YYYY-MM-DD');
+      })
+      .attr('x', function (d) {
+        return timeScale(d.start) + theSidePad;
+      })
      .attr('y', conf.gridLineStartPadding)
-      .attr('width', (d) => timeScale(d.end.endOf('day')) - timeScale(d.start.startOf('day')))
-
+      .attr('width', function (d) {
+        const renderEnd = d.end.add(1, 'day');
+        return timeScale(renderEnd) - timeScale(d.start);
+      })
      .attr('height', h - theTopPad - conf.gridLineStartPadding)
      .attr('transform-origin', function (d, i) {
        return (
@@ -609,20 +615,9 @@ export const draw = function (text, id, version, diagObj) {
   * @param h
   */
  function makeGrid(theSidePad, theTopPad, w, h) {
-    const dateFormat = diagObj.db.getDateFormat();
-    const userAxisFormat = diagObj.db.getAxisFormat();
-    let axisFormat;
-    if (userAxisFormat) {
-      axisFormat = userAxisFormat;
-    } else if (dateFormat === 'D') {
-      axisFormat = '%d';
-    } else {
-      axisFormat = conf.axisFormat ?? '%Y-%m-%d';
-    }
-
    let bottomXAxis = axisBottom(timeScale)
      .tickSize(-h + theTopPad + conf.gridLineStartPadding)
-      .tickFormat(timeFormat(axisFormat));
+      .tickFormat(timeFormat(diagObj.db.getAxisFormat() || conf.axisFormat || '%Y-%m-%d'));

    const reTickInterval = /^([1-9]\d*)(millisecond|second|minute|hour|day|week|month)$/;
    const resultTickInterval = reTickInterval.exec(
@@ -674,7 +669,7 @@ export const draw = function (text, id, version, diagObj) {
    if (diagObj.db.topAxisEnabled() || conf.topAxis) {
      let topXAxis = axisTop(timeScale)
        .tickSize(-h + theTopPad + conf.gridLineStartPadding)
-        .tickFormat(timeFormat(axisFormat));
+        .tickFormat(timeFormat(diagObj.db.getAxisFormat() || conf.axisFormat || '%Y-%m-%d'));

      if (resultTickInterval !== null) {
        const every = resultTickInterval[1];
--- a/packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts
+++ b/packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts
@@ -1,14 +1,12 @@
 // @ts-ignore: JISON doesn't support types
 import parser from './parser/mindmap.jison';
-import { MindmapDB } from './mindmapDb.js';
+import db from './mindmapDb.js';
 import renderer from './mindmapRenderer.js';
 import styles from './styles.js';
 import type { DiagramDefinition } from '../../diagram-api/types.js';

 export const diagram: DiagramDefinition = {
-  get db() {
-    return new MindmapDB();
-  },
+  db,
  renderer,
  parser,
  styles,
--- a/packages/mermaid/src/diagrams/mindmap/mindmap.spec.ts
+++ b/packages/mermaid/src/diagrams/mindmap/mindmap.spec.ts
@@ -1,12 +1,12 @@
 // @ts-expect-error No types available for JISON
 import { parser as mindmap } from './parser/mindmap.jison';
-import { MindmapDB } from './mindmapDb.js';
+import mindmapDB from './mindmapDb.js';
 // Todo fix utils functions for tests
 import { setLogLevel } from '../../diagram-api/diagramAPI.js';

 describe('when parsing a mindmap ', function () {
  beforeEach(function () {
-    mindmap.yy = new MindmapDB();
+    mindmap.yy = mindmapDB;
    mindmap.yy.clear();
    setLogLevel('trace');
  });
--- a/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts
+++ b/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts
@@ -5,6 +5,70 @@ import { log } from '../../logger.js';
 import type { MindmapNode } from './mindmapTypes.js';
 import defaultConfig from '../../defaultConfig.js';

+let nodes: MindmapNode[] = [];
+let cnt = 0;
+let elements: Record<number, D3Element> = {};
+
+const clear = () => {
+  nodes = [];
+  cnt = 0;
+  elements = {};
+};
+
+const getParent = function (level: number) {
+  for (let i = nodes.length - 1; i >= 0; i--) {
+    if (nodes[i].level < level) {
+      return nodes[i];
+    }
+  }
+  // No parent found
+  return null;
+};
+
+const getMindmap = () => {
+  return nodes.length > 0 ? nodes[0] : null;
+};
+
+const addNode = (level: number, id: string, descr: string, type: number) => {
+  log.info('addNode', level, id, descr, type);
+  const conf = getConfig();
+  let padding: number = conf.mindmap?.padding ?? defaultConfig.mindmap.padding;
+  switch (type) {
+    case nodeType.ROUNDED_RECT:
+    case nodeType.RECT:
+    case nodeType.HEXAGON:
+      padding *= 2;
+  }
+
+  const node = {
+    id: cnt++,
+    nodeId: sanitizeText(id, conf),
+    level,
+    descr: sanitizeText(descr, conf),
+    type,
+    children: [],
+    width: conf.mindmap?.maxNodeWidth ?? defaultConfig.mindmap.maxNodeWidth,
+    padding,
+  } satisfies MindmapNode;
+
+  const parent = getParent(level);
+  if (parent) {
+    parent.children.push(node);
+    // Keep all nodes in the list
+    nodes.push(node);
+  } else {
+    if (nodes.length === 0) {
+      // First node, the root
+      nodes.push(node);
+    } else {
+      // Syntax error ... there can only bee one root
+      throw new Error(
+        'There can be only one root. No parent could be found for ("' + node.descr + '")'
+      );
+    }
+  }
+};
+
 const nodeType = {
  DEFAULT: 0,
  NO_BORDER: 0,
@@ -14,149 +78,82 @@ const nodeType = {
  CLOUD: 4,
  BANG: 5,
  HEXAGON: 6,
+};
+
+const getType = (startStr: string, endStr: string): number => {
+  log.debug('In get type', startStr, endStr);
+  switch (startStr) {
+    case '[':
+      return nodeType.RECT;
+    case '(':
+      return endStr === ')' ? nodeType.ROUNDED_RECT : nodeType.CLOUD;
+    case '((':
+      return nodeType.CIRCLE;
+    case ')':
+      return nodeType.CLOUD;
+    case '))':
+      return nodeType.BANG;
+    case '{{':
+      return nodeType.HEXAGON;
+    default:
+      return nodeType.DEFAULT;
+  }
+};
+
+const setElementForId = (id: number, element: D3Element) => {
+  elements[id] = element;
+};
+
+const decorateNode = (decoration?: { class?: string; icon?: string }) => {
+  if (!decoration) {
+    return;
+  }
+  const config = getConfig();
+  const node = nodes[nodes.length - 1];
+  if (decoration.icon) {
+    node.icon = sanitizeText(decoration.icon, config);
+  }
+  if (decoration.class) {
+    node.class = sanitizeText(decoration.class, config);
+  }
+};
+
+const type2Str = (type: number) => {
+  switch (type) {
+    case nodeType.DEFAULT:
+      return 'no-border';
+    case nodeType.RECT:
+      return 'rect';
+    case nodeType.ROUNDED_RECT:
+      return 'rounded-rect';
+    case nodeType.CIRCLE:
+      return 'circle';
+    case nodeType.CLOUD:
+      return 'cloud';
+    case nodeType.BANG:
+      return 'bang';
+    case nodeType.HEXAGON:
+      return 'hexgon'; // cspell: disable-line
+    default:
+      return 'no-border';
+  }
+};
+
+// Expose logger to grammar
+const getLogger = () => log;
+const getElementById = (id: number) => elements[id];
+
+const db = {
+  clear,
+  addNode,
+  getMindmap,
+  nodeType,
+  getType,
+  setElementForId,
+  decorateNode,
+  type2Str,
+  getLogger,
+  getElementById,
 } as const;

-export class MindmapDB {
-  private nodes: MindmapNode[] = [];
-  private count = 0;
-  private elements: Record<number, D3Element> = {};
-  public readonly nodeType: typeof nodeType;
-
-  constructor() {
-    this.getLogger = this.getLogger.bind(this);
-    this.nodeType = nodeType;
-    this.clear();
-    this.getType = this.getType.bind(this);
-    this.getMindmap = this.getMindmap.bind(this);
-    this.getElementById = this.getElementById.bind(this);
-    this.getParent = this.getParent.bind(this);
-    this.getMindmap = this.getMindmap.bind(this);
-    this.addNode = this.addNode.bind(this);
-    this.decorateNode = this.decorateNode.bind(this);
-  }
-  public clear() {
-    this.nodes = [];
-    this.count = 0;
-    this.elements = {};
-  }
-
-  public getParent(level: number): MindmapNode | null {
-    for (let i = this.nodes.length - 1; i >= 0; i--) {
-      if (this.nodes[i].level < level) {
-        return this.nodes[i];
-      }
-    }
-    return null;
-  }
-
-  public getMindmap(): MindmapNode | null {
-    return this.nodes.length > 0 ? this.nodes[0] : null;
-  }
-
-  public addNode(level: number, id: string, descr: string, type: number): void {
-    log.info('addNode', level, id, descr, type);
-
-    const conf = getConfig();
-    let padding = conf.mindmap?.padding ?? defaultConfig.mindmap.padding;
-
-    switch (type) {
-      case this.nodeType.ROUNDED_RECT:
-      case this.nodeType.RECT:
-      case this.nodeType.HEXAGON:
-        padding *= 2;
-        break;
-    }
-
-    const node: MindmapNode = {
-      id: this.count++,
-      nodeId: sanitizeText(id, conf),
-      level,
-      descr: sanitizeText(descr, conf),
-      type,
-      children: [],
-      width: conf.mindmap?.maxNodeWidth ?? defaultConfig.mindmap.maxNodeWidth,
-      padding,
-    };
-
-    const parent = this.getParent(level);
-    if (parent) {
-      parent.children.push(node);
-      this.nodes.push(node);
-    } else {
-      if (this.nodes.length === 0) {
-        this.nodes.push(node);
-      } else {
-        throw new Error(
-          `There can be only one root. No parent could be found for ("${node.descr}")`
-        );
-      }
-    }
-  }
-
-  public getType(startStr: string, endStr: string) {
-    log.debug('In get type', startStr, endStr);
-    switch (startStr) {
-      case '[':
-        return this.nodeType.RECT;
-      case '(':
-        return endStr === ')' ? this.nodeType.ROUNDED_RECT : this.nodeType.CLOUD;
-      case '((':
-        return this.nodeType.CIRCLE;
-      case ')':
-        return this.nodeType.CLOUD;
-      case '))':
-        return this.nodeType.BANG;
-      case '{{':
-        return this.nodeType.HEXAGON;
-      default:
-        return this.nodeType.DEFAULT;
-    }
-  }
-
-  public setElementForId(id: number, element: D3Element): void {
-    this.elements[id] = element;
-  }
-  public getElementById(id: number) {
-    return this.elements[id];
-  }
-
-  public decorateNode(decoration?: { class?: string; icon?: string }): void {
-    if (!decoration) {
-      return;
-    }
-
-    const config = getConfig();
-    const node = this.nodes[this.nodes.length - 1];
-    if (decoration.icon) {
-      node.icon = sanitizeText(decoration.icon, config);
-    }
-    if (decoration.class) {
-      node.class = sanitizeText(decoration.class, config);
-    }
-  }
-
-  type2Str(type: number): string {
-    switch (type) {
-      case this.nodeType.DEFAULT:
-        return 'no-border';
-      case this.nodeType.RECT:
-        return 'rect';
-      case this.nodeType.ROUNDED_RECT:
-        return 'rounded-rect';
-      case this.nodeType.CIRCLE:
-        return 'circle';
-      case this.nodeType.CLOUD:
-        return 'cloud';
-      case this.nodeType.BANG:
-        return 'bang';
-      case this.nodeType.HEXAGON:
-        return 'hexgon'; // cspell: disable-line
-      default:
-        return 'no-border';
-    }
-  }
-
-  public getLogger() {
-    return log;
-  }
-}
+export default db;
--- a/Show More
+++ b/Show More