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

Merge branch 'develop' into test-validate-lockfile-workflow
added changeset
2025-11-11 08:14:07 +01:00 · 2025-07-15 00:40:44 +05:30 · 2025-07-15 00:40:30 +05:30 · 2025-07-14 19:40:53 +05:30
315 changed files with 10979 additions and 24950 deletions
--- a/.build/common.ts
+++ b/.build/common.ts
@@ -33,11 +33,6 @@ export const packageOptions = {
    packageName: 'mermaid-layout-elk',
    file: 'layouts.ts',
  },
-  'mermaid-layout-tidy-tree': {
-    name: 'mermaid-layout-tidy-tree',
-    packageName: 'mermaid-layout-tidy-tree',
-    file: 'index.ts',
-  },
  examples: {
    name: 'mermaid-examples',
    packageName: 'examples',
--- a/.changeset/brave-baths-behave.md
+++ b/.changeset/brave-baths-behave.md
@@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-fix: Prevent HTML tags from being escaped in sandbox label rendering
--- a/.changeset/brave-memes-flash.md
+++ b/.changeset/brave-memes-flash.md
@@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-fix: Support edge animation in hand drawn look
--- a/.changeset/busy-mirrors-try.md
+++ b/.changeset/busy-mirrors-try.md
@@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-fix: Resolved parsing error where direction TD was not recognized within subgraphs
--- a/.changeset/chilly-words-march.md
+++ b/.changeset/chilly-words-march.md
@@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-fix: Correct viewBox casing and make SVGs responsive
--- a/.changeset/curly-apes-prove.md
+++ b/.changeset/curly-apes-prove.md
@@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-fix: Improve participant parsing and prevent recursive loops on invalid syntax
--- a/.changeset/gold-olives-rule.md
+++ b/.changeset/gold-olives-rule.md
@@ -0,0 +1,5 @@
+---
+'mermaid': minor
+---
+
+feat: Add `getRegisteredDiagramsMetadata` to `mermaid`, which returns all the registered diagram IDs in mermaid
--- a/.changeset/loud-results-melt.md
+++ b/.changeset/loud-results-melt.md
@@ -1,5 +0,0 @@
---
-'mermaid': minor
---
-
-feat: Add half-arrowheads (solid & stick) and central connection support
--- a/.changeset/platinum-olives-rule.md
+++ b/.changeset/platinum-olives-rule.md
@@ -0,0 +1,5 @@
+---
+'@mermaid-js/examples': minor
+---
+
+feat: Add examples for diagrams in the `@mermaid-js/examples` package
--- a/.changeset/short-seals-sort.md
+++ b/.changeset/short-seals-sort.md
@@ -1,5 +0,0 @@
---
-'mermaid': minor
---
-
-feat: allow to put notes in namespaces on classDiagram
--- a/.changeset/slimy-peaches-win.md
+++ b/.changeset/slimy-peaches-win.md
@@ -0,0 +1,7 @@
+---
+'@mermaid-js/examples': patch
+'mermaid': patch
+'@mermaid-js/parser': patch
+---
+
+chore: Move packet diagram out of beta
--- a/.changeset/slow-lemons-know.md
+++ b/.changeset/slow-lemons-know.md
@@ -1,5 +0,0 @@
---
-'@mermaid': patch
---
-
-fix: Mindmap breaking in ELK layout
--- a/.changeset/sweet-games-build.md
+++ b/.changeset/sweet-games-build.md
@@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-fix(er-diagram): prevent syntax error when using 'u', numbers, and decimals in node names
--- a/.changeset/tangy-ghosts-watch.md
+++ b/.changeset/tangy-ghosts-watch.md
@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: adjust sequence diagram title positioning to prevent overlap with top border in Safari
--- a/.changeset/ten-plums-bet.md
+++ b/.changeset/ten-plums-bet.md
@@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-fix: Support ComponentQueue_Ext to prevent parsing error
--- a/.changeset/thick-women-find.md
+++ b/.changeset/thick-women-find.md
@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+chore: downgrade chokidar to 3.6.0 and ignore updates for hot reload stability
--- a/.changeset/wild-areas-lick.md
+++ b/.changeset/wild-areas-lick.md
@@ -0,0 +1,7 @@
+---
+'mermaid': patch
+---
+
+fix(timeline): fix loading `leftMargin` from config
+
+The `timeline.leftMargin` config value should now correctly control the size of the left margin, instead of being ignored.
--- a/.cspell/code-terms.txt
+++ b/.cspell/code-terms.txt
@@ -1,5 +1,3 @@
-!viewbox
-# It should be viewBox
 # This file contains coding related terms
 ALPHANUM
 antiscript
--- a/.cspell/contributors.txt
+++ b/.cspell/contributors.txt
@@ -2,7 +2,6 @@
 Ashish Jain
 cpettitt
 Dong Cai
-fourcube
 knsv
 Knut Sveidqvist
 Nikolay Rozhkov
--- a/.cspell/libraries.txt
+++ b/.cspell/libraries.txt
@@ -64,7 +64,6 @@ rscratch
 shiki
 Slidev
 sparkline
-speccharts
 sphinxcontrib
 ssim
 stylis
--- a/.cspell/mermaid-terms.txt
+++ b/.cspell/mermaid-terms.txt
@@ -5,10 +5,8 @@ bmatrix
 braintree
 catmull
 compositTitleSize
-cose
 curv
 doublecircle
-elem
 elems
 gantt
 gitgraph
--- a/.cspell/misc-terms.txt
+++ b/.cspell/misc-terms.txt
@@ -1,5 +1,4 @@
 BRANDES
-Buzan
 circo
 handDrawn
 KOEPF
--- a/.esbuild/util.ts
+++ b/.esbuild/util.ts
@@ -71,9 +71,6 @@ export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {

  const external: string[] = ['require', 'fs', 'path'];
  const outFileName = getFileName(name, options);
-  const { dependencies, version } = JSON.parse(
-    readFileSync(resolve(__dirname, `../packages/${packageName}/package.json`), 'utf-8')
-  );
  const output: BuildOptions = buildOptions({
    ...rest,
    absWorkingDir: resolve(__dirname, `../packages/${packageName}`),
@@ -85,13 +82,15 @@ export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
    chunkNames: `chunks/${outFileName}/[name]-[hash]`,
    define: {
      // This needs to be stringified for esbuild
-      'injected.includeLargeFeatures': `${includeLargeFeatures}`,
-      'injected.version': `'${version}'`,
+      includeLargeFeatures: `${includeLargeFeatures}`,
      'import.meta.vitest': 'undefined',
    },
  });

  if (core) {
+    const { dependencies } = JSON.parse(
+      readFileSync(resolve(__dirname, `../packages/${packageName}/package.json`), 'utf-8')
+    );
    // Core build is used to generate file without bundled dependencies.
    // This is used by downstream projects to bundle dependencies themselves.
    // Ignore dependencies and any dependencies of dependencies
--- a/.github/lychee.toml
+++ b/.github/lychee.toml
@@ -52,14 +52,10 @@ exclude = [
 # Swimm returns 404, even though the link is valid
 "https://docs.swimm.io",

-# Certificate Error
-"https://noteshub.app",
-
 # Timeout
 "https://huehive.co",
 "https://foswiki.org",
 "https://www.gnu.org",
-"https://redmine.org",
 "https://mermaid-preview.com"
 ]

--- a/.github/workflows/codeql.yml
+++ b/.github/workflows/codeql.yml
@@ -26,8 +26,8 @@ jobs:
    strategy:
      fail-fast: false
      matrix:
-        language: ['javascript', 'actions']
-        # CodeQL supports [ 'actions', 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
+        language: ['javascript']
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
        # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support

    steps:
@@ -36,7 +36,7 @@ jobs:

      # Initializes the CodeQL tools for scanning.
      - name: Initialize CodeQL
-        uses: github/codeql-action/init@5378192d256ef1302a6980fffe5ca04426d43091 # v3.28.21
+        uses: github/codeql-action/init@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10
        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@5378192d256ef1302a6980fffe5ca04426d43091 # v3.28.21
+        uses: github/codeql-action/autobuild@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10

      # ℹ️ 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@5378192d256ef1302a6980fffe5ca04426d43091 # v3.28.21
+        uses: github/codeql-action/analyze@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10
--- a/.github/workflows/e2e-applitools.yml
+++ b/.github/workflows/e2e-applitools.yml
@@ -23,6 +23,9 @@ env:
 jobs:
  e2e-applitools:
    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:
      - if: ${{ ! env.USE_APPLI }}
        name: Warn if not using Applitools
@@ -53,7 +56,7 @@ jobs:
          args: -X POST "$APPLITOOLS_SERVER_URL/api/externals/github/push?apiKey=$APPLITOOLS_API_KEY&CommitSha=$GITHUB_SHA&BranchName=${APPLITOOLS_BRANCH}$&ParentBranchName=$APPLITOOLS_PARENT_BRANCH"

      - name: Cypress run
-        uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
+        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
        id: cypress
        with:
          start: pnpm run dev
--- a/.github/workflows/e2e-timings.yml
+++ b/.github/workflows/e2e-timings.yml
@@ -27,12 +27,12 @@ jobs:
        with:
          node-version-file: '.node-version'
      - name: Install dependencies
-        uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
+        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
        with:
          runTests: false

      - name: Cypress run
-        uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
+        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
        id: cypress
        with:
          install: false
@@ -58,7 +58,7 @@ jobs:
          echo "EOF" >> $GITHUB_OUTPUT

      - name: Commit and create pull request
-        uses: peter-evans/create-pull-request@0edc001d28a2959cd7a6b505629f1d82f0a6e67d
+        uses: peter-evans/create-pull-request@889dce9eaba7900ce30494f5e1ac7220b27e5c81
        with:
          add-paths: |
            cypress/timings.json
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -45,7 +45,7 @@ jobs:
          node-version-file: '.node-version'
      - name: Cache snapshots
        id: cache-snapshot
-        uses: actions/cache@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
+        uses: actions/cache@0c907a75c2c80ebcb7f088228285e798b750cf8f # v4.2.1
        with:
          path: ./cypress/snapshots
          key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
@@ -59,7 +59,7 @@ jobs:

      - name: Install dependencies
        if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
-        uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
+        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
        with:
          # just perform install
          runTests: false
@@ -95,13 +95,13 @@ jobs:
      # These cached snapshots are downloaded, providing the reference snapshots.
      - name: Cache snapshots
        id: cache-snapshot
-        uses: actions/cache/restore@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
+        uses: actions/cache/restore@0c907a75c2c80ebcb7f088228285e798b750cf8f # v4.2.1
        with:
          path: ./cypress/snapshots
          key: ${{ runner.os }}-snapshots-${{ env.targetHash }}

      - name: Install dependencies
-        uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
+        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
        with:
          runTests: false

@@ -117,7 +117,7 @@ jobs:
      # Install NPM dependencies, cache them correctly
      # and run all Cypress tests
      - name: Cypress run
-        uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
+        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
        id: cypress
        with:
          install: false
--- a/.github/workflows/link-checker.yml
+++ b/.github/workflows/link-checker.yml
@@ -32,7 +32,7 @@ jobs:
      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2

      - name: Restore lychee cache
-        uses: actions/cache@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
+        uses: actions/cache@0c907a75c2c80ebcb7f088228285e798b750cf8f # v4.2.1
        with:
          path: .lycheecache
          key: cache-lychee-${{ github.sha }}
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -36,10 +36,11 @@ jobs:

      - name: Create Release Pull Request or Publish to npm
        id: changesets
-        uses: changesets/action@06245a4e0a36c064a573d4150030f5ec548e4fcc # v1.4.10
+        uses: changesets/action@c8bada60c408975afd1a20b3db81d6eee6789308 # v1.4.9
        with:
          version: pnpm changeset:version
          publish: pnpm changeset:publish
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
          NPM_CONFIG_PROVENANCE: true
--- a/.github/workflows/scorecard.yml
+++ b/.github/workflows/scorecard.yml
@@ -20,18 +20,18 @@ jobs:
        with:
          persist-credentials: false
      - name: Run analysis
-        uses: ossf/scorecard-action@4eaacf0543bb3f2c246792bd56e8cdeffafb205a # v2.4.3
+        uses: ossf/scorecard-action@f49aabe0b5af0936a0987cfb85d86b75731b0186 # v2.4.1
        with:
          results_file: results.sarif
          results_format: sarif
          publish_results: true
      - name: Upload artifact
-        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+        uses: actions/upload-artifact@4cec3d8aa04e39d1a68397de0c4cd6fb9dce8ec1 # v4.6.1
        with:
          name: SARIF file
          path: results.sarif
          retention-days: 5
      - name: Upload to code-scanning
-        uses: github/codeql-action/upload-sarif@5378192d256ef1302a6980fffe5ca04426d43091 # v3.28.21
+        uses: github/codeql-action/upload-sarif@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10
        with:
          sarif_file: results.sarif
--- a/.github/workflows/update-browserlist.yml
+++ b/.github/workflows/update-browserlist.yml
@@ -19,7 +19,7 @@ jobs:
          message: 'chore: update browsers list'
          push: false
      - name: Create Pull Request
-        uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e # v7.0.8
+        uses: peter-evans/create-pull-request@67ccf781d68cd99b580ae25a5c18a1cc84ffff1f # v7.0.6
        with:
          branch: update-browserslist
          title: Update Browserslist
--- a/.github/workflows/validate-lockfile.yml
+++ b/.github/workflows/validate-lockfile.yml
@@ -1,7 +1,7 @@
 name: Validate pnpm-lock.yaml

 on:
-  pull_request_target:
+  pull_request:
    paths:
      - 'pnpm-lock.yaml'
      - '**/package.json'
@@ -15,8 +15,13 @@ jobs:
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
-          ref: ${{ github.event.pull_request.head.sha }}
-          repository: ${{ github.event.pull_request.head.repo.full_name }}
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0

      - name: Validate pnpm-lock.yaml entries
        id: validate # give this step an ID so we can reference its outputs
@@ -41,50 +46,25 @@ jobs:

          # If any issues, output them and fail
          if [ ${#issues[@]} -gt 0 ]; then
-            # Use the new GITHUB_OUTPUT approach to set a multiline output
            {
              echo "errors<<EOF"
              printf '%s\n' "${issues[@]}"
              echo "EOF"
-            } >> $GITHUB_OUTPUT
+            } >> "$GITHUB_OUTPUT"
            exit 1
          fi

-      - name: Find existing lockfile validation comment
-        if: always()
-        uses: peter-evans/find-comment@v3
-        id: find-comment
-        with:
-          issue-number: ${{ github.event.pull_request.number }}
-          comment-author: 'github-actions[bot]'
-          body-includes: 'Lockfile Validation Failed'
-
      - name: Comment on PR if validation failed
        if: failure()
-        uses: peter-evans/create-or-update-comment@v5
+        uses: peter-evans/create-or-update-comment@v4
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          issue-number: ${{ github.event.pull_request.number }}
-          comment-id: ${{ steps.find-comment.outputs.comment-id }}
-          edit-mode: replace
          body: |
-            ❌ **Lockfile Validation Failed**
-
            The following issue(s) were detected:
+              
            ${{ steps.validate.outputs.errors }}

            Please address these and push an update.

            _Posted automatically by GitHub Actions_
-
-      - name: Delete comment if validation passed
-        if: success() && steps.find-comment.outputs.comment-id != ''
-        uses: actions/github-script@v7
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: |
-            await github.rest.issues.deleteComment({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              comment_id: ${{ steps.find-comment.outputs.comment-id }},
-            });
--- a/.gitignore
+++ b/.gitignore
@@ -4,7 +4,6 @@ node_modules/
 coverage/
 .idea/
 .pnpm-store/
-.instructions/

 dist
 v8-compile-cache-0
--- a/.vite/build.ts
+++ b/.vite/build.ts
@@ -78,8 +78,6 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
    },
    define: {
      'import.meta.vitest': 'undefined',
-      'injected.includeLargeFeatures': 'true',
-      'injected.version': `'0.0.0'`,
    },
    resolve: {
      extensions: [],
@@ -96,6 +94,10 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
      }),
      ...visualizerOptions(packageName, core),
    ],
+    define: {
+      // Needs to be string
+      includeLargeFeatures: 'true',
+    },
  };

  if (watch && config.build) {
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1 +0,0 @@
-./packages/mermaid/CHANGELOG.md
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
--- a/2
+++ b/2
@@ -5,7 +5,7 @@ USER 0:0
 RUN corepack enable \
    && corepack enable pnpm

-RUN apk add --no-cache git~=2.43 \
+RUN apk add --no-cache git~=2.43.4 \
    && git config --add --system safe.directory /mermaid

 ENV NODE_OPTIONS="--max_old_space_size=8192"
--- a/mocks/d3.ts
+++ b/mocks/d3.ts
@@ -0,0 +1,13 @@
+import { MockedD3 } from '../packages/mermaid/src/tests/MockedD3.js';
+
+export const select = function () {
+  return new MockedD3();
+};
+
+export const selectAll = function () {
+  return new MockedD3();
+};
+
+export const curveBasis = 'basis';
+export const curveLinear = 'linear';
+export const curveCardinal = 'cardinal';
--- a/cypress/helpers/util.ts
+++ b/cypress/helpers/util.ts
@@ -6,7 +6,6 @@ interface CypressConfig {
  listUrl?: boolean;
  listId?: string;
  name?: string;
-  screenshot?: boolean;
 }
 type CypressMermaidConfig = MermaidConfig & CypressConfig;

@@ -15,7 +14,7 @@ interface CodeObject {
  mermaid: CypressMermaidConfig;
 }

-export const utf8ToB64 = (str: string): string => {
+const utf8ToB64 = (str: string): string => {
  return Buffer.from(decodeURIComponent(encodeURIComponent(str))).toString('base64');
 };

@@ -23,7 +22,7 @@ const batchId: string =
  'mermaid-batch-' +
  (Cypress.env('useAppli')
    ? Date.now().toString()
-    : (Cypress.env('CYPRESS_COMMIT') ?? Date.now().toString()));
+    : Cypress.env('CYPRESS_COMMIT') || Date.now().toString());

 export const mermaidUrl = (
  graphStr: string | string[],
@@ -62,7 +61,9 @@ export const imgSnapshotTest = (
    sequence: {
      ...(_options.sequence ?? {}),
      actorFontFamily: 'courier',
-      noteFontFamily: _options.sequence?.noteFontFamily ?? 'courier',
+      noteFontFamily: _options.sequence?.noteFontFamily
+        ? _options.sequence.noteFontFamily
+        : 'courier',
      messageFontFamily: 'courier',
    },
  };
@@ -91,33 +92,20 @@ export const renderGraph = (

 export const openURLAndVerifyRendering = (
  url: string,
-  { screenshot = true, ...options }: CypressMermaidConfig,
+  options: CypressMermaidConfig,
  validation?: any
 ): void => {
  const name: string = (options.name ?? cy.state('runnable').fullTitle()).replace(/\s+/g, '-');

  cy.visit(url);
  cy.window().should('have.property', 'rendered', true);
+  cy.get('svg').should('be.visible');

-  // Handle sandbox mode where SVG is inside an iframe
-  if (options.securityLevel === 'sandbox') {
-    cy.get('iframe').should('be.visible');
-    if (validation) {
-      cy.get('iframe').should(validation);
-    }
-  } else {
-    cy.get('svg').should('be.visible');
-    // cspell:ignore viewbox
-    cy.get('svg').should('not.have.attr', 'viewbox');
-
-    if (validation) {
-      cy.get('svg').should(validation);
-    }
+  if (validation) {
+    cy.get('svg').should(validation);
  }

-  if (screenshot) {
-    verifyScreenshot(name);
-  }
+  verifyScreenshot(name);
 };

 export const verifyScreenshot = (name: string): void => {
--- a/cypress/integration/other/configuration.spec.js
+++ b/cypress/integration/other/configuration.spec.js
@@ -98,12 +98,12 @@ describe('Configuration', () => {
    it('should handle arrowMarkerAbsolute set to true', () => {
      renderGraph(
        `flowchart TD
-    A[Christmas] -->|Get money| B(Go shopping)
-    B --> C{Let me think}
-    C -->|One| D[Laptop]
-    C -->|Two| E[iPhone]
-    C -->|Three| F[fa:fa-car Car]
-    `,
+        A[Christmas] -->|Get money| B(Go shopping)
+        B --> C{Let me think}
+        C -->|One| D[Laptop]
+        C -->|Two| E[iPhone]
+        C -->|Three| F[fa:fa-car Car]
+        `,
        {
          arrowMarkerAbsolute: true,
        }
@@ -113,7 +113,8 @@ describe('Configuration', () => {
        cy.get('path')
          .first()
          .should('have.attr', 'marker-end')
-          .and('include', 'url(http://localhost');
+          .should('exist')
+          .and('include', 'url(http\\:\\/\\/localhost');
      });
    });
    it('should not taint the initial configuration when using multiple directives', () => {
--- a/cypress/integration/other/xss.spec.js
+++ b/cypress/integration/other/xss.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, mermaidUrl, utf8ToB64 } from '../../helpers/util.ts';
+import { mermaidUrl } from '../../helpers/util.ts';
 describe('XSS', () => {
  it('should handle xss in tags', () => {
    const str =
@@ -141,37 +141,4 @@ describe('XSS', () => {
    cy.wait(1000);
    cy.get('#the-malware').should('not.exist');
  });
-
-  it('should sanitize icon labels in architecture diagrams', () => {
-    const str = JSON.stringify({
-      code: `architecture-beta
-    group api(cloud)[API]
-    service db "<img src=x onerror=\\"xssAttack()\\">" [Database] in api`,
-    });
-    imgSnapshotTest(utf8ToB64(str), {}, true);
-    cy.wait(1000);
-    cy.get('#the-malware').should('not.exist');
-  });
-
-  it('should sanitize katex blocks', () => {
-    const str = JSON.stringify({
-      code: `sequenceDiagram
-    participant A as Alice<img src="x" onerror="xssAttack()">$$\\text{Alice}$$
-    A->>John: Hello John, how are you?`,
-    });
-    imgSnapshotTest(utf8ToB64(str), {}, true);
-    cy.wait(1000);
-    cy.get('#the-malware').should('not.exist');
-  });
-
-  it('should sanitize labels', () => {
-    const str = JSON.stringify({
-      code: `erDiagram
-    "<img src=x onerror=xssAttack()>" ||--|| ENTITY2 : "<img src=x onerror=xssAttack()>"
-    `,
-    });
-    imgSnapshotTest(utf8ToB64(str), {}, true);
-    cy.wait(1000);
-    cy.get('#the-malware').should('not.exist');
-  });
 });
--- a/cypress/integration/rendering/block.spec.js
+++ b/cypress/integration/rendering/block.spec.js
@@ -16,7 +16,7 @@ describe('Block diagram', () => {

  it('BL2: should handle columns statement in sub-blocks', () => {
    imgSnapshotTest(
-      `block
+      `block-beta
  id1["Hello"]
  block
    columns 3
@@ -32,7 +32,7 @@ describe('Block diagram', () => {

  it('BL3: should align block widths and handle columns statement in sub-blocks', () => {
    imgSnapshotTest(
-      `block
+      `block-beta
  block
    columns 1
    id1
@@ -48,7 +48,7 @@ describe('Block diagram', () => {

  it('BL4: should align block widths and handle columns statements in deeper sub-blocks then 1 level', () => {
    imgSnapshotTest(
-      `block
+      `block-beta
  columns 1
  block
    columns 1
@@ -68,7 +68,7 @@ describe('Block diagram', () => {

  it('BL5: should align block widths and handle columns statements in deeper sub-blocks then 1 level (alt)', () => {
    imgSnapshotTest(
-      `block
+      `block-beta
  columns 1
  block
    id1
@@ -87,7 +87,7 @@ describe('Block diagram', () => {

  it('BL6: should handle block arrows and spece statements', () => {
    imgSnapshotTest(
-      `block
+      `block-beta
    columns 3
    space:3
    ida idb idc
@@ -106,7 +106,7 @@ describe('Block diagram', () => {

  it('BL7: should handle different types of edges', () => {
    imgSnapshotTest(
-      `block
+      `block-beta
      columns 3
      A space:5
      A --o B
@@ -119,7 +119,7 @@ describe('Block diagram', () => {

  it('BL8: should handle sub-blocks without columns statements', () => {
    imgSnapshotTest(
-      `block
+      `block-beta
      columns 2
      C A B
      block
@@ -133,7 +133,7 @@ describe('Block diagram', () => {

  it('BL9: should handle edges from blocks in sub blocks to other blocks', () => {
    imgSnapshotTest(
-      `block
+      `block-beta
      columns 3
      B space
      block
@@ -147,7 +147,7 @@ describe('Block diagram', () => {

  it('BL10: should handle edges from composite blocks', () => {
    imgSnapshotTest(
-      `block
+      `block-beta
      columns 3
      B space
      block BL
@@ -161,7 +161,7 @@ describe('Block diagram', () => {

  it('BL11: should handle edges to composite blocks', () => {
    imgSnapshotTest(
-      `block
+      `block-beta
      columns 3
      B space
      block BL
@@ -175,7 +175,7 @@ describe('Block diagram', () => {

  it('BL12: edges should handle labels', () => {
    imgSnapshotTest(
-      `block
+      `block-beta
      A
      space
      A -- "apa" --> E
@@ -186,7 +186,7 @@ describe('Block diagram', () => {

  it('BL13: should handle block arrows in different directions', () => {
    imgSnapshotTest(
-      `block
+      `block-beta
      columns 3
      space blockArrowId1<["down"]>(down) space
      blockArrowId2<["right"]>(right) blockArrowId3<["Sync"]>(x, y) blockArrowId4<["left"]>(left)
@@ -199,7 +199,7 @@ describe('Block diagram', () => {

  it('BL14: should style statements and class statements', () => {
    imgSnapshotTest(
-      `block
+      `block-beta
    A
    B
    classDef blue fill:#66f,stroke:#333,stroke-width:2px;
@@ -212,7 +212,7 @@ describe('Block diagram', () => {

  it('BL15: width alignment - D and E should share available space', () => {
    imgSnapshotTest(
-      `block
+      `block-beta
  block
    D
    E
@@ -225,7 +225,7 @@ describe('Block diagram', () => {

  it('BL16: width alignment - C should be as wide as the composite block', () => {
    imgSnapshotTest(
-      `block
+      `block-beta
  block
    A("This is the text")
    B
@@ -238,7 +238,7 @@ describe('Block diagram', () => {

  it('BL17: width alignment - blocks should be equal in width', () => {
    imgSnapshotTest(
-      `block
+      `block-beta
    A("This is the text")
    B
    C
@@ -249,7 +249,7 @@ describe('Block diagram', () => {

  it('BL18: block types 1 - square, rounded and circle', () => {
    imgSnapshotTest(
-      `block
+      `block-beta
    A["square"]
    B("rounded")
    C(("circle"))
@@ -260,7 +260,7 @@ describe('Block diagram', () => {

  it('BL19: block types 2 - odd, diamond and hexagon', () => {
    imgSnapshotTest(
-      `block
+      `block-beta
    A>"rect_left_inv_arrow"]
    B{"diamond"}
    C{{"hexagon"}}
@@ -271,7 +271,7 @@ describe('Block diagram', () => {

  it('BL20: block types 3 - stadium', () => {
    imgSnapshotTest(
-      `block
+      `block-beta
    A(["stadium"])
      `,
      {}
@@ -280,7 +280,7 @@ describe('Block diagram', () => {

  it('BL21: block types 4 - lean right, lean left, trapezoid and inv trapezoid', () => {
    imgSnapshotTest(
-      `block
+      `block-beta
    A[/"lean right"/]
    B[\"lean left"\]
    C[/"trapezoid"\]
@@ -292,7 +292,7 @@ describe('Block diagram', () => {

  it('BL22: block types 1 - square, rounded and circle', () => {
    imgSnapshotTest(
-      `block
+      `block-beta
    A["square"]
    B("rounded")
    C(("circle"))
@@ -303,7 +303,7 @@ describe('Block diagram', () => {

  it('BL23: sizing - it should be possible to make a block wider', () => {
    imgSnapshotTest(
-      `block
+      `block-beta
      A("rounded"):2
      B:2
      C
@@ -314,7 +314,7 @@ describe('Block diagram', () => {

  it('BL24: sizing - it should be possible to make a composite block wider', () => {
    imgSnapshotTest(
-      `block
+      `block-beta
      block:2
        A
      end
@@ -326,7 +326,7 @@ describe('Block diagram', () => {

  it('BL25: block in the middle with space on each side', () => {
    imgSnapshotTest(
-      `block
+      `block-beta
        columns 3
        space
        middle["In the middle"]
@@ -337,7 +337,7 @@ describe('Block diagram', () => {
  });
  it('BL26: space and an edge', () => {
    imgSnapshotTest(
-      `block
+      `block-beta
  columns 5
    A space B
    A --x B
@@ -347,7 +347,7 @@ describe('Block diagram', () => {
  });
  it('BL27: block sizes for regular blocks', () => {
    imgSnapshotTest(
-      `block
+      `block-beta
  columns 3
    a["A wide one"] b:2 c:2 d
      `,
@@ -356,7 +356,7 @@ describe('Block diagram', () => {
  });
  it('BL28: composite block with a set width - f should use the available space', () => {
    imgSnapshotTest(
-      `block
+      `block-beta
  columns 3
  a:3
  block:e:3
@@ -370,7 +370,7 @@ describe('Block diagram', () => {

  it('BL29: composite block with a set width - f and g should split the available space', () => {
    imgSnapshotTest(
-      `block
+      `block-beta
  columns 3
  a:3
  block:e:3
@@ -384,28 +384,4 @@ describe('Block diagram', () => {
      {}
    );
  });
-
-  it('BL30: block should overflow if too wide for columns', () => {
-    imgSnapshotTest(
-      `block-beta
-  columns 2
-  fit:2
-  overflow:3
-  short:1
-  also_overflow:2
-`,
-      {}
-    );
-  });
-
-  it('BL31: edge without arrow syntax should render with no arrowheads', () => {
-    imgSnapshotTest(
-      `block-beta
-  a
-  b
-  a --- b
-`,
-      {}
-    );
-  });
 });
--- a/cypress/integration/rendering/c4.spec.js
+++ b/cypress/integration/rendering/c4.spec.js
@@ -114,28 +114,4 @@ describe('C4 diagram', () => {
      {}
    );
  });
-  it('C4.6 should render C4Context diagram with ComponentQueue_Ext', () => {
-    imgSnapshotTest(
-      `
-      C4Context
-      title System Context diagram with ComponentQueue_Ext
-
-      Enterprise_Boundary(b0, "BankBoundary0") {
-          Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
-
-          System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
-
-          Enterprise_Boundary(b1, "BankBoundary") {
-            ComponentQueue_Ext(msgQueue, "Message Queue", "RabbitMQ", "External message queue system for processing banking transactions")
-            System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
-          }
-        }
-
-      BiRel(customerA, SystemAA, "Uses")
-      Rel(SystemAA, msgQueue, "Sends messages to")
-      Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
-      `,
-      {}
-    );
-  });
 });
--- a/cypress/integration/rendering/classDiagram-v2.spec.js
+++ b/cypress/integration/rendering/classDiagram-v2.spec.js
@@ -562,20 +562,6 @@ class C13["With Città foreign language"]
      `
    );
  });
-  it('should add notes in namespaces', function () {
-    imgSnapshotTest(
-      `
-      classDiagram
-      note "This is a outer note"
-      note for C1 "This is a outer note for C1"
-      namespace Namespace1 {
-        note "This is a inner note"
-        note for C1 "This is a inner note for C1"
-        class C1
-      }
-      `
-    );
-  });
  it('should render a simple class diagram with no members', () => {
    imgSnapshotTest(
      `
--- a/cypress/integration/rendering/classDiagram-v3.spec.js
+++ b/cypress/integration/rendering/classDiagram-v3.spec.js
@@ -709,20 +709,6 @@ class C13["With Città foreign language"]
      `
    );
  });
-  it('should add notes in namespaces', function () {
-    imgSnapshotTest(
-      `
-      classDiagram
-      note "This is a outer note"
-      note for C1 "This is a outer note for C1"
-      namespace Namespace1 {
-        note "This is a inner note"
-        note for C1 "This is a inner note for C1"
-        class C1
-      }
-      `
-    );
-  });
  it('should render a simple class diagram with no members', () => {
    imgSnapshotTest(
      `
--- a/cypress/integration/rendering/classDiagram.spec.js
+++ b/cypress/integration/rendering/classDiagram.spec.js
@@ -495,47 +495,4 @@ describe('Class diagram', () => {
      cy.get('a').should('have.attr', 'target', '_blank').should('have.attr', 'rel', 'noopener');
    });
  });
-
-  describe('Include char sequence "graph" in text (#6795)', () => {
-    it('has a label with char sequence "graph"', () => {
-      imgSnapshotTest(
-        `
-        classDiagram
-          class Person {
-            +String name
-            -Int id
-            #double age
-            +Text demographicProfile
-          }
-        `,
-        { flowchart: { defaultRenderer: 'elk' } }
-      );
-    });
-  });
-
-  it('should handle backticks for namespace and class names', () => {
-    imgSnapshotTest(
-      `
-      classDiagram
-          namespace \`A::B\` {
-              class \`IPC::Sender\`
-          }
-          RenderProcessHost --|> \`IPC::Sender\`
-      `,
-      {}
-    );
-    it('should handle an empty class body with empty braces', () => {
-      imgSnapshotTest(
-        ` classDiagram
-        class FooBase~T~ {}
-    class Bar {
-        +Zip
-        +Zap()
-    }
-    FooBase <|-- Ba
-        `,
-        { flowchart: { defaultRenderer: 'elk' } }
-      );
-    });
-  });
 });
--- a/cypress/integration/rendering/erDiagram.spec.js
+++ b/cypress/integration/rendering/erDiagram.spec.js
@@ -354,107 +354,4 @@ ORDER ||--|{ LINE-ITEM : contains
      { logLevel: 1 }
    );
  });
-
-  describe('Include char sequence "graph" in text (#6795)', () => {
-    it('has a label with char sequence "graph"', () => {
-      imgSnapshotTest(
-        `
-        erDiagram
-          p[Photograph] {
-            varchar(12) jobId
-            date dateCreated
-          }
-        `,
-        { flowchart: { defaultRenderer: 'elk' } }
-      );
-    });
-  });
-
-  describe('Special characters and numbers syntax', () => {
-    it('should render ER diagram with numeric entity names', () => {
-      imgSnapshotTest(
-        `
-        erDiagram
-          1 ||--|| ORDER : places
-          ORDER ||--|{ 2 : contains
-          2 ||--o{ 3.5 : references
-        `,
-        { logLevel: 1 }
-      );
-    });
-
-    it('should render ER diagram with "u" character in entity names and cardinality', () => {
-      imgSnapshotTest(
-        `
-        erDiagram
-          CUSTOMER ||--|| u : has
-          u ||--|| ORDER : places
-          PROJECT u--o{ TEAM_MEMBER : "parent"
-        `,
-        { logLevel: 1 }
-      );
-    });
-
-    it('should render ER diagram with decimal numbers in relationships', () => {
-      imgSnapshotTest(
-        `
-        erDiagram
-          2.5 ||--|| 1.5 : has
-          CUSTOMER ||--o{ 3.14 : references
-          1.0 ||--|{ ORDER : contains
-        `,
-        { logLevel: 1 }
-      );
-    });
-
-    it('should render ER diagram with numeric entity names and attributes', () => {
-      imgSnapshotTest(
-        `
-        erDiagram
-          1 {
-            string name
-            int value
-          }
-          1 ||--|| ORDER : places
-          ORDER {
-            float price
-            string description
-          }
-        `,
-        { logLevel: 1 }
-      );
-    });
-
-    it('should render complex ER diagram with mixed special entity names', () => {
-      imgSnapshotTest(
-        `
-        erDiagram
-          CUSTOMER ||--o{ 1 : places
-          1 ||--|{ u : contains
-          1.5
-          u ||--|| 2.5 : processes
-          2.5 {
-            string id
-            float value
-          }
-          u {
-            varchar(50) name
-            int count
-          }
-        `,
-        { logLevel: 1 }
-      );
-    });
-    it('should render ER diagram with standalone numeric entities', () => {
-      imgSnapshotTest(
-        `erDiagram
-         PRODUCT ||--o{ ORDER-ITEM : has
-         1.5
-         u
-         1
-        `,
-        { logLevel: 1 }
-      );
-    });
-  });
 });
--- a/cypress/integration/rendering/flowchart-elk.spec.js
+++ b/cypress/integration/rendering/flowchart-elk.spec.js
@@ -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, 15);
+      verifyNumber(maxWidthValue, 380);
    });
  });
  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, 15);
+      verifyNumber(width, 380);
      expect(svg).to.not.have.attr('style');
    });
  });
@@ -1053,21 +1053,6 @@ flowchart LR
      });
    });
  });
-
-  it('6647-elk: should keep node order when using elk layout unless it would add crossings', () => {
-    imgSnapshotTest(
-      `---
-config:
-  layout: elk
---
-      flowchart TB
-        a --> a1 & a2 & a3 & a4
-        b --> b1 & b2
-        b2 --> b3
-        b1 --> b4
-      `
-    );
-  });
 });

 describe('Title and arrow styling #4813', () => {
--- a/cypress/integration/rendering/flowchart-handDrawn.spec.js
+++ b/cypress/integration/rendering/flowchart-handDrawn.spec.js
@@ -1029,19 +1029,4 @@ graph TD
      }
    );
  });
-
-  it('FDH49: should add edge animation', () => {
-    renderGraph(
-      `
-      flowchart TD
-          A(["Start"]) L_A_B_0@--> B{"Decision"}
-          B --> C["Option A"] & D["Option B"]
-          style C stroke-width:4px,stroke-dasharray: 5
-          L_A_B_0@{ animation: slow } 
-          L_B_D_0@{ animation: fast }`,
-      { look: 'handDrawn', screenshot: false }
-    );
-    cy.get('path#L_A_B_0').should('have.class', 'edge-animation-slow');
-    cy.get('path#L_B_D_0').should('have.class', 'edge-animation-fast');
-  });
 });
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -79,18 +79,6 @@ describe('Flowchart v2', () => {
      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
    );
  });
-  it('6a: should render complex HTML in labels with sandbox security', () => {
-    imgSnapshotTest(
-      `flowchart TD
-    A[Christmas] -->|Get money| B(Go shopping)
-    B --> C{Let me think}
-    C -->|One| D[Laptop]
-    C -->|Two| E[iPhone]
-    C -->|Three| F[fa:fa-car Car]
-      `,
-      { securityLevel: 'sandbox', flowchart: { htmlLabels: true } }
-    );
-  });
  it('7: should render a flowchart when useMaxWidth is true (default)', () => {
    renderGraph(
      `flowchart TD
@@ -1125,90 +1113,4 @@ end
      );
    });
  });
-  describe('Flowchart Node Shape Rendering', () => {
-    it('should render a stadium-shaped node', () => {
-      imgSnapshotTest(
-        `flowchart TB
-          A(["Start"]) --> n1["Untitled Node"]
-          A --> n2["Untitled Node"]
-        `,
-        {}
-      );
-    });
-    it('should render a diamond-shaped node using shape config', () => {
-      imgSnapshotTest(
-        `flowchart BT
-          n2["Untitled Node"] --> n1["Diamond"]
-          n1@{ shape: diam}
-        `,
-        {}
-      );
-    });
-    it('should render a rounded rectangle and a normal rectangle', () => {
-      imgSnapshotTest(
-        `flowchart BT
-        n2["Untitled Node"] --> n1["Rounded Rectangle"]
-        n3["Untitled Node"] --> n1
-        n1@{ shape: rounded}
-        n3@{ shape: rect}
-    `,
-        {}
-      );
-    });
-  });
-
-  it('6617: Per Link Curve Styling using edge Ids', () => {
-    imgSnapshotTest(
-      `flowchart TD
-      A e1@-->B e5@--> E
-      E e7@--> D
-      B e3@-->D
-      A e2@-->C e4@-->D
-      C e6@--> F
-      F e8@--> D
-      e1@{ curve: natural }
-      e2@{ curve: stepAfter }
-      e3@{ curve: monotoneY }
-      e4@{ curve: bumpY }
-      e5@{ curve: linear }
-      e6@{ curve: catmullRom }
-      e7@{ curve: cardinal }
-      `
-    );
-  });
-
-  describe('when rendering unsuported markdown', () => {
-    const graph = `flowchart TB
-    mermaid{"What is\nyourmermaid version?"} --> v10["<11"] --"\`<**1**1\`"--> fine["No bug"]
-    mermaid --> v11[">= v11"] -- ">= v11" --> broken["Affected by https://github.com/mermaid-js/mermaid/issues/5824"]
-    subgraph subgraph1["\`How to fix **fix**\`"]
-        broken --> B["B"]
-    end
-    githost["Github, Gitlab, BitBucket, etc."]
-    githost2["\`Github, Gitlab, BitBucket, etc.\`"]
-    a["1."]
-    b["- x"]
-      `;
-
-    it('should render raw strings', () => {
-      imgSnapshotTest(graph);
-    });
-
-    it('should render raw strings with htmlLabels: false', () => {
-      imgSnapshotTest(graph, { htmlLabels: false });
-    });
-  });
-
-  it('V2 - 17: should apply class def colour to edge label', () => {
-    imgSnapshotTest(
-      ` graph LR
-    id1(Start) link@-- "Label" -->id2(Stop)
-    style id1 fill:#f9f,stroke:#333,stroke-width:4px
-
-class id2 myClass
-classDef myClass fill:#bbf,stroke:#f66,stroke-width:2px,color:white,stroke-dasharray: 5 5
-class link myClass
-`
-    );
-  });
 });
--- a/cypress/integration/rendering/flowchart.spec.js
+++ b/cypress/integration/rendering/flowchart.spec.js
@@ -774,21 +774,6 @@ describe('Graph', () => {
      expect(svg).to.not.have.attr('style');
    });
  });
-  it('40: should add edge animation', () => {
-    renderGraph(
-      `
-      flowchart TD
-          A(["Start"]) L_A_B_0@--> B{"Decision"}
-          B --> C["Option A"] & D["Option B"]
-          style C stroke-width:4px,stroke-dasharray: 5
-          L_A_B_0@{ animation: slow } 
-          L_B_D_0@{ animation: fast }`,
-      { screenshot: false }
-    );
-    // Verify animation classes are applied to both edges
-    cy.get('path#L_A_B_0').should('have.class', 'edge-animation-slow');
-    cy.get('path#L_B_D_0').should('have.class', 'edge-animation-fast');
-  });
  it('58: handle styling with style expressions', () => {
    imgSnapshotTest(
      `
@@ -988,19 +973,4 @@ graph TD
      }
    );
  });
-
-  it('70: should render a subgraph with direction TD', () => {
-    imgSnapshotTest(
-      `
-      flowchart LR
-        subgraph A
-          direction TD
-          a --> b
-        end
-      `,
-      {
-        fontFamily: 'courier',
-      }
-    );
-  });
 });
--- a/cypress/integration/rendering/gantt.spec.js
+++ b/cypress/integration/rendering/gantt.spec.js
@@ -565,18 +565,6 @@ describe('Gantt diagram', () => {
    );
  });

-  it('should render only the day when using dateFormat D', () => {
-    imgSnapshotTest(
-      `
-    gantt
-      title Test
-      dateFormat D
-      A :a, 1, 1d
-    `,
-      {}
-    );
-  });
-
  // TODO: fix it
  //
  // This test is skipped deliberately
@@ -659,49 +647,6 @@ describe('Gantt diagram', () => {
    );
  });

-  it('should render a gantt diagram excluding a specific date in YYYY-MM-DD HH:mm:ss format', () => {
-    imgSnapshotTest(
-      `
-    gantt
-      dateFormat  YYYY-MM-DD HH:mm:ss
-      excludes    2025-07-07
-      section     Section
-      A task      :a1, 2025-07-04 20:30:30, 2025-07-08 10:30:30
-      Another task:after a1, 20h
-    `,
-      {}
-    );
-  });
-
-  it('should render a gantt diagram excluding saturday and sunday in YYYY-MM-DD HH:mm:ss format', () => {
-    imgSnapshotTest(
-      `
-        gantt
-      dateFormat  YYYY-MM-DD HH:mm:ss
-      excludes    weekends
-       weekend saturday
-      section     Section
-      A task      :a1, 2025-07-04 20:30:30, 2025-07-08 10:30:30
-      Another task:after a1, 20h
-    `,
-      {}
-    );
-  });
-  it('should render a gantt diagram excluding friday and saturday in YYYY-MM-DD HH:mm:ss format', () => {
-    imgSnapshotTest(
-      `
-        gantt
-      dateFormat  YYYY-MM-DD HH:mm:ss
-      excludes    weekends
-       weekend friday
-      section     Section
-      A task      :a1, 2025-07-04 20:30:30, 2025-07-08 10:30:30
-      Another task:after a1, 20h
-    `,
-      {}
-    );
-  });
-
  it("should render when there's a semicolon in the title", () => {
    imgSnapshotTest(
      `
@@ -803,34 +748,4 @@ describe('Gantt diagram', () => {
      {}
    );
  });
-  it('should handle numeric timestamps with dateFormat x', () => {
-    imgSnapshotTest(
-      `
-     gantt
-     title Process time profile (ms)
-     dateFormat x
-     axisFormat %L
-     tickInterval 250millisecond
-
-     section Pipeline
-     Parse JSON p1: 000, 120
-    `,
-      {}
-    );
-  });
-  it('should handle numeric timestamps with dateFormat X', () => {
-    imgSnapshotTest(
-      `
-     gantt
-     title Process time profile (ms)
-     dateFormat X
-     axisFormat %L
-     tickInterval 250millisecond
-
-     section Pipeline
-     Parse JSON p1: 000, 120
-    `,
-      {}
-    );
-  });
 });
--- a/cypress/integration/rendering/mindmap-tidy-tree.spec.js
+++ b/cypress/integration/rendering/mindmap-tidy-tree.spec.js
@@ -1,79 +0,0 @@
-import { imgSnapshotTest } from '../../helpers/util.ts';
-
-describe('Mindmap Tidy Tree', () => {
-  it('1-tidy-tree: should render a simple mindmap without children', () => {
-    imgSnapshotTest(
-      ` ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap))
-        A
-        B
-      `
-    );
-  });
-  it('2-tidy-tree: should render a simple mindmap', () => {
-    imgSnapshotTest(
-      ` ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap is a long thing))
-        A
-        B
-        C
-        D
-      `
-    );
-  });
-  it('3-tidy-tree: should render a  mindmap with different shapes', () => {
-    imgSnapshotTest(
-      ` ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap))
-        Origins
-          Long history
-          ::icon(fa fa-book)
-          Popularisation
-            British popular psychology author Tony Buzan
-        Research
-          On effectiveness&lt;br/>and features
-          On Automatic creation
-            Uses
-                Creative techniques
-                Strategic planning
-                Argument mapping
-        Tools
-              id)I am a cloud(
-                  id))I am a bang((
-                    Tools
-      `
-    );
-  });
-  it('4-tidy-tree: should render a mindmap with children', () => {
-    imgSnapshotTest(
-      ` ---
-      config:
-        layout: tidy-tree
-      ---
-       mindmap
-      ((This is a mindmap))
-        child1
-         grandchild 1
-         grandchild 2
-        child2
-         grandchild 3
-         grandchild 4
-        child3
-         grandchild 5
-         grandchild 6
-      `
-    );
-  });
-});
--- a/cypress/integration/rendering/mindmap.spec.ts
+++ b/cypress/integration/rendering/mindmap.spec.ts
@@ -159,10 +159,12 @@ root
  });
  it('square shape', () => {
    imgSnapshotTest(
-      `mindmap
+      `
+mindmap
    root[
      The root
-    ]`,
+    ]
+      `,
      {},
      undefined,
      shouldHaveRoot
@@ -170,10 +172,12 @@ root
  });
  it('rounded rect shape', () => {
    imgSnapshotTest(
-      `mindmap
+      `
+mindmap
    root((
      The root
-    ))`,
+    ))
+      `,
      {},
      undefined,
      shouldHaveRoot
@@ -181,10 +185,12 @@ root
  });
  it('circle shape', () => {
    imgSnapshotTest(
-      `mindmap
+      `
+mindmap
    root(
      The root
-    )`,
+    )
+      `,
      {},
      undefined,
      shouldHaveRoot
@@ -192,8 +198,10 @@ root
  });
  it('default shape', () => {
    imgSnapshotTest(
-      `mindmap
-  The root`,
+      `
+mindmap
+  The root
+      `,
      {},
      undefined,
      shouldHaveRoot
@@ -201,10 +209,12 @@ root
  });
  it('adding children', () => {
    imgSnapshotTest(
-      `mindmap
+      `
+mindmap
  The root
    child1
-    child2`,
+    child2
+      `,
      {},
      undefined,
      shouldHaveRoot
@@ -212,11 +222,13 @@ root
  });
  it('adding grand children', () => {
    imgSnapshotTest(
-      `mindmap
+      `
+mindmap
  The root
    child1
      child2
-      child3`,
+      child3
+      `,
      {},
      undefined,
      shouldHaveRoot
@@ -228,22 +240,9 @@ root
        `mindmap
    id1[\`**Start** with
    a second line 😎\`]
-      id2[\`The dog in **the** hog... a *very long text* about it Word!\`]`
-      );
-    });
-  });
-  describe('Include char sequence "graph" in text (#6795)', () => {
-    it('has a label with char sequence "graph"', () => {
-      imgSnapshotTest(
-        ` mindmap
-          root
-            Photograph
-              Waterfall
-              Landscape
-            Geography
-              Mountains
-              Rocks`,
-        { flowchart: { defaultRenderer: 'elk' } }
+      id2[\`The dog in **the** hog... a *very long text* about it
+Word!\`]
+`
      );
    });
  });
--- a/cypress/integration/rendering/pie.spec.ts
+++ b/cypress/integration/rendering/pie.spec.ts
@@ -82,13 +82,4 @@ describe('pie chart', () => {
      `
    );
  });
-  it('should render pie slices only for non-zero values but shows all legends', () => {
-    imgSnapshotTest(
-      `   pie title Pets adopted by volunteers
-    "Dogs" : 386
-    "Cats" : 85
-    "Rats" : 1
-      `
-    );
-  });
 });
--- a/cypress/integration/rendering/sankey.spec.ts
+++ b/cypress/integration/rendering/sankey.spec.ts
@@ -15,7 +15,7 @@ describe('Sankey Diagram', () => {
  describe('when given a linkColor', function () {
    this.beforeAll(() => {
      cy.wrap(
-        `sankey
+        `sankey-beta
      a,b,10
      `
      ).as('graph');
@@ -62,7 +62,7 @@ describe('Sankey Diagram', () => {
    this.beforeAll(() => {
      cy.wrap(
        `
-        sankey
+        sankey-beta
        
        a,b,8
        b,c,8
--- a/cypress/integration/rendering/sequencediagram-v2.spec.js
+++ b/cypress/integration/rendering/sequencediagram-v2.spec.js
--- a/cypress/integration/rendering/sequencediagram.spec.js
+++ b/cypress/integration/rendering/sequencediagram.spec.js
@@ -893,17 +893,6 @@ describe('Sequence diagram', () => {
        }
      );
    });
-
-    it('should handle bidirectional arrows with autonumber', () => {
-      imgSnapshotTest(`
-       sequenceDiagram
-       autonumber
-       participant A
-       participant B
-       A<<->>B: This is a bidirectional message
-       A->B: This is a normal message`);
-    });
-
    it('should support actor links and properties when not mirrored EXPERIMENTAL: USE WITH CAUTION', () => {
      //Be aware that the syntax for "properties" is likely to be changed.
      imgSnapshotTest(
@@ -1053,167 +1042,4 @@ describe('Sequence diagram', () => {
      ]);
    });
  });
-  describe('render new arrow type', () => {
-    it('should render Solid half arrow top', () => {
-      imgSnapshotTest(
-        `
-    sequenceDiagram
-      Alice -|\\  John: Hello John, how are you? 
-      Alice-|\\  John: Hi Alice, I can hear you!
-      Alice -|\\  John: Test
-      `
-      );
-    });
-    it('should render Solid half arrow bottom', () => {
-      imgSnapshotTest(
-        `
-    sequenceDiagram
-      Alice-|/John: Hello John, how are you?
-      Alice-|/John: Hi Alice, I can hear you!
-      Alice-|/John: Test
-      `
-      );
-    });
-
-    it('should render Stick half arrow top ', () => {
-      imgSnapshotTest(
-        `
-     sequenceDiagram
-      Alice-\\\\John: Hello John, how are you?
-      Alice-\\\\John: Hi Alice, I can hear you!
-      Alice-\\\\John: Test
-      `
-      );
-    });
-    it('should render Stick half arrow bottom ', () => {
-      imgSnapshotTest(
-        `
-       sequenceDiagram
-      Alice-//John: Hello John, how are you?
-      Alice-//John: Hi Alice, I can hear you!
-      Alice-//John: Test
-      `
-      );
-    });
-    it('should render Solid half arrow top reverse ', () => {
-      imgSnapshotTest(
-        `
-       sequenceDiagram
-      Alice/|-John: Hello Alice, how are you?
-      Alice/|-John: Hi Alice, I can hear you!
-      Alice/|-John: Test
-
-      `
-      );
-    });
-
-    it('should render Solid half arrow bottom reverse ', () => {
-      imgSnapshotTest(
-        `sequenceDiagram
-        Alice \\|- John: Hello Alice, how are you?
-        Alice \\|- John: Hi Alice, I can hear you!
-        Alice \\|- John: Test`
-      );
-    });
-
-    it('should render Stick half arrow top reverse ', () => {
-      imgSnapshotTest(
-        `
-      sequenceDiagram
-      Alice //-John: Hello Alice, how are you?
-      Alice //-John: Hi Alice, I can hear you!
-      Alice //-John: Test`
-      );
-    });
-
-    it('should render Stick half arrow bottom reverse ', () => {
-      imgSnapshotTest(
-        `
-       sequenceDiagram
-      Alice \\\\-John: Hello Alice, how are you?
-      Alice \\\\-John: Hi Alice, I can hear you!
-      Alice \\\\-John: Test`
-      );
-    });
-
-    it('should render Solid half arrow top dotted', () => {
-      imgSnapshotTest(
-        `
-     sequenceDiagram
-      Alice --|\\John: Hello John, how are you?
-      Alice --|\\John: Hi Alice, I can hear you!
-      Alice --|\\John: Test`
-      );
-    });
-
-    it('should render Solid half arrow bottom dotted', () => {
-      imgSnapshotTest(
-        `
-     sequenceDiagram
-      Alice --|/John: Hello John, how are you?
-      Alice --|/John: Hi Alice, I can hear you!
-      Alice --|/John: Test`
-      );
-    });
-
-    it('should render Stick half arrow top dotted', () => {
-      imgSnapshotTest(
-        `
-     sequenceDiagram
-      Alice--\\\\John: Hello John, how are you?
-      Alice--\\\\John: Hi Alice, I can hear you!
-      Alice--\\\\John: Test`
-      );
-    });
-
-    it('should render Stick half arrow bottom dotted', () => {
-      imgSnapshotTest(
-        `
-     sequenceDiagram
-      Alice--//John: Hello John, how are you?
-      Alice--//John: Hi Alice, I can hear you!
-      Alice--//John: Test`
-      );
-    });
-
-    it('should render Solid half arrow top reverse dotted', () => {
-      imgSnapshotTest(
-        `
-  sequenceDiagram
-      Alice/|--John: Hello Alice, how are you?
-      Alice/|--John: Hi Alice, I can hear you!
-      Alice/|--John: Test`
-      );
-    });
-
-    it('should render Solid half arrow bottom reverse dotted', () => {
-      imgSnapshotTest(
-        `
-  sequenceDiagram
-      Alice\\|--John: Hello Alice, how are you?
-      Alice\\|--John: Hi Alice, I can hear you!
-      Alice\\|--John: Test`
-      );
-    });
-
-    it('should render Stick half arrow top reverse dotted ', () => {
-      imgSnapshotTest(
-        `
-  sequenceDiagram
-      Alice//--John: Hello Alice, how are you?
-      Alice//--John: Hi Alice, I can hear you!
-      Alice//--John: Test`
-      );
-    });
-
-    it('should render Stick half arrow bottom reverse dotted ', () => {
-      imgSnapshotTest(
-        `
-  sequenceDiagram
-      Alice\\\\--John: Hello Alice, how are you?
-      Alice\\\\--John: Hi Alice, I can hear you!
-      Alice\\\\--John: Test`
-      );
-    });
-  });
 });
