fix: the breaking argos

Some optional description over here if you need to add more info

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

.build/common.ts

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

.build/types.ts

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

.changeset/beige-peas-shave.md

@@ -0,0 +1,5 @@
+---
+'@mermaid-js/mermaid-zenuml': patch
+---
+
+Fixed a critical bug that the ZenUML diagram is not rendered.

.changeset/four-eyes-wish.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Ensure edge label color is applied when using classDef with edge IDs

.changeset/large-mirrors-cheer.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Update casing of ID in requirement diagram

.changeset/lemon-masks-unite.md

@@ -0,0 +1,5 @@
+---
+'mermaid': minor
+---
+
+feat: Added support for per link curve styling in flowchart diagram using edge ids

.changeset/light-flowers-judge.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Make flowchart elk detector regex match less greedy

.changeset/lovely-queens-own.md

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

.changeset/ninety-roses-turn.md

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

.changeset/silver-eyes-build.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+chore: migrate to class-based ArchitectureDB implementation

.changeset/smart-humans-cover.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Update flowchart direction TD's behavior to be the same as TB

.changeset/vast-buses-see.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+chore: Update packet diagram to use new class-based database structure

.cspell/code-terms.txt

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

.github/lychee.toml

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

.github/workflows/autofix.yml

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

.github/workflows/e2e-timings.yml

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

.github/workflows/pr-labeler.yml

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

.github/workflows/validate-lockfile.yml

@@ -0,0 +1,70 @@
+name: Validate pnpm-lock.yaml
+
+on:
+  pull_request:
+    paths:
+      - 'pnpm-lock.yaml'
+      - '**/package.json'
+      - '.github/workflows/validate-lockfile.yml'
+
+jobs:
+  validate-lockfile:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+
+      - name: Validate pnpm-lock.yaml entries
+        id: validate # give this step an ID so we can reference its outputs
+        run: |
+          issues=()
+
+          # 1) No tarball references
+          if grep -qF 'tarball:' pnpm-lock.yaml; then
+            issues+=("• Tarball references found (forbidden)")
+          fi
+
+          # 2) No unwanted vitepress paths
+          if grep -qF 'packages/mermaid/src/vitepress' pnpm-lock.yaml; then
+            issues+=("• Disallowed path 'packages/mermaid/src/vitepress' present. Run `rm -rf packages/mermaid/src/vitepress && pnpm install` to regenerate.")
+          fi
+
+          # 3) Lockfile only changes when package.json changes
+          git diff --name-only ${{ github.event.pull_request.base.sha }} ${{ github.sha }} > changed.txt
+          if grep -q '^pnpm-lock.yaml$' changed.txt && ! grep -q 'package.json' changed.txt; then
+            issues+=("• pnpm-lock.yaml changed without any package.json modification")
+          fi
+
+          # If any issues, output them and fail
+          if [ ${#issues[@]} -gt 0 ]; then
+            # Use the new GITHUB_OUTPUT approach to set a multiline output
+            {
+              echo "errors<<EOF"
+              printf '%s\n' "${issues[@]}"
+              echo "EOF"
+            } >> $GITHUB_OUTPUT
+            exit 1
+          fi
+
+      - name: Comment on PR if validation failed
+        if: failure()
+        uses: peter-evans/create-or-update-comment@v4
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          issue-number: ${{ github.event.pull_request.number }}
+          body: |
+            The following issue(s) were detected:
+            ${{ steps.validate.outputs.errors }}
+
+            Please address these and push an update.
+
+            _Posted automatically by GitHub Actions_

CHANGELOG.md

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

README.md

@@ -95,10 +95,6 @@ In our release process we rely heavily on visual regression tests using [applito
 
 <!-- </Main description> -->
 
-## Mermaid AI Bot
-
-[Mermaid](https://codeparrot.ai/oracle?owner=mermaid-js&repo=mermaid) Bot will help you understand this repository better. You can ask for code examples, installation guide, debugging help and much more.
-
 ## Examples
 
 **The following are some examples of the diagrams, charts and graphs that can be made using Mermaid. Click here to jump into the [text syntax](https://mermaid.js.org/intro/syntax-reference.html).**

__mocks__/d3.ts

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

cypress.config.ts

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

cypress/integration/rendering/block.spec.js

@@ -384,4 +384,17 @@ 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
+`,
+      {}
+    );
+  });
 });

cypress/integration/rendering/classDiagram.spec.js

@@ -495,4 +495,21 @@ 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' } }
+      );
+    });
+  });
 });

cypress/integration/rendering/erDiagram.spec.js

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

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

@@ -1113,4 +1113,37 @@ end
       );
     });
   });
+
+  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 }
+      `
+    );
+  });
+
+  it('V2 - 17: should apply class def colour to edge label', () => {
+    imgSnapshotTest(
+      ` graph LR
+    id1(Start) link@-- "Label" -->id2(Stop)
+    style id1 fill:#f9f,stroke:#333,stroke-width:4px
+
+class id2 myClass
+classDef myClass fill:#bbf,stroke:#f66,stroke-width:2px,color:white,stroke-dasharray: 5 5
+class link myClass
+`
+    );
+  });
 });

cypress/integration/rendering/mindmap.spec.ts

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

cypress/integration/rendering/packet.spec.ts

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

cypress/integration/rendering/treemap.spec.ts

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

cypress/platform/knsv2.html

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

cypress/timings.json

