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-10-03 22:29:38 +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
348 changed files with 8336 additions and 42035 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/hungry-guests-drive.md
+++ b/.changeset/hungry-guests-drive.md
@@ -1,5 +0,0 @@
---
-'@mermaid-js/layout-elk': patch
---
-
-fix: Updated offset calculations for diamond shape when handling intersections
--- 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/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/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
@@ -47,7 +46,6 @@ mdbook
 Mermerd
 mkdocs
 Nextra
-NODECOUNT
 nodenext
 npmjs
 pageview
@@ -59,7 +57,6 @@ presetAttributify
 pyplot
 redmine
 rehype
-RIGHTDOWN
 roughjs
 rscratch
 shiki
@@ -69,7 +66,6 @@ sphinxcontrib
 ssim
 stylis
 Swimm
-topdown
 tsbuildinfo
 tseslint
 Tuleap
--- 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/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@c36620d31ac7c881962c3d9dd939c40ec9434f2b # v3.26.12
+        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@c36620d31ac7c881962c3d9dd939c40ec9434f2b # v3.26.12
+        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@c36620d31ac7c881962c3d9dd939c40ec9434f2b # v3.26.12
+        uses: github/codeql-action/analyze@2c779ab0d087cd7fe7b826087247c2c81f27bfa6 # v3.26.5
--- 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@0da3c06ed8217b912deea9d8ee69630baed1737e # v6.7.6
-        with:
-          runTests: false
-      - name: Cypress run
-        uses: cypress-io/github-action@0da3c06ed8217b912deea9d8ee69630baed1737e # v6.7.6
-        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
@@ -7,9 +7,6 @@ on:
      - master
      - release/**
  pull_request:
-  issue_comment:
-    types:
-      - created
  merge_group:

 concurrency: ${{ github.workflow }}-${{ github.ref }}
@@ -31,12 +28,9 @@ env:
      ) || 
      github.event.before
    }}
-  # Check if this is a new comment with '/visual-test'
-  RUN_VISUAL_TEST: >-
-    ${{ github.event_name == 'issue_comment' && github.event.action == 'created' && contains(github.event.comment.body, '/visual-test') && github.event.issue.pull_request != null }}
+  shouldRunParallel: ${{ secrets.CYPRESS_RECORD_KEY != '' && !(github.event_name == 'push' && github.ref == 'refs/heads/develop') }}
 jobs:
  cache:
-    if: ${{ github.event_name != 'issue_comment' || contains(github.event.comment.body, '/visual-test') }}
    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
@@ -45,7 +39,7 @@ 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
@@ -65,7 +59,7 @@ jobs:

      - name: Install dependencies
        if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
-        uses: cypress-io/github-action@0da3c06ed8217b912deea9d8ee69630baed1737e # v6.7.6
+        uses: cypress-io/github-action@df7484c5ba85def7eef30db301afa688187bc378 # v6.7.2
        with:
          # just perform install
          runTests: false
@@ -86,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

@@ -94,7 +88,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'

@@ -107,7 +101,7 @@ jobs:
          key: ${{ runner.os }}-snapshots-${{ env.targetHash }}

      - name: Install dependencies
-        uses: cypress-io/github-action@0da3c06ed8217b912deea9d8ee69630baed1737e # v6.7.6
+        uses: cypress-io/github-action@df7484c5ba85def7eef30db301afa688187bc378 # v6.7.2
        with:
          runTests: false

@@ -123,8 +117,11 @@ jobs:
      # Install NPM dependencies, cache them correctly
      # and run all Cypress tests
      - name: Cypress run
-        uses: cypress-io/github-action@0da3c06ed8217b912deea9d8ee69630baed1737e # v6.7.6
+        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
@@ -132,19 +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:
-          # Only set Argos environment variables if the visual test comment trigger is present
-          ARGOS_TOKEN: ${{ env.RUN_VISUAL_TEST == 'true' && secrets.ARGOS_TOKEN || '' }}
-          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/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@3de3850952bec538fde60aac71731376e57b9b57 # v1.4.8
+        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@c36620d31ac7c881962c3d9dd939c40ec9434f2b # v3.26.12
+        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'
@@ -39,7 +39,6 @@ jobs:
          pnpm exec vitest run ./packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts --coverage

      - name: Verify out-of-tree build with TypeScript
-        if: ${{ github.repository == 'mermaid-js/mermaid' }}
        run: |
          pnpm test:check:tsc

--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -12,18 +12,18 @@
      "args": ["run", "${relativeFile}"],
      "smartStep": true,
      "console": "integratedTerminal"
+    },
+    {
+      "name": "Docs generation",
+      "type": "node",
+      "request": "launch",
+      "args": ["scripts/docs.cli.mts"],
+      // we'll need to change this to --import in Node.JS v20.6.0 and up
+      "runtimeArgs": ["--loader", "tsx/esm"],
+      "cwd": "${workspaceRoot}/packages/mermaid",
+      "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
+      "smartStep": true,
+      "internalConsoleOptions": "openOnSessionStart"
    }
-    // {
-    //   "name": "Docs generation",
-    //   "type": "node",
-    //   "request": "launch",
-    //   "args": ["scripts/docs.cli.mts"],
-    //   // we'll need to change this to --import in Node.JS v20.6.0 and up
-    //   "runtimeArgs": ["--loader", "tsx/esm"],
-    //   "cwd": "${workspaceRoot}/packages/mermaid",
-    //   "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
-    //   "smartStep": true,
-    //   "internalConsoleOptions": "openOnSessionStart"
-    // }
  ]
 }
--- a/Pulling-from-remote.md
+++ b/Pulling-from-remote.md
@@ -1,9 +0,0 @@
-Pulling from remote repo
-
-```
-git remote add os_repo git@github.com:mermaid-js/mermaid.git
-git pull os_repo main
-git pull os_repo
-git pull os_repo master
-git pull os_repo 5237-unified-layout-common-renderer
-```
--- 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).**
@@ -439,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,11 +21,7 @@ export default eyesPlugin(
        });
        // copy any needed variables from process.env to config.env
        config.env.useAppli = process.env.USE_APPLI ? true : false;
-        // only use Argos on CI in the mermaid-js/mermaid repository
-        config.env.useArgos =
-          !!process.env.CI &&
-          process.env.GITHUB_REPOSITORY === 'mermaid-js/mermaid' &&
-          !!process.env.ARGOS_TOKEN;
+        config.env.useArgos = !!process.env.CI;

        if (config.env.useArgos) {
          registerArgosTask(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/integration/rendering/stateDiagram-v2.spec.js
+++ b/cypress/integration/rendering/stateDiagram-v2.spec.js
@@ -460,7 +460,7 @@ stateDiagram-v2
    [*] --> State1
    State1 --> [*]
      `,
-      { state: { useMaxWidth: true }, look: 'classic' }
+      { state: { useMaxWidth: true } }
    );
    cy.get('svg').should((svg) => {
      expect(svg).to.have.attr('width', '100%');
@@ -482,7 +482,7 @@ stateDiagram-v2
    [*] --> State1
    State1 --> [*]
      `,
-      { state: { useMaxWidth: false }, look: 'classic' }
+      { state: { useMaxWidth: false } }
    );
    cy.get('svg').should((svg) => {
      // const height = parseFloat(svg.attr('height'));
--- a/cypress/integration/rendering/stateDiagram.spec.js
+++ b/cypress/integration/rendering/stateDiagram.spec.js
@@ -338,7 +338,7 @@ describe('State diagram', () => {
    [*] --> State1
    State1 --> [*]
      `,
-      { state: { useMaxWidth: true }, look: 'classic', theme: 'default' }
+      { state: { useMaxWidth: true } }
    );
    cy.get('svg').should((svg) => {
      expect(svg).to.have.attr('width', '100%');
@@ -361,7 +361,7 @@ describe('State diagram', () => {
    [*] --> State1
    State1 --> [*]
      `,
-      { state: { useMaxWidth: false }, look: 'classic', theme: 'default' }
+      { state: { useMaxWidth: false } }
    );
    cy.get('svg').should((svg) => {
      // const height = parseFloat(svg.attr('height'));
--- a/cypress/platform/ash.html
+++ b/cypress/platform/ash.html
@@ -1,221 +0,0 @@
-<html>
-  <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-
-    <style>
-      body {
-        /* background: rgb(221, 208, 208); */
-        /* background: #333; */
-        font-family: 'Arial';
-        /* font-size: 18px !important; */
-      }
-
-      h1 {
-        color: grey;
-      }
-
-      .mermaid2 {
-        display: none;
-      }
-
-      .mermaid svg {
-        /* font-size: 18px !important; */
-
-        /* background-color: #efefef;
-        background-image: radial-gradient(#fff 51%, transparent 91%),
-          radial-gradient(#fff 51%, transparent 91%);
-        background-size: 20px 20px;
-        background-position:
-          0 0,
-          10px 10px;
-        background-repeat: repeat; */
-      }
-
-      .malware {
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 150px;
-        background: red;
-        color: black;
-        display: flex;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-family: monospace;
-        font-size: 72px;
-      }
-
-      /* tspan {
-              font-size: 6px !important;
-            } */
-    </style>
-  </head>
-
-  <body>
-    <pre id="diagram" class="mermaid">
-flowchart
-   node
-   rounded(rounded)
-   id1([This is the text in the box])
-   id2((circle))
-   id3(((double circle)))
-   id4>Asymetrical]
-   id5{This is the text in the box}
-   id6{{This is the text in the box}}
-   id7[/This is the text in the box/]
-   id8[\This is the text in the box\]
-   A[/Christmas\]
-   B[\Christmas/]
-   sub[[subroutine]]
-   db[(Database)]
-    
-
-      </pre
-    >
-    <pre id="diagram" class="mermaid">
---
-config: 
-      theme: default
-      look: classic
---
-flowchart
-   node
-   rounded(rounded)
-   id1([This is the text in the box])
-   id2((circle))
-   id3(((double circle)))
-   id4>Asymetrical]
-   id5{This is the text in the box}
-   id6{{This is the text in the box}}
-   id7[/This is the text in the box/]
-   id8[\This is the text in the box\]
-   B[/Christmas\]
-   sub[[subroutine]]
-   db[(Database)]
-    
-
-            
-
-      </pre
-    >
-    <pre id="diagram" class="mermaid">
-stateDiagram
-    [*] --> Active
-    Active --> Inactive
-    Inactive --> Active
-    Active --> [*]
-    </pre>
-
-    <pre id="diagram" class="mermaid2">
-flowchart
-   a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a
-        a_a --> c --> d_d --> c_c
-        classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
-        class a_a apa;
-        click a_a "http://www.aftonbladet.se" "bookmark"
-        click c_c callback "new tooltip"
-      </pre
-    >
-    <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
-
-      
-    </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>
-
-    <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);
-      };
-      window.callback = function () {
-        alert('A callback was triggered');
-      };
-      mermaid.initialize({
-        theme: 'neo',
-        look: 'neo',
-        // handdrawnSeed: 12,
-        // look: 'handdrawn',
-        // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
-        // layout: 'dagre',
-        // layout: 'elk',
-        // layout: 'fixed',
-        // htmlLabels: false,
-        flowchart: { titleTopMargin: 10 },
-        // fontFamily: 'Caveat',
-        // fontFamily: 'Kalam',
-        // fontFamily: 'courier',
-        fontFamily: 'arial',
-        sequence: {
-          actorFontFamily: 'courier',
-          noteFontFamily: 'courier',
-          messageFontFamily: 'courier',
-        },
-        fontSize: 12,
-        logLevel: 0,
-        securityLevel: 'loose',
-      });
-      function callback() {
-        alert('It worked');
-      }
-      mermaid.parseError = function (err, hash) {
-        console.error('In parse error:');
-        console.error(err);
-      };
-    </script>
-  </body>
-</html>
--- a/cypress/platform/knsv-dark.html
+++ b/cypress/platform/knsv-dark.html
@@ -1,164 +0,0 @@
-<html>
-  <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-
-    <style>
-      body {
-        /* background: rgb(221, 208, 208); */
-        background: #333;
-        font-family: 'Arial';
-        /* font-size: 18px !important; */
-      }
-
-      h1 {
-        color: grey;
-      }
-
-      .mermaid2 {
-        display: none;
-      }
-
-      .mermaid svg {
-        /* font-size: 18px !important; */
-
-        /* background-color: #efefef;
-        background-image: radial-gradient(#fff 51%, transparent 91%),
-          radial-gradient(#fff 51%, transparent 91%);
-        background-size: 20px 20px;
-        background-position:
-          0 0,
-          10px 10px;
-        background-repeat: repeat; */
-      }
-
-      .malware {
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 150px;
-        background: red;
-        color: black;
-        display: flex;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-family: monospace;
-        font-size: 72px;
-      }
-
-      /* tspan {
-              font-size: 6px !important;
-            } */
-    </style>
-  </head>
-
-  <body>
-    <pre id="diagram" class="mermaid">
-flowchart
-      A --> B & C
-      subgraph apa
-        D --> E
-      end
-      </pre
-    >
-    <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
-
-
-    </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>
-
-    <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);
-      };
-      window.callback = function () {
-        alert('A callback was triggered');
-      };
-      mermaid.initialize({
-        theme: 'neo-dark',
-        // handdrawnSeed: 12,
-        look: 'neo',
-        // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
-        // layout: 'dagre',
-        // layout: 'elk',
-        // layout: 'fixed',
-        // htmlLabels: false,
-        flowchart: { titleTopMargin: 10 },
-        // fontFamily: 'Caveat',
-        // fontFamily: 'Kalam',
-        // fontFamily: 'courier',
-        fontFamily: 'arial',
-        sequence: {
-          actorFontFamily: 'courier',
-          noteFontFamily: 'courier',
-          messageFontFamily: 'courier',
-        },
-        fontSize: 12,
-        logLevel: 0,
-        securityLevel: 'loose',
-      });
-      function callback() {
-        alert('It worked');
-      }
-      mermaid.parseError = function (err, hash) {
-        console.error('In parse error:');
-        console.error(err);
-      };
-    </script>
-  </body>
-</html>
--- a/cypress/platform/knsv-pos.html
+++ b/cypress/platform/knsv-pos.html
@@ -1,206 +0,0 @@
-<html>
-  <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-
-    <style>
-      body {
-        /* background: rgb(221, 208, 208); */
-        /* background: #333; */
-        font-family: 'Arial';
-        /* font-size: 18px !important; */
-      }
-
-      h1 {
-        color: grey;
-      }
-
-      .mermaid2 {
-        display: none;
-      }
-
-      .mermaid svg {
-        /* font-size: 18px !important; */
-
-        /* background-color: #efefef;
-        background-image: radial-gradient(#fff 51%, transparent 91%),
-          radial-gradient(#fff 51%, transparent 91%);
-        background-size: 20px 20px;
-        background-position:
-          0 0,
-          10px 10px;
-        background-repeat: repeat; */
-      }
-
-      .malware {
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 150px;
-        background: red;
-        color: black;
-        display: flex;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-family: monospace;
-        font-size: 72px;
-      }
-
-      /* tspan {
-              font-size: 6px !important;
-            } */
-    </style>
-  </head>
-
-  <body>
-    <pre id="diagram" class="mermaid"></pre>
-
-    <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({
-        startOnLoad: false,
-        // look: 'handdrawn',
-        // layout: 'elk',
-        fontFamily: 'Kalam',
-        sequence: {
-          actorFontFamily: 'courier',
-          noteFontFamily: 'courier',
-          messageFontFamily: 'courier',
-        },
-        flowchart: {
-          // curve: 'cardinal',
-          // edgeDebug: true,
-        },
-        logLevel: 0,
-      });
-      mermaid.parseError = function (err, hash) {
-        console.error('In parse error:');
-        console.error(err);
-      };
-      let code = `---
-config:
-  state:
-    curve: line
---
-      stateDiagram
-        S:S
-        T:T
-        U:U
-        state Z {
-          state X {
-            Y:Ypsilon
-          }
-        }
-        A
-
-        S --> T: angrepp
-        T --> U
-        T --> V
-      C
-      D
-      E
-
-              `;
-      code = `
-flowchart TB
-    n3["Untitled Node"] --> n5["Untitled Node"] & n6["Untitled Node"] & n7["Untitled Node"] & n8["Untitled Node"] & n9["Untitled Node"]
-      `;
-
-      let positions = {
-        nodes: {
-          S: { x: 0, y: 0 },
-          T: { x: 100, y: 100, width: 100, height: 100 },
-          U: { x: 250, y: 260 },
-          V: { x: 300, y: 120 },
-          Z: { x: 300, y: 10, width: 160, height: 100 },
-          X: { x: 300, y: 20, width: 80, height: 60 },
-          Y: { x: 300, y: 30, width: 50, height: 20 },
-          A: { x: 300, y: 75, width: 20, height: 20 },
-        },
-        edges: {
-          edge0: {
-            points: [
-              { x: 0, y: 0 },
-              { x: 50, y: 0 },
-              { x: 100, y: 100 },
-            ],
-          },
-          edge1: {
-            // points: [
-            //   { x: 100, y: 100 },
-            //   { x: 200, y: 200 },
-            // ],
-            points: [
-              { x: 100, y: 100 },
-              { x: 150, y: 120 },
-              { x: 190.19453144073486, y: 120 },
-              { x: 190.19453144073486, y: 152.1556251525879 },
-              { x: 250, y: 152.1556251525879 },
-              { x: 250, y: 160 },
-            ],
-          },
-          edge2: {
-            points: [
-              { x: 100, y: 100 },
-              { x: 175, y: 80 },
-              { x: 200, y: 120 },
-              { x: 300, y: 100 },
-            ],
-          },
-        },
-      };
-
-      positions = JSON.parse(
-        '{"nodes":{"n3":{"x":360.885009765625,"y":7.677405834197998,"width":120.59375,"height":45.00000762939453},"n5":{"x":546.1309814453125,"y":190.24496459960938,"width":120.59375,"height":45},"n6":{"x":694.6719360351562,"y":167.00001525878906,"width":120.59375,"height":45},"n7":{"x":72.29684925079346,"y":167.00001525878906,"width":120.59370994567871,"height":45},"n8":{"x":250.27700805664062,"y":183.1090545654297,"width":120.59375,"height":45},"n9":{"x":393.2580871582031,"y":197.45834350585938,"width":120.59375,"height":45}},"edges":{"L_n3_n5_0":{"points":[{"x":383.71510673157036,"y":30.177409648895264},{"x":383.71510673157036,"y":98.96118712425232},{"x":523.300888350029,"y":98.96118712425232},{"x":523.300888350029,"y":167.74496459960938}],"start":"n3","end":"n5"},"L_n3_n6_1":{"points":[{"x":408.02337350122014,"y":30.177409648895264},{"x":408.02337350122014,"y":87.33871245384216},{"x":647.533580291497,"y":87.33871245384216},{"x":647.533580291497,"y":144.50001525878906}],"start":"n3","end":"n6"},"L_n3_n7_2":{"points":[{"x":320.12974762228504,"y":30.177409648895264},{"x":270.12974762228504,"y":87.33871245384216},{"x":113.05210448440184,"y":87.33871245384216},{"x":113.05210448440184,"y":144.50001525878906}],"start":"n3","end":"n7"},"L_n3_n8_3":{"points":[{"x":346.6989693425486,"y":30.177409648895264},{"x":346.6989693425486,"y":95.39323210716248},{"x":264.4630460745863,"y":95.39323210716248},{"x":264.4630460745863,"y":160.6090545654297}],"start":"n3","end":"n8"},"L_n3_n9_4":{"points":[{"x":364.7230894682698,"y":30.177409648895264},{"x":364.7230894682698,"y":102.56787657737732},{"x":389.42000810627434,"y":102.56787657737732},{"x":389.42000810627434,"y":174.95834350585938}],"start":"n3","end":"n9"}}}'
-      );
-
-      // console.log('positions:', positions);
-      const { svg } = await mermaid.render('the-id-of-the-svg', code, undefined, positions);
-      // if (window?.calcIntersections2) {
-      //   const int = await calcIntersections2(
-      //     { id: 'a', shape: 'rect', x: 100, y: 100, width: 100, height: 100 },
-      //     { id: 'a', shape: 'rect', x: 300, y: 100, width: 100, height: 100 }
-      //   );
-      //   console.log('Intersections', int);
-      // } else {
-      //   console.error('calcIntersections not found');
-      // }
-      // console.log(JSON.stringify(positions));
-      const elem = document.querySelector('#diagram');
-      elem.innerHTML = svg;
-    </script>
-  </body>
-</html>
--- a/cypress/platform/knsv-recursive.html
+++ b/cypress/platform/knsv-recursive.html
@@ -1,272 +0,0 @@
-<html>
-  <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Recursive:wght@300..1000&display=swap"
-      rel="stylesheet"
-    />
-
-    <style>
-      .recursive-500 {
-        font-family: 'Recursive', serif;
-        font-optical-sizing: auto;
-        font-weight: 500;
-        font-style: normal;
-        font-variation-settings:
-          'slnt' 0,
-          'CASL' 0,
-          'CRSV' 0.5,
-          'MONO' 0;
-      }
-      body {
-        /* background: rgb(221, 208, 208); */
-        /* background: #333; */
-        /* font-family: 'Arial'; */
-        font-family: 'Recursive', serif;
-        font-optical-sizing: auto;
-        font-weight: 500;
-        font-style: normal;
-        font-variation-settings:
-          'slnt' 0,
-          'CASL' 0,
-          'CRSV' 0.5,
-          'MONO' 0;
-        /* color: white; */
-        /* font-size: 18px !important; */
-      }
-      .gridify.tiny {
-        background-image: linear-gradient(
-            transparent 11px,
-            rgba(220, 220, 200, 0.8) 12px,
-            transparent 12px
-          ),
-          linear-gradient(90deg, transparent 11px, rgba(220, 220, 200, 0.8) 12px, transparent 12px);
-        background-size:
-          100% 12px,
-          12px 100%;
-      }
-
-      .gridify.dots {
-        background-image: radial-gradient(
-          circle at center,
-          rgba(220, 220, 200, 0.8) 1px,
-          transparent 1px
-        );
-        background-size: 24px 24px;
-      }
-
-      h1 {
-        color: grey;
-      }
-
-      .mermaid2 {
-        display: none;
-      }
-
-      .mermaid svg {
-        font-size: 16px !important;
-        font-family: 'Recursive', serif;
-        font-optical-sizing: auto;
-        font-weight: 500;
-        font-style: normal;
-        font-variation-settings:
-          'slnt' 0,
-          'CASL' 0,
-          'CRSV' 0.5,
-          'MONO' 0;
-      }
-
-      pre {
-        width: 100%;
-        /*box-shadow: 4px 4px 0px 0px #0000000F;*/
-      }
-    </style>
-  </head>
-
-  <body class="gridify dots">
-    <p class="mb-20">Test Diagram</p>
-    <div class="w-full h-64">
-      <pre id="diagram4" class="mermaid">
---
-config:
-  theme: neo
-  layout: dagre
---
-flowchart TD
-    A{"Diamond"} --- n1["Rectangle"] & n2["Rounded"] & n3(["Stadium"])
-    n1 --x n4["Rounded"]
-    n2 --o n5["Hexagon"]
-    n3 --> n6["Parallelogram"]
-    n5 o--o n7["Trapezoid"]
-    n4 x--x n8["Lean Right"]
-    n6 <--> n9(("Circle"))
-    n8 --> n10["Rose"]
-    n7 --> n11["Pine"]
-    n9 --> n12["Peach"]
-    n2@{ shape: rounded}
-    n4@{ shape: rounded}
-    n5@{ shape: hex}
-    n6@{ shape: lean-l}
-    n7@{ shape: trap-b}
-    n8@{ shape: lean-r}
-
-     n10:::Rose
-     n11:::Pine
-     n12:::Peach
-    classDef Rose stroke-width:1px, stroke-dasharray:none, stroke:#FF5978, fill:#FFDFE5, color:#8E2236
-    classDef Pine stroke-width:1px, stroke-dasharray:none, stroke:#254336, fill:#27654A, color:#FFFFFF
-    classDef Peach stroke-width:1px, stroke-dasharray:none, stroke:#FBB35A, fill:#FFEFDB, color:#8F632D
-    n10 --x End
-    n11 --x End
-    n12 --x End
-
-    </pre
-      >
-      <pre id="diagram4" class="mermaid">
---
-config:
-  look: classic
-  theme: forest
-  layout: dagre
---
-flowchart TD
-    A{"Diamond"} --- n1["Rectangle"] & n2["Rounded"] & n3(["Stadium"])
-    n1 --x n4["Rounded"]
-    n2 --o n5["Hexagon"]
-    n3 --> n6["Parallelogram"]
-    n5 o--o n7["Trapezoid"]
-    n4 x--x n8["Lean Right"]
-    n6 <--> n9(("Circle"))
-    n8 --> n10["Rose"]
-    n7 --> n11["Pine"]
-    n9 --> n12["Peach"]
-    n2@{ shape: rounded}
-    n4@{ shape: rounded}
-    n5@{ shape: hex}
-    n6@{ shape: lean-l}
-    n7@{ shape: trap-b}
-    n8@{ shape: lean-r}
-
-     n10:::Rose
-     n11:::Pine
-     n12:::Peach
-    classDef Rose stroke-width:1px, stroke-dasharray:none, stroke:#FF5978, fill:#FFDFE5, color:#8E2236
-    classDef Pine stroke-width:1px, stroke-dasharray:none, stroke:#254336, fill:#27654A, color:#FFFFFF
-    classDef Peach stroke-width:1px, stroke-dasharray:none, stroke:#FBB35A, fill:#FFEFDB, color:#8F632D
-    n10 --x End
-    n11 --x End
-    n12 --x End
-
-    </pre
-      >
-    </div>
-
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      import layouts from './mermaid-layout-elk.esm.mjs';
-
-      const staticBellIconPack = {
-        prefix: 'fa6-regular',
-        icons: {
-          bell: {
-            body: '<path fill="currentColor" d="M224 0c-17.7 0-32 14.3-32 32v19.2C119 66 64 130.6 64 208v25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416h400c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6c-28.3-35.5-43.8-79.6-43.8-125V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32m0 96c61.9 0 112 50.1 112 112v25.4c0 47.9 13.9 94.6 39.7 134.6H72.3c25.8-40 39.7-86.7 39.7-134.6V208c0-61.9 50.1-112 112-112m64 352H160c0 17 6.7 33.3 18.7 45.3S207 512 224 512s33.3-6.7 45.3-18.7S288 465 288 448"/>',
-            width: 448,
-          },
-        },
-        width: 512,
-        height: 512,
-      };
-
-      mermaid.registerIconPacks([
-        {
-          name: 'logos',
-          loader: () =>
-            fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()),
-        },
-        {
-          name: 'fa',
-          loader: () => staticBellIconPack,
-        },
-      ]);
-      mermaid.registerLayoutLoaders(layouts);
-      mermaid.parseError = function (err, hash) {
-        console.error('Mermaid error: ', err);
-      };
-      window.callback = function () {
-        alert('A callback was triggered');
-      };
-      function callback() {
-        alert('It worked');
-      }
-      await mermaid.initialize({
-        startOnLoad: false,
-        theme: 'redux',
-        // theme: 'default',
-        // theme: 'forest',
-        // handDrawnSeed: 12,
-        look: 'neo',
-        // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
-        // layout: 'dagre',
-        // layout: 'elk',
-        // layout: 'fixed',
-        // htmlLabels: false,
-        flowchart: { titleTopMargin: 10 },
-
-        // fontFamily: 'Caveat',
-        // fontFamily: 'Kalam',
-        // fontFamily: 'courier',
-        fontFamily: 'Recursive',
-        sequence: {
-          actorFontFamily: 'courier',
-          noteFontFamily: 'courier',
-          messageFontFamily: 'courier',
-        },
-        kanban: {
-          htmlLabels: false,
-        },
-        fontSize: 16,
-        logLevel: 0,
-        securityLevel: 'loose',
-        callback,
-      });
-      // setTimeout(() => {
-      mermaid.init(undefined, document.querySelectorAll('.mermaid'));
-      // }, 1000);
-      mermaid.parseError = function (err, hash) {
-        console.error('In parse error:');
-        console.error(err);
-      };
-    </script>
-  </body>
-</html>
--- a/cypress/platform/knsv-reset.html
+++ b/cypress/platform/knsv-reset.html
@@ -1,306 +0,0 @@
-<html>
-  <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-
-    <style>
-      body {
-        /* background: rgb(221, 208, 208); */
-        /* background: #333; */
-        font-family: 'Arial';
-        /* font-size: 18px !important; */
-      }
-
-      h1 {
-        color: grey;
-      }
-
-      .mermaid2 {
-        display: none;
-      }
-
-      .mermaid svg {
-        /* font-size: 18px !important; */
-
-        /* background-color: #efefef;
-        background-image: radial-gradient(#fff 51%, transparent 91%),
-          radial-gradient(#fff 51%, transparent 91%);
-        background-size: 20px 20px;
-        background-position:
-          0 0,
-          10px 10px;
-        background-repeat: repeat; */
-      }
-
-      .malware {
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 150px;
-        background: red;
-        color: black;
-        display: flex;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-family: monospace;
-        font-size: 72px;
-      }
-
-      /* tspan {
-              font-size: 6px !important;
-            } */
-    </style>
-  </head>
-
-  <body>
-    <pre id="diagram" class="mermaid"></pre>
-    <pre id="diagram2" class="mermaid"></pre>
-
-    <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.parseError = function (err, hash) {
-        console.error('In parse error:');
-        console.error(err);
-      };
-      let code = `
-      stateDiagram
-        S:S
-        T:T
-        U:U
-        state Z {
-          state X {
-            Y:Ypsilon
-          }
-        }
-        A
-
-        S --> T: angrepp
-        S --> T: angrepp
-        T --> U
-        Y --> V
-      C
-      D
-      E
-
-              `;
-      code = `
-flowchart TB
-    c1-->a2
-    subgraph one
-    a1-->a2
-    end
-    subgraph two
-    b1-->b2
-    end
-    subgraph three
-    c1-->c2
-    end
-
-              `;
-      //       code = `
-      // flowchart BT
-      // A
-      //     subgraph one
-      //     a1 --> a2
-      //     end
-      //     subgraph two
-      //       a3
-      //     end
-
-      //               `;
-      //       code = `
-      // flowchart TB
-      //     subgraph one
-      //     a1-->a2
-      //     end`;
-      // let positions = JSON.parse(
-      //   '{"nodes":{"S":{"x":30.78125,"y":43.5},"Y":{"x":127.94140625,"y":50}},"edges":{}}'
-      // );
-
-      function exctractPositions(svg) {
-        const positions = { nodes: {}, edges: {} };
-
-        // Extract the viewbox paddings - TOSDO: update in collab
-        const viewBox = svg.getAttribute('viewBox').split(' ');
-        const viewBoxX = parseFloat(viewBox[0]);
-        const viewBoxY = parseFloat(viewBox[1]);
-        // console.log('viewBox:', viewBoxX, viewBoxY);
-        svg.querySelectorAll('[data-et="node"]').forEach((node) => {
-          if (node.tagName === 'g') {
-            // console.log('node:', node);
-            const id = node.dataset.id;
-            const bbox = node.getBBox();
-            const transform = node.getAttribute('transform');
-            const x = parseFloat(transform.split(',')[0].split('(')[1]);
-            const y = parseFloat(transform.split(',')[1].split(')')[0]);
-
-            // Get the bounding rectangle of the element
-            const rect = node.getBoundingClientRect();
-
-            // Get the absolute position relative to the document
-            const absoluteX = rect.left + window.pageXOffset + viewBoxX;
-            const absoluteY = rect.top + window.pageYOffset + viewBoxY;
-
-            positions.nodes[id] = {
-              x: absoluteX + rect.width / 2,
-              y: absoluteY + rect.height / 2,
-              width: rect.width,
-              height: rect.height,
-            };
-          }
-        });
-        svg.querySelectorAll('[data-et="cluster"]').forEach((node) => {
-          // console.log('cluster:', node);
-          if (node.tagName === 'g') {
-            const id = node.dataset.id;
-            // console.log('cluster:', node);
-
-            const transform = node.getAttribute('transform');
-            const rect = node.getBoundingClientRect();
-
-            // Get the absolute position relative to the document
-            const absoluteX = rect.left + window.pageXOffset + viewBoxX;
-            const absoluteY = rect.top + window.pageYOffset + viewBoxY;
-
-            positions.nodes[id] = {
-              x: absoluteX + rect.width / 2,
-              y: absoluteY + rect.height / 2,
-              width: rect.width,
-              height: rect.height,
-            };
-          }
-        });
-        svg.querySelectorAll('[data-et="edge"]').forEach((edge) => {
-          // if (node.tagName === 'g') {
-          const path = edge.getBoundingClientRect();
-
-          // Get the absolute position relative to the document
-          const absoluteX = path.left + window.pageXOffset + viewBoxX;
-          const absoluteY = path.top + window.pageYOffset + viewBoxY;
-          console.log(
-            'absoluteX:',
-            absoluteX,
-            'absoluteY:',
-            absoluteY,
-            'offset',
-            window.pageXOffset
-          );
-          const id = edge.dataset.id;
-          const points = JSON.parse(atob(edge.dataset.points));
-          console.log('edge:', points, absoluteX, absoluteY);
-          let minX = 10000;
-          let minY = 10000;
-          points.forEach((point) => {
-            if (point.x < minX) {
-              minX = point.x;
-            }
-            if (point.y < minY) {
-              minY = point.y;
-            }
-          });
-          let dx = absoluteX - minX;
-          let dy = absoluteY - minY;
-          if (dx < 1) {
-            dx = 0;
-          }
-          if (dy < 1) {
-            dy = 0;
-          }
-          positions.edges[id] = {
-            points: points.map((point) => {
-              console.log('point:', point.y, absoluteY);
-              return {
-                x: point.x + dx,
-                y: point.y + dy,
-              };
-            }),
-          };
-          // }
-        });
-        return positions;
-      }
-
-      const mode = 'reset';
-      if (mode === 'reset') {
-        mermaid.initialize({
-          startOnLoad: false,
-          layout: 'elk',
-          fontFamily: 'Kalam',
-          sequence: {
-            actorFontFamily: 'courier',
-            noteFontFamily: 'courier',
-            messageFontFamily: 'courier',
-          },
-          logLevel: 5,
-        });
-        const { svg } = await mermaid.render('the-id-of-the-svg', code);
-        const elem = document.querySelector('#diagram');
-        elem.innerHTML = svg;
-        elem.classList.remove('mermaid');
-        const positions = exctractPositions(elem.firstChild);
-        // console.log('Positions:', JSON.stringify(positions));
-        const { svg: svg2 } = await mermaid.render(
-          'the-id-of-the-svg2',
-          '---\n  config:\n    layout: fixed\n---' + code,
-          undefined,
-          positions
-        );
-        // console.log('svg2', svg2);
-        const elem2 = document.querySelector('#diagram2');
-        elem2.innerHTML = svg2;
-      } else {
-        mermaid.initialize({
-          startOnLoad: false,
-          // look: 'handdrawn',
-          layout: 'fixed',
-          fontFamily: 'Kalam',
-          sequence: {
-            actorFontFamily: 'courier',
-            noteFontFamily: 'courier',
-            messageFontFamily: 'courier',
-          },
-          logLevel: 0,
-        });
-        const { svg } = await mermaid.render('the-id-of-the-svg', code, undefined, positions);
-
-        // console.log(JSON.stringify(positions));
-        const elem = document.querySelector('#diagram');
-        elem.innerHTML = svg;
-      }
-    </script>
-  </body>
-</html>
--- 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.1/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; */
      }

