chore: Refactor nodes.js to remove global state

docs: Auto generate shape docs
Not keen on how it's currently run, open to suggestions on better ways.
2025-08-26 03:36:41 +02:00 · 2024-10-04 00:22:56 +05:30 · 2024-10-04 00:07:04 +05:30 · 2024-10-04 00:07:04 +05:30
269 changed files with 8088 additions and 19792 deletions
--- a/.build/jsonSchema.ts
+++ b/.build/jsonSchema.ts
@@ -19,7 +19,6 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
  'xyChart',
  'requirement',
  'mindmap',
-  'kanban',
  'timeline',
  'gitGraph',
  'c4',
--- a/.changeset/angry-bags-brake.md
+++ b/.changeset/angry-bags-brake.md
@@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-fix: architecture diagrams no longer grow to extreme heights due to conflicting alignments
--- a/.changeset/bright-ads-exist.md
+++ b/.changeset/bright-ads-exist.md
@@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-Fixes for consistent edge id creation & handling edge cases for animate edge feature
--- a/.changeset/chatty-elephants-warn.md
+++ b/.changeset/chatty-elephants-warn.md
@@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-Fix for issue #6195 - allowing @ signs inside node labels
--- a/.changeset/chilly-years-cheat.md
+++ b/.changeset/chilly-years-cheat.md
@@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-fix: `mermaidAPI.getDiagramFromText()` now returns a new different db for each class diagram
--- a/.changeset/dull-tips-cough.md
+++ b/.changeset/dull-tips-cough.md
@@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-fix: revert state db to resolve getData returning empty nodes and edges
--- a/.changeset/great-ghosts-rule.md
+++ b/.changeset/great-ghosts-rule.md
@@ -1,8 +0,0 @@
---
-'mermaid': minor
---
-
-Flowchart new syntax for node metadata bugs
-
- Incorrect label mapping for nodes when using `&`
- Syntax error when `}` with trailing spaces before new line
--- a/.changeset/grumpy-cheetahs-deliver.md
+++ b/.changeset/grumpy-cheetahs-deliver.md
@@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-`mermaidAPI.getDiagramFromText()` now returns a new db instance on each call for state diagrams
--- a/.changeset/heavy-moose-mix.md
+++ b/.changeset/heavy-moose-mix.md
@@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-Added versioning to StateDB and updated tests and diagrams to use it.
--- a/.changeset/many-brooms-promise.md
+++ b/.changeset/many-brooms-promise.md
@@ -1,5 +0,0 @@
---
-'mermaid': minor
---
-
-Adding support for animation of flowchart edges
--- a/.changeset/new-kiwis-listen.md
+++ b/.changeset/new-kiwis-listen.md
@@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-fix: `mermaidAPI.getDiagramFromText()` now returns a new different db for each flowchart
--- a/.changeset/silver-olives-marry.md
+++ b/.changeset/silver-olives-marry.md
@@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-fix: `mermaidAPI.getDiagramFromText()` now returns a new different db for each sequence diagram. Added unique IDs for messages.
--- a/.changeset/stupid-dots-do.md
+++ b/.changeset/stupid-dots-do.md
@@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-fix: Gantt, Sankey and User Journey diagram are now able to pick font-family from mermaid config.
--- a/.changeset/weak-trees-perform.md
+++ b/.changeset/weak-trees-perform.md
@@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-fix: `getDirection` and `setDirection` in `stateDb` refactored to return and set actual direction
--- a/.changeset/witty-crews-smell.md
+++ b/.changeset/witty-crews-smell.md
@@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-`mermaidAPI.getDiagramFromText()` now returns a new different db for each state diagram
--- a/.cspell/libraries.txt
+++ b/.cspell/libraries.txt
@@ -26,7 +26,6 @@ dompurify
 elkjs
 fcose
 fontawesome
-Forgejo
 Foswiki
 Gitea
 graphlib
--- a/.cspell/mermaid-terms.txt
+++ b/.cspell/mermaid-terms.txt
@@ -12,7 +12,6 @@ gantt
 gitgraph
 gzipped
 handDrawn
-kanban
 knsv
 Knut
 marginx
--- a/.esbuild/docs.ts
+++ b/.esbuild/docs.ts
@@ -0,0 +1,34 @@
+import { execFileSync } from 'child_process';
+import { build } from 'esbuild';
+import { rm } from 'fs/promises';
+import { generateLangium } from '../.build/generateLangium.js';
+import type { MermaidBuildOptions } from './util.js';
+import { defaultOptions, getBuildConfig } from './util.js';
+
+const buildDocs = async () => {
+  const option: MermaidBuildOptions = {
+    ...defaultOptions,
+    options: {
+      file: 'rendering-util/rendering-elements/shapes.cli.ts',
+      name: 'mermaid-shapes',
+      packageName: 'mermaid',
+    },
+  } as const;
+
+  await build({ ...getBuildConfig(option), splitting: false, sourcemap: false });
+};
+
+const handler = (e) => {
+  // eslint-disable-next-line no-console
+  console.error(e);
+  process.exit(1);
+};
+
+const main = async () => {
+  await generateLangium();
+  await buildDocs().catch(handler);
+  execFileSync('node', ['packages/mermaid/dist/mermaid-shapes.esm.mjs']);
+  await rm('packages/mermaid/dist/mermaid-shapes.esm.mjs');
+};
+
+void main();
--- a/.esbuild/server.ts
+++ b/.esbuild/server.ts
@@ -9,18 +9,13 @@ import { generateLangium } from '../.build/generateLangium.js';
 import { defaultOptions, getBuildConfig } from './util.js';

 const configs = Object.values(packageOptions).map(({ packageName }) =>
-  getBuildConfig({
-    ...defaultOptions,
-    minify: false,
-    core: false,
-    options: packageOptions[packageName],
-  })
+  getBuildConfig({ ...defaultOptions, minify: false, core: false, entryName: packageName })
 );
 const mermaidIIFEConfig = getBuildConfig({
  ...defaultOptions,
  minify: false,
  core: false,
-  options: packageOptions.mermaid,
+  entryName: 'mermaid',
  format: 'iife',
 });
 configs.push(mermaidIIFEConfig);
--- a/.github/lychee.toml
+++ b/.github/lychee.toml
@@ -47,10 +47,7 @@ exclude = [
 "https://(www.)?drupal.org",

 # Swimm returns 404, eventhough the link is valid
-"https://docs.swimm.io",
-
-# Timeout
-"https://huehive.co"
+"https://docs.swimm.io"
 ]

 # Exclude all private IPs from checking.
--- a/.github/workflows/autofix.yml
+++ b/.github/workflows/autofix.yml
@@ -19,7 +19,7 @@ jobs:
        # uses version from "packageManager" field in package.json

      - name: Setup Node.js
-        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
        with:
          cache: pnpm
          node-version-file: '.node-version'
@@ -42,4 +42,4 @@ jobs:
        working-directory: ./packages/mermaid
        run: pnpm run docs:build

-      - uses: autofix-ci/action@551dded8c6cc8a1054039c8bc0b8b48c51dfc6ef # main
+      - uses: autofix-ci/action@ff86a557419858bb967097bfc916833f5647fa8c # main
--- a/.github/workflows/build-docs.yml
+++ b/.github/workflows/build-docs.yml
@@ -23,7 +23,7 @@ jobs:
      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0

      - name: Setup Node.js
-        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
        with:
          cache: pnpm
          node-version-file: '.node-version'
--- a/.github/workflows/codeql.yml
+++ b/.github/workflows/codeql.yml
@@ -36,7 +36,7 @@ jobs:

      # Initializes the CodeQL tools for scanning.
      - name: Initialize CodeQL
-        uses: github/codeql-action/init@f779452ac5af1c261dce0346a8f964149f49322b # v3.26.13
+        uses: github/codeql-action/init@2c779ab0d087cd7fe7b826087247c2c81f27bfa6 # v3.26.5
        with:
          config-file: ./.github/codeql/codeql-config.yml
          languages: ${{ matrix.language }}
@@ -48,7 +48,7 @@ jobs:
      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
      # If this step fails, then you should remove it and run the build manually (see below)
      - name: Autobuild
-        uses: github/codeql-action/autobuild@f779452ac5af1c261dce0346a8f964149f49322b # v3.26.13
+        uses: github/codeql-action/autobuild@2c779ab0d087cd7fe7b826087247c2c81f27bfa6 # v3.26.5

      # ℹ️ Command-line programs to run using the OS shell.
      # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
@@ -62,4 +62,4 @@ jobs:
      #   make release

      - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@f779452ac5af1c261dce0346a8f964149f49322b # v3.26.13
+        uses: github/codeql-action/analyze@2c779ab0d087cd7fe7b826087247c2c81f27bfa6 # v3.26.5
--- a/.github/workflows/dependency-review.yml
+++ b/.github/workflows/dependency-review.yml
@@ -17,4 +17,4 @@ jobs:
      - name: 'Checkout Repository'
        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
      - name: 'Dependency Review'
-        uses: actions/dependency-review-action@a6993e2c61fd5dc440b409aa1d6904921c5e1894 # v4.3.5
+        uses: actions/dependency-review-action@5a2ce3f5b92ee19cbb1541a4984c76d921601d7c # v4.3.4
--- a/.github/workflows/e2e-applitools.yml
+++ b/.github/workflows/e2e-applitools.yml
@@ -38,7 +38,7 @@ jobs:
        # uses version from "packageManager" field in package.json

      - name: Setup Node.js
-        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
        with:
          node-version-file: '.node-version'

--- a/.github/workflows/e2e-timings.yml
+++ b/.github/workflows/e2e-timings.yml
@@ -1,53 +0,0 @@
-name: E2E - Generate Timings
-
-on:
-  # run this workflow every night at 3am
-  schedule:
-    - cron: '28 3 * * *'
-  # or when the user triggers it from GitHub Actions page
-  workflow_dispatch:
-
-concurrency: ${{ github.workflow }}-${{ github.ref }}
-
-permissions:
-  contents: write
-
-jobs:
-  timings:
-    runs-on: ubuntu-latest
-    container:
-      image: cypress/browsers:node-20.11.0-chrome-121.0.6167.85-1-ff-120.0-edge-121.0.2277.83-1
-      options: --user 1001
-    steps:
-      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
-      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
-      - name: Setup Node.js
-        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
-        with:
-          node-version-file: '.node-version'
-      - name: Install dependencies
-        uses: cypress-io/github-action@57b70560982e6a11d23d4b8bec7f8a487cdbb71b # v6.7.8
-        with:
-          runTests: false
-      - name: Cypress run
-        uses: cypress-io/github-action@57b70560982e6a11d23d4b8bec7f8a487cdbb71b # v6.7.8
-        id: cypress
-        with:
-          install: false
-          start: pnpm run dev:coverage
-          wait-on: 'http://localhost:9000'
-          browser: chrome
-          publish-summary: false
-        env:
-          VITEST_COVERAGE: true
-          CYPRESS_COMMIT: ${{ github.sha }}
-          SPLIT: 1
-          SPLIT_INDEX: 0
-          SPLIT_FILE: 'cypress/timings.json'
-      - name: Commit changes
-        uses: EndBug/add-and-commit@a94899bca583c204427a224a7af87c02f9b325d5 # v9.1.4
-        with:
-          add: 'cypress/timings.json'
-          author_name: 'github-actions[bot]'
-          author_email: '41898282+github-actions[bot]@users.noreply.github.com'
-          message: 'chore: update E2E timings'
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -28,8 +28,7 @@ env:
      ) || 
      github.event.before
    }}
-  RUN_VISUAL_TEST: >-
-    ${{ github.repository == 'mermaid-js/mermaid' && (github.event_name != 'pull_request' || !startsWith(github.head_ref, 'renovate/')) }}
+  shouldRunParallel: ${{ secrets.CYPRESS_RECORD_KEY != '' && !(github.event_name == 'push' && github.ref == 'refs/heads/develop') }}
 jobs:
  cache:
    runs-on: ubuntu-latest
@@ -40,13 +39,14 @@ jobs:
      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
      - name: Setup Node.js
-        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
        with:
          node-version-file: '.node-version'
      - name: Cache snapshots
        id: cache-snapshot
-        uses: actions/cache@0c907a75c2c80ebcb7f088228285e798b750cf8f # v4.2.1
+        uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4.0.2
        with:
+          save-always: true
          path: ./cypress/snapshots
          key: ${{ runner.os }}-snapshots-${{ env.targetHash }}

@@ -59,7 +59,7 @@ jobs:

      - name: Install dependencies
        if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
-        uses: cypress-io/github-action@57b70560982e6a11d23d4b8bec7f8a487cdbb71b # v6.7.8
+        uses: cypress-io/github-action@df7484c5ba85def7eef30db301afa688187bc378 # v6.7.2
        with:
          # just perform install
          runTests: false
@@ -80,7 +80,7 @@ jobs:
    strategy:
      fail-fast: false
      matrix:
-        containers: [1, 2, 3, 4, 5]
+        containers: [1, 2, 3, 4]
    steps:
      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7

@@ -88,20 +88,20 @@ jobs:
        # uses version from "packageManager" field in package.json

      - name: Setup Node.js
-        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
        with:
          node-version-file: '.node-version'

      # These cached snapshots are downloaded, providing the reference snapshots.
      - name: Cache snapshots
        id: cache-snapshot
-        uses: actions/cache/restore@0c907a75c2c80ebcb7f088228285e798b750cf8f # v4.2.1
+        uses: actions/cache/restore@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4.0.2
        with:
          path: ./cypress/snapshots
          key: ${{ runner.os }}-snapshots-${{ env.targetHash }}

      - name: Install dependencies
-        uses: cypress-io/github-action@57b70560982e6a11d23d4b8bec7f8a487cdbb71b # v6.7.8
+        uses: cypress-io/github-action@df7484c5ba85def7eef30db301afa688187bc378 # v6.7.2
        with:
          runTests: false

@@ -117,8 +117,11 @@ jobs:
      # Install NPM dependencies, cache them correctly
      # and run all Cypress tests
      - name: Cypress run
-        uses: cypress-io/github-action@57b70560982e6a11d23d4b8bec7f8a487cdbb71b # v6.7.8
+        uses: cypress-io/github-action@df7484c5ba85def7eef30db301afa688187bc378 # v6.7.2
        id: cypress
+        # If CYPRESS_RECORD_KEY is set, run in parallel on all containers
+        # Otherwise (e.g. if running from fork), we run on a single container only
+        if: ${{ env.shouldRunParallel == 'true' || ( matrix.containers == 1 ) }}
        with:
          install: false
          start: pnpm run dev:coverage
@@ -126,17 +129,16 @@ jobs:
          browser: chrome
          # Disable recording if we don't have an API key
          # e.g. if this action was run from a fork
-          record: ${{ env.RUN_VISUAL_TEST == 'true' && secrets.CYPRESS_RECORD_KEY != '' }}
+          record: ${{ env.shouldRunParallel == 'true' }}
+          parallel: ${{ env.shouldRunParallel == 'true' }}
        env:
-          ARGOS_PARALLEL: ${{ env.RUN_VISUAL_TEST == 'true' }}
-          ARGOS_PARALLEL_TOTAL: ${{ env.RUN_VISUAL_TEST == 'true' && strategy.job-total || 1 }}
-          ARGOS_PARALLEL_INDEX: ${{ env.RUN_VISUAL_TEST == 'true' && matrix.containers || 1 }}
-          CYPRESS_COMMIT: ${{ github.sha }}
-          CYPRESS_RECORD_KEY: ${{ env.RUN_VISUAL_TEST == 'true' && secrets.CYPRESS_RECORD_KEY || ''}}
-          SPLIT: ${{ strategy.job-total }}
-          SPLIT_INDEX: ${{ strategy.job-index }}
-          SPLIT_FILE: 'cypress/timings.json'
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
          VITEST_COVERAGE: true
+          CYPRESS_COMMIT: ${{ github.sha }}
+          ARGOS_TOKEN: ${{ secrets.ARGOS_TOKEN }}
+          ARGOS_PARALLEL: ${{ env.shouldRunParallel == 'true' }}
+          ARGOS_PARALLEL_TOTAL: 4
+          ARGOS_PARALLEL_INDEX: ${{ matrix.containers }}

      - name: Upload Coverage to Codecov
        uses: codecov/codecov-action@e28ff129e5465c2c0dcc6f003fc735cb6ae0c673 # v4.5.0
--- a/.github/workflows/link-checker.yml
+++ b/.github/workflows/link-checker.yml
@@ -32,7 +32,7 @@ jobs:
      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7

      - name: Restore lychee cache
-        uses: actions/cache@0c907a75c2c80ebcb7f088228285e798b750cf8f # v4.2.1
+        uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4.0.2
        with:
          path: .lycheecache
          key: cache-lychee-${{ github.sha }}
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -29,7 +29,7 @@ jobs:
        # uses version from "packageManager" field in package.json

      - name: Setup Node.js
-        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
        with:
          cache: pnpm
          node-version-file: '.node-version'
--- a/.github/workflows/publish-docs.yml
+++ b/.github/workflows/publish-docs.yml
@@ -28,7 +28,7 @@ jobs:
      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0

      - name: Setup Node.js
-        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
        with:
          cache: pnpm
          node-version-file: '.node-version'
--- a/.github/workflows/release-preview-publish.yml
+++ b/.github/workflows/release-preview-publish.yml
@@ -16,7 +16,7 @@ jobs:
      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0

      - name: Setup Node.js
-        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
        with:
          cache: pnpm
          node-version-file: '.node-version'
--- a/.github/workflows/release-preview.yml
+++ b/.github/workflows/release-preview.yml
@@ -31,7 +31,7 @@ jobs:
      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0

      - name: Setup Node.js
-        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
        with:
          cache: pnpm
          node-version-file: '.node-version'
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -26,7 +26,7 @@ jobs:
      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0

      - name: Setup Node.js
-        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
        with:
          cache: pnpm
          node-version-file: '.node-version'
@@ -36,7 +36,7 @@ jobs:

      - name: Create Release Pull Request or Publish to npm
        id: changesets
-        uses: changesets/action@c8bada60c408975afd1a20b3db81d6eee6789308 # v1.4.9
+        uses: changesets/action@aba318e9165b45b7948c60273e0b72fce0a64eb9 # v1.4.7
        with:
          version: pnpm changeset:version
          publish: pnpm changeset:publish
--- a/.github/workflows/scorecard.yml
+++ b/.github/workflows/scorecard.yml
@@ -16,22 +16,22 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
-        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
        with:
          persist-credentials: false
      - name: Run analysis
-        uses: ossf/scorecard-action@dc50aa9510b46c811795eb24b2f1ba02a914e534 # v2.3.3
+        uses: ossf/scorecard-action@0864cf19026789058feabb7e87baa5f140aac736 # v2.3.1
        with:
          results_file: results.sarif
          results_format: sarif
          publish_results: true
      - name: Upload artifact
-        uses: actions/upload-artifact@65c4c4a1ddee5b72f698fdd19549f0f0fb45cf08 # v4.6.0
+        uses: actions/upload-artifact@97a0fba1372883ab732affbe8f94b823f91727db # v3.pre.node20
        with:
          name: SARIF file
          path: results.sarif
          retention-days: 5
      - name: Upload to code-scanning
-        uses: github/codeql-action/upload-sarif@f779452ac5af1c261dce0346a8f964149f49322b # v3.26.13
+        uses: github/codeql-action/upload-sarif@f0f3afee809481da311ca3a6ff1ff51d81dbeb24 # v3.26.4
        with:
          sarif_file: results.sarif
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -15,7 +15,7 @@ jobs:
        # uses version from "packageManager" field in package.json

      - name: Setup Node.js
-        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
        with:
          cache: pnpm
          node-version-file: '.node-version'
--- a/README.md
+++ b/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).**
@@ -257,34 +253,6 @@ pie

 ### Git graph [experimental - <a href="https://mermaid.live/edit#pako:eNqNkMFugzAMhl8F-VyVAR1tOW_aA-zKxSSGRCMJCk6lCvHuNZPKZdM0n-zf3_8r8QIqaIIGMqnB8kfEybQ--y4VnLP8-9RF9Mpkmm40hmlnDKmvkPiH_kfS7nFo_VN0FAf6XwocQGgxa_nGsm1bYEOOWmik1dRjGrmF1q-Cpkkj07u2HCI0PY4zHQATh8-7V9BwTPSE3iwOEd1OjQE1iWkBvk_bzQY7s0Sq4Hs7bHqKo8iGeZqbPN_WR7mpSd1RHpvPVhuMbG7XOq_L-oJlRfW5wteq0qorrpe-PBW9Pr8UJcK6rg-BLYPQ">live editor</a>]

-```
-gitGraph
-  commit
-  commit
-  branch develop
-  checkout develop
-  commit
-  commit
-  checkout main
-  merge develop
-  commit
-  commit
-```
-
-```mermaid
-gitGraph
-  commit
-  commit
-  branch develop
-  checkout develop
-  commit
-  commit
-  checkout main
-  merge develop
-  commit
-  commit
-```
-
 ### Bar chart (using gantt chart) [<a href="https://mermaid.js.org/syntax/gantt.html">docs</a> - <a href="https://mermaid.live/edit#pako:eNptkU1vhCAQhv8KIenNugiI4rkf6bmXpvEyFVxJFDYyNt1u9r8X63Z7WQ9m5pknLzieaBeMpQ3dg0dsPUkPOhwteXZIXmJcbCT3xMAxkuh8Z8kIEclyMIB209fqKcwTICFvG4IvFy_oLrZ-g9F26ILfQgvNFN94VaRXQ1iWqpumZBcu1J8p1E1TXDx59eQNr5LyEqjJn6hv5QnGNlxevZJmdLLpy5xJSzut45biYCfb0iaVxvawjNjS1p-TCguG16PvaIPzYjO67e3BwX6GiTY9jPFKH43DMF_hGMDY1J4oHg-_f8hFTJFd8L3br3yZx4QHxENsdrt1nO8dDstH3oVpF50ZYMbhU6ud4qoGLqyqBJRCmO6j0HXPZdGbihUc6Pmc0QP49xD-b5X69ZQv2gjO81IwzWqhC1lKrjJ6pA3nVS7SMiVjrKirWlYp5fs3osgrWeo00lorLWvOzz8JVbXm">live editor</a>]

 ```
@@ -467,7 +435,7 @@ A quick note from Knut Sveidqvist:
 >
 > _Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
 >
-> _Thank you to the ever-growing list of [contributors](https://github.com/mermaid-js/mermaid/graphs/contributors) that brought the project this far!_
+> _Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!_

 ---

--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -358,7 +358,7 @@ _很不幸的是，鱼与熊掌不可兼得，在这个场景下它意味着在

 > _特别感谢 [d3](https://d3js.org/) 和 [dagre-d3](https://github.com/cpettitt/dagre-d3) 这两个优秀的项目，它们提供了图形布局和绘图工具库！_ > _同样感谢 [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) 提供了时序图语法的使用。 感谢 Jessica Peter 提供了甘特图渲染的灵感。_ > _感谢 [Tyler Long](https://github.com/tylerlong) 从 2017 年四月开始成为了项目的合作者。_
 >
-> _感谢越来越多的 [贡献者们](https://github.com/mermaid-js/mermaid/graphs/contributors)，没有你们，就没有这个项目的今天！_
+> _感谢越来越多的 [贡献者们](https://github.com/knsv/mermaid/graphs/contributors)，没有你们，就没有这个项目的今天！_

 ---

--- a/cypress.config.ts
+++ b/cypress.config.ts
@@ -1,9 +1,8 @@
-import eyesPlugin from '@applitools/eyes-cypress';
-import { registerArgosTask } from '@argos-ci/cypress/task';
-import coverage from '@cypress/code-coverage/task';
 import { defineConfig } from 'cypress';
 import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin';
-import cypressSplit from 'cypress-split';
+import coverage from '@cypress/code-coverage/task';
+import eyesPlugin from '@applitools/eyes-cypress';
+import { registerArgosTask } from '@argos-ci/cypress/task';

 export default eyesPlugin(
  defineConfig({
@@ -14,7 +13,6 @@ export default eyesPlugin(
      specPattern: 'cypress/integration/**/*.{js,ts}',
      setupNodeEvents(on, config) {
        coverage(on, config);
-        cypressSplit(on, config);
        on('before:browser:launch', (browser, launchOptions) => {
          if (browser.name === 'chrome' && browser.isHeadless) {
            launchOptions.args.push('--window-size=1440,1024', '--force-device-scale-factor=1');
@@ -23,10 +21,12 @@ export default eyesPlugin(
        });
        // copy any needed variables from process.env to config.env
        config.env.useAppli = process.env.USE_APPLI ? true : false;
-        config.env.useArgos = process.env.RUN_VISUAL_TEST === 'true';
+        config.env.useArgos = !!process.env.CI;

        if (config.env.useArgos) {
-          registerArgosTask(on, config);
+          registerArgosTask(on, config, {
+            token: 'fc3a35cf5200db928d65b2047861582d9444032b',
+          });
        } else {
          addMatchImageSnapshotPlugin(on, config);
        }
--- a/cypress/helpers/util.ts
+++ b/cypress/helpers/util.ts
@@ -29,7 +29,6 @@ export const mermaidUrl = (
  options: CypressMermaidConfig,
  api: boolean
 ): string => {
-  options.handDrawnSeed = 1;
  const codeObject: CodeObject = {
    code: graphStr,
    mermaid: options,
@@ -132,10 +131,3 @@ export const verifyScreenshot = (name: string): void => {
    cy.matchImageSnapshot(name);
  }
 };
-
-export const verifyNumber = (value: number, expected: number, deltaPercent = 10): void => {
-  expect(value).to.be.within(
-    expected * (1 - deltaPercent / 100),
-    expected * (1 + deltaPercent / 100)
-  );
-};
--- a/cypress/integration/rendering/architecture.spec.ts
+++ b/cypress/integration/rendering/architecture.spec.ts
@@ -171,62 +171,9 @@ describe.skip('architecture diagram', () => {
            `
    );
  });
