Merge branch 'develop' into ipsep-cola

fix: add classLiteral to the language for class diagram namespace

.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/add-vert-tag-bar-chart.md

@@ -1,5 +0,0 @@
----
-'mermaid': minor
----
-
-feat: Add Vertical Line To Gantt Plot At Specified Time

.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/bitter-colts-remain.md

@@ -1,5 +0,0 @@
----
-'@mermaid-js/mermaid-zenuml': major
----
-
-Upgraded the dependency @zenuml/core

.changeset/curly-coats-tell.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-Fix stroke styles for ER diagram to correctly apply path and row-specific styles

.changeset/cute-crews-shake.md

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

.changeset/eleven-wolves-deny.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-chore: Convert StateDB into TypeScript

.changeset/gold-shoes-camp.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Remove incorrect `style="undefined;"` attributes in some Mermaid diagrams

.changeset/honest-trees-dress.md

@@ -1,7 +0,0 @@
----
-'@mermaid-js/mermaid-zenuml': patch
----
-
-chore: bump minimum ZenUML version to 3.23.28
-
-commit: 9d06d8f31e7f12af9e9e092214f907f2dc93ad75

.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/neat-moose-compare.md

@@ -1,5 +0,0 @@
----
-'mermaid': minor
----
-
-feat: Add support for styling Journey Diagram title (color, font-family, and font-size)

.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/proud-seahorses-wash.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-FontAwesome icons can now be embedded as SVGs in flowcharts if they are registered via `mermaid.registerIconPacks`.

.changeset/public-things-stare.md

@@ -1,5 +0,0 @@
----
-'mermaid': minor
----
-
-Added support for the click directive in stateDiagram syntax

.changeset/quiet-hotels-shine.md

@@ -1,6 +0,0 @@
----
-'mermaid': minor
-'@mermaid-js/parser': minor
----
-
-feat: Add shorter `+<count>: Label` syntax in packet diagram

.changeset/rare-women-fly.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Add escaped class literal name on namespace

.changeset/sad-mails-accept.md

@@ -1,6 +0,0 @@
----
-'mermaid': patch
-'@mermaid-js/parser': patch
----
-
-Refactor grammar so that title don't break Architecture Diagrams

.changeset/silver-eyes-build.md

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

.changeset/sixty-deer-tell.md

@@ -1,5 +0,0 @@
----
-'mermaid': major
----
-
-fix: allow sequence diagram arrows with a trailing colon but no message

.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/soft-readers-tan.md

@@ -1,5 +0,0 @@
----
-'mermaid': minor
----
-
-feat: Dynamically Render Data Labels Within Bar Charts

.changeset/ten-lamps-trade.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: allow colons in events

.changeset/vast-buses-see.md

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

.changeset/yellow-mirrors-change.md

@@ -1,7 +0,0 @@
----
-'@mermaid-js/mermaid-zenuml': patch
----
-
-fix(zenuml): limit `peerDependencies` to Mermaid v10 and v11
-
-commit: 0ad44c12feead9d20c6a870a49327ada58d6e657

.changeset/yellow-walls-fry.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Fix incomplete string escaping in URL manipulation logic when `arrowMarkerAbsolute: true` by ensuring all unsafe characters are escaped.

.cspell/code-terms.txt

@@ -47,6 +47,7 @@ edgesep
 EMPTYSTR
 enddate
 ERDIAGRAM
+eslint
 flatmap
 forwardable
 frontmatter
@@ -87,6 +88,7 @@ NODIR
 NSTR
 outdir
 Qcontrolx
+QSTR
 reinit
 rels
 reqs

.cspell/contributors.txt

@@ -2,8 +2,10 @@
 Ashish Jain
 cpettitt
 Dong Cai
+knsv
+Knut Sveidqvist
 Nikolay Rozhkov
 Peng Xiao
 Per Brolin
+Sidharth Vinod
 subhash-halder
-Vinod Sidharth

.cspell/mermaid-terms.txt

@@ -12,12 +12,12 @@ gantt
 gitgraph
 gzipped
 handDrawn
+ipsepcola
 kanban
-knsv
-Knut
 marginx
 marginy
 Markdownish
+mermaidchart
 mermaidjs
 mindmap
 mindmaps
@@ -35,7 +35,6 @@ sandboxed
 siebling
 statediagram
 substate
-Sveidqvist
 unfixable
 Viewbox
 viewports

.esbuild/build.ts

@@ -1,5 +1,5 @@
 import { build } from 'esbuild';
-import { mkdir, readFile, rename, writeFile } from 'node:fs/promises';
+import { cp, mkdir, readFile, rename, writeFile } from 'node:fs/promises';
 import { packageOptions } from '../.build/common.js';
 import { generateLangium } from '../.build/generateLangium.js';
 import type { MermaidBuildOptions } from './util.js';