@@ -88,354 +83,353 @@
  </head>

  <body>
-    <pre id="diagram4" class="mermaid">
+    <div class="flex">
+      <pre id="diagram" class="mermaid2">
 ---
-config:
-  look: classic
-  theme: forest
-  layout: dagre
+  title: hello2
+  config:
+    look: handDrawn
+    layout: elk
+    elk:
+        <!-- nodePlacementStrategy: INTERACTIVE -->
+        <!-- mergeEdges: true -->
 ---
-flowchart LR
-    A["A"] --> C
-    B("B B B B B") --> C[/"C C C C C"/]
-    C@{ shape: circle }
-    %%C@{ shape: question }
-    C@{ shape: stadium }
-    </pre>
-    <pre id="diagram4" class="mermaid">
---
-config:
-  look: classic
-  layout: elk
---
-flowchart LR
-    n1["n1"] --- C
-    B("Continue") --> C[/"Evaluate"/]
-    C -- One --> D["Option 1"]
-    C -- Two --> E["Option 2"]
-    C -- Three --> F["fa:fa-car Option 3"]
-    C@{ shape: db }
-    </pre>
-    <pre id="diagram4" class="mermaid2">
---
-config:
-  layout: elk
---
-flowchart LR
- %% subgraph s1["Untitled subgraph"]
-        C{"Evaluate"}
- %% end
+stateDiagram-v2
+    direction LR
+    accTitle: An idealized Open Source supply-chain graph