-
-  it('should render an architecture diagram with a resonable height', () => {
-    imgSnapshotTest(
-      `architecture-beta
-              group federated(cloud)[Federated Environment]
-                  service server1(server)[System] in federated
-                  service edge(server)[Edge Device] in federated
-                  server1:R -- L:edge
-
-              group on_prem(cloud)[Hub]
-                  service firewall(server)[Firewall Device] in on_prem
-                  service server(server)[Server] in on_prem
-                  firewall:R -- L:server
-
-                  service db1(database)[db1] in on_prem
-                  service db2(database)[db2] in on_prem
-                  service db3(database)[db3] in on_prem
-                  service db4(database)[db4] in on_prem
-                  service db5(database)[db5] in on_prem
-                  service db6(database)[db6] in on_prem
-
-                  junction mid in on_prem
-                  server:B -- T:mid
-
-                  junction 1Leftofmid in on_prem
-                  1Leftofmid:R -- L:mid
-                  1Leftofmid:B -- T:db1
-
-                  junction 2Leftofmid in on_prem
-                  2Leftofmid:R -- L:1Leftofmid
-                  2Leftofmid:B -- T:db2
-
-                  junction 3Leftofmid in on_prem
-                  3Leftofmid:R -- L:2Leftofmid
-                  3Leftofmid:B -- T:db3
-
-                  junction 1RightOfMid in on_prem
-                  mid:R -- L:1RightOfMid
-                  1RightOfMid:B -- T:db4
-                  
-                  junction 2RightOfMid in on_prem
-                  1RightOfMid:R -- L:2RightOfMid
-                  2RightOfMid:B -- T:db5        
-                  
-                  junction 3RightOfMid in on_prem
-                  2RightOfMid:R -- L:3RightOfMid
-                  3RightOfMid:B -- T:db6         
-
-                  edge:R -- L:firewall
-      `
-    );
-  });
 });

-// Skipped as the layout is not deterministic, and causes issues in E2E tests.
-describe.skip('architecture - external', () => {
+describe('architecture - external', () => {
  it('should allow adding external icons', () => {
    urlSnapshotTest('http://localhost:9000/architecture-external.html');
  });
--- a/cypress/integration/rendering/classDiagram-elk-v3.spec.js
+++ b/cypress/integration/rendering/classDiagram-elk-v3.spec.js
--- a/cypress/integration/rendering/classDiagram-handDrawn-v3.spec.js
+++ b/cypress/integration/rendering/classDiagram-handDrawn-v3.spec.js
--- a/cypress/integration/rendering/classDiagram-v3.spec.js
+++ b/cypress/integration/rendering/classDiagram-v3.spec.js
--- a/cypress/integration/rendering/flowchart-elk.spec.js
+++ b/cypress/integration/rendering/flowchart-elk.spec.js
@@ -1,6 +1,6 @@
-import { imgSnapshotTest, renderGraph, verifyNumber } from '../../helpers/util.ts';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';

-describe('Flowchart ELK', () => {
+describe.skip('Flowchart ELK', () => {
  it('1-elk: should render a simple flowchart', () => {
    imgSnapshotTest(
      `flowchart-elk TD
@@ -109,7 +109,7 @@ describe('Flowchart ELK', () => {
      const style = svg.attr('style');
      expect(style).to.match(/^max-width: [\d.]+px;$/);
      const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-      verifyNumber(maxWidthValue, 380);
+      expect(maxWidthValue).to.be.within(230 * 0.95, 230 * 1.05);
    });
  });
  it('8-elk: should render a flowchart when useMaxWidth is false', () => {
@@ -128,7 +128,7 @@ describe('Flowchart ELK', () => {
      const width = parseFloat(svg.attr('width'));
      // use within because the absolute value can be slightly different depending on the environment ±5%
      // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
-      verifyNumber(width, 380);
+      expect(width).to.be.within(230 * 0.95, 230 * 1.05);
      expect(svg).to.not.have.attr('style');
    });
  });
@@ -692,7 +692,7 @@ A --> B
      {}
    );
    cy.get('svg').should((svg) => {
-      const edges = svg[0].querySelectorAll('.edges > path');
+      const edges = svg.querySelectorAll('.edges > path');
      edges.forEach((edge) => {
        expect(edge).to.have.class('flowchart-link');
      });
@@ -739,7 +739,7 @@ NL\`") --"\`1o **bold**\`"--> c
          { flowchart: { titleTopMargin: 0 } }
        );
      });
-      it.skip('Wrapping long text with a new line', () => {
+      it('Wrapping long text with a new line', () => {
        imgSnapshotTest(
          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
 flowchart-elk LR
@@ -841,7 +841,7 @@ end
          { flowchart: { titleTopMargin: 0 } }
        );
      });
-      it('Sub graphs', () => {
+      it('Sub graphs and markdown strings', () => {
        imgSnapshotTest(
          `---
 config:
@@ -857,196 +857,6 @@ flowchart LR
    D --> E
      A["A"]

-`,
-          { flowchart: { titleTopMargin: 0 } }
-        );
-      });
-      it('6080: should handle diamond shape intersections', () => {
-        imgSnapshotTest(
-          `---
-config:
-  layout: elk
---
-flowchart LR
- subgraph s1["Untitled subgraph"]
-        n1["Evaluate"]
-        n2["Option 1"]
-        n3["Option 2"]
-        n4["fa:fa-car Option 3"]
-  end
- subgraph s2["Untitled subgraph"]
-        n5["Evaluate"]
-        n6["Option 1"]
-        n7["Option 2"]
-        n8["fa:fa-car Option 3"]
-  end
-    A["Start"] -- Some text --> B("Continue")
-    B --> C{"Evaluate"}
-    C -- One --> D["Option 1"]
-    C -- Two --> E["Option 2"]
-    C -- Three --> F["fa:fa-car Option 3"]
-    n1 -- One --> n2
-    n1 -- Two --> n3
-    n1 -- Three --> n4
-    n5 -- One --> n6
-    n5 -- Two --> n7
-    n5 -- Three --> n8
-    n1@{ shape: diam}
-    n2@{ shape: rect}
-    n3@{ shape: rect}
-    n4@{ shape: rect}
-    n5@{ shape: diam}
-    n6@{ shape: rect}
-    n7@{ shape: rect}
-    n8@{ shape: rect}
-
-`,
-          { flowchart: { titleTopMargin: 0 } }
-        );
-      });
-
-      it('6088-1: should handle diamond shape intersections', () => {
-        imgSnapshotTest(
-          `---
-config:
-  layout: elk
---
-      flowchart LR
-      subgraph S2
-      subgraph s1["APA"]
-      D{"Use the editor"}
-      end
-
-
-      D -- Mermaid js --> I{"fa:fa-code Text"}
-            D --> I
-            D --> I
-
-      end
-`,
-          { flowchart: { titleTopMargin: 0 } }
-        );
-      });
-
-      it('6088-2: should handle diamond shape intersections', () => {
-        imgSnapshotTest(
-          `---
-config:
-  layout: elk
---
-      flowchart LR
-      a
-      subgraph s0["APA"]
-      subgraph s8["APA"]
-      subgraph s1["APA"]
-        D{"X"}
-        E[Q]
-      end
-      subgraph s3["BAPA"]
-        F[Q]
-        I
-      end
-            D --> I
-            D --> I
-            D --> I
-
-      I{"X"}
-      end
-      end
-
-`,
-          { flowchart: { titleTopMargin: 0 } }
-        );
-      });
-
-      it('6088-3: should handle diamond shape intersections', () => {
-        imgSnapshotTest(
-          `---
-config:
-  layout: elk
---
-      flowchart LR
-      a
-        D{"Use the editor"}
-
-      D -- Mermaid js --> I{"fa:fa-code Text"}
-      D-->I
-      D-->I
-
-`,
-          { flowchart: { titleTopMargin: 0 } }
-        );
-      });
-
-      it('6088-4: should handle diamond shape intersections', () => {
-        imgSnapshotTest(
-          `---
-config:
-  layout: elk
---
-flowchart LR
- subgraph s1["Untitled subgraph"]
-        n1["Evaluate"]
-        n2["Option 1"]
-        n3["Option 2"]
-        n4["fa:fa-car Option 3"]
-  end
- subgraph s2["Untitled subgraph"]
-        n5["Evaluate"]
-        n6["Option 1"]
-        n7["Option 2"]
-        n8["fa:fa-car Option 3"]
-  end
-    A["Start"] -- Some text --> B("Continue")
-    B --> C{"Evaluate"}
-    C -- One --> D["Option 1"]
-    C -- Two --> E["Option 2"]
-    C -- Three --> F["fa:fa-car Option 3"]
-    n1 -- One --> n2
-    n1 -- Two --> n3
-    n1 -- Three --> n4
-    n5 -- One --> n6
-    n5 -- Two --> n7
-    n5 -- Three --> n8
-    n1@{ shape: diam}
-    n2@{ shape: rect}
-    n3@{ shape: rect}
-    n4@{ shape: rect}
-    n5@{ shape: diam}
-    n6@{ shape: rect}
-    n7@{ shape: rect}
-    n8@{ shape: rect}
-
-`,
-          { flowchart: { titleTopMargin: 0 } }
-        );
-      });
-
-      it('6088-5: should handle diamond shape intersections', () => {
-        imgSnapshotTest(
-          `---
-config:
-  layout: elk
---
-flowchart LR
-    A{A} --> B & C
-
-`,
-          { flowchart: { titleTopMargin: 0 } }
-        );
-      });
-      it('6088-6: should handle diamond shape intersections', () => {
-        imgSnapshotTest(
-          `---
-config:
-  layout: elk
---
-flowchart LR
-    A{A} --> B & C
-    subgraph "subbe"
-      A
-    end
-
 `,
          { flowchart: { titleTopMargin: 0 } }
        );
--- a/cypress/integration/rendering/flowchart-handDrawn.spec.js
+++ b/cypress/integration/rendering/flowchart-handDrawn.spec.js
@@ -12,6 +12,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
+        handDrawnSeed: 1,
        flowchart: { htmlLabels: false },
        fontFamily: 'courier',
      }
@@ -29,6 +30,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
+        handDrawnSeed: 1,
        flowchart: { htmlLabels: true },
        fontFamily: 'courier',
      }
@@ -45,7 +47,7 @@ describe('Flowchart HandDrawn', () => {
      C -->|Two| E[iPhone]
      C -->|Three| F[Car]
      `,
-      { look: 'handDrawn', fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 1, fontFamily: 'courier' }
    );
  });

@@ -60,7 +62,7 @@ describe('Flowchart HandDrawn', () => {
      C -->|Two| E[\\iPhone\\]
      C -->|Three| F[Car]
      `,
-      { look: 'handDrawn', fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 1, fontFamily: 'courier' }
    );
  });

@@ -76,7 +78,7 @@ describe('Flowchart HandDrawn', () => {
      classDef processHead fill:#888888,color:white,font-weight:bold,stroke-width:3px,stroke:#001f3f
      class 1A,1B,D,E processHead
      `,
-      { look: 'handDrawn', fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 1, fontFamily: 'courier' }
    );
  });

@@ -105,7 +107,7 @@ describe('Flowchart HandDrawn', () => {
      35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
      36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
      `,
-      { look: 'handDrawn', fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 1, fontFamily: 'courier' }
    );
  });

@@ -176,7 +178,7 @@ describe('Flowchart HandDrawn', () => {
      9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
      9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
      `,
-      { look: 'handDrawn', fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 1, fontFamily: 'courier' }
    );
  });

@@ -185,7 +187,7 @@ describe('Flowchart HandDrawn', () => {
      `
    graph TB;subgraph "number as labels";1;end;
      `,
-      { look: 'handDrawn', fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 1, fontFamily: 'courier' }
    );
  });

@@ -197,7 +199,7 @@ describe('Flowchart HandDrawn', () => {
        a1-->a2
      end
      `,
-      { look: 'handDrawn', fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 1, fontFamily: 'courier' }
    );
  });

@@ -209,7 +211,7 @@ describe('Flowchart HandDrawn', () => {
        a1-->a2
      end
      `,
-      { look: 'handDrawn', fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 1, fontFamily: 'courier' }
    );
  });

@@ -244,7 +246,7 @@ describe('Flowchart HandDrawn', () => {
      style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
      style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
      `,
-      { look: 'handDrawn', fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 1, fontFamily: 'courier' }
    );
  });

@@ -346,7 +348,7 @@ describe('Flowchart HandDrawn', () => {
      sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
      sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
      `,
-      { look: 'handDrawn', fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 1, fontFamily: 'courier' }
    );
  });

@@ -362,6 +364,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
+        handDrawnSeed: 1,
        listUrl: false,
        listId: 'color styling',
        fontFamily: 'courier',
@@ -387,6 +390,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
+        handDrawnSeed: 1,
        listUrl: false,
        listId: 'color styling',
        fontFamily: 'courier',
@@ -407,6 +411,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
+        handDrawnSeed: 1,
        flowchart: { htmlLabels: false },
        fontFamily: 'courier',
      }
@@ -430,6 +435,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
+        handDrawnSeed: 1,
        flowchart: { htmlLabels: false },
        fontFamily: 'courier',
      }
@@ -451,6 +457,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
+        handDrawnSeed: 1,
        flowchart: { htmlLabels: false },
        fontFamily: 'courier',
      }
@@ -464,6 +471,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
+        handDrawnSeed: 1,
        flowchart: { htmlLabels: false },
        fontFamily: 'courier',
      }
@@ -477,6 +485,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
+        handDrawnSeed: 1,
        flowchart: { htmlLabels: false },
        fontFamily: 'courier',
      }
@@ -491,6 +500,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
+        handDrawnSeed: 1,
        flowchart: { htmlLabels: false },
        fontFamily: 'courier',
      }
@@ -517,6 +527,7 @@ describe('Flowchart HandDrawn', () => {
      class A someclass;`,
      {
        look: 'handDrawn',
+        handDrawnSeed: 1,
        flowchart: { htmlLabels: false },
        fontFamily: 'courier',
      }
@@ -533,7 +544,7 @@ describe('Flowchart HandDrawn', () => {
      C -->|Two| E[iPhone]
      C -->|Three| F[fa:fa-car Car]
      `,
-      { look: 'handDrawn', flowchart: { nodeSpacing: 50 }, fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 1, flowchart: { nodeSpacing: 50 }, fontFamily: 'courier' }
    );
  });

@@ -549,6 +560,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
+        handDrawnSeed: 1,
        flowchart: { rankSpacing: '100' },
        fontFamily: 'courier',
      }
@@ -566,6 +578,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
+        handDrawnSeed: 1,
        flowchart: { htmlLabels: false },
        fontFamily: 'courier',
      }
@@ -590,7 +603,7 @@ describe('Flowchart HandDrawn', () => {
      click E "notes://do-your-thing/id" "other protocol test"
      click F "javascript:alert('test')" "script test"
      `,
-      { look: 'handDrawn', securityLevel: 'loose', fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 1, securityLevel: 'loose', fontFamily: 'courier' }
    );
  });

@@ -610,7 +623,7 @@ describe('Flowchart HandDrawn', () => {
      click B "index.html#link-clicked" "link test"
      click D testClick "click test"
      `,
-      { look: 'handDrawn', flowchart: { htmlLabels: true } }
+      { look: 'handDrawn', handDrawnSeed: 1, flowchart: { htmlLabels: true } }
    );
  });

@@ -632,6 +645,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
+        handDrawnSeed: 1,
        flowchart: { htmlLabels: false },
        fontFamily: 'courier',
      }
@@ -650,7 +664,7 @@ describe('Flowchart HandDrawn', () => {
      class A myClass1
      class D myClass2
      `,
-      { look: 'handDrawn', flowchart: { htmlLabels: true } }
+      { look: 'handDrawn', handDrawnSeed: 1, flowchart: { htmlLabels: true } }
    );
  });

@@ -668,6 +682,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
+        handDrawnSeed: 1,
        flowchart: { htmlLabels: false },
        fontFamily: 'courier',
      }
@@ -696,6 +711,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
+        handDrawnSeed: 1,
        flowchart: { htmlLabels: false },
        fontFamily: 'courier',
      }
@@ -712,6 +728,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
+        handDrawnSeed: 1,
        flowchart: { htmlLabels: false },
        fontFamily: 'courier',
      }
@@ -735,6 +752,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
+        handDrawnSeed: 1,
        flowchart: { htmlLabels: false },
        fontFamily: 'courier',
      }
@@ -751,7 +769,7 @@ describe('Flowchart HandDrawn', () => {
      C -->|Two| E[iPhone]
      C -->|Three| F[fa:fa-car Car]
      `,
-      { look: 'handDrawn', flowchart: { diagramPadding: 0 } }
+      { look: 'handDrawn', handDrawnSeed: 1, flowchart: { diagramPadding: 0 } }
    );
  });