@@ -2,35 +2,35 @@
   "durations": [
     {
       "spec": "cypress/integration/other/configuration.spec.js",
-      "duration": 6130
+      "duration": 5672
     },
     {
       "spec": "cypress/integration/other/external-diagrams.spec.js",
-      "duration": 1974
+      "duration": 1990
     },
     {
       "spec": "cypress/integration/other/ghsa.spec.js",
-      "duration": 3308
+      "duration": 3186
     },
     {
       "spec": "cypress/integration/other/iife.spec.js",
-      "duration": 1877
+      "duration": 1948
     },
     {
       "spec": "cypress/integration/other/interaction.spec.js",
-      "duration": 10902
+      "duration": 11938
     },
     {
       "spec": "cypress/integration/other/rerender.spec.js",
-      "duration": 1836
+      "duration": 1932
     },
     {
       "spec": "cypress/integration/other/xss.spec.js",
-      "duration": 26467
+      "duration": 27237
     },
     {
       "spec": "cypress/integration/rendering/appli.spec.js",
-      "duration": 3129
+      "duration": 3170
     },
     {
       "spec": "cypress/integration/rendering/architecture.spec.ts",
@@ -38,147 +38,147 @@
     },
     {
       "spec": "cypress/integration/rendering/block.spec.js",
-      "duration": 16230
+      "duration": 17390
     },
     {
       "spec": "cypress/integration/rendering/c4.spec.js",
-      "duration": 5231
+      "duration": 5296
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-elk-v3.spec.js",
-      "duration": 38113
+      "duration": 39004
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-handDrawn-v3.spec.js",
-      "duration": 36423
+      "duration": 37653
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-v2.spec.js",
-      "duration": 22509
+      "duration": 23278
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-v3.spec.js",
-      "duration": 34933
+      "duration": 36645
     },
     {
       "spec": "cypress/integration/rendering/classDiagram.spec.js",
-      "duration": 14681
+      "duration": 15418
     },
     {
       "spec": "cypress/integration/rendering/conf-and-directives.spec.js",
-      "duration": 8877
+      "duration": 9684
     },
     {
       "spec": "cypress/integration/rendering/current.spec.js",
-      "duration": 2517
+      "duration": 2570
     },
     {
       "spec": "cypress/integration/rendering/erDiagram-unified.spec.js",
-      "duration": 81226
+      "duration": 84687
     },
     {
       "spec": "cypress/integration/rendering/erDiagram.spec.js",
-      "duration": 14211
+      "duration": 14819
     },
     {
       "spec": "cypress/integration/rendering/errorDiagram.spec.js",
-      "duration": 3355
+      "duration": 3371
     },
     {
       "spec": "cypress/integration/rendering/flowchart-elk.spec.js",
-      "duration": 38857
+      "duration": 39925
     },
     {
       "spec": "cypress/integration/rendering/flowchart-handDrawn.spec.js",
-      "duration": 28570
+      "duration": 34694
     },
     {
       "spec": "cypress/integration/rendering/flowchart-icon.spec.js",
-      "duration": 6902
+      "duration": 7137
     },
     {
       "spec": "cypress/integration/rendering/flowchart-shape-alias.spec.ts",
-      "duration": 23075
+      "duration": 24740
     },
     {
       "spec": "cypress/integration/rendering/flowchart-v2.spec.js",
-      "duration": 40514
+      "duration": 42077
     },
     {
       "spec": "cypress/integration/rendering/flowchart.spec.js",
-      "duration": 28611
+      "duration": 30642
     },
     {
       "spec": "cypress/integration/rendering/gantt.spec.js",
-      "duration": 16605
+      "duration": 18085
     },
     {
       "spec": "cypress/integration/rendering/gitGraph.spec.js",
-      "duration": 47636
+      "duration": 50107
     },
     {
       "spec": "cypress/integration/rendering/iconShape.spec.ts",
-      "duration": 262219
+      "duration": 276279
     },
     {
       "spec": "cypress/integration/rendering/imageShape.spec.ts",
-      "duration": 54111
+      "duration": 56505
     },
     {
       "spec": "cypress/integration/rendering/info.spec.ts",
-      "duration": 3006
+      "duration": 3036
     },
     {
       "spec": "cypress/integration/rendering/journey.spec.js",
-      "duration": 6858
+      "duration": 6889
     },
     {
       "spec": "cypress/integration/rendering/kanban.spec.ts",
-      "duration": 7281
+      "duration": 7353
     },
     {
       "spec": "cypress/integration/rendering/katex.spec.js",
-      "duration": 3579
+      "duration": 3580
     },
     {
       "spec": "cypress/integration/rendering/marker_unique_id.spec.js",
-      "duration": 2448
+      "duration": 2508
     },
     {
       "spec": "cypress/integration/rendering/mindmap.spec.ts",
-      "duration": 10618
+      "duration": 10939
     },
     {
       "spec": "cypress/integration/rendering/newShapes.spec.ts",
-      "duration": 140874
+      "duration": 149102
     },
     {
       "spec": "cypress/integration/rendering/oldShapes.spec.ts",
-      "duration": 108015
+      "duration": 113987
     },
     {
       "spec": "cypress/integration/rendering/packet.spec.ts",
-      "duration": 4241
+      "duration": 4060
     },
     {
       "spec": "cypress/integration/rendering/pie.spec.ts",
-      "duration": 5645
+      "duration": 5715
     },
     {
       "spec": "cypress/integration/rendering/quadrantChart.spec.js",
-      "duration": 8524
+      "duration": 8945
     },
     {
       "spec": "cypress/integration/rendering/radar.spec.js",
-      "duration": 5203
+      "duration": 5337
     },
     {
       "spec": "cypress/integration/rendering/requirement.spec.js",
-      "duration": 2635
+      "duration": 2643
     },
     {
       "spec": "cypress/integration/rendering/requirementDiagram-unified.spec.js",
-      "duration": 50512
+      "duration": 52072
     },
     {
       "spec": "cypress/integration/rendering/sankey.spec.ts",
@@ -186,31 +186,35 @@
     },
     {
       "spec": "cypress/integration/rendering/sequencediagram.spec.js",
-      "duration": 34559
+      "duration": 35721
     },
     {
       "spec": "cypress/integration/rendering/stateDiagram-v2.spec.js",
-      "duration": 24421
+      "duration": 26030
     },
     {
       "spec": "cypress/integration/rendering/stateDiagram.spec.js",
-      "duration": 15316
+      "duration": 16333
     },
     {
       "spec": "cypress/integration/rendering/theme.spec.js",
-      "duration": 28240
+      "duration": 29287
     },
     {
       "spec": "cypress/integration/rendering/timeline.spec.ts",
-      "duration": 6808
+      "duration": 8491
+    },
+    {
+      "spec": "cypress/integration/rendering/treemap.spec.ts",
+      "duration": 12291
     },
     {
       "spec": "cypress/integration/rendering/xyChart.spec.js",
-      "duration": 19359
+      "duration": 20651
     },
     {
       "spec": "cypress/integration/rendering/zenuml.spec.js",
-      "duration": 3164
+      "duration": 3218
     }
   ]
 }

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/4.7.0/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
     />
     <link
       href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"