-    B --> C
-    </pre>
-    <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
+
+    %%
+    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:
  look: neo
-  layout: elk
 ---
-flowchart LR
-%% A ==> B
-%% A2 --> B2
-      D --> I((I the Circle))
-            D --> I
-    </pre>
-    <pre id="diagram4" class="mermaid2">
---
-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 --> E --> I
-
-      end
-    </pre>
-    <pre id="diagram4" class="mermaid2">
---
-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
-    </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);
@@ -445,8 +439,6 @@ kanban
      };
      mermaid.initialize({
        // theme: 'base',
-        // theme: 'default',
-        theme: 'forest',
        // handDrawnSeed: 12,
        // look: 'handDrawn',
        // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
@@ -454,7 +446,7 @@ kanban
        // layout: 'elk',
        // layout: 'fixed',
        // htmlLabels: false,
-        flowchart: { titleTopMargin: 10, useMaxWidth: false },
+        flowchart: { titleTopMargin: 10 },
        // fontFamily: 'Caveat',
        // fontFamily: 'Kalam',
        // fontFamily: 'courier',
@@ -463,11 +455,8 @@ kanban
          noteFontFamily: 'courier',
          messageFontFamily: 'courier',
        },
-        kanban: {
-          htmlLabels: false,
-        },
        fontSize: 12,
-        logLevel: 0,
+        logLevel: 3,
        securityLevel: 'loose',
      });
      function callback() {
--- a/cypress/platform/knsv3.html
+++ b/cypress/platform/knsv3.html
@@ -1,173 +1,103 @@
-<html>
+<!doctype html>
+<html lang="en">
  <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Mindmap Mermaid Quick Test Page</title>
+    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
    <style>
-      body {
-        /* background: rgb(221, 208, 208); */
-        /* background: #333; */
-        font-family: 'Arial';
-        /* color: white; */
-        /* font-size: 18px !important; */
+      div.mermaid {
+        /* font-family: 'trebuchet ms', verdana, arial; */
+        font-family: 'Courier New', Courier, monospace !important;
      }
-
-      h1 {
-        color: grey;
-      }
-
-      .mermaid2 {
-        display: none;
-      }
-
-      .mermaid svg {
-        /* font-size: 18px !important; */
-
-        /* background-color: #efefef;
-        background-image: radial-gradient(#fff 51%, transparent 91%),
-          radial-gradient(#fff 51%, transparent 91%);
-        background-size: 20px 20px;
-        background-position:
-          0 0,
-          10px 10px;
-        background-repeat: repeat; */
-      }
-
-      .malware {
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 150px;
-        background: red;
-        color: black;
-        display: flex;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-family: monospace;
-        font-size: 72px;
-      }
-      pre {
-        width: 100%;
-      }
-      /* tspan {
-              font-size: 6px !important;
-            } */
    </style>
  </head>

  <body>
-    <div class="flex gap-4">
-      <pre id="diagram4" class="mermaid">
---
-config:
-  look: classic
-  theme: forest
-  layout: elk
---
-flowchart LR
-    n1["n1"] --> C
-    n2("n2") --> C
-    C@{ shape: circle }
-    </pre
-      >
-      <pre id="diagram4" class="mermaid">
---
-config:
-  look: neo
-  theme: redux
-  layout: elk
---
-flowchart LR
-    n1["n1"] --> C
-    n2("n2") --> C
-    C@{ shape: circle }
-    </pre
-      >
-      <pre id="diagram4" class="mermaid">
---
-config:
-  look: handDrawn
-  theme: forest
-  layout: elk
---
-flowchart LR
-    n1["n1"] --> C
-    n2("n2") --> C
-    C@{ shape: circle }
-    </pre
-      >
-    </div>
+    <h1>Mindmap diagram demo</h1>
+    <pre class="mermaid">
+        mindmap
+        root
+            child1((Circle))
+                grandchild 1
+                grandchild 2
+            child2(Round rectangle)
+                grandchild 3
+                grandchild 4
+            child3[Square]
+                grandchild 5
+                ::icon(mdi mdi-fire)
+                gc6((grand<br/>child 6))
+                ::icon(mdi mdi-fire)
+                gc7((grand<br/>grand<br/>child 8))
+    </pre>
+
+    <h2>Mindmap with root wrapping text and a shape</h2>
+    <pre class="mermaid">
+        mindmap
+            root[A root with a long text that wraps to keep the node size in check]
+    </pre>
+
    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      import layouts from './mermaid-layout-elk.esm.mjs';
+      // import mermaid from './mermaid.esm.mjs';
+      import mermaid from '../../packages/mermaid/dist/mermaid.esm.mjs';
+      // import mermaidMindmap from './mermaid-mindmap.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,
-      };
+      // import mermaidMindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9.3.0/+esm';
+      // await mermaid.registerExternalDiagrams([mermaidMindmap]);

-      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);
+      const ALLOWED_TAGS = [
+        'a',
+        'b',
+        'blockquote',
+        'br',
+        'dd',
+        'div',
+        'dl',
+        'dt',
+        'em',
+        'foreignObject',
+        'h1',
+        'h2',
+        'h3',
+        'h4',
+        'h5',
+        'h6',
+        'h7',
+        'h8',
+        'hr',
+        'i',
+        'li',
+        'ul',
+        'ol',
+        'p',
+        'pre',
+        'span',
+        'strike',
+        'strong',
+        'table',
+        'tbody',
+        'td',
+        'tfoot',
+        'th',
+        'thead',
+        'tr',
+      ];
      mermaid.parseError = function (err, hash) {
-        console.error('Mermaid error: ', err);
-      };
-      window.callback = function () {
-        alert('A callback was triggered');
+        // console.error('Mermaid error: ', err);
      };
      mermaid.initialize({
-        flowchart: { titleTopMargin: 10, useMaxWidth: false },
-        fontSize: 12,
+        theme: 'base',
+        startOnLoad: true,
        logLevel: 0,
-        securityLevel: 'loose',
+        flowchart: {
+          useMaxWidth: false,
+          htmlLabels: true,
+        },
+        gantt: {
+          useMaxWidth: false,
+        },
+        useMaxWidth: false,
      });
      function callback() {
        alert('It worked');
--- a/cypress/platform/min-size-tester.html
+++ b/cypress/platform/min-size-tester.html
@@ -1,171 +0,0 @@
-<html>
-  <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-
-    <style>
-      body {
-        font-family: 'Arial';
-        background-color: #333;
-      }
-
-      h3 {
-        color: white;
-      }
-    </style>
-  </head>
-
-  <body>
-    <div class="flex w-full">
-      <div id="diagram-fixed"></div>
-      <div id="diagram-normal"></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({
-        startOnLoad: false,
-        //look: 'handdrawn',
-        // layout: 'fixed',
-        theme: 'neo-dark',
-        //layout: 'elk',
-        fontFamily: 'Kalam',
-        logLevel: 1,
-      });
-
-      // let shape = 'rect';    // Done
-      //let shape = 'rounded';  // Done
-      //let shape = 'stadium';  // Done
-      // let shape = 'fr-rect'; // Done
-      // let shape = 'cyl'; // Done
-      //let shape = 'circle'; // Done
-      // let shape = 'odd'; // Done
-      // let shape = 'diam'; //Done
-      // let shape = 'hex'; // Done
-      // let shape = 'lean-r'; // Done
-      // let shape = 'lean-l'; // Done
-      // let shape = 'trap-b'; // Done
-      // let shape = 'trap-t'; // Done
-      // let shape = 'dbl-circ'; // Done
-      // let shape = 'text'; // Done
-      // let shape = 'notch-rect'; // Done
-      // let shape = 'lin-rect'; // Done
-      //let shape = 'sm-circ'; // Done
-      // let shape = 'fr-circ'; //Done
-      //let shape = 'fork'; // Done
-      //let shape = 'hourglass'; //Done
-      // let shape = 'bolt'; //Done
-      // let shape = 'doc'; // Done
-      // let shape = 'delay'; // Done
-      // let shape = 'h-cyl'; // Done
-      // let shape = 'lin-cyl'; // Done
-      // let shape = 'curv-trap'; // Done
-      // let shape = 'div-rect'; // Done
-      //let shape = 'tri'; // Done
-      // let shape = 'win-pane'; //Done
-      // let shape = 'f-circ'; // Done
-      // let shape = 'lin-doc'; // Done
-      // let shape = 'notch-pent'; // Done
-      // let shape = 'flip-tri'; // Done
-      // let shape = 'sl-rect'; // Done
-      // let shape = 'cross-circ'; // Done
-      // let shape = 'bow-rect'; // Done
-      // let shape = 'st-rect'; // Done
-
-      // let shape = 'flag';
-
-      // let shape = 'docs';
-      // let shape = 'brace';
-      // let shape = 'brace-r';
-      // let shape = 'braces';
-      // let shape = 'tag-doc';
-
-      let configFixed = `---
-config:
-  layout: fixed
---
-      `;
-      let code = `flowchart TB
-                %% n80["APA ksldj hfaskljdh aklsjdhf klasjdhf klasjhf klsajdh klasjdhf klasjdhf klasjdh klasjhf klasjdh klajsdhfklasjdhf kljadh fklasjdhf klajsdhf lkasdhf klajsdhf klasjdhfklasjdh klasjhf klasdfh klasdfh aklsjfh akjshkasldfh klasdfh klasjh fklsjhf klasdhf kljasdhf klasdhf klj"]
-                %% n80@{ shape: '${shape}'}
-                n81@{ label: "Ashish", shape: '${shape}'}
-                %%n82@{ label: "n82", shape: '${shape}'}
-                %%n83@{ label: "n83", shape: '${shape}'}
-                `;
-
-      let positions = {
-        edges: {},
-        nodes: {
-          n81: {
-            x: 0,
-            y: 10,
-            width: 107.7,
-            height: 65,
-          },
-          n80: {
-            x: -400,
-            y: 10,
-            width: 1,
-            height: 1,
-          },
-          n82: {
-            x: 0,
-            y: 110,
-          },
-          n83: {
-            x: 80,
-            y: 10,
-          },
-          n84: {
-            x: 1200,
-            y: 10,
-            width: 300,
-            height: 200,
-          },
-        },
-      };
-      console.log(configFixed + code);
-      const { svg } = await mermaid.render(
-        'the-id-of-the-svg-1',
-        configFixed + code,
-        undefined,
-        positions
-      );
-      const elem = document.querySelector('#diagram-fixed');
-      elem.innerHTML = svg;
-      const { svg: svg2 } = await mermaid.render('the-id-of-the-svg-2', code, undefined, positions);
-      const elem2 = document.querySelector('#diagram-normal');
-      elem2.innerHTML = svg2;
-    </script>
-  </body>
-</html>
--- a/cypress/platform/neo-test.html
+++ b/cypress/platform/neo-test.html
--- a/cypress/platform/omkarht-new-padding.html
+++ b/cypress/platform/omkarht-new-padding.html
@@ -1,248 +0,0 @@
-<html>
-  <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Recursive:wght@300..1000&display=swap"
-      rel="stylesheet"
-    />
-
-    <style>
-      .recursive-500 {
-        font-family: 'Recursive', serif;
-        font-optical-sizing: auto;
-        font-weight: 500;
-        font-style: normal;
-        font-variation-settings:
-          'slnt' 0,
-          'CASL' 0,
-          'CRSV' 0.5,
-          'MONO' 0;
-      }
-      body {
-        /* background: rgb(221, 208, 208); */
-        /* background: #333; */
-        /* font-family: 'Arial'; */
-        font-family: 'Recursive', serif;
-        font-optical-sizing: auto;
-        font-weight: 500;
-        font-style: normal;
-        font-variation-settings:
-          'slnt' 0,
-          'CASL' 0,
-          'CRSV' 0.5,
-          'MONO' 0;
-        /* color: white; */
-        /* font-size: 18px !important; */
-      }
-      .gridify.tiny {
-        background-image: linear-gradient(
-            transparent 11px,
-            rgba(220, 220, 200, 0.8) 12px,
-            transparent 12px
-          ),
-          linear-gradient(90deg, transparent 11px, rgba(220, 220, 200, 0.8) 12px, transparent 12px);
-        background-size:
-          100% 12px,
-          12px 100%;
-      }
-
-      .gridify.dots {
-        background-image: radial-gradient(
-          circle at center,
-          rgba(220, 220, 200, 0.8) 1px,
-          transparent 1px
-        );
-        background-size: 24px 24px;
-      }
-
-      h1 {
-        color: grey;
-      }
-
-      .mermaid2 {
-        display: none;
-      }
-
-      .mermaid svg {
-        font-size: 16px !important;
-        font-family: 'Recursive', serif;
-        font-optical-sizing: auto;
-        font-weight: 500;
-        font-style: normal;
-        font-variation-settings:
-          'slnt' 0,
-          'CASL' 0,
-          'CRSV' 0.5,
-          'MONO' 0;
-      }
-
-      pre {
-        width: 100%;
-        /*box-shadow: 4px 4px 0px 0px #0000000F;*/
-      }
-    </style>
-  </head>
-
-  <body class="gridify dots">
-    <p class="mb-20">Test Diagram</p>
-    <div class="w-full h-64">
-      <pre style="display: none">
---
-config:
-  theme: neo
-  layout: dagre
---
-flowchart TD
-    A{"Cylinder"} --- n1["Rectangle"] & n2["Rounded"] & n3(["Stadium"])
-    n1 --x n4["Rounded"]
-    n2 --o n5["Hexagon"]
-    n3 --> n6["Parallelogram"]
-    n5 o--o n7["Trapezoid"]
-    n4 x--x n8["Lean Right"]
-    n6 <--> n9(("Circle"))
-    n8 --> n10["Rose"]
-    n7 --> n11["Pine"]
-    n9 --> n12["Peach"]
-    n2@{ shape: rounded}
-    n4@{ shape: rounded}
-    n5@{ shape: hex}
-    n6@{ shape: lean-l}
-    n7@{ shape: trap-b}
-    n8@{ shape: lean-r}
-
-     n10:::Rose
-     n11:::Pine
-     n12:::Peach
-    classDef Rose stroke-width:1px, stroke-dasharray:none, stroke:#FF5978, fill:#FFDFE5, color:#8E2236
-    classDef Pine stroke-width:1px, stroke-dasharray:none, stroke:#254336, fill:#27654A, color:#FFFFFF
-    classDef Peach stroke-width:1px, stroke-dasharray:none, stroke:#FBB35A, fill:#FFEFDB, color:#8F632D
-    n10 --x End
-    n11 --x End
-    n12 --x End
-
-    </pre
-      >
-
-      <pre id="diagram4" class="mermaid">
-        ---
-        config:
-          theme: neo
-          layout: dagre
-        ---
-        flowchart TD
-        n1["Cylinder"]
-        n1@{ shape: database}
-        
-            </pre
-      >
-    </div>
-
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      import layouts from './mermaid-layout-elk.esm.mjs';
-
-      const staticBellIconPack = {
-        prefix: 'fa6-regular',
-        icons: {
-          bell: {
-            body: '<path fill="currentColor" d="M224 0c-17.7 0-32 14.3-32 32v19.2C119 66 64 130.6 64 208v25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416h400c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6c-28.3-35.5-43.8-79.6-43.8-125V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32m0 96c61.9 0 112 50.1 112 112v25.4c0 47.9 13.9 94.6 39.7 134.6H72.3c25.8-40 39.7-86.7 39.7-134.6V208c0-61.9 50.1-112 112-112m64 352H160c0 17 6.7 33.3 18.7 45.3S207 512 224 512s33.3-6.7 45.3-18.7S288 465 288 448"/>',
-            width: 448,
-          },
-        },
-        width: 512,
-        height: 512,
-      };
-
-      mermaid.registerIconPacks([
-        {
-          name: 'logos',
-          loader: () =>
-            fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()),
-        },
-        {
-          name: 'fa',
-          loader: () => staticBellIconPack,
-        },
-      ]);
-      mermaid.registerLayoutLoaders(layouts);
-      mermaid.parseError = function (err, hash) {
-        console.error('Mermaid error: ', err);
-      };
-      window.callback = function () {
-        alert('A callback was triggered');
-      };
-      function callback() {
-        alert('It worked');
-      }
-      await mermaid.initialize({
-        startOnLoad: false,
-        theme: 'redux',
-        // theme: 'default',
-        // theme: 'forest',
-        // handDrawnSeed: 12,
-        look: 'neo',
-        // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
-        // layout: 'dagre',
-        // layout: 'elk',
-        // layout: 'fixed',
-        // htmlLabels: false,
-        flowchart: { titleTopMargin: 10 },
-
-        // fontFamily: 'Caveat',
-        // fontFamily: 'Kalam',
-        // fontFamily: 'courier',
-        fontFamily: 'Recursive',
-        sequence: {
-          actorFontFamily: 'courier',
-          noteFontFamily: 'courier',
-          messageFontFamily: 'courier',
-        },
-        kanban: {
-          htmlLabels: false,
-        },
-        fontSize: 16,
-        logLevel: 0,
-        securityLevel: 'loose',
-        callback,
-      });
-      // setTimeout(() => {
-      mermaid.init(undefined, document.querySelectorAll('.mermaid'));
-      // }, 1000);
-      mermaid.parseError = function (err, hash) {
-        console.error('In parse error:');
-        console.error(err);
-      };
-    </script>
-  </body>
-</html>
--- a/cypress/platform/per.html
+++ b/cypress/platform/per.html
@@ -4,60 +4,28 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
-      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
      rel="stylesheet"
    />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-
    <style>
      body {
        /* background: rgb(221, 208, 208); */
-        /* background: #333; */
+        /* background:#333; */
        font-family: 'Arial';
        /* font-size: 18px !important; */
      }