--- a/cypress/integration/rendering/stateDiagram-v2.spec.js
+++ b/cypress/integration/rendering/stateDiagram-v2.spec.js
@@ -602,231 +602,6 @@ State1 --> [*]
      --
      55
  }
-`,
-      {}
-    );
-  });
-  it('should render edge labels correctly', () => {
-    imgSnapshotTest(
-      `---
-title: On The Way To Something Something DarkSide
-config:
-  look: default
-  theme: default
---
-
-stateDiagram-v2
-
-   state State1_____________
-   {
-      c0
-   }
-
-   state State2_____________
-   {
-      c1
-   }
-
-   state State3_____________
-   {
-      c7
-   }
-
-   state State4_____________
-   {
-      c2
-   }
-
-   state State5_____________
-   {
-      c3
-   }
-
-   state State6_____________
-   {
-      c4
-   }
-
-   state State7_____________
-   {
-      c5
-   }
-
-   state State8_____________
-   {
-      c6
-   }
-
-
-[*] --> State1_____________
-State1_____________ --> State2_____________   : Transition1_____
-State2_____________ --> State4_____________   : Transition2_____
-State2_____________ --> State3_____________   : Transition3_____
-State3_____________ --> State2_____________
-State4_____________ --> State2_____________   : Transition5_____
-State4_____________ --> State5_____________   : Transition6_____
-State5_____________ --> State6_____________   : Transition7_____
-State6_____________ --> State4_____________   : Transition8_____
-State2_____________ --> State7_____________   : Transition4_____
-State4_____________ --> State7_____________   : Transition4_____
-State5_____________ --> State7_____________   : Transition4_____
-State6_____________ --> State7_____________   : Transition4_____
-State7_____________ --> State1_____________   : Transition9_____
-State5_____________ --> State8_____________   : Transition10____
-State8_____________ --> State5_____________   : Transition11____
-`,
-      {}
-    );
-  });
-  it('should render edge labels correctly with multiple transitions', () => {
-    imgSnapshotTest(
-      `---
-title: Multiple Transitions
-config:
-  look: default
-  theme: default
---
-
-stateDiagram-v2
-
-   state State1_____________
-   {
-      c0
-   }
-
-   state State2_____________
-   {
-      c1
-   }
-
-   state State3_____________
-   {
-      c7
-   }
-
-   state State4_____________
-   {
-      c2
-   }
-
-   state State5_____________
-   {
-      c3
-   }
-
-   state State6_____________
-   {
-      c4
-   }
-
-   state State7_____________
-   {
-      c5
-   }
-
-   state State8_____________
-   {
-      c6
-   }
-
-   state State9_____________
-   {
-      c9
-   }
-
-[*] --> State1_____________
-State1_____________ --> State2_____________   : Transition1_____
-State2_____________ --> State4_____________   : Transition2_____
-State2_____________ --> State3_____________   : Transition3_____
-State3_____________ --> State2_____________
-State4_____________ --> State2_____________   : Transition5_____
-State4_____________ --> State5_____________   : Transition6_____
-State5_____________ --> State6_____________   : Transition7_____
-State6_____________ --> State4_____________   : Transition8_____
-State2_____________ --> State7_____________   : Transition4_____
-State4_____________ --> State7_____________   : Transition4_____
-State5_____________ --> State7_____________   : Transition4_____
-State6_____________ --> State7_____________   : Transition4_____
-State7_____________ --> State1_____________   : Transition9_____
-State5_____________ --> State8_____________   : Transition10____
-State8_____________ --> State5_____________   : Transition11____
-State9_____________ --> State8_____________   : Transition12____
-`,
-      {}
-    );
-  });
-
-  it('should render edge labels correctly with multiple states', () => {
-    imgSnapshotTest(
-      `---
-title: Multiple States
-config:
-  look: default
-  theme: default
---
-
-stateDiagram-v2
-
-   state State1_____________
-   {
-      c0
-   }
-
-   state State2_____________
-   {
-      c1
-   }
-
-   state State3_____________
-   {
-      c7
-   }
-
-   state State4_____________
-   {
-      c2
-   }
-
-   state State5_____________
-   {
-      c3
-   }
-
-   state State6_____________
-   {
-      c4
-   }
-
-   state State7_____________
-   {
-      c5
-   }
-
-   state State8_____________
-   {
-      c6
-   }
-
-   state State9_____________
-   {
-      c9
-   }
-
-   state State10_____________
-   {
-      c10
-   }
-
-[*] --> State1_____________
-State1_____________ --> State2_____________   : Transition1_____
-State2_____________ --> State3_____________   : Transition2_____
-State3_____________ --> State4_____________   : Transition3_____
-State4_____________ --> State5_____________   : Transition4_____
-State5_____________ --> State6_____________   : Transition5_____
-State6_____________ --> State7_____________   : Transition6_____
-State7_____________ --> State8_____________   : Transition7_____
-State8_____________ --> State9_____________   : Transition8_____
-State9_____________ --> State10_____________   : Transition9_____
 `,
      {}
    );
--- a/cypress/integration/rendering/xyChart.spec.js
+++ b/cypress/integration/rendering/xyChart.spec.js
@@ -1,7 +1,7 @@
 import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';

 describe('XY Chart', () => {
-  it('should render the simplest possible xy-beta chart', () => {
+  it('should render the simplest possible chart', () => {
    imgSnapshotTest(
      `
      xychart-beta