demos/packet.html

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

demos/treemap.html

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

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

docs/community/new-diagram.md

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

docs/diagrams/flowchart-code-flow.mmd

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

docs/diagrams/mermaid-api-sequence.mmd

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

docs/diagrams/mindmap-implementation-sequence.mmd

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

docs/ecosystem/integrations-community.md

@@ -84,6 +84,7 @@ 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
 
@@ -103,6 +104,7 @@ 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
 
@@ -245,7 +247,7 @@ Communication tools and platforms
 | GitHub + Mermaid         | -                                                                                                           | [🦊🔗](https://addons.mozilla.org/firefox/addon/github-mermaid/)               | -                                                                              | -                                                                                                                            | [🐙🔗](https://github.com/BackMarket/github-mermaid-extension)                                       |
 | Asciidoctor Live Preview | [🎡🔗](https://chromewebstore.google.com/detail/asciidoctorjs-live-previe/iaalpfgpbocpdfblpnhhgllgbdbchmia) | -                                                                              | -                                                                              | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/asciidoctorjs-live-previ/pefkelkanablhjdekgdahplkccnbdggd?hl=en-US) | -                                                                                                    |
 | Diagram Tab              | -                                                                                                           | -                                                                              | -                                                                              | -                                                                                                                            | [🐙🔗](https://github.com/khafast/diagramtab)                                                        |
-| Markdown Diagrams        | [🎡🔗](https://chromewebstore.google.com/detail/markdown-diagrams/pmoglnmodacnbbofbgcagndelmgaclel)         | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-diagrams/)      | [🔴🔗](https://addons.opera.com/en/extensions/details/markdown-diagrams/)      | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/markdown-diagrams/hceenoomhhdkjjijnmlclkpenkapfihe)                 | [🐙🔗](https://github.com/marcozaccari/markdown-diagrams-browser-extension/tree/master/doc/examples) |
+| Markdown Diagrams        | [🎡🔗](https://chromewebstore.google.com/detail/markdown-diagrams/pmoglnmodacnbbofbgcagndelmgaclel)         | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-diagrams/)      | -                                                                              | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/markdown-diagrams/hceenoomhhdkjjijnmlclkpenkapfihe)                 | [🐙🔗](https://github.com/marcozaccari/markdown-diagrams-browser-extension/tree/master/doc/examples) |
 | Markdown Viewer          | -                                                                                                           | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | -                                                                              | -                                                                                                                            | [🐙🔗](https://github.com/simov/markdown-viewer)                                                     |
 | Extensions for Mermaid   | -                                                                                                           | -                                                                              | [🔴🔗](https://addons.opera.com/en/extensions/details/extensions-for-mermaid/) | -                                                                                                                            | [🐙🔗](https://github.com/Stefan-S/mermaid-extension)                                                |
 | Chrome Diagrammer        | [🎡🔗](https://chromewebstore.google.com/detail/chrome-diagrammer/bkpbgjmkomfoakfklcjeoegkklgjnnpk)         | -                                                                              | -                                                                              | -                                                                                                                            | -                                                                                                    |
@@ -270,5 +272,6 @@ Communication tools and platforms
   - [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin)
 - [Reveal CK](https://github.com/jedcn/reveal-ck)
   - [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin)
+- [Vitepress Plugin](https://github.com/sametcn99/vitepress-mermaid-renderer)
 
 <!--- cspell:ignore Blazorade HueHive --->

docs/ecosystem/integrations-create.md

@@ -16,9 +16,7 @@ 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`.
-
-Currently pending [IANA](https://www.iana.org/) recognition.
+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).
 
 ## Showcase
 

docs/ecosystem/mermaid-chart.md

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

docs/syntax/flowchart.md

@@ -1795,15 +1795,54 @@ 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:
 
 ```
-%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
+---
+config:
+  flowchart:
+    curve: stepBefore
+---
 graph LR
 ```
 
-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.
+#### 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.
+```
 
 ### Styling a node
 

docs/syntax/packet.md

@@ -17,7 +17,7 @@ This diagram type is particularly useful for developers, network engineers, educ
 ## Syntax
 
 ```
-packet-beta
+packet
 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-beta
+packet
 +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-beta
 ---
 title: "TCP Packet"
 ---
-packet-beta
+packet
 0-15: "Source Port"
 16-31: "Destination Port"
 32-63: "Sequence Number"
@@ -65,7 +65,7 @@ packet-beta
 ---
 title: "TCP Packet"
 ---
-packet-beta
+packet
 0-15: "Source Port"
 16-31: "Destination Port"
 32-63: "Sequence Number"
@@ -86,7 +86,7 @@ packet-beta
 ```
 
 ```mermaid-example
-packet-beta
+packet
 title UDP Packet
 +16: "Source Port"
 +16: "Destination Port"
@@ -96,7 +96,7 @@ title UDP Packet
 ```
 
 ```mermaid
-packet-beta
+packet
 title UDP Packet
 +16: "Source Port"
 +16: "Destination Port"
@@ -144,7 +144,7 @@ config:
     packet:
       startByteColor: red
 ---
-packet-beta
+packet
 0-15: "Source Port"
 16-31: "Destination Port"
 32-63: "Sequence Number"

docs/syntax/treemap.md

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

package.json

@@ -64,10 +64,10 @@
   },
   "devDependencies": {
     "@applitools/eyes-cypress": "^3.44.9",
-    "@argos-ci/cypress": "^4.0.3",
+    "@argos-ci/cypress": "^5.0.2",
     "@changesets/changelog-github": "^0.5.1",
     "@changesets/cli": "^2.27.12",
-    "@cspell/eslint-plugin": "^8.19.3",
+    "@cspell/eslint-plugin": "^8.19.4",
     "@cypress/code-coverage": "^3.12.49",
     "@eslint/js": "^9.26.0",
     "@rollup/plugin-typescript": "^12.1.2",
@@ -83,51 +83,51 @@
     "@vitest/spy": "^3.0.6",
     "@vitest/ui": "^3.0.6",
     "ajv": "^8.17.1",
-    "chokidar": "^4.0.3",
+    "chokidar": "3.6.0",
     "concurrently": "^9.1.2",
     "cors": "^2.8.5",
     "cpy-cli": "^5.0.0",
     "cross-env": "^7.0.3",
-    "cspell": "^8.6.1",
-    "cypress": "^14.0.3",
+    "cspell": "^9.1.3",
+    "cypress": "^14.5.1",
     "cypress-image-snapshot": "^4.0.1",
     "cypress-split": "^1.24.14",
     "esbuild": "^0.25.0",
     "eslint": "^9.26.0",
-    "eslint-config-prettier": "^10.1.1",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-cypress": "^4.3.0",
-    "eslint-plugin-html": "^8.1.2",
-    "eslint-plugin-jest": "^28.11.0",
-    "eslint-plugin-jsdoc": "^50.6.9",
+    "eslint-plugin-html": "^8.1.3",
+    "eslint-plugin-jest": "^28.14.0",
+    "eslint-plugin-jsdoc": "^50.8.0",
     "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.0",
+    "eslint-plugin-unicorn": "^59.0.1",
     "express": "^5.1.0",
     "globals": "^16.0.0",
     "globby": "^14.0.2",
     "husky": "^9.1.7",
-    "jest": "^29.7.0",
+    "jest": "^30.0.4",
     "jison": "^0.4.18",
     "js-yaml": "^4.1.0",
-    "jsdom": "^26.0.0",
+    "jsdom": "^26.1.0",
     "langium-cli": "3.3.0",
-    "lint-staged": "^15.2.11",
+    "lint-staged": "^16.1.2",
     "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": "^5.14.0",
+    "rollup-plugin-visualizer": "^6.0.3",
     "start-server-and-test": "^2.0.10",
     "tslib": "^2.8.1",
     "tsx": "^4.7.3",
     "typescript": "~5.7.3",
-    "typescript-eslint": "^8.32.0",
-    "vite": "^6.1.1",
+    "typescript-eslint": "^8.38.0",
+    "vite": "^7.0.3",
     "vite-plugin-istanbul": "^7.0.0",
     "vitest": "^3.0.6"
   },
@@ -139,8 +139,13 @@
       "roughjs": "patches/roughjs.patch"
     },
     "onlyBuiltDependencies": [
+      "canvas",
       "cypress",
       "esbuild"
+    ],
+    "ignoredBuiltDependencies": [
+      "sharp",
+      "vue-demi"
     ]
   }
 }

packages/examples/CHANGELOG.md

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

packages/examples/README.md

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

packages/examples/package.json

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

packages/examples/src/example.spec.ts

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

packages/examples/src/examples/architecture.ts

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

packages/examples/src/examples/block.ts

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

packages/examples/src/examples/c4.ts

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

packages/examples/src/examples/class.ts

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

packages/examples/src/examples/er.ts

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

packages/examples/src/examples/flowchart.ts

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

packages/examples/src/examples/gantt.ts

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

packages/examples/src/examples/git.ts

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

packages/examples/src/examples/kanban.ts

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

packages/examples/src/examples/mindmap.ts

@@ -0,0 +1,32 @@
+import type { DiagramMetadata } from '../types.js';
+
+export default {
+  id: 'mindmap',
+  name: 'Mindmap',
+  description: 'Visualize ideas and concepts in a tree-like structure',
+  examples: [
+    {
+      title: 'Basic Mindmap',
+      isDefault: true,
+      code: `mindmap
+  root((mindmap))
+    Origins
+      Long history
+      ::icon(fa fa-book)
+      Popularisation
+        British popular psychology author Tony Buzan
+    Research
+      On effectiveness<br/>and features
+      On Automatic creation
+        Uses
+            Creative techniques
+            Strategic planning
+            Argument mapping
+    Tools
+      Pen and paper
+      Mermaid`,
+    },
+  ],
+} satisfies DiagramMetadata;
+
+// cspell:ignore Buzan

packages/examples/src/examples/packet.ts

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

packages/examples/src/examples/pie.ts

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

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

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

packages/examples/src/examples/radar.ts

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

packages/examples/src/examples/requirement.ts

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

packages/examples/src/examples/sankey.ts

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

packages/examples/src/examples/sequence.ts

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

packages/examples/src/examples/state.ts

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

packages/examples/src/examples/timeline.ts

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

packages/examples/src/examples/treemap.ts

@@ -0,0 +1,21 @@
+import type { DiagramMetadata } from '../types.js';
+
+export default {
+  id: 'treemap',
+  name: 'Treemap',
+  description: 'Visualize hierarchical data as nested rectangles',
+  examples: [
+    {
+      title: 'Treemap',
+      isDefault: true,
+      code: `treemap-beta
+"Section 1"
+    "Leaf 1.1": 12
+    "Section 1.2"
+      "Leaf 1.2.1": 12
+"Section 2"
+    "Leaf 2.1": 20
+    "Leaf 2.2": 25`,
+    },
+  ],
+} satisfies DiagramMetadata;

packages/examples/src/examples/user-journey.ts

@@ -0,0 +1,22 @@
+import type { DiagramMetadata } from '../types.js';
+
+export default {
+  id: 'journey',
+  name: 'User Journey Diagram',
+  description: 'Visualize user interactions and experiences with a system',
+  examples: [
+    {
+      title: 'My Working Day',
+      isDefault: true,
+      code: `journey
+    title My working day
+    section Go to work
+      Make tea: 5: Me
+      Go upstairs: 3: Me
+      Do work: 1: Me, Cat
+    section Go home
+      Go downstairs: 5: Me
+      Sit down: 5: Me`,
+    },
+  ],
+} satisfies DiagramMetadata;

packages/examples/src/examples/xychart.ts

@@ -0,0 +1,19 @@
+import type { DiagramMetadata } from '../types.js';
+
+export default {
+  id: 'xychart',
+  name: 'XY Chart',
+  description: 'Create scatter plots and line charts with customizable axes',
+  examples: [
+    {
+      title: 'Sales Revenue',
+      isDefault: true,
+      code: `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
+    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]`,
+    },
+  ],
+} satisfies DiagramMetadata;

packages/examples/src/index.ts

@@ -0,0 +1,48 @@
+import type { DiagramMetadata } from './types.js';
+import flowChart from './examples/flowchart.js';
+import c4 from './examples/c4.js';
+import kanban from './examples/kanban.js';
+import classDiagram from './examples/class.js';
+import sequenceDiagram from './examples/sequence.js';
+import pieDiagram from './examples/pie.js';
+import userJourneyDiagram from './examples/user-journey.js';
+import mindmapDiagram from './examples/mindmap.js';
+import requirementDiagram from './examples/requirement.js';
+import radarDiagram from './examples/radar.js';
+import stateDiagram from './examples/state.js';
+import erDiagram from './examples/er.js';
+import gitDiagram from './examples/git.js';
+import architectureDiagram from './examples/architecture.js';
+import xychartDiagram from './examples/xychart.js';
+import sankeyDiagram from './examples/sankey.js';
+import ganttDiagram from './examples/gantt.js';
+import timelineDiagram from './examples/timeline.js';
+import quadrantChart from './examples/quadrant-chart.js';
+import packetDiagram from './examples/packet.js';
+import blockDiagram from './examples/block.js';
+import treemapDiagram from './examples/treemap.js';
+
+export const diagramData: DiagramMetadata[] = [
+  flowChart,
+  c4,
+  kanban,
+  classDiagram,
+  sequenceDiagram,
+  pieDiagram,
+  userJourneyDiagram,
+  mindmapDiagram,
+  requirementDiagram,
+  radarDiagram,
+  stateDiagram,
+  erDiagram,
+  gitDiagram,
+  architectureDiagram,
+  xychartDiagram,
+  sankeyDiagram,
+  ganttDiagram,
+  timelineDiagram,
+  quadrantChart,
+  packetDiagram,
+  blockDiagram,
+  treemapDiagram,
+];

packages/examples/src/types.ts

@@ -0,0 +1,12 @@
+export interface Example {
+  title: string;
+  code: string;
+  isDefault?: boolean;
+}
+
+export interface DiagramMetadata {
+  id: string;
+  name: string;
+  description: string;
+  examples: Example[];
+}

packages/examples/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "module": "Node16",
+    "moduleResolution": "Node16"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

packages/mermaid-zenuml/README.md

@@ -1 +0,0 @@
-../mermaid/src/docs/syntax/zenuml.md

packages/mermaid-zenuml/README.md

@@ -0,0 +1,384 @@
+# @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)

packages/mermaid-zenuml/package.json

@@ -33,7 +33,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@zenuml/core": "^3.31.1"
+    "@zenuml/core": "^3.35.2"
   },
   "devDependencies": {
     "mermaid": "workspace:^"

packages/mermaid-zenuml/src/zenuml.d.ts

@@ -0,0 +1,11 @@
+declare module '@zenuml/core' {
+  interface RenderOptions {
+    theme?: string;
+    mode?: string;
+  }
+
+  export default class ZenUml {
+    constructor(container: Element);
+    render(text: string, options?: RenderOptions): Promise<void>;
+  }
+}

packages/mermaid-zenuml/src/zenumlRenderer.ts

@@ -53,7 +53,6 @@ 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' });

packages/mermaid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "11.7.0",
+  "version": "11.9.0",
   "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.9",
+    "katex": "^0.16.22",
     "khroma": "^2.1.0",
     "lodash-es": "^4.17.21",
-    "marked": "^15.0.7",
+    "marked": "^16.0.0",
     "roughjs": "^4.6.6",
     "stylis": "^4.3.6",
     "ts-dedent": "^2.2.0",
@@ -105,13 +105,14 @@
     "@types/stylis": "^4.2.7",
     "@types/uuid": "^10.0.0",
     "ajv": "^8.17.1",
-    "chokidar": "^4.0.3",
+    "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.0.0",
+    "jsdom": "^26.1.0",
     "json-schema-to-typescript": "^15.0.4",
     "micromatch": "^4.0.8",
     "path-browserify": "^1.0.1",

packages/mermaid/src/accessibility.spec.ts

@@ -1,28 +1,25 @@
-import { MockedD3 } from './tests/MockedD3.js';
-import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility.js';
-import type { D3Element } from './types.js';
+import { addSVGa11yTitleDescription, setA11yDiagramInfo } from './accessibility.js';
+import { ensureNodeFromSelector, jsdomIt } from './tests/util.js';
+import { expect } from 'vitest';
 
 describe('accessibility', () => {
-  const fauxSvgNode: MockedD3 = new MockedD3();
-
   describe('setA11yDiagramInfo', () => {
-    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 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 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 set aria-roledescription to the diagram type', ({ svg }) => {
+      setA11yDiagramInfo(svg, 'flowchart');
+      const svgNode = ensureNodeFromSelector('svg');
+      expect(svgNode.getAttribute('aria-roledescription')).toBe('flowchart');
     });
 
-    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
+    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();
     });
   });
 
@@ -39,115 +36,78 @@ 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';
 
-          it('should set aria-labelledby to the title id inserted as a child', () => {
-            expectAriaLabelledByItTitleId(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+          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-describedby to the description id inserted as a child', () => {
-            expectAriaDescribedByItDescId(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 insert title tag as the first child with the text set to the accTitle given', () => {
-            a11yTitleTagInserted(fauxSvgNode, a11yTitle, a11yDesc, givenId, 2);
-          });
+          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 desc tag as the 2nd child with the text set to accDescription given', () => {
-            a11yDescTagInserted(fauxSvgNode, a11yTitle, a11yDesc, givenId, 1);
-          });
+          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);
+            }
+          );
         });
 
-        describe(`without a11y description`, () => {
+        describe(`without a11y description`, {}, () => {
           const a11yDesc = undefined;
 
-          it('should set aria-labelledby to the title id inserted as a child', () => {
-            expectAriaLabelledByItTitleId(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+          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 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 set aria-describedby', ({ svg }) => {
+            addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId);
+            const svgNode = ensureNodeFromSelector('svg');
+            expect(svgNode.getAttribute('aria-describedby')).toBeNull();
           });
 
-          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 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 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');
+          jsdomIt('should not insert description tag', ({ svg }) => {
+            addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId);
+            const svgNode = ensureNodeFromSelector('svg');
+            const descNode = svgNode.querySelector('desc');
+            expect(descNode).toBeNull();
           });
         });
       });
@@ -158,55 +118,66 @@ describe('accessibility', () => {
         describe('with a11y description', () => {
           const a11yDesc = 'a11y description';
 
-          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-labelledby', ({ svg }) => {
+            addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId);
+            const svgNode = ensureNodeFromSelector('svg');
+            expect(svgNode.getAttribute('aria-labelledby')).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 title tag', ({ svg }) => {
+            addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId);
+            const svgNode = ensureNodeFromSelector('svg');
+            const titleNode = svgNode.querySelector('title');
+            expect(titleNode).toBeNull();
           });
 
-          it('should set aria-describedby to the description id inserted as a child', () => {
-            expectAriaDescribedByItDescId(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 insert desc tag as the 2nd child with the text set to accDescription given', () => {
-            a11yDescTagInserted(fauxSvgNode, a11yTitle, a11yDesc, givenId, 1);
-          });
+          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);
+            }
+          );
         });
 
         describe('without a11y description', () => {
           const a11yDesc = undefined;
 
-          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-labelledby', ({ svg }) => {
+            addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId);
+            const svgNode = ensureNodeFromSelector('svg');
+            expect(svgNode.getAttribute('aria-labelledby')).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 set aria-describedby', ({ svg }) => {
+            addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId);
+            const svgNode = ensureNodeFromSelector('svg');
+            expect(svgNode.getAttribute('aria-describedby')).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 title tag', ({ svg }) => {
+            addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId);
+            const svgNode = ensureNodeFromSelector('svg');
+            const titleNode = svgNode.querySelector('title');
+            expect(titleNode).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');
+          jsdomIt('should not insert  description tag', ({ svg }) => {
+            addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId);
+            const svgNode = ensureNodeFromSelector('svg');
+            const descNode = svgNode.querySelector('desc');
+            expect(descNode).toBeNull();
           });
         });
       });

packages/mermaid/src/defaultConfig.ts

@@ -262,6 +262,18 @@ const config: RequiredDeep<MermaidConfig> = {
   radar: {
     ...defaultConfigJson.radar,
   },
+  treemap: {
+    useMaxWidth: true,
+    padding: 10,
+    diagramPadding: 8,
+    showValues: true,
+    nodeWidth: 100,
+    nodeHeight: 40,
+    borderWidth: 1,
+    valueFontSize: 12,
+    labelFontSize: 14,
+    valueFormat: ',',
+  },
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any

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

@@ -78,5 +78,41 @@ 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');
+    });
   });
 });

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

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

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

@@ -7,20 +7,21 @@ export const loadRegisteredDiagrams = async () => {
   // Load all lazy loaded diagrams in parallel
   const results = await Promise.allSettled(
     Object.entries(detectors).map(async ([key, { detector, loader }]) => {
-      if (loader) {
+      if (!loader) {
+        return;
+      }
+      try {
+        getDiagram(key);
+      } catch {
         try {
-          getDiagram(key);
-        } catch {
-          try {
-            // Register diagram if it is not already registered
-            const { diagram, id } = await loader();
-            registerDiagram(id, diagram, detector);
-          } catch (err) {
-            // Remove failed diagram from detectors
-            log.error(`Failed to load external diagram with key ${key}. Removing from detectors.`);
-            delete detectors[key];
-            throw err;
-          }
+          // Register diagram if it is not already registered
+          const { diagram, id } = await loader();
+          registerDiagram(id, diagram, detector);
+        } catch (err) {
+          // Remove failed diagram from detectors
+          log.error(`Failed to load external diagram with key ${key}. Removing from detectors.`);
+          delete detectors[key];
+          throw err;
         }
       }
     })

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

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type * as d3 from 'd3';
-import type { SetRequired } from 'type-fest';
+import type { SetOptional, SetRequired } from 'type-fest';
 import type { Diagram } from '../Diagram.js';
 import type { BaseDiagramConfig, MermaidConfig } from '../config.type.js';
 
@@ -91,17 +91,13 @@ export interface DiagramDefinition {
   ) => void;
 }
 
-export interface DetectorRecord {
-  detector: DiagramDetector;
-  loader?: DiagramLoader;
-}
-
 export interface ExternalDiagramDefinition {
   id: string;
   detector: DiagramDetector;
   loader: DiagramLoader;
 }
 
+export type DetectorRecord = SetOptional<Omit<ExternalDiagramDefinition, 'id'>, 'loader'>;
 export type DiagramDetector = (text: string, config?: MermaidConfig) => boolean;
 export type DiagramLoader = () => Promise<{ id: string; diagram: DiagramDefinition }>;
 

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

@@ -1,21 +1,12 @@
 import { it, describe, expect } from 'vitest';
-import { db } from './architectureDb.js';
 import { parser } from './architectureParser.js';
-
-const {
-  clear,
-  getDiagramTitle,
-  getAccTitle,
-  getAccDescription,
-  getServices,
-  getGroups,
-  getEdges,
-  getJunctions,
-} = db;
-
+import { ArchitectureDB } from './architectureDb.js';
 describe('architecture diagrams', () => {
+  let db: ArchitectureDB;
   beforeEach(() => {
-    clear();
+    db = new ArchitectureDB();
+    // @ts-expect-error since type is set to undefined we will have error
+    parser.parser?.yy = db;
   });
 
   describe('architecture diagram definitions', () => {
@@ -36,7 +27,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(getDiagramTitle()).toBe('Simple Architecture Diagram');
+      expect(db.getDiagramTitle()).toBe('Simple Architecture Diagram');
     });
 
     it('should handle title on another line', async () => {
@@ -44,7 +35,7 @@ describe('architecture diagrams', () => {
             title Simple Architecture Diagram
             `;
       await expect(parser.parse(str)).resolves.not.toThrow();
-      expect(getDiagramTitle()).toBe('Simple Architecture Diagram');
+      expect(db.getDiagramTitle()).toBe('Simple Architecture Diagram');
     });
 
     it('should handle accessibility title and description', async () => {
@@ -53,8 +44,8 @@ describe('architecture diagrams', () => {
             accDescr: Accessibility Description
             `;
       await expect(parser.parse(str)).resolves.not.toThrow();
-      expect(getAccTitle()).toBe('Accessibility Title');
-      expect(getAccDescription()).toBe('Accessibility Description');
+      expect(db.getAccTitle()).toBe('Accessibility Title');
+      expect(db.getAccDescription()).toBe('Accessibility Description');
     });
 
     it('should handle multiline accessibility description', async () => {
@@ -64,7 +55,7 @@ describe('architecture diagrams', () => {
             }
             `;
       await expect(parser.parse(str)).resolves.not.toThrow();
-      expect(getAccDescription()).toBe('Accessibility Description');
+      expect(db.getAccDescription()).toBe('Accessibility Description');
     });
   });
 });

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

@@ -1,8 +1,9 @@
+import { getConfig as commonGetConfig } from '../../config.js';
 import type { ArchitectureDiagramConfig } from '../../config.type.js';
 import DEFAULT_CONFIG from '../../defaultConfig.js';
-import { getConfig as commonGetConfig } from '../../config.js';
+import type { DiagramDB } from '../../diagram-api/types.js';
 import type { D3Element } from '../../types.js';
-import { ImperativeState } from '../../utils/imperativeState.js';
+import { cleanAndMerge } from '../../utils.js';
 import {
   clear as commonClear,
   getAccDescription,
@@ -14,7 +15,6 @@ import {
 } from '../common/commonDb.js';
 import type {
   ArchitectureAlignment,
-  ArchitectureDB,
   ArchitectureDirectionPair,
   ArchitectureDirectionPairMap,
   ArchitectureEdge,
@@ -33,330 +33,333 @@ 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> = {};
 
-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`);
-    }
+  constructor() {
+    this.clear();
   }
 
-  state.records.registeredIds[id] = 'node';
+  public clear(): void {
+    this.nodes = {};
+    this.groups = {};
+    this.edges = [];
+    this.registeredIds = {};
+    this.dataStructures = undefined;
+    this.elements = {};
+    commonClear();
+  }
 
-  state.records.nodes[id] = {
+  public addService({
     id,
-    type: 'service',
     icon,
+    in: parent,
+    title,
     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) {
+  }: Omit<ArchitectureService, 'edges'>): void {
+    if (this.registeredIds[id] !== undefined) {
       throw new Error(
-        `The group [${id}]'s parent does not exist. Please make sure the parent is created before this group`
+        `The service id [${id}] is already in use by another ${this.registeredIds[id]}`
       );
     }
-    if (state.records.registeredIds[parent] === 'node') {
-      throw new Error(`The group [${id}]'s parent is not a group`);
+    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`);
+      }
     }
+
+    this.registeredIds[id] = 'node';
+
+    this.nodes[id] = {
+      id,
+      type: 'service',
+      icon,
+      iconText,
+      title,
+      edges: [],
+      in: parent,
+    };
   }
 
-  state.records.registeredIds[id] = 'group';
-
-  state.records.groups[id] = {
-    id,
-    icon,
-    title,
-    in: parent,
-  };
-};
-const getGroups = (): ArchitectureGroup[] => {
-  return Object.values(state.records.groups);
-};
-
-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);
   }
 
-  const edge = {
+  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({
     lhsId,
-    lhsDir,
-    lhsInto,
-    lhsGroup,
     rhsId,
+    lhsDir,
     rhsDir,
+    lhsInto,
     rhsInto,
+    lhsGroup,
     rhsGroup,
     title,
-  };
-
-  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]);
-  }
-};
-
-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
- */
-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(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;
-          }
-        }
-
-        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);
-            }
-          });
-        }
-      }
-      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]));
+  }: 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)}`
+      );
     }
-    state.records.dataStructures = {
-      adjList,
-      spatialMaps,
-      groupAlignments,
+    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]);
+    }
   }
-  return state.records.dataStructures;
-};
 