-
      h1 {
        color: grey;
      }
-
      .mermaid2 {
        display: none;
      }
-
      .mermaid svg {
        /* font-size: 18px !important; */
-
-        /* background-color: #efefef;
-        background-image: radial-gradient(#fff 51%, transparent 91%),
-          radial-gradient(#fff 51%, transparent 91%);
-        background-size: 20px 20px;
-        background-position:
-          0 0,
-          10px 10px;
-        background-repeat: repeat; */
      }
-
      .malware {
        position: fixed;
        bottom: 0;
@@ -73,75 +41,34 @@
        font-family: monospace;
        font-size: 72px;
      }
-
-      /* tspan {
-              font-size: 6px !important;
-            } */
    </style>
  </head>
-
  <body>
-    <pre id="diagram" class="mermaid2">
-stateDiagram-v2
-    direction LR
-    [*] --> Active
-
-    state Active {
-      direction BT
-        [*] --> Inner
-        Inner --> NumLockOn : EvNumLockPressed
-    }
-    %% Outer --> Inner
-      </pre
-    >
-
+    <div>Security check</div>
    <pre id="diagram" class="mermaid">
-      stateDiagram-v2
-      [*] --> First
-      state First {
-          [*] --> second
-          second --> [*]
-      }
-
-
-    </pre>
-
+flowchart LR
+A-->B
+        </pre
+    >
    <pre id="diagram" class="mermaid2">
-      flowchart LR
-        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]
-    </pre>
-
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      import layouts from './mermaid-layout-elk.esm.mjs';
-      mermaid.registerLayoutLoaders(layouts);
+            mindmap
+          root
+            ch1
+            ch2
+        </pre
+    >
+    <script src="./packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script>
+    <script src="./packages/mermaid-mindmap/dist/mermaid-example-diagram-detector.js"></script>
+    <script src="./packages/mermaid/dist/mermaid.esm.mjs"></script>
+    <script>
      mermaid.parseError = function (err, hash) {
-        console.error('Mermaid error: ', err);
+        // console.error('Mermaid error: ', err);
      };
      mermaid.initialize({
-        theme: 'neo',
-        handdrawnSeed: 12,
-        look: 'neo',
-        //layout: 'elk',
-        'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
-        // layout: 'dagre',
-        // layout: 'elk',
-        flowchart: { titleTopMargin: 10 },
-        // fontFamily: 'Caveat',
-        //fontFamily: 'Kalam',
-        fontFamily: 'Arial',
-        sequence: {
-          actorFontFamily: 'arial',
-          noteFontFamily: 'arial',
-          messageFontFamily: 'arial',
-        },
-        fontSize: 10,
+        startOnLoad: true,
        logLevel: 0,
-        htmlLabels: true,
+        basePath: './packages/',
+        // themeVariables: {relationLabelColor: 'red'}
      });
      function callback() {
        alert('It worked');
@@ -150,10 +77,6 @@ stateDiagram-v2
        console.error('In parse error:');
        console.error(err);
      };
-      // mermaid.test1('first_slow', 1200).then((r) => console.info(r));
-      // mermaid.test1('second_fast', 200).then((r) => console.info(r));
-      // mermaid.test1('third_fast', 200).then((r) => console.info(r));
-      // mermaid.test1('forth_slow', 1200).then((r) => console.info(r));
    </script>
  </body>
 </html>
--- a/cypress/platform/refactor.html
+++ b/cypress/platform/refactor.html
@@ -1,307 +0,0 @@
-<html>
-  <head>
-    <script src="//unpkg.com/alpinejs" defer></script>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-
-    <style>
-      body {
-        font-family: 'Arial';
-      }
-
-      table {
-        width: 100%;
-        border-collapse: collapse;
-        table-layout: fixed;
-      }
-
-      th,
-      td {
-        border: 1px solid black;
-        padding: 10px;
-        text-align: center;
-        vertical-align: middle;
-      }
-
-      .separator {
-        height: 20px;
-        background-color: #f0f0f0;
-      }
-
-      .vertical-header {
-        text-align: center;
-      }
-
-      .collapsible {
-        background-color: #f9f9f9;
-        color: #444;
-        cursor: pointer;
-        padding: 18px;
-        width: 100%;
-        border: none;
-        text-align: left;
-        outline: none;
-        font-size: 15px;
-      }
-
-      .active,
-      .collapsible:hover {
-        background-color: #ccc;
-      }
-
-      .collapsible:after {
-        content: '\002B';
-        color: #777;
-        font-weight: bold;
-        float: right;
-        margin-left: 2px;
-      }
-
-      .active:after {
-        content: '\2212';
-      }
-
-      .content {
-        padding: 0 5px;
-        max-height: 0;
-        overflow: hidden;
-        transition: max-height 0.2s ease-out;
-        background-color: #f1f1f1;
-      }
-
-      .content .pre-scrollable {
-        max-height: 200px;
-        overflow-y: scroll;
-      }
-    </style>
-  </head>
-
-  <body>
-    <script>
-      const data = {
-        shapes: [
-          {
-            descr: 'Stadium shape',
-            code: `
-              flowchart LR
-              id1([This is the text in the box])
-            `,
-          },
-          {
-            descr: 'Sub-Routine shape',
-            code: `
-              flowchart LR
-              id1[[This is the text in the box]]
-            `,
-          },
-          {
-            descr: 'Cylindrical shape',
-            code: `
-              flowchart LR
-              id1[(Database)]
-            `,
-          },
-          {
-            descr: 'Circle shape',
-            code: `
-              flowchart LR
-              id1((Circle))
-            `,
-          },
-          {
-            descr: 'Double Circle shape',
-            code: `
-              flowchart LR
-              id1(((Circle)))
-            `,
-          },
-          {
-            descr: 'Asymmetric shape',
-            code: `
-flowchart LR
-id1>This is the text in the box]
-            `,
-          },
-          {
-            descr: 'Rhombus/Diamond/Question shape',
-            code: `
-              flowchart LR
-    id1{This is the text in the box}
-            `,
-          },
-          {
-            descr: 'Hexagon shape',
-            code: `
-              flowchart LR
-    id1{{This is the text in the box}}
-            `,
-          },
-          {
-            descr: 'Parallelogram shape',
-            code: `
-              flowchart TD
-    id1[/This is the text in the box/]
-            `,
-          },
-          {
-            descr: 'Parallelogram Alt shape',
-            code: `
-              flowchart TD
-    id1[\This is the text in the box\]
-            `,
-          },
-          {
-            descr: 'Trapezoid shape',
-            code: `
-             flowchart TD
-    A[/Christmas\\]
-            `,
-          },
-          {
-            descr: 'Trapezoid Alt shape',
-            code: `
-              flowchart TD
-    id1[\\This is the text in the box\\]
-            `,
-          },
-          {
-            descr: 'Rect with rounded corner',
-            code: `
-               flowchart LR
-    id1(This is the text in the box)
-            `,
-          },
-          {
-            descr: 'Rect with sharp corner',
-            code: `
-   flowchart LR
-    id1[This is the text in the box]
-            `,
-          },
-        ],
-        looks: ['classic', 'handdrawn', 'neo'],
-        // looks: ['classic'],
-        layouts: ['elk', 'dagre'],
-        // layouts: ['elk'],
-        themes: ['default', 'neo'],
-        // themes: ['default'],
-      };
-      function generateMermaidCode(layout, look, theme, shape) {
-        return `---
-config:
-  layout: ${layout}
-  look: ${look}
-  theme: ${theme}
---
-${shape.code}
-`;
-      }
-    </script>
-    <table x-data="data">
-      <tr>
-        <th></th>
-        <template x-for="layout in layouts">
-          <template x-for="look in looks">
-            <template x-for="theme in themes">
-              <th x-text="layout + '-' + look + '-' + theme "></th>
-            </template>
-          </template>
-        </template>
-      </tr>
-      <template x-for="shape in shapes">
-        <tr>
-          <th class="vertical-header">
-            <button class="collapsible" x-text="shape.descr">Sub-Routine shape</button>
-            <div class="content">
-              <div class="pre-scrollable">
-                <pre x-text="shape.code"></pre>
-              </div>
-            </div>
-          </th>
-          <template x-for="layout in layouts">
-            <template x-for="look in looks">
-              <template x-for="theme in themes">
-                <td>
-                  <pre
-                    id="diagram6"
-                    class="mermaid"
-                    x-text="generateMermaidCode(layout, look, theme, shape)"
-                  ></pre>
-                </td>
-              </template>
-            </template>
-          </template>
-        </tr>
-      </template>
-    </table>
-
-    <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) {};
-
-      mermaid.initialize({
-        handdrawn: false,
-        mergeEdges: true,
-        layout: 'dagre',
-        flowchart: { titleTopMargin: 10 },
-        // fontFamily: 'Caveat',
-        fontFamily: 'Kalam',
-        sequence: {
-          actorFontFamily: 'courier',
-          noteFontFamily: 'courier',
-          messageFontFamily: 'courier',
-        },
-        fontSize: 16,
-        logLevel: 0,
-      });
-      function callback() {
-        alert('It worked');
-      }
-      mermaid.parseError = function (err, hash) {
-        console.error('In parse error:');
-        console.error(err);
-      };
-
-      let coll = document.getElementsByClassName('collapsible');
-      for (const element of coll) {
-        element.addEventListener('click', function () {
-          this.classList.toggle('active');
-          let content = this.nextElementSibling;
-          if (content.style.maxHeight) {
-            content.style.maxHeight = null;
-          } else {
-            content.style.maxHeight = content.scrollHeight + 'px';
-          }
-        });
-      }
-    </script>
-  </body>
-</html>
--- 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/shape-tester.html
+++ b/cypress/platform/shape-tester.html
@@ -1,102 +0,0 @@
-<html>
-  <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-
-    <style>
-      body {
-        font-family: 'Arial';
-        background-color: #333;
-      }
-    </style>
-  </head>
-
-  <body>
-    <div id="diagram"></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({
-        startOnLoad: false,
-        //look: 'handdrawn',
-        // layout: 'fixed',
-        theme: 'dark',
-        //layout: 'elk',
-        fontFamily: 'Kalam',
-        logLevel: 1,
-      });
-
-      let shape = 'circle';
-      let simplified = true;
-      // let simplified = false;
-      let algorithm = 'elk';
-      // let algorithm = 'dagre';
-      let code = `---
-config:
-  layout: ${algorithm}
---
-flowchart TD
-A["Abrakadabra"] --> C["C"] & D["I am a circle"] & n4["Untitled Node"]
-D@{ shape: diamond}
-    B["Bombrakadombra"] --> D & C & D
-    C --> E["E"] & B
-    D --> E & A
-    n4 --> C
-    A@{ shape: ${shape}}
-    B@{ shape: ${shape}}
-    C@{ shape: ${shape}}
-    D@{ shape: ${shape}}
-    E@{ shape: ${shape}}
-    n4@{ shape: ${shape}}
-
-          `;
-      if (simplified) {
-        code = `---
-config:
-  layout: ${algorithm}
---
-flowchart LR
-A["Abrakadabra"] --> C["I am the circle"] & C & C & C & C
-%% A["Abrakadabra"] --> C
-    A@{ shape: ${shape}}
-    C@{ shape: ${shape}}
-
-          `;
-      }
-      console.log(code);
-      const { svg } = await mermaid.render('the-id-of-the-svg', code, undefined, undefined);
-      const elem = document.querySelector('#diagram');
-      elem.innerHTML = svg;
-    </script>
-  </body>
-</html>
--- a/cypress/platform/size-tester.html
+++ b/cypress/platform/size-tester.html
@@ -1,180 +0,0 @@
-<html>
-  <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-
-    <style>
-      body {
-        font-family: 'Arial';
-        background-color: #333;
-      }
-    </style>
-  </head>
-
-  <body>
-    <div id="diagram"></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({
-        startOnLoad: false,
-        //look: 'handdrawn',
-        layout: 'fixed',
-        theme: 'neo-dark',
-        //layout: 'elk',
-        fontFamily: 'Kalam',
-        logLevel: 1,
-        class: {
-          hideEmptyMembersBox: true,
-        },
-      });
-
-      let shape = 'circle';
-
-      let code = `
-      flowchart TB
-          n80["APA ksldj hfaskljdh aklsjdhf klasjdhf klasjhf klsajdh klasjdhf klasjdhf klasjdh klasjhf klasjdh klajsdhfklasjdhf kljadh fklasjdhf klajsdhf lkasdhf klajsdhf klasjdhfklasjdh klasjhf klasdfh klasdfh aklsjfh akjshkasldfh klasdfh klasjh fklsjhf klasdhf kljasdhf klasdhf klj"]
-          n80@{ shape: '${shape}'}
-          n81["APA ksldj hfaskljdh aklsjdhf klasjdhf klasjhf klsajdh klasjdhf klasjdhf klasjdh klasjhf klasjdh klajsdhfklasjdhf kljadh fklasjdhf klajsdhf lkasdhf klajsdhf klasjdhfklasjdh klasjhf klasdfh klasdfh aklsjfh akjshkasldfh klasdfh klasjh fklsjhf klasdhf kljasdhf klasdhf klj"]
-          n82["A single line of text"]
-          n81@{ shape: '${shape}'}
-          n82@{ shape: '${shape}'}
-          n83@{ label: "A single line of text", shape: '${shape}'}
-          n84@{ shape: '${shape}'}
-          `;
-
-      let code2 = `
-      classDiagram
-        class class1 {
-          int num
-          string test
-          string test
-          string test
-          string test
-          string test
-          method()
-        }
-        class class2 {
-          int num
-          string test
-          string test
-          string test
-          string test
-          string test
-          method()
-          method()
-        }
-        class class3 {
-          int test
-        }
-        <<interface>> class3
-        class class4 {
-          int[] id
-          method()
-          method()
-          method()
-          method()
-        }
-        <<interface>> class4
-      `;
-
-      let positions = {
-        edges: {},
-        nodes: {
-          n81: {
-            x: 0,
-            y: 10,
-            width: 300,
-            height: 200,
-          },
-          n80: {
-            x: -400,
-            y: 10,
-            width: 100,
-            height: 50,
-          },
-          n82: {
-            x: 400,
-            y: 10,
-            width: 300,
-            height: 200,
-          },
-          n83: {
-            x: 800,
-            y: 10,
-          },
-          n84: {
-            x: 1200,
-            y: 10,
-            width: 300,
-            height: 200,
-          },
-        },
-      };
-
-      let positions2 = {
-        edges: {},
-        nodes: {
-          class1: {
-            x: 0,
-            y: 10,
-            width: 100,
-            height: 400,
-          },
-          class2: {
-            x: -300,
-            y: 100,
-            width: 100,
-            height: 0,
-          },
-          class3: {
-            x: 400,
-            y: 10,
-            width: 0,
-            height: 0,
-          },
-          class4: {
-            x: 800,
-            y: 10,
-            width: 0,
-            height: 0,
-          },
-        },
-      };
-
-      const { svg } = await mermaid.render('the-id-of-the-svg', code2, undefined, positions2);
-      const elem = document.querySelector('#diagram');
-      elem.innerHTML = svg;
-    </script>
-  </body>
-</html>
--- a/cypress/platform/state-refactor-looks.html
+++ b/cypress/platform/state-refactor-looks.html
--- a/cypress/platform/state-refactor-neo-themes.html
+++ b/cypress/platform/state-refactor-neo-themes.html
--- a/cypress/platform/state-refactor.html
+++ b/cypress/platform/state-refactor.html
@@ -93,7 +93,6 @@
      <th></th> <!-- Placeholder for the top left corner -->
      <th>Dagre</th>
      <th>Dagre with rough</th>