@@ -10,19 +10,10 @@ describe('XY Chart', () => {
      {}
    );
  });
-  it('should render the simplest possible xy chart', () => {
-    imgSnapshotTest(
-      `
-      xychart
-        line [10, 30, 20]
-      `,
-      {}
-    );
-  });
  it('Should render a complete chart', () => {
    imgSnapshotTest(
      `
-      xychart
+      xychart-beta
        title "Sales Revenue"
        x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
        y-axis "Revenue (in $)" 4000 --> 11000
@@ -35,7 +26,7 @@ describe('XY Chart', () => {
  it('Should render a chart without title', () => {
    imgSnapshotTest(
      `
-      xychart
+      xychart-beta
        x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
        y-axis "Revenue (in $)" 4000 --> 11000
        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
@@ -47,7 +38,7 @@ describe('XY Chart', () => {
  it('y-axis title not required', () => {
    imgSnapshotTest(
      `
-      xychart
+      xychart-beta
        x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
        y-axis 4000 --> 11000
        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
@@ -59,7 +50,7 @@ describe('XY Chart', () => {
  it('Should render a chart without y-axis with different range', () => {
    imgSnapshotTest(
      `
-      xychart
+      xychart-beta
        x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
        bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000]
        line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800]
@@ -70,7 +61,7 @@ describe('XY Chart', () => {
  it('x axis title not required', () => {
    imgSnapshotTest(
      `
-      xychart
+      xychart-beta
        x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
        bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000]
        line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800]
@@ -81,7 +72,7 @@ describe('XY Chart', () => {
  it('Multiple plots can be rendered', () => {
    imgSnapshotTest(
      `
-      xychart
+      xychart-beta
        line [23, 46, 77, 34]
        line [45, 32, 33, 12]
        bar [87, 54, 99, 85]
@@ -95,7 +86,7 @@ describe('XY Chart', () => {
  it('Decimals and negative numbers are supported', () => {
    imgSnapshotTest(
      `
-      xychart
+      xychart-beta
        y-axis -2.4 --> 3.5
        line [+1.3, .6, 2.4, -.34]
      `,
@@ -113,7 +104,7 @@ describe('XY Chart', () => {
          height: 20
          plotReservedSpacePercent: 100
      ---
-      xychart
+      xychart-beta
        line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
      `,
      {}
@@ -139,7 +130,7 @@ describe('XY Chart', () => {
            showTick: false
            showAxisLine: false
      ---
-      xychart
+      xychart-beta
        bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
      `,
      {}
@@ -149,7 +140,7 @@ describe('XY Chart', () => {
    imgSnapshotTest(
      `
      %%{init: {"xyChart": {"width": 1000, "height": 600, "titlePadding": 5, "titleFontSize": 10, "xAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5},  "yAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "plotBorderWidth": 5, "chartOrientation": "horizontal", "plotReservedSpacePercent": 60  }}}%%
-      xychart
+      xychart-beta
        title "Sales Revenue"
        x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
        y-axis "Revenue (in $)" 4000 --> 11000
@@ -190,7 +181,7 @@ describe('XY Chart', () => {
          plotReservedSpacePercent: 60
          showDataLabel: true
      ---
-      xychart
+      xychart-beta
        title "Sales Revenue"
        x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
        y-axis "Revenue (in $)" 4000 --> 11000
@@ -211,7 +202,7 @@ describe('XY Chart', () => {
          yAxis:
            showTitle: false
      ---
-      xychart
+      xychart-beta
        title "Sales Revenue"
        x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
        y-axis "Revenue (in $)" 4000 --> 11000
@@ -232,7 +223,7 @@ describe('XY Chart', () => {
          yAxis:
            showLabel: false
      ---
-      xychart
+      xychart-beta
        title "Sales Revenue"
        x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
        y-axis "Revenue (in $)" 4000 --> 11000
@@ -253,7 +244,7 @@ describe('XY Chart', () => {
          yAxis:
            showTick: false
      ---
-      xychart
+      xychart-beta
        title "Sales Revenue"
        x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
        y-axis "Revenue (in $)" 4000 --> 11000
@@ -274,7 +265,7 @@ describe('XY Chart', () => {
          yAxis:
            showAxisLine: false
      ---
-      xychart
+      xychart-beta
        title "Sales Revenue"
        x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
        y-axis "Revenue (in $)" 4000 --> 11000
@@ -303,7 +294,7 @@ describe('XY Chart', () => {
            xAxisLineColor: "#87ceeb"
            plotColorPalette: "#008000, #faba63"
      ---
-      xychart
+      xychart-beta
        title "Sales Revenue"
        x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
        y-axis "Revenue (in $)" 4000 --> 11000
@@ -316,7 +307,7 @@ describe('XY Chart', () => {
  it('should use the correct distances between data points', () => {
    imgSnapshotTest(
      `
-      xychart
+      xychart-beta
        x-axis 0 --> 2
        line [0, 1, 0, 1]
        bar [1, 0, 1, 0]
@@ -334,7 +325,7 @@ describe('XY Chart', () => {
      xyChart:
        showDataLabel: true
    ---
-    xychart
+    xychart-beta
      title "Sales Revenue"
      x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
      y-axis "Revenue (in $)" 4000 --> 11000
@@ -353,7 +344,7 @@ describe('XY Chart', () => {
        showDataLabel: true
        chartOrientation: horizontal
    ---
-    xychart
+    xychart-beta
      title "Sales Revenue"
      x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
      y-axis "Revenue (in $)" 4000 --> 11000
@@ -366,7 +357,7 @@ describe('XY Chart', () => {
  it('should render vertical bar chart without labels by default', () => {
    imgSnapshotTest(
      `
-    xychart
+    xychart-beta
      title "Sales Revenue"
      x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
      y-axis "Revenue (in $)" 4000 --> 11000
@@ -384,7 +375,7 @@ describe('XY Chart', () => {
      xyChart:
        chartOrientation: horizontal
    ---
-    xychart
+    xychart-beta
      title "Sales Revenue"
      x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
      y-axis "Revenue (in $)" 4000 --> 11000
@@ -402,7 +393,7 @@ describe('XY Chart', () => {
      xyChart:
        showDataLabel: true
    ---
-      xychart
+      xychart-beta
        title "Multiple Bar Plots"
        x-axis Categories [A, B, C]
        y-axis "Values" 0 --> 100
@@ -421,7 +412,7 @@ describe('XY Chart', () => {
        showDataLabel: true
        chartOrientation: horizontal
    ---
-      xychart
+      xychart-beta
        title "Multiple Bar Plots"
        x-axis Categories [A, B, C]
        y-axis "Values" 0 --> 100
@@ -439,7 +430,7 @@ describe('XY Chart', () => {
      xyChart:
        showDataLabel: true
    ---
-      xychart
+      xychart-beta
        title "Single Bar Chart"
        x-axis Categories [A]
        y-axis "Value" 0 --> 100
@@ -458,7 +449,7 @@ describe('XY Chart', () => {
        showDataLabel: true
        chartOrientation: horizontal
    ---
-      xychart
+      xychart-beta
        title "Single Bar Chart"
        x-axis Categories [A]
        y-axis "Value" 0 --> 100
@@ -476,7 +467,7 @@ describe('XY Chart', () => {
      xyChart:
        showDataLabel: true
    ---
-      xychart
+      xychart-beta
        title "Decimal and Negative Values"
        x-axis Categories [A, B, C]
        y-axis -10 --> 10
@@ -495,7 +486,7 @@ describe('XY Chart', () => {
        showDataLabel: true
        chartOrientation: horizontal
    ---
-      xychart
+      xychart-beta
        title "Decimal and Negative Values"
        x-axis Categories [A, B, C]
        y-axis -10 --> 10
@@ -513,7 +504,7 @@ describe('XY Chart', () => {
      xyChart:
        showDataLabel: true
    ---
-    xychart
+    xychart-beta
            title "Sales Revenue"
            x-axis Months [jan,b,c]
            y-axis "Revenue (in $)" 4000 --> 12000
@@ -570,7 +561,7 @@ describe('XY Chart', () => {
        showDataLabel: true
        chartOrientation: horizontal
    ---
-    xychart
+    xychart-beta
            title "Sales Revenue"
            x-axis Months [jan,b,c]
            y-axis "Revenue (in $)" 4000 --> 12000
@@ -624,7 +615,7 @@ describe('XY Chart', () => {
        xyChart:
          showDataLabel: true
      ---
-      xychart
+      xychart-beta
        title "Sales Revenue"
        x-axis Months [jan,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s]
        y-axis "Revenue (in $)" 4000 --> 12000
@@ -681,7 +672,7 @@ describe('XY Chart', () => {
        showDataLabel: true
        chartOrientation: horizontal
    ---
-    xychart
+    xychart-beta
      title "Sales Revenue"
      x-axis Months [jan,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s]
      y-axis "Revenue (in $)" 4000 --> 12000
@@ -735,7 +726,7 @@ describe('XY Chart', () => {
      xyChart:
        showDataLabel: true
    ---
-    xychart
+    xychart-beta
            title "Sales Revenue"
            x-axis Months [jan]
            y-axis "Revenue (in $)" 3000 --> 12000
@@ -792,7 +783,7 @@ describe('XY Chart', () => {
        showDataLabel: true
        chartOrientation: horizontal
    ---
-    xychart
+    xychart-beta
            title "Sales Revenue"
            x-axis Months [jan]
            y-axis "Revenue (in $)" 3000 --> 12000
--- a/cypress/platform/darshan.html
+++ b/cypress/platform/darshan.html
@@ -1,35 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>Mermaid Quick Test Page</title>
-    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
-    <style>
-      div.mermaid {
-        font-family: 'Courier New', Courier, monospace !important;
-      }
-    </style>
-  </head>
-
-  <body>
-    <h1>Pie chart demos</h1>
-    <pre class="mermaid">
-     pie title Default text position: Animal adoption
-        accTitle: simple pie char demo
-        accDescr: pie chart with 3 sections: dogs, cats, rats. Most are dogs.
-         "dogs" : -60.67
-        "rats" : 40.12
-    </pre>
-
-    <hr />
-    <script type="module">
-      import mermaid from '/mermaid.esm.mjs';
-      mermaid.initialize({
-        theme: 'forest',
-        logLevel: 3,
-        securityLevel: 'loose',
-      });
-    </script>
-  </body>
-</html>
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -32,8 +32,26 @@
      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
      rel="stylesheet"
    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Recursive:wght@300..1000&display=swap"
+      rel="stylesheet"
+    />

    <style>
+      .recursive-mermaid {
+        font-family: 'Recursive', sans-serif;
+        font-optical-sizing: auto;
+        font-weight: 500;
+        font-style: normal;
+        font-variation-settings:
+          'slnt' 0,
+          'CASL' 0,
+          'CRSV' 0.5,
+          'MONO' 0;
+      }
+
      body {
        /* background: rgb(221, 208, 208); */
        /* background: #333; */
@@ -45,7 +63,9 @@
      h1 {
        color: grey;
      }
-
+      .mermaid {
+        border: 1px solid red;
+      }
      .mermaid2 {
        display: none;
      }
@@ -83,6 +103,11 @@
        width: 100%;
      }

+      .class2 {
+        fill: red;
+        fill-opacity: 1;
+      }
+
      /* tspan {
              font-size: 6px !important;
            } */
@@ -106,252 +131,6 @@

  <body>
    <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: elk
-      ---
-      mindmap
-      root((mindmap))
-        Origins
-          Long history
-          ::icon(fa fa-book)
-          Popularisation
-            British popular psychology author Tony Buzan
-        Research
-          On effectiveness&lt;br/>and features
-          On Automatic creation
-            Uses
-                Creative techniques
-                Strategic planning
-                Argument mapping
-        Tools
-              id)I am a cloud(
-                  id))I am a bang((
-                    Tools
-    </pre>
-    <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: elk
-      ---
-      flowchart
-       aid0
-  </pre
-    >
-    <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: elk
-      ---
-      mindmap
-      aid0
-
-    </pre>
-    <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: ogdc
-      ---
-      flowchart-elk TB
-      c1-->a2
-      subgraph one
-      a1-->a2
-      end
-      subgraph two
-      b1-->b2
-      end
-      subgraph three
-      c1-->c2
-      end
-      one --> two
-      three --> two
-      two --> c2
-
-</pre
-    >
-    <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: elk
-      ---
-      flowchart TB
-
-        process_C
-      subgraph container_Alpha
-        subgraph process_B
-          pppB
-        end
-        subgraph process_A
-          pppA
-        end
-        process_B-->|via_AWSBatch|container_Beta
-        process_A-->|messages|container_Beta
-      end
-
-</pre
-    >
-    <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: elk
-      ---
-      flowchart TB
-      subgraph container_Beta
-        process_C
-      end
-      subgraph container_Alpha
-        subgraph process_B
-          pppB
-        end
-        subgraph process_A
-          pppA
-        end
-        process_B-->|via_AWSBatch|container_Beta
-        process_A-->|messages|container_Beta
-      end
-
-</pre
-    >
-    <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: elk
-      ---
-      flowchart TB
-      subgraph container_Beta
-        process_C
-      end
-
-        process_B-->|via_AWSBatch|container_Beta
-
-
-</pre
-    >
-    <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: elk
-      ---
-      classDiagram
-      note "I love this diagram!\nDo you love it?"
-      Class01 <|-- 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
-      Class12 <|.. Class08
-      Class11 ..>Class12
-      Class07 : equals()
-      Class07 : Object[] elementData
-      Class01 : size()
-      Class01 : int chimp
-      Class01 : int gorilla
-      Class01 : -int privateChimp
-      Class01 : +int publicGorilla
-      Class01 : #int protectedMarmoset
-      Class08 <--> C2: Cool label
-      class Class10 {
-        &lt;&lt;service&gt;&gt;
-        int id
-        test()
-      }
-      note for Class10 "Cool class\nI said it's very cool class!"
-</pre
-    >
-    <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: elk
-      ---
-      requirementDiagram
-        requirement test_req {
-        id: 1
-        text: the test text.
-        risk: high
-        verifymethod: test
-        }
-
-        element test_entity {
-        type: simulation
-        }
-
-        test_entity - satisfies -> test_req
-</pre
-    >
-    <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: elk
-      ---
-      flowchart-elk TB
-      internet
-      nat
-      router
-      compute1
-
-      subgraph project
-      router
-      nat
-        subgraph subnet1
-          compute1
-        end
-      end
-
-      %% router --> subnet1
-      subnet1  --> nat
-      %% nat --> internet
-</pre
-    >
-    <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: elk
-      ---
-      flowchart-elk TB
-      internet
-      nat
-      router
-      lb1
-      lb2
-      compute1
-      compute2
-      subgraph project
-      router
-      nat
-        subgraph subnet1
-          compute1
-          lb1
-        end
-        subgraph subnet2
-          compute2
-          lb2
-        end
-      end
-      internet --> router
-      router --> subnet1 & subnet2
-      subnet1 & subnet2 --> nat --> internet
-</pre
-    >
-    <pre id="diagram4" class="mermaid">
---
-config:
-  layout: elk
-  elk:
-    mergeEdges: false
-    forceNodeModelOrder: false
-    considerModelOrder: NONE
-
---
-            flowchart TB
-              a --> a1 & a2 & a3 & a4
-              b --> b1 & b2
-              b2 --> b3
-              b1 --> b4</pre
-    >
-    <pre id="diagram4" class="mermaid">
 treemap
 "Section 1"
    "Leaf 1.1": 12
@@ -362,149 +141,84 @@ treemap
    "Leaf 2.2": 25
    "Leaf 2.3": 12

-    </pre>
-    <pre id="diagram5" class="mermaid">
-      ---
-      config:
-        layout: elk
-        flowchart:
-          curve: rounded
-      ---
-      flowchart LR
-          I["fa:fa-code Text"] -- Mermaid js --> D["Use<br/>the<br/>editor!"]
-          I --> D & D
-          D@{ shape: question}
-          I@{ shape: question}
+classDef class1   fill:red,color:blue,stroke:#FFD600;

-    </pre>
-    <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap))
-        Origins
-          Long history
-          ::icon(fa fa-book)
-          Popularisation
-            British popular psychology author Tony Buzan
-        Research
-          On effectiveness<br/>and features
-          On Automatic creation
-            Uses
-                Creative techniques
-                Strategic planning
-                Argument mapping
-        Tools
-          Pen and paper
-          Mermaid

-    </pre>
-    <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: elk
-        flowchart:
-          curve: linear
-      ---
-      flowchart LR
-          A[A] --> B[B]
-          A[A] --- B([C])
-          A@{ shape: diamond}
-          %%B@{ shape: diamond}
-
-    </pre>
-    <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: elk
-        flowchart:
-          curve: linear
-      ---
-      flowchart LR
-          A[A] -- Mermaid js --> B[B]
-          A[A] -- Mermaid js --- B[B]
-          A@{ shape: diamond}
-          B@{ shape: diamond}
-
-    </pre>
-    <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: elk
-        flowchart:
-          curve: rounded
-      ---
-      flowchart LR
-          D["Use the editor"] -- Mermaid js --> I["fa:fa-code Text"]
-          I --> D & D
-          D@{ shape: question}
-          I@{ shape: question}
-    </pre>
-    <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: elk
-        flowchart:
-          curve: rounded
-        elk:
-          nodePlacementStrategy: NETWORK_SIMPLEX
-      ---
-      flowchart LR
-          D["Use the editor"] -- Mermaid js --> I["fa:fa-code Text"]
-          D --> I & I
-          a["a"]
-          D@{ shape: trap-b}
-          I@{ shape: lean-l}
-    </pre>
-    <pre id="diagram4" class="mermaid">
+</pre
+    >
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
-  layout: elk
-
+  treemap:
+    valueFormat: '$0,0'
 ---
-flowchart LR
- %% subgraph s1["Untitled subgraph"]
-        C["Evaluate"]
- %% end
+treemap
+"Budget"
+    "Operations"
+        "Salaries": 7000
+        "Equipment": 2000
+        "Supplies": 1000
+    "Marketing"
+        "Advertising": 4000
+        "Events": 1000

-    B --> C
-    </pre>
+</pre
+    >
    <pre id="diagram4" class="mermaid">
---
-config:
-  layout: elk
-  flowchart:
-    //curve: linear
---
-flowchart LR
-%% A ==> B
-%% A2 --> B2
-A{A} --> B((Bo boo)) & B & B & B
-
+    treemap
+      title Accessible Treemap Title
+      "Category A"
+          "Item A1": 10
+          "Item A2": 20
+      "Category B"
+          "Item B1": 15
+          "Item B2": 25
    </pre>
-    <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: elk
-        theme: default
-        look: classic
-      ---
+    <pre id="diagram4" class="mermaid2">
      flowchart LR
-       subgraph s1["APA"]
-              D{"Use the editor"}
-        end
-       subgraph S2["S2"]
-              s1
-              I>"fa:fa-code Text"]
-              E["E"]
-        end
-          D -- Mermaid js --> I
-          D --> I & E
-          E --> I
+        AB["apa@apa@"] --> B(("`apa@apa`"))
    </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
+      flowchart
+        D(("for D"))
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+      flowchart LR
+        A e1@==> B
+        e1@{ animate: true}
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+  A e1@--> B
+  classDef animate stroke-width:2,stroke-dasharray:10\,8,stroke-dashoffset:-180,animation: edge-animation-frame 6s linear infinite, stroke-linecap: round
+  class e1 animate
+    </pre>
+    <h2>infinite</h2>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+  A e1@--> B
+  classDef animate stroke-dasharray: 9\,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
+  class e1 animate
+    </pre>
+    <h2>Mermaid - edge-animation-slow</h2>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+  A e1@--> B
+e1@{ animation: fast}
+    </pre>
+    <h2>Mermaid - edge-animation-fast</h2>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+  A e1@--> B
+  classDef animate stroke-dasharray: 1000,stroke-dashoffset: 1000,animation: dash 10s linear;
+  class e1 edge-animation-fast
+    </pre>
+
+    <pre id="diagram4" class="mermaid2">
+
+info    </pre
+    >
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
  layout: elk
@@ -529,7 +243,7 @@ config:
      end
      end
    </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
  layout: elk
@@ -542,7 +256,7 @@ config:
      D-->I
      D-->I
    </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
  layout: elk
@@ -581,7 +295,7 @@ flowchart LR
    n8@{ shape: rect}

    </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
  layout: elk
@@ -597,7 +311,7 @@ flowchart LR


    </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
  layout: elk
@@ -606,7 +320,7 @@ flowchart LR
    A{A} --> B & C
 </pre
    >
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
  layout: elk
@@ -618,7 +332,7 @@ flowchart LR
    end
 </pre
    >
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
  layout: elk
@@ -636,7 +350,7 @@ flowchart LR


    </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
  kanban:
@@ -655,81 +369,81 @@ kanban
    task3[💻 Develop login feature]@{ ticket: 103 }

    </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Default] --> A@{ icon: 'fa:bell', form: 'rounded' }

    </pre>
-    <pre id="diagram4" class="mermaid">
+    <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="mermaid">
+    <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="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
  nA[Class] --> A@{ icon: 'logos:aws', form: 'rounded' }

    </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Default] --> A@{ icon: 'fa:bell', form: 'square' }

    </pre>
-    <pre id="diagram4" class="mermaid">
+    <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="mermaid">
+    <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="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
  nA[Class] --> A@{ icon: 'logos:aws', form: 'square' }

    </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Default] --> A@{ icon: 'fa:bell', form: 'circle' }

    </pre>
-    <pre id="diagram4" class="mermaid">
+    <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="mermaid">
+    <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="mermaid">
+    <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="mermaid">
+    <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="mermaid">
+    <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="mermaid">
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
  kanban:
@@ -793,22 +507,18 @@ kanban
        alert('It worked');
      }
      await mermaid.initialize({
-        // theme: 'base',
+        // theme: 'forest',
        // theme: 'default',
        // theme: 'forest',
        // handDrawnSeed: 12,
        // look: 'handDrawn',
        // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
        // layout: 'dagre',
-        layout: 'elk',
+        // layout: 'elk',
        // layout: 'fixed',
        // htmlLabels: false,
        flowchart: { titleTopMargin: 10 },
-
-        // fontFamily: 'Caveat',
-        // fontFamily: 'Kalam',
-        // fontFamily: 'courier',
-        fontFamily: 'arial',
+        fontFamily: "'Recursive', sans-serif",
        sequence: {
          actorFontFamily: 'courier',
          noteFontFamily: 'courier',
--- a/cypress/platform/mindmap-layouts.html
+++ b/cypress/platform/mindmap-layouts.html
@@ -1,376 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>Mermaid Quick Test Page</title>
-    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
-    <style>
-      div.mermaid {
-        font-family: 'Courier New', Courier, monospace !important;
-      }
-    </style>
-  </head>
-
-  <body>
-    <pre class="mermaid">
- ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap))
-        A
-        B
-    </pre>
-    <pre class="mermaid">
- ---
-      config:
-        layout: dagre
-      ---
-      mindmap
-      root((mindmap))
-        A
-        B
-    </pre>
-    <pre class="mermaid">
- ---
-      config:
-        layout: elk
-      ---
-      mindmap
-      root((mindmap))
-        A
-        B
-    </pre>
-    <pre class="mermaid">
- ---
-      config:
-        layout: cose-bilkent
-      ---
-      mindmap
-      root((mindmap))
-        A
-        B
-    </pre>
-    <pre class="mermaid">
-    ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap is a long thing))
-        A
-        B
-        C
-        D
-    </pre>
-    <pre class="mermaid">
-    ---
-      config:
-        layout: dagre
-      ---
-      mindmap
-      root((mindmap is a long thing))
-        A
-        B
-        C
-        D
-    </pre>
-    <pre class="mermaid">
-    ---
-      config:
-        layout: elk
-      ---
-      mindmap
-      root((mindmap is a long thing))
-        A
-        B
-        C
-        D
-    </pre>
-    <pre class="mermaid">
-    ---
-      config:
-        layout: cose-bilkent
-      ---
-      mindmap
-      root((mindmap is a long thing))
-        A
-        B
-        C
-        D
-    </pre>
-
-    <pre class="mermaid">
-    ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap))
-        Origins
-          Long history
-          ::icon(fa fa-book)
-          Popularisation
-            British popular psychology author Tony Buzan
-        Research
-          On effectiveness&lt;br/>and features
-          On Automatic creation
-            Uses
-                Creative techniques
-                Strategic planning
-                Argument mapping
-        Tools
-              id)I am a cloud(
-                  id))I am a bang((
-                    Tools
-    </pre>
-    <pre class="mermaid">
-    ---
-      config:
-        layout: dagre
-      ---
-      mindmap
-      root((mindmap))
-        Origins
-          Long history
-          ::icon(fa fa-book)
-          Popularisation
-            British popular psychology author Tony Buzan
-        Research
-          On effectiveness&lt;br/>and features
-          On Automatic creation
-            Uses
-                Creative techniques
-                Strategic planning
-                Argument mapping
-        Tools
-              id)I am a cloud(
-                  id))I am a bang((
-                    Tools
-    </pre>
-    <pre class="mermaid">
-    ---
-      config:
-        layout: elk
-      ---
-      mindmap
-      root((mindmap))
-        Origins
-          Long history
-          ::icon(fa fa-book)
-          Popularisation
-            British popular psychology author Tony Buzan
-        Research
-          On effectiveness&lt;br/>and features
-          On Automatic creation
-            Uses
-                Creative techniques
-                Strategic planning
-                Argument mapping
-        Tools
-              id)I am a cloud(
-                  id))I am a bang((
-                    Tools
-    </pre>
-    <pre class="mermaid">
-    ---
-      config:
-        layout: cose-bilkent
-      ---
-      mindmap
-      root((mindmap))
-        Origins
-          Long history
-          ::icon(fa fa-book)
-          Popularisation
-            British popular psychology author Tony Buzan
-        Research
-          On effectiveness&lt;br/>and features
-          On Automatic creation
-            Uses
-                Creative techniques
-                Strategic planning
-                Argument mapping
-        Tools
-              id)I am a cloud(
-                  id))I am a bang((
-                    Tools
-    </pre>
-    <pre class="mermaid">
-      ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap))
-        A
-          a
-            apa[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-            apa2[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          b
-          c
-          d
-        B
-            apa3[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-        D
-          apa5[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          apa4[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-
-    </pre>
-    <pre class="mermaid">
-      ---
-      config:
-        layout: dagre
-      ---
-      mindmap
-      root((mindmap))
-        A
-          a
-            apa[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-            apa2[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          b
-          c
-          d
-        B
-            apa3[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-        D
-          apa5[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          apa4[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-
-    </pre>
-    <pre class="mermaid">
-      ---
-      config:
-        layout: elk
-      ---
-      mindmap
-      root((mindmap))
-        A
-          a
-            apa[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-            apa2[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          b
-          c
-          d
-        B
-            apa3[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-        D
-          apa5[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          apa4[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-
-    </pre>
-    <pre class="mermaid">
-      ---
-      config:
-        layout: cose-bilkent
-      ---
-      mindmap
-      root((mindmap))
-        A
-          a
-            apa[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-            apa2[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          b
-          c
-          d
-        B
-            apa3[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-        D
-          apa5[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          apa4[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-
-    </pre>
-
-    <pre class="mermaid">
- ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      ((This is a mindmap))
-        child1
-         grandchild 1
-         grandchild 2
-        child2
-         grandchild 3
-         grandchild 4
-        child3
-         grandchild 5
-         grandchild 6
-      
-    </pre>
-
-    <pre class="mermaid">
- ---
-      config:
-        layout: dagre
-      ---
-      mindmap
-      ((This is a mindmap))
-        child1
-         grandchild 1
-         grandchild 2
-        child2
-         grandchild 3
-         grandchild 4
-        child3
-         grandchild 5
-         grandchild 6
-      
-    </pre>
-
-    <pre class="mermaid">
- ---
-      config:
-        layout: elk
-      ---
-      mindmap
-      ((This is a mindmap))
-        child1
-         grandchild 1
-         grandchild 2
-        child2
-         grandchild 3
-         grandchild 4
-        child3
-         grandchild 5
-         grandchild 6
-      
-    </pre>
-
-    <pre class="mermaid">
- ---
-      config:
-        layout: cose-bilkent
-      ---
-      mindmap
-      ((This is a mindmap))
-        child1
-         grandchild 1
-         grandchild 2
-        child2
-         grandchild 3
-         grandchild 4
-        child3
-         grandchild 5
-         grandchild 6
-      
-    </pre>
-
-    <hr />
-    <script type="module">
-      import mermaid from '/mermaid.esm.mjs';
-      import tidytree from '/mermaid-layout-tidy-tree.esm.mjs';
-      import layouts from './mermaid-layout-elk.esm.mjs';
-      mermaid.registerLayoutLoaders(layouts);
-      mermaid.registerLayoutLoaders(tidytree);
-      mermaid.initialize({
-        theme: 'default',
-        logLevel: 3,
-        securityLevel: 'loose',
-      });
-    </script>
-  </body>
-</html>
--- a/cypress/platform/sidv.html
+++ b/cypress/platform/sidv.html
@@ -41,6 +41,10 @@ graph TB
      const { svg } = await mermaid.render('d22', value);
      console.log(svg);
      el.innerHTML = svg;
+      // 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/viewer.js
+++ b/cypress/platform/viewer.js
@@ -1,6 +1,5 @@
 import externalExample from './mermaid-example-diagram.esm.mjs';
 import layouts from './mermaid-layout-elk.esm.mjs';
-import tidyTree from './mermaid-layout-tidy-tree.esm.mjs';
 import zenUml from './mermaid-zenuml.esm.mjs';
 import mermaid from './mermaid.esm.mjs';

@@ -66,7 +65,6 @@ const contentLoaded = async function () {
    await mermaid.registerExternalDiagrams([externalExample, zenUml]);

    mermaid.registerLayoutLoaders(layouts);
-    mermaid.registerLayoutLoaders(tidyTree);
    mermaid.initialize(graphObj.mermaid);
    /**
     *  CC-BY-4.0
@@ -184,7 +182,7 @@ const contentLoadedApi = async function () {
      for (let i = 0; i < numCodes; i++) {
        const { svg, bindFunctions } = await mermaid.render('newid' + i, graphObj.code[i], divs[i]);
        div.innerHTML = svg;
-        bindFunctions?.(div);
+        bindFunctions(div);
      }
    } else {
      const div = document.createElement('div');
@@ -196,7 +194,7 @@ const contentLoadedApi = async function () {
      const { svg, bindFunctions } = await mermaid.render('newid', graphObj.code, div);
      div.innerHTML = svg;
      console.log(div.innerHTML);
-      bindFunctions?.(div);
+      bindFunctions(div);
    }
  }
 };
--- a/cypress/platform/yari.html
+++ b/cypress/platform/yari.html
@@ -603,10 +603,6 @@
      </div>
      <div class="test">
        <pre class="mermaid">
-          ---
-            config:
-              theme: dark
-          ---
          classDiagram
            test ()--() test2
        </pre>
--- a/cypress/timings.json
+++ b/cypress/timings.json
@@ -2,227 +2,219 @@
  "durations": [
    {
      "spec": "cypress/integration/other/configuration.spec.js",
-      "duration": 6099
+      "duration": 5672
    },
    {
      "spec": "cypress/integration/other/external-diagrams.spec.js",
-      "duration": 2236
+      "duration": 1990
    },
    {
      "spec": "cypress/integration/other/ghsa.spec.js",
-      "duration": 3405
+      "duration": 3186
    },
    {
      "spec": "cypress/integration/other/iife.spec.js",
-      "duration": 2176
+      "duration": 1948
    },
    {
      "spec": "cypress/integration/other/interaction.spec.js",
-      "duration": 12300
+      "duration": 11938
    },
    {
      "spec": "cypress/integration/other/rerender.spec.js",
-      "duration": 2089
+      "duration": 1932
    },
    {
      "spec": "cypress/integration/other/xss.spec.js",
-      "duration": 32033
+      "duration": 27237
    },
    {
      "spec": "cypress/integration/rendering/appli.spec.js",
-      "duration": 3672
+      "duration": 3170
    },
    {
      "spec": "cypress/integration/rendering/architecture.spec.ts",
-      "duration": 103
+      "duration": 104
    },
    {
      "spec": "cypress/integration/rendering/block.spec.js",
-      "duration": 18135
+      "duration": 17390
    },
    {
      "spec": "cypress/integration/rendering/c4.spec.js",
-      "duration": 5661
+      "duration": 5296
    },
    {
      "spec": "cypress/integration/rendering/classDiagram-elk-v3.spec.js",
-      "duration": 41456
+      "duration": 39004
    },
    {
      "spec": "cypress/integration/rendering/classDiagram-handDrawn-v3.spec.js",
-      "duration": 38910
+      "duration": 37653
    },
    {
      "spec": "cypress/integration/rendering/classDiagram-v2.spec.js",
-      "duration": 24120
+      "duration": 23278
    },
    {
      "spec": "cypress/integration/rendering/classDiagram-v3.spec.js",
-      "duration": 38454
+      "duration": 36645
    },
    {
      "spec": "cypress/integration/rendering/classDiagram.spec.js",
-      "duration": 17099
+      "duration": 15418
    },
    {
      "spec": "cypress/integration/rendering/conf-and-directives.spec.js",
-      "duration": 9844
+      "duration": 9684
    },
    {
      "spec": "cypress/integration/rendering/current.spec.js",
-      "duration": 2951
+      "duration": 2570
    },
    {
      "spec": "cypress/integration/rendering/erDiagram-unified.spec.js",
-      "duration": 90081
+      "duration": 84687
    },
    {
      "spec": "cypress/integration/rendering/erDiagram.spec.js",
-      "duration": 19496
+      "duration": 14819
    },
    {
      "spec": "cypress/integration/rendering/errorDiagram.spec.js",
-      "duration": 3829
+      "duration": 3371
    },
    {
      "spec": "cypress/integration/rendering/flowchart-elk.spec.js",
-      "duration": 42517
+      "duration": 39925
    },
    {
      "spec": "cypress/integration/rendering/flowchart-handDrawn.spec.js",
-      "duration": 31541
+      "duration": 34694
    },
    {
      "spec": "cypress/integration/rendering/flowchart-icon.spec.js",
-      "duration": 7749
+      "duration": 7137
    },
    {
      "spec": "cypress/integration/rendering/flowchart-shape-alias.spec.ts",
-      "duration": 25230
+      "duration": 24740
    },
    {
      "spec": "cypress/integration/rendering/flowchart-v2.spec.js",
-      "duration": 49359
+      "duration": 42077
    },
    {
      "spec": "cypress/integration/rendering/flowchart.spec.js",
-      "duration": 33028
+      "duration": 30642
    },
    {
      "spec": "cypress/integration/rendering/gantt.spec.js",
-      "duration": 22271
+      "duration": 18085
    },
    {
      "spec": "cypress/integration/rendering/gitGraph.spec.js",
-      "duration": 51837
+      "duration": 50107
    },
    {
      "spec": "cypress/integration/rendering/iconShape.spec.ts",
-      "duration": 285060
+      "duration": 276279
    },
    {
      "spec": "cypress/integration/rendering/imageShape.spec.ts",
-      "duration": 59517
+      "duration": 56505
    },
    {
      "spec": "cypress/integration/rendering/info.spec.ts",
-      "duration": 3501
+      "duration": 3036
    },
    {
      "spec": "cypress/integration/rendering/journey.spec.js",
-      "duration": 7405
+      "duration": 6889
    },
    {
      "spec": "cypress/integration/rendering/kanban.spec.ts",
-      "duration": 7975
+      "duration": 7353
    },
    {
      "spec": "cypress/integration/rendering/katex.spec.js",
-      "duration": 4312
+      "duration": 3580
    },
    {
      "spec": "cypress/integration/rendering/marker_unique_id.spec.js",
-      "duration": 2630
-    },
-    {
-      "spec": "cypress/integration/rendering/mindmap-tidy-tree.spec.js",
-      "duration": 4541
+      "duration": 2508
    },
    {
      "spec": "cypress/integration/rendering/mindmap.spec.ts",
-      "duration": 12134
+      "duration": 10939
    },
    {
      "spec": "cypress/integration/rendering/newShapes.spec.ts",
-      "duration": 151160
+      "duration": 149102
    },
    {
      "spec": "cypress/integration/rendering/oldShapes.spec.ts",
-      "duration": 118044
+      "duration": 113987
    },
    {
      "spec": "cypress/integration/rendering/packet.spec.ts",
-      "duration": 5166
+      "duration": 4060
    },
    {
      "spec": "cypress/integration/rendering/pie.spec.ts",
-      "duration": 7074
+      "duration": 5715
    },
    {
      "spec": "cypress/integration/rendering/quadrantChart.spec.js",
-      "duration": 9518
+      "duration": 8945
    },
    {
      "spec": "cypress/integration/rendering/radar.spec.js",
-      "duration": 5846
+      "duration": 5337
    },
    {
      "spec": "cypress/integration/rendering/requirement.spec.js",
-      "duration": 3089
+      "duration": 2643
    },
    {
      "spec": "cypress/integration/rendering/requirementDiagram-unified.spec.js",
-      "duration": 55361
+      "duration": 52072
    },
    {
      "spec": "cypress/integration/rendering/sankey.spec.ts",
-      "duration": 7236
-    },
-    {
-      "spec": "cypress/integration/rendering/sequencediagram-v2.spec.js",
-      "duration": 26057
+      "duration": 6692
    },
    {
      "spec": "cypress/integration/rendering/sequencediagram.spec.js",
-      "duration": 48401
+      "duration": 35721
    },
    {
      "spec": "cypress/integration/rendering/stateDiagram-v2.spec.js",
-      "duration": 30364
+      "duration": 26030
    },
    {
      "spec": "cypress/integration/rendering/stateDiagram.spec.js",
-      "duration": 16862
+      "duration": 16333
    },
    {
      "spec": "cypress/integration/rendering/theme.spec.js",
-      "duration": 30553
+      "duration": 29287
    },
    {
      "spec": "cypress/integration/rendering/timeline.spec.ts",
-      "duration": 8962
+      "duration": 8491
    },
    {
      "spec": "cypress/integration/rendering/treemap.spec.ts",
-      "duration": 12486
+      "duration": 12291
    },
    {
      "spec": "cypress/integration/rendering/xyChart.spec.js",
-      "duration": 21718
+      "duration": 20651
    },
    {
      "spec": "cypress/integration/rendering/zenuml.spec.js",
-      "duration": 3882
+      "duration": 3218
    }
  ]
 }
--- a/cypress/tsconfig.json
+++ b/cypress/tsconfig.json
@@ -2,7 +2,7 @@
  "compilerOptions": {
    "target": "es2020",
    "lib": ["es2020", "dom"],
-    "types": ["cypress", "node", "@argos-ci/cypress/support"],
+    "types": ["cypress", "node", "@argos-ci/cypress/dist/support.d.ts"],
    "allowImportingTsExtensions": true,
    "noEmit": true
  },
--- a/demos/block.html
+++ b/demos/block.html
@@ -10,7 +10,7 @@
  <body>
    <h1>Block diagram demos</h1>
    <pre id="diagram" class="mermaid">
-block
+block-beta
 columns 1
  db(("DB"))
  blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
@@ -26,7 +26,7 @@ columns 1
  style B fill:#f9F,stroke:#333,stroke-width:4px
    </pre>
    <pre id="diagram" class="mermaid">
-block
+block-beta
    A1["square"]
    B1("rounded")
    C1(("circle"))
@@ -36,7 +36,7 @@ block
    </pre>

    <pre id="diagram" class="mermaid">
-block
+block-beta
    A1(["stadium"])
    A2[["subroutine"]]
    B1[("cylinder")]
@@ -48,7 +48,7 @@ block
    </pre>

    <pre id="diagram" class="mermaid">
-block
+block-beta
  block:e:4
    columns 2
      f
@@ -57,7 +57,7 @@ block

    </pre>
    <pre id="diagram" class="mermaid">
-block
+block-beta
  block:e:4
    columns 2
      f
@@ -67,7 +67,7 @@ block

    </pre>
    <pre id="diagram" class="mermaid">
-block
+block-beta
  columns 3
  a:3
  block:e:3
@@ -80,7 +80,7 @@ block

    </pre>
    <pre id="diagram" class="mermaid">
-block
+block-beta
  columns 4
  a b c d
  block:e:4
@@ -97,19 +97,19 @@ flowchart LR
  X-- "a label" -->z
    </pre>
    <pre id="diagram" class="mermaid">
-block
+block-beta
 columns 5
   A space B
   A --x B
    </pre>
    <pre id="diagram" class="mermaid">
-block
+block-beta
 columns 3
  a["A wide one"] b:2 c:2 d
    </pre>

    <pre id="diagram" class="mermaid">
-block
+block-beta
 columns 3
  a b c
  e:3
@@ -117,7 +117,7 @@ columns 3
    </pre>

    <pre id="diagram" class="mermaid">
-block
+block-beta

  A1:3
  A2:1
--- a/demos/classchart.html
+++ b/demos/classchart.html
@@ -184,7 +184,6 @@
      }
      Admin --> Report : generates
    </pre>
-    <hr />
    <pre class="mermaid">
    classDiagram
      namespace Company.Project.Module {
@@ -241,20 +240,6 @@
      Bike --> Square : "Logo Shape"

    </pre>
-    <hr />
-    <pre class="mermaid">
-      classDiagram
-        note "This is a outer note"
-        note for Class1 "This is a outer note for Class1"
-        namespace ns {
-          note "This is a inner note"
-          note for Class1 "This is a inner note for Class1"
-          class Class1
-          class Class2
-        }
-    </pre>
-    <hr />
-
    <script type="module">
      import mermaid from './mermaid.esm.mjs';
      mermaid.initialize({
--- a/demos/er-multiline.html
+++ b/demos/er-multiline.html
@@ -11,7 +11,7 @@
      rel="stylesheet"
    />
    <link
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
      rel="stylesheet"
    />
    <link
--- a/demos/sankey.html
+++ b/demos/sankey.html
@@ -20,14 +20,12 @@
          width: 800
          nodeAlignment: left
      ---
-     sankey
-        a,b,8
-        b,c,8
-        c,d,8
-        d,e,8
-
-        x,c,4
-        c,y,4
+      sankey-beta
+        Revenue,Expenses,10
+        Revenue,Profit,10
+        Expenses,Manufacturing,5
+        Expenses,Tax,3
+        Expenses,Research,2
    </pre>

    <h2>Energy flow</h2>
@@ -42,7 +40,7 @@
          linkColor: gradient
          nodeAlignment: justify
      ---
-      sankey
+      sankey-beta

      Agricultural 'waste',Bio-conversion,124.729
      Bio-conversion,Liquid,0.597
--- a/demos/xychart.html
+++ b/demos/xychart.html
@@ -16,7 +16,7 @@
  <body>
    <h1>XY Charts demos</h1>
    <pre class="mermaid">
-    xychart
+    xychart-beta
    title "Sales Revenue (in $)"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
@@ -26,7 +26,7 @@
    <hr />
    <h1>XY Charts horizontal</h1>
    <pre class="mermaid">
-    xychart horizontal
+    xychart-beta horizontal
    title "Basic xychart"
    x-axis "this is x axis" [category1, "category 2", category3, category4]
    y-axis yaxisText 10 --> 150
@@ -36,7 +36,7 @@
    <hr />
    <h1>XY Charts only lines and bar</h1>
    <pre class="mermaid">
-    xychart
+    xychart-beta
    line [23, 46, 77, 34]
    line [45, 32, 33, 12]
    line [87, 54, 99, 85]
@@ -48,13 +48,13 @@
    <hr />
    <h1>XY Charts with +ve and -ve numbers</h1>
    <pre class="mermaid">
-    xychart
+    xychart-beta
    line [+1.3, .6, 2.4, -.34]
    </pre>

    <h1>XY Charts Bar with multiple category</h1>
    <pre class="mermaid">
-    xychart
+    xychart-beta
    title "Basic xychart with many categories"
    x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
    y-axis yaxisText 10 --> 150
@@ -63,7 +63,7 @@

    <h1>XY Charts line with multiple category</h1>
    <pre class="mermaid">
-    xychart
+    xychart-beta
    title "Line chart with many category"
    x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
    y-axis yaxisText 10 --> 150
@@ -72,7 +72,7 @@

    <h1>XY Charts category with large text</h1>
    <pre class="mermaid">
-    xychart
+    xychart-beta
    title "Basic xychart with many categories with category overlap"
    x-axis "this is x axis" [category1, "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.", category3, category4, category5, category6, category7]
    y-axis yaxisText 10 --> 150
@@ -89,7 +89,7 @@ config:
    height: 20
    plotReservedSpacePercent: 100
 ---
-    xychart
+    xychart-beta
      line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
    </pre>

@@ -103,7 +103,7 @@ config:
    height: 20
    plotReservedSpacePercent: 100
 ---
-    xychart
+    xychart-beta
      bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
    </pre>

@@ -136,7 +136,7 @@ config:
    chartOrientation: horizontal
    plotReservedSpacePercent: 60
 ---
-    xychart
+    xychart-beta
      title "Sales Revenue"
      x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
      y-axis "Revenue (in $)" 4000 --> 11000
@@ -162,7 +162,7 @@ config:
      xAxisLineColor: "#87ceeb"
      plotColorPalette: "#008000, #faba63"
 ---
-    xychart
+    xychart-beta
      title "Sales Revenue"
      x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
      y-axis "Revenue (in $)" 4000 --> 11000
--- a/docs/community/contributing.md
+++ b/docs/community/contributing.md
@@ -29,8 +29,7 @@ In GitHub, you first [**fork a mermaid repository**](https://github.com/mermaid-

 Then you **clone** a copy to your local development machine (e.g. where you code) to make a copy with all the files to work with.

-> **💡 Tip**
-> [Here is a GitHub document that gives an overview of the process](https://docs.github.com/en/get-started/quickstart/fork-a-repo).
+> **💡 Tip** > [Here is a GitHub document that gives an overview of the process](https://docs.github.com/en/get-started/quickstart/fork-a-repo).

 ```bash
 git clone git@github.com/your-fork/mermaid
@@ -302,7 +301,7 @@ If you are adding a feature, you will definitely need to add tests. Depending on

 Unit tests are tests that test a single function or module. They are the easiest to write and the fastest to run.

-Unit tests are mandatory for all code except the layout tests. (The layouts are tested with integration tests.)
+Unit tests are mandatory for all code except the renderers. (The renderers are tested with integration tests.)

 We use [Vitest](https://vitest.dev) to run unit tests.

@@ -328,30 +327,6 @@ When using Docker prepend your command with `./run`:
 ./run pnpm test
 ```

-##### Testing the DOM
-
-One can use `jsdomIt` to test any part of Mermaid that interacts with the DOM, as long as it is not related to the layout.
-
-The function `jsdomIt` ([developed in utils.ts](../../tests/util.ts)) overrides `it` from `vitest`, and creates a pseudo-browser environment that works almost like the real deal for the duration of the test. It uses JSDOM to create a DOM, and adds objects `window` and `document` to `global` to mock the browser environment.
-
-> \[!NOTE]
-> The layout cannot work in `jsdomIt` tests because JSDOM has no rendering engine, hence the pseudo-browser environment.
-
-Example :
-
-```typescript
-import { ensureNodeFromSelector, jsdomIt } from './tests/util.js';
-
-jsdomIt('should add element "thing" in the SVG', ({ svg }) => {
-  // Code in this block runs in a pseudo-browser environment
-  addThing(svg); // The svg item is the D3 selection of the SVG node
-  const svgNode = ensureNodeFromSelector('svg'); // Retrieve the DOM node using the DOM API
-  expect(svgNode.querySelector('thing')).not.toBeNull(); // Test the structure of the SVG
-});
-```
-
-They can be used to test any method that interacts with the DOM, including for testing renderers. For renderers, additional integration testing is necessary to test the layout though.
-
 #### Integration / End-to-End (E2E) Tests

 These test the rendering and visual appearance of the diagrams.
--- a/docs/community/intro.md
+++ b/docs/community/intro.md
@@ -33,8 +33,7 @@ mindmap

 ## Join the Development

-> **💡 Tip**
-> **Check out our** [**detailed contribution guide**](./contributing.md).
+> **💡 Tip** > **Check out our** [**detailed contribution guide**](./contributing.md).

 Where to start:

@@ -48,8 +47,7 @@ Where to start:

 ## A Question Or a Suggestion?

-> **💡 Tip**
-> **Have a look at** [**how to open an issue**](./questions-and-suggestions.md).
+> **💡 Tip** > **Have a look at** [**how to open an issue**](./questions-and-suggestions.md).

 If you have faced a vulnerability [report it to us](./security.md).

--- a/docs/config/directives.md
+++ b/docs/config/directives.md
@@ -22,6 +22,7 @@ While directives allow you to change most of the default configuration settings,
 Mermaid basically supports two types of configuration options to be overridden by directives.

 1. _General/Top Level configurations_ : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are:
+
   - theme
   - fontFamily
   - logLevel
--- a/docs/config/faq.md
+++ b/docs/config/faq.md
@@ -6,7 +6,7 @@

 # Frequently Asked Questions

-1. [How to add title to flowchart?](https://github.com/mermaid-js/mermaid/issues/1433#issuecomment-1991554712)
+1. [How to add title to flowchart?](https://github.com/mermaid-js/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)
--- a/docs/config/layouts.md
+++ b/docs/config/layouts.md
@@ -1,40 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/layouts.md](../../packages/mermaid/src/docs/config/layouts.md).
-
-# Layouts
-
-This page lists the available layout algorithms supported in Mermaid diagrams.
-
-## Supported Layouts
-
- **elk**: [ELK (Eclipse Layout Kernel)](https://www.eclipse.org/elk/)
- **tidy-tree**: Tidy tree layout for hierarchical diagrams [Tidy Tree Configuration](/config/tidy-tree)
- **cose-bilkent**: Cose Bilkent layout for force-directed graphs
- **dagre**: Dagre layout for layered graphs
-
-## How to Use
-
-You can specify the layout in your diagram's YAML config or initialization options. For example:
-
-```mermaid-example
---
-config:
-  layout: elk
---
-graph TD;
-  A-->B;
-  B-->C;
-```
-
-```mermaid
---
-config:
-  layout: elk
---
-graph TD;
-  A-->B;
-  B-->C;
-```
--- a/docs/config/setup/config/README.md
+++ b/docs/config/setup/config/README.md
@@ -19,7 +19,6 @@
 - [addDirective](functions/addDirective.md)
 - [getConfig](functions/getConfig.md)
 - [getSiteConfig](functions/getSiteConfig.md)
- [getUserDefinedConfig](functions/getUserDefinedConfig.md)
 - [reset](functions/reset.md)
 - [sanitize](functions/sanitize.md)
 - [saveConfigFromInitialize](functions/saveConfigFromInitialize.md)
--- a/docs/config/setup/config/functions/getUserDefinedConfig.md
+++ b/docs/config/setup/config/functions/getUserDefinedConfig.md
@@ -1,19 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/config/functions/getUserDefinedConfig.md](../../../../../packages/mermaid/src/docs/config/setup/config/functions/getUserDefinedConfig.md).
-
-[**mermaid**](../../README.md)
-
---
-
-# Function: getUserDefinedConfig()
-
-> **getUserDefinedConfig**(): [`MermaidConfig`](../../mermaid/interfaces/MermaidConfig.md)
-
-Defined in: [packages/mermaid/src/config.ts:252](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L252)
-
-## Returns
-
-[`MermaidConfig`](../../mermaid/interfaces/MermaidConfig.md)
--- a/docs/config/setup/defaultConfig/variables/configKeys.md
+++ b/docs/config/setup/defaultConfig/variables/configKeys.md
@@ -12,4 +12,4 @@

 > `const` **configKeys**: `Set`<`string`>

-Defined in: [packages/mermaid/src/defaultConfig.ts:292](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L292)
+Defined in: [packages/mermaid/src/defaultConfig.ts:290](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L290)
--- a/docs/config/setup/mermaid/README.md
+++ b/docs/config/setup/mermaid/README.md
@@ -10,6 +10,10 @@

 # mermaid

+## Classes
+
+- [UnknownDiagramError](classes/UnknownDiagramError.md)
+
 ## Interfaces

 - [DetailedError](interfaces/DetailedError.md)
@@ -23,7 +27,6 @@
 - [RenderOptions](interfaces/RenderOptions.md)
 - [RenderResult](interfaces/RenderResult.md)
 - [RunOptions](interfaces/RunOptions.md)
- [UnknownDiagramError](interfaces/UnknownDiagramError.md)

 ## Type Aliases

--- a/docs/config/setup/mermaid/classes/UnknownDiagramError.md
+++ b/docs/config/setup/mermaid/classes/UnknownDiagramError.md
@@ -0,0 +1,159 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/mermaid/classes/UnknownDiagramError.md](../../../../../packages/mermaid/src/docs/config/setup/mermaid/classes/UnknownDiagramError.md).
+
+[**mermaid**](../../README.md)
+
+---
+
+# Class: UnknownDiagramError
+
+Defined in: [packages/mermaid/src/errors.ts:1](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/errors.ts#L1)
+
+## Extends
+
+- `Error`
+
+## Constructors
+
+### new UnknownDiagramError()
+
+> **new UnknownDiagramError**(`message`): [`UnknownDiagramError`](UnknownDiagramError.md)
+
+Defined in: [packages/mermaid/src/errors.ts:2](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/errors.ts#L2)
+
+#### Parameters
+
+##### message
+
+`string`
+
+#### Returns
+
+[`UnknownDiagramError`](UnknownDiagramError.md)
+
+#### Overrides
+
+`Error.constructor`
+
+## Properties
+
+### cause?
+
+> `optional` **cause**: `unknown`
+
+Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+`Error.cause`
+
+---
+
+### message
+
+> **message**: `string`
+
+Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+`Error.message`
+
+---
+
+### name
+
+> **name**: `string`
+
+Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+`Error.name`
+
+---
+
+### stack?
+
+> `optional` **stack**: `string`
+
+Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+`Error.stack`
+
+---
+
+### prepareStackTrace()?
+
+> `static` `optional` **prepareStackTrace**: (`err`, `stackTraces`) => `any`
+
+Defined in: node_modules/.pnpm/@types+node\@22.13.5/node_modules/@types/node/globals.d.ts:143
+
+Optional override for formatting stack traces
+
+#### Parameters
+
+##### err
+
+`Error`
+
+##### stackTraces
+
+`CallSite`\[]
+
+#### Returns
+
+`any`
+
+#### See
+
+<https://v8.dev/docs/stack-trace-api#customizing-stack-traces>
+
+#### Inherited from
+
+`Error.prepareStackTrace`
+
+---
+
+### stackTraceLimit
+
+> `static` **stackTraceLimit**: `number`
+
+Defined in: node_modules/.pnpm/@types+node\@22.13.5/node_modules/@types/node/globals.d.ts:145
+
+#### Inherited from
+
+`Error.stackTraceLimit`
+
+## Methods
+
+### captureStackTrace()
+
+> `static` **captureStackTrace**(`targetObject`, `constructorOpt`?): `void`
+
+Defined in: node_modules/.pnpm/@types+node\@22.13.5/node_modules/@types/node/globals.d.ts:136
+
+Create .stack property on a target object
+
+#### Parameters
+
+##### targetObject
+
+`object`
+
+##### constructorOpt?
+
+`Function`
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+`Error.captureStackTrace`
--- a/docs/config/setup/mermaid/interfaces/ExternalDiagramDefinition.md
+++ b/docs/config/setup/mermaid/interfaces/ExternalDiagramDefinition.md
@@ -10,7 +10,7 @@

 # Interface: ExternalDiagramDefinition

-Defined in: [packages/mermaid/src/diagram-api/types.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L96)
+Defined in: [packages/mermaid/src/diagram-api/types.ts:94](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L94)

 ## Properties

@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:96](https://github.com/me

 > **detector**: `DiagramDetector`

-Defined in: [packages/mermaid/src/diagram-api/types.ts:98](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L98)
+Defined in: [packages/mermaid/src/diagram-api/types.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L96)

 ---

@@ -26,7 +26,7 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:98](https://github.com/me

 > **id**: `string`

-Defined in: [packages/mermaid/src/diagram-api/types.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L97)
+Defined in: [packages/mermaid/src/diagram-api/types.ts:95](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L95)

 ---

@@ -34,4 +34,4 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:97](https://github.com/me

 > **loader**: `DiagramLoader`

-Defined in: [packages/mermaid/src/diagram-api/types.ts:99](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L99)
+Defined in: [packages/mermaid/src/diagram-api/types.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L97)
--- a/docs/config/setup/mermaid/interfaces/LayoutData.md
+++ b/docs/config/setup/mermaid/interfaces/LayoutData.md
@@ -10,7 +10,7 @@

 # Interface: LayoutData

-Defined in: [packages/mermaid/src/rendering-util/types.ts:168](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L168)
+Defined in: [packages/mermaid/src/rendering-util/types.ts:145](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L145)

 ## Indexable

@@ -22,7 +22,7 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:168](https://github.co

 > **config**: [`MermaidConfig`](MermaidConfig.md)

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

 ---

@@ -30,7 +30,7 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:171](https://github.co

 > **edges**: `Edge`\[]

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

 ---

@@ -38,4 +38,4 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:170](https://github.co

 > **nodes**: `Node`\[]

-Defined in: [packages/mermaid/src/rendering-util/types.ts:169](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L169)
+Defined in: [packages/mermaid/src/rendering-util/types.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L146)
--- a/docs/config/setup/mermaid/interfaces/LayoutLoaderDefinition.md
+++ b/docs/config/setup/mermaid/interfaces/LayoutLoaderDefinition.md
@@ -10,7 +10,7 @@

 # Interface: LayoutLoaderDefinition

-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)
+Defined in: [packages/mermaid/src/rendering-util/render.ts:21](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L21)

 ## Properties

@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/rendering-util/render.ts:24](https://github.co

 > `optional` **algorithm**: `string`

-Defined in: [packages/mermaid/src/rendering-util/render.ts:27](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L27)
+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)

 ---

@@ -26,7 +26,7 @@ Defined in: [packages/mermaid/src/rendering-util/render.ts:27](https://github.co

 > **loader**: `LayoutLoader`

-Defined in: [packages/mermaid/src/rendering-util/render.ts:26](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L26)
+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)

 ---

@@ -34,4 +34,4 @@ Defined in: [packages/mermaid/src/rendering-util/render.ts:26](https://github.co

 > **name**: `string`

-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)
+Defined in: [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/mermaid/interfaces/Mermaid.md
+++ b/docs/config/setup/mermaid/interfaces/Mermaid.md
@@ -32,7 +32,7 @@ page.

 ### detectType()

-> **detectType**: (`text`, `config?`) => `string`
+> **detectType**: (`text`, `config`?) => `string`

 Defined in: [packages/mermaid/src/mermaid.ts:449](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L449)

@@ -105,7 +105,7 @@ An array of objects with the id of the diagram.

 ### ~~init()~~

-> **init**: (`config?`, `nodes?`, `callback?`) => `Promise`<`void`>
+> **init**: (`config`?, `nodes`?, `callback`?) => `Promise`<`void`>

 Defined in: [packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L442)

@@ -117,7 +117,7 @@ Defined in: [packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/

 [`MermaidConfig`](MermaidConfig.md)

-**Deprecated**, please set configuration in [initialize](#initialize).
+**Deprecated**, please set configuration in [initialize](Mermaid.md#initialize).

 ##### nodes?

@@ -141,13 +141,13 @@ Called once for each rendered diagram's id.

 #### Deprecated

-Use [initialize](#initialize) and [run](#run) instead.
+Use [initialize](Mermaid.md#initialize) and [run](Mermaid.md#run) instead.

 Renders the mermaid diagrams

 #### Deprecated

-Use [initialize](#initialize) and [run](#run) instead.
+Use [initialize](Mermaid.md#initialize) and [run](Mermaid.md#run) instead.

 ---

@@ -176,7 +176,7 @@ Configuration object for mermaid.

 ### ~~mermaidAPI~~

-> **mermaidAPI**: `Readonly`<{ `defaultConfig`: [`MermaidConfig`](MermaidConfig.md); `getConfig`: () => [`MermaidConfig`](MermaidConfig.md); `getDiagramFromText`: (`text`, `metadata`) => `Promise`<`Diagram`>; `getSiteConfig`: () => [`MermaidConfig`](MermaidConfig.md); `globalReset`: () => `void`; `initialize`: (`userOptions`) => `void`; `parse`: {(`text`, `parseOptions`): `Promise`<`false` | [`ParseResult`](ParseResult.md)>; (`text`, `parseOptions?`): `Promise`<[`ParseResult`](ParseResult.md)>; }; `render`: (`id`, `text`, `svgContainingElement?`) => `Promise`<[`RenderResult`](RenderResult.md)>; `reset`: () => `void`; `setConfig`: (`conf`) => [`MermaidConfig`](MermaidConfig.md); `updateSiteConfig`: (`conf`) => [`MermaidConfig`](MermaidConfig.md); }>
+> **mermaidAPI**: `Readonly`<{ `defaultConfig`: [`MermaidConfig`](MermaidConfig.md); `getConfig`: () => [`MermaidConfig`](MermaidConfig.md); `getDiagramFromText`: (`text`, `metadata`) => `Promise`<`Diagram`>; `getSiteConfig`: () => [`MermaidConfig`](MermaidConfig.md); `globalReset`: () => `void`; `initialize`: (`userOptions`) => `void`; `parse`: (`text`, `parseOptions`) => `Promise`<`false` | [`ParseResult`](ParseResult.md)>(`text`, `parseOptions`?) => `Promise`<[`ParseResult`](ParseResult.md)>; `render`: (`id`, `text`, `svgContainingElement`?) => `Promise`<[`RenderResult`](RenderResult.md)>; `reset`: () => `void`; `setConfig`: (`conf`) => [`MermaidConfig`](MermaidConfig.md); `updateSiteConfig`: (`conf`) => [`MermaidConfig`](MermaidConfig.md); }>

 Defined in: [packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L436)

@@ -184,81 +184,73 @@ Defined in: [packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/

 #### Deprecated

-Use [parse](#parse) and [render](#render) instead. Please [open a discussion](https://github.com/mermaid-js/mermaid/discussions) if your use case does not fit the new API.
+Use [parse](Mermaid.md#parse) and [render](Mermaid.md#render) instead. Please [open a discussion](https://github.com/mermaid-js/mermaid/discussions) if your use case does not fit the new API.

 ---

 ### parse()

-> **parse**: {(`text`, `parseOptions`): `Promise`<`false` | [`ParseResult`](ParseResult.md)>; (`text`, `parseOptions?`): `Promise`<[`ParseResult`](ParseResult.md)>; }
+> **parse**: (`text`, `parseOptions`) => `Promise`<`false` | [`ParseResult`](ParseResult.md)>(`text`, `parseOptions`?) => `Promise`<[`ParseResult`](ParseResult.md)>

 Defined in: [packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437)

-#### Call Signature
-
-> (`text`, `parseOptions`): `Promise`<`false` | [`ParseResult`](ParseResult.md)>
-
 Parse the text and validate the syntax.

-##### Parameters
+#### Parameters

-###### text
+##### text

 `string`

 The mermaid diagram definition.

-###### parseOptions
+##### parseOptions

 [`ParseOptions`](ParseOptions.md) & `object`

 Options for parsing.

-##### Returns
+#### Returns

 `Promise`<`false` | [`ParseResult`](ParseResult.md)>

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

-##### See
+#### See

 [ParseOptions](ParseOptions.md)

-##### Throws
+#### Throws

 Error if the diagram is invalid and parseOptions.suppressErrors is false or not set.

-#### Call Signature
-
-> (`text`, `parseOptions?`): `Promise`<[`ParseResult`](ParseResult.md)>
-
 Parse the text and validate the syntax.

-##### Parameters
+#### Parameters

-###### text
+##### text

 `string`

 The mermaid diagram definition.

-###### parseOptions?
+##### parseOptions?

 [`ParseOptions`](ParseOptions.md)

 Options for parsing.

-##### Returns
+#### Returns

 `Promise`<[`ParseResult`](ParseResult.md)>

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

-##### See
+#### See

 [ParseOptions](ParseOptions.md)

-##### Throws
+#### Throws

 Error if the diagram is invalid and parseOptions.suppressErrors is false or not set.

@@ -340,7 +332,7 @@ Defined in: [packages/mermaid/src/mermaid.ts:444](https://github.com/mermaid-js/

 ### render()

-> **render**: (`id`, `text`, `svgContainingElement?`) => `Promise`<[`RenderResult`](RenderResult.md)>
+> **render**: (`id`, `text`, `svgContainingElement`?) => `Promise`<[`RenderResult`](RenderResult.md)>

 Defined in: [packages/mermaid/src/mermaid.ts:438](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L438)

--- a/docs/config/setup/mermaid/interfaces/MermaidConfig.md
+++ b/docs/config/setup/mermaid/interfaces/MermaidConfig.md
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/config.type.ts:58](https://github.com/mermaid-

 > `optional` **altFontFamily**: `string`

-Defined in: [packages/mermaid/src/config.type.ts:132](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L132)
+Defined in: [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:132](https://github.com/mermaid

 > `optional` **architecture**: `ArchitectureDiagramConfig`

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

 ---

@@ -34,7 +34,7 @@ Defined in: [packages/mermaid/src/config.type.ts:204](https://github.com/mermaid

 > `optional` **arrowMarkerAbsolute**: `boolean`

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

 Controls whether or arrow markers in html code are absolute paths or anchors.
 This matters if you are using base tag settings.
@@ -45,7 +45,7 @@ This matters if you are using base tag settings.

 > `optional` **block**: `BlockDiagramConfig`

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

 ---

@@ -53,7 +53,7 @@ Defined in: [packages/mermaid/src/config.type.ts:211](https://github.com/mermaid

 > `optional` **c4**: `C4DiagramConfig`

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

 ---

@@ -61,7 +61,7 @@ Defined in: [packages/mermaid/src/config.type.ts:208](https://github.com/mermaid

 > `optional` **class**: `ClassDiagramConfig`

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

 ---

@@ -69,7 +69,7 @@ Defined in: [packages/mermaid/src/config.type.ts:197](https://github.com/mermaid

 > `optional` **darkMode**: `boolean`

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

 ---

@@ -77,7 +77,7 @@ Defined in: [packages/mermaid/src/config.type.ts:123](https://github.com/mermaid

 > `optional` **deterministicIds**: `boolean`

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

 This option controls if the generated ids of nodes in the SVG are
 generated randomly or based on a seed.
@@ -93,7 +93,7 @@ should not change unless content is changed.

 > `optional` **deterministicIDSeed**: `string`

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

 This option is the optional seed for deterministic ids.
 If set to `undefined` but deterministicIds is `true`, a simple number iterator is used.
@@ -105,7 +105,7 @@ You can set this attribute to base the seed on a static string.

 > `optional` **dompurifyConfig**: `Config`

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

 ---

@@ -115,24 +115,12 @@ Defined in: [packages/mermaid/src/config.type.ts:213](https://github.com/mermaid

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

-#### considerModelOrder?
-
-> `optional` **considerModelOrder**: `"NONE"` | `"NODES_AND_EDGES"` | `"PREFER_EDGES"` | `"PREFER_NODES"`
-
-Preserves the order of nodes and edges in the model file if this does not lead to additional edge crossings. Depending on the strategy this is not always possible since the node and edge order might be conflicting.
-
 #### cycleBreakingStrategy?

 > `optional` **cycleBreakingStrategy**: `"GREEDY"` | `"DEPTH_FIRST"` | `"INTERACTIVE"` | `"MODEL_ORDER"` | `"GREEDY_MODEL_ORDER"`

 This strategy decides how to find cycles in the graph and deciding which edges need adjustment to break loops.

-#### forceNodeModelOrder?
-
-> `optional` **forceNodeModelOrder**: `boolean`
-
-The node order given by the model does not change to produce a better layout. E.g. if node A is before node B in the model this is not changed during crossing minimization. This assumes that the node model order is already respected before crossing minimization. This can be achieved by setting considerModelOrder.strategy to NODES_AND_EDGES.
-
 #### mergeEdges?

 > `optional` **mergeEdges**: `boolean`
@@ -151,7 +139,7 @@ Elk specific option affecting how nodes are placed.

 > `optional` **er**: `ErDiagramConfig`

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

 ---

@@ -159,7 +147,7 @@ Defined in: [packages/mermaid/src/config.type.ts:199](https://github.com/mermaid

 > `optional` **flowchart**: `FlowchartDiagramConfig`

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

 ---

@@ -167,7 +155,7 @@ Defined in: [packages/mermaid/src/config.type.ts:192](https://github.com/mermaid

 > `optional` **fontFamily**: `string`

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

 Specifies the font to be used in the rendered diagrams.
 Can be any possible CSS `font-family`.
@@ -179,7 +167,7 @@ See <https://developer.mozilla.org/en-US/docs/Web/CSS/font-family>

 > `optional` **fontSize**: `number`

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

 ---

@@ -187,7 +175,7 @@ Defined in: [packages/mermaid/src/config.type.ts:215](https://github.com/mermaid

 > `optional` **forceLegacyMathML**: `boolean`

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

 This option forces Mermaid to rely on KaTeX's own stylesheet for rendering MathML. Due to differences between OS
 fonts and browser's MathML implementation, this option is recommended if consistent rendering is important.
@@ -199,7 +187,7 @@ If set to true, ignores legacyMathML.

 > `optional` **gantt**: `GanttDiagramConfig`

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

 ---

@@ -207,7 +195,7 @@ Defined in: [packages/mermaid/src/config.type.ts:194](https://github.com/mermaid

 > `optional` **gitGraph**: `GitGraphDiagramConfig`

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

 ---

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

 > `optional` **htmlLabels**: `boolean`

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

 ---

@@ -233,7 +221,7 @@ Defined in: [packages/mermaid/src/config.type.ts:124](https://github.com/mermaid

 > `optional` **journey**: `JourneyDiagramConfig`

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

 ---

@@ -241,7 +229,7 @@ Defined in: [packages/mermaid/src/config.type.ts:195](https://github.com/mermaid

 > `optional` **kanban**: `KanbanDiagramConfig`

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

 ---

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

 > `optional` **legacyMathML**: `boolean`

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

 This option specifies if Mermaid can expect the dependent to include KaTeX stylesheets for browsers
 without their own MathML implementation. If this option is disabled and MathML is not supported, the math
@@ -272,7 +260,7 @@ fall back to legacy rendering for KaTeX.

 > `optional` **logLevel**: `0` | `2` | `1` | `"trace"` | `"debug"` | `"info"` | `"warn"` | `"error"` | `"fatal"` | `3` | `4` | `5`

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

 This option decides the amount of logging to be used by mermaid.

@@ -292,7 +280,7 @@ Defines which main look to use for the diagram.

 > `optional` **markdownAutoWrap**: `boolean`

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

 ---

@@ -320,7 +308,7 @@ The maximum allowed size of the users text diagram

 > `optional` **mindmap**: `MindmapDiagramConfig`

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

 ---

@@ -328,7 +316,7 @@ Defined in: [packages/mermaid/src/config.type.ts:205](https://github.com/mermaid

 > `optional` **packet**: `PacketDiagramConfig`

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

 ---

@@ -336,7 +324,7 @@ Defined in: [packages/mermaid/src/config.type.ts:210](https://github.com/mermaid

 > `optional` **pie**: `PieDiagramConfig`

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

 ---

@@ -344,7 +332,7 @@ Defined in: [packages/mermaid/src/config.type.ts:200](https://github.com/mermaid

 > `optional` **quadrantChart**: `QuadrantChartConfig`

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

 ---

@@ -352,7 +340,7 @@ Defined in: [packages/mermaid/src/config.type.ts:201](https://github.com/mermaid

 > `optional` **radar**: `RadarDiagramConfig`

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

 ---

@@ -360,7 +348,7 @@ Defined in: [packages/mermaid/src/config.type.ts:212](https://github.com/mermaid

 > `optional` **requirement**: `RequirementDiagramConfig`

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

 ---

@@ -368,7 +356,7 @@ Defined in: [packages/mermaid/src/config.type.ts:203](https://github.com/mermaid

 > `optional` **sankey**: `SankeyDiagramConfig`

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

 ---

@@ -376,7 +364,7 @@ Defined in: [packages/mermaid/src/config.type.ts:209](https://github.com/mermaid

 > `optional` **secure**: `string`\[]

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

 This option controls which `currentConfig` keys are considered secure and
 can only be changed via call to `mermaid.initialize`.
@@ -388,7 +376,7 @@ This prevents malicious graph directives from overriding a site's default securi

 > `optional` **securityLevel**: `"strict"` | `"loose"` | `"antiscript"` | `"sandbox"`

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

 Level of trust for parsed diagram

@@ -398,7 +386,7 @@ Level of trust for parsed diagram

 > `optional` **sequence**: `SequenceDiagramConfig`

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

 ---

@@ -406,7 +394,7 @@ Defined in: [packages/mermaid/src/config.type.ts:193](https://github.com/mermaid

 > `optional` **startOnLoad**: `boolean`

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

 Dictates whether mermaid starts on Page load

@@ -416,7 +404,7 @@ Dictates whether mermaid starts on Page load

 > `optional` **state**: `StateDiagramConfig`

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

 ---

@@ -424,7 +412,7 @@ Defined in: [packages/mermaid/src/config.type.ts:198](https://github.com/mermaid

 > `optional` **suppressErrorRendering**: `boolean`

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

 Suppresses inserting 'Syntax error' diagram in the DOM.
 This is useful when you want to control how to handle syntax errors in your application.
@@ -462,7 +450,7 @@ Defined in: [packages/mermaid/src/config.type.ts:65](https://github.com/mermaid-

 > `optional` **timeline**: `TimelineDiagramConfig`

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

 ---

@@ -470,7 +458,7 @@ Defined in: [packages/mermaid/src/config.type.ts:196](https://github.com/mermaid

 > `optional` **wrap**: `boolean`

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

 ---

@@ -478,4 +466,4 @@ Defined in: [packages/mermaid/src/config.type.ts:214](https://github.com/mermaid

 > `optional` **xyChart**: `XYChartConfig`

-Defined in: [packages/mermaid/src/config.type.ts:202](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L202)
+Defined in: [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/mermaid/interfaces/ParseOptions.md
+++ b/docs/config/setup/mermaid/interfaces/ParseOptions.md
@@ -10,7 +10,7 @@

 # Interface: ParseOptions

-Defined in: [packages/mermaid/src/types.ts:88](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L88)
+Defined in: [packages/mermaid/src/types.ts:59](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L59)

 ## Properties

@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:88](https://github.com/mermaid-js/mer

 > `optional` **suppressErrors**: `boolean`

-Defined in: [packages/mermaid/src/types.ts:93](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L93)
+Defined in: [packages/mermaid/src/types.ts:64](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L64)

 If `true`, parse will return `false` instead of throwing error when the diagram is invalid.
 The `parseError` function will not be called.
--- a/docs/config/setup/mermaid/interfaces/ParseResult.md
+++ b/docs/config/setup/mermaid/interfaces/ParseResult.md
@@ -10,7 +10,7 @@

 # Interface: ParseResult

-Defined in: [packages/mermaid/src/types.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L96)
+Defined in: [packages/mermaid/src/types.ts:67](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L67)

 ## Properties

@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:96](https://github.com/mermaid-js/mer

 > **config**: [`MermaidConfig`](MermaidConfig.md)

-Defined in: [packages/mermaid/src/types.ts:104](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L104)
+Defined in: [packages/mermaid/src/types.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L75)

 The config passed as YAML frontmatter or directives

@@ -28,6 +28,6 @@ The config passed as YAML frontmatter or directives

 > **diagramType**: `string`

-Defined in: [packages/mermaid/src/types.ts:100](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L100)
+Defined in: [packages/mermaid/src/types.ts:71](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L71)

 The diagram type, e.g. 'flowchart', 'sequence', etc.
--- a/docs/config/setup/mermaid/interfaces/RenderOptions.md
+++ b/docs/config/setup/mermaid/interfaces/RenderOptions.md
@@ -10,7 +10,7 @@

 # Interface: RenderOptions

-Defined in: [packages/mermaid/src/rendering-util/render.ts:10](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L10)
+Defined in: [packages/mermaid/src/rendering-util/render.ts:7](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L7)

 ## Properties

@@ -18,4 +18,4 @@ Defined in: [packages/mermaid/src/rendering-util/render.ts:10](https://github.co

 > `optional` **algorithm**: `string`

-Defined in: [packages/mermaid/src/rendering-util/render.ts:11](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L11)
+Defined in: [packages/mermaid/src/rendering-util/render.ts:8](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L8)
--- a/docs/config/setup/mermaid/interfaces/RenderResult.md
+++ b/docs/config/setup/mermaid/interfaces/RenderResult.md
@@ -10,7 +10,7 @@

 # Interface: RenderResult

-Defined in: [packages/mermaid/src/types.ts:114](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L114)
+Defined in: [packages/mermaid/src/types.ts:85](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L85)

 ## Properties

@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:114](https://github.com/mermaid-js/me

 > `optional` **bindFunctions**: (`element`) => `void`

-Defined in: [packages/mermaid/src/types.ts:132](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L132)
+Defined in: [packages/mermaid/src/types.ts:103](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L103)

 Bind function to be called after the svg has been inserted into the DOM.
 This is necessary for adding event listeners to the elements in the svg.
@@ -45,7 +45,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.

 > **diagramType**: `string`

-Defined in: [packages/mermaid/src/types.ts:122](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L122)
+Defined in: [packages/mermaid/src/types.ts:93](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L93)

 The diagram type, e.g. 'flowchart', 'sequence', etc.

@@ -55,6 +55,6 @@ The diagram type, e.g. 'flowchart', 'sequence', etc.

 > **svg**: `string`

-Defined in: [packages/mermaid/src/types.ts:118](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L118)
+Defined in: [packages/mermaid/src/types.ts:89](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L89)

 The svg code for the rendered graph.
--- a/docs/config/setup/mermaid/interfaces/UnknownDiagramError.md
+++ b/docs/config/setup/mermaid/interfaces/UnknownDiagramError.md
@@ -1,65 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/mermaid/interfaces/UnknownDiagramError.md](../../../../../packages/mermaid/src/docs/config/setup/mermaid/interfaces/UnknownDiagramError.md).
-
-[**mermaid**](../../README.md)
-
---
-
-# Interface: UnknownDiagramError
-
-Defined in: [packages/mermaid/src/errors.ts:1](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/errors.ts#L1)
-
-## Extends
-
- `Error`
-
-## Properties
-
-### cause?
-
-> `optional` **cause**: `unknown`
-
-Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es2022.error.d.ts:26
-
-#### Inherited from
-
-`Error.cause`
-
---
-
-### message
-
-> **message**: `string`
-
-Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es5.d.ts:1077
-
-#### Inherited from
-
-`Error.message`
-
---
-
-### name
-
-> **name**: `string`
-
-Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es5.d.ts:1076
-
-#### Inherited from
-
-`Error.name`
-
---
-
-### stack?
-
-> `optional` **stack**: `string`
-
-Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es5.d.ts:1078
-
-#### Inherited from
-
-`Error.stack`
--- a/docs/config/setup/mermaid/type-aliases/InternalHelpers.md
+++ b/docs/config/setup/mermaid/type-aliases/InternalHelpers.md
@@ -10,6 +10,6 @@

 # Type Alias: InternalHelpers

-> **InternalHelpers** = _typeof_ `internalHelpers`
+> **InternalHelpers**: _typeof_ `internalHelpers`

 Defined in: [packages/mermaid/src/internals.ts:33](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/internals.ts#L33)
--- a/docs/config/setup/mermaid/type-aliases/ParseErrorFunction.md
+++ b/docs/config/setup/mermaid/type-aliases/ParseErrorFunction.md
@@ -10,7 +10,7 @@

 # Type Alias: ParseErrorFunction()

-> **ParseErrorFunction** = (`err`, `hash?`) => `void`
+> **ParseErrorFunction**: (`err`, `hash`?) => `void`

 Defined in: [packages/mermaid/src/Diagram.ts:10](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/Diagram.ts#L10)

--- a/docs/config/setup/mermaid/type-aliases/SVG.md
+++ b/docs/config/setup/mermaid/type-aliases/SVG.md
@@ -10,6 +10,6 @@

 # Type Alias: SVG

-> **SVG** = `d3.Selection`<`SVGSVGElement`, `unknown`, `Element` | `null`, `unknown`>
+> **SVG**: `d3.Selection`<`SVGSVGElement`, `unknown`, `Element` | `null`, `unknown`>

-Defined in: [packages/mermaid/src/diagram-api/types.ts:128](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L128)
+Defined in: [packages/mermaid/src/diagram-api/types.ts:126](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L126)
--- a/docs/config/setup/mermaid/type-aliases/SVGGroup.md
+++ b/docs/config/setup/mermaid/type-aliases/SVGGroup.md
@@ -10,6 +10,6 @@

 # Type Alias: SVGGroup

-> **SVGGroup** = `d3.Selection`<`SVGGElement`, `unknown`, `Element` | `null`, `unknown`>
+> **SVGGroup**: `d3.Selection`<`SVGGElement`, `unknown`, `Element` | `null`, `unknown`>

-Defined in: [packages/mermaid/src/diagram-api/types.ts:130](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L130)
+Defined in: [packages/mermaid/src/diagram-api/types.ts:128](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L128)
--- a/docs/config/tidy-tree.md
+++ b/docs/config/tidy-tree.md
@@ -1,89 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/tidy-tree.md](../../packages/mermaid/src/docs/config/tidy-tree.md).
-
-# Tidy-tree Layout
-
-The **tidy-tree** layout arranges nodes in a hierarchical, tree-like structure. It is especially useful for diagrams where parent-child relationships are important, such as mindmaps.
-
-## Features
-
- Organizes nodes in a tidy, non-overlapping tree
- Ideal for mindmaps and hierarchical data
- Automatically adjusts spacing for readability
-
-## Example Usage
-
-```mermaid-example
---
-config:
-  layout: tidy-tree
---
-mindmap
-root((mindmap is a long thing))
-  A
-  B
-  C
-  D
-```
-
-```mermaid
---
-config:
-  layout: tidy-tree
---
-mindmap
-root((mindmap is a long thing))
-  A
-  B
-  C
-  D
-```
-
-```mermaid-example
---
-config:
-  layout: tidy-tree
---
-mindmap
-root((mindmap))
-    Origins
-      Long history
-      ::icon(fa fa-book)
-      Popularisation
-        British popular psychology author Tony Buzan
-    Research
-      On effectiveness<br/>and features
-      On Automatic creation
-        Uses
-            Creative techniques
-            Strategic planning
-            Argument mapping
-```
-
-```mermaid
---
-config:
-  layout: tidy-tree
---
-mindmap
-root((mindmap))
-    Origins
-      Long history
-      ::icon(fa fa-book)
-      Popularisation
-        British popular psychology author Tony Buzan
-    Research
-      On effectiveness<br/>and features
-      On Automatic creation
-        Uses
-            Creative techniques
-            Strategic planning
-            Argument mapping
-```
-
-## Note
-
- Currently, tidy-tree is primarily supported for mindmap diagrams.
--- a/docs/diagrams/flowchart-code-flow.mmd
+++ b/docs/diagrams/flowchart-code-flow.mmd
@@ -1,189 +0,0 @@
---
-references:
-  - "File: /packages/mermaid/src/diagrams/flowchart/flowDiagram.ts"
-  - "File: /packages/mermaid/src/diagrams/flowchart/flowDb.ts"
-  - "File: /packages/mermaid/src/diagrams/flowchart/flowDetector.ts"
-  - "File: /packages/mermaid/src/diagrams/flowchart/flowDetector-v2.ts"
-  - "File: /packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts"
-  - "File: /packages/mermaid/src/diagrams/flowchart/styles.ts"
-  - "File: /packages/mermaid/src/diagrams/flowchart/types.ts"
-  - "File: /packages/mermaid/src/diagrams/flowchart/flowChartShapes.js"
-  - "File: /packages/mermaid/src/diagrams/flowchart/parser/flowParser.ts"
-  - "File: /packages/mermaid/src/diagrams/flowchart/elk/detector.ts"
-generationTime: 2025-07-23T10:31:53.266Z
---
-flowchart TD
-    %% Entry Points and Detection
-    Input["User Input Text"] --> Detection{Detection Phase}
-    
-    Detection --> flowDetector["flowDetector.ts<br/>detector(txt, config)"]
-    Detection --> flowDetectorV2["flowDetector-v2.ts<br/>detector(txt, config)"]
-    Detection --> elkDetector["elk/detector.ts<br/>detector(txt, config)"]
-    
-    flowDetector --> |"Checks /^\s*graph/"| DetectLegacy{Legacy Flowchart?}
-    flowDetectorV2 --> |"Checks /^\s*flowchart/"| DetectNew{New Flowchart?}
-    elkDetector --> |"Checks /^\s*flowchart-elk/"| DetectElk{ELK Layout?}
-    
-    DetectLegacy --> |Yes| LoadDiagram
-    DetectNew --> |Yes| LoadDiagram
-    DetectElk --> |Yes| LoadDiagram
-    
-    %% Loading Phase
-    LoadDiagram["loader() function"] --> flowDiagram["flowDiagram.ts<br/>diagram object"]
-    
-    flowDiagram --> DiagramStructure{Diagram Components}
-    DiagramStructure --> Parser["parser: flowParser"]
-    DiagramStructure --> Database["db: new FlowDB()"]
-    DiagramStructure --> Renderer["renderer: flowRenderer-v3-unified"]
-    DiagramStructure --> Styles["styles: flowStyles"]
-    DiagramStructure --> Init["init: (cnf: MermaidConfig)"]
-    
-    %% Parser Phase
-    Parser --> flowParser["parser/flowParser.ts<br/>newParser.parse(src)"]
-    flowParser --> |"Preprocesses src"| RemoveWhitespace["Remove trailing whitespace<br/>src.replace(/}\s*\n/g, '}\n')"]
-    RemoveWhitespace --> flowJison["parser/flow.jison<br/>flowJisonParser.parse(newSrc)"]
-    
-    flowJison --> ParseGraph["Parse Graph Structure"]
-    ParseGraph --> ParseVertices["Parse Vertices"]
-    ParseGraph --> ParseEdges["Parse Edges"]
-    ParseGraph --> ParseSubgraphs["Parse Subgraphs"]
-    ParseGraph --> ParseClasses["Parse Classes"]
-    ParseGraph --> ParseStyles["Parse Styles"]
-    
-    %% Database Phase - FlowDB Class
-    Database --> FlowDBClass["flowDb.ts<br/>FlowDB class"]
-    
-    FlowDBClass --> DBInit["constructor()<br/>- Initialize counters<br/>- Bind methods<br/>- Setup toolTips<br/>- Call clear()"]
-    
-    DBInit --> DBMethods{FlowDB Methods}
-    
-    DBMethods --> addVertex["addVertex(id, textObj, type, style,<br/>classes, dir, props, metadata)"]
-    DBMethods --> addLink["addLink(_start[], _end[], linkData)"]
-    DBMethods --> addSingleLink["addSingleLink(_start, _end, type, id)"]
-    DBMethods --> setDirection["setDirection(dir)"]
-    DBMethods --> addSubGraph["addSubGraph(nodes[], id, title)"]
-    DBMethods --> addClass["addClass(id, style)"]
-    DBMethods --> setClass["setClass(ids, className)"]
-    DBMethods --> setTooltip["setTooltip(ids, tooltip)"]
-    DBMethods --> setClickEvent["setClickEvent(id, functionName, args)"]
-    DBMethods --> setClickFun["setClickFun(id, functionName, args)"]
-    
-    %% Vertex Processing
-    addVertex --> VertexProcess{Vertex Processing}
-    VertexProcess --> CreateVertex["Create FlowVertex object<br/>- id, labelType, domId<br/>- styles[], classes[]"]
-    VertexProcess --> SanitizeText["sanitizeText(textObj.text)"]
-    VertexProcess --> ParseMetadata["Parse YAML metadata<br/>yaml.load(yamlData)"]
-    VertexProcess --> SetVertexProps["Set vertex properties<br/>- shape, label, icon, form<br/>- pos, img, constraint, w, h"]
-    
-    %% Edge Processing  
-    addSingleLink --> EdgeProcess{Edge Processing}
-    EdgeProcess --> CreateEdge["Create FlowEdge object<br/>- start, end, type, text<br/>- labelType, classes[]"]
-    EdgeProcess --> ProcessLinkText["Process link text<br/>- sanitizeText()<br/>- strip quotes"]
-    EdgeProcess --> SetEdgeProps["Set edge properties<br/>- type, stroke, length"]
-    EdgeProcess --> GenerateEdgeId["Generate edge ID<br/>getEdgeId(start, end, counter)"]
-    EdgeProcess --> ValidateEdgeLimit["Validate edge limit<br/>maxEdges check"]
-    
-    %% Data Collection
-    DBMethods --> GetData["getData()"]
-    GetData --> CollectNodes["Collect nodes[] from vertices"]
-    GetData --> CollectEdges["Collect edges[] from edges"]
-    GetData --> ProcessSubGraphs["Process subgraphs<br/>- parentDB Map<br/>- subGraphDB Map"]
-    GetData --> AddNodeFromVertex["addNodeFromVertex()<br/>for each vertex"]
-    GetData --> ProcessEdgeTypes["destructEdgeType()<br/>arrowTypeStart, arrowTypeEnd"]
-    
-    %% Node Creation
-    AddNodeFromVertex --> NodeCreation{Node Creation}
-    NodeCreation --> FindExistingNode["findNode(nodes, vertex.id)"]
-    NodeCreation --> CreateBaseNode["Create base node<br/>- id, label, parentId<br/>- cssStyles, cssClasses<br/>- shape, domId, tooltip"]
-    NodeCreation --> GetCompiledStyles["getCompiledStyles(classDefs)"]
-    NodeCreation --> GetTypeFromVertex["getTypeFromVertex(vertex)"]
-    
-    %% Rendering Phase
-    Renderer --> flowRendererV3["flowRenderer-v3-unified.ts<br/>draw(text, id, version, diag)"]
-    
-    flowRendererV3 --> RenderInit["Initialize rendering<br/>- getConfig()<br/>- handle securityLevel<br/>- getDiagramElement()"]
-    
-    RenderInit --> GetLayoutData["diag.db.getData()<br/>as LayoutData"]
-    GetLayoutData --> SetupLayoutData["Setup layout data<br/>- type, layoutAlgorithm<br/>- direction, spacing<br/>- markers, diagramId"]
-    
-    SetupLayoutData --> CallRender["render(data4Layout, svg)"]
-    CallRender --> SetupViewPort["setupViewPortForSVG(svg, padding)"]
-    SetupViewPort --> ProcessLinks["Process vertex links<br/>- create anchor elements<br/>- handle click events"]
-    
-    %% Shape Rendering
-    CallRender --> ShapeSystem["flowChartShapes.js<br/>Shape Functions"]
-    
-    ShapeSystem --> ShapeFunctions{Shape Functions}
-    ShapeFunctions --> question["question(parent, bbox, node)"]
-    ShapeFunctions --> hexagon["hexagon(parent, bbox, node)"]
-    ShapeFunctions --> rect_left_inv_arrow["rect_left_inv_arrow(parent, bbox, node)"]
-    ShapeFunctions --> lean_right["lean_right(parent, bbox, node)"]
-    ShapeFunctions --> lean_left["lean_left(parent, bbox, node)"]
-    
-    ShapeFunctions --> insertPolygonShape["insertPolygonShape(parent, w, h, points)"]
-    ShapeFunctions --> intersectPolygon["intersectPolygon(node, points, point)"]
-    ShapeFunctions --> intersectRect["intersectRect(node, point)"]
-    
-    %% Styling System
-    Styles --> stylesTS["styles.ts<br/>getStyles(options)"]
-    stylesTS --> StyleOptions["FlowChartStyleOptions<br/>- arrowheadColor, border2<br/>- clusterBkg, mainBkg<br/>- fontFamily, textColor"]
-    
-    StyleOptions --> GenerateCSS["Generate CSS styles<br/>- .label, .cluster-label<br/>- .node, .edgePath<br/>- .flowchart-link, .edgeLabel"]
-    GenerateCSS --> GetIconStyles["getIconStyles()"]
-    
-    %% Type System
-    Parser --> TypeSystem["types.ts<br/>Type Definitions"]
-    TypeSystem --> FlowVertex["FlowVertex interface"]
-    TypeSystem --> FlowEdge["FlowEdge interface"]
-    TypeSystem --> FlowClass["FlowClass interface"]
-    TypeSystem --> FlowSubGraph["FlowSubGraph interface"]
-    TypeSystem --> FlowVertexTypeParam["FlowVertexTypeParam<br/>Shape types"]
-    
-    %% Utility Functions
-    DBMethods --> UtilityFunctions{Utility Functions}
-    UtilityFunctions --> lookUpDomId["lookUpDomId(id)"]
-    UtilityFunctions --> getClasses["getClasses()"]
-    UtilityFunctions --> getDirection["getDirection()"]
-    UtilityFunctions --> getVertices["getVertices()"]
-    UtilityFunctions --> getEdges["getEdges()"]
-    UtilityFunctions --> getSubGraphs["getSubGraphs()"]
-    UtilityFunctions --> clear["clear()"]
-    UtilityFunctions --> defaultConfig["defaultConfig()"]
-    
-    %% Event Handling
-    ProcessLinks --> EventHandling{Event Handling}
-    EventHandling --> setupToolTips["setupToolTips(element)"]
-    EventHandling --> bindFunctions["bindFunctions(element)"]
-    EventHandling --> runFunc["utils.runFunc(functionName, args)"]
-    
-    %% Common Database Functions
-    DBMethods --> CommonDB["commonDb.js functions"]
-    CommonDB --> setAccTitle["setAccTitle()"]
-    CommonDB --> getAccTitle["getAccTitle()"]
-    CommonDB --> setAccDescription["setAccDescription()"]
-    CommonDB --> getAccDescription["getAccDescription()"]
-    CommonDB --> setDiagramTitle["setDiagramTitle()"]
-    CommonDB --> getDiagramTitle["getDiagramTitle()"]
-    CommonDB --> commonClear["clear()"]
-    
-    %% Final Output
-    ProcessLinks --> FinalSVG["Final SVG Output"]
-    
-    %% Layout Algorithm Selection
-    SetupLayoutData --> LayoutAlgorithm{Layout Algorithm}
-    LayoutAlgorithm --> Dagre["dagre<br/>(default)"]
-    LayoutAlgorithm --> DagreWrapper["dagre-wrapper<br/>(v2 renderer)"]
-    LayoutAlgorithm --> ELK["elk<br/>(external package)"]
-    
-    %% Testing Components
-    FlowDBClass --> TestFiles["Test Files"]
-    TestFiles --> flowDbSpec["flowDb.spec.ts"]
-    TestFiles --> flowChartShapesSpec["flowChartShapes.spec.js"]
-    TestFiles --> ParserTests["parser/*.spec.js files<br/>- flow-text.spec.js<br/>- flow-edges.spec.js<br/>- flow-style.spec.js<br/>- subgraph.spec.js"]
-    
-    %% Configuration
-    Init --> ConfigSetup["Configuration Setup"]
-    ConfigSetup --> FlowchartConfig["cnf.flowchart config"]
-    ConfigSetup --> ArrowMarkers["arrowMarkerAbsolute"]
-    ConfigSetup --> LayoutConfig["layout config"]
-    ConfigSetup --> SetConfig["setConfig() calls"]
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
shubham-mermaid	526374e04a	on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>	2025-07-15 00:40:44 +05:30
shubham-mermaid	5493d4344c	Merge branch 'develop' into test-validate-lockfile-workflow	2025-07-15 00:40:30 +05:30
omkarht	63d84f125b	added changeset	2025-07-14 19:40:53 +05:30