-const setElementForId = (id: string, element: D3Element) => {
-  state.records.elements[id] = element;
-};
-const getElementById = (id: string) => state.records.elements[id];
+  public getEdges(): ArchitectureEdge[] {
+    return this.edges;
+  }
 
-const getConfig = (): Required<ArchitectureDiagramConfig> => {
-  const config = cleanAndMerge({
-    ...DEFAULT_ARCHITECTURE_CONFIG,
-    ...commonGetConfig().architecture,
-  });
-  return config;
-};
+  /**
+   * 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'>>
+      > = {};
 
-export const db: ArchitectureDB = {
-  clear,
-  setDiagramTitle,
-  getDiagramTitle,
-  setAccTitle,
-  getAccTitle,
-  setAccDescription,
-  getAccDescription,
-  getConfig,
+      // 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;
+            }
+          }
 
-  addService,
-  getServices,
-  addJunction,
-  getJunctions,
-  getNodes,
-  getNode,
-  addGroup,
-  getGroups,
-  addEdge,
-  getEdges,
-  setElementForId,
-  getElementById,
-  getDataStructures,
-};
+          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);
+              }
+            });
+          }
+        }
+        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]));
+      }
+      this.dataStructures = {
+        adjList,
+        spatialMaps,
+        groupAlignments,
+      };
+    }
+    return this.dataStructures;
+  }
+
+  public setElementForId(id: string, element: D3Element): void {
+    this.elements[id] = element;
+  }
+
+  public getElementById(id: string): D3Element {
+    return this.elements[id];
+  }
+
+  public getConfig(): Required<ArchitectureDiagramConfig> {
+    return cleanAndMerge({
+      ...DEFAULT_ARCHITECTURE_CONFIG,
+      ...commonGetConfig().architecture,
+    });
+  }
+
+  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;
+}
 
 /**
  * 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 getConfig()[field];
-}
+// export function getConfigField<T extends keyof ArchitectureDiagramConfig>(
+//   field: T
+// ): Required<ArchitectureDiagramConfig>[T] {
+//   return db.getConfig()[field];
+// }