-      <th>Dagre with neo</th>
      <th>ELK</th>
      <th>ELK with rough</th>
    </tr>
@@ -117,14 +116,6 @@ stateDiagram-v2
      <td>
        <pre id="diagram2" class="mermaid">
 %%{init: {"look": "handDrawn"} }%%
-stateDiagram-v2
-    stateId
-
-      </pre>
-      </td>
-      <td>
-        <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo"} }%%
 stateDiagram-v2
    stateId

@@ -172,13 +163,6 @@ stateDiagram-v2
      <td>
        <pre id="diagram2" class="mermaid">
 %%{init: {"look": "handDrawn"} }%%
-stateDiagram-v2
-    state "This is a state description" as s3
-      </pre>
-      </td>
-      <td>
-        <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo"} }%%
 stateDiagram-v2
    state "This is a state description" as s3
      </pre>
@@ -223,14 +207,6 @@ stateDiagram-v2
      <td>
        <pre id="diagram2" class="mermaid">
 %%{init: {"look": "handDrawn"} }%%
-stateDiagram-v2
-    s22 : This is a state description
-
-      </pre>
-      </td>
-      <td>
-        <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo"} }%%
 stateDiagram-v2
    s22 : This is a state description

@@ -291,20 +267,10 @@ stateDiagram-v2
      </pre>
      </td>
      <td>
-          <pre id="diagram2" class="mermaid">
-  %%{init: {"look": "neo"} }%%
-
-     stateDiagram-v2
-      s51 --> s52
-
-
-        </pre>
-        </td>
-        <td>
        <pre id="diagram3" class="mermaid">
 %%{init: {"handDrawn": false, "layout": "elk"} }%%
 stateDiagram-v2
-    s61 --> s62
+    s51 --> s52


      </pre>
@@ -313,7 +279,7 @@ stateDiagram-v2
        <pre id="diagram4" class="mermaid">
 %%{init: {"look": "handDrawn", "layout": "elk"} }%%
 stateDiagram-v2
-    s71 --> s72
+    s61 --> s62


      </pre>
@@ -356,23 +322,13 @@ stateDiagram-v2
    a3 --> a4: A transition


-      </pre>
-      </td>
-      <td>
-        <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo"} }%%
-
-   stateDiagram-v2
-    a5 --> a6: A transition
-
-
      </pre>
      </td>
      <td>
        <pre id="diagram3" class="mermaid">
 %%{init: {"handDrawn": false, "layout": "elk"} }%%
 stateDiagram-v2
-    a7 --> a8: A transition
+    a5 --> a6: A transition


      </pre>
@@ -381,7 +337,7 @@ stateDiagram-v2
        <pre id="diagram4" class="mermaid">
 %%{init: {"look": "handDrawn", "layout": "elk"} }%%
 stateDiagram-v2
-   a9 --> a10: A transition
+   a7 --> a8: A transition


      </pre>
@@ -427,17 +383,6 @@ stateDiagram-v2
    test --> [*]


-      </pre>
-      </td>
-      <td>
-        <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo"} }%%
-
-   stateDiagram-v2
-       [*] --> test
-    test --> [*]
-
-
      </pre>
      </td>
      <td>
@@ -510,20 +455,6 @@ stateDiagram-v2
    }


-      </pre>
-      </td>
-      <td>
-        <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo"} }%%
-
-   stateDiagram-v2
-       [*] --> First
-    state First {
-        [*] --> second
-        second --> [*]
-    }
-
-
      </pre>
      </td>
      <td>
@@ -637,31 +568,6 @@ stateDiagram-v2



-      </pre>
-      </td>
-      <td>
-        <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo"} }%%
-
-   stateDiagram-v2
-    [*] --> Level1
-
-    state Level1 {
-        [*] --> Level2
-
-        state Level2 {
-            [*] --> level2
-            level2 --> Level3
-
-            state Level3 {
-                [*] --> level3
-                level3 --> [*]
-            }
-        }
-    }
-
-
-
      </pre>
      </td>
      <td>
@@ -792,30 +698,6 @@ stateDiagram-v2
      </pre>
      </td>
      <td>
-          <pre id="diagram2" class="mermaid">
-  %%{init: {"look": "neo"} }%%
-
-     stateDiagram-v2
-     [*] --> B1
-      B1 --> B2
-      B1 --> B3
-
-      state B1 {
-          [*] --> B11
-          B11 --> [*]
-      }
-      state B2 {
-          [*] --> B22
-          B22 --> [*]
-      }
-      state B3 {
-          [*] --> B33
-          B33 --> [*]
-      }
-        </pre>
-        </td>
-        <td>
-
        <pre id="diagram3" class="mermaid">
 %%{init: {"handDrawn": false, "layout": "elk"} }%%
 stateDiagram-v2
@@ -912,19 +794,7 @@ stateDiagram-v2
    if_state --> True : if n >= 0
      </pre>
      </td>
-        <td>
-          <pre id="diagram2" class="mermaid">
-  %%{init: {"look": "neo"} }%%
-
-     stateDiagram-v2
-     state if_state <<choice>>
-      [*] --> IsPositive
-      IsPositive --> if_state
-      if_state --> False: if n < 0
-      if_state --> True : if n >= 0
-        </pre>
-        </td>
-        <td>
+      <td>
        <pre id="diagram3" class="mermaid">
 %%{init: {"handDrawn": false, "layout": "elk"} }%%
 stateDiagram-v2
@@ -996,23 +866,6 @@ stateDiagram-v2
      <td>
        <pre id="diagram2" class="mermaid">
 %%{init: {"look": "handDrawn"} }%%
-   stateDiagram-v2
-    state fork_state <<fork>>
-      [*] --> fork_state
-      fork_state --> State2
-      fork_state --> State3
-
-      state join_state <<join>>
-      State2 --> join_state
-      State3 --> join_state
-      join_state --> State4
-      State4 --> [*]
-
-      </pre>
-      </td>
-      <td>
-        <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo"} }%%
   stateDiagram-v2
    state fork_state <<fork>>
      [*] --> fork_state
@@ -1103,19 +956,6 @@ stateDiagram-v2
      <td>
        <pre id="diagram2" class="mermaid">
 %%{init: {"look": "handDrawn"} }%%
-   stateDiagram-v2
-     TN3: The state with a note
-        note right of TN3
-            Important information! You can write
-            notes.
-        end note
-        TN3 --> TN4
-        note left of TN4 : This is the note to the left.
-      </pre>
-      </td>
-      <td>
-        <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo"} }%%
   stateDiagram-v2
     TN3: The state with a note
        note right of TN3