@@ -786,7 +804,7 @@ describe('Flowchart HandDrawn', () => {
      `graph TD
        a["<strong>Haiya</strong>"]-->b
      `,
-      { look: 'handDrawn', htmlLabels: false, flowchart: { htmlLabels: false } }
+      { look: 'handDrawn', handDrawnSeed: 1, htmlLabels: false, flowchart: { htmlLabels: false } }
    );
  });
  it('FDH37: should render non-escaped with html labels', () => {
@@ -796,6 +814,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
+        handDrawnSeed: 1,
        htmlLabels: true,
        flowchart: { htmlLabels: true },
        securityLevel: 'loose',
@@ -811,7 +830,7 @@ describe('Flowchart HandDrawn', () => {
      C -->|Two| E[iPhone]
      C -->|Three| F[fa:fa-car Car]
      `,
-      { look: 'handDrawn', flowchart: { useMaxWidth: true } }
+      { look: 'handDrawn', handDrawnSeed: 1, flowchart: { useMaxWidth: true } }
    );
    cy.get('svg').should((svg) => {
      expect(svg).to.have.attr('width', '100%');
@@ -834,7 +853,7 @@ describe('Flowchart HandDrawn', () => {
      C -->|Two| E[iPhone]
      C -->|Three| F[fa:fa-car Car]
      `,
-      { look: 'handDrawn', flowchart: { useMaxWidth: false } }
+      { look: 'handDrawn', handDrawnSeed: 1, flowchart: { useMaxWidth: false } }
    );
    cy.get('svg').should((svg) => {
      // const height = parseFloat(svg.attr('height'));
@@ -855,6 +874,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
+        handDrawnSeed: 1,
        htmlLabels: true,
        flowchart: { htmlLabels: true },
        securityLevel: 'loose',
@@ -884,6 +904,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
+        handDrawnSeed: 1,
        htmlLabels: true,
        flowchart: { htmlLabels: true },
        securityLevel: 'loose',
@@ -898,6 +919,7 @@ graph TD
      `,
      {
        look: 'handDrawn',
+        handDrawnSeed: 1,
        htmlLabels: true,
        flowchart: { htmlLabels: true },
        securityLevel: 'loose',
@@ -915,6 +937,7 @@ graph TD
      `,
      {
        look: 'handDrawn',
+        handDrawnSeed: 1,
        htmlLabels: true,
        flowchart: { htmlLabels: true },
        securityLevel: 'loose',
@@ -954,6 +977,7 @@ graph TD
      `,
      {
        look: 'handDrawn',
+        handDrawnSeed: 1,
        htmlLabels: true,
        flowchart: { htmlLabels: true },
        securityLevel: 'loose',
@@ -975,6 +999,7 @@ graph TD
      `,
      {
        look: 'handDrawn',
+        handDrawnSeed: 1,
        htmlLabels: true,
        flowchart: { htmlLabels: true },
        securityLevel: 'loose',
@@ -991,6 +1016,7 @@ graph TD
      `,
      {
        look: 'handDrawn',
+        handDrawnSeed: 1,
        htmlLabels: true,
        flowchart: { htmlLabels: true },
        securityLevel: 'loose',
@@ -1006,6 +1032,7 @@ graph TD
      `,
      {
        look: 'handDrawn',
+        handDrawnSeed: 1,
        htmlLabels: true,
        flowchart: { htmlLabels: true },
        securityLevel: 'loose',
@@ -1024,6 +1051,7 @@ graph TD
    `,
      {
        look: 'handDrawn',
+        handDrawnSeed: 1,
        flowchart: { htmlLabels: true },
        securityLevel: 'loose',
      }
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -1076,41 +1076,4 @@ end
      );
    });
  });
-  describe('New @ sytax for node metadata edge cases', () => {
-    it('should be possible to use @  syntax to add labels on multi nodes', () => {
-      imgSnapshotTest(
-        `flowchart TB
-       n2["label for n2"] &   n4@{ label: "labe for n4"}   & n5@{ label: "labe for n5"}
-        `,
-        {}
-      );
-    });
-    it('should be possible to use @  syntax to add labels with trail spaces and &', () => {
-      imgSnapshotTest(
-        `flowchart TB
-       n2["label for n2"] &   n4@{ label: "labe for n4"}   & n5@{ label: "labe for n5"}   
-        `,
-        {}
-      );
-    });
-    it('should be possible to use @  syntax to add labels with trail spaces', () => {
-      imgSnapshotTest(
-        `flowchart TB
-       n2["label for n2"]
-       n4@{ label: "labe for n4"}
-       n5@{ label: "labe for n5"}  
-        `,
-        {}
-      );
-    });
-    it('should be possible to use @  syntax to add labels with trail spaces and edge/link', () => {
-      imgSnapshotTest(
-        `flowchart TD
-    A["A"] --> B["for B"] &    C@{ label: "for c"} & E@{label : "for E"}  
-    D@{label: "for D"}     
-        `,
-        {}
-      );
-    });
-  });
 });
--- a/cypress/integration/rendering/iconShape.spec.ts
+++ b/cypress/integration/rendering/iconShape.spec.ts
@@ -124,20 +124,3 @@ describe('Test iconShape with different h', () => {
    imgSnapshotTest(flowchartCode);
  });
 });
-
-describe('Test colored iconShape', () => {
-  it('with no styles', () => {
-    let flowchartCode = `flowchart TB\n`;
-    const icon = 'fluent-emoji:tropical-fish';
-    flowchartCode += `  nA --> nAA@{ icon: '${icon}', form: 'square', label: 'icon with color' }\n`;
-    imgSnapshotTest(flowchartCode);
-  });
-
-  it('with styles', () => {
-    let flowchartCode = `flowchart TB\n`;
-    const icon = 'fluent-emoji:tropical-fish';
-    flowchartCode += `  nA --> nAA@{ icon: '${icon}', form: 'square', label: 'icon with color' }\n`;
-    flowchartCode += `  style nAA fill:#f9f,stroke:#333,stroke-width:4px \n`;
-    imgSnapshotTest(flowchartCode);
-  });
-});
--- a/cypress/integration/rendering/kanban.spec.ts
+++ b/cypress/integration/rendering/kanban.spec.ts
@@ -1,136 +0,0 @@
-import { imgSnapshotTest } from '../../helpers/util.ts';
-
-describe('Kanban diagram', () => {
-  it('1: should render a kanban with a single section', () => {
-    imgSnapshotTest(
-      `kanban
-  id1[Todo]
-    docs[Create Documentation]
-    docs[Create Blog about the new diagram]
-      `,
-      {}
-    );
-  });
-  it('2: should render a kanban with multiple sections', () => {
-    imgSnapshotTest(
-      `kanban
-  id1[Todo]
-    docs[Create Documentation]
-  id2
-    docs[Create Blog about the new diagram]
-      `,
-      {}
-    );
-  });
-  it('3: should render a kanban with a single wrapping node', () => {
-    imgSnapshotTest(
-      `kanban
-  id1[Todo]
-    id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char, wrapping]
-      `,
-      {}
-    );
-  });
-  it('4: should handle the height of a section with a wrapping node at the end', () => {
-    imgSnapshotTest(
-      `kanban
-  id1[Todo]
-    id2[One line]
-    id3[Title of diagram is more than 100 chars when user duplicates diagram with 100 char, wrapping]
-      `,
-      {}
-    );
-  });
-  it('5: should handle the height of a section with a wrapping node at the top', () => {
-    imgSnapshotTest(
-      `kanban
-  id1[Todo]
-    id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char, wrapping]
-    id3[One line]
-      `,
-      {}
-    );
-  });
-  it('6: should handle the height of a section with a wrapping node in the middle', () => {
-    imgSnapshotTest(
-      `kanban
-  id1[Todo]
-    id2[One line]
-    id3[Title of diagram is more than 100 chars when user duplicates diagram with 100 char, wrapping]
-    id4[One line]
-      `,
-      {}
-    );
-  });
-  it('6: should handle assigments', () => {
-    imgSnapshotTest(
-      `kanban
-  id1[Todo]
-    docs[Create Documentation]
-  id2[In progress]
-    docs[Create Blog about the new diagram]@{ assigned: 'knsv' }
-      `,
-      {}
-    );
-  });
-  it('7: should handle prioritization', () => {
-    imgSnapshotTest(
-      `kanban
-  id2[In progress]
-    vh[Very High]@{ priority: 'Very High' }
-    h[High]@{ priority: 'High' }
-    m[Default priority]
-    l[Low]@{ priority: 'Low' }
-    vl[Very Low]@{ priority: 'Very Low' }
-      `,
-      {}
-    );
-  });
-  it('7: should handle external tickets', () => {
-    imgSnapshotTest(
-      `kanban
-  id1[Todo]
-    docs[Create Documentation]
-  id2[In progress]
-    docs[Create Blog about the new diagram]@{ ticket: MC-2037 }
-      `,
-      {}
-    );
-  });
-  it('8: should handle assignments, prioritization and tickets ids in the same item', () => {
-    imgSnapshotTest(
-      `kanban
-  id2[In progress]
-    docs[Create Blog about the new diagram]@{ priority: 'Very Low', ticket: MC-2037, assigned: 'knsv' }
-      `,
-      {}
-    );
-  });
-  it('10: Full example', () => {
-    imgSnapshotTest(
-      `---
-config:
-  kanban:
-    ticketBaseUrl: 'https://abc123.atlassian.net/browse/#TICKET#'
---
-kanban
-  id1[Todo]
-    docs[Create Documentation]
-    docs[Create Blog about the new diagram]
-  id7[In progress]
-    id6[Create renderer so that it works in all cases. We also add som extra text here for testing purposes. And some more just for the extra flare.]
-    id8[Design grammar]@{ assigned: 'knsv' }
-  id9[Ready for deploy]
-  id10[Ready for test]
-  id11[Done]
-    id5[define getData]
-    id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
-    id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }
-    id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
-    id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
-  id12[Can't reproduce]
-      `,
-      {}
-    );
-  });
-});
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -10,10 +10,6 @@
      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.5.2/css/all.min.css"
-      rel="stylesheet"
-    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
      rel="stylesheet"
@@ -38,7 +34,6 @@
        /* background: rgb(221, 208, 208); */
        /* background: #333; */
        font-family: 'Arial';
-        /* color: white; */
        /* font-size: 18px !important; */
      }

@@ -78,355 +73,363 @@
        font-family: monospace;
        font-size: 72px;
      }
-
      pre {
        width: 100%;
      }
-
      /* tspan {
              font-size: 6px !important;
            } */
-      /* .flowchart-link {
-        stroke-dasharray: 4, 4 !important;
-        animation: flow 1s linear infinite;
-        animation: dashdraw 4.93282s linear infinite;
-        stroke-width: 2px !important;
-      } */
-
-      @keyframes dashdraw {
-        from {
-          stroke-dashoffset: 0;
-        }
-      }
-
-      /*stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation:    4.932820s linear infinite;*/
-      /* stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;*/
    </style>
  </head>

  <body>
-    <pre id="diagram4" class="mermaid">
-      flowchart LR
-        AB["apa@apa@"] --> B(("`apa@apa`"))
-    </pre>
-    <pre id="diagram4" class="mermaid">
-      flowchart
-        D(("for D"))
-    </pre>
-    <pre id="diagram4" class="mermaid">
-      flowchart LR
-        A e1@==> B
-        e1@{ animate: true}
-    </pre>
-    <pre id="diagram4" class="mermaid">
-flowchart LR
-  A e1@--> B
-  classDef animate stroke-width:2,stroke-dasharray:10\,8,stroke-dashoffset:-180,animation: edge-animation-frame 6s linear infinite, stroke-linecap: round
-  class e1 animate
-    </pre>
-    <h2>infinite</h2>
-    <pre id="diagram4" class="mermaid2">
-flowchart LR
-  A e1@--> B
-  classDef animate stroke-dasharray: 9\,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
-  class e1 animate
-    </pre>
-    <h2>Mermaid - edge-animation-slow</h2>
-    <pre id="diagram4" class="mermaid2">
-flowchart LR
-  A e1@--> B
-e1@{ animation: fast}
-    </pre>
-    <h2>Mermaid - edge-animation-fast</h2>
-    <pre id="diagram4" class="mermaid2">
-flowchart LR
-  A e1@--> B
-  classDef animate stroke-dasharray: 1000,stroke-dashoffset: 1000,animation: dash 10s linear;
-  class e1 edge-animation-fast
-    </pre>
+    <div class="flex">
+      <pre id="diagram" class="mermaid2">
+---
+  title: hello2
+  config:
+    look: handDrawn
+    layout: elk
+    elk:
+        <!-- nodePlacementStrategy: INTERACTIVE -->
+        <!-- mergeEdges: true -->
+---
+stateDiagram-v2
+    direction LR
+    accTitle: An idealized Open Source supply-chain graph

-    <pre id="diagram4" class="mermaid2">
+    %%
+    state "🟦 Importer" as author_importer
+    state "🟥 Supplier, Owner" as author_owner
+    state "🟨🟥 Maintainer, Author\n🟨 Custodian" as author
+    state "🟩 Distributor" as repository_distributor
+    state "🟦 Importer" as language_importer
+    state "🟦🟨 Packager" as language_packager
+    state "🟦🟨 OSS Steward" as language_steward
+    state "🟨 Curator" as language_curator
+    state "🟩 Distributor" as language_distributor
+    state "🟦 Contributor" as contributor
+    state "🟦 Importer" as package_importer
+    state "🟨 Patcher" as package_patcher
+    state "🟨🟦 Builder\n🟨🟦 Packager\n🟨🟦 Containerizer" as package_packager
+    state "🟨 Curator" as package_curator
+    state "🟩 Distributor" as package_distributor
+    state "🟦 Importer" as integrator_importer
+    state "🟥 Supplier, Manufacturer, Owner" as integrator_owner
+    state "🟦🟨🟥 Integrator, Developer" as integrator_developer
+    state "🟩🟨 SBOM Redactor\n🟩 Publisher" as integrator_publisher
+    state "🟦🟨 Builder" as integrator_builder
+    state "🟨 Deployer" as deployer
+    state "🟦 Vuln. Checker" as integrator_checker
+    state "🟩🟨 SBOM Redactor" as redactor
+    state "🟦 Consumer\n🟦  User" as consumer
+    state "🟦 Auditor" as auditor_internal
+    state "🟦 Auditor" as auditor_external

-info    </pre
-    >
-    <pre id="diagram4" class="mermaid2">
+    %%
+    classDef createsSBOM stroke:red,stroke-width:3px;
+    classDef updatesSBOM stroke:yellow,stroke-width:3px;
+    classDef assemblesSBOM stroke:yellow,stroke-width:3px;
+    classDef distributesSBOM stroke:green,stroke-width:3px;
+    classDef verifiesSBOM stroke:#07f,stroke-width:3px;
+
+    %%
+    class author_importer verifiesSBOM
+    class author_owner createsSBOM
+    class manufacturer_owner createsSBOM
+    class author assemblesSBOM
+    class package_importer verifiesSBOM
+    class package_patcher updatesSBOM
+    class package_packager assemblesSBOM
+    class package_curator distributesSBOM
+    class package_distributor distributesSBOM
+    class language_importer verifiesSBOM
+    class language_packager assemblesSBOM
+    class language_steward updatesSBOM
+    class language_curator distributesSBOM
+    class language_distributor distributesSBOM
+    class repository_distributor distributesSBOM
+    class integrator_importer verifiesSBOM
+    class integrator_owner createsSBOM
+    class integrator_developer assemblesSBOM
+    class integrator_publisher distributesSBOM
+    class integrator_builder assemblesSBOM
+    class integrator_checker verifiesSBOM
+    class deployer assemblesSBOM
+    class redactor distributesSBOM
+    class auditor_internal verifiesSBOM
+    class auditor_external verifiesSBOM
+
+    state "Maintainer Environment" as environment_maintainer {
+        [*] --> author_importer
+        [*] --> author
+        author_importer --> author
+        author_owner --> author
+        author       --> language_packager
+    }
+
+    [*] --> environment_maintainer
+
+    state "Language Ecosystem" as ecosystem_lang {
+        [*] --> language_importer
+        [*] --> language_steward
+        [*] --> language_curator
+        [*] --> language_distributor
+        language_importer --> language_distributor
+        language_importer --> language_curator
+        language_steward --> language_curator
+        language_curator --> language_distributor
+    }
+
+    language_packager --> ecosystem_lang
+    ecosystem_lang    --> ecosystem_lang
+
+    state "Public Collaboration Ecosystem" as ecosystem_repo {
+        [*] --> repository_distributor
+    }
+
+    author         --> ecosystem_repo
+    ecosystem_repo --> author
+
+    repository_distributor --> contributor
+    contributor            --> repository_distributor
+
+    state "Package Ecosystem" as ecosystem_package {
+        [*] --> package_importer
+        [*] --> package_packager
+        [*] --> package_patcher
+        package_importer --> package_patcher
+        package_importer --> package_packager
+        package_patcher  --> package_packager
+        package_packager --> package_curator
+        package_packager --> package_distributor
+        package_curator  --> package_distributor
+    }
+
+    repository_distributor --> ecosystem_package
+    language_distributor   --> ecosystem_package
+    ecosystem_package      --> ecosystem_package
+
+    state "Integrator Environment" as environment_integrator {
+        [*] --> integrator_developer
+        [*] --> integrator_importer
+        integrator_importer  --> integrator_developer
+        integrator_owner     --> integrator_developer
+        integrator_builder   --> integrator_publisher
+        integrator_developer --> integrator_checker
+        integrator_checker   --> integrator_developer
+        auditor_internal     --> integrator_developer
+        integrator_developer --> integrator_builder
+        integrator_developer --> auditor_internal
+    }
+
+    repository_distributor --> environment_integrator
+    language_distributor   --> environment_integrator
+    package_distributor    --> environment_integrator
+
+    state "Production Environment" as environment_prod {
+        [*] --> deployer
+        deployer --> redactor
+    }
+
+    integrator_publisher --> [*]
+    integrator_developer --> environment_prod
+    integrator_builder   --> environment_prod
+    integrator_publisher --> environment_prod
+
+    deployer --> auditor_external
+    deployer --> consumer
+    redactor --> consumer
+
+
+
+</pre>
+
+      <pre id="diagram" class="mermaid2">
 ---
 config:
-  layout: elk
+  look: neo
 ---
-      flowchart LR
-      a
-      subgraph s0["APA"]
-      subgraph s8["APA"]
-      subgraph s1["APA"]
-        D{"X"}
-        E[Q]
-      end
-      subgraph s3["BAPA"]
-        F[Q]
-        I
-      end
-            D --> I
-            D --> I
-            D --> I
-
-      I{"X"}
-      end
-      end
-    </pre>
-    <pre id="diagram4" class="mermaid2">
---
-config:
-  layout: elk
---
-      flowchart LR
-      a
-        D{"Use the editor"}
-
-      D -- Mermaid js --> I{"fa:fa-code Text"}
-      D-->I
-      D-->I
-    </pre>
-    <pre id="diagram4" class="mermaid2">
---
-config:
-  layout: elk
---
-flowchart LR
- subgraph s1["Untitled subgraph"]
-        n1["Evaluate"]
-        n2["Option 1"]
-        n3["Option 2"]
-        n4["fa:fa-car Option 3"]
-  end
- subgraph s2["Untitled subgraph"]
-        n5["Evaluate"]
-        n6["Option 1"]
-        n7["Option 2"]
-        n8["fa:fa-car Option 3"]
-  end
-    A["Start"] -- Some text --> B("Continue")
-    B --> C{"Evaluate"}
-    C -- One --> D["Option 1"]
-    C -- Two --> E["Option 2"]
-    C -- Three --> F["fa:fa-car Option 3"]
-    n1 -- One --> n2
-    n1 -- Two --> n3
-    n1 -- Three --> n4
-    n5 -- One --> n6
-    n5 -- Two --> n7
-    n5 -- Three --> n8
-    n1@{ shape: diam}
-    n2@{ shape: rect}
-    n3@{ shape: rect}
-    n4@{ shape: rect}
-    n5@{ shape: diam}
-    n6@{ shape: rect}
-    n7@{ shape: rect}
-    n8@{ shape: rect}
-
-    </pre>
-    <pre id="diagram4" class="mermaid2">
---
-config:
-  layout: elk
---
-flowchart LR
- subgraph s1["Untitled subgraph"]
-        n1["Evaluate"]
-        n2["Option 1"]
-  end
-    n1 -- One --> n2
-
-
-
-
-    </pre>
-    <pre id="diagram4" class="mermaid2">
---
-config:
-  layout: elk
---
-flowchart LR
-    A{A} --> B & C
-</pre
-    >
-    <pre id="diagram4" class="mermaid2">
---
-config:
-  layout: elk
---
-flowchart LR
-    A{A} --> B & C
-    subgraph "subbe"
-      A
+flowchart RL
+    subgraph "   "
+        A5@{ shape: manual-file, label: "a label"}
+        B5@{ shape: manual-input, label: "a label" }
+        C5@{ shape: mul-doc, label: "a label" }
+        D5@{ shape: mul-proc, label: "a label" }
+        E5@{ shape: paper-tape, label: "a label" }
+        B3@{ shape: das, label: "a label" }
+        C3@{ shape: disk, label: "a label" }
+        D4@{ shape: lin-doc, label: "a label" }
+        E4@{ shape: loop-limit, label: "a label" }
    end
+    subgraph "   "
+        B6@{ shape: summary, label: "a label" }
+        C6@{ shape: tag-we-rect, label: "a label" }
+        D6@{ shape: tag-rect, label: "a label" }
+        A2@{ shape: fork}
+        B2@{ shape: hourglass }
+        C2@{ shape: comment, label: "I am a comment" }
+        D2@{ shape: bolt }
+        D3@{ shape: disp, label: "a label" }
+        C4@{ shape: junction, label: "a label" }
+        A4@{ shape: extract, label: "a label"}
+        B52[a fr]@{ shape: fr }
+    end
+    subgraph " "
+        A1@{ shape: text, label: This is a textblock}
+        B1@{ shape: card, label: "a label" }
+        C1@{ shape: lined-proc, label: "a label" }
+        D1@{ shape: start, label: "a label" }
+        E1@{ shape: stop, label: "a label" }
+        E2@{ shape: doc, label: "a label" }
+        A6@{ shape: stored-data, label: "a label"}
+        A3@{ shape: delay, label: "a label" }
+        E3@{ shape: div-proc, label: "a label" }
+        B4[a label]@{ shape: win-pane }
+    end
+      </pre>
+      <pre id="diagram" class="mermaid2">
+---
+  title: hello2
+  config:
+    look: handDrawn
+    elk:
+      <!-- nodePlacementStrategy: SIMPLE -->
+---
+%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
+flowchart TD
+
+    A([Start]) -->|go to booking page| B("select
+    ISBS booking no")
+    A --> QQ{cancel booking}
+    A --> RR{no show}
+    A --> SS{change booking}
+    B -->C(wmpay_request_payment.request_type= 'partial',
+ wmpay_request_payment.status= 'paid',
+ pos_booking.booking_status= ‘partial’ and 'full_deposit')
+ style C text-align:left
+    C -->D{manage booking}
+
+    D -->|cancel|E[ระบบแสดงช่องให้กรอกเหตุผล]
+    E -->F{กดปุ่ม 'cancel' หรือไม่}
+    F -->|Yes|G[ระบบบันทึกค่าใหม่
+    และไม่สามารถแก้ไขข้อมูลได้]
+    F -->|No|H[กดปุ่ม 'close']
+    H -->|ระบบไม่เปลี่ยนแปลงข้อมูล|Z
+    G -->|ระบบส่งข้อมูล|I[(POS_database)]
+    I -->|pos_booking.booking_status='cancel'|Z([End])
+
+
+    D -->|no show|J[ระบบแสดงช่องให้กรอกเหตุผล]
+    J -->K{กดปุ่ม 'noshow' หรือไม่}
+    K -->|Yes|L[ระบบสร้างใบเสร็จอัตโนมัติ
+    Product_id: 439,
+    ItemName: no show]
+     style L text-align:left
+
+     K -->|No|O[กดปุ่ม 'close']
+     O -->|ระบบไม่เปลี่ยนแปลงข้อมูล|Z
+    L -->M[ระบบบันทึกค่าใหม่]
+    M -->|ระบบส่งข้อมูล|N[(POS_database)]
+    N -->|pos_booking.booking_status=‘noshow’|Z
+
+
+
+</pre>
+      <pre id="diagram" class="mermaid2">
+---
+  title: hello2
+  config:
+    look: handDrawn
+    layout: dagre
+    elk:
+        nodePlacementStrategy: BRANDES_KOEPF
+---
+flowchart
+  A --> A
+  subgraph A
+    B --> B
+    subgraph B
+      C
+    end
+  end
+
+
 </pre
-    >
-    <pre id="diagram4" class="mermaid2">
+      >
+      <pre id="diagram" class="mermaid2">
 ---
 config:
-  layout: elk
+  look: handdrawn
+  flowchart:
+    htmlLabels: true
 ---
-flowchart LR
-    n2@{ shape: rect}
-    n3@{ shape: rect}
-    n4@{ shape: rect}
-    A["Start"] -- Some text --> B("Continue")
-    B --> C{"Evaluate"}
-    C -- One --> D["Option 1"]
-    C -- Two --> E["Option 2"]
-    C -- Three --> F["fa:fa-car Option 3"]
-    %% C@{ shape: hexagon}
-
-
-    </pre>
-    <pre id="diagram4" class="mermaid2">
+flowchart
+      A[I am a long text, where do I go??? handdrawn - true]
+</pre
+      >
+    </div>
+    <div class="flex">
+      <pre id="diagram" class="mermaid2">
 ---
 config:
-  kanban:
-    ticketBaseUrl: 'https://github.com/your-repo/issues/#TICKET#'
+  flowchart:
+    htmlLabels: false
 ---
-kanban
-  Backlog
-    task1[📝 Define project requirements]@{ ticket: a101 }
-  To Do
-    task2[🔍 Research technologies]@{ ticket: a102 }
-  Review
-    task4[🔍 Code review for login feature]@{ ticket: a104 }
-  Done
-    task5[✅ Deploy initial version]@{ ticket: a105 }
-  In Progress
-    task3[💻 Develop login feature]@{ ticket: 103 }
-
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-flowchart LR
-nA[Default] --> A@{ icon: 'fa:bell', form: 'rounded' }
-
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-flowchart LR
-nA[Style] --> A@{ icon: 'fa:bell', form: 'rounded' }
-style A fill:#f9f,stroke:#333,stroke-width:4px
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-flowchart LR
-nA[Class] --> A@{ icon: 'fa:bell', form: 'rounded' }
-A:::AClass
-classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-flowchart LR
-  nA[Class] --> A@{ icon: 'logos:aws', form: 'rounded' }
-
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-flowchart LR
-nA[Default] --> A@{ icon: 'fa:bell', form: 'square' }
-
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-flowchart LR
-nA[Style] --> A@{ icon: 'fa:bell', form: 'square' }
-style A fill:#f9f,stroke:#333,stroke-width:4px
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-flowchart LR
-nA[Class] --> A@{ icon: 'fa:bell', form: 'square' }
-A:::AClass
-classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-flowchart LR
-  nA[Class] --> A@{ icon: 'logos:aws', form: 'square' }
-
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-flowchart LR
-nA[Default] --> A@{ icon: 'fa:bell', form: 'circle' }
-
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-flowchart LR
-nA[Style] --> A@{ icon: 'fa:bell', form: 'circle' }
-style A fill:#f9f,stroke:#333,stroke-width:4px
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-flowchart LR
-nA[Class] --> A@{ icon: 'fa:bell', form: 'circle' }
-A:::AClass
-classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-flowchart LR
-  nA[Class] --> A@{ icon: 'logos:aws', form: 'circle' }
-  A:::AClass
-  classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-flowchart LR
-  nA[Style] --> A@{ icon: 'logos:aws', form: 'circle' }
-  style A fill:#f9f,stroke:#333,stroke-width:4px
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-kanban
-  id2[In progress]
-    docs[Create Blog about the new diagram]@{ priority: 'Very Low', ticket: MC-2037, assigned: 'knsv' }
-    </pre>
-    <pre id="diagram4" class="mermaid2">
+flowchart
+      A[I am a long text, where do I go??? classic - false]
+</pre
+      >
+      <pre id="diagram" class="mermaid2">
 ---
 config:
-  kanban:
-    ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
-    # sectionWidth: 300
+  flowchart:
+    htmlLabels: true
 ---
-kanban
-  Todo
-    [Create Documentation]
-    docs[Create Blog about the new diagram]
-  id7[In progress]
-    id6[Create renderer so that it works in all cases. We also add som extra text here for testing purposes. And some more just for the extra flare.]
-  id9[Ready for deploy]
-    id8[Design grammar]@{ assigned: 'knsv' }
-  id10[Ready for test]
-    id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
-    id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
-  id11[Done]
-    id5[define getData]
-    id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
-    id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }
+flowchart
+      A[I am a long text, where do I go??? classic - true]
+</pre
+      >
+    </div>
+    <pre id="diagram2" class="mermaid2">
+flowchart LR
+    id1(Start)-->id2(Stop)
+    style id1 fill:#f9f,stroke:#333,stroke-width:4px
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

-  id12[Can't reproduce]
-    id3[Weird flickering in Firefox]
+
+    </pre>
+
+    <pre id="diagram3" class="mermaid2">
+      flowchart LR
+    A:::foo & B:::bar --> C:::foobar
+    classDef foo stroke:#f00
+    classDef bar stroke:#0f0
+    classDef ash color:red
+    class C ash
+    style C stroke:#00f, fill:black
+
+    </pre>
+
+    <pre id="diagram4" class="mermaid2">
+      stateDiagram
+    A:::foo
+    B:::bar --> C:::foobar
+    classDef foo stroke:#f00
+    classDef bar stroke:#0f0
+    style C stroke:#00f, fill:black, color:white
+
+    </pre>
+
+    <pre id="diagram4" class="mermaid">
+flowchart TB
+  A@{
+    label: "aksljhf kasjdh"
+  }
    </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);
@@ -434,13 +437,8 @@ kanban
      window.callback = function () {
        alert('A callback was triggered');
      };
-      function callback() {
-        alert('It worked');
-      }
-      await mermaid.initialize({
+      mermaid.initialize({
        // theme: 'base',
-        // theme: 'default',
-        // theme: 'forest',
        // handDrawnSeed: 12,
        // look: 'handDrawn',
        // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
@@ -449,25 +447,21 @@ kanban
        // layout: 'fixed',
        // 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,
+        logLevel: 3,
        securityLevel: 'loose',
-        callback,
      });
-
+      function callback() {
+        alert('It worked');
+      }
      mermaid.parseError = function (err, hash) {
        console.error('In parse error:');
        console.error(err);
--- a/cypress/platform/saurabh.html
+++ b/cypress/platform/saurabh.html
@@ -62,23 +62,56 @@

  <body style="display: flex; gap: 2rem; flex-direction: row">
    <pre id="diagram4" class="mermaid">
-      flowchart
-          A --> A
-          subgraph B
-            B1 --> B1
-          end
-          subgraph C
-            subgraph C1
-              C2 --> C2
-              subgraph D
-                D1 --> D1
-              end
-              D --> D
-            end
-            C1 --> C1
-          end
+      flowchart LR
+      A@{ icon: "fa:window-minimize", form: circle }
+      E@{ icon: "fa:window-minimize", form: circle }
+      B@{ icon: "fa:bell", form: circle }
+      B2@{ icon: "fa:bell", form: circle }
+      C@{ icon: "fa:address-book",  form: square  }
+      D@{ icon: "fa:star-half",  form: square  }
+      A --> E
+      B --> B2
+

    </pre>
+    <pre id="diagram4" class="mermaid2">
+      flowchart TB
+       A --test2--> B2@{ icon: "fa:bell", form: "rounded", label: "B2 aiduaid uyawduad uaduabd uyduadb", pos: "b" }
+       B2 --test--> C
+       D --> B2 --> E
+       style B2 fill:#f9f,stroke:#333,stroke-width:4px
+  </pre
+    >
+    <pre id="diagram43" class="mermaid2">
+      flowchart BT
+       A --test2--> B2@{ icon: "fa:bell", form: "square", label: "B2", pos: "t", h: 40, w: 30 }
+       B2 --test--> C
+       D --> B2 --> E
+  </pre
+    >
+    <pre id="diagram4" class="mermaid2">
+      flowchart BT
+       A --test2--> B2@{ icon: "fa:bell", label: "B2 awiugdawu uydgayuiwd wuydguy", pos: "b", h: 40, w: 30 }
+       B2 --test--> C
+  </pre
+    >
+    <pre id="diagram43" class="mermaid2">
+      flowchart BT
+       A --test2--> B2@{ icon: "fa:bell", label: "B2 dawuygd ayuwgd uy", pos: "t", h: 40, w: 30 }
+       B2 --test--> C
+  </pre
+    >
+    <pre id="diagram6" class="mermaid2">
+      flowchart TB
+       A --> B2@{ icon: "fa:bell", form: "circle", label: "test augfuyfavf ydvaubfuac", pos: "t", w: 200, h: 100 } --> C
+  </pre
+    >
+    <pre id="diagram6" class="mermaid2">
+      flowchart TB
+       A --> B2@{ icon: "fa:bell", form: "circle", label: "test augfuyfavf ydvaubfuac", pos: "b", w: 200, h: 100 } --> C
+       D --> B2 --> E
+  </pre
+    >
    <script type="module">
      import mermaid from './mermaid.esm.mjs';
      import layouts from './mermaid-layout-elk.esm.mjs';
--- a/cypress/platform/viewer.js
+++ b/cypress/platform/viewer.js
--- a/cypress/platform/yari.html
+++ b/cypress/platform/yari.html
@@ -1,663 +0,0 @@
-<html>
-  <body>
-    <h1 class="header">Class Nodes</h1>
-    <div class="node-showcase">
-      <div class="test">
-        <h2>Basic Class</h2>
-        <pre class="mermaid">
-          ---
-            config:
-              htmlLabels: false
-          ---
-          classDiagram
-          class _Duck_ {
-            +String beakColor
-            _+_swim_()a_
-            __+quack() test__
-          }
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Basic Class</h2>
-        <pre class="mermaid">
-          ---
-          config:
-            htmlLabels: false
-          ---
-          classDiagram
-          class Class10:::exClass2 {
-            int[] id
-            List~int~ ids
-            test(List~int~ ids) List~bool~
-            testArray() bool[]
-          }
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Basic Class</h2>
-        <pre class="mermaid">
-          flowchart TD
-            Start --> Stop
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Complex Class</h2>
-        <pre class="mermaid">
-                classDiagram
-                class Square~Shape~{
-                  int id
-                  List~int~ position
-                  setPoints(List~int~ points)
-                  getPoints() List~int~
-                }
-          
-          Square : -List~string~ messages
-          Square : +setMessages(List~string~ messages)
-          Square : +getMessages() List~string~
-          Square : +getDistanceMatrix() List~List~int~~
-              </pre
-        >
-      </div>
-      <div class="test">
-        <h2>No Attributes</h2>
-        <pre class="mermaid">
-          classDiagram
-          class Duck {
-            +swim()
-            +quack()
-          }
-        </pre>
-      </div>
-      <div class="test">
-        <h2>No Methods</h2>
-        <pre class="mermaid">
-          classDiagram
-          class Duck {
-            +String beakColor
-          }
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Only Class Name</h2>
-        <p>Empty line as attribute</p>
-        <pre class="mermaid">
-          ---
-            config:
-              class:
-                hideEmptyMembersBox: false
-          ---
-          classDiagram
-          class Duck {
-            
-          }
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Visibility and Types</h2>
-        <p>(Further tilde testing)</p>
-        <div class="mermaid">
-          classDiagram class Duck { ~interface~~~ +String beakColor #swim() ~quack()~~~
-          -test()~~~~~~~ +deposit(amount) bool }
-        </div>
-      </div>
-      <div class="test">
-        <h2>Additional Classifiers</h2>
-        <p>(* Abstract | $ Static)</p>
-        <div class="mermaid">
-          classDiagram class Square~Shape~ { int id* List~int~ position* setPoints(List~int~points)*
-          getPoints()* List~int~ } Square : -List~string~ messages$ Square :
-          +setMessages(List~string~ messages)* Square : +getMessages()$ List~string~ Square :
-          +getDistanceMatrix() List~List~int~~$
-        </div>
-      </div>
-      <div class="test">
-        <h2>Label</h2>
-        <pre class="mermaid">
-          classDiagram
-          class Animal~test~["Animal with a label"]
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Spacing</h2>
-        <p>(Fix ensures consistent spacing rules)</p>
-        <p>(No space or single space?)</p>
-        <pre class="mermaid">
-          classDiagram
-          class ClassName {
-          -attribute:type
-          -            attribute : type
-               test
-          
-          + GetAttribute() type                 
-          +     GetAttribute() type
-          }
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Annotation</h2>
-        <pre class="mermaid">
-          classDiagram
-          class Shape
-          &lt;&lt;interface&gt;&gt; Shape
-          Shape : noOfVertices
-          Shape : draw()
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Long Class Name Text</h2>
-        <pre class="mermaid">
-          classDiagram
-          class ThisIsATestForALongClassName {
-            &lt;&lt;interface&gt;&gt;
-            noOfLetters
-            delete()
-          }
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Long Annotation Text</h2>
-        <pre class="mermaid">
-          classDiagram
-          class Shape
-          &lt;&lt;superlongannotationtext&gt;&gt; Shape
-          Shape : noOfVertices
-          Shape : draw()
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Long Member Text</h2>
-        <pre class="mermaid">
-          classDiagram
-          class Shape
-          &lt;&lt;interface&gt;&gt; Shape
-          Shape : noOfVertices
-          Shape : longtexttestkeepgoingandgoing
-          Shape : draw()
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Link</h2>
-        <pre class="mermaid">
-          classDiagram
-          class Shape
-          link Shape "https://www.github.com" "This is a tooltip for a link"
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Click</h2>
-        <pre class="mermaid">
-          classDiagram
-          class Shape
-          click Shape href "https://www.github.com" "This is a tooltip for a link"
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Hand Drawn</h2>
-        <pre class="mermaid">
-          ---
-          config:
-            look: handDrawn
-            htmlLabels: true
-          ---
-          classDiagram
-          class Hand {
-            +String beakColor
-            +swim()
-            +quack()
-          }
-          style Hand fill:#f9f,stroke:#29f,stroke-width:2px
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Neutral Theme</h2>
-        <pre class="mermaid">
-          ---
-          config:
-            theme: neutral
-          ---
-          classDiagram
-          class Duck {
-            +String beakColor
-            +swim()
-            +quack()
-          }
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Dark Theme</h2>
-        <pre class="mermaid">
-          ---
-          config:
-            theme: dark
-          ---
-          classDiagram
-          class Duck {
-            +String beakColor
-            +swim()
-            +quack()
-          }
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Forest Theme</h2>
-        <pre class="mermaid">
-          ---
-          config:
-            theme: forest
-          ---
-          classDiagram
-          class Duck {
-            +String beakColor
-            +swim()
-            +quack()
-          }
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Base Theme</h2>
-        <pre class="mermaid">
-          ---
-          config:
-            theme: base
-          ---
-          classDiagram
-          class Duck {
-            +String beakColor
-            +swim()
-            +quack()
-          }
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Custom Theme</h2>
-        <pre class="mermaid">
-          %%{
-            init: {
-              'theme': 'base',
-              'themeVariables': {
-                'primaryColor': '#BB2528',
-                'primaryTextColor': '#fff',
-                'primaryBorderColor': '#7C0000',
-                'lineColor': '#F83d29',
-                'secondaryColor': '#006100',
-                'tertiaryColor': '#fff'
-              }
-            }
-          }%%
-          classDiagram
-          class Duck {
-            +String beakColor
-            +swim()
-            +quack()
-          }
-          Duck--Dog
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Styling within Diagram</h2>
-        <pre class="mermaid">
-          classDiagram
-          class Duck {
-            +String beakColor
-            +swim()
-            +quack()
-          }
-          style Duck fill:#f9f,stroke:#333,stroke-width:8px
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Styling with classDef Statement</h2>
-        <pre class="mermaid">
-          classDiagram
-          class Duck:::bold {
-            +String beakColor
-            +swim()
-            +quack()
-          }
-
-          class Dog {
-            +int numTeeth
-            +bark()
-          }
-
-          cssClass "Duck,Dog" pink
-
-          classDef pink fill:#f9f
-          classDef default color:#f1e
-          classDef bold stroke:#333,stroke-width:6px,color:#fff
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Styling with Class in Stylesheet</h2>
-        <pre class="mermaid">
-          classDiagram
-          class Duck {
-            +String beakColor
-            +swim()
-            +quack()
-          }
-          class Duck:::styleClass
-        </pre>
-      </div>
-    </div>
-    <h1 class="header">Diagram Testing</h1>
-    <div class="diagram-showcase">
-      <div class="test">
-        <h2>Class Nodes Only</h2>
-        <pre class="mermaid">
-          ---
-          title: Animal example
-          ---
-          classDiagram
-              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>
-      </div>
-      <div class="test">
-        <h2>Class Nodes LR</h2>
-        <pre class="mermaid">
-          ---
-          title: Animal example
-          ---
-          classDiagram
-              direction LR
-              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>
-      </div>
-      <div class="test">
-        <h2>Relations</h2>
-        <pre class="mermaid">
-          classDiagram
-            classA <|-- classB
-            classC *-- classD
-            classE o-- classF
-            classG <-- classH
-            classI -- classJ
-            classK <.. classL
-            classM <|.. classN
-            classO .. classP
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Two Way Relation</h2>
-        <pre class="mermaid">
-          classDiagram
-          class Animal {
-            int size
-            walk()
-          }
-          class Zebra {
-            int size
-            walk()
-          }
-            Animal o--|> Zebra
-
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Relations with Labels</h2>
-        <pre class="mermaid">
-          classDiagram
-            classA <|-- classB : implements
-            classC *-- classD : composition
-            classE o-- classF : aggregation
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Cardinality / Multiplicity</h2>
-        <pre class="mermaid">
-          classDiagram
-            Customer "1" --> "*" Ticket
-            Student "1" --> "1..*" Course
-            Galaxy --> "many" Star : Contains
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Complex Relations with Theme</h2>
-        <pre class="mermaid">
-          ---
-          config:
-            theme: forest
-            look: handDrawns
-            layout: elk
-          ---
-          classDiagram
-            direction RL
-            class Student {
-              -idCard : IdCard
-            }
-            class IdCard{
-              -id : int
-              -name : string
-            }
-            class Bike{
-              -id : int
-              -name : string
-            }
-            Student "1" o--o "1" IdCard : carries
-            Student "1" o--o "1" Bike : rides
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Notes</h2>
-        <pre class="mermaid">
-          classDiagram
-            note "This is a general note"
-            note for MyClass "This is a note for a class"
-            class MyClass
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Namespaces</h2>
-        <pre class="mermaid">
-          classDiagram
-            namespace BaseShapes {
-                class Triangle
-                class Rectangle {
-                  double width
-                  double height
-                }
-            }
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Namespaces</h2>
-        <pre class="mermaid">
-          ---
-            config:
-              layout: elk
-          ---
-          classDiagram
-          namespace Namespace1 {
-            class C1
-            class C2
-          }
-          C1 --> C2
-          class C3
-          class C4
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Full Example</h2>
-        <pre class="mermaid">
-          ---
-          title: Animal example
-          config:
-            layout: dagre
-          ---
-          classDiagram
-              note "From Duck till Zebra"
-              Animal <|--|> Duck
-              note for Duck "can fly<br>can swim<br>can dive<br>can help in debugging"
-              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()
-              }
-              cssClass "Duck" test
-              classDef test fill:#f71
-              %%classDef default fill:#f93
-        </pre>
-      </div>
-      <div class="test">
-        <h2>Full Example</h2>
-        <pre class="mermaid">
-          ---
-            config:
-              theme: forest
-              look: handDrawn
-          ---
-          classDiagram
-          note for Outside "Note testing"
-          namespace Test {
-              class Outside
-          }
-          namespace BaseShapes {
-              class Triangle
-              class Rectangle {
-                double width
-                double height
-              }
-          }
-          Outside <|--|> Rectangle
-          style Triangle fill:#f9f,stroke:#333,stroke-width:4px
-        </pre>
-      </div>
-      <div class="test">
-        <pre class="mermaid">
-          ---
-            config:
-              look: handDrawn
-              layout: elk
-          ---
-          classDiagram
-            Class01 "1" <|--|> "*" AveryLongClass : Cool
-            &lt;&lt;interface&gt;&gt; Class01
-            Class03 "1" *-- "*" Class04
-            Class05 "1" o-- "many" Class06
-            Class07 "1" .. "*" Class08
-            Class09 "1" --> "*" C2 : Where am i?
-            Class09 "*" --* "*" C3
-            Class09 "1" --|> "1" Class07
-            NewClass ()--() Class04
-            Class09 <|--|> AveryLongClass
-            Class07  : equals()
-            Class07  : Object[] elementData
-            Class01  : size()
-            Class01  : int chimp
-            Class01  : int gorilla
-            Class08 "1" <--> "*" C2: Cool label
-            class Class10 {
-              &lt;&lt;service&gt;&gt;
-              int id
-              test()
-            }
-            Class10 o--o AveryLongClass
-            Class10 <--> Class07
-        </pre>
-      </div>
-      <div class="test">
-        <pre class="mermaid">
-          classDiagram
-            test ()--() test2
-        </pre>
-      </div>
-    </div>
-
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      import layouts from './mermaid-layout-elk.esm.mjs';
-      mermaid.registerLayoutLoaders(layouts);
-      mermaid.parseError = function (err, hash) {
-        console.error('Mermaid error: ', err);
-      };
-      mermaid.initialize();
-      mermaid.parseError = function (err, hash) {
-        console.error('In parse error:');
-        console.error(err);
-      };
-    </script>
-  </body>
-  <style>
-    .header {
-      text-decoration: underline;
-      text-align: center;
-    }
-    .node-showcase {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-    }
-    .test {
-      flex-grow: 1;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 0.4rem;
-    }
-    .test > h2 {
-      margin: 0;
-      text-align: center;
-    }
-    .test > p {
-      margin-top: -6px;
-      color: gray;
-    }
-
-    .diagram-showcase {
-      display: grid;
-      grid-template-columns: 1fr;
-    }
-
-    .styleClass > * > path {
-      fill: #ff0000 !important;
-      stroke: #ffff00 !important;
-      stroke-width: 4px !important;
-      stroke-dasharray: 2 !important;
-    }
-  </style>
-</html>
--- a/cypress/timings.json
+++ b/cypress/timings.json
@@ -1,152 +0,0 @@
-{
-  "durations": [
-    {
-      "spec": "cypress/integration/other/configuration.spec.js",
-      "duration": 4989
-    },
-    {
-      "spec": "cypress/integration/other/external-diagrams.spec.js",
-      "duration": 1382
-    },
-    {
-      "spec": "cypress/integration/other/ghsa.spec.js",
-      "duration": 3178
-    },
-    {
-      "spec": "cypress/integration/other/iife.spec.js",
-      "duration": 1372
-    },
-    {
-      "spec": "cypress/integration/other/interaction.spec.js",
-      "duration": 8998
-    },
-    {
-      "spec": "cypress/integration/other/rerender.spec.js",
-      "duration": 1249
-    },
-    {
-      "spec": "cypress/integration/other/xss.spec.js",
-      "duration": 25664
-    },
-    {
-      "spec": "cypress/integration/rendering/appli.spec.js",
-      "duration": 1928
-    },
-    {
-      "spec": "cypress/integration/rendering/architecture.spec.ts",
-      "duration": 2330
-    },
-    {
-      "spec": "cypress/integration/rendering/block.spec.js",
-      "duration": 11156
-    },
-    {
-      "spec": "cypress/integration/rendering/c4.spec.js",
-      "duration": 3418
-    },
-    {
-      "spec": "cypress/integration/rendering/classDiagram-v2.spec.js",
-      "duration": 14866
-    },
-    {
-      "spec": "cypress/integration/rendering/classDiagram.spec.js",
-      "duration": 9894
-    },
-    {
-      "spec": "cypress/integration/rendering/conf-and-directives.spec.js",
-      "duration": 5778
-    },
-    {
-      "spec": "cypress/integration/rendering/current.spec.js",
-      "duration": 1690
-    },
-    {
-      "spec": "cypress/integration/rendering/erDiagram.spec.js",
-      "duration": 9144
-    },
-    {
-      "spec": "cypress/integration/rendering/errorDiagram.spec.js",
-      "duration": 1951
-    },
-    {
-      "spec": "cypress/integration/rendering/flowchart-elk.spec.js",
-      "duration": 2196
-    },
-    {
-      "spec": "cypress/integration/rendering/flowchart-handDrawn.spec.js",
-      "duration": 21029
-    },
-    {
-      "spec": "cypress/integration/rendering/flowchart-shape-alias.spec.ts",
-      "duration": 16087
-    },
-    {
-      "spec": "cypress/integration/rendering/flowchart-v2.spec.js",
-      "duration": 27465
-    },
-    {
-      "spec": "cypress/integration/rendering/flowchart.spec.js",
-      "duration": 20035
-    },
-    {
-      "spec": "cypress/integration/rendering/gantt.spec.js",
-      "duration": 11366
-    },
-    {
-      "spec": "cypress/integration/rendering/gitGraph.spec.js",
-      "duration": 34025
-    },
-    {
-      "spec": "cypress/integration/rendering/iconShape.spec.ts",
-      "duration": 185902
-    },
-    {
-      "spec": "cypress/integration/rendering/imageShape.spec.ts",
-      "duration": 41631
-    },
-    {
-      "spec": "cypress/integration/rendering/info.spec.ts",
-      "duration": 1736
-    },
-    {
-      "spec": "cypress/integration/rendering/journey.spec.js",
-      "duration": 2247
-    },
-    {
-      "spec": "cypress/integration/rendering/katex.spec.js",
-      "duration": 2144
-    },
-    {
-      "spec": "cypress/integration/rendering/marker_unique_id.spec.js",
-      "duration": 1646
-    },
-    {
-      "spec": "cypress/integration/rendering/mindmap.spec.ts",
-      "duration": 6406
-    },
-    {
-      "spec": "cypress/integration/rendering/newShapes.spec.ts",
-      "duration": 107219
-    },
-    {
-      "spec": "cypress/integration/rendering/stateDiagram.spec.js",
-      "duration": 15834
-    },
-    {
-      "spec": "cypress/integration/rendering/theme.spec.js",
-      "duration": 33240
-    },
-    {
-      "spec": "cypress/integration/rendering/timeline.spec.ts",
-      "duration": 7122
-    },
-    {
-      "spec": "cypress/integration/rendering/xyChart.spec.js",
-      "duration": 11127
-    },
-    {
-      "spec": "cypress/integration/rendering/zenuml.spec.js",
-      "duration": 2391
-    }
-  ]
-}
--- a/demos/dev/example.html
+++ b/demos/dev/example.html
@@ -39,8 +39,8 @@ graph TB

    <script type="module">
      import mermaid from '/mermaid.esm.mjs';
-      import layouts from '/mermaid-layout-elk.esm.mjs';
-      mermaid.registerLayoutLoaders(layouts);
+      import flowchartELK from '/mermaid-flowchart-elk.esm.mjs';
+      await mermaid.registerExternalDiagrams([flowchartELK]);
      async function render(str) {
        const { svg } = await mermaid.render('dynamic', str);
        document.getElementById('dynamicDiagram').innerHTML = svg;
--- a/docs/config/faq.md
+++ b/docs/config/faq.md
@@ -6,12 +6,12 @@

 # Frequently Asked Questions

-1. [How to add title to flowchart?](https://github.com/mermaid-js/mermaid/issues/556#issuecomment-363182217)
+1. [How to add title to flowchart?](https://github.com/knsv/mermaid/issues/556#issuecomment-363182217)
 2. [How to specify custom CSS file?](https://github.com/mermaidjs/mermaid.cli/pull/24#issuecomment-373402785)
-3. [How to fix tooltip misplacement issue?](https://github.com/mermaid-js/mermaid/issues/542#issuecomment-3343564621)
-4. [How to specify gantt diagram xAxis format?](https://github.com/mermaid-js/mermaid/issues/269#issuecomment-373229136)
-5. [How to bind an event?](https://github.com/mermaid-js/mermaid/issues/372)
-6. [How to add newline in the text?](https://github.com/mermaid-js/mermaid/issues/384#issuecomment-281339381)
-7. [How to have special characters in link text?](https://github.com/mermaid-js/mermaid/issues/407#issuecomment-329944735)
-8. [How to change Flowchart curve style?](https://github.com/mermaid-js/mermaid/issues/580#issuecomment-373929046)
+3. [How to fix tooltip misplacement issue?](https://github.com/knsv/mermaid/issues/542#issuecomment-3343564621)
+4. [How to specify gantt diagram xAxis format?](https://github.com/knsv/mermaid/issues/269#issuecomment-373229136)
+5. [How to bind an event?](https://github.com/knsv/mermaid/issues/372)
+6. [How to add newline in the text?](https://github.com/knsv/mermaid/issues/384#issuecomment-281339381)
+7. [How to have special characters in link text?](https://github.com/knsv/mermaid/issues/407#issuecomment-329944735)
+8. [How to change Flowchart curve style?](https://github.com/knsv/mermaid/issues/580#issuecomment-373929046)
 9. [How to create a Flowchart end-Node that says "End"](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897)
--- a/docs/config/icons.md
+++ b/docs/config/icons.md
@@ -1,55 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/icons.md](../../packages/mermaid/src/docs/config/icons.md).
-
-# Registering icon pack in mermaid
-
-The icon packs available can be found at [icones.js.org](https://icones.js.org/).
-We use the name defined when registering the icon pack, to override the prefix field of the iconify pack. This allows the user to use shorter names for the icons. It also allows us to load a particular pack only when it is used in a diagram.
-
-Using JSON file directly from CDN:
-
-```js
-import mermaid from 'CDN/mermaid.esm.mjs';
-mermaid.registerIconPacks([
-  {
-    name: 'logos',
-    loader: () =>
-      fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()),
-  },
-]);
-```
-
-Using packages and a bundler:
-
-```bash
-npm install @iconify-json/logos@1
-```
-
-With lazy loading
-
-```js
-import mermaid from 'mermaid';
-
-mermaid.registerIconPacks([
-  {
-    name: 'logos',
-    loader: () => import('@iconify-json/logos').then((module) => module.icons),
-  },
-]);
-```
-
-Without lazy loading
-
-```js
-import mermaid from 'mermaid';
-import { icons } from '@iconify-json/logos';
-mermaid.registerIconPacks([
-  {
-    name: icons.prefix, // To use the prefix defined in the icon pack
-    icons,
-  },
-]);
-```
--- a/docs/config/setup/classes/mermaid.UnknownDiagramError.md
+++ b/docs/config/setup/classes/mermaid.UnknownDiagramError.md
@@ -127,7 +127,7 @@ Error.prepareStackTrace

 #### Defined in

-node_modules/.pnpm/@types+node\@20.16.11/node_modules/@types/node/globals.d.ts:98
+node_modules/.pnpm/@types+node\@20.16.2/node_modules/@types/node/globals.d.ts:28

 ---

@@ -141,7 +141,7 @@ Error.stackTraceLimit

 #### Defined in

-node_modules/.pnpm/@types+node\@20.16.11/node_modules/@types/node/globals.d.ts:100
+node_modules/.pnpm/@types+node\@20.16.2/node_modules/@types/node/globals.d.ts:30

 ## Methods

@@ -168,4 +168,4 @@ Error.captureStackTrace

 #### Defined in

-node_modules/.pnpm/@types+node\@20.16.11/node_modules/@types/node/globals.d.ts:91
+node_modules/.pnpm/@types+node\@20.16.2/node_modules/@types/node/globals.d.ts:21
--- a/docs/config/setup/interfaces/mermaid.LayoutData.md
+++ b/docs/config/setup/interfaces/mermaid.LayoutData.md
@@ -20,7 +20,7 @@

 #### 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)
+[packages/mermaid/src/rendering-util/types.ts:125](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L125)

 ---

@@ -30,7 +30,7 @@

 #### 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)
+[packages/mermaid/src/rendering-util/types.ts:124](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L124)

 ---

@@ -40,4 +40,4 @@

 #### 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)
+[packages/mermaid/src/rendering-util/types.ts:123](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L123)
--- a/docs/config/setup/interfaces/mermaid.MermaidConfig.md
+++ b/docs/config/setup/interfaces/mermaid.MermaidConfig.md
@@ -49,7 +49,7 @@ This matters if you are using base tag settings.

 #### Defined in

-[packages/mermaid/src/config.type.ts:201](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L201)
+[packages/mermaid/src/config.type.ts:200](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L200)

 ---

@@ -59,7 +59,7 @@ This matters if you are using base tag settings.

 #### Defined in

-[packages/mermaid/src/config.type.ts:198](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L198)
+[packages/mermaid/src/config.type.ts:197](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L197)

 ---

@@ -121,7 +121,7 @@ should not change unless content is changed.

 #### Defined in

-[packages/mermaid/src/config.type.ts:202](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L202)
+[packages/mermaid/src/config.type.ts:201](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L201)

 ---

@@ -183,7 +183,7 @@ See <https://developer.mozilla.org/en-US/docs/Web/CSS/font-family>

 #### Defined in

-[packages/mermaid/src/config.type.ts:204](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L204)
+[packages/mermaid/src/config.type.ts:203](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L203)

 ---

@@ -217,7 +217,7 @@ If set to true, ignores legacyMathML.

 #### Defined in

-[packages/mermaid/src/config.type.ts:197](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L197)
+[packages/mermaid/src/config.type.ts:196](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L196)

 ---

@@ -253,16 +253,6 @@ Defines the seed to be used when using handDrawn look. This is important for the

 ---

-### kanban
-
-• `Optional` **kanban**: `KanbanDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:196](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L196)
-
---
-
 ### layout

 • `Optional` **layout**: `string`
@@ -320,7 +310,7 @@ Defines which main look to use for the diagram.

 #### Defined in

-[packages/mermaid/src/config.type.ts:205](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L205)
+[packages/mermaid/src/config.type.ts:204](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L204)

 ---

@@ -364,7 +354,7 @@ The maximum allowed size of the users text diagram

 #### Defined in

-[packages/mermaid/src/config.type.ts:200](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L200)
+[packages/mermaid/src/config.type.ts:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L199)

 ---

@@ -404,7 +394,7 @@ The maximum allowed size of the users text diagram

 #### Defined in

-[packages/mermaid/src/config.type.ts:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L199)
+[packages/mermaid/src/config.type.ts:198](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L198)

 ---

@@ -475,7 +465,7 @@ This is useful when you want to control how to handle syntax errors in your appl

 #### Defined in

-[packages/mermaid/src/config.type.ts:211](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L211)
+[packages/mermaid/src/config.type.ts:210](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L210)

 ---

@@ -528,7 +518,7 @@ You may also use `themeCSS` to override this value.

 #### Defined in

-[packages/mermaid/src/config.type.ts:203](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L203)
+[packages/mermaid/src/config.type.ts:202](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L202)

 ---

--- a/docs/config/setup/interfaces/mermaid.ParseOptions.md
+++ b/docs/config/setup/interfaces/mermaid.ParseOptions.md
@@ -19,4 +19,4 @@ The `parseError` function will not be called.

 #### Defined in

-[packages/mermaid/src/types.ts:64](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L64)
+[packages/mermaid/src/types.ts:56](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L56)
--- a/docs/config/setup/interfaces/mermaid.ParseResult.md
+++ b/docs/config/setup/interfaces/mermaid.ParseResult.md
@@ -18,7 +18,7 @@ The config passed as YAML frontmatter or directives

 #### Defined in

-[packages/mermaid/src/types.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L75)
+[packages/mermaid/src/types.ts:67](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L67)

 ---

@@ -30,4 +30,4 @@ The diagram type, e.g. 'flowchart', 'sequence', etc.

 #### Defined in

-[packages/mermaid/src/types.ts:71](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L71)
+[packages/mermaid/src/types.ts:63](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L63)
--- a/docs/config/setup/interfaces/mermaid.RenderResult.md
+++ b/docs/config/setup/interfaces/mermaid.RenderResult.md
@@ -39,7 +39,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.

 #### Defined in

-[packages/mermaid/src/types.ts:103](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L103)
+[packages/mermaid/src/types.ts:90](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L90)

 ---

@@ -51,7 +51,7 @@ The diagram type, e.g. 'flowchart', 'sequence', etc.

 #### Defined in

-[packages/mermaid/src/types.ts:93](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L93)
+[packages/mermaid/src/types.ts:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L80)

 ---

@@ -63,4 +63,4 @@ The svg code for the rendered graph.

 #### Defined in

-[packages/mermaid/src/types.ts:89](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L89)
+[packages/mermaid/src/types.ts:76](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L76)
--- a/docs/config/setup/modules/defaultConfig.md
+++ b/docs/config/setup/modules/defaultConfig.md
@@ -14,7 +14,7 @@

 #### Defined in

-[packages/mermaid/src/defaultConfig.ts:270](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L270)
+[packages/mermaid/src/defaultConfig.ts:267](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L267)

 ---

--- a/docs/ecosystem/img/python-mermaid-integration-updated.png
+++ b/docs/ecosystem/img/python-mermaid-integration-updated.png
--- a/docs/ecosystem/integrations-community.md
+++ b/docs/ecosystem/integrations-community.md
@@ -44,7 +44,6 @@ To add an integration to this list, see the [Integrations - create page](./integ
 - [Deepdwn](https://billiam.itch.io/deepdwn) ✅
 - [Doctave](https://www.doctave.com/) ✅
  - [Mermaid in Markdown code blocks](https://docs.doctave.com/components/mermaid) ✅
- [Forgejo](https://forgejo.org/) ✅
 - [GitBook](https://gitbook.com)
  - [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
  - [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
@@ -100,7 +99,8 @@ Blogging frameworks and platforms
 - [Nextra](https://nextra.site/)
  - [Mermaid](https://nextra.site/docs/guide/mermaid)
 - [WordPress](https://wordpress.org)
-  - [MerPRess](https://wordpress.org/plugins/merpress/)
+  - [WordPress Markdown Editor](https://wordpress.org/plugins/wp-githuber-md)
+  - [WP-ReliableMD](https://wordpress.org/plugins/wp-reliablemd/)

 ### CMS/ECM

@@ -185,6 +185,8 @@ Communication tools and platforms
  - [=Diagram block](https://github.com/zag/podlite/tree/main/packages/podlite-diagrams)
 - [Standard Notes](https://standardnotes.com/)
  - [Mermaid Extension](https://github.com/nienow/sn-mermaid)
+- [Sublime Text 3](https://sublimetext.com)
+  - [Mermaid Package](https://packagecontrol.io/packages/Mermaid)
 - [VS Code](https://code.visualstudio.com/)
  - [Mermaid Editor](https://marketplace.visualstudio.com/items?itemName=tomoyukim.vscode-mermaid-editor)
  - [Mermaid Export](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.mermaid-export)
@@ -198,22 +200,15 @@ Communication tools and platforms
 - [Vim](https://www.vim.org)
  - [Vim Diagram Syntax](https://github.com/zhaozg/vim-diagram)
  - [Official Vim Syntax and ft plugin](https://github.com/craigmac/vim-mermaid)
- [Zed](https://zed.dev)
-  - [zed-mermaid](https://github.com/gabeidx/zed-mermaid)

 ### Document Generation

- [Astro](https://astro.build/)
-  - [Adding diagrams to your Astro site with MermaidJS and Playwright](https://agramont.net/blog/diagraming-with-mermaidjs-astro/)
 - [Codedoc](https://codedoc.cc/)
  - [codedoc-mermaid-plugin](https://www.npmjs.com/package/codedoc-mermaid-plugin)
 - [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid) ✅
 - [Docusaurus](https://docusaurus.io/docs/markdown-features/diagrams) ✅
 - [Gatsby](https://www.gatsbyjs.com/)
  - [gatsby-remark-mermaid](https://github.com/remcohaszing/gatsby-remark-mermaid)
- [Jekyll](https://jekyllrb.com/)
-  - [jekyll-mermaid](https://rubygems.org/gems/jekyll-mermaid)
-  - [jekyll-mermaid-diagrams](https://github.com/fuzhibo/jekyll-mermaid-diagrams)
 - [JSDoc](https://jsdoc.app/)
  - [jsdoc-mermaid](https://github.com/Jellyvision/jsdoc-mermaid)
 - [Madness](https://madness.dannyb.co/)
@@ -222,7 +217,7 @@ Communication tools and platforms
 - [MkDocs](https://www.mkdocs.org)
  - [mkdocs-mermaid2-plugin](https://github.com/fralau/mkdocs-mermaid2-plugin)
  - [mkdocs-material](https://github.com/squidfunk/mkdocs-material), check the [docs](https://squidfunk.github.io/mkdocs-material/reference/diagrams/)
- [Quarto](https://quarto.org/) ✅
+  - [Quarto](https://quarto.org/)
 - [rehype](https://github.com/rehypejs/rehype)
  - [rehype-mermaid](https://github.com/remcohaszing/rehype-mermaid)
 - [remark](https://remark.js.org/)
@@ -251,12 +246,17 @@ Communication tools and platforms

 ### Other

+- [Astro](https://astro.build/)
+  - [Adding diagrams to your Astro site with MermaidJS and Playwright](https://agramont.net/blog/diagraming-with-mermaidjs-astro/)
 - [Bisheng](https://www.npmjs.com/package/bisheng)
  - [bisheng-plugin-mermaid](https://github.com/yct21/bisheng-plugin-mermaid)
 - [Blazorade Mermaid: Render Mermaid diagrams in Blazor applications](https://github.com/Blazorade/Blazorade-Mermaid/wiki)
 - [Codemia: A tool to practice system design problems](https://codemia.io) ✅
 - [ExDoc](https://github.com/elixir-lang/ex_doc)
  - [Rendering Mermaid graphs](https://github.com/elixir-lang/ex_doc#rendering-mermaid-graphs)
+- [Jekyll](https://jekyllrb.com/)
+  - [jekyll-mermaid](https://rubygems.org/gems/jekyll-mermaid)
+  - [jekyll-mermaid-diagrams](https://github.com/fuzhibo/jekyll-mermaid-diagrams)
 - [MarkChart: Preview Mermaid diagrams on macOS](https://markchart.app/)
 - [mermaid-isomorphic](https://github.com/remcohaszing/mermaid-isomorphic)
 - [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)
--- a/docs/ecosystem/mermaid-chart.md
+++ b/docs/ecosystem/mermaid-chart.md
@@ -12,7 +12,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun

 <br />

-<a href="https://www.producthunt.com/products/mermaid-chart?utm_source=badge-follow&utm_medium=badge&utm_souce=badge-mermaid&#0045;chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/follow.svg?product_id=552855&theme=light" alt="Mermaid&#0032;Chart - A&#0032;smarter&#0032;way&#0032;to&#0032;create&#0032;diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
+<a href="https://www.producthunt.com/posts/mermaid-whiteboard?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid&#0045;whiteboard" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=486720&theme=light" alt="Mermaid&#0032;Whiteboard - Drag&#0032;&#0038;&#0032;Drop&#0032;your&#0032;Nodes&#0032;with&#0032;Mermaid&#0039;s&#0032;new&#0032;Whiteboard&#0033; | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>

 ## About

--- a/docs/ecosystem/tutorials.md
+++ b/docs/ecosystem/tutorials.md
@@ -52,33 +52,28 @@ Examples are provided in [Getting Started](../intro/getting-started.md)

 [K8s.dev blog: Improve your documentation with Mermaid.js diagrams](https://www.kubernetes.dev/blog/2021/12/01/improve-your-documentation-with-mermaid.js-diagrams/)

-## Jupyter / Python Integration with mermaid-js
+## Jupyter Integration with mermaid-js

-Here's an example of Python integration with mermaid-js which uses the mermaid.ink service, that displays the graph in a Jupyter notebook and save it as _.png_ image with the stated resolution (in this example, `dpi=1200`).
+Here's an example of Python integration with mermaid-js which uses the mermaid.ink service, that displays the graph in a Jupyter notebook.

 ```python
 import base64
-import io, requests
 from IPython.display import Image, display
-from PIL import Image as im
 import matplotlib.pyplot as plt

 def mm(graph):
    graphbytes = graph.encode("utf8")
    base64_bytes = base64.urlsafe_b64encode(graphbytes)
    base64_string = base64_bytes.decode("ascii")
-    img = im.open(io.BytesIO(requests.get('https://mermaid.ink/img/' + base64_string).content))
-    plt.imshow(img)
-    plt.axis('off') # allow to hide axis
-    plt.savefig('image.png', dpi=1200)
+    display(Image(url="https://mermaid.ink/img/" + base64_string))

 mm("""
 graph LR;
-    A--> B & C & D
-    B--> A & E
-    C--> A & E
-    D--> A & E
-    E--> B & C & D
+    A--> B & C & D;
+    B--> A & E;
+    C--> A & E;
+    D--> A & E;
+    E--> B & C & D;
 """)
 ```

@@ -86,4 +81,4 @@ graph LR;

 ![Example graph of the Python integration](img/python-mermaid-integration.png)

-<!--- cspell:ignore Elle Jaoude Neurodiverse graphbytes imshow savefig --->
+<!--- cspell:ignore Elle Jaoude Neurodiverse graphbytes --->
--- a/docs/intro/index.md
+++ b/docs/intro/index.md
@@ -49,7 +49,7 @@ For a more detailed introduction to Mermaid and some of its more basic uses, loo

 🌐 [CDN](https://www.jsdelivr.com/package/npm/mermaid) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](../community/contributing.md) | 🔌 [Plug-Ins](../ecosystem/integrations-community.md)

-> 🖖 Keep a steady pulse: mermaid needs more Collaborators, [Read More](https://github.com/mermaid-js/mermaid/issues/866).
+> 🖖 Keep a steady pulse: mermaid needs more Collaborators, [Read More](https://github.com/knsv/mermaid/issues/866).

 :trophy: **Mermaid was nominated and won the [JS Open Source Awards (2019)](https://osawards.com/javascript/#nominees) in the category "The most exciting use of technology"!!!**

@@ -453,7 +453,7 @@ A quick note from Knut Sveidqvist:
 >
 > _Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
 >
-> _Thank you to the ever-growing list of [contributors](https://github.com/mermaid-js/mermaid/graphs/contributors) that brought the project this far!_
+> _Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!_

 ---

--- a/docs/intro/syntax-reference.md
+++ b/docs/intro/syntax-reference.md
@@ -94,8 +94,10 @@ Mermaid offers a variety of styles or “looks” for your diagrams, allowing yo

 **Available Looks:**

- Hand-Drawn Look: For a more personal, creative touch, the hand-drawn look brings a sketch-like quality to your diagrams. This style is perfect for informal settings or when you want to add a bit of personality to your diagrams.
- Classic Look: If you prefer the traditional Mermaid style, the classic look maintains the original appearance that many users are familiar with. It’s great for consistency across projects or when you want to keep the familiar aesthetic.
+```
+•	Hand-Drawn Look: For a more personal, creative touch, the hand-drawn look brings a sketch-like quality to your diagrams. This style is perfect for informal settings or when you want to add a bit of personality to your diagrams.
+•	Classic Look: If you prefer the traditional Mermaid style, the classic look maintains the original appearance that many users are familiar with. It’s great for consistency across projects or when you want to keep the familiar aesthetic.
+```

 **How to Select a Look:**

@@ -131,8 +133,10 @@ In addition to customizing the look of your diagrams, Mermaid Chart now allows y

 #### Supported Layout Algorithms:

- Dagre (default): This is the classic layout algorithm that has been used in Mermaid for a long time. It provides a good balance of simplicity and visual clarity, making it ideal for most diagrams.
- ELK: For those who need more sophisticated layout capabilities, especially when working with large or intricate diagrams, the ELK (Eclipse Layout Kernel) layout offers advanced options. It provides a more optimized arrangement, potentially reducing overlapping and improving readability. This is not included out the box but needs to be added when integrating mermaid for sites/applications that want to have elk support.
+```
+•	Dagre (default): This is the classic layout algorithm that has been used in Mermaid for a long time. It provides a good balance of simplicity and visual clarity, making it ideal for most diagrams.
+•	ELK: For those who need more sophisticated layout capabilities, especially when working with large or intricate diagrams, the ELK (Eclipse Layout Kernel) layout offers advanced options. It provides a more optimized arrangement, potentially reducing overlapping and improving readability. This is not included out the box but needs to be added when integrating mermaid for sites/applications that want to have elk support.
+```

 #### How to Select a Layout Algorithm:

--- a/docs/news/blog.md
+++ b/docs/news/blog.md
@@ -6,18 +6,6 @@

 # Blog

-## [Mermaid 11.4 is out: New Features and Kanban Diagramming](https://www.mermaidchart.com/blog/posts/mermaid-11-4-is-out-new-features-and-kanban-diagramming)
-
-Mermaid 11.4 brings enhanced functionality with the introduction of Kanban diagrams, allowing users to create visual workflows with status columns and task details.
-
-October 31, 2024 · 2 mins
-
-## [How To Build an ER Diagram with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-build-an-er-diagram-with-mermaid-chart)
-
-An entity relationship (ER) diagram acts like a blueprint for your database. This makes ER diagrams effective tools for anyone dealing with complex databases, data modeling, and AI model training.
-
-October 24, 2024 · 4 mins
-
 ## [Expanding the Horizons of Mermaid Flowcharts: Introducing 30 New Shapes!](https://www.mermaidchart.com/blog/posts/new-mermaid-flowchart-shapes/)

 24 September 2024 · 5 mins
--- a/docs/syntax/architecture.md
+++ b/docs/syntax/architecture.md
@@ -79,15 +79,15 @@ service {service id}({icon name})[{title}] (in {parent id})?
 Put together:

 ```
-service database1(database)[My Database]
+service database(db)[Database]
 ```

-creates the service identified as `database1`, using the icon `database`, with the label `My Database`.
+creates the service identified as `database`, using the icon `db`, with the label `Database`.

 If the service belongs to a group, it can be placed inside it through the optional `in` keyword

 ```
-service database1(database)[My Database] in private_api
+service database(db)[Database] in private_api
 ```

 ### Edges
@@ -194,7 +194,55 @@ architecture-beta
 ## Icons

 By default, architecture diagram supports the following icons: `cloud`, `database`, `disk`, `internet`, `server`.
-Users can use any of the 200,000+ icons available in iconify.design, or add their own custom icons, by following the steps [here](../config/icons.md).
+Users can use any of the 200,000+ icons available in iconify.design, or add their own custom icons, by following the steps below.
+
+The icon packs available can be found at [icones.js.org](https://icones.js.org/).
+We use the name defined when registering the icon pack, to override the prefix field of the iconify pack. This allows the user to use shorter names for the icons. It also allows us to load a particular pack only when it is used in a diagram.
+
+Using JSON file directly from CDN:
+
+```js
+import mermaid from 'CDN/mermaid.esm.mjs';
+mermaid.registerIconPacks([
+  {
+    name: 'logos',
+    loader: () =>
+      fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()),
+  },
+]);
+```
+
+Using packages and a bundler:
+
+```bash
+npm install @iconify-json/logos
+```
+
+With lazy loading
+
+```js
+import mermaid from 'mermaid';
+
+mermaid.registerIconPacks([
+  {
+    name: 'logos',
+    loader: () => import('@iconify-json/logos').then((module) => module.icons),
+  },
+]);
+```
+
+Without lazy loading
+
+```js
+import mermaid from 'mermaid';
+import { icons } from '@iconify-json/logos';
+mermaid.registerIconPacks([
+  {
+    name: icons.prefix, // To use the prefix defined in the icon pack
+    icons,
+  },
+]);
+```

 After the icons are installed, they can be used in the architecture diagram by using the format "name:icon-name", where name is the value used when registering the icon pack.

--- a/docs/syntax/block.md
+++ b/docs/syntax/block.md
@@ -141,7 +141,7 @@ block-beta
  a["A label"] b:2 c:2 d
 ```

-In this example, the block labeled "A labels" spans one column, while blocks 'b', 'c' span 2 columns, and 'd' is again allocated its own column. This flexibility in block sizing is crucial for accurately representing systems with components of varying significance or size.
+In this example, the block labeled "A wide one" spans two columns, while blocks 'b', 'c', and 'd' are allocated their own columns. This flexibility in block sizing is crucial for accurately representing systems with components of varying significance or size.

 ### Creating Composite Blocks

--- a/docs/syntax/classDiagram.md
+++ b/docs/syntax/classDiagram.md
@@ -427,51 +427,6 @@ And `Link` can be one of:
 | --   | Solid       |
 | ..   | Dashed      |

-### Lollipop Interfaces
-
-Classes can also be given a special relation type that defines a lollipop interface on the class. A lollipop interface is defined using the following syntax:
-
- `bar ()-- foo`
- `foo --() bar`
-
-The interface (bar) with the lollipop connects to the class (foo).
-
-Note: Each interface that is defined is unique and is meant to not be shared between classes / have multiple edges connecting to it.
-
-```mermaid-example
-classDiagram
-  bar ()-- foo
-```
-
-```mermaid
-classDiagram
-  bar ()-- foo
-```
-
-```mermaid-example
-classDiagram
-  class Class01 {
-    int amount
-    draw()
-  }
-  Class01 --() bar
-  Class02 --() bar
-
-  foo ()-- Class01
-```
-
-```mermaid
-classDiagram
-  class Class01 {
-    int amount
-    draw()
-  }
-  Class01 --() bar
-  Class02 --() bar
-
-  foo ()-- Class01
-```
-
 ## Define Namespace

 A namespace groups classes.
@@ -821,12 +776,10 @@ Beginner's tip—a full example using interactive links in an HTML page:

 ## Styling

-### Styling a node
+### Styling a node (v10.7.0+)

 It is possible to apply specific styles such as a thicker border or a different background color to an individual node using the `style` keyword.

-Note that notes and namespaces cannot be styled individually but do support themes.
-
 ```mermaid-example
 classDiagram
  class Animal
@@ -846,102 +799,11 @@ classDiagram
 #### Classes

 More convenient than defining the style every time is to define a class of styles and attach this class to the nodes that
-should have a different look.
-
-A class definition looks like the example below:
-
-```
-classDef className fill:#f9f,stroke:#333,stroke-width:4px;
-```
-
-Also, it is possible to define style to multiple classes in one statement:
-
-```
-classDef firstClassName,secondClassName font-size:12pt;
-```
-
-Attachment of a class to a node is done as per below:
-
-```
-cssClass "nodeId1" className;
-```
-
-It is also possible to attach a class to a list of nodes in one statement:
-
-```
-cssClass "nodeId1,nodeId2" className;
-```
-
-A shorter form of adding a class is to attach the classname to the node using the `:::` operator:
-
-```mermaid-example
-classDiagram
-    class Animal:::someclass
-    classDef someclass fill:#f96
-```
-
-```mermaid
-classDiagram
-    class Animal:::someclass
-    classDef someclass fill:#f96
-```
-
-Or:
-
-```mermaid-example
-classDiagram
-    class Animal:::someclass {
-        -int sizeInFeet
-        -canEat()
-    }
-    classDef someclass fill:#f96
-```
-
-```mermaid
-classDiagram
-    class Animal:::someclass {
-        -int sizeInFeet
-        -canEat()
-    }
-    classDef someclass fill:#f96
-```
-
-### Default class
-
-If a class is named default it will be applied to all nodes. Specific styles and classes should be defined afterwards to override the applied default styling.
-
-```
-classDef default fill:#f9f,stroke:#333,stroke-width:4px;
-```
-
-```mermaid-example
-classDiagram
-  class Animal:::pink
-  class Mineral
-
-  classDef default fill:#f96,color:red
-  classDef pink color:#f9f
-```
-
-```mermaid
-classDiagram
-  class Animal:::pink
-  class Mineral
-
-  classDef default fill:#f96,color:red
-  classDef pink color:#f9f
-```
-
-### CSS Classes
-
-It is also possible to predefine classes in CSS styles that can be applied from the graph definition as in the example
-below:
-
-**Example style**
+should have a different look. This is done by predefining classes in css styles that can be applied from the graph definition using the `cssClass` statement or the `:::` short hand.

 ```html
 <style>
-  .styleClass > * > g {
+  .styleClass > rect {
    fill: #ff0000;
    stroke: #ffff00;
    stroke-width: 4px;
@@ -949,7 +811,19 @@ below:
 </style>
 ```

-**Example definition**
+Then attaching that class to a specific node:
+
+```
+    cssClass "nodeId1" styleClass;
+```
+
+It is also possible to attach a class to a list of nodes in one statement:
+
+```
+    cssClass "nodeId1,nodeId2" styleClass;
+```
+
+A shorter form of adding a class is to attach the classname to the node using the `:::` operator:

 ```mermaid-example
 classDiagram
@@ -961,32 +835,136 @@ classDiagram
    class Animal:::styleClass
 ```

-> cssClasses cannot be added using this shorthand method at the same time as a relation statement.
+Or:
+
+```mermaid-example
+classDiagram
+    class Animal:::styleClass {
+        -int sizeInFeet
+        -canEat()
+    }
+```
+
+```mermaid
+classDiagram
+    class Animal:::styleClass {
+        -int sizeInFeet
+        -canEat()
+    }
+```
+
+?> cssClasses cannot be added using this shorthand method at the same time as a relation statement.
+
+?> Due to limitations with existing markup for class diagrams, it is not currently possible to define css classes within the diagram itself. **_Coming soon!_**
+
+### Default Styles
+
+The main styling of the class diagram is done with a preset number of css classes. During rendering these classes are extracted from the file located at src/themes/class.scss. The classes used here are described below:
+
+| Class              | Description                                                       |
+| ------------------ | ----------------------------------------------------------------- |
+| g.classGroup text  | Styles for general class text                                     |
+| classGroup .title  | Styles for general class title                                    |
+| g.classGroup rect  | Styles for class diagram rectangle                                |
+| g.classGroup line  | Styles for class diagram line                                     |
+| .classLabel .box   | Styles for class label box                                        |
+| .classLabel .label | Styles for class label text                                       |
+| composition        | Styles for composition arrow head and arrow line                  |
+| aggregation        | Styles for aggregation arrow head and arrow line(dashed or solid) |
+| dependency         | Styles for dependency arrow head and arrow line                   |
+
+#### Sample stylesheet
+
+```scss
+body {
+  background: white;
+}
+
+g.classGroup text {
+  fill: $nodeBorder;
+  stroke: none;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family);
+  font-size: 10px;
+
+  .title {
+    font-weight: bolder;
+  }
+}
+
+g.classGroup rect {
+  fill: $nodeBkg;
+  stroke: $nodeBorder;
+}
+
+g.classGroup line {
+  stroke: $nodeBorder;
+  stroke-width: 1;
+}
+
+.classLabel .box {
+  stroke: none;
+  stroke-width: 0;
+  fill: $nodeBkg;
+  opacity: 0.5;
+}
+
+.classLabel .label {
+  fill: $nodeBorder;
+  font-size: 10px;
+}
+
+.relation {
+  stroke: $nodeBorder;
+  stroke-width: 1;
+  fill: none;
+}
+
+@mixin composition {
+  fill: $nodeBorder;
+  stroke: $nodeBorder;
+  stroke-width: 1;
+}
+
+#compositionStart {
+  @include composition;
+}
+
+#compositionEnd {
+  @include composition;
+}
+
+@mixin aggregation {
+  fill: $nodeBkg;
+  stroke: $nodeBorder;
+  stroke-width: 1;
+}
+
+#aggregationStart {
+  @include aggregation;
+}
+
+#aggregationEnd {
+  @include aggregation;
+}
+
+#dependencyStart {
+  @include composition;
+}
+
+#dependencyEnd {
+  @include composition;
+}
+
+#extensionStart {
+  @include composition;
+}
+
+#extensionEnd {
+  @include composition;
+}
+```

 ## Configuration

-### Members Box
-
-It is possible to hide the empty members box of a class node.
-
-This is done by changing the **hideEmptyMembersBox** value of the class diagram configuration. For more information on how to edit the Mermaid configuration see the [configuration page.](https://mermaid.js.org/config/configuration.html)
-
-```mermaid-example
---
-  config:
-    class:
-      hideEmptyMembersBox: true
---
-classDiagram
-  class Duck
-```
-
-```mermaid
---
-  config:
-    class:
-      hideEmptyMembersBox: true
---
-classDiagram
-  class Duck
-```
+`Coming soon!`
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -316,6 +316,8 @@ This syntax creates a node A as a rectangle. It renders in the same way as `A["A

 Below is a comprehensive list of the newly introduced shapes and their corresponding semantic meanings, short names, and aliases:

+<!-- Will be auto generated with `pnpm --filter mermaid docs:shapes` -->
+
 | **Semantic Name**                 | **Shape Name**         | **Short Name** | **Description**                | **Alias Supported**                                              |
 | --------------------------------- | ---------------------- | -------------- | ------------------------------ | ---------------------------------------------------------------- |
 | Card                              | Notched Rectangle      | `notch-rect`   | Represents a card              | `card`, `notched-rectangle`                                      |
@@ -926,66 +928,6 @@ flowchart TD
    A@{ shape: tag-rect, label: "Tagged process" }
 ```

-## Special shapes in Mermaid Flowcharts (v11.3.0+)
-
-Mermaid also introduces 2 special shapes to enhance your flowcharts: **icon** and **image**. These shapes allow you to include icons and images directly within your flowcharts, providing more visual context and clarity.
-
-### Icon Shape
-
-You can use the `icon` shape to include an icon in your flowchart. To use icons, you need to register the icon pack first. Follow the instructions provided [here](../config/icons.md). The syntax for defining an icon shape is as follows:
-
-```mermaid-example
-flowchart TD
-    A@{ icon: "fa:user", form: "square", label: "User Icon", pos: "t", h: 60 }
-```
-
-```mermaid
-flowchart TD
-    A@{ icon: "fa:user", form: "square", label: "User Icon", pos: "t", h: 60 }
-```
-
-### Parameters
-
- **icon**: The name of the icon from the registered icon pack.
- **form**: Specifies the background shape of the icon. If not defined there will be no background to icon. Options include:
-  - `square`
-  - `circle`
-  - `rounded`
- **label**: The text label associated with the icon. This can be any string. If not defined, no label will be displayed.
- **pos**: The position of the label. If not defined label will default to bottom of icon. Possible values are:
-  - `t`
-  - `b`
- **h**: The height of the icon. If not defined this will default to 48 which is minimum.
-
-### Image Shape
-
-You can use the `image` shape to include an image in your flowchart. The syntax for defining an image shape is as follows:
-
-```mermaid-example
-flowchart TD
-    A@{ img: "https://example.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }
-```
-
-```mermaid
-flowchart TD
-    A@{ img: "https://example.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }
-```
-
-### Parameters
-
- **img**: The URL of the image to be displayed.
- **label**: The text label associated with the image. This can be any string. If not defined, no label will be displayed.
- **pos**: The position of the label. If not defined, the label will default to the bottom of the image. Possible values are:
-  - `t`
-  - `b`
- **w**: The width of the image. If not defined, this will default to the natural width of the image.
- **h**: The height of the image. If not defined, this will default to the natural height of the image.
- **constraint**: Determines if the image should constrain the node size. This setting also ensures the image maintains its original aspect ratio, adjusting the height (`h`) accordingly to the width (`w`). If not defined, this will default to `off` Possible values are:
-  - `on`
-  - `off`
-
-These new shapes provide additional flexibility and visual appeal to your flowcharts, making them more informative and engaging.
-
 ## Links between nodes

 Nodes can be connected with links/edges. It is possible to have different types of links or attach a text string to a link.
@@ -1183,91 +1125,6 @@ flowchart TB
    B --> D
 ```

-### Attaching an ID to Edges
-
-Mermaid now supports assigning IDs to edges, similar to how IDs and metadata can be attached to nodes. This feature lays the groundwork for more advanced styling, classes, and animation capabilities on edges.
-
-**Syntax:**
-
-To give an edge an ID, prepend the edge syntax with the ID followed by an `@` character. For example:
-
-```mermaid-example
-flowchart LR
-  A e1@–> B
-```
-
-```mermaid
-flowchart LR
-  A e1@–> B
-```
-
-In this example, `e1` is the ID of the edge connecting `A` to `B`. You can then use this ID in later definitions or style statements, just like with nodes.
-
-### Turning an Animation On
-
-Once you have assigned an ID to an edge, you can turn on animations for that edge by defining the edge’s properties:
-
-```mermaid-example
-flowchart LR
-  A e1@==> B
-  e1@{ animate: true }
-```
-
-```mermaid
-flowchart LR
-  A e1@==> B
-  e1@{ animate: true }
-```
-
-This tells Mermaid that the edge `e1` should be animated.
-
-### Selecting Type of Animation
-
-In the initial version, two animation speeds are supported: `fast` and `slow`. Selecting a specific animation type is a shorthand for enabling animation and setting the animation speed in one go.
-
-**Examples:**
-
-```mermaid-example
-flowchart LR
-  A e1@–> B
-  e1@{ animation: fast }
-```
-
-```mermaid
-flowchart LR
-  A e1@–> B
-  e1@{ animation: fast }
-```
-
-This is equivalent to `{ animate: true, animation: fast }`.
-
-### Using classDef Statements for Animations
-
-You can also animate edges by assigning a class to them and then defining animation properties in a `classDef` statement. For example:
-
-```mermaid-example
-flowchart LR
-  A e1@–> B
-  classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
-  class e1 animate
-```
-
-```mermaid
-flowchart LR
-  A e1@–> B
-  classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
-  class e1 animate
-```
-
-In this snippet:
-
- `e1@-->` creates an edge with ID `e1`.
- `classDef animate` defines a class named `animate` with styling and animation properties.
- `class e1 animate` applies the `animate` class to the edge `e1`.
-
-**Note on Escaping Commas:**
-When setting the `stroke-dasharray` property, remember to escape commas as `\,` since commas are used as delimiters in Mermaid’s style definitions.
-
 ## New arrow types

 There are new types of arrows supported:
@@ -1792,7 +1649,8 @@ graph LR
 ```

 For a full list of available curves, including an explanation of custom curves, refer to
-the [Shapes](https://d3js.org/d3-shape/curve) documentation in the [d3-shape](https://github.com/d3/d3-shape/) project.
+the [Shapes](https://github.com/d3/d3-shape/blob/main/README.md#curves) documentation in the
+[d3-shape](https://github.com/d3/d3-shape/) project.

 ### Styling a node

--- a/docs/syntax/gantt.md
+++ b/docs/syntax/gantt.md
@@ -500,7 +500,7 @@ mermaid.ganttConfig = {
  sectionFontSize: 24, // Font size for sections
  numberSectionStyles: 1, // The number of alternating section styles
  axisFormat: '%d/%m', // Date/time format of the axis
-  tickInterval: '1week', // Axis ticks
+  tickInterval: '1 week', // Axis ticks
  topAxis: true, // When this flag is set, date labels will be added to the top of the chart
  displayMode: 'compact', // Turns compact mode on
  weekday: 'sunday', // On which day a week-based interval should start
--- a/docs/syntax/kanban.md
+++ b/docs/syntax/kanban.md
@@ -1,161 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/kanban.md](../../packages/mermaid/src/docs/syntax/kanban.md).
-
-# Mermaid Kanban Diagram Documentation
-
-Mermaid’s Kanban diagram allows you to create visual representations of tasks moving through different stages of a workflow. This guide explains how to use the Kanban diagram syntax, based on the provided example.
-
-## Overview
-
-A Kanban diagram in Mermaid starts with the kanban keyword, followed by the definition of columns (stages) and tasks within those columns.
-
-```mermaid-example
-kanban
-  column1[Column Title]
-    task1[Task Description]
-```
-
-```mermaid
-kanban
-  column1[Column Title]
-    task1[Task Description]
-```
-
-## Defining Columns
-
-Columns represent the different stages in your workflow, such as “Todo,” “In Progress,” “Done,” etc. Each column is defined using a unique identifier and a title enclosed in square brackets.
-
-**Syntax:**
-
-```
-columnId[Column Title]
-```
-
- columnId: A unique identifier for the column.
- \[Column Title]: The title displayed on the column header.
-
-Like this `id1[Todo]`
-
-## Adding Tasks to Columns
-
-Tasks are listed under their respective columns with an indentation. Each task also has a unique identifier and a description enclosed in square brackets.
-
-**Syntax:**
-
-```
-taskId[Task Description]
-```
-
-```
-•	taskId: A unique identifier for the task.
-•	[Task Description]: The description of the task.
-```
-
-**Example:**
-
-```
-docs[Create Documentation]
-```
-
-## Adding Metadata to Tasks
-
-You can include additional metadata for each task using the @{ ... } syntax. Metadata can contain key-value pairs like assigned, ticket, priority, etc. This will be rendered added to the rendering of the node.
-
-## Supported Metadata Keys
-
-```
-•	assigned: Specifies who is responsible for the task.
-•	ticket: Links the task to a ticket or issue number.
-•	priority: Indicates the urgency of the task. Allowed values: 'Very High', 'High', 'Low' and 'Very Low'
-```
-
-```mermaid-example
-kanban
-todo[Todo]
-  id3[Update Database Function]@{ ticket: MC-2037, assigned: 'knsv', priority: 'High' }
-```
-
-```mermaid
-kanban
-todo[Todo]
-  id3[Update Database Function]@{ ticket: MC-2037, assigned: 'knsv', priority: 'High' }
-```
-
-## Configuration Options
-
-You can customize the Kanban diagram using a configuration block at the beginning of your markdown file. This is useful for setting global settings like a base URL for tickets. Currently there is one configuration option for kanban diagrams `ticketBaseUrl`. This can be set as in the the following example:
-
-```yaml
---
-config:
-  kanban:
-    ticketBaseUrl: 'https://yourproject.atlassian.net/browse/#TICKET#'
---
-```
-
-When the kanban item has an assigned ticket number the ticket number in the diagram will have a link to an external system where the ticket is defined. The `ticketBaseUrl` sets the base URL to the external system and #TICKET# is replaced with the ticket value from task metadata to create a valid link.
-
-## Full Example
-
-Below is the full Kanban diagram based on the provided example:
-
-```mermaid-example
---
-config:
-  kanban:
-    ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
---
-kanban
-  Todo
-    [Create Documentation]
-    docs[Create Blog about the new diagram]
-  [In progress]
-    id6[Create renderer so that it works in all cases. We also add som extra text here for testing purposes. And some more just for the extra flare.]
-  id9[Ready for deploy]
-    id8[Design grammar]@{ assigned: 'knsv' }
-  id10[Ready for test]
-    id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
-    id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
-  id11[Done]
-    id5[define getData]
-    id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
-    id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }
-
-  id12[Can't reproduce]
-    id3[Weird flickering in Firefox]
-```
-
-```mermaid
---
-config:
-  kanban:
-    ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
---
-kanban
-  Todo
-    [Create Documentation]
-    docs[Create Blog about the new diagram]
-  [In progress]
-    id6[Create renderer so that it works in all cases. We also add som extra text here for testing purposes. And some more just for the extra flare.]
-  id9[Ready for deploy]
-    id8[Design grammar]@{ assigned: 'knsv' }
-  id10[Ready for test]
-    id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
-    id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
-  id11[Done]
-    id5[define getData]
-    id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
-    id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }
-
-  id12[Can't reproduce]
-    id3[Weird flickering in Firefox]
-```
-
-In conclusion, creating a Kanban diagram in Mermaid is a straightforward process that effectively visualizes your workflow. Start by using the kanban keyword to initiate the diagram. Define your columns with unique identifiers and titles to represent different stages of your project. Under each column, list your tasks—also with unique identifiers—and provide detailed descriptions as needed. Remember that proper indentation is crucial; tasks must be indented under their parent columns to maintain the correct structure.
-
-You can enhance your diagram by adding optional metadata to tasks using the @{ ... } syntax, which allows you to include additional context such as assignee, ticket numbers, and priority levels. For further customization, utilize the configuration block at the top of your file to set global options like ticketBaseUrl for linking tickets directly from your diagram.
-
-By adhering to these guidelines—ensuring unique identifiers, proper indentation, and utilizing metadata and configuration options—you can create a comprehensive and customized Kanban board that effectively maps out your project’s workflow using Mermaid.
--- a/docs/syntax/sequenceDiagram.md
+++ b/docs/syntax/sequenceDiagram.md
@@ -220,7 +220,7 @@ There are ten types of arrows currently supported:
 | `<<->>`  | Solid line with bidirectional arrowheads (v11.0.0+)  |
 | `<<-->>` | Dotted line with bidirectional arrowheads (v11.0.0+) |
 | `-x`     | Solid line with a cross at the end                   |
-| `--x`    | Dotted line with a cross at the end                  |
+| `--x`    | Dotted line with a cross at the end.                 |
 | `-)`     | Solid line with an open arrow at the end (async)     |
 | `--)`    | Dotted line with a open arrow at the end (async)     |

--- a/docs/syntax/timeline.md
+++ b/docs/syntax/timeline.md
@@ -18,7 +18,7 @@ timeline
    2002 : LinkedIn
    2004 : Facebook
         : Google
-    2005 : YouTube
+    2005 : Youtube
    2006 : Twitter
 ```

@@ -28,7 +28,7 @@ timeline
    2002 : LinkedIn
    2004 : Facebook
         : Google
-    2005 : YouTube
+    2005 : Youtube
    2006 : Twitter
 ```

@@ -67,7 +67,7 @@ timeline
    title History of Social Media Platform
    2002 : LinkedIn
    2004 : Facebook : Google
-    2005 : YouTube
+    2005 : Youtube
    2006 : Twitter
 ```

@@ -76,7 +76,7 @@ timeline
    title History of Social Media Platform
    2002 : LinkedIn
    2004 : Facebook : Google
-    2005 : YouTube
+    2005 : Youtube
    2006 : Twitter
 ```

@@ -198,7 +198,7 @@ However, if there is no section defined, then we have two possibilities:
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : YouTube
+          2005 : Youtube
          2006 : Twitter

 ```
@@ -208,7 +208,7 @@ However, if there is no section defined, then we have two possibilities:
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : YouTube
+          2005 : Youtube
          2006 : Twitter

 ```
@@ -239,7 +239,7 @@ let us look at same example, where we have disabled the multiColor option.
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : YouTube
+          2005 : Youtube
          2006 : Twitter

 ```
@@ -250,7 +250,7 @@ let us look at same example, where we have disabled the multiColor option.
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : YouTube
+          2005 : Youtube
          2006 : Twitter

 ```
@@ -278,7 +278,7 @@ Now let's override the default values for the `cScale0` to `cScale2` variables:
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : YouTube
+          2005 : Youtube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
@@ -296,7 +296,7 @@ Now let's override the default values for the `cScale0` to `cScale2` variables:
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : YouTube
+          2005 : Youtube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
@@ -329,7 +329,7 @@ Let's put them to use, and see how our sample diagram looks in different themes:
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : YouTube
+          2005 : Youtube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
@@ -342,7 +342,7 @@ Let's put them to use, and see how our sample diagram looks in different themes:
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : YouTube
+          2005 : Youtube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
@@ -357,7 +357,7 @@ Let's put them to use, and see how our sample diagram looks in different themes:
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : YouTube
+          2005 : Youtube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
@@ -370,7 +370,7 @@ Let's put them to use, and see how our sample diagram looks in different themes:
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : YouTube
+          2005 : Youtube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
@@ -385,7 +385,7 @@ Let's put them to use, and see how our sample diagram looks in different themes:
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : YouTube
+          2005 : Youtube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
@@ -398,7 +398,7 @@ Let's put them to use, and see how our sample diagram looks in different themes:
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : YouTube
+          2005 : Youtube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
@@ -413,7 +413,7 @@ Let's put them to use, and see how our sample diagram looks in different themes:
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : YouTube
+          2005 : Youtube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
@@ -426,7 +426,7 @@ Let's put them to use, and see how our sample diagram looks in different themes:
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : YouTube
+          2005 : Youtube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
@@ -441,7 +441,7 @@ Let's put them to use, and see how our sample diagram looks in different themes:
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : YouTube
+          2005 : Youtube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
@@ -454,7 +454,7 @@ Let's put them to use, and see how our sample diagram looks in different themes:
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
-          2005 : YouTube
+          2005 : Youtube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -137,6 +137,7 @@ export default tseslint.config(
      'unicorn/no-instanceof-array': 'error',
      'unicorn/no-typeof-undefined': 'error',
      'unicorn/no-unnecessary-await': 'error',
+      'unicorn/no-unsafe-regex': 'warn',
      'unicorn/no-useless-promise-resolve-reject': 'error',
      'unicorn/prefer-array-find': 'error',
      'unicorn/prefer-array-flat-map': 'error',
--- a/package.json
+++ b/package.json
@@ -64,7 +64,7 @@
  },
  "devDependencies": {
    "@applitools/eyes-cypress": "^3.44.4",
-    "@argos-ci/cypress": "^2.2.2",
+    "@argos-ci/cypress": "^2.1.0",
    "@changesets/changelog-github": "^0.5.0",
    "@changesets/cli": "^2.27.7",
    "@cspell/eslint-plugin": "^8.8.4",
@@ -91,11 +91,10 @@
    "cspell": "^8.6.0",
    "cypress": "^13.14.1",
    "cypress-image-snapshot": "^4.0.1",
-    "cypress-split": "^1.24.0",
-    "esbuild": "^0.25.0",
+    "esbuild": "^0.21.5",
    "eslint": "^9.4.0",
-    "eslint-config-prettier": "^10.0.0",
-    "eslint-plugin-cypress": "^4.0.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-cypress": "^3.3.0",
    "eslint-plugin-html": "^8.1.1",
    "eslint-plugin-jest": "^28.6.0",
    "eslint-plugin-jsdoc": "^50.0.0",
@@ -103,8 +102,8 @@
    "eslint-plugin-lodash": "^8.0.0",
    "eslint-plugin-markdown": "^5.0.0",
    "eslint-plugin-no-only-tests": "^3.1.0",
-    "eslint-plugin-tsdoc": "^0.4.0",
-    "eslint-plugin-unicorn": "^57.0.0",
+    "eslint-plugin-tsdoc": "^0.3.0",
+    "eslint-plugin-unicorn": "^55.0.0",
    "express": "^4.19.1",
    "globals": "^15.4.0",
    "globby": "^14.0.1",
@@ -123,7 +122,6 @@
    "rimraf": "^5.0.5",
    "rollup-plugin-visualizer": "^5.12.0",
    "start-server-and-test": "^2.0.3",
-    "tslib": "^2.8.1",
    "tsx": "^4.7.1",
    "typescript": "~5.4.5",
    "typescript-eslint": "^8.0.0-alpha.34",
--- a/packages/mermaid-layout-elk/CHANGELOG.md
+++ b/packages/mermaid-layout-elk/CHANGELOG.md
@@ -1,20 +1,5 @@
 # @mermaid-js/layout-elk

-## 0.1.7
-
-### Patch Changes
-
- [#6090](https://github.com/mermaid-js/mermaid/pull/6090) [`654097c`](https://github.com/mermaid-js/mermaid/commit/654097c43801b2d606bc3d2bef8c6fbc3301e9e4) Thanks [@knsv](https://github.com/knsv)! - fix: Updated offset calculations for diamond shape when handling intersections
-
-## 0.1.6
-
-### Patch Changes
-
- [#6081](https://github.com/mermaid-js/mermaid/pull/6081) [`68f41f6`](https://github.com/mermaid-js/mermaid/commit/68f41f685d2afe7d12f63aabf3de0c3461898471) Thanks [@knsv](https://github.com/knsv)! - fix: Elk rendering of Diamond shape intersections
-
- Updated dependencies [[`01b5079`](https://github.com/mermaid-js/mermaid/commit/01b5079562ec8d34ce9964910f168873843c68f8), [`1388662`](https://github.com/mermaid-js/mermaid/commit/1388662132cc829f9820c2e9970ae04e2dd90588), [`fe3cffb`](https://github.com/mermaid-js/mermaid/commit/fe3cffbb673a25b81989aacb06e5d0eda35326db)]:
-  - mermaid@11.4.1
-
 ## 0.1.5

 ### Patch Changes
--- a/packages/mermaid-layout-elk/package.json
+++ b/packages/mermaid-layout-elk/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@mermaid-js/layout-elk",
-  "version": "0.1.7",
+  "version": "0.1.5",
  "description": "ELK layout engine for mermaid",
  "module": "dist/mermaid-layout-elk.core.mjs",
  "types": "dist/layouts.d.ts",
--- a/packages/mermaid-layout-elk/src/render.ts
+++ b/packages/mermaid-layout-elk/src/render.ts
@@ -3,21 +3,6 @@ import ELK from 'elkjs/lib/elk.bundled.js';
 import type { InternalHelpers, LayoutData, RenderOptions, SVG, SVGGroup } from 'mermaid';
 import { type TreeData, findCommonAncestor } from './find-common-ancestor.js';

-type Node = LayoutData['nodes'][number];
-
-interface LabelData {
-  width: number;
-  height: number;
-  wrappingWidth?: number;
-  labelNode?: SVGGElement | null;
-}
-
-interface NodeWithVertex extends Omit<Node, 'domId'> {
-  children?: unknown[];
-  labelData?: LabelData;
-  domId?: Node['domId'] | SVGGroup | d3.Selection<SVGAElement, unknown, Element | null, unknown>;
-}
-
 export const render = async (
  data4Layout: LayoutData,
  svg: SVG,
@@ -39,37 +24,27 @@ export const render = async (
  const nodeDb: Record<string, any> = {};
  const clusterDb: Record<string, any> = {};

-  const addVertex = async (
-    nodeEl: SVGGroup,
-    graph: { children: NodeWithVertex[] },
-    nodeArr: Node[],
-    node: Node
-  ) => {
-    const labelData: LabelData = { width: 0, height: 0 };
+  const addVertex = async (nodeEl: any, graph: { children: any[] }, nodeArr: any, node: any) => {
+    const labelData: any = { width: 0, height: 0 };

+    let boundingBox;
+    const child = {
+      ...node,
+    };
+    graph.children.push(child);
+    nodeDb[node.id] = child;
    const config = getConfig();

    // Add the element to the DOM
    if (!node.isGroup) {
-      const child: NodeWithVertex = {
-        ...node,
-      };
-      graph.children.push(child);
-      nodeDb[node.id] = child;
-
      const childNodeEl = await insertNode(nodeEl, node, { config, dir: node.dir });
-      const boundingBox = childNodeEl.node()!.getBBox();
+      boundingBox = childNodeEl.node().getBBox();
      child.domId = childNodeEl;
      child.width = boundingBox.width;
      child.height = boundingBox.height;
    } else {
      // A subgraph
-      const child: NodeWithVertex & { children: NodeWithVertex[] } = {
-        ...node,
-        children: [],
-      };
-      graph.children.push(child);
-      nodeDb[node.id] = child;
+      child.children = [];
      await addVertices(nodeEl, nodeArr, child, node.id);

      if (node.label) {
@@ -93,16 +68,28 @@ export const render = async (
  };

  const addVertices = async function (
-    nodeEl: SVGGroup,
-    nodeArr: Node[],
-    graph: { children: NodeWithVertex[] },
-    parentId?: string
+    nodeEl: any,
+    nodeArr: any[],
+    graph: {
+      id: string;
+      layoutOptions: {
+        'elk.hierarchyHandling': string;
+        'elk.algorithm': any;
+        'nodePlacement.strategy': any;
+        'elk.layered.mergeEdges': any;
+        'elk.direction': string;
+        'spacing.baseValue': number;
+      };
+      children: never[];
+      edges: never[];
+    },
+    parentId?: undefined
  ) {
-    const siblings = nodeArr.filter((node) => node?.parentId === parentId);
+    const siblings = nodeArr.filter((node: { parentId: any }) => node.parentId === parentId);
    log.info('addVertices APA12', siblings, parentId);
    // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition
    await Promise.all(
-      siblings.map(async (node) => {
+      siblings.map(async (node: any) => {
        await addVertex(nodeEl, graph, nodeArr, node);
      })
    );
@@ -149,7 +136,6 @@ export const render = async (
            const clusterNode = JSON.parse(JSON.stringify(node));
            clusterNode.x = node.offset.posX + node.width / 2;
            clusterNode.y = node.offset.posY + node.height / 2;
-            clusterNode.width = Math.max(clusterNode.width, node.labelData.width);
            await insertCluster(subgraphEl, clusterNode);

            log.debug('Id (UIO)= ', node.id, node.width, node.shape, node.labels);
@@ -276,8 +262,6 @@ export const render = async (
        interpolate: undefined;
        style: undefined;
        labelType: any;
-        startLabelRight?: string;
-        endLabelLeft?: string;
      }) {
        // Identify Link
        const linkIdBase = edge.id; // 'L-' + edge.start + '-' + edge.end;
@@ -331,9 +315,6 @@ export const render = async (
        let style = '';
        let labelStyle = '';

-        edgeData.startLabelRight = edge.startLabelRight;
-        edgeData.endLabelLeft = edge.endLabelLeft;
-
        switch (edge.stroke) {
          case 'normal':
            style = 'fill:none;';
@@ -484,8 +465,6 @@ export const render = async (
    const r3 = a1 * q1.x + b1 * q1.y + c1;
    const r4 = a1 * q2.x + b1 * q2.y + c1;

-    const epsilon = 1e-6;
-
    // Check signs of r3 and r4. If both point 3 and point 4 lie on
    // same side of line 1, the line segments do not intersect.
    if (r3 !== 0 && r4 !== 0 && sameSign(r3, r4)) {
@@ -504,7 +483,7 @@ export const render = async (
    // Check signs of r1 and r2. If both point 1 and point 2 lie
    // on same side of second line segment, the line segments do
    // not intersect.
-    if (Math.abs(r1) < epsilon && Math.abs(r2) < epsilon && sameSign(r1, r2)) {
+    if (r1 !== 0 && r2 !== 0 && sameSign(r1, r2)) {
      return /*DON'T_INTERSECT*/;
    }

@@ -549,11 +528,11 @@ export const render = async (
      { x: x1 - w / 2, y: y1 },
    ];
    log.debug(
-      `APA16 diamondIntersection calc abc89:
+      `UIO diamondIntersection calc abc89:
  outsidePoint: ${JSON.stringify(outsidePoint)}
  insidePoint : ${JSON.stringify(insidePoint)}
-  node-bounds       : x:${bounds.x} y:${bounds.y} w:${bounds.width} h:${bounds.height}`,
-      JSON.stringify(polyPoints)
+  node        : x:${bounds.x} y:${bounds.y} w:${bounds.width} h:${bounds.height}`,
+      polyPoints
    );

    const intersections = [];
@@ -566,8 +545,8 @@ export const render = async (
      minY = Math.min(minY, entry.y);
    });

-    const left = x1 - w / 2 - minX;
-    const top = y1 - h / 2 - minY;
+    // const left = x1 - w / 2;
+    // const top = y1 + h / 2;

    for (let i = 0; i < polyPoints.length; i++) {
      const p1 = polyPoints[i];
@@ -575,8 +554,8 @@ export const render = async (
      const intersect = intersectLine(
        bounds,
        outsidePoint,
-        { x: left + p1.x, y: top + p1.y },
-        { x: left + p2.x, y: top + p2.y }
+        { x: p1.x, y: p1.y },
+        { x: p2.x, y: p2.y }
      );

      if (intersect) {
@@ -705,11 +684,14 @@ export const render = async (
    bounds: { x: any; y: any; width: any; height: any; padding: any },
    isDiamond: boolean
  ) => {
-    log.debug('APA18 cutPathAtIntersect Points:', _points, 'node:', bounds, 'isDiamond', isDiamond);
+    log.debug('UIO cutPathAtIntersect Points:', _points, 'node:', bounds, 'isDiamond', isDiamond);
    const points: any[] = [];
    let lastPointOutside = _points[0];
    let isInside = false;
    _points.forEach((point: any) => {
+      // const node = clusterDb[edge.toCluster].node;
+      log.debug(' checking point', point, bounds);
+
      // check if point is inside the boundary rect
      if (!outsideNode(bounds, point) && !isInside) {
        // First point inside the rect found
@@ -752,6 +734,7 @@ export const render = async (
        }
      }
    });
+    log.debug('returning points', points);
    return points;
  };

@@ -903,7 +886,7 @@ export const render = async (

      const offset = calcOffset(sourceId, targetId, parentLookupDb);
      log.debug(
-        'APA18 offset',
+        'offset',
        offset,
        sourceId,
        ' ==> ',
@@ -966,41 +949,48 @@ export const render = async (
            startNode.innerHTML
          );
        }
-        if (startNode.shape === 'diamond' || startNode.shape === 'diam') {
+        if (startNode.shape === 'diamond') {
          edge.points.unshift({
-            x: startNode.offset.posX + startNode.width / 2,
-            y: startNode.offset.posY + startNode.height / 2,
+            x: startNode.x + startNode.width / 2 + offset.x,
+            y: startNode.y + startNode.height / 2 + offset.y,
          });
        }
-        if (endNode.shape === 'diamond' || endNode.shape === 'diam') {
-          edge.points.push({
-            x: endNode.offset.posX + endNode.width / 2,
-            y: endNode.offset.posY + endNode.height / 2,
-          });
+        if (endNode.shape === 'diamond') {
+          const x = endNode.x + endNode.width / 2 + offset.x;
+          // Add a point at the center of the diamond
+          if (
+            Math.abs(edge.points[edge.points.length - 1].y - endNode.y - offset.y) > 0.001 ||
+            Math.abs(edge.points[edge.points.length - 1].x - x) > 0.001
+          ) {
+            edge.points.push({
+              x: endNode.x + endNode.width / 2 + offset.x,
+              y: endNode.y + endNode.height / 2 + offset.y,
+            });
+          }
        }

        edge.points = cutPathAtIntersect(
          edge.points.reverse(),
          {
-            x: startNode.offset.posX + startNode.width / 2,
-            y: startNode.offset.posY + startNode.height / 2,
+            x: startNode.x + startNode.width / 2 + offset.x,
+            y: startNode.y + startNode.height / 2 + offset.y,
            width: sw,
            height: startNode.height,
            padding: startNode.padding,
          },
-          startNode.shape === 'diamond' || startNode.shape === 'diam'
+          startNode.shape === 'diamond'
        ).reverse();

        edge.points = cutPathAtIntersect(
          edge.points,
          {
-            x: endNode.offset.posX + endNode.width / 2,
-            y: endNode.offset.posY + endNode.height / 2,
+            x: endNode.x + ew / 2 + endNode.offset.x,
+            y: endNode.y + endNode.height / 2 + endNode.offset.y,
            width: ew,
            height: endNode.height,
            padding: endNode.padding,
          },
-          endNode.shape === 'diamond' || endNode.shape === 'diam'
+          endNode.shape === 'diamond'
        );

        const paths = insertEdge(
--- a/packages/mermaid/.gitignore
+++ b/packages/mermaid/.gitignore
@@ -4,3 +4,4 @@ README.*
 src/docs/public/user-avatars/
 src/docs/.vitepress/cache
 src/docs/.vitepress/components.d.ts
+src/docs/syntax/shapesTable.md
--- a/packages/mermaid/CHANGELOG.md
+++ b/packages/mermaid/CHANGELOG.md
@@ -1,43 +1,5 @@
 # mermaid

-## 11.4.1
-
-### Patch Changes
-
- [#6059](https://github.com/mermaid-js/mermaid/pull/6059) [`01b5079`](https://github.com/mermaid-js/mermaid/commit/01b5079562ec8d34ce9964910f168873843c68f8) Thanks [@knsv](https://github.com/knsv)! - fix: Kanban diagrams will not render when adding a number as ticket id or assigned for a task
-
- [#6038](https://github.com/mermaid-js/mermaid/pull/6038) [`1388662`](https://github.com/mermaid-js/mermaid/commit/1388662132cc829f9820c2e9970ae04e2dd90588) Thanks [@knsv](https://github.com/knsv)! - fix: Intersection calculations for tilted cylinder/DAS when using handdrawn look. Some random seeds could cause the calculations to break.
-
- [#6079](https://github.com/mermaid-js/mermaid/pull/6079) [`fe3cffb`](https://github.com/mermaid-js/mermaid/commit/fe3cffbb673a25b81989aacb06e5d0eda35326db) Thanks [@aloisklink](https://github.com/aloisklink)! - Bump dompurify to `^3.2.1`. This removes the need for `@types/dompurify`.
-
-## 11.4.0
-
-### Minor Changes
-
- [#5999](https://github.com/mermaid-js/mermaid/pull/5999) [`742ad7c`](https://github.com/mermaid-js/mermaid/commit/742ad7c130964df1fb5544e909d9556081285f68) Thanks [@knsv](https://github.com/knsv)! - Adding Kanban board, a new diagram type
-
- [#5880](https://github.com/mermaid-js/mermaid/pull/5880) [`bdf145f`](https://github.com/mermaid-js/mermaid/commit/bdf145ffe362462176d9c1e68d5f3ff5c9d962b0) Thanks [@yari-dewalt](https://github.com/yari-dewalt)! - Class diagram changes:
-
-  - Updates the class diagram to the new unified way of rendering.
-  - Includes a new "classBox" shape to be used in diagrams
-  - Other updates such as:
-    - the option to hide the empty members box in class diagrams,
-    - support for handDrawn look,
-    - the introduction of the classDef statement into class diagrams,
-    - support for styling the default class,
-    - support lollipop interfaces.
-  - Includes fixes / additions for #5562 #3139 and #4037
-
-### Patch Changes
-
- [#5937](https://github.com/mermaid-js/mermaid/pull/5937) [`17b7831`](https://github.com/mermaid-js/mermaid/commit/17b783135f9b2b7748b620dbf81d0f56ab4755f1) Thanks [@saurabhg772244](https://github.com/saurabhg772244)! - fix: Jagged edge fix for icon shape
-
- [#5933](https://github.com/mermaid-js/mermaid/pull/5933) [`72d60d2`](https://github.com/mermaid-js/mermaid/commit/72d60d2633584eb59bccdb6cf30b9522db645db2) Thanks [@remcohaszing](https://github.com/remcohaszing)! - Add missing TypeScript dependencies
-
- [#5937](https://github.com/mermaid-js/mermaid/pull/5937) [`17b7831`](https://github.com/mermaid-js/mermaid/commit/17b783135f9b2b7748b620dbf81d0f56ab4755f1) Thanks [@saurabhg772244](https://github.com/saurabhg772244)! - fix: Icon color fix for colored icons.
-
- [#6002](https://github.com/mermaid-js/mermaid/pull/6002) [`5fabd41`](https://github.com/mermaid-js/mermaid/commit/5fabd414fbee01e43bf6c900907ffc1511ca7440) Thanks [@aloisklink](https://github.com/aloisklink)! - fix: error `mermaid.parse` on an invalid shape, so that it matches the errors thrown by `mermaid.render`
-
 ## 11.3.0

 ### Minor Changes
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -1,6 +1,6 @@
 {
  "name": "mermaid",
-  "version": "11.4.1",
+  "version": "11.3.0",
  "description": "Markdown-ish syntax for generating flowcharts, mindmaps, sequence diagrams, class diagrams, gantt charts, git graphs and more.",
  "type": "module",
  "module": "./dist/mermaid.core.mjs",
@@ -35,8 +35,9 @@
    "clean": "rimraf dist",
    "dev": "pnpm -w dev",
    "docs:code": "typedoc src/defaultConfig.ts src/config.ts src/mermaid.ts && prettier --write ./src/docs/config/setup",
-    "docs:build": "rimraf ../../docs && pnpm docs:code && pnpm docs:spellcheck && tsx scripts/docs.cli.mts",
-    "docs:verify": "pnpm docs:code && pnpm docs:spellcheck && tsx scripts/docs.cli.mts --verify",
+    "docs:build": "rimraf ../../docs && pnpm docs:shapes && pnpm docs:spellcheck && pnpm docs:code && tsx scripts/docs.cli.mts",
+    "docs:shapes": "cd ../.. && tsx .esbuild/docs.ts",
+    "docs:verify": "pnpm docs:spellcheck && pnpm docs:code && tsx scripts/docs.cli.mts --verify",
    "docs:pre:vitepress": "pnpm --filter ./src/docs prefetch && rimraf src/vitepress && pnpm docs:code && tsx scripts/docs.cli.mts --vitepress && pnpm --filter ./src/vitepress install --no-frozen-lockfile --ignore-scripts",
    "docs:build:vitepress": "pnpm docs:pre:vitepress && (cd src/vitepress && pnpm run build) && cpy --flat src/docs/landing/ ./src/vitepress/.vitepress/dist/landing",
    "docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev\" \"tsx scripts/docs.cli.mts --watch --vitepress\"",
@@ -70,15 +71,14 @@
    "@braintree/sanitize-url": "^7.0.1",
    "@iconify/utils": "^2.1.32",
    "@mermaid-js/parser": "workspace:^",
-    "@types/d3": "^7.4.3",
    "cytoscape": "^3.29.2",
    "cytoscape-cose-bilkent": "^4.1.0",
    "cytoscape-fcose": "^2.2.0",
    "d3": "^7.9.0",
    "d3-sankey": "^0.12.3",
-    "dagre-d3-es": "7.0.11",
+    "dagre-d3-es": "7.0.10",
    "dayjs": "^1.11.10",
-    "dompurify": "^3.2.1",
+    "dompurify": "^3.0.11 <3.1.7",
    "katex": "^0.16.9",
    "khroma": "^2.1.0",
    "lodash-es": "^4.17.21",
@@ -93,11 +93,13 @@
    "@iconify/types": "^2.0.0",
    "@types/cytoscape": "^3.21.4",
    "@types/cytoscape-fcose": "^2.2.4",
+    "@types/d3": "^7.4.3",
    "@types/d3-sankey": "^0.12.4",
    "@types/d3-scale": "^4.0.8",
    "@types/d3-scale-chromatic": "^3.0.3",
    "@types/d3-selection": "^3.0.10",
    "@types/d3-shape": "^3.1.6",
+    "@types/dompurify": "^3.0.5",
    "@types/jsdom": "^21.1.6",
    "@types/katex": "^0.16.7",
    "@types/lodash-es": "^4.17.12",
--- a/packages/mermaid/scripts/docs.mts
+++ b/packages/mermaid/scripts/docs.mts
@@ -41,8 +41,7 @@ import { exec } from 'child_process';
 import { globby } from 'globby';
 import { JSDOM } from 'jsdom';
 import { dump, load, JSON_SCHEMA } from 'js-yaml';
-import type { Code, ListItem, PhrasingContent, Root, Text, YAML } from 'mdast';
-import { register } from 'node:module';
+import type { Code, ListItem, Root, Text, YAML } from 'mdast';
 import { posix, dirname, relative, join } from 'path';
 import prettier from 'prettier';
 import { remark } from 'remark';
@@ -54,10 +53,6 @@ import mm from 'micromatch';
 import flatmap from 'unist-util-flatmap';
 import { visit } from 'unist-util-visit';

-// short-circuit `.schema.yaml` imports, so that we can safely import `shapes.js`
-register('./loadHook.mjs', import.meta.url);
-const { shapesDefs } = await import('../src/rendering-util/rendering-elements/shapes.js');
-
 export const MERMAID_RELEASE_VERSION = JSON.parse(readFileSync('../mermaid/package.json', 'utf8'))
  .version as string;
 const MERMAID_MAJOR_VERSION = MERMAID_RELEASE_VERSION.split('.')[0];
@@ -108,60 +103,6 @@ const generateHeader = (file: string): string => {
 > ## Please edit the corresponding file in [${filePathFromRoot}](${sourcePathRelativeToGenerated}).`;
 };

-/**
- * Builds a markdown list of shapes supported in flowcharts.
- */
-export function buildShapeDoc() {
-  const data = shapesDefs
-    .sort((a, b) => a.semanticName.localeCompare(b.semanticName))
-    .map((shape): PhrasingContent[][] => {
-      const { name, semanticName, description, shortName, aliases = [] } = shape;
-      return [
-        [{ type: 'text', value: semanticName }],
-        [{ type: 'text', value: name }],
-        [{ type: 'inlineCode', value: shortName }],
-        [{ type: 'text', value: description }],
-        aliases.sort().flatMap((alias, index) => [
-          ...(index !== 0 ? ([{ type: 'text', value: ', ' }] as const) : []),
-          {
-            type: 'inlineCode',
-            value: alias,
-          },
-        ]),
-      ];
-    });
-
-  // don't prettify this table, since we'd do it later
-  return remark()
-    .use(remarkGfm)
-    .stringify({
-      type: 'root',
-      children: [
-        {
-          type: 'table',
-          children: [
-            ['Semantic Name', 'Shape Name', 'Short Name', 'Description', 'Alias Supported'].map(
-              (s): PhrasingContent[] => [
-                {
-                  type: 'strong',
-                  children: [{ type: 'text', value: s }],
-                },
-              ]
-            ),
-            ...data,
-          ].map((row) => ({
-            type: 'tableRow',
-            children: row.map((cell) => ({
-              type: 'tableCell',
-              children: cell,
-            })),
-          })),
-        },
-      ],
-    })
-    .toString();
-}
-
 /**
 * Given a source file name and path, return the documentation destination full path and file name
 * Create the destination path if it does not already exist.
@@ -251,22 +192,10 @@ export const transformToBlockQuote = (
 const injectPlaceholders = (text: string): string =>
  text.replace(/<MERMAID_VERSION>/g, MERMAID_MAJOR_VERSION).replace(/<CDN_URL>/g, CDN_URL);

-const virtualGenerators: Record<string, () => string> = {
-  shapesTable: buildShapeDoc,
-};
-
 const transformIncludeStatements = (file: string, text: string): string => {
  // resolve includes - src https://github.com/vuejs/vitepress/blob/428eec3750d6b5648a77ac52d88128df0554d4d1/src/node/markdownToVue.ts#L65-L76
-  return text.replace(includesRE, (m, m1: string) => {
+  return text.replace(includesRE, (m, m1) => {
    try {
-      if (m1.startsWith('virtual:')) {
-        const key = m1.replace('virtual:', '');
-        const generator = virtualGenerators[key];
-        if (!generator) {
-          throw new Error(`Unknown virtual generator: ${key} in "${file}"`);
-        }
-        return generator();
-      }
      const includePath = join(dirname(file), m1).replaceAll('\\', '/');
      const content = readSyncedUTF8file(includePath);
      includedFiles.add(changeToFinalDocDir(includePath));
--- a/packages/mermaid/scripts/docs.spec.ts
+++ b/packages/mermaid/scripts/docs.spec.ts
@@ -1,4 +1,4 @@
-import { buildShapeDoc, transformMarkdownAst, transformToBlockQuote } from './docs.mjs';
+import { transformMarkdownAst, transformToBlockQuote } from './docs.mjs';

 import { remark } from 'remark'; // import it this way so we can mock it
 import remarkFrontmatter from 'remark-frontmatter';
@@ -165,59 +165,4 @@ This Markdown should be kept.
      });
    });
  });
-
-  describe('buildShapeDoc', () => {
-    it('should build shapesTable based on the shapeDefs', () => {
-      expect(buildShapeDoc()).toMatchInlineSnapshot(`
-        "| **Semantic Name**                 | **Shape Name**         | **Short Name** | **Description**                | **Alias Supported**                                              |
-        | --------------------------------- | ---------------------- | -------------- | ------------------------------ | ---------------------------------------------------------------- |
-        | Card                              | Notched Rectangle      | \`notch-rect\`   | Represents a card              | \`card\`, \`notched-rectangle\`                                      |
-        | Collate                           | Hourglass              | \`hourglass\`    | Represents a collate operation | \`collate\`, \`hourglass\`                                           |
-        | Com Link                          | Lightning Bolt         | \`bolt\`         | Communication link             | \`com-link\`, \`lightning-bolt\`                                     |
-        | Comment                           | Curly Brace            | \`brace\`        | Adds a comment                 | \`brace-l\`, \`comment\`                                             |
-        | Comment Right                     | Curly Brace            | \`brace-r\`      | Adds a comment                 |                                                                  |
-        | Comment with braces on both sides | Curly Braces           | \`braces\`       | Adds a comment                 |                                                                  |
-        | Data Input/Output                 | Lean Right             | \`lean-r\`       | Represents input or output     | \`in-out\`, \`lean-right\`                                           |
-        | Data Input/Output                 | Lean Left              | \`lean-l\`       | Represents output or input     | \`lean-left\`, \`out-in\`                                            |
-        | Database                          | Cylinder               | \`cyl\`          | Database storage               | \`cylinder\`, \`database\`, \`db\`                                     |
-        | Decision                          | Diamond                | \`diam\`         | Decision-making step           | \`decision\`, \`diamond\`, \`question\`                                |
-        | Delay                             | Half-Rounded Rectangle | \`delay\`        | Represents a delay             | \`half-rounded-rectangle\`                                         |
-        | Direct Access Storage             | Horizontal Cylinder    | \`h-cyl\`        | Direct access storage          | \`das\`, \`horizontal-cylinder\`                                     |
-        | Disk Storage                      | Lined Cylinder         | \`lin-cyl\`      | Disk storage                   | \`disk\`, \`lined-cylinder\`                                         |
-        | Display                           | Curved Trapezoid       | \`curv-trap\`    | Represents a display           | \`curved-trapezoid\`, \`display\`                                    |
-        | Divided Process                   | Divided Rectangle      | \`div-rect\`     | Divided process shape          | \`div-proc\`, \`divided-process\`, \`divided-rectangle\`               |
-        | Document                          | Document               | \`doc\`          | Represents a document          | \`doc\`, \`document\`                                                |
-        | Event                             | Rounded Rectangle      | \`rounded\`      | Represents an event            | \`event\`                                                          |
-        | Extract                           | Triangle               | \`tri\`          | Extraction process             | \`extract\`, \`triangle\`                                            |
-        | Fork/Join                         | Filled Rectangle       | \`fork\`         | Fork or join in process flow   | \`join\`                                                           |
-        | Internal Storage                  | Window Pane            | \`win-pane\`     | Internal storage               | \`internal-storage\`, \`window-pane\`                                |
-        | Junction                          | Filled Circle          | \`f-circ\`       | Junction point                 | \`filled-circle\`, \`junction\`                                      |
-        | Lined Document                    | Lined Document         | \`lin-doc\`      | Lined document                 | \`lined-document\`                                                 |
-        | Lined/Shaded Process              | Lined Rectangle        | \`lin-rect\`     | Lined process shape            | \`lin-proc\`, \`lined-process\`, \`lined-rectangle\`, \`shaded-process\` |
-        | Loop Limit                        | Trapezoidal Pentagon   | \`notch-pent\`   | Loop limit step                | \`loop-limit\`, \`notched-pentagon\`                                 |
-        | Manual File                       | Flipped Triangle       | \`flip-tri\`     | Manual file operation          | \`flipped-triangle\`, \`manual-file\`                                |
-        | Manual Input                      | Sloped Rectangle       | \`sl-rect\`      | Manual input step              | \`manual-input\`, \`sloped-rectangle\`                               |
-        | Manual Operation                  | Trapezoid Base Top     | \`trap-t\`       | Represents a manual task       | \`inv-trapezoid\`, \`manual\`, \`trapezoid-top\`                       |
-        | Multi-Document                    | Stacked Document       | \`docs\`         | Multiple documents             | \`documents\`, \`st-doc\`, \`stacked-document\`                        |
-        | Multi-Process                     | Stacked Rectangle      | \`st-rect\`      | Multiple processes             | \`processes\`, \`procs\`, \`stacked-rectangle\`                        |
-        | Odd                               | Odd                    | \`odd\`          | Odd shape                      |                                                                  |
-        | Paper Tape                        | Flag                   | \`flag\`         | Paper tape                     | \`paper-tape\`                                                     |
-        | Prepare Conditional               | Hexagon                | \`hex\`          | Preparation or condition step  | \`hexagon\`, \`prepare\`                                             |
-        | Priority Action                   | Trapezoid Base Bottom  | \`trap-b\`       | Priority action                | \`priority\`, \`trapezoid\`, \`trapezoid-bottom\`                      |
-        | Process                           | Rectangle              | \`rect\`         | Standard process shape         | \`proc\`, \`process\`, \`rectangle\`                                   |
-        | Start                             | Circle                 | \`circle\`       | Starting point                 | \`circ\`                                                           |
-        | Start                             | Small Circle           | \`sm-circ\`      | Small starting point           | \`small-circle\`, \`start\`                                          |
-        | Stop                              | Double Circle          | \`dbl-circ\`     | Represents a stop point        | \`double-circle\`                                                  |
-        | Stop                              | Framed Circle          | \`fr-circ\`      | Stop point                     | \`framed-circle\`, \`stop\`                                          |
-        | Stored Data                       | Bow Tie Rectangle      | \`bow-rect\`     | Stored data                    | \`bow-tie-rectangle\`, \`stored-data\`                               |
-        | Subprocess                        | Framed Rectangle       | \`fr-rect\`      | Subprocess                     | \`framed-rectangle\`, \`subproc\`, \`subprocess\`, \`subroutine\`        |
-        | Summary                           | Crossed Circle         | \`cross-circ\`   | Summary                        | \`crossed-circle\`, \`summary\`                                      |
-        | Tagged Document                   | Tagged Document        | \`tag-doc\`      | Tagged document                | \`tag-doc\`, \`tagged-document\`                                     |
-        | Tagged Process                    | Tagged Rectangle       | \`tag-rect\`     | Tagged process                 | \`tag-proc\`, \`tagged-process\`, \`tagged-rectangle\`                 |
-        | Terminal Point                    | Stadium                | \`stadium\`      | Terminal point                 | \`pill\`, \`terminal\`                                               |
-        | Text Block                        | Text Block             | \`text\`         | Text block                     |                                                                  |
-        "
-      `);
-    });
-  });
 });
--- a/packages/mermaid/scripts/loadHook.mjs
+++ b/packages/mermaid/scripts/loadHook.mjs
@@ -1,22 +0,0 @@
-import { fileURLToPath } from 'node:url';
-/** @import import { LoadHook } from "node:module"; */
-/**
- * @type {LoadHook}
- *
- * Load hook that short circuits the loading of `.schema.yaml` files with `export default {}`.
- * These would normally be loaded using ESBuild, but that doesn't work for these local scripts.
- *
- * @see https://nodejs.org/api/module.html#loadurl-context-nextload
- */
-export const load = async (url, context, nextLoad) => {
-  const filePath = url.startsWith('file://') ? fileURLToPath(url) : url;
-  if (filePath.endsWith('.schema.yaml')) {
-    return {
-      format: 'module',
-      shortCircuit: true,
-      source: `export default {}`,
-    };
-  } else {
-    return await nextLoad(url, context);
-  }
-};
--- a/packages/mermaid/src/config.ts
+++ b/packages/mermaid/src/config.ts
@@ -230,7 +230,7 @@ const ConfigWarning = {
 } as const;

 type ConfigWarningStrings = keyof typeof ConfigWarning;
-const issuedWarnings: Partial<Record<ConfigWarningStrings, boolean>> = {};
+const issuedWarnings: { [key in ConfigWarningStrings]?: boolean } = {};
 const issueWarning = (warning: ConfigWarningStrings) => {
  if (issuedWarnings[warning]) {
    return;
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -193,7 +193,6 @@ export interface MermaidConfig {
  requirement?: RequirementDiagramConfig;
  architecture?: ArchitectureDiagramConfig;
  mindmap?: MindmapDiagramConfig;
-  kanban?: KanbanDiagramConfig;
  gitGraph?: GitGraphDiagramConfig;
  c4?: C4DiagramConfig;
  sankey?: SankeyDiagramConfig;
@@ -717,7 +716,6 @@ export interface ClassDiagramConfig extends BaseDiagramConfig {
   */
  diagramPadding?: number;
  htmlLabels?: boolean;
-  hideEmptyMembersBox?: boolean;
 }
 /**
 * The object containing configurations specific for entity relationship diagrams
@@ -1025,17 +1023,6 @@ export interface MindmapDiagramConfig extends BaseDiagramConfig {
  padding?: number;
  maxNodeWidth?: number;
 }
-/**
- * The object containing configurations specific for kanban diagrams
- *
- * This interface was referenced by `MermaidConfig`'s JSON-Schema
- * via the `definition` "KanbanDiagramConfig".
- */
-export interface KanbanDiagramConfig extends BaseDiagramConfig {
-  padding?: number;
-  sectionWidth?: number;
-  ticketBaseUrl?: string;
-}
 /**
 * This interface was referenced by `MermaidConfig`'s JSON-Schema
 * via the `definition` "GitGraphDiagramConfig".
--- a/packages/mermaid/src/defaultConfig.ts
+++ b/packages/mermaid/src/defaultConfig.ts
@@ -53,9 +53,6 @@ const config: RequiredDeep<MermaidConfig> = {
      };
    },
  },
-  class: {
-    hideEmptyMembersBox: false,
-  },
  gantt: {
    ...defaultConfigJson.gantt,
    tickInterval: undefined,
--- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts
+++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
@@ -19,7 +19,6 @@ import errorDiagram from '../diagrams/error/errorDiagram.js';
 import flowchartElk from '../diagrams/flowchart/elk/detector.js';
 import timeline from '../diagrams/timeline/detector.js';
 import mindmap from '../diagrams/mindmap/detector.js';
-import kanban from '../diagrams/kanban/detector.js';
 import sankey from '../diagrams/sankey/sankeyDetector.js';
 import { packet } from '../diagrams/packet/detector.js';
 import block from '../diagrams/block/blockDetector.js';
@@ -71,7 +70,6 @@ export const addDiagrams = () => {
  // Ordering of detectors is important. The first one to return true will be used.
  registerLazyLoadedDiagrams(
    c4,
-    kanban,
    classDiagramV2,
    classDiagram,
    er,
--- a/packages/mermaid/src/diagrams/architecture/architectureDb.ts
+++ b/packages/mermaid/src/diagrams/architecture/architectureDb.ts
@@ -13,7 +13,6 @@ import {
  setDiagramTitle,
 } from '../common/commonDb.js';
 import type {
-  ArchitectureAlignment,
  ArchitectureDB,
  ArchitectureDirectionPair,
  ArchitectureDirectionPairMap,
@@ -26,7 +25,6 @@ import type {
  ArchitectureState,
 } from './architectureTypes.js';
 import {
-  getArchitectureDirectionAlignment,
  getArchitectureDirectionPair,
  isArchitectureDirection,
  isArchitectureJunction,
@@ -213,18 +211,12 @@ const addEdge = function ({
 const getEdges = (): ArchitectureEdge[] => state.records.edges;

 /**
- * Returns the current diagram's adjacency list, spatial map, & group alignments.
+ * Returns the current diagram's adjacency list & spatial map.
 * If they have not been created, run the algorithms to generate them.
 * @returns
 */
 const getDataStructures = () => {
  if (state.records.dataStructures === undefined) {
-    // Tracks how groups are aligned with one another. Generated while creating the adj list
-    const groupAlignments: Record<
-      string,
-      Record<string, Exclude<ArchitectureAlignment, 'bend'>>
-    > = {};
-
    // Create an adjacency list of the diagram to perform BFS on
    // Outer reduce applied on all services
    // Inner reduce applied on the edges for a service
@@ -232,19 +224,6 @@ const getDataStructures = () => {
      Record<string, ArchitectureDirectionPairMap>
    >((prevOuter, [id, service]) => {
      prevOuter[id] = service.edges.reduce<ArchitectureDirectionPairMap>((prevInner, edge) => {
-        // track the direction groups connect to one another
-        const lhsGroupId = getNode(edge.lhsId)?.in;
-        const rhsGroupId = getNode(edge.rhsId)?.in;
-        if (lhsGroupId && rhsGroupId && lhsGroupId !== rhsGroupId) {
-          const alignment = getArchitectureDirectionAlignment(edge.lhsDir, edge.rhsDir);
-          if (alignment !== 'bend') {
-            groupAlignments[lhsGroupId] ??= {};
-            groupAlignments[lhsGroupId][rhsGroupId] = alignment;
-            groupAlignments[rhsGroupId] ??= {};
-            groupAlignments[rhsGroupId][lhsGroupId] = alignment;
-          }
-        }
-
        if (edge.lhsId === id) {
          // source is LHS
          const pair = getArchitectureDirectionPair(edge.lhsDir, edge.rhsDir);
@@ -266,7 +245,6 @@ const getDataStructures = () => {
    // Configuration for the initial pass of BFS
    const firstId = Object.keys(adjList)[0];
    const visited = { [firstId]: 1 };
-    // If a key is present in this object, it has not been visited
    const notVisited = Object.keys(adjList).reduce(
      (prev, id) => (id === firstId ? prev : { ...prev, [id]: 1 }),
      {} as Record<string, number>
@@ -305,7 +283,6 @@ const getDataStructures = () => {
    state.records.dataStructures = {
      adjList,
      spatialMaps,
-      groupAlignments,
    };
  }
  return state.records.dataStructures;
--- a/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts
+++ b/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts
@@ -12,9 +12,7 @@ import { setupGraphViewbox } from '../../setupGraphViewbox.js';
 import { getConfigField } from './architectureDb.js';
 import { architectureIcons } from './architectureIcons.js';
 import type {
-  ArchitectureAlignment,
  ArchitectureDataStructures,
-  ArchitectureGroupAlignments,
  ArchitectureJunction,
  ArchitectureSpatialMap,
  EdgeSingular,
@@ -151,91 +149,25 @@ function addEdges(edges: ArchitectureEdge[], cy: cytoscape.Core) {
  });
 }

-function getAlignments(
-  db: ArchitectureDB,
-  spatialMaps: ArchitectureSpatialMap[],
-  groupAlignments: ArchitectureGroupAlignments
-): fcose.FcoseAlignmentConstraint {
-  /**
-   * Flattens the alignment object so nodes in different groups will be in the same alignment array IFF their groups don't connect in a conflicting alignment
-   *
-   * i.e., two groups which connect horizontally should not have nodes with vertical alignments to one another
-   *
-   * See: #5952
-   *
-   * @param alignmentObj - alignment object with the outer key being the row/col # and the inner key being the group name mapped to the nodes on that axis in the group
-   * @param alignmentDir - alignment direction
-   * @returns flattened alignment object with an arbitrary key mapping to nodes in the same row/col
-   */
-  const flattenAlignments = (
-    alignmentObj: Record<number, Record<string, string[]>>,
-    alignmentDir: ArchitectureAlignment
-  ): Record<string, string[]> => {
-    return Object.entries(alignmentObj).reduce(
-      (prev, [dir, alignments]) => {
-        // prev is the mapping of x/y coordinate to an array of the nodes in that row/column
-        let cnt = 0;
-        const arr = Object.entries(alignments); // [group name, array of nodes within the group on axis dir]
-        if (arr.length === 1) {
-          // If only one group exists in the row/column, we don't need to do anything else
-          prev[dir] = arr[0][1];
-          return prev;
-        }
-        for (let i = 0; i < arr.length - 1; i++) {
-          for (let j = i + 1; j < arr.length; j++) {
-            const [aGroupId, aNodeIds] = arr[i];
-            const [bGroupId, bNodeIds] = arr[j];
-            const alignment = groupAlignments[aGroupId]?.[bGroupId]; // Get how the two groups are intended to align (undefined if they aren't)
-
-            if (alignment === alignmentDir) {
-              // If the intended alignment between the two groups is the same as the alignment we are parsing
-              prev[dir] ??= [];
-              prev[dir] = [...prev[dir], ...aNodeIds, ...bNodeIds]; // add the node ids of both groups to the axis array in prev
-            } else if (aGroupId === 'default' || bGroupId === 'default') {
-              // If either of the groups are in the default space (not in a group), use the same behavior as above
-              prev[dir] ??= [];
-              prev[dir] = [...prev[dir], ...aNodeIds, ...bNodeIds];
-            } else {
-              // Otherwise, the nodes in the two groups are not intended to align
-              const keyA = `${dir}-${cnt++}`;
-              prev[keyA] = aNodeIds;
-              const keyB = `${dir}-${cnt++}`;
-              prev[keyB] = bNodeIds;
-            }
-          }
-        }
-
-        return prev;
-      },
-      {} as Record<string, string[]>
-    );
-  };
-
+function getAlignments(spatialMaps: ArchitectureSpatialMap[]): fcose.FcoseAlignmentConstraint {
  const alignments = spatialMaps.map((spatialMap) => {
-    const horizontalAlignments: Record<number, Record<string, string[]>> = {};
-    const verticalAlignments: Record<number, Record<string, string[]>> = {};
-
+    const horizontalAlignments: Record<number, string[]> = {};
+    const verticalAlignments: Record<number, string[]> = {};
    // Group service ids in an object with their x and y coordinate as the key
    Object.entries(spatialMap).forEach(([id, [x, y]]) => {
-      const nodeGroup = db.getNode(id)?.in ?? 'default';
-
-      horizontalAlignments[y] ??= {};
-      horizontalAlignments[y][nodeGroup] ??= [];
-      horizontalAlignments[y][nodeGroup].push(id);
-
-      verticalAlignments[x] ??= {};
-      verticalAlignments[x][nodeGroup] ??= [];
-      verticalAlignments[x][nodeGroup].push(id);
+      if (!horizontalAlignments[y]) {
+        horizontalAlignments[y] = [];
+      }
+      if (!verticalAlignments[x]) {
+        verticalAlignments[x] = [];
+      }
+      horizontalAlignments[y].push(id);
+      verticalAlignments[x].push(id);
    });
-
    // Merge the values of each object into a list if the inner list has at least 2 elements
    return {
-      horiz: Object.values(flattenAlignments(horizontalAlignments, 'horizontal')).filter(
-        (arr) => arr.length > 1
-      ),
-      vert: Object.values(flattenAlignments(verticalAlignments, 'vertical')).filter(
-        (arr) => arr.length > 1
-      ),
+      horiz: Object.values(horizontalAlignments).filter((arr) => arr.length > 1),
+      vert: Object.values(verticalAlignments).filter((arr) => arr.length > 1),
    };
  });

@@ -312,8 +244,7 @@ function layoutArchitecture(
  junctions: ArchitectureJunction[],
  groups: ArchitectureGroup[],
  edges: ArchitectureEdge[],
-  db: ArchitectureDB,
-  { spatialMaps, groupAlignments }: ArchitectureDataStructures
+  { spatialMaps }: ArchitectureDataStructures
 ): Promise<cytoscape.Core> {
  return new Promise((resolve) => {
    const renderEl = select('body').append('div').attr('id', 'cy').attr('style', 'display:none');
@@ -387,8 +318,9 @@ function layoutArchitecture(
    addServices(services, cy);
    addJunctions(junctions, cy);
    addEdges(edges, cy);
+
    // Use the spatial map to create alignment arrays for fcose
-    const alignmentConstraint = getAlignments(db, spatialMaps, groupAlignments);
+    const alignmentConstraint = getAlignments(spatialMaps);

    // Create the relative constraints for fcose by using an inverse of the spatial map and performing BFS on it
    const relativePlacementConstraint = getRelativeConstraints(spatialMaps);
@@ -522,7 +454,7 @@ export const draw: DrawDefinition = async (text, id, _version, diagObj: Diagram)
  await drawServices(db, servicesElem, services);
  drawJunctions(db, servicesElem, junctions);

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

  await drawEdges(edgesElem, cy);
  await drawGroups(groupElem, cy);
--- a/packages/mermaid/src/diagrams/architecture/architectureTypes.ts
+++ b/packages/mermaid/src/diagrams/architecture/architectureTypes.ts
@@ -7,8 +7,6 @@ import type cytoscape from 'cytoscape';
 |       Architecture Diagram Types        |
 \*=======================================*/

-export type ArchitectureAlignment = 'vertical' | 'horizontal' | 'bend';
-
 export type ArchitectureDirection = 'L' | 'R' | 'T' | 'B';
 export type ArchitectureDirectionX = Extract<ArchitectureDirection, 'L' | 'R'>;
 export type ArchitectureDirectionY = Extract<ArchitectureDirection, 'T' | 'B'>;
@@ -106,7 +104,9 @@ export const isValidArchitectureDirectionPair = function (
  return x !== 'LL' && x !== 'RR' && x !== 'TT' && x !== 'BB';
 };

-export type ArchitectureDirectionPairMap = Partial<Record<ArchitectureDirectionPair, string>>;
+export type ArchitectureDirectionPairMap = {
+  [key in ArchitectureDirectionPair]?: string;
+};

 /**
 * Creates a pair of the directions of each side of an edge. This function should be used instead of manually creating it to ensure that the source is always the first character.
@@ -170,18 +170,6 @@ export const getArchitectureDirectionXYFactors = function (
  }
 };

-export const getArchitectureDirectionAlignment = function (
-  a: ArchitectureDirection,
-  b: ArchitectureDirection
-): ArchitectureAlignment {
-  if (isArchitectureDirectionXY(a, b)) {
-    return 'bend';
-  } else if (isArchitectureDirectionX(a)) {
-    return 'horizontal';
-  }
-  return 'vertical';
-};
-
 export interface ArchitectureStyleOptions {
  archEdgeColor: string;
  archEdgeArrowColor: string;
@@ -261,27 +249,9 @@ export interface ArchitectureDB extends DiagramDB {

 export type ArchitectureAdjacencyList = Record<string, ArchitectureDirectionPairMap>;
 export type ArchitectureSpatialMap = Record<string, number[]>;
-
-/**
- * Maps the direction that groups connect from.
- *
- * **Outer key**: ID of group A
- *
- * **Inner key**: ID of group B
- *
- * **Value**: 'vertical' or 'horizontal'
- *
- * Note: tmp[groupA][groupB] == tmp[groupB][groupA]
- */
-export type ArchitectureGroupAlignments = Record<
-  string,
-  Record<string, Exclude<ArchitectureAlignment, 'bend'>>
->;
-
 export interface ArchitectureDataStructures {
  adjList: ArchitectureAdjacencyList;
  spatialMaps: ArchitectureSpatialMap[];
-  groupAlignments: ArchitectureGroupAlignments;
 }

 export interface ArchitectureState extends Record<string, unknown> {
--- a/packages/mermaid/src/diagrams/class/classDb.ts
+++ b/packages/mermaid/src/diagrams/class/classDb.ts
--- a/packages/mermaid/src/diagrams/class/classDiagram-styles.spec.js
+++ b/packages/mermaid/src/diagrams/class/classDiagram-styles.spec.js
@@ -1,11 +1,9 @@
 import { parser } from './parser/classDiagram.jison';
-import { ClassDB } from './classDb.js';
+import classDb from './classDb.js';

 describe('class diagram, ', function () {
  describe('when parsing data from a classDiagram it', function () {
-    let classDb;
    beforeEach(function () {
-      classDb = new ClassDB();
      parser.yy = classDb;
      parser.yy.clear();
    });
@@ -15,7 +13,7 @@ describe('class diagram, ', function () {

      parser.parse(str);

-      expect(parser.yy.getClass('Class01').cssClasses).toBe('default exClass');
+      expect(parser.yy.getClass('Class01').cssClasses[0]).toBe('exClass');
    });

    it('should be possible to apply a css class to a class directly with struct', function () {
@@ -30,7 +28,7 @@ describe('class diagram, ', function () {
      parser.parse(str);

      const testClass = parser.yy.getClass('Class1');
-      expect(testClass.cssClasses).toBe('default exClass');
+      expect(testClass.cssClasses[0]).toBe('exClass');
    });

    it('should be possible to apply a css class to a class with relations', function () {
@@ -38,7 +36,7 @@ describe('class diagram, ', function () {

      parser.parse(str);

-      expect(parser.yy.getClass('Class01').cssClasses).toBe('default exClass');
+      expect(parser.yy.getClass('Class01').cssClasses[0]).toBe('exClass');
    });

    it('should be possible to apply a cssClass to a class', function () {
@@ -46,7 +44,7 @@ describe('class diagram, ', function () {

      parser.parse(str);

-      expect(parser.yy.getClass('Class01').cssClasses).toBe('default exClass');
+      expect(parser.yy.getClass('Class01').cssClasses[0]).toBe('exClass');
    });

    it('should be possible to apply a cssClass to a comma separated list of classes', function () {
@@ -55,8 +53,8 @@ describe('class diagram, ', function () {

      parser.parse(str);

-      expect(parser.yy.getClass('Class01').cssClasses).toBe('default exClass');
-      expect(parser.yy.getClass('Class02').cssClasses).toBe('default exClass');
+      expect(parser.yy.getClass('Class01').cssClasses[0]).toBe('exClass');
+      expect(parser.yy.getClass('Class02').cssClasses[0]).toBe('exClass');
    });
    it('should be possible to apply a style to an individual node', function () {
      const str =
@@ -71,47 +69,5 @@ describe('class diagram, ', function () {
      expect(styleElements[1]).toBe('stroke:#333');
      expect(styleElements[2]).toBe('stroke-width:4px');
    });
-    it('should be possible to define and assign a class inside the diagram', function () {
-      const str =
-        'classDiagram\n' + 'class Class01\n cssClass "Class01" pink\n classDef pink fill:#f9f';
-
-      parser.parse(str);
-
-      expect(parser.yy.getClass('Class01').cssClasses).toBe('default pink');
-    });
-    it('should be possible to define and assign a class using shorthand inside the diagram', function () {
-      const str = 'classDiagram\n' + 'class Class01:::pink\n classDef pink fill:#f9f';
-
-      parser.parse(str);
-
-      expect(parser.yy.getClass('Class01').cssClasses).toBe('default pink');
-    });
-    it('should properly assign styles from a class defined inside the diagram', function () {
-      const str =
-        'classDiagram\n' +
-        'class Class01:::pink\n classDef pink fill:#f9f,stroke:#333,stroke-width:6px';
-
-      parser.parse(str);
-
-      expect(parser.yy.getClass('Class01').styles).toStrictEqual([
-        'fill:#f9f',
-        'stroke:#333',
-        'stroke-width:6px',
-      ]);
-    });
-    it('should properly assign multiple classes and styles from classes defined inside the diagram', function () {
-      const str =
-        'classDiagram\n' +
-        'class Class01:::pink\n cssClass "Class01" bold\n classDef pink fill:#f9f\n classDef bold stroke:#333,stroke-width:6px';
-
-      parser.parse(str);
-
-      expect(parser.yy.getClass('Class01').styles).toStrictEqual([
-        'fill:#f9f',
-        'stroke:#333',
-        'stroke-width:6px',
-      ]);
-      expect(parser.yy.getClass('Class01').cssClasses).toBe('default pink bold');
-    });
  });
 });
--- a/packages/mermaid/src/diagrams/class/classDiagram-v2.ts
+++ b/packages/mermaid/src/diagrams/class/classDiagram-v2.ts
@@ -1,15 +1,13 @@
 import type { DiagramDefinition } from '../../diagram-api/types.js';
 // @ts-ignore: JISON doesn't support types
 import parser from './parser/classDiagram.jison';
-import { ClassDB } from './classDb.js';
+import db from './classDb.js';
 import styles from './styles.js';
-import renderer from './classRenderer-v3-unified.js';
+import renderer from './classRenderer-v2.js';

 export const diagram: DiagramDefinition = {
  parser,
-  get db() {
-    return new ClassDB();
-  },
+  db,
  renderer,
  styles,
  init: (cnf) => {
@@ -17,5 +15,6 @@ export const diagram: DiagramDefinition = {
      cnf.class = {};
    }
    cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+    db.clear();
  },
 };
--- a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
+++ b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
@@ -1,7 +1,6 @@
-/* eslint-disable @typescript-eslint/unbound-method -- Broken for Vitest mocks, see https://github.com/vitest-dev/eslint-plugin-vitest/pull/286 */
 // @ts-expect-error Jison doesn't export types
 import { parser } from './parser/classDiagram.jison';
-import { ClassDB } from './classDb.js';
+import classDb from './classDb.js';
 import { vi, describe, it, expect } from 'vitest';
 import type { ClassMap, NamespaceNode } from './classTypes.js';
 const spyOn = vi.spyOn;
@@ -11,9 +10,8 @@ const abstractCssStyle = 'font-style:italic;';

 describe('given a basic class diagram, ', function () {
  describe('when parsing class definition', function () {
-    let classDb: ClassDB;
    beforeEach(function () {
-      classDb = new ClassDB();
+      classDb.clear();
      parser.yy = classDb;
    });
    it('should handle classes within namespaces', () => {
@@ -248,7 +246,7 @@ describe('given a basic class diagram, ', function () {

      const c1 = classDb.getClass('C1');
      expect(c1.label).toBe('Class 1 with text label');
-      expect(c1.cssClasses).toBe('default styleClass');
+      expect(c1.cssClasses[0]).toBe('styleClass');
    });

    it('should parse a class with text label and css class', () => {
@@ -263,7 +261,7 @@ describe('given a basic class diagram, ', function () {
      const c1 = classDb.getClass('C1');
      expect(c1.label).toBe('Class 1 with text label');
      expect(c1.members[0].getDisplayDetails().displayText).toBe('int member1');
-      expect(c1.cssClasses).toBe('default styleClass');
+      expect(c1.cssClasses[0]).toBe('styleClass');
    });

    it('should parse two classes with text labels and css classes', () => {
@@ -278,11 +276,11 @@ describe('given a basic class diagram, ', function () {

      const c1 = classDb.getClass('C1');
      expect(c1.label).toBe('Class 1 with text label');
-      expect(c1.cssClasses).toBe('default styleClass');
+      expect(c1.cssClasses[0]).toBe('styleClass');

      const c2 = classDb.getClass('C2');
      expect(c2.label).toBe('Long long long long long long long long long long label');
-      expect(c2.cssClasses).toBe('default styleClass');
+      expect(c2.cssClasses[0]).toBe('styleClass');
    });

    it('should parse two classes with text labels and css class shorthands', () => {
@@ -295,11 +293,11 @@ describe('given a basic class diagram, ', function () {

      const c1 = classDb.getClass('C1');
      expect(c1.label).toBe('Class 1 with text label');
-      expect(c1.cssClasses).toBe('default styleClass1');
+      expect(c1.cssClasses[0]).toBe('styleClass1');

      const c2 = classDb.getClass('C2');
      expect(c2.label).toBe('Class 2 !@#$%^&*() label');
-      expect(c2.cssClasses).toBe('default styleClass2');
+      expect(c2.cssClasses[0]).toBe('styleClass2');
    });

    it('should parse multiple classes with same text labels', () => {
@@ -496,32 +494,10 @@ class C13["With Città foreign language"]
        ],
        methods: [],
        annotations: [],
-        cssClasses: 'default',
+        cssClasses: [],
      });

-      expect(classDb.getClasses().get('Student')).toMatchInlineSnapshot(`
-        {
-          "annotations": [],
-          "cssClasses": "default",
-          "domId": "classId-Student-141",
-          "id": "Student",
-          "label": "Student",
-          "members": [
-            ClassMember {
-              "classifier": "",
-              "id": "idCard : IdCard",
-              "memberType": "attribute",
-              "text": "\\-idCard : IdCard",
-              "visibility": "-",
-            },
-          ],
-          "methods": [],
-          "shape": "classBox",
-          "styles": [],
-          "text": "Student",
-          "type": "",
-        }
-      `);
+      expect(classDb.getClasses().size).toBe(3);
      expect(classDb.getRelations().length).toBe(2);
      expect(classDb.getRelations()).toMatchInlineSnapshot(`
        [
@@ -566,9 +542,8 @@ class C13["With Città foreign language"]
  });

  describe('when parsing class defined in brackets', function () {
-    let classDb: ClassDB;
    beforeEach(function () {
-      classDb = new ClassDB();
+      classDb.clear();
      parser.yy = classDb;
    });

@@ -659,9 +634,8 @@ class C13["With Città foreign language"]
  });

  describe('when parsing comments', function () {
-    let classDb: ClassDB;
    beforeEach(function () {
-      classDb = new ClassDB();
+      classDb.clear();
      parser.yy = classDb;
    });

@@ -750,9 +724,8 @@ foo()
  });

  describe('when parsing click statements', function () {
-    let classDb: ClassDB;
    beforeEach(function () {
-      classDb = new ClassDB();
+      classDb.clear();
      parser.yy = classDb;
    });
    it('should handle href link', function () {
@@ -765,7 +738,7 @@ foo()

      const actual = parser.yy.getClass('Class1');
      expect(actual.link).toBe('google.com');
-      expect(actual.cssClasses).toBe('default clickable');
+      expect(actual.cssClasses[0]).toBe('clickable');
    });

    it('should handle href link with tooltip', function () {
@@ -781,7 +754,7 @@ foo()
      const actual = parser.yy.getClass('Class1');
      expect(actual.link).toBe('google.com');
      expect(actual.tooltip).toBe('A Tooltip');
-      expect(actual.cssClasses).toBe('default clickable');
+      expect(actual.cssClasses[0]).toBe('clickable');
    });

    it('should handle href link with tooltip and target', function () {
@@ -800,7 +773,7 @@ foo()
      const actual = parser.yy.getClass('Class1');
      expect(actual.link).toBe('google.com');
      expect(actual.tooltip).toBe('A tooltip');
-      expect(actual.cssClasses).toBe('default clickable');
+      expect(actual.cssClasses[0]).toBe('clickable');
    });

    it('should handle function call', function () {
@@ -862,9 +835,8 @@ foo()
  });

  describe('when parsing annotations', function () {
-    let classDb: ClassDB;
    beforeEach(function () {
-      classDb = new ClassDB();
+      classDb.clear();
      parser.yy = classDb;
    });

@@ -927,9 +899,8 @@ foo()

 describe('given a class diagram with members and methods ', function () {
  describe('when parsing members', function () {
-    let classDb: ClassDB;
    beforeEach(function () {
-      classDb = new ClassDB();
+      classDb.clear();
      parser.yy = classDb;
    });

@@ -987,9 +958,8 @@ describe('given a class diagram with members and methods ', function () {
  });

  describe('when parsing method definition', function () {
-    let classDb: ClassDB;
    beforeEach(function () {
-      classDb = new ClassDB();
+      classDb.clear();
      parser.yy = classDb;
    });

@@ -1075,9 +1045,8 @@ describe('given a class diagram with members and methods ', function () {

 describe('given a class diagram with generics, ', function () {
  describe('when parsing valid generic classes', function () {
-    let classDb: ClassDB;
    beforeEach(function () {
-      classDb = new ClassDB();
+      classDb.clear();
      parser.yy = classDb;
    });

@@ -1189,9 +1158,8 @@ namespace space {

 describe('given a class diagram with relationships, ', function () {
  describe('when parsing basic relationships', function () {
-    let classDb: ClassDB;
    beforeEach(function () {
-      classDb = new ClassDB();
+      classDb.clear();
      parser.yy = classDb;
    });

@@ -1500,7 +1468,8 @@ describe('given a class diagram with relationships, ', function () {

      const testClass = parser.yy.getClass('Class1');
      expect(testClass.link).toBe('google.com');
-      expect(testClass.cssClasses).toBe('default clickable');
+      expect(testClass.cssClasses.length).toBe(1);
+      expect(testClass.cssClasses[0]).toBe('clickable');
    });

    it('should associate click and href link and css appropriately', function () {
@@ -1513,7 +1482,8 @@ describe('given a class diagram with relationships, ', function () {

      const testClass = parser.yy.getClass('Class1');
      expect(testClass.link).toBe('google.com');
-      expect(testClass.cssClasses).toBe('default clickable');
+      expect(testClass.cssClasses.length).toBe(1);
+      expect(testClass.cssClasses[0]).toBe('clickable');
    });

    it('should associate link with tooltip', function () {
@@ -1527,7 +1497,8 @@ describe('given a class diagram with relationships, ', function () {
      const testClass = parser.yy.getClass('Class1');
      expect(testClass.link).toBe('google.com');
      expect(testClass.tooltip).toBe('A tooltip');
-      expect(testClass.cssClasses).toBe('default clickable');
+      expect(testClass.cssClasses.length).toBe(1);
+      expect(testClass.cssClasses[0]).toBe('clickable');
    });

    it('should associate click and href link with tooltip', function () {
@@ -1541,7 +1512,8 @@ describe('given a class diagram with relationships, ', function () {
      const testClass = parser.yy.getClass('Class1');
      expect(testClass.link).toBe('google.com');
      expect(testClass.tooltip).toBe('A tooltip');
-      expect(testClass.cssClasses).toBe('default clickable');
+      expect(testClass.cssClasses.length).toBe(1);
+      expect(testClass.cssClasses[0]).toBe('clickable');
    });

    it('should associate click and href link with tooltip and target appropriately', function () {
@@ -1724,9 +1696,7 @@ class Class2
  });

  describe('when parsing classDiagram with text labels', () => {
-    let classDb: ClassDB;
    beforeEach(function () {
-      classDb = new ClassDB();
      parser.yy = classDb;
      parser.yy.clear();
    });
@@ -1800,7 +1770,8 @@ C1 -->  C2

      const c1 = classDb.getClass('C1');
      expect(c1.label).toBe('Class 1 with text label');
-      expect(c1.cssClasses).toBe('default styleClass');
+      expect(c1.cssClasses.length).toBe(1);
+      expect(c1.cssClasses[0]).toBe('styleClass');
      const member = c1.members[0];
      expect(member.getDisplayDetails().displayText).toBe('+member1');
    });
@@ -1816,7 +1787,8 @@ cssClass "C1" styleClass

      const c1 = classDb.getClass('C1');
      expect(c1.label).toBe('Class 1 with text label');
-      expect(c1.cssClasses).toBe('default styleClass');
+      expect(c1.cssClasses.length).toBe(1);
+      expect(c1.cssClasses[0]).toBe('styleClass');
      const member = c1.members[0];
      expect(member.getDisplayDetails().displayText).toBe('+member1');
    });
@@ -1833,11 +1805,13 @@ cssClass "C1,C2" styleClass

      const c1 = classDb.getClass('C1');
      expect(c1.label).toBe('Class 1 with text label');
-      expect(c1.cssClasses).toBe('default styleClass');
+      expect(c1.cssClasses.length).toBe(1);
+      expect(c1.cssClasses[0]).toBe('styleClass');

      const c2 = classDb.getClass('C2');
      expect(c2.label).toBe('Long long long long long long long long long long label');
-      expect(c2.cssClasses).toBe('default styleClass');
+      expect(c2.cssClasses.length).toBe(1);
+      expect(c2.cssClasses[0]).toBe('styleClass');
    });

    it('should parse two classes with text labels and css class shorthands', () => {
@@ -1851,11 +1825,13 @@ C1 --> C2

      const c1 = classDb.getClass('C1');
      expect(c1.label).toBe('Class 1 with text label');
-      expect(c1.cssClasses).toBe('default styleClass1');
+      expect(c1.cssClasses.length).toBe(1);
+      expect(c1.cssClasses[0]).toBe('styleClass1');

      const c2 = classDb.getClass('C2');
      expect(c2.label).toBe('Class 2 !@#$%^&*() label');
-      expect(c2.cssClasses).toBe('default styleClass2');
+      expect(c2.cssClasses.length).toBe(1);
+      expect(c2.cssClasses[0]).toBe('styleClass2');
    });

    it('should parse multiple classes with same text labels', () => {
@@ -1909,40 +1885,3 @@ class C13["With Città foreign language"]
    });
  });
 });
-
-describe('class db class', () => {
-  let classDb: ClassDB;
-  beforeEach(() => {
-    classDb = new ClassDB();
-  });
-  // This is to ensure that functions used in class JISON are exposed as function from ClassDB
-  it('should have functions used in class JISON as own property', () => {
-    const functionsUsedInParser = [
-      'addRelation',
-      'cleanupLabel',
-      'setAccTitle',
-      'setAccDescription',
-      'addClassesToNamespace',
-      'addNamespace',
-      'setCssClass',
-      'addMembers',
-      'addClass',
-      'setClassLabel',
-      'addAnnotation',
-      'addMember',
-      'addNote',
-      'defineClass',
-      'setDirection',
-      'relationType',
-      'lineType',
-      'setClickEvent',
-      'setTooltip',
-      'setLink',
-      'setCssStyle',
-    ] as const satisfies (keyof ClassDB)[];
-
-    for (const fun of functionsUsedInParser) {
-      expect(Object.hasOwn(classDb, fun)).toBe(true);
-    }
-  });
-});
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Sidharth Vinod	e1a71296fe	chore: Refactor nodes.js to remove global state	2024-10-04 00:22:56 +05:30
Sidharth Vinod	3f21f59f55	docs: Auto generate shape docs Not keen on how it's currently run, open to suggestions on better ways.	2024-10-04 00:07:04 +05:30
Sidharth Vinod	76557a628f	chore: Decouple build logic	2024-10-04 00:07:04 +05:30