@@ -90,6 +90,7 @@ const buildTinyMermaid = async () => {
   tinyPkg.version = mermaidPkg.version;
 
   await writeFile('./packages/tiny/package.json', JSON.stringify(tinyPkg, null, 2) + '\n');
+  await cp('./packages/mermaid/CHANGELOG.md', './packages/tiny/CHANGELOG.md');
 };
 
 const main = async () => {

.github/lychee.toml

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

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

cypress/integration/rendering/erDiagram.spec.js

@@ -354,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,24 @@ 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 }
+      `
+    );
+  });
 });

cypress/integration/rendering/ipsepCola.spec.ts

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

cypress/integration/rendering/mindmap.spec.ts

@@ -246,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/timeline.spec.ts

@@ -161,4 +161,68 @@ describe('Timeline diagram', () => {
       {}
     );
   });
+
+  it('11: should render timeline with many stacked events and proper timeline line length', () => {
+    imgSnapshotTest(
+      `timeline
+        title Medical Device Lifecycle
+        section Pre-Development
+          Quality Management System : Regulatory Compliance : Risk Management
+        section Development
+          Management Responsibility : Planning Activities : Human Resources
+          Resource Management : Management Reviews : Infrastructure
+        section Post-Development
+          Product Realization Activities : Planning Activities : Customer-related Processes
+          Post-Production Activities : Feedback : Complaints : Adverse Events
+                                    : Research and Development : Purchasing Activities
+                                    : Production Activities : Installation Activities
+                                    : Servicing Activities : Post-Market Surveillance
+      `,
+      {}
+    );
+  });
+
+  it('12: should render timeline with proper vertical line lengths for all columns', () => {
+    imgSnapshotTest(
+      `---
+config:
+    theme: base
+    themeVariables:
+        fontFamily: Fira Sans
+        fontSize: 17px
+        cScale0: '#b3cde0'
+        cScale1: '#f49090'
+        cScale2: '#85d5b8'
+---
+
+timeline
+    title Medical Device Lifecycle
+    section Planning
+        Quality Management System (4): Regulatory Compliance (4.1.1)
+            : Risk Management (4.1.2)
+        Management Resposibility (5): Planning Activities (5.4)
+            : Management Reviews (5.6)
+         Resource Management (6): Human Resources (6.2)
+            : Infrastructure (6.3)
+    section Realization
+        Research and Development (7.3): RnD Planning (7.3.2)
+            : Inputs (7.3.3)
+            : Outputs (7.3.4)
+            : Review (7.3.5)
+            : Verification (7.3.6)
+            : Validation (7.3.7)
+        Purchasing (7.4): Purchasing Process (7.4.1)
+            : Purchasing Information (7.4.2)
+        Production (7.5): Production Activities (7.5.1)
+            : Production Feedback (8.2.1)
+        Installation (7.5.3): Installation Activities (7.5.3)
+        Servicing (7.5.4): Servicing Activities (7.5.4)
+    section Post-Production
+        Post-Market Activities (8): Feedback (8.2.1)
+            : Complaints (8.2.2)
+            : Adverse Events (8.2.3)
+      `,
+      {}
+    );
+  });
 });

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

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

cypress/platform/knsv2.html

@@ -32,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/timeline.html

@@ -23,6 +23,23 @@
           1940 : fourth step : fifth step
 				</pre>
 
+    <h2>Medical Device Lifecycle Timeline</h2>
+    <pre class="mermaid">
+        timeline
+        title Medical Device Lifecycle
+        section Planning
+          Quality Management System (4) : Regulatory Compliance (4.1) : Risk Management (4.1.3) : Management Review (5.6) : Infrastructure (6.3)
+          Management Responsibility (5) : Planning Activities (5.2) : Human Resources (6.2) : RnD Planning (7.3.2) : Purchasing Process (7.4.1) : Production Activities (7.5.1) : Installation Activities (7.5.3) : Servicing Activities (7.5.4)
+        section Realization
+          Research and Development (7.3) : Inputs (7.3.3) : Outputs (7.3.4) : Review (7.3.5) : Verification (7.3.6) : Validation (7.3.7)
+          Purchasing (7.4) : Purchasing Information (7.4.2) : Production Feedback (8.2.1)
+          Production (7.5) : Production Feedback (8.2.1)
+          Installation (7.5.3) : Installation Activities (7.5.3)
+          Servicing (7.5.4) : Servicing Activities (7.5.4)
+        section Post-Production
+          Post-Market Activities (8) : Feedback (8.2.1) : Complaints (8.2.2) : Adverse Events (8.2.3)
+    </pre>
+
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({

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

@@ -10,7 +10,7 @@
 
 # Interface: LayoutData
 
-Defined in: [packages/mermaid/src/rendering-util/types.ts:145](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L145)
+Defined in: [packages/mermaid/src/rendering-util/types.ts:153](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L153)
 
 ## Indexable
 
@@ -22,7 +22,7 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:145](https://github.co
 
 > **config**: [`MermaidConfig`](MermaidConfig.md)
 
-Defined in: [packages/mermaid/src/rendering-util/types.ts:148](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L148)
+Defined in: [packages/mermaid/src/rendering-util/types.ts:156](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L156)
 
 ---
 
@@ -30,7 +30,7 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:148](https://github.co
 
 > **edges**: `Edge`\[]
 
-Defined in: [packages/mermaid/src/rendering-util/types.ts:147](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L147)
+Defined in: [packages/mermaid/src/rendering-util/types.ts:155](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L155)
 
 ---
 
@@ -38,4 +38,4 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:147](https://github.co
 
 > **nodes**: `Node`\[]
 
-Defined in: [packages/mermaid/src/rendering-util/types.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L146)
+Defined in: [packages/mermaid/src/rendering-util/types.ts:154](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L154)

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/layouts/development.md

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

docs/layouts/introduction.md

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

docs/layouts/ipsepcola/implementation.md

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

docs/layouts/ipsepcola/overview.md

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

docs/public/1-Callout-Easy.svg

@@ -0,0 +1,9 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="48" height="48" rx="12" fill="#E0095F"/>
+<mask id="mask0_1_24" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="9" y="9" width="30" height="30">
+<rect x="9" y="9" width="30" height="30" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_1_24)">
+<path d="M24 30.875C25.2083 30.875 26.3229 30.5833 27.3438 30C28.3646 29.4167 29.1875 28.625 29.8125 27.625C29.9375 27.375 29.9271 27.125 29.7812 26.875C29.6354 26.625 29.4167 26.5 29.125 26.5H18.875C18.5833 26.5 18.3646 26.625 18.2188 26.875C18.0729 27.125 18.0625 27.375 18.1875 27.625C18.8125 28.625 19.6406 29.4167 20.6719 30C21.7031 30.5833 22.8125 30.875 24 30.875ZM20.125 21.4375L20.7813 22.0938C20.9688 22.2813 21.1875 22.375 21.4375 22.375C21.6875 22.375 21.9063 22.2813 22.0938 22.0938C22.2813 21.9063 22.3698 21.6875 22.3594 21.4375C22.349 21.1875 22.2604 20.9688 22.0938 20.7813L21 19.6563C20.75 19.4063 20.4531 19.2812 20.1094 19.2812C19.7656 19.2812 19.4688 19.4063 19.2188 19.6563L18.0938 20.7813C17.9063 20.9688 17.8125 21.1875 17.8125 21.4375C17.8125 21.6875 17.9063 21.9063 18.0938 22.0938C18.2604 22.2604 18.474 22.349 18.7344 22.3594C18.9948 22.3698 19.2188 22.2917 19.4063 22.125L20.125 21.4375ZM27.875 21.4375L28.5938 22.125C28.7813 22.2917 29 22.375 29.25 22.375C29.5 22.375 29.7188 22.2813 29.9063 22.0938C30.0938 21.9063 30.1875 21.6875 30.1875 21.4375C30.1875 21.1875 30.0938 20.9688 29.9063 20.7813L28.7812 19.6563C28.5312 19.4063 28.2344 19.2812 27.8906 19.2812C27.5469 19.2812 27.25 19.4063 27 19.6563L25.875 20.7813C25.7083 20.9688 25.625 21.1875 25.625 21.4375C25.625 21.6875 25.7188 21.9063 25.9063 22.0938C26.0938 22.2813 26.3125 22.375 26.5625 22.375C26.8125 22.375 27.0312 22.2813 27.2187 22.0938L27.875 21.4375ZM24 36.5C22.2708 36.5 20.6458 36.1719 19.125 35.5156C17.6042 34.8594 16.2812 33.9688 15.1562 32.8438C14.0312 31.7188 13.1406 30.3958 12.4844 28.875C11.8281 27.3542 11.5 25.7292 11.5 24C11.5 22.2708 11.8281 20.6458 12.4844 19.125C13.1406 17.6042 14.0312 16.2812 15.1562 15.1562C16.2812 14.0312 17.6042 13.1406 19.125 12.4844C20.6458 11.8281 22.2708 11.5 24 11.5C25.7292 11.5 27.3542 11.8281 28.875 12.4844C30.3958 13.1406 31.7188 14.0312 32.8438 15.1562C33.9688 16.2812 34.8594 17.6042 35.5156 19.125C36.1719 20.6458 36.5 22.2708 36.5 24C36.5 25.7292 36.1719 27.3542 35.5156 28.875C34.8594 30.3958 33.9688 31.7188 32.8438 32.8438C31.7188 33.9688 30.3958 34.8594 28.875 35.5156C27.3542 36.1719 25.7292 36.5 24 36.5ZM24 34C26.7917 34 29.1563 33.0313 31.0938 31.0938C33.0313 29.1563 34 26.7917 34 24C34 21.2083 33.0313 18.8438 31.0938 16.9063C29.1563 14.9688 26.7917 14 24 14C21.2083 14 18.8438 14.9688 16.9063 16.9063C14.9688 18.8438 14 21.2083 14 24C14 26.7917 14.9688 29.1563 16.9063 31.0938C18.8438 33.0313 21.2083 34 24 34Z" fill="white"/>
+</g>
+</svg>

docs/public/2-Callout-Integrations.svg

@@ -0,0 +1,9 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="48" height="48" rx="12" fill="#E0095F"/>
+<mask id="mask0_2_44" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="9" y="9" width="30" height="30">
+<rect x="9" y="9" width="30" height="30" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_2_44)">
+<path d="M32.75 27.75C32.3958 27.75 32.099 27.6302 31.8594 27.3906C31.6198 27.151 31.5 26.8542 31.5 26.5C31.5 26.1458 31.6198 25.849 31.8594 25.6094C32.099 25.3698 32.3958 25.25 32.75 25.25H34C34.3542 25.25 34.651 25.3698 34.8906 25.6094C35.1302 25.849 35.25 26.1458 35.25 26.5C35.25 26.8542 35.1302 27.151 34.8906 27.3906C34.651 27.6302 34.3542 27.75 34 27.75H32.75ZM32.75 32.75C32.3958 32.75 32.099 32.6302 31.8594 32.3906C31.6198 32.151 31.5 31.8542 31.5 31.5C31.5 31.1458 31.6198 30.849 31.8594 30.6094C32.099 30.3698 32.3958 30.25 32.75 30.25H34C34.3542 30.25 34.651 30.3698 34.8906 30.6094C35.1302 30.849 35.25 31.1458 35.25 31.5C35.25 31.8542 35.1302 32.151 34.8906 32.3906C34.651 32.6302 34.3542 32.75 34 32.75H32.75ZM26.5 34C25.8125 34 25.224 33.7552 24.7344 33.2656C24.2448 32.776 24 32.1875 24 31.5H22.75C22.3958 31.5 22.099 31.3802 21.8594 31.1406C21.6198 30.901 21.5 30.6042 21.5 30.25V27.75C21.5 27.3958 21.6198 27.099 21.8594 26.8594C22.099 26.6198 22.3958 26.5 22.75 26.5H24C24 25.8125 24.2448 25.224 24.7344 24.7344C25.224 24.2448 25.8125 24 26.5 24H29C29.3542 24 29.651 24.1198 29.8906 24.3594C30.1302 24.599 30.25 24.8958 30.25 25.25V32.75C30.25 33.1042 30.1302 33.401 29.8906 33.6406C29.651 33.8802 29.3542 34 29 34H26.5ZM17.75 30.25C16.375 30.25 15.1979 29.7604 14.2188 28.7812C13.2396 27.8021 12.75 26.625 12.75 25.25C12.75 23.875 13.2396 22.6979 14.2188 21.7188C15.1979 20.7396 16.375 20.25 17.75 20.25H19.625C20.1458 20.25 20.5885 20.0677 20.9531 19.7031C21.3177 19.3385 21.5 18.8958 21.5 18.375C21.5 17.8542 21.3177 17.4115 20.9531 17.0469C20.5885 16.6823 20.1458 16.5 19.625 16.5H15.25C14.8958 16.5 14.599 16.3802 14.3594 16.1406C14.1198 15.901 14 15.6042 14 15.25C14 14.8958 14.1198 14.599 14.3594 14.3594C14.599 14.1198 14.8958 14 15.25 14H19.625C20.8333 14 21.8646 14.4271 22.7187 15.2812C23.5729 16.1354 24 17.1667 24 18.375C24 19.5833 23.5729 20.6146 22.7187 21.4687C21.8646 22.3229 20.8333 22.75 19.625 22.75H17.75C17.0625 22.75 16.474 22.9948 15.9844 23.4844C15.4948 23.974 15.25 24.5625 15.25 25.25C15.25 25.9375 15.4948 26.526 15.9844 27.0156C16.474 27.5052 17.0625 27.75 17.75 27.75H19C19.3542 27.75 19.651 27.8698 19.8906 28.1094C20.1302 28.349 20.25 28.6458 20.25 29C20.25 29.3542 20.1302 29.651 19.8906 29.8906C19.651 30.1302 19.3542 30.25 19 30.25H17.75Z" fill="white"/>
+</g>
+</svg>

docs/public/3-Callout-Awards.svg

@@ -0,0 +1,9 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="48" height="48" rx="12" fill="#E0095F"/>
+<mask id="mask0_2_49" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="9" y="9" width="30" height="30">
+<rect x="9" y="9" width="30" height="30" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_2_49)">
+<path d="M22.75 32.75V28.875C21.7292 28.6458 20.8177 28.2135 20.0156 27.5781C19.2135 26.9427 18.625 26.1458 18.25 25.1875C16.6875 25 15.3802 24.3177 14.3281 23.1406C13.276 21.9635 12.75 20.5833 12.75 19V17.75C12.75 17.0625 12.9948 16.474 13.4844 15.9844C13.974 15.4948 14.5625 15.25 15.25 15.25H17.75C17.75 14.5625 17.9948 13.974 18.4844 13.4844C18.974 12.9948 19.5625 12.75 20.25 12.75H27.75C28.4375 12.75 29.026 12.9948 29.5156 13.4844C30.0052 13.974 30.25 14.5625 30.25 15.25H32.75C33.4375 15.25 34.026 15.4948 34.5156 15.9844C35.0052 16.474 35.25 17.0625 35.25 17.75V19C35.25 20.5833 34.724 21.9635 33.6719 23.1406C32.6198 24.3177 31.3125 25 29.75 25.1875C29.375 26.1458 28.7865 26.9427 27.9844 27.5781C27.1823 28.2135 26.2708 28.6458 25.25 28.875V32.75H29C29.3542 32.75 29.651 32.8698 29.8906 33.1094C30.1302 33.349 30.25 33.6458 30.25 34C30.25 34.3542 30.1302 34.651 29.8906 34.8906C29.651 35.1302 29.3542 35.25 29 35.25H19C18.6458 35.25 18.349 35.1302 18.1094 34.8906C17.8698 34.651 17.75 34.3542 17.75 34C17.75 33.6458 17.8698 33.349 18.1094 33.1094C18.349 32.8698 18.6458 32.75 19 32.75H22.75ZM17.75 22.5V17.75H15.25V19C15.25 19.7917 15.4792 20.5052 15.9375 21.1406C16.3958 21.776 17 22.2292 17.75 22.5ZM24 26.5C25.0417 26.5 25.9271 26.1354 26.6562 25.4062C27.3854 24.6771 27.75 23.7917 27.75 22.75V15.25H20.25V22.75C20.25 23.7917 20.6146 24.6771 21.3438 25.4062C22.0729 26.1354 22.9583 26.5 24 26.5ZM30.25 22.5C31 22.2292 31.6042 21.776 32.0625 21.1406C32.5208 20.5052 32.75 19.7917 32.75 19V17.75H30.25V22.5Z" fill="white"/>
+</g>
+</svg>

docs/public/icons/ai-diagram.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <mask
+    id="mask0_89_26528"
+    style="mask-type: alpha"
+    maskUnits="userSpaceOnUse"
+    x="0"
+    y="0"
+    width="20"
+    height="20"
+  >
+    <rect width="20" height="20" fill="currentColor" />
+  </mask>
+  <g mask="url(#mask0_89_26528)">
+    <path
+      d="M10.25 12.9792C11.2083 12.9792 12.0312 12.6667 12.7188 12.0417C13.4062 11.4167 13.75 10.6671 13.75 9.79292C13.75 9.01431 13.4965 8.35069 12.9896 7.80208C12.4826 7.25347 11.8747 6.97917 11.1656 6.97917C10.5248 6.97917 9.98285 7.1875 9.53979 7.60417C9.0966 8.02083 8.875 8.52083 8.875 9.10417C8.875 9.38194 8.92528 9.63847 9.02583 9.87375C9.12639 10.109 9.27056 10.3247 9.45833 10.5208L10.5208 9.45833C10.4722 9.41667 10.4358 9.36458 10.4115 9.30208C10.3872 9.23958 10.375 9.17687 10.375 9.11396C10.375 8.94076 10.4514 8.79167 10.6042 8.66667C10.7569 8.54167 10.9444 8.47917 11.1667 8.47917C11.4583 8.47917 11.7118 8.60806 11.9271 8.86583C12.1424 9.12361 12.25 9.43222 12.25 9.79167C12.25 10.25 12.0521 10.6458 11.6562 10.9792C11.2604 11.3125 10.7933 11.4792 10.255 11.4792C9.57111 11.4792 8.98264 11.191 8.48958 10.6146C7.99653 10.0382 7.75 9.35417 7.75 8.5625C7.75 8.13514 7.82986 7.72625 7.98958 7.33583C8.14931 6.94528 8.38194 6.59722 8.6875 6.29167L7.625 5.25C7.18056 5.69444 6.84028 6.20139 6.60417 6.77083C6.36806 7.34028 6.25 7.9375 6.25 8.5625C6.25 9.78472 6.63889 10.8264 7.41667 11.6875C8.19444 12.5486 9.13889 12.9792 10.25 12.9792ZM5.5 18V14.3542C4.70833 13.6875 4.09375 12.8849 3.65625 11.9465C3.21875 11.008 3 10.0189 3 8.97917C3 7.04056 3.68257 5.39271 5.04771 4.03563C6.41285 2.67854 8.07056 2 10.0208 2C11.5347 2 12.8958 2.40625 14.1042 3.21875C15.3125 4.03125 16.1111 5.09028 16.5 6.39583L17.875 11.0417C17.9444 11.2844 17.9062 11.5049 17.7604 11.7029C17.6146 11.901 17.4167 12 17.1667 12H16V14.5C16 14.9125 15.8531 15.2656 15.5594 15.5594C15.2656 15.8531 14.9125 16 14.5 16H12.5V18H11V14.5H14.5V10.5H16.1667L15.0833 6.89583C14.7778 5.89583 14.1562 5.07986 13.2188 4.44792C12.2812 3.81597 11.2153 3.5 10.0208 3.5C8.47917 3.5 7.17361 4.03215 6.10417 5.09646C5.03472 6.16076 4.5 7.455 4.5 8.97917C4.5 9.79764 4.67361 10.5751 5.02083 11.3117C5.36806 12.0483 5.85417 12.6806 6.47917 13.2083L7 13.6667V18H5.5Z"
+      fill="currentColor"
+    />
+  </g>
+</svg>

docs/public/icons/ai-repair.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <mask
+    id="mask0_89_26616"
+    style="mask-type: alpha"
+    maskUnits="userSpaceOnUse"
+    x="0"
+    y="0"
+    width="20"
+    height="20"
+  >
+    <rect width="20" height="20" fill="currentColor" />
+  </mask>
+  <g mask="url(#mask0_89_26616)">
+    <path
+      d="M4 16.9999V14.4999H5.875L4.4375 8.77077C3.99306 8.56244 3.64236 8.25341 3.38542 7.84369C3.12847 7.43396 3 6.98605 3 6.49993C3 5.7916 3.24306 5.19785 3.72917 4.71868C4.21528 4.23952 4.8125 3.99993 5.52083 3.99993C6.0625 3.99993 6.55208 4.15966 6.98958 4.4791C7.42708 4.79855 7.72222 5.22216 7.875 5.74993H9.5V4.74993C9.5 4.5416 9.57292 4.36452 9.71875 4.21868C9.86458 4.07285 10.0417 3.99993 10.25 3.99993C10.4583 3.99993 10.6354 4.07285 10.7812 4.21868C10.9271 4.36452 11 4.5416 11 4.74993V4.89577L13 3.18743C13.1111 3.09021 13.2361 3.03466 13.375 3.02077C13.5139 3.00688 13.6528 3.02771 13.7917 3.08327L16.5625 4.33327C16.7569 4.4166 16.8924 4.55202 16.9688 4.73952C17.0451 4.92702 17.0347 5.11799 16.9375 5.31243C16.8542 5.49299 16.7153 5.61799 16.5208 5.68743C16.3264 5.75688 16.1319 5.75688 15.9375 5.68743L13.6042 4.64577L11.4167 6.49993L13.6042 8.37494L15.9375 7.33327C16.1319 7.24993 16.3229 7.24299 16.5104 7.31244C16.6979 7.38188 16.8403 7.51382 16.9375 7.70827C17.0208 7.88882 17.0243 8.06938 16.9479 8.24994C16.8715 8.43049 16.7431 8.57632 16.5625 8.68744L13.7917 9.93744C13.6667 10.0069 13.5312 10.0312 13.3854 10.0104C13.2396 9.98952 13.1111 9.93049 13 9.83327L11 8.12494V8.24994C11 8.45827 10.9271 8.63535 10.7812 8.78119C10.6354 8.92702 10.4583 8.99994 10.25 8.99994C10.0417 8.99994 9.86458 8.92702 9.71875 8.78119C9.57292 8.63535 9.5 8.45827 9.5 8.24994V7.24994H7.875C7.81944 7.44438 7.73958 7.62146 7.63542 7.78119C7.53125 7.94091 7.40972 8.09716 7.27083 8.24994L10.8542 14.4999H14V16.9999H4ZM5.5 7.62494C5.81944 7.62494 6.08681 7.5173 6.30208 7.30202C6.51736 7.08674 6.625 6.81938 6.625 6.49993C6.625 6.19438 6.51736 5.93396 6.30208 5.71868C6.08681 5.50341 5.81944 5.39577 5.5 5.39577C5.18056 5.39577 4.91319 5.50341 4.69792 5.71868C4.48264 5.93396 4.375 6.19438 4.375 6.49993C4.375 6.81938 4.48264 7.08674 4.69792 7.30202C4.91319 7.5173 5.18056 7.62494 5.5 7.62494ZM7.41667 14.4999H9.125L6.08333 9.18744L7.41667 14.4999Z"
+      fill="currentColor"
+    />
+  </g>
+</svg>

docs/public/icons/comment.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <mask
+    id="mask0_89_26596"
+    style="mask-type: alpha"
+    maskUnits="userSpaceOnUse"
+    x="0"
+    y="0"
+    width="20"
+    height="20"
+  >
+    <rect width="20" height="20" fill="currentColor" />
+  </mask>
+  <g mask="url(#mask0_89_26596)">
+    <path
+      d="M5 12H15V10.5H5V12ZM5 9.25H15V7.75H5V9.25ZM5 6.5H15V5H5V6.5ZM18 18L15 15H3.5C3.0875 15 2.73438 14.8531 2.44063 14.5594C2.14688 14.2656 2 13.9125 2 13.5V3.5C2 3.0875 2.14688 2.73438 2.44063 2.44063C2.73438 2.14688 3.0875 2 3.5 2H16.5C16.9125 2 17.2656 2.14688 17.5594 2.44063C17.8531 2.73438 18 3.0875 18 3.5V18ZM3.5 13.5H15.625L16.5 14.375V3.5H3.5V13.5Z"
+      fill="currentColor"
+    />
+  </g>
+</svg>

docs/public/icons/folder.svg

@@ -0,0 +1,11 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  height="24px"
+  viewBox="0 -960 960 960"
+  width="24px"
+  fill="currentColor"
+>
+  <path
+    d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H447l-80-80H160v480Zm0 0v-480 480Z"
+  />
+</svg>

docs/public/icons/group.svg

@@ -0,0 +1,11 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  height="24px"
+  viewBox="0 -960 960 960"
+  width="24px"
+  fill="currentColor"
+>
+  <path
+    d="M40-160v-112q0-34 17.5-62.5T104-378q62-31 126-46.5T360-440q66 0 130 15.5T616-378q29 15 46.5 43.5T680-272v112H40Zm720 0v-120q0-44-24.5-84.5T666-434q51 6 96 20.5t84 35.5q36 20 55 44.5t19 53.5v120H760ZM360-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Zm400-160q0 66-47 113t-113 47q-11 0-28-2.5t-28-5.5q27-32 41.5-71t14.5-81q0-42-14.5-81T544-792q14-5 28-6.5t28-1.5q66 0 113 47t47 113ZM120-240h480v-32q0-11-5.5-20T580-306q-54-27-109-40.5T360-360q-56 0-111 13.5T140-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T440-640q0-33-23.5-56.5T360-720q-33 0-56.5 23.5T280-640q0 33 23.5 56.5T360-560Zm0 320Zm0-400Z"
+  />
+</svg>

docs/public/icons/groups.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <mask
+    id="mask0_89_26621"
+    style="mask-type: alpha"
+    maskUnits="userSpaceOnUse"
+    x="0"
+    y="0"
+    width="20"
+    height="20"
+  >
+    <rect width="20" height="20" fill="currentColor" />
+  </mask>
+  <g mask="url(#mask0_89_26621)">
+    <path
+      d="M3.5 11.5L5.5 9.5L3.5 7.5L1.5 9.5L3.5 11.5ZM14.5 11.5L16.5 8L18.5 11.5H14.5ZM9.98958 10.5C9.30208 10.5 8.71528 10.2569 8.22917 9.77083C7.74306 9.28472 7.5 8.69444 7.5 8C7.5 7.30556 7.74306 6.71528 8.22917 6.22917C8.71528 5.74306 9.30556 5.5 10 5.5C10.6944 5.5 11.2847 5.74306 11.7708 6.22917C12.2569 6.71528 12.5 7.30903 12.5 8.01042C12.5 8.69792 12.2569 9.28472 11.7708 9.77083C11.2847 10.2569 10.691 10.5 9.98958 10.5ZM10 7C9.71667 7 9.47917 7.09583 9.2875 7.2875C9.09583 7.47917 9 7.71667 9 8C9 8.28333 9.09583 8.52083 9.2875 8.7125C9.47917 8.90417 9.71667 9 10 9C10.2833 9 10.5208 8.90417 10.7125 8.7125C10.9042 8.52083 11 8.28333 11 8C11 7.71667 10.9042 7.47917 10.7125 7.2875C10.5208 7.09583 10.2833 7 10 7ZM0 15.5V14.25C0 13.5139 0.34375 12.9722 1.03125 12.625C1.71875 12.2778 2.54167 12.1042 3.5 12.1042C3.70833 12.1042 3.91667 12.1146 4.125 12.1354C4.33333 12.1563 4.54167 12.1875 4.75 12.2292C4.5 12.4792 4.3125 12.7951 4.1875 13.1771C4.0625 13.559 4 13.9167 4 14.25V15.5H0ZM5 15.5V14.2604C5 13.434 5.42361 12.7674 6.27083 12.2604C7.11806 11.7535 8.36111 11.5 10 11.5C11.6389 11.5 12.8819 11.7528 13.7292 12.2585C14.5764 12.7644 15 13.4282 15 14.25V15.5H5ZM16.5 12.1042C17.4583 12.1042 18.2812 12.2778 18.9688 12.625C19.6562 12.9722 20 13.5139 20 14.25V15.5H16V14.25C16 13.9167 15.941 13.559 15.8229 13.1771C15.7049 12.7951 15.5139 12.4792 15.25 12.2292C15.4583 12.1875 15.6652 12.1563 15.8706 12.1354C16.0759 12.1146 16.2857 12.1042 16.5 12.1042ZM10 13C9.11111 13 8.40972 13.0799 7.89583 13.2396C7.38194 13.3993 6.93056 13.6528 6.54167 14H13.4583C13.0556 13.6528 12.6007 13.3993 12.0938 13.2396C11.5868 13.0799 10.8889 13 10 13Z"
+      fill="currentColor"
+    />
+  </g>
+</svg>

docs/public/icons/open-source.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
+  <!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE -->
+  <path
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M12 3a9 9 0 0 1 3.618 17.243l-2.193-5.602a3 3 0 1 0-2.849 0l-2.193 5.603A9 9 0 0 1 12 3"
+  />
+</svg>

docs/public/icons/plugins.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <mask
+    id="mask0_89_26548"
+    style="mask-type: alpha"
+    maskUnits="userSpaceOnUse"
+    x="0"
+    y="0"
+    width="20"
+    height="20"
+  >
+    <rect width="20" height="20" fill="currentColor" />
+  </mask>
+  <g mask="url(#mask0_89_26548)">
+    <path
+      d="M8 17H4.5C4.0875 17 3.73437 16.8531 3.44062 16.5594C3.14687 16.2656 3 15.9125 3 15.5V12C3.55556 11.9722 4.02778 11.7674 4.41667 11.3854C4.80556 11.0035 5 10.5417 5 10C5 9.45833 4.80556 8.99653 4.41667 8.61458C4.02778 8.23264 3.55556 8.02778 3 8V4.5C3 4.0875 3.14687 3.73438 3.44062 3.44063C3.73437 3.14688 4.0875 3 4.5 3H8C8 2.44444 8.19285 1.97222 8.57854 1.58333C8.96438 1.19444 9.4366 1 9.99521 1C10.554 1 11.0278 1.19333 11.4167 1.58C11.8056 1.96667 12 2.44 12 3H15.5C15.9125 3 16.2656 3.14688 16.5594 3.44063C16.8531 3.73438 17 4.0875 17 4.5V8C17.5556 8 18.0278 8.19285 18.4167 8.57854C18.8056 8.96438 19 9.4366 19 9.99521C19 10.554 18.8067 11.0278 18.42 11.4167C18.0333 11.8056 17.56 12 17 12V15.5C17 15.9125 16.8531 16.2656 16.5594 16.5594C16.2656 16.8531 15.9125 17 15.5 17H12C11.9722 16.4444 11.7682 15.9722 11.3879 15.5833C11.0076 15.1944 10.5458 15 10.0025 15C9.45917 15 8.99653 15.1944 8.61458 15.5833C8.23264 15.9722 8.02778 16.4444 8 17ZM4.5 15.5H6.83333C7.11111 14.875 7.53819 14.3854 8.11458 14.0312C8.69097 13.6771 9.31944 13.5 10 13.5C10.6806 13.5 11.309 13.6771 11.8854 14.0312C12.4618 14.3854 12.8889 14.875 13.1667 15.5H15.5V10.5H17C17.1333 10.5 17.25 10.45 17.35 10.35C17.45 10.25 17.5 10.1333 17.5 10C17.5 9.86667 17.45 9.75 17.35 9.65C17.25 9.55 17.1333 9.5 17 9.5H15.5V4.5H10.5V3C10.5 2.86667 10.45 2.75 10.35 2.65C10.25 2.55 10.1333 2.5 10 2.5C9.86667 2.5 9.75 2.55 9.65 2.65C9.55 2.75 9.5 2.86667 9.5 3V4.5H4.5V6.83333C5.125 7.11111 5.61458 7.53819 5.96875 8.11458C6.32292 8.69097 6.5 9.31944 6.5 10C6.5 10.6974 6.32292 11.3335 5.96875 11.9083C5.61458 12.4833 5.125 12.9028 4.5 13.1667V15.5Z"
+      fill="currentColor"
+    />
+  </g>
+</svg>

docs/public/icons/presentation.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <mask
+    id="mask0_89_26538"
+    style="mask-type: alpha"
+    maskUnits="userSpaceOnUse"
+    x="0"
+    y="0"
+    width="20"
+    height="20"
+  >
+    <rect width="20" height="20" fill="currentColor" />
+  </mask>
+  <g mask="url(#mask0_89_26538)">
+    <path
+      d="M8 13.5L13.5 10L8 6.5V13.5ZM4.5 17C4.0875 17 3.73437 16.8531 3.44062 16.5594C3.14687 16.2656 3 15.9125 3 15.5V4.5C3 4.0875 3.14687 3.73438 3.44062 3.44063C3.73437 3.14688 4.0875 3 4.5 3H15.5C15.9125 3 16.2656 3.14688 16.5594 3.44063C16.8531 3.73438 17 4.0875 17 4.5V15.5C17 15.9125 16.8531 16.2656 16.5594 16.5594C16.2656 16.8531 15.9125 17 15.5 17H4.5ZM4.5 15.5H15.5V4.5H4.5V15.5Z"
+      fill="currentColor"
+    />
+  </g>
+</svg>

docs/public/icons/public.svg

@@ -0,0 +1,11 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  height="24px"
+  viewBox="0 -960 960 960"
+  width="24px"
+  fill="currentColor"
+>
+  <path
+    d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm-40-82v-78q-33 0-56.5-23.5T360-320v-40L168-552q-3 18-5.5 36t-2.5 36q0 121 79.5 212T440-162Zm276-102q41-45 62.5-100.5T800-480q0-98-54.5-179T600-776v16q0 33-23.5 56.5T520-680h-80v80q0 17-11.5 28.5T400-560h-80v80h240q17 0 28.5 11.5T600-440v120h40q26 0 47 15.5t29 40.5Z"
+  />
+</svg>

docs/public/icons/terminal.svg

@@ -0,0 +1,11 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  height="24px"
+  viewBox="0 -960 960 960"
+  width="24px"
+  fill="currentColor"
+>
+  <path
+    d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H160v400Zm140-40-56-56 103-104-104-104 57-56 160 160-160 160Zm180 0v-80h240v80H480Z"
+  />
+</svg>

docs/public/icons/version-history.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <mask
+    id="mask0_89_26543"
+    style="mask-type: alpha"
+    maskUnits="userSpaceOnUse"
+    x="0"
+    y="0"
+    width="20"
+    height="20"
+  >
+    <rect width="20" height="20" fill="currentColor" />
+  </mask>
+  <g mask="url(#mask0_89_26543)">
+    <path
+      d="M10 17C8.05556 17 6.40278 16.3194 5.04167 14.9583C3.68056 13.5972 3 11.9444 3 10H4.5C4.5 11.5139 5.03819 12.809 6.11458 13.8854C7.19097 14.9618 8.48611 15.5 10 15.5C11.5139 15.5 12.809 14.9618 13.8854 13.8854C14.9618 12.809 15.5 11.5139 15.5 10C15.5 8.48611 14.9618 7.19097 13.8854 6.11458C12.809 5.03819 11.5139 4.5 10 4.5C9.13889 4.5 8.3434 4.67778 7.61354 5.03333C6.88382 5.38889 6.26958 5.87778 5.77083 6.5H8V8H3V3H4.5V5.70833C5.13889 4.875 5.93403 4.21528 6.88542 3.72917C7.83681 3.24306 8.875 3 10 3C10.9722 3 11.8828 3.18472 12.7319 3.55417C13.581 3.92361 14.3199 4.42271 14.9485 5.05146C15.5773 5.68007 16.0764 6.41896 16.4458 7.26813C16.8153 8.11715 17 9.02778 17 10C17 10.9722 16.8153 11.8828 16.4458 12.7319C16.0764 13.581 15.5773 14.3199 14.9485 14.9485C14.3199 15.5773 13.581 16.0764 12.7319 16.4458C11.8828 16.8153 10.9722 17 10 17ZM12.0833 12.8333L9.25 10V6H10.75V9.375L13.1458 11.7708L12.0833 12.8333Z"
+      fill="currentColor"
+    />
+  </g>
+</svg>

docs/public/icons/whiteboard.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <mask
+    id="mask0_89_26533"
+    style="mask-type: alpha"
+    maskUnits="userSpaceOnUse"
+    x="0"
+    y="0"
+    width="20"
+    height="20"
+  >
+    <rect width="20" height="20" fill="currentColor" />
+  </mask>
+  <g mask="url(#mask0_89_26533)">
+    <path
+      d="M6.54165 17L5.83332 16.2917L4.56249 17.5625C4.27082 17.8542 3.91665 18 3.49999 18C3.08332 18 2.72915 17.8542 2.43749 17.5625C2.15971 17.2569 2.01735 16.8993 2.0104 16.4896C2.00346 16.0799 2.14582 15.7292 2.43749 15.4375L3.70832 14.1667L2.99999 13.4583L13.0208 3.4375C13.3125 3.14583 13.6632 3 14.0729 3C14.4826 3 14.8403 3.14583 15.1458 3.4375L16.5625 4.85417C16.8542 5.13194 17 5.47917 17 5.89583C17 6.3125 16.8542 6.66667 16.5625 6.95833L6.54165 17ZM9.27082 9.33333L5.12499 13.4583L6.54165 14.875L10.6875 10.7292L9.27082 9.33333Z"
+      fill="#2B2542"
+    />
+  </g>
+</svg>

docs/public/mermaid-logo-horizontal.svg

@@ -0,0 +1,11 @@
+<svg width="1200" height="630" viewBox="0 0 1200 630" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_2)">
+<rect width="1200" height="630" fill="#FF3670"/>
+<path d="M807.836 142.655C715.59 138.706 630.888 195.464 599.461 282.281C568.034 195.464 483.332 138.706 391.086 142.655C388.013 215.854 423.032 285.658 483.546 326.958C514.556 348.257 533.087 383.583 532.984 421.202V486.46H665.951V421.202C665.843 383.585 684.37 348.258 715.376 326.958C775.907 285.674 810.931 215.859 807.836 142.655Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_1_2">
+<rect width="1200" height="630" fill="white"/>
+</clipPath>
+</defs>
+</svg>