@@ -1216,27 +1056,6 @@ state Active {
     stateDiagram-v2
    [*] --> Active

-    state Active {
-        [*] --> NumLockOff
-        NumLockOff --> NumLockOn : EvNumLockPressed
-        NumLockOn --> NumLockOff : EvNumLockPressed
-        --
-        [*] --> CapsLockOff
-        CapsLockOff --> CapsLockOn : EvCapsLockPressed
-        CapsLockOn --> CapsLockOff : EvCapsLockPressed
-        --
-        [*] --> ScrollLockOff
-        ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
-        ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
-    }
-      </pre>
-      </td>
-      <td>
-        <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo"} }%%
-     stateDiagram-v2
-    [*] --> Active
-
    state Active {
        [*] --> NumLockOff
        NumLockOff --> NumLockOn : EvNumLockPressed
@@ -1342,21 +1161,6 @@ direction LR
        <pre id="diagram2" class="mermaid">
 %%{init: {"look": "handDrawn"} }%%
     stateDiagram-v2
-   direction LR
-    [*] --> D1
-    D1 --> D2
-    D2 --> D3
-    state D3 {
-      direction TB
-      D11 --> D22
-    }
-    D2 --> D4
-      </pre>
-      </td>
-      <td>
-        <pre id="diagram2" class="mermaid">
-%%{init: {"look": "neo"} }%%
-     stateDiagram-v2
   direction LR
    [*] --> D1
    D1 --> D2
--- a/cypress/platform/steph.html
+++ b/cypress/platform/steph.html
@@ -1,172 +0,0 @@
-<html>
-  <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-
-    <style>
-      body {
-        /* background: rgb(221, 208, 208); */
-        /* background: #333; */
-        font-family: 'Arial';
-        /* font-size: 18px !important; */
-      }
-
-      h1 {
-        color: grey;
-      }
-
-      .mermaid2 {
-        display: none;
-      }
-
-      .mermaid svg {
-        /* font-size: 18px !important; */
-
-        /* background-color: #efefef;
-        background-image: radial-gradient(#fff 51%, transparent 91%),
-          radial-gradient(#fff 51%, transparent 91%);
-        background-size: 20px 20px;
-        background-position:
-          0 0,
-          10px 10px;
-        background-repeat: repeat; */
-      }
-    </style>
-  </head>
-
-  <body>
-    <pre id="diagram" class="mermaid2">
-      %%{init: {"look": "neo", "theme": "neo","fontFamily": "Arial"} }%%
-flowchart
-      A[A really really really super long node] --> B & C
-      subgraph apa
-        D --> E
-      end
-      </pre
-    >
-    <pre id="diagram" class="mermaid2">
-%%{init: {"look": "neo", "theme": "forest","fontFamily": "Arial",         "themeVariables": {
-          "useGradient": true,
-          "gradientStart": '#fff',
-          "gradientStop": '#ccc'
-        }} }%%
-stateDiagram-v2
-    stateId
-      </pre
-    >
-    <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
-
-
-    </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>
-    <!-- Flowchart with subgraph-->
-    <pre id="diagram3" class="mermaid">
-flowchart TB
-    c1-->a2
-    subgraph one
-    a1-->a2
-    end
-    subgraph two
-    b1-->b2
-    end
-    subgraph three
-    c1-->c2
-    end
-    </pre>
-
-    <pre id="diagram4" class="mermaid">
-stateDiagram-v2
-    [*] --> First
-    state First {
-        [*] --> second
-        second --> [*]
-    }
-
-
-    </pre>
-
-    <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);
-      };
-      window.callback = function () {
-        alert('A callback was triggered');
-      };
-      mermaid.initialize({
-        theme: 'neo',
-
-        // handdrawnSeed: 12,
-        look: 'neo',
-        // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
-        // layout: 'dagre',
-        // layout: 'elk',
-        // layout: 'fixed',
-        // htmlLabels: false,
-        flowchart: { titleTopMargin: 10 },
-
-        // fontFamily: 'Caveat',
-        // fontFamily: 'Kalam',
-        // fontFamily: 'courier',
-        fontFamily: 'arial',
-        sequence: {
-          actorFontFamily: 'courier',
-          noteFontFamily: 'courier',
-          messageFontFamily: 'courier',
-        },
-        fontSize: 12,
-        logLevel: 0,
-        securityLevel: 'loose',
-      });
-      function callback() {
-        alert('It worked');
-      }
-      mermaid.parseError = function (err, hash) {
-        console.error('In parse error:');
-        console.error(err);
-      };
-    </script>
-  </body>
-</html>
--- 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/architecture-dark.html
+++ b/demos/architecture-dark.html
@@ -1,285 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>Architecture Mermaid Quick Test Page</title>
-    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
-    <style>
-      div.mermaid {
-        /* font-family: 'trebuchet ms', verdana, arial; */
-        font-family: 'Courier New', Courier, monospace !important;
-        background-color: #333;
-      }
-      body {
-        color: white;
-        background-color: #333;
-      }
-    </style>
-  </head>
-
-  <body>
-    <h1>Architecture diagram demo</h1>
-    <h2>Simple diagram with groups</h2>
-    <pre class="mermaid">
-      architecture-beta
-        group api(cloud)[API]
-
-        service db(database)[Database] in api
-        service disk1(disk)[Storage] in api
-        service disk2(disk)[Storage] in api
-        service server(server)[Server] in api
-        service gateway(internet)[Gateway]
-
-        db:L -- R:server
-        disk1:T -- B:server
-        disk2:T -- B:db
-        server:T -- B:gateway
-    </pre>
-    <hr />
-
-    <h2>Groups within groups</h2>
-    <pre class="mermaid">
-      architecture-beta
-        group api[API]
-        group public[Public API] in api
-        group private[Private API] in api
-
-
-        service serv1(server)[Server] in public
-
-
-        service serv2(server)[Server] in private
-        service db(database)[Database] in private
-
-        service gateway(internet)[Gateway] in api
-
-        serv1:B -- T:serv2
-
-        serv2:L -- R:db
-
-        serv1:L -- R:gateway
-    </pre>
-    <hr />
-
-    <h2>Default icon (?) from unknown icon name</h2>
-    <pre class="mermaid">
-      architecture-beta
-        service unknown(iconnamedoesntexist)[Unknown Icon]
-    </pre>
-    <hr />
-
-    <h2>Split Direction</h2>
-    <pre class="mermaid">
-      architecture-beta
-        service db(database)[Database]
-        service s3(disk)[Storage]
-        service serv1(server)[Server 1]
-        service serv2(server)[Server 2]
-        service disk(disk)[Disk]
-
-        db:L -- R:s3
-        serv1:L -- T:s3
-        serv2:L -- B:s3
-        serv1:T -- B:disk
-    </pre>
-    <hr />
-
-    <h2>Arrow Tests</h2>
-    <pre class="mermaid">
-      architecture-beta
-        service servC(server)[Server 1]
-        service servL(server)[Server 2]
-        service servR(server)[Server 3]
-        service servT(server)[Server 4]
-        service servB(server)[Server 5]
-
-        servC:L <--> R:servL
-        servC:R <--> L:servR
-        servC:T <--> B:servT
-        servC:B <--> T:servB
-
-        servL:T <--> L:servT
-        servL:B <--> L:servB
-        servR:T <--> R:servT
-        servR:B <--> R:servB
-    </pre>
-    <pre class="mermaid">
-      architecture-beta
-        service servC(server)[Server 1]
-        service servL(server)[Server 2]
-        service servR(server)[Server 3]
-        service servT(server)[Server 4]
-        service servB(server)[Server 5]
-
-        servC:L <--> R:servL
-        servC:R <--> L:servR
-        servC:T <--> B:servT
-        servC:B <--> T:servB
-
-        servT:L <--> T:servL
-        servB:L <--> B:servL
-        servT:R <--> T:servR
-        servB:R <--> B:servR
-    </pre>
-    <hr />
-
-    <h2>Group Edges</h2>
-    <pre class="mermaid">
-      architecture-beta
-        group left_group(cloud)[Left]
-        group right_group(cloud)[Right]
-        group top_group(cloud)[Top]
-        group bottom_group(cloud)[Bottom]
-        group center_group(cloud)[Center]
-
-        service left_disk(disk)[Disk] in left_group
-        service right_disk(disk)[Disk] in right_group
-        service top_disk(disk)[Disk] in top_group
-        service bottom_disk(disk)[Disk] in bottom_group
-        service center_disk(disk)[Disk] in center_group
-
-        left_disk{group}:R <--> L:center_disk{group}
-        right_disk{group}:L <--> R:center_disk{group}
-        top_disk{group}:B <--> T:center_disk{group}
-        bottom_disk{group}:T <--> B:center_disk{group}
-  </pre
-    >
-    <hr />
-
-    <h2>Edge Label Test</h2>
-    <pre class="mermaid">
-      architecture-beta
-        service servC(server)[Server 1]
-        service servL(server)[Server 2]
-        service servR(server)[Server 3]
-        service servT(server)[Server 4]
-        service servB(server)[Server 5]
-
-        servC:L -[Label]- R:servL
-        servC:R -[Label]- L:servR
-        servC:T -[Label]- B:servT
-        servC:B -[Label]- T:servB
-
-        servL:T -[Label]- L:servT
-        servL:B -[Label]- L:servB
-        servR:T -[Label]- R:servT
-        servR:B -[Label]- R:servB
-    </pre>
-    <pre class="mermaid">
-      architecture-beta
-        service servC(server)[Server 1]
-        service servL(server)[Server 2]
-        service servR(server)[Server 3]
-        service servT(server)[Server 4]
-        service servB(server)[Server 5]
-
-        servC:L -[Label that is Long]- R:servL
-        servC:R -[Label that is Long]- L:servR
-        servC:T -[Label that is Long]- B:servT
-        servC:B -[Label that is Long]- T:servB
-
-        servL:T -[Label that is Long]- L:servT
-        servL:B -[Label that is Long]- L:servB
-        servR:T -[Label that is Long]- R:servT
-        servR:B -[Label that is Long]- R:servB
-    </pre>
-
-    <hr />
-    <h2>Junction Demo</h2>
-    <pre class="mermaid">
-      architecture-beta
-        service left_disk(disk)[Disk]
-        service top_disk(disk)[Disk]
-        service bottom_disk(disk)[Disk]
-        service top_gateway(internet)[Gateway]
-        service bottom_gateway(internet)[Gateway]
-        junction juncC
-        junction juncR
-
-        left_disk:R -- L:juncC
-        top_disk:B -- T:juncC
-        bottom_disk:T -- B:juncC
-        juncC:R -- L:juncR
-        top_gateway:B -- T:juncR
-        bottom_gateway:T -- B:juncR
-    </pre>
-    <hr />
-
-    <h2>Junction Demo Groups</h2>
-    <pre class="mermaid">
-      architecture-beta
-        group left
-        group right
-        service left_disk(disk)[Disk] in left
-        service top_disk(disk)[Disk] in left
-        service bottom_disk(disk)[Disk] in left
-        service top_gateway(internet)[Gateway] in right
-        service bottom_gateway(internet)[Gateway] in right
-        junction juncC in left
-        junction juncR in right
-
-        left_disk:R -- L:juncC
-        top_disk:B -- T:juncC
-        bottom_disk:T -- B:juncC
-
-
-        top_gateway:B <-- T:juncR
-        bottom_gateway:T <-- B:juncR
-
-        juncC{group}:R --> L:juncR{group}
-    </pre>
-    <hr />
-
-    <h2>External Icons Demo</h2>
-    <pre class="mermaid">
-    architecture-beta
-      service s3(logos:aws-s3)[Cloud Store]
-      service ec2(logos:aws-ec2)[Server]
-      service api(logos:aws-api-gateway)[Api Gateway]
-      service fa(fa:image)[Font Awesome Icon]
-    </pre>
-
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      mermaid.initialize({
-        theme: 'dark',
-        // handDrawnSeed: 12,
-        // look: 'handDrawn',
-        // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
-        // layout: 'dagre',
-        // layout: 'elk',
-        // layout: 'fixed',
-        // htmlLabels: false,
-        //flowchart: { titleTopMargin: 10 },
-
-        // fontFamily: 'Caveat',
-        // fontFamily: 'Kalam',
-        // fontFamily: 'courier',
-        // fontFamily: 'arial',
-        // sequence: {
-        //   actorFontFamily: 'courier',
-        //   noteFontFamily: 'courier',
-        //   messageFontFamily: 'courier',
-        // },
-        // fontSize: 12,
-        // logLevel: 3,
-        // securityLevel: 'loose',
-      });
-      mermaid.registerIconPacks([
-        {
-          name: 'logos',
-          loader: () =>
-            fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()),
-        },
-        {
-          name: 'fa',
-          loader: () =>
-            fetch('https://unpkg.com/@iconify-json/fa6-regular/icons.json').then((res) =>
-              res.json()
-            ),
-        },
-      ]);
-    </script>
-  </body>
-</html>
--- a/demos/architecture-mermaid-chart.html
+++ b/demos/architecture-mermaid-chart.html
@@ -1,280 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>Architecture Mermaid Quick Test Page</title>
-    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
-    <style>
-      div.mermaid {
-        /* font-family: 'trebuchet ms', verdana, arial; */
-        font-family: 'Courier New', Courier, monospace !important;
-      }
-    </style>
-  </head>
-
-  <body>
-    <h1>Architecture diagram demo</h1>
-    <h2>Simple diagram with groups</h2>
-    <pre class="mermaid">
-      architecture-beta
-        group api(cloud)[API]
-
-        service db(database)[Database] in api
-        service disk1(disk)[Storage] in api
-        service disk2(disk)[Storage] in api
-        service server(server)[Server] in api
-        service gateway(internet)[Gateway]
-
-        db:L -- R:server
-        disk1:T -- B:server
-        disk2:T -- B:db
-        server:T -- B:gateway
-    </pre>
-    <hr />
-
-    <h2>Groups within groups</h2>
-    <pre class="mermaid">
-      architecture-beta
-        group api[API]
-        group public[Public API] in api
-        group private[Private API] in api
-
-
-        service serv1(server)[Server] in public
-
-
-        service serv2(server)[Server] in private
-        service db(database)[Database] in private
-
-        service gateway(internet)[Gateway] in api
-
-        serv1:B -- T:serv2
-
-        serv2:L -- R:db
-
-        serv1:L -- R:gateway
-    </pre>
-    <hr />
-
-    <h2>Default icon (?) from unknown icon name</h2>
-    <pre class="mermaid">
-      architecture-beta
-        service unknown(iconnamedoesntexist)[Unknown Icon]
-    </pre>
-    <hr />
-
-    <h2>Split Direction</h2>
-    <pre class="mermaid">
-      architecture-beta
-        service db(database)[Database]
-        service s3(disk)[Storage]
-        service serv1(server)[Server 1]
-        service serv2(server)[Server 2]
-        service disk(disk)[Disk]
-
-        db:L -- R:s3
-        serv1:L -- T:s3
-        serv2:L -- B:s3
-        serv1:T -- B:disk
-    </pre>
-    <hr />
-
-    <h2>Arrow Tests</h2>
-    <pre class="mermaid">
-      architecture-beta
-        service servC(server)[Server 1]
-        service servL(server)[Server 2]
-        service servR(server)[Server 3]
-        service servT(server)[Server 4]
-        service servB(server)[Server 5]
-
-        servC:L <--> R:servL
-        servC:R <--> L:servR
-        servC:T <--> B:servT
-        servC:B <--> T:servB
-
-        servL:T <--> L:servT
-        servL:B <--> L:servB
-        servR:T <--> R:servT
-        servR:B <--> R:servB
-    </pre>
-    <pre class="mermaid">
-      architecture-beta
-        service servC(server)[Server 1]
-        service servL(server)[Server 2]
-        service servR(server)[Server 3]
-        service servT(server)[Server 4]
-        service servB(server)[Server 5]
-
-        servC:L <--> R:servL
-        servC:R <--> L:servR
-        servC:T <--> B:servT
-        servC:B <--> T:servB
-
-        servT:L <--> T:servL
-        servB:L <--> B:servL
-        servT:R <--> T:servR
-        servB:R <--> B:servR
-    </pre>
-    <hr />
-
-    <h2>Group Edges</h2>
-    <pre class="mermaid">
-      architecture-beta
-        group left_group(cloud)[Left]
-        group right_group(cloud)[Right]
-        group top_group(cloud)[Top]
-        group bottom_group(cloud)[Bottom]
-        group center_group(cloud)[Center]
-
-        service left_disk(disk)[Disk] in left_group
-        service right_disk(disk)[Disk] in right_group
-        service top_disk(disk)[Disk] in top_group
-        service bottom_disk(disk)[Disk] in bottom_group
-        service center_disk(disk)[Disk] in center_group
-
-        left_disk{group}:R <--> L:center_disk{group}
-        right_disk{group}:L <--> R:center_disk{group}
-        top_disk{group}:B <--> T:center_disk{group}
-        bottom_disk{group}:T <--> B:center_disk{group}
-  </pre
-    >
-    <hr />
-
-    <h2>Edge Label Test</h2>
-    <pre class="mermaid">
-      architecture-beta
-        service servC(server)[Server 1]
-        service servL(server)[Server 2]
-        service servR(server)[Server 3]
-        service servT(server)[Server 4]
-        service servB(server)[Server 5]
-
-        servC:L -[Label]- R:servL
-        servC:R -[Label]- L:servR
-        servC:T -[Label]- B:servT
-        servC:B -[Label]- T:servB
-
-        servL:T -[Label]- L:servT
-        servL:B -[Label]- L:servB
-        servR:T -[Label]- R:servT
-        servR:B -[Label]- R:servB
-    </pre>
-    <pre class="mermaid">
-      architecture-beta
-        service servC(server)[Server 1]
-        service servL(server)[Server 2]
-        service servR(server)[Server 3]
-        service servT(server)[Server 4]
-        service servB(server)[Server 5]
-
-        servC:L -[Label that is Long]- R:servL
-        servC:R -[Label that is Long]- L:servR
-        servC:T -[Label that is Long]- B:servT
-        servC:B -[Label that is Long]- T:servB
-
-        servL:T -[Label that is Long]- L:servT
-        servL:B -[Label that is Long]- L:servB
-        servR:T -[Label that is Long]- R:servT
-        servR:B -[Label that is Long]- R:servB
-    </pre>
-
-    <hr />
-    <h2>Junction Demo</h2>
-    <pre class="mermaid">
-      architecture-beta
-        service left_disk(disk)[Disk]
-        service top_disk(disk)[Disk]
-        service bottom_disk(disk)[Disk]
-        service top_gateway(internet)[Gateway]
-        service bottom_gateway(internet)[Gateway]
-        junction juncC
-        junction juncR
-
-        left_disk:R -- L:juncC
-        top_disk:B -- T:juncC
-        bottom_disk:T -- B:juncC
-        juncC:R -- L:juncR
-        top_gateway:B -- T:juncR
-        bottom_gateway:T -- B:juncR
-    </pre>
-    <hr />
-
-    <h2>Junction Demo Groups</h2>
-    <pre class="mermaid">
-      architecture-beta
-        group left
-        group right
-        service left_disk(disk)[Disk] in left
-        service top_disk(disk)[Disk] in left
-        service bottom_disk(disk)[Disk] in left
-        service top_gateway(internet)[Gateway] in right
-        service bottom_gateway(internet)[Gateway] in right
-        junction juncC in left
-        junction juncR in right
-
-        left_disk:R -- L:juncC
-        top_disk:B -- T:juncC
-        bottom_disk:T -- B:juncC
-
-
-        top_gateway:B <-- T:juncR
-        bottom_gateway:T <-- B:juncR
-
-        juncC{group}:R --> L:juncR{group}
-    </pre>
-    <hr />
-
-    <h2>External Icons Demo</h2>
-    <pre class="mermaid">
-    architecture-beta
-      service s3(logos:aws-s3)[Cloud Store]
-      service ec2(logos:aws-ec2)[Server]
-      service api(logos:aws-api-gateway)[Api Gateway]
-      service fa(fa:image)[Font Awesome Icon]
-    </pre>
-
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      mermaid.initialize({
-        theme: 'mc',
-        // handDrawnSeed: 12,
-        // look: 'handDrawn',
-        // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
-        // layout: 'dagre',
-        // layout: 'elk',
-        // layout: 'fixed',
-        // htmlLabels: false,
-        //flowchart: { titleTopMargin: 10 },
-
-        // fontFamily: 'Caveat',
-        // fontFamily: 'Kalam',
-        // fontFamily: 'courier',
-        // fontFamily: 'arial',
-        // sequence: {
-        //   actorFontFamily: 'courier',
-        //   noteFontFamily: 'courier',
-        //   messageFontFamily: 'courier',
-        // },
-        // fontSize: 12,
-        // logLevel: 3,
-        // securityLevel: 'loose',
-      });
-      mermaid.registerIconPacks([
-        {
-          name: 'logos',
-          loader: () =>
-            fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()),
-        },
-        {
-          name: 'fa',
-          loader: () =>
-            fetch('https://unpkg.com/@iconify-json/fa6-regular/icons.json').then((res) =>
-              res.json()
-            ),
-        },
-      ]);
-    </script>
-  </body>
-</html>
--- a/demos/architecture-neo-dark.html
+++ b/demos/architecture-neo-dark.html
@@ -1,284 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>Architecture Mermaid Quick Test Page</title>
-    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
-    <style>
-      div.mermaid {
-        /* font-family: 'trebuchet ms', verdana, arial; */
-        font-family: 'Courier New', Courier, monospace !important;
-      }
-      body {
-        color: white;
-        background-color: #333;
-      }
-    </style>
-  </head>
-
-  <body>
-    <h1>Architecture diagram demo</h1>
-    <h2>Simple diagram with groups</h2>
-    <pre class="mermaid">
-      architecture-beta
-        group api(cloud)[API]
-
-        service db(database)[Database] in api
-        service disk1(disk)[Storage] in api
-        service disk2(disk)[Storage] in api
-        service server(server)[Server] in api
-        service gateway(internet)[Gateway]
-
-        db:L -- R:server
-        disk1:T -- B:server
-        disk2:T -- B:db
-        server:T -- B:gateway
-    </pre>
-    <hr />
-
-    <h2>Groups within groups</h2>
-    <pre class="mermaid">
-      architecture-beta
-        group api[API]
-        group public[Public API] in api
-        group private[Private API] in api
-
-
-        service serv1(server)[Server] in public
-
-
-        service serv2(server)[Server] in private
-        service db(database)[Database] in private
-
-        service gateway(internet)[Gateway] in api
-
-        serv1:B -- T:serv2
-
-        serv2:L -- R:db
-
-        serv1:L -- R:gateway
-    </pre>
-    <hr />
-
-    <h2>Default icon (?) from unknown icon name</h2>
-    <pre class="mermaid">
-      architecture-beta
-        service unknown(iconnamedoesntexist)[Unknown Icon]
-    </pre>
-    <hr />
-
-    <h2>Split Direction</h2>
-    <pre class="mermaid">
-      architecture-beta
-        service db(database)[Database]
-        service s3(disk)[Storage]
-        service serv1(server)[Server 1]
-        service serv2(server)[Server 2]
-        service disk(disk)[Disk]
-
-        db:L -- R:s3
-        serv1:L -- T:s3
-        serv2:L -- B:s3
-        serv1:T -- B:disk
-    </pre>
-    <hr />
-
-    <h2>Arrow Tests</h2>
-    <pre class="mermaid">
-      architecture-beta
-        service servC(server)[Server 1]
-        service servL(server)[Server 2]
-        service servR(server)[Server 3]
-        service servT(server)[Server 4]
-        service servB(server)[Server 5]
-
-        servC:L <--> R:servL
-        servC:R <--> L:servR
-        servC:T <--> B:servT
-        servC:B <--> T:servB
-
-        servL:T <--> L:servT
-        servL:B <--> L:servB
-        servR:T <--> R:servT
-        servR:B <--> R:servB
-    </pre>
-    <pre class="mermaid">
-      architecture-beta
-        service servC(server)[Server 1]
-        service servL(server)[Server 2]
-        service servR(server)[Server 3]
-        service servT(server)[Server 4]
-        service servB(server)[Server 5]
-
-        servC:L <--> R:servL
-        servC:R <--> L:servR
-        servC:T <--> B:servT
-        servC:B <--> T:servB
-
-        servT:L <--> T:servL
-        servB:L <--> B:servL
-        servT:R <--> T:servR
-        servB:R <--> B:servR
-    </pre>
-    <hr />
-
-    <h2>Group Edges</h2>
-    <pre class="mermaid">
-      architecture-beta
-        group left_group(cloud)[Left]
-        group right_group(cloud)[Right]
-        group top_group(cloud)[Top]
-        group bottom_group(cloud)[Bottom]
-        group center_group(cloud)[Center]
-
-        service left_disk(disk)[Disk] in left_group
-        service right_disk(disk)[Disk] in right_group
-        service top_disk(disk)[Disk] in top_group
-        service bottom_disk(disk)[Disk] in bottom_group
-        service center_disk(disk)[Disk] in center_group
-
-        left_disk{group}:R <--> L:center_disk{group}
-        right_disk{group}:L <--> R:center_disk{group}
-        top_disk{group}:B <--> T:center_disk{group}
-        bottom_disk{group}:T <--> B:center_disk{group}
-  </pre
-    >
-    <hr />
-
-    <h2>Edge Label Test</h2>
-    <pre class="mermaid">
-      architecture-beta
-        service servC(server)[Server 1]
-        service servL(server)[Server 2]
-        service servR(server)[Server 3]
-        service servT(server)[Server 4]
-        service servB(server)[Server 5]
-
-        servC:L -[Label]- R:servL
-        servC:R -[Label]- L:servR
-        servC:T -[Label]- B:servT
-        servC:B -[Label]- T:servB
-
-        servL:T -[Label]- L:servT
-        servL:B -[Label]- L:servB
-        servR:T -[Label]- R:servT
-        servR:B -[Label]- R:servB
-    </pre>
-    <pre class="mermaid">
-      architecture-beta
-        service servC(server)[Server 1]
-        service servL(server)[Server 2]
-        service servR(server)[Server 3]
-        service servT(server)[Server 4]
-        service servB(server)[Server 5]
-
-        servC:L -[Label that is Long]- R:servL
-        servC:R -[Label that is Long]- L:servR
-        servC:T -[Label that is Long]- B:servT
-        servC:B -[Label that is Long]- T:servB
-
-        servL:T -[Label that is Long]- L:servT
-        servL:B -[Label that is Long]- L:servB
-        servR:T -[Label that is Long]- R:servT
-        servR:B -[Label that is Long]- R:servB
-    </pre>
-
-    <hr />
-    <h2>Junction Demo</h2>
-    <pre class="mermaid">
-      architecture-beta
-        service left_disk(disk)[Disk]
-        service top_disk(disk)[Disk]
-        service bottom_disk(disk)[Disk]
-        service top_gateway(internet)[Gateway]
-        service bottom_gateway(internet)[Gateway]
-        junction juncC
-        junction juncR
-
-        left_disk:R -- L:juncC
-        top_disk:B -- T:juncC
-        bottom_disk:T -- B:juncC
-        juncC:R -- L:juncR
-        top_gateway:B -- T:juncR
-        bottom_gateway:T -- B:juncR
-    </pre>
-    <hr />
-
-    <h2>Junction Demo Groups</h2>
-    <pre class="mermaid">
-      architecture-beta
-        group left
-        group right
-        service left_disk(disk)[Disk] in left
-        service top_disk(disk)[Disk] in left
-        service bottom_disk(disk)[Disk] in left
-        service top_gateway(internet)[Gateway] in right
-        service bottom_gateway(internet)[Gateway] in right
-        junction juncC in left
-        junction juncR in right
-
-        left_disk:R -- L:juncC
-        top_disk:B -- T:juncC
-        bottom_disk:T -- B:juncC
-
-
-        top_gateway:B <-- T:juncR
-        bottom_gateway:T <-- B:juncR
-
-        juncC{group}:R --> L:juncR{group}
-    </pre>
-    <hr />
-
-    <h2>External Icons Demo</h2>
-    <pre class="mermaid">
-    architecture-beta
-      service s3(logos:aws-s3)[Cloud Store]
-      service ec2(logos:aws-ec2)[Server]
-      service api(logos:aws-api-gateway)[Api Gateway]
-      service fa(fa:image)[Font Awesome Icon]
-    </pre>
-
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      mermaid.initialize({
-        theme: 'neo-dark',
-        // handDrawnSeed: 12,
-        // look: 'handDrawn',
-        // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
-        // layout: 'dagre',
-        // layout: 'elk',
-        // layout: 'fixed',
-        // htmlLabels: false,
-        //flowchart: { titleTopMargin: 10 },
-
-        // fontFamily: 'Caveat',
-        // fontFamily: 'Kalam',
-        // fontFamily: 'courier',
-        // fontFamily: 'arial',
-        // sequence: {
-        //   actorFontFamily: 'courier',
-        //   noteFontFamily: 'courier',
-        //   messageFontFamily: 'courier',
-        // },
-        // fontSize: 12,
-        // logLevel: 3,
-        // securityLevel: 'loose',
-      });
-      mermaid.registerIconPacks([
-        {
-          name: 'logos',
-          loader: () =>
-            fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()),
-        },
-        {
-          name: 'fa',
-          loader: () =>
-            fetch('https://unpkg.com/@iconify-json/fa6-regular/icons.json').then((res) =>
-              res.json()
-            ),
-        },
-      ]);
-    </script>
-  </body>
-</html>
--- a/demos/architecture-neo.html
+++ b/demos/architecture-neo.html
@@ -1,280 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>Architecture Mermaid Quick Test Page</title>
-    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
-    <style>
-      div.mermaid {
-        /* font-family: 'trebuchet ms', verdana, arial; */
-        font-family: 'Courier New', Courier, monospace !important;
-      }
-    </style>
-  </head>
-
-  <body>
-    <h1>Architecture diagram demo</h1>
-    <h2>Simple diagram with groups</h2>
-    <pre class="mermaid">
-      architecture-beta
-        group api(cloud)[API]
-
-        service db(database)[Database] in api
-        service disk1(disk)[Storage] in api
-        service disk2(disk)[Storage] in api
-        service server(server)[Server] in api
-        service gateway(internet)[Gateway]
-
-        db:L -- R:server
-        disk1:T -- B:server
-        disk2:T -- B:db
-        server:T -- B:gateway
-    </pre>
-    <hr />
-
-    <h2>Groups within groups</h2>
-    <pre class="mermaid">
-      architecture-beta
-        group api[API]
-        group public[Public API] in api
-        group private[Private API] in api
-
-
-        service serv1(server)[Server] in public
-
-
-        service serv2(server)[Server] in private
-        service db(database)[Database] in private
-
-        service gateway(internet)[Gateway] in api
-
-        serv1:B -- T:serv2
-
-        serv2:L -- R:db
-
-        serv1:L -- R:gateway
-    </pre>
-    <hr />
-
-    <h2>Default icon (?) from unknown icon name</h2>
-    <pre class="mermaid">
-      architecture-beta
-        service unknown(iconnamedoesntexist)[Unknown Icon]
-    </pre>
-    <hr />
-
-    <h2>Split Direction</h2>
-    <pre class="mermaid">
-      architecture-beta
-        service db(database)[Database]
-        service s3(disk)[Storage]
-        service serv1(server)[Server 1]
-        service serv2(server)[Server 2]
-        service disk(disk)[Disk]
-
-        db:L -- R:s3
-        serv1:L -- T:s3
-        serv2:L -- B:s3
-        serv1:T -- B:disk
-    </pre>
-    <hr />
-
-    <h2>Arrow Tests</h2>
-    <pre class="mermaid">
-      architecture-beta
-        service servC(server)[Server 1]
-        service servL(server)[Server 2]
-        service servR(server)[Server 3]
-        service servT(server)[Server 4]
-        service servB(server)[Server 5]
-
-        servC:L <--> R:servL
-        servC:R <--> L:servR
-        servC:T <--> B:servT
-        servC:B <--> T:servB
-
-        servL:T <--> L:servT
-        servL:B <--> L:servB
-        servR:T <--> R:servT
-        servR:B <--> R:servB
-    </pre>
-    <pre class="mermaid">
-      architecture-beta
-        service servC(server)[Server 1]
-        service servL(server)[Server 2]
-        service servR(server)[Server 3]
-        service servT(server)[Server 4]
-        service servB(server)[Server 5]
-
-        servC:L <--> R:servL
-        servC:R <--> L:servR
-        servC:T <--> B:servT
-        servC:B <--> T:servB
-
-        servT:L <--> T:servL
-        servB:L <--> B:servL
-        servT:R <--> T:servR
-        servB:R <--> B:servR
-    </pre>
-    <hr />
-
-    <h2>Group Edges</h2>
-    <pre class="mermaid">
-      architecture-beta
-        group left_group(cloud)[Left]
-        group right_group(cloud)[Right]
-        group top_group(cloud)[Top]
-        group bottom_group(cloud)[Bottom]
-        group center_group(cloud)[Center]
-
-        service left_disk(disk)[Disk] in left_group
-        service right_disk(disk)[Disk] in right_group
-        service top_disk(disk)[Disk] in top_group
-        service bottom_disk(disk)[Disk] in bottom_group
-        service center_disk(disk)[Disk] in center_group
-
-        left_disk{group}:R <--> L:center_disk{group}
-        right_disk{group}:L <--> R:center_disk{group}
-        top_disk{group}:B <--> T:center_disk{group}
-        bottom_disk{group}:T <--> B:center_disk{group}
-  </pre
-    >
-    <hr />
-
-    <h2>Edge Label Test</h2>
-    <pre class="mermaid">
-      architecture-beta
-        service servC(server)[Server 1]
-        service servL(server)[Server 2]
-        service servR(server)[Server 3]
-        service servT(server)[Server 4]
-        service servB(server)[Server 5]
-
-        servC:L -[Label]- R:servL
-        servC:R -[Label]- L:servR
-        servC:T -[Label]- B:servT
-        servC:B -[Label]- T:servB
-
-        servL:T -[Label]- L:servT
-        servL:B -[Label]- L:servB
-        servR:T -[Label]- R:servT
-        servR:B -[Label]- R:servB
-    </pre>
-    <pre class="mermaid">
-      architecture-beta
-        service servC(server)[Server 1]
-        service servL(server)[Server 2]
-        service servR(server)[Server 3]
-        service servT(server)[Server 4]
-        service servB(server)[Server 5]
-
-        servC:L -[Label that is Long]- R:servL
-        servC:R -[Label that is Long]- L:servR
-        servC:T -[Label that is Long]- B:servT
-        servC:B -[Label that is Long]- T:servB
-
-        servL:T -[Label that is Long]- L:servT
-        servL:B -[Label that is Long]- L:servB
-        servR:T -[Label that is Long]- R:servT
-        servR:B -[Label that is Long]- R:servB
-    </pre>
-
-    <hr />
-    <h2>Junction Demo</h2>
-    <pre class="mermaid">
-      architecture-beta
-        service left_disk(disk)[Disk]
-        service top_disk(disk)[Disk]
-        service bottom_disk(disk)[Disk]
-        service top_gateway(internet)[Gateway]
-        service bottom_gateway(internet)[Gateway]
-        junction juncC
-        junction juncR
-
-        left_disk:R -- L:juncC
-        top_disk:B -- T:juncC
-        bottom_disk:T -- B:juncC
-        juncC:R -- L:juncR
-        top_gateway:B -- T:juncR
-        bottom_gateway:T -- B:juncR
-    </pre>
-    <hr />
-
-    <h2>Junction Demo Groups</h2>
-    <pre class="mermaid">
-      architecture-beta
-        group left
-        group right
-        service left_disk(disk)[Disk] in left
-        service top_disk(disk)[Disk] in left
-        service bottom_disk(disk)[Disk] in left
-        service top_gateway(internet)[Gateway] in right
-        service bottom_gateway(internet)[Gateway] in right
-        junction juncC in left
-        junction juncR in right
-
-        left_disk:R -- L:juncC
-        top_disk:B -- T:juncC
-        bottom_disk:T -- B:juncC
-
-
-        top_gateway:B <-- T:juncR
-        bottom_gateway:T <-- B:juncR
-
-        juncC{group}:R --> L:juncR{group}
-    </pre>
-    <hr />
-
-    <h2>External Icons Demo</h2>
-    <pre class="mermaid">
-    architecture-beta
-      service s3(logos:aws-s3)[Cloud Store]
-      service ec2(logos:aws-ec2)[Server]
-      service api(logos:aws-api-gateway)[Api Gateway]
-      service fa(fa:image)[Font Awesome Icon]
-    </pre>
-
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      mermaid.initialize({
-        theme: 'neo',
-        // handDrawnSeed: 12,
-        // look: 'handDrawn',
-        // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
-        // layout: 'dagre',
-        // layout: 'elk',
-        // layout: 'fixed',
-        // htmlLabels: false,
-        //flowchart: { titleTopMargin: 10 },
-
-        // fontFamily: 'Caveat',
-        // fontFamily: 'Kalam',
-        // fontFamily: 'courier',
-        // fontFamily: 'arial',
-        // sequence: {
-        //   actorFontFamily: 'courier',
-        //   noteFontFamily: 'courier',
-        //   messageFontFamily: 'courier',
-        // },
-        // fontSize: 12,
-        // logLevel: 3,
-        // securityLevel: 'loose',
-      });
-      mermaid.registerIconPacks([
-        {
-          name: 'logos',
-          loader: () =>
-            fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()),
-        },
-        {
-          name: 'fa',
-          loader: () =>
-            fetch('https://unpkg.com/@iconify-json/fa6-regular/icons.json').then((res) =>
-              res.json()
-            ),
-        },
-      ]);
-    </script>
-  </body>
-</html>
--- 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/demos/index.html
+++ b/demos/index.html
@@ -91,18 +91,6 @@
      <li>
        <h2><a href="./architecture.html">Architecture</a></h2>
      </li>
-      <li>
-        <h2><a href="./architecture-neo.html">Architecture-neo</a></h2>
-      </li>
-      <li>
-        <h2><a href="./architecture-neo-dark.html">Architecture-neo-dark</a></h2>
-      </li>
-      <li>
-        <h2><a href="./architecture-mermaid-chart.html">Architecture-mermaid-chart</a></h2>
-      </li>
-      <li>
-        <h2><a href="./architecture-dark.html">Architecture-dark</a></h2>
-      </li>
    </ul>
  </body>
 </html>
--- 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/README.md
+++ b/docs/config/setup/README.md
@@ -4,7 +4,7 @@
 >
 > ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/README.md](../../../packages/mermaid/src/docs/config/setup/README.md).

-# @mermaid-chart/mermaid
+# mermaid

 ## Modules

--- 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.5/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.5/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.5/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:149](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L149)
+[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:148](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L148)
+[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:147](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L147)
+[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.LayoutLoaderDefinition.md
+++ b/docs/config/setup/interfaces/mermaid.LayoutLoaderDefinition.md
@@ -16,7 +16,7 @@

 #### Defined in

-[packages/mermaid/src/rendering-util/render.ts:25](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L25)
+[packages/mermaid/src/rendering-util/render.ts:24](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L24)

 ---

@@ -26,7 +26,7 @@

 #### Defined in

-[packages/mermaid/src/rendering-util/render.ts:24](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L24)
+[packages/mermaid/src/rendering-util/render.ts:23](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L23)

 ---

@@ -36,4 +36,4 @@

 #### Defined in

-[packages/mermaid/src/rendering-util/render.ts:23](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L23)
+[packages/mermaid/src/rendering-util/render.ts:22](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L22)
--- a/docs/config/setup/interfaces/mermaid.Mermaid.md
+++ b/docs/config/setup/interfaces/mermaid.Mermaid.md
@@ -122,7 +122,7 @@ This function should be called before the run function.

 ### mermaidAPI

-• **mermaidAPI**: `Readonly`<{ `defaultConfig`: [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.defaultConfig; `getConfig`: () => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.getConfig; `getDiagramFromText`: (`text`: `string`, `metadata`: `Pick`<`DiagramMetadata`, `"title"`>) => `Promise`<`Diagram`> ; `getSiteConfig`: () => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`userOptions`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `void` ; `parse`: (`text`: `string`, `parseOptions`: [`ParseOptions`](mermaid.ParseOptions.md) & { `suppressErrors`: `true` }) => `Promise`<[`ParseResult`](mermaid.ParseResult.md) & { `error?`: `unknown` }>(`text`: `string`, `parseOptions?`: [`ParseOptions`](mermaid.ParseOptions.md)) => `Promise`<[`ParseResult`](mermaid.ParseResult.md)> ; `render`: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`, `positions?`: `Positions`) => `Promise`<[`RenderResult`](mermaid.RenderResult.md)> ; `reset`: () => `void` ; `setConfig`: (`conf`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.setConfig; `updateSiteConfig`: (`conf`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.updateSiteConfig }>
+• **mermaidAPI**: `Readonly`<{ `defaultConfig`: [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.defaultConfig; `getConfig`: () => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.getConfig; `getDiagramFromText`: (`text`: `string`, `metadata`: `Pick`<`DiagramMetadata`, `"title"`>) => `Promise`<`Diagram`> ; `getSiteConfig`: () => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`userOptions`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `void` ; `parse`: (`text`: `string`, `parseOptions`: [`ParseOptions`](mermaid.ParseOptions.md) & { `suppressErrors`: `true` }) => `Promise`<[`ParseResult`](mermaid.ParseResult.md) | `false`>(`text`: `string`, `parseOptions?`: [`ParseOptions`](mermaid.ParseOptions.md)) => `Promise`<[`ParseResult`](mermaid.ParseResult.md)> ; `render`: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](mermaid.RenderResult.md)> ; `reset`: () => `void` ; `setConfig`: (`conf`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.setConfig; `updateSiteConfig`: (`conf`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.updateSiteConfig }>

 **`Deprecated`**

@@ -136,11 +136,11 @@ Use [parse](mermaid.Mermaid.md#parse) and [render](mermaid.Mermaid.md#render) in

 ### parse

-• **parse**: (`text`: `string`, `parseOptions`: [`ParseOptions`](mermaid.ParseOptions.md) & { `suppressErrors`: `true` }) => `Promise`<[`ParseResult`](mermaid.ParseResult.md) & { `error?`: `unknown` }>(`text`: `string`, `parseOptions?`: [`ParseOptions`](mermaid.ParseOptions.md)) => `Promise`<[`ParseResult`](mermaid.ParseResult.md)>
+• **parse**: (`text`: `string`, `parseOptions`: [`ParseOptions`](mermaid.ParseOptions.md) & { `suppressErrors`: `true` }) => `Promise`<[`ParseResult`](mermaid.ParseResult.md) | `false`>(`text`: `string`, `parseOptions?`: [`ParseOptions`](mermaid.ParseOptions.md)) => `Promise`<[`ParseResult`](mermaid.ParseResult.md)>

 #### Type declaration

-▸ (`text`, `parseOptions`): `Promise`<[`ParseResult`](mermaid.ParseResult.md) & { `error?`: `unknown` }>
+▸ (`text`, `parseOptions`): `Promise`<[`ParseResult`](mermaid.ParseResult.md) | `false`>

 Parse the text and validate the syntax.

@@ -153,7 +153,7 @@ Parse the text and validate the syntax.

 ##### Returns

-`Promise`<[`ParseResult`](mermaid.ParseResult.md) & { `error?`: `unknown` }>
+`Promise`<[`ParseResult`](mermaid.ParseResult.md) | `false`>

 An object with the `diagramType` set to type of the diagram if valid. Otherwise `false` if parseOptions.suppressErrors is `true`.

@@ -272,20 +272,19 @@ Used to register external diagram types.

 ### render

-• **render**: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`, `positions?`: `Positions`) => `Promise`<[`RenderResult`](mermaid.RenderResult.md)>
+• **render**: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](mermaid.RenderResult.md)>

 #### Type declaration

-▸ (`id`, `text`, `svgContainingElement?`, `positions?`): `Promise`<[`RenderResult`](mermaid.RenderResult.md)>
+▸ (`id`, `text`, `svgContainingElement?`): `Promise`<[`RenderResult`](mermaid.RenderResult.md)>

 ##### Parameters

-| Name                    | Type        |
-| :---------------------- | :---------- |
-| `id`                    | `string`    |
-| `text`                  | `string`    |
-| `svgContainingElement?` | `Element`   |
-| `positions?`            | `Positions` |
+| Name                    | Type      |
+| :---------------------- | :-------- |
+| `id`                    | `string`  |
+| `text`                  | `string`  |
+| `svgContainingElement?` | `Element` |

 ##### Returns

--- a/docs/config/setup/interfaces/mermaid.MermaidConfig.md
+++ b/docs/config/setup/interfaces/mermaid.MermaidConfig.md
@@ -16,7 +16,7 @@

 #### Defined in

-[packages/mermaid/src/config.type.ts:133](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L133)
+[packages/mermaid/src/config.type.ts:122](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L122)

 ---

@@ -26,7 +26,7 @@

 #### Defined in

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

 ---

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

 #### Defined in

-[packages/mermaid/src/config.type.ts:152](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L152)
+[packages/mermaid/src/config.type.ts:141](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L141)

 ---

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

 #### Defined in

-[packages/mermaid/src/config.type.ts:212](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L212)
+[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:209](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L209)
+[packages/mermaid/src/config.type.ts:197](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L197)

 ---

@@ -69,7 +69,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:187](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L187)

 ---

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

 #### Defined in

-[packages/mermaid/src/config.type.ts:124](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L124)
+[packages/mermaid/src/config.type.ts:113](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L113)

 ---

@@ -93,7 +93,7 @@ You can set this attribute to base the seed on a static string.

 #### Defined in

-[packages/mermaid/src/config.type.ts:192](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L192)
+[packages/mermaid/src/config.type.ts:181](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L181)

 ---

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

 #### Defined in

-[packages/mermaid/src/config.type.ts:185](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L185)
+[packages/mermaid/src/config.type.ts:174](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L174)

 ---

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

 #### Defined in

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

 ---

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

 #### Defined in

-[packages/mermaid/src/config.type.ts:102](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L102)
+[packages/mermaid/src/config.type.ts:91](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L91)

 ---

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

 #### 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:189](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L189)

 ---

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

 #### Defined in

-[packages/mermaid/src/config.type.ts:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L193)
+[packages/mermaid/src/config.type.ts:182](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L182)

 ---

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

 #### Defined in

-[packages/mermaid/src/config.type.ts:132](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L132)
+[packages/mermaid/src/config.type.ts:121](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L121)

 ---

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

 #### Defined in

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

 ---

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

 #### Defined in

-[packages/mermaid/src/config.type.ts:174](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L174)
+[packages/mermaid/src/config.type.ts:163](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L163)

 ---

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

 #### Defined in

-[packages/mermaid/src/config.type.ts:195](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L195)
+[packages/mermaid/src/config.type.ts:184](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L184)

 ---

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

 #### Defined in

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

 ---

@@ -229,7 +229,7 @@ Defines the seed to be used when using handDrawn look. This is important for the

 #### Defined in

-[packages/mermaid/src/config.type.ts:87](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L87)
+[packages/mermaid/src/config.type.ts:76](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L76)

 ---

@@ -239,7 +239,7 @@ Defines the seed to be used when using handDrawn look. This is important for the

 #### Defined in

-[packages/mermaid/src/config.type.ts:125](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L125)
+[packages/mermaid/src/config.type.ts:114](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L114)

 ---

@@ -249,17 +249,7 @@ Defines the seed to be used when using handDrawn look. This is important for the

 #### Defined in

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

 ---

@@ -271,7 +261,7 @@ Defines which layout algorithm to use for rendering the diagram.

 #### Defined in

-[packages/mermaid/src/config.type.ts:92](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L92)
+[packages/mermaid/src/config.type.ts:81](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L81)

 ---

@@ -286,7 +276,7 @@ fall back to legacy rendering for KaTeX.

 #### Defined in

-[packages/mermaid/src/config.type.ts:167](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L167)
+[packages/mermaid/src/config.type.ts:156](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L156)

 ---

@@ -298,19 +288,19 @@ This option decides the amount of logging to be used by mermaid.

 #### Defined in

-[packages/mermaid/src/config.type.ts:138](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L138)
+[packages/mermaid/src/config.type.ts:127](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L127)

 ---

 ### look

-• `Optional` **look**: `"neo"` | `"classic"` | `"handDrawn"`
+• `Optional` **look**: `"classic"` | `"handDrawn"`

 Defines which main look to use for the diagram.

 #### Defined in

-[packages/mermaid/src/config.type.ts:82](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L82)
+[packages/mermaid/src/config.type.ts:71](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L71)

 ---

@@ -320,7 +310,7 @@ Defines which main look to use for the diagram.

 #### Defined in

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

 ---

@@ -332,7 +322,7 @@ Defines the maximum number of edges that can be drawn in a graph.

 #### Defined in

-[packages/mermaid/src/config.type.ts:101](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L101)
+[packages/mermaid/src/config.type.ts:90](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L90)

 ---

@@ -344,7 +334,7 @@ The maximum allowed size of the users text diagram

 #### Defined in

-[packages/mermaid/src/config.type.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L96)
+[packages/mermaid/src/config.type.ts:85](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L85)

 ---

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

 #### Defined in

-[packages/mermaid/src/config.type.ts:206](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L206)
+[packages/mermaid/src/config.type.ts:195](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L195)

 ---

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

 #### 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:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L199)

 ---

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

 #### 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:190](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L190)

 ---

@@ -384,7 +374,7 @@ The maximum allowed size of the users text diagram

 #### 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:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L191)

 ---

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

 #### 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:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L193)

 ---

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

 #### Defined in

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

 ---

@@ -418,7 +408,7 @@ This prevents malicious graph directives from overriding a site's default securi

 #### Defined in

-[packages/mermaid/src/config.type.ts:159](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L159)
+[packages/mermaid/src/config.type.ts:148](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L148)

 ---

@@ -430,7 +420,7 @@ Level of trust for parsed diagram

 #### Defined in

-[packages/mermaid/src/config.type.ts:142](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L142)
+[packages/mermaid/src/config.type.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L131)

 ---

@@ -440,7 +430,7 @@ Level of trust for parsed diagram

 #### Defined in

-[packages/mermaid/src/config.type.ts:194](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L194)
+[packages/mermaid/src/config.type.ts:183](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L183)

 ---

@@ -452,7 +442,7 @@ Dictates whether mermaid starts on Page load

 #### Defined in

-[packages/mermaid/src/config.type.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L146)
+[packages/mermaid/src/config.type.ts:135](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L135)

 ---

@@ -462,7 +452,7 @@ Dictates whether mermaid starts on Page load

 #### 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:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L188)

 ---

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

 #### Defined in

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

 ---

 ### theme

-• `Optional` **theme**: `"default"` | `"base"` | `"dark"` | `"forest"` | `"neutral"` | `"neo"` | `"neo-dark"` | `"redux"` | `"redux-dark"` | `"mc"` | `"null"`
+• `Optional` **theme**: `"default"` | `"base"` | `"dark"` | `"forest"` | `"neutral"` | `"null"`

 Theme, the CSS style sheet.
 You may also use `themeCSS` to override this value.
@@ -498,7 +488,7 @@ You may also use `themeCSS` to override this value.

 #### Defined in

-[packages/mermaid/src/config.type.ts:77](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L77)
+[packages/mermaid/src/config.type.ts:66](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L66)

 ---

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

 #### Defined in

-[packages/mermaid/src/config.type.ts:76](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L76)
+[packages/mermaid/src/config.type.ts:65](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L65)

 ---

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

 #### 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:186](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L186)

 ---

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

 #### Defined in

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

 ---

@@ -538,4 +528,4 @@ 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:192](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L192)
--- 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:66](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L66)
+[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
@@ -10,18 +10,6 @@

 ## Properties

-### code
-
-• **code**: `string`
-
-The mermaid code after extracting the config.
-
-#### Defined in
-
-[packages/mermaid/src/types.ts:74](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L74)
-
---
-
 ### config

 • **config**: [`MermaidConfig`](mermaid.MermaidConfig.md)
@@ -30,46 +18,16 @@ The config passed as YAML frontmatter or directives

 #### Defined in

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

 ---

-### diagram
+### diagramType

-• `Optional` **diagram**: `Diagram`
+• **diagramType**: `string`
+
+The diagram type, e.g. 'flowchart', 'sequence', etc.

 #### Defined in

-[packages/mermaid/src/types.ts:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L80)
-
---
-
-### error
-
-• `Optional` **error**: `unknown`
-
-The error that occurred during parsing, if any.
-
-#### Defined in
-
-[packages/mermaid/src/types.ts:84](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L84)
-
---
-
-### success
-
-• **success**: `boolean`
-
-#### Defined in
-
-[packages/mermaid/src/types.ts:70](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L70)
-
---
-
-### title
-
-• `Optional` **title**: `string`
-
-#### Defined in
-
-[packages/mermaid/src/types.ts:79](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L79)
+[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:113](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L113)
+[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:103](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L103)
+[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:99](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L99)
+[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/config/setup/modules/mermaid.md
+++ b/docs/config/setup/modules/mermaid.md
@@ -67,7 +67,7 @@

 #### Defined in

-[packages/mermaid/src/diagram-api/types.ts:157](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L157)
+[packages/mermaid/src/diagram-api/types.ts:130](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L130)

 ---

@@ -77,7 +77,7 @@

 #### Defined in

-[packages/mermaid/src/diagram-api/types.ts:159](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L159)
+[packages/mermaid/src/diagram-api/types.ts:132](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L132)

 ## Variables

@@ -88,77 +88,3 @@
 #### Defined in

 [packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L442)
-
-## Functions
-
-### calcIntersect
-
-▸ **calcIntersect**(`nodeId`, `point`): `Point` | `Promise`<`Point`>
-
-#### Parameters
-
-| Name     | Type     |
-| :------- | :------- |
-| `nodeId` | `string` |
-| `point`  | `Point`  |
-
-#### Returns
-
-`Point` | `Promise`<`Point`>
-
-#### Defined in
-
-[packages/mermaid/src/rendering-util/layout-algorithms/fixed/index.js:172](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/layout-algorithms/fixed/index.js#L172)
-
---
-
-### calcIntersections
-
-▸ **calcIntersections**(`startNodeId`, `endNodeId`, `startNodeSize`, `endNodeSize`): `IntersectionPoint`\[]
-
-#### Parameters
-
-| Name                  | Type                    |
-| :-------------------- | :---------------------- |
-| `startNodeId`         | `string`                |
-| `endNodeId`           | `undefined` \| `string` |
-| `startNodeSize`       | `NodePosition`          |
-| `endNodeSize`         | `Object`                |
-| `endNodeSize.height?` | `number`                |
-| `endNodeSize.width?`  | `number`                |
-| `endNodeSize.x`       | `number`                |
-| `endNodeSize.y`       | `number`                |
-
-#### Returns
-
-`IntersectionPoint`\[]
-
-**`Throws`**
-
-If the start node doesn't exist in the nodeDB (e.g. `render` hasn't been called yet)
-
-#### Defined in
-
-[packages/mermaid/src/rendering-util/layout-algorithms/fixed/index.js:115](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/layout-algorithms/fixed/index.js#L115)
-
---
-
-### calcNodeIntersections
-
-▸ **calcNodeIntersections**(`targetNodeId`, `_node1`, `_node2`): `IntersectionPoint`\[] | `Promise`<`IntersectionPoint`\[]>
-
-#### Parameters
-
-| Name           | Type                                                                                              |
-| :------------- | :------------------------------------------------------------------------------------------------ |
-| `targetNodeId` | `any`                                                                                             |
-| `_node1`       | `Pick`<`Node`, `"width"` \| `"height"` \| `"x"` \| `"y"` \| `"id"` \| `"shape"` \| `"intersect"`> |
-| `_node2`       | `Pick`<`Node`, `"width"` \| `"height"` \| `"x"` \| `"y"` \| `"id"` \| `"shape"` \| `"intersect"`> |
-
-#### Returns
-
-`IntersectionPoint`\[] | `Promise`<`IntersectionPoint`\[]>
-
-#### Defined in
-
-[packages/mermaid/src/rendering-util/layout-algorithms/fixed/index.js:78](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/layout-algorithms/fixed/index.js#L78)
--- 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/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/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