fix(deps): update all major dependencies

Merge pull request #7215 from mermaid-js/update-timings
Update E2E Timings
2025-12-10 22:44:11 +01:00 · 2025-12-08 00:39:44 +00:00 · 2025-12-04 13:42:51 +05:30 · 2025-12-04 04:17:52 +00:00 · 2025-12-03 09:58:48 +00:00 · 2025-12-02 08:57:58 +00:00
200 changed files with 8692 additions and 7020 deletions
--- a/.changeset/brave-baths-behave.md
+++ b/.changeset/brave-baths-behave.md
@@ -0,0 +1,5 @@
+---
+'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
@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Support edge animation in hand drawn look
--- a/.changeset/busy-mirrors-try.md
+++ b/.changeset/busy-mirrors-try.md
@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Resolved parsing error where direction TD was not recognized within subgraphs
--- a/.changeset/chatty-insects-dream.md
+++ b/.changeset/chatty-insects-dream.md
@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix(treemap): Fixed treemap classDef style application to properly apply user-defined styles
--- a/.changeset/chilly-words-march.md
+++ b/.changeset/chilly-words-march.md
@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Correct viewBox casing and make SVGs responsive
--- a/.changeset/clean-wolves-turn.md
+++ b/.changeset/clean-wolves-turn.md
@@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-fix: Render newlines as spaces in class diagrams
--- a/.changeset/crazy-loops-matter.md
+++ b/.changeset/crazy-loops-matter.md
@@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-fix: Handle arrows correctly when auto number is enabled
--- a/.changeset/curly-apes-prove.md
+++ b/.changeset/curly-apes-prove.md
@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Improve participant parsing and prevent recursive loops on invalid syntax
--- a/.changeset/deep-times-make.md
+++ b/.changeset/deep-times-make.md
@@ -1,5 +0,0 @@
---
-'mermaid': minor
---
-
-Add IDs in architecture diagrams
--- a/.changeset/four-eyes-wish.md
+++ b/.changeset/four-eyes-wish.md
@@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-fix: Ensure edge label color is applied when using classDef with edge IDs
--- a/.changeset/hungry-baths-glow.md
+++ b/.changeset/hungry-baths-glow.md
@@ -1,5 +0,0 @@
---
-'mermaid': minor
---
-
-feat: Added support for new participant types (`actor`, `boundary`, `control`, `entity`, `database`, `collections`, `queue`) in `sequenceDiagram`.
--- a/.changeset/hungry-guests-drive.md
+++ b/.changeset/hungry-guests-drive.md
@@ -1,7 +0,0 @@
---
-'mermaid': minor
-'@mermaid-js/layout-tidy-tree': minor
-'@mermaid-js/layout-elk': minor
---
-
-feat: Update mindmap rendering to support multiple layouts, improved edge intersections, and new shapes
--- a/.changeset/lazy-brooms-battle.md
+++ b/.changeset/lazy-brooms-battle.md
@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+feat: add alias support for new participant syntax of sequence diagrams
--- a/.changeset/lazy-wolves-film.md
+++ b/.changeset/lazy-wolves-film.md
@@ -1,5 +0,0 @@
---
-'mermaid': patch
---
-
-fix: Ensure flowchart htmlLabels resolution respects both global and flowchart config
--- a/.changeset/loud-results-melt.md
+++ b/.changeset/loud-results-melt.md
@@ -0,0 +1,5 @@
+---
+'mermaid': minor
+---
+
+feat: Add half-arrowheads (solid & stick) and central connection support
--- a/.changeset/proud-colts-smell.md
+++ b/.changeset/proud-colts-smell.md
@@ -1,5 +0,0 @@
---
-'mermaid': minor
---
-
-feat: Add IDs in architecture diagrams
--- a/.changeset/revert-marked-dependency.md
+++ b/.changeset/revert-marked-dependency.md
@@ -1,9 +0,0 @@
---
-'mermaid': patch
---
-
-chore: revert marked dependency from ^15.0.7 to ^16.0.0
-
- Reverted marked package version to ^16.0.0 for better compatibility
- This is a dependency update that maintains API compatibility
- All tests pass with the updated version
--- a/.changeset/short-seals-sort.md
+++ b/.changeset/short-seals-sort.md
@@ -0,0 +1,5 @@
+---
+'mermaid': minor
+---
+
+feat: allow to put notes in namespaces on classDiagram
--- a/.changeset/slow-lemons-know.md
+++ b/.changeset/slow-lemons-know.md
@@ -0,0 +1,5 @@
+---
+'@mermaid': patch
+---
+
+fix: Mindmap breaking in ELK layout
--- a/.changeset/sweet-games-build.md
+++ b/.changeset/sweet-games-build.md
@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix(er-diagram): prevent syntax error when using 'u', numbers, and decimals in node names
--- a/.changeset/ten-plums-bet.md
+++ b/.changeset/ten-plums-bet.md
@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Support ComponentQueue_Ext to prevent parsing error
--- a/.changeset/tricky-rivers-stand.md
+++ b/.changeset/tricky-rivers-stand.md
@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: validate dates and tick interval to prevent UI freeze/crash in gantt diagramtype
--- a/.changeset/wide-lines-trade.md
+++ b/.changeset/wide-lines-trade.md
@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Mindmap rendering issue when the number of Level 2 nodes exceeds 11
--- a/.cspell/code-terms.txt
+++ b/.cspell/code-terms.txt
@@ -1,3 +1,5 @@
+!viewbox
+# It should be viewBox
 # This file contains coding related terms
 ALPHANUM
 antiscript
--- a/.cspell/libraries.txt
+++ b/.cspell/libraries.txt
@@ -64,6 +64,7 @@ rscratch
 shiki
 Slidev
 sparkline
+speccharts
 sphinxcontrib
 ssim
 stylis
--- a/.esbuild/util.ts
+++ b/.esbuild/util.ts
@@ -71,6 +71,9 @@ 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}`),
@@ -82,15 +85,13 @@ export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
    chunkNames: `chunks/${outFileName}/[name]-[hash]`,
    define: {
      // This needs to be stringified for esbuild
-      includeLargeFeatures: `${includeLargeFeatures}`,
+      'injected.includeLargeFeatures': `${includeLargeFeatures}`,
+      'injected.version': `'${version}'`,
      '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/workflows/autofix.yml
+++ b/.github/workflows/autofix.yml
@@ -13,13 +13,13 @@ jobs:
  autofix:
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1

      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
        # uses version from "packageManager" field in package.json

      - name: Setup Node.js
-        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
        with:
          cache: pnpm
          node-version-file: '.node-version'
--- a/.github/workflows/build-docs.yml
+++ b/.github/workflows/build-docs.yml
@@ -18,12 +18,12 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1

      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0

      - name: Setup Node.js
-        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
        with:
          cache: pnpm
          node-version-file: '.node-version'
--- a/.github/workflows/check-readme-in-sync.yml
+++ b/.github/workflows/check-readme-in-sync.yml
@@ -18,7 +18,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1

      - name: Check for difference in README.md and docs/README.md
        run: |
--- a/.github/workflows/codeql.yml
+++ b/.github/workflows/codeql.yml
@@ -26,17 +26,17 @@ jobs:
    strategy:
      fail-fast: false
      matrix:
-        language: ['javascript']
-        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
+        language: ['javascript', 'actions']
+        # CodeQL supports [ 'actions', 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
        # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support

    steps:
      - name: Checkout repository
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1

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

      # ℹ️ 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@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10
+        uses: github/codeql-action/analyze@cf1bb45a277cb3c205638b2cd5c984db1c46a412 # v4.31.7
--- a/.github/workflows/dependency-review.yml
+++ b/.github/workflows/dependency-review.yml
@@ -15,6 +15,6 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: 'Checkout Repository'
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
      - name: 'Dependency Review'
        uses: actions/dependency-review-action@3b139cfc5fae8b618d3eae3675e383bb1769c019 # v4.5.0
--- a/.github/workflows/e2e-applitools.yml
+++ b/.github/workflows/e2e-applitools.yml
@@ -29,13 +29,13 @@ jobs:
        run: |
          echo "::error,title=Not using Applitools::APPLITOOLS_API_KEY is empty, disabling Applitools for this run."

-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1

      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
        # uses version from "packageManager" field in package.json

      - name: Setup Node.js
-        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
        with:
          node-version-file: '.node-version'

@@ -53,7 +53,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@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
+        uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
        id: cypress
        with:
          start: pnpm run dev
--- a/.github/workflows/e2e-timings.yml
+++ b/.github/workflows/e2e-timings.yml
@@ -20,19 +20,19 @@ jobs:
      image: cypress/browsers:node-20.11.0-chrome-121.0.6167.85-1-ff-120.0-edge-121.0.2277.83-1
      options: --user 1001
    steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
      - name: Setup Node.js
-        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
        with:
          node-version-file: '.node-version'
      - name: Install dependencies
-        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
+        uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
        with:
          runTests: false

      - name: Cypress run
-        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
+        uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
        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@18e469570b1cf0dfc11d60ec121099f8ff3e617a
+        uses: peter-evans/create-pull-request@84ae59a2cdc2258d6fa0732dd66352dddae2a412
        with:
          add-paths: |
            cypress/timings.json
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -37,15 +37,15 @@ jobs:
      image: cypress/browsers:node-20.11.0-chrome-121.0.6167.85-1-ff-120.0-edge-121.0.2277.83-1
      options: --user 1001
    steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
      - name: Setup Node.js
-        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
        with:
          node-version-file: '.node-version'
      - name: Cache snapshots
        id: cache-snapshot
-        uses: actions/cache@0c907a75c2c80ebcb7f088228285e798b750cf8f # v4.2.1
+        uses: actions/cache@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
        with:
          path: ./cypress/snapshots
          key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
@@ -53,13 +53,13 @@ jobs:
      # If a snapshot for a given Hash is not found, we checkout that commit, run the tests and cache the snapshots.
      - name: Switch to base branch
        if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
        with:
          ref: ${{ env.targetHash }}

      - name: Install dependencies
        if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
-        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
+        uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
        with:
          # just perform install
          runTests: false
@@ -82,26 +82,26 @@ jobs:
      matrix:
        containers: [1, 2, 3, 4, 5]
    steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1

      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
        # uses version from "packageManager" field in package.json

      - name: Setup Node.js
-        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
        with:
          node-version-file: '.node-version'

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

      - name: Install dependencies
-        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
+        uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
        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@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
+        uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
        id: cypress
        with:
          install: false
--- a/.github/workflows/link-checker.yml
+++ b/.github/workflows/link-checker.yml
@@ -29,10 +29,10 @@ jobs:
      # lychee only uses the GITHUB_TOKEN to avoid rate-limiting
      contents: read
    steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1

      - name: Restore lychee cache
-        uses: actions/cache@0c907a75c2c80ebcb7f088228285e798b750cf8f # v4.2.1
+        uses: actions/cache@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
        with:
          path: .lycheecache
          key: cache-lychee-${{ github.sha }}
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -15,7 +15,7 @@ jobs:
  docker-lint:
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1

      - uses: hadolint/hadolint-action@54c9adbab1582c2ef04b2016b760714a4bfde3cf # v3.1.0
        with:
@@ -23,13 +23,13 @@ jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1

      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
        # uses version from "packageManager" field in package.json

      - name: Setup Node.js
-        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
        with:
          cache: pnpm
          node-version-file: '.node-version'
--- a/.github/workflows/pr-labeler.yml
+++ b/.github/workflows/pr-labeler.yml
@@ -31,7 +31,7 @@ jobs:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

      - name: Add "Sponsored by MermaidChart" label
-        uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
+        uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8.0.0
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}
          script: |
--- a/.github/workflows/publish-docs.yml
+++ b/.github/workflows/publish-docs.yml
@@ -23,12 +23,12 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1

      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0

      - name: Setup Node.js
-        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
        with:
          cache: pnpm
          node-version-file: '.node-version'
@@ -43,7 +43,7 @@ jobs:
        run: pnpm --filter mermaid run docs:build:vitepress

      - name: Upload artifact
-        uses: actions/upload-pages-artifact@56afc609e74202658d3ffba0e8f6dda462b719fa # v3.0.1
+        uses: actions/upload-pages-artifact@7b1f4a764d45c48632c6b24a0339c27f5614fb0b # v4.0.0
        with:
          path: packages/mermaid/src/vitepress/.vitepress/dist

--- a/.github/workflows/release-preview-publish.yml
+++ b/.github/workflows/release-preview-publish.yml
@@ -9,14 +9,14 @@ jobs:
  publish-preview:
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
        with:
          fetch-depth: 0

      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0

      - name: Setup Node.js
-        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
        with:
          cache: pnpm
          node-version-file: '.node-version'
--- a/.github/workflows/release-preview.yml
+++ b/.github/workflows/release-preview.yml
@@ -26,12 +26,12 @@ jobs:
    timeout-minutes: 5
    steps:
      - name: Checkout Repo
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1

      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0

      - name: Setup Node.js
-        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
        with:
          cache: pnpm
          node-version-file: '.node-version'
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -21,12 +21,12 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1

      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0

      - name: Setup Node.js
-        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
        with:
          cache: pnpm
          node-version-file: '.node-version'
@@ -36,11 +36,10 @@ jobs:

      - name: Create Release Pull Request or Publish to npm
        id: changesets
-        uses: changesets/action@c8bada60c408975afd1a20b3db81d6eee6789308 # v1.4.9
+        uses: changesets/action@06245a4e0a36c064a573d4150030f5ec548e4fcc # v1.4.10
        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
@@ -16,22 +16,22 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
        with:
          persist-credentials: false
      - name: Run analysis
-        uses: ossf/scorecard-action@f49aabe0b5af0936a0987cfb85d86b75731b0186 # v2.4.1
+        uses: ossf/scorecard-action@4eaacf0543bb3f2c246792bd56e8cdeffafb205a # v2.4.3
        with:
          results_file: results.sarif
          results_format: sarif
          publish_results: true
      - name: Upload artifact
-        uses: actions/upload-artifact@4cec3d8aa04e39d1a68397de0c4cd6fb9dce8ec1 # v4.6.1
+        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
        with:
          name: SARIF file
          path: results.sarif
          retention-days: 5
      - name: Upload to code-scanning
-        uses: github/codeql-action/upload-sarif@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10
+        uses: github/codeql-action/upload-sarif@cf1bb45a277cb3c205638b2cd5c984db1c46a412 # v4.31.7
        with:
          sarif_file: results.sarif
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -9,13 +9,13 @@ jobs:
  unit-test:
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1

      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
        # uses version from "packageManager" field in package.json

      - name: Setup Node.js
-        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
        with:
          cache: pnpm
          node-version-file: '.node-version'
--- a/.github/workflows/update-browserlist.yml
+++ b/.github/workflows/update-browserlist.yml
@@ -8,7 +8,7 @@ jobs:
  update-browser-list:
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
      - run: npx update-browserslist-db@latest
      - name: Commit changes
@@ -19,7 +19,7 @@ jobs:
          message: 'chore: update browsers list'
          push: false
      - name: Create Pull Request
-        uses: peter-evans/create-pull-request@67ccf781d68cd99b580ae25a5c18a1cc84ffff1f # v7.0.6
+        uses: peter-evans/create-pull-request@84ae59a2cdc2258d6fa0732dd66352dddae2a412 # v7.0.9
        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:
+  pull_request_target:
    paths:
      - 'pnpm-lock.yaml'
      - '**/package.json'
@@ -12,16 +12,11 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
        with:
          fetch-depth: 0
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-
-      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+          ref: ${{ github.event.pull_request.head.sha }}
+          repository: ${{ github.event.pull_request.head.repo.full_name }}

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

+      - name: Find existing lockfile validation comment
+        if: always()
+        uses: peter-evans/find-comment@v4
+        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@v4
+        uses: peter-evans/create-or-update-comment@v5
        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@v8
+        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/.node-version
+++ b/.node-version
@@ -1 +1 @@
-22.14.0
+24.11.1
--- a/.vite/build.ts
+++ b/.vite/build.ts
@@ -78,6 +78,8 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
    },
    define: {
      'import.meta.vitest': 'undefined',
+      'injected.includeLargeFeatures': 'true',
+      'injected.version': `'0.0.0'`,
    },
    resolve: {
      extensions: [],
@@ -94,10 +96,6 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
      }),
      ...visualizerOptions(packageName, core),
    ],
-    define: {
-      // Needs to be string
-      includeLargeFeatures: 'true',
-    },
  };

  if (watch && config.build) {
--- 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.4 \
+RUN apk add --no-cache git~=2.43 \
    && git config --add --system safe.directory /mermaid

 ENV NODE_OPTIONS="--max_old_space_size=8192"
--- a/cypress/helpers/util.ts
+++ b/cypress/helpers/util.ts
@@ -6,6 +6,7 @@ interface CypressConfig {
  listUrl?: boolean;
  listId?: string;
  name?: string;
+  screenshot?: boolean;
 }
 type CypressMermaidConfig = MermaidConfig & CypressConfig;

@@ -90,20 +91,33 @@ export const renderGraph = (

 export const openURLAndVerifyRendering = (
  url: string,
-  options: CypressMermaidConfig,
+  { screenshot = true, ...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');

-  if (validation) {
-    cy.get('svg').should(validation);
+  // 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);
+    }
  }

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

 export const verifyScreenshot = (name: string): void => {
--- a/cypress/integration/rendering/c4.spec.js
+++ b/cypress/integration/rendering/c4.spec.js
@@ -114,4 +114,28 @@ 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,6 +562,20 @@ 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,6 +709,20 @@ 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/erDiagram.spec.js
+++ b/cypress/integration/rendering/erDiagram.spec.js
@@ -369,4 +369,92 @@ ORDER ||--|{ LINE-ITEM : contains
      );
    });
  });
+
+  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-handDrawn.spec.js
+++ b/cypress/integration/rendering/flowchart-handDrawn.spec.js
@@ -1029,4 +1029,19 @@ 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,6 +79,18 @@ 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
@@ -1199,61 +1211,4 @@ class link myClass
 `
    );
  });
-
-  describe('htmlLabels rendering', () => {
-    it('should not render with htmlLabels when disabled via flowchart config', () => {
-      imgSnapshotTest(
-        `flowchart LR
-          A["HTML label <br> with breaks"] --> B["Another label"]
-          C --> D
-        `,
-        { flowchart: { htmlLabels: false } }
-      );
-    });
-
-    it('should not render with htmlLabels when disabled via global config', () => {
-      imgSnapshotTest(
-        `flowchart LR
-          A["HTML label <br> with breaks"] --> B["Another label"]
-          C --> D
-        `,
-        { htmlLabels: false }
-      );
-    });
-
-    it('should render with htmlLabels when enabled', () => {
-      imgSnapshotTest(
-        `flowchart LR
-          A["HTML label <br> with breaks"] --> B["Another label"]
-          C --> D
-        `,
-        { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
-      );
-    });
-
-    it('should not render with htmlLabels when disabled via flowchart config, even when enabled in global config', () => {
-      imgSnapshotTest(
-        `flowchart LR
-          A["HTML label <br> with breaks"] --> B["Another label"]
-          C --> D
-        `,
-        { htmlLabels: true, flowchart: { htmlLabels: false } },
-        undefined,
-        ($svg) => {
-          expect($svg.find('foreignObject').length).to.equal(0);
-        }
-      );
-    });
-
-    it('should create foreignObject elements when htmlLabels enabled', () => {
-      renderGraph(
-        `flowchart TD
-          A["Node with <br> HTML"] -- "edge <br> label" --> B["Another node"]
-          C --> D
-        `,
-        { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
-      );
-      cy.get('svg foreignObject').should('exist');
-    });
-  });
 });
--- a/cypress/integration/rendering/flowchart.spec.js
+++ b/cypress/integration/rendering/flowchart.spec.js
@@ -774,6 +774,21 @@ 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(
      `
@@ -973,4 +988,19 @@ 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
@@ -803,4 +803,64 @@ 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
+    `,
+      {}
+    );
+  });
+  it('should handle seconds-only format with tickInterval (issue #5496)', () => {
+    imgSnapshotTest(
+      `
+     gantt
+     tickInterval 1second
+     dateFormat ss
+     axisFormat %s
+
+     section Network Request
+     RTT : rtt, 0, 20
+    `,
+      {}
+    );
+  });
+  it('should handle dates with year typo like 202 instead of 2024 (issue #5496)', () => {
+    imgSnapshotTest(
+      `
+     gantt
+     title Schedule
+     dateFormat YYYY-MM-DD
+     tickInterval 1week
+     axisFormat %m-%d
+
+     section Vacation
+     London : 2024-12-01, 7d
+     London : 202-12-01, 7d
+    `,
+      {}
+    );
+  });
 });
--- a/cypress/integration/rendering/mindmap.spec.ts
+++ b/cypress/integration/rendering/mindmap.spec.ts
@@ -247,5 +247,31 @@ root
      );
    });
  });
+  describe('Level 2 nodes exceeding 11', () => {
+    it('should render all Level 2 nodes correctly when there are more than 11', () => {
+      imgSnapshotTest(
+        `mindmap
+root
+  Node1
+  Node2
+  Node3
+  Node4
+  Node5
+  Node6
+  Node7
+  Node8
+  Node9
+  Node10
+  Node11
+  Node12
+  Node13
+  Node14
+  Node15`,
+        {},
+        undefined,
+        shouldHaveRoot
+      );
+    });
+  });
  /* The end */
 });
--- a/cypress/integration/rendering/sequencediagram-v2.spec.js
+++ b/cypress/integration/rendering/sequencediagram-v2.spec.js
@@ -655,5 +655,315 @@ describe('Sequence Diagram Special Cases', () => {
        expect(svg).to.not.have.attr('style');
      });
    });
+
+    describe('Central Connection Rendering Tests', () => {
+      it('should render central connection circles on actor vertical lines', () => {
+        imgSnapshotTest(
+          `sequenceDiagram
+        participant Alice
+        participant Bob
+        participant Charlie
+        Alice ()->>() Bob: Central connection
+        Bob ()-->> Charlie: Reverse central connection
+        Charlie ()<<-->>() Alice: Dual central connection`,
+          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+        );
+      });
+
+      it('should render central connections with different arrow types', () => {
+        imgSnapshotTest(
+          `sequenceDiagram
+        participant Alice
+        participant Bob
+        Alice ()->>() Bob: Solid open arrow
+        Alice ()-->>() Bob: Dotted open arrow
+        Alice ()-x() Bob: Solid cross
+        Alice ()--x() Bob: Dotted cross
+        Alice ()->() Bob: Solid arrow`,
+          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+        );
+      });
+
+      it('should render central connections with bidirectional arrows', () => {
+        imgSnapshotTest(
+          `sequenceDiagram
+        participant Alice
+        participant Bob
+        Alice ()<<->>() Bob: Bidirectional solid
+        Alice ()<<-->>() Bob: Bidirectional dotted`,
+          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+        );
+      });
+
+      it('should render central connections with activations', () => {
+        imgSnapshotTest(
+          `sequenceDiagram
+        participant Alice
+        participant Bob
+        participant Charlie
+        Alice ()->>() Bob: Activate Bob
+        activate Bob
+        Bob ()-->> Charlie: Message to Charlie
+        Bob ()->>() Alice: Response to Alice
+        deactivate Bob`,
+          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+        );
+      });
+
+      it('should render central connections mixed with normal messages', () => {
+        imgSnapshotTest(
+          `sequenceDiagram
+        participant Alice
+        participant Bob
+        participant Charlie
+        Alice ->> Bob: Normal message
+        Bob ()->>() Charlie: Central connection
+        Charlie -->> Alice: Normal dotted message
+        Alice ()<<-->>() Bob: Dual central connection
+        Bob -x Charlie: Normal cross message`,
+          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+        );
+      });
+
+      it('should render central connections with notes', () => {
+        imgSnapshotTest(
+          `sequenceDiagram
+        participant Alice
+        participant Bob
+        participant Charlie
+        Alice ()->>() Bob: Central connection
+        Note over Alice,Bob: Central connection note
+        Bob ()-->> Charlie: Reverse central connection
+        Note right of Charlie: Response note
+        Charlie ()<<-->>() Alice: Dual central connection`,
+          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+        );
+      });
+
+      it('should render central connections with loops and alternatives', () => {
+        imgSnapshotTest(
+          `sequenceDiagram
+        participant Alice
+        participant Bob
+        participant Charlie
+        loop Every minute
+            Alice ()->>() Bob: Central heartbeat
+            Bob ()-->> Charlie: Forward heartbeat
+        end
+        alt Success
+            Charlie ()<<-->>() Alice: Success response
+        else Failure
+            Charlie ()-x() Alice: Failure response
+        end`,
+          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+        );
+      });
+
+      it('should render central connections with different participant types', () => {
+        imgSnapshotTest(
+          `sequenceDiagram
+          participant Alice
+          actor Bob
+          participant Charlie@{"type":"boundary"}
+          participant David@{"type":"control"}
+          participant Eve@{"type":"entity"}
+          Alice ()->>() Bob: To actor
+          Bob ()-->> Charlie: To boundary
+          Charlie ()->>() David: To control
+          David ()<<-->>() Eve: To entity
+          Eve ()-x() Alice: Back to participant`,
+          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+        );
+      });
+    });
+
+    describe('Participant Stereotypes with Aliases', () => {
+      it('should render participants with stereotypes and aliases', () => {
+        imgSnapshotTest(
+          `sequenceDiagram
+          participant API@{ "type" : "boundary" } as Public API
+          participant Auth@{ "type" : "control" } as Auth Controller
+          participant DB@{ "type" : "database" } as User Database
+          participant Cache@{ "type" : "entity" } as Cache Layer
+          API ->> Auth: Authenticate request
+          Auth ->> DB: Query user
+          DB -->> Auth: User data
+          Auth ->> Cache: Store session
+          Cache -->> Auth: Confirmed
+          Auth -->> API: Token`,
+          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+        );
+      });
+
+      it('should render actors with stereotypes and aliases', () => {
+        imgSnapshotTest(
+          `sequenceDiagram
+          actor U@{ "type" : "actor" } as End User
+          actor A@{ "type" : "boundary" } as API Gateway
+          actor S@{ "type" : "control" } as Service Layer
+          actor D@{ "type" : "database" } as Data Store
+          U ->> A: Send request
+          A ->> S: Process
+          S ->> D: Persist
+          D -->> S: Success
+          S -->> A: Response
+          A -->> U: Result`,
+          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+        );
+      });
+
+      it('should render mixed participants and actors with stereotypes and aliases', () => {
+        imgSnapshotTest(
+          `sequenceDiagram
+          actor Client@{ "type" : "actor" } AS Mobile Client
+          participant Gateway@{ "type" : "boundary" } as API Gateway
+          participant OrderSvc@{ "type" : "control" } as Order Service
+          participant Queue@{ "type" : "queue" } as Message Queue
+          participant DB@{ "type" : "database" } as Order Database
+          participant Logs@{ "type" : "collections" } as Audit Logs
+          Client ->> Gateway: Place order
+          Gateway ->> OrderSvc: Validate order
+          OrderSvc ->> Queue: Queue for processing  as well
+          OrderSvc ->> DB: Save order
+          OrderSvc ->> Logs: Log transaction
+          Queue -->> OrderSvc: Processing started AS Well
+          DB -->> OrderSvc: Order saved
+          Logs -->> OrderSvc: Logged
+          OrderSvc -->> Gateway: Order confirmed
+          Gateway -->> Client: Confirmation`,
+          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+        );
+      });
+
+      it('should render stereotypes with aliases in boxes', () => {
+        imgSnapshotTest(
+          `sequenceDiagram
+          box rgb(200,220,255) Frontend Layer
+            actor User@{ "type" : "actor" } as End User
+            participant UI@{ "type" : "boundary" } as User Interface
+          end
+          box rgb(255,220,200) Backend Layer
+            participant API@{ "type" : "boundary" } as REST API
+            participant Svc@{ "type" : "control" } as Business Logic
+          end
+          box rgb(220,255,200) Data Layer
+            participant DB@{ "type" : "database" } as Primary DB
+            participant Cache@{ "type" : "entity" } as Cache Store
+          end
+          User ->> UI: Click button
+          UI ->> API: HTTP request
+          API ->> Svc: Process
+          Svc ->> Cache: Check cache
+          Cache -->> Svc: Cache miss
+          Svc ->> DB: Query data
+          DB -->> Svc: Data
+          Svc ->> Cache: Update cache
+          Svc -->> API: Response
+          API -->> UI: Data
+          UI -->> User: Display`,
+          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+        );
+      });
+
+      it('should render stereotypes with aliases and complex interactions', () => {
+        imgSnapshotTest(
+          `sequenceDiagram
+          participant Web@{ "type" : "boundary" } as Web Portal
+          participant Auth@{ "type" : "control" } as Auth Service
+          participant UserDB@{ "type" : "database" } as User DB
+          participant Queue@{ "type" : "queue" } as Event Queue
+          participant Audit@{ "type" : "collections" } as Audit Trail
+          Web ->> Auth: Login request
+          activate Auth
+          Auth ->> UserDB: Verify credentials
+          activate UserDB
+          UserDB -->> Auth: User found
+          deactivate UserDB
+          alt Valid credentials
+            Auth ->> Queue: Publish login event
+            Auth ->> Audit: Log success
+            par Parallel processing
+              Queue -->> Auth: Event queued
+              and
+              Audit -->> Auth: Logged
+            end
+            Auth -->> Web: Success token
+          else Invalid credentials
+            Auth ->> Audit: Log failure
+            Audit -->> Auth: Logged
+            Auth --x Web: Access denied
+          end
+          deactivate Auth
+          Note over Web,Audit: All interactions logged`,
+          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+        );
+      });
+    });
+
+    describe('Participant Inline Alias in Config', () => {
+      it('should render participants with inline alias in config object', () => {
+        imgSnapshotTest(
+          `sequenceDiagram
+          participant API@{ "type" : "boundary", "alias": "Public API" }
+          participant Auth@{ "type" : "control", "alias": "Auth Service" }
+          participant DB@{ "type" : "database", "alias": "User DB" }
+          API ->> Auth: Login request
+          Auth ->> DB: Query user
+          DB -->> Auth: User data
+          Auth -->> API: Token`,
+          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+        );
+      });
+
+      it('should render actors with inline alias in config object', () => {
+        imgSnapshotTest(
+          `sequenceDiagram
+          actor U@{ "type" : "actor", "alias": "End User" }
+          actor G@{ "type" : "boundary", "alias": "Gateway" }
+          actor S@{ "type" : "control", "alias": "Service" }
+          U ->> G: Request
+          G ->> S: Process
+          S -->> G: Response
+          G -->> U: Result`,
+          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+        );
+      });
+
+      it('should handle mixed inline and external alias syntax', () => {
+        imgSnapshotTest(
+          `sequenceDiagram
+          participant A@{ "type" : "boundary", "alias": "Service A" }
+          participant B@{ "type" : "control" } as Service B
+          participant C@{ "type" : "database" }
+          A ->> B: Request
+          B ->> C: Query
+          C -->> B: Data
+          B -->> A: Response`,
+          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+        );
+      });
+
+      it('should prioritize external alias over inline alias', () => {
+        imgSnapshotTest(
+          `sequenceDiagram
+          participant API@{ "type" : "boundary", "alias": "Internal Name" } as External Name
+          participant DB@{ "type" : "database", "alias": "Internal DB" } AS External DB
+          API ->> DB: Query
+          DB -->> API: Result`,
+          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+        );
+      });
+
+      it('should render inline alias with only alias field (no type)', () => {
+        imgSnapshotTest(
+          `sequenceDiagram
+          participant API@{ "alias": "Public API" }
+          participant Auth@{ "alias": "Auth Service" }
+          API ->> Auth: Request
+          Auth -->> API: Response`,
+          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+        );
+      });
+    });
  });
 });
--- a/cypress/integration/rendering/sequencediagram.spec.js
+++ b/cypress/integration/rendering/sequencediagram.spec.js
@@ -1053,4 +1053,167 @@ 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/treemap.spec.ts
+++ b/cypress/integration/rendering/treemap.spec.ts
@@ -327,8 +327,97 @@ classDef sales fill:#c3a66b,stroke:#333;
      {}
    );
  });
+
+  it('12: should apply classDef fill color to leaf nodes', () => {
+    imgSnapshotTest(
+      `treemap-beta
+"Root"
+    "Item A": 30:::redClass
+    "Item B": 20
+    "Item C": 25:::blueClass
+
+classDef redClass fill:#ff0000;
+classDef blueClass fill:#0000ff;
+      `,
+      {}
+    );
+  });
+
+  it('13: should apply classDef stroke styles to sections', () => {
+    imgSnapshotTest(
+      `treemap-beta
+      %% This is a comment
+      "Category A":::thickBorder
+          "Item A1": 10
+          "Item A2": 20
+      %% Another comment
+      "Category B":::dashedBorder
+          "Item B1": 15
+          "Item B2": 25
+
+classDef thickBorder stroke:red,stroke-width:8px;
+classDef dashedBorder stroke:black,stroke-dasharray:5,stroke-width:8px;
+      `,
+      {}
+    );
+  });
+
+  it('14: should apply classDef color to text labels', () => {
+    imgSnapshotTest(
+      `treemap-beta
+"Products"
+    "Electronics":::whiteText
+        "Phones": 40
+        "Laptops": 30
+    "Furniture":::darkText
+        "Chairs": 25
+        "Tables": 20
+
+classDef whiteText fill:#2c3e50,color:#ffffff;
+classDef darkText fill:#ecf0f1,color:#000000;
+      `,
+      {}
+    );
+  });
+
+  it('15: should apply multiple classDef properties simultaneously', () => {
+    imgSnapshotTest(
+      `treemap-beta
+"Budget"
+    "Critical":::critical
+        "Server Costs": 50000
+        "Salaries": 80000
+    "Normal":::normal
+        "Office Supplies": 5000
+        "Marketing": 15000
+classDef critical fill:#e74c3c,color:#fff,stroke:#c0392b,stroke-width:3px;
+classDef normal fill:#3498db,color:#fff,stroke:#2980b9,stroke-width:1px;
+      `,
+      {}
+    );
+  });
+
+  it('16: should handle classDef on nested sections and leaves', () => {
+    imgSnapshotTest(
+      `treemap-beta
+"Company"
+    "Engineering":::engSection
+        "Frontend": 30:::highlight
+        "Backend": 40
+        "DevOps": 20:::highlight
+    "Sales"
+        "Direct": 35
+        "Channel": 25:::highlight
+
+classDef engSection fill:#9b59b6,stroke:#8e44ad,stroke-width:2px;
+classDef highlight fill:#f39c12,color:#000,stroke:#e67e22,stroke-width:2px;
+      `,
+      {}
+    );
+  });
+
  /*
-  it.skip('12: should render a treemap with title', () => {
+  it.skip('17: should render a treemap with title', () => {
    imgSnapshotTest(
      `
    treemap-beta
--- a/cypress/platform/ashish2.html
+++ b/cypress/platform/ashish2.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/font-awesome.min.css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
--- a/cypress/platform/class.html
+++ b/cypress/platform/class.html
@@ -3,7 +3,7 @@
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/current.html
+++ b/cypress/platform/current.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/current2.html
+++ b/cypress/platform/current2.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/flowchart-refactor.html
+++ b/cypress/platform/flowchart-refactor.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/font-awesome.min.css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
--- a/cypress/platform/flowchart-state.html
+++ b/cypress/platform/flowchart-state.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/font-awesome.min.css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
--- a/cypress/platform/ghsa3.html
+++ b/cypress/platform/ghsa3.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/git-graph.html
+++ b/cypress/platform/git-graph.html
@@ -3,7 +3,7 @@
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/gitgraph.html
+++ b/cypress/platform/gitgraph.html
@@ -3,7 +3,7 @@
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/gitgraph2.html
+++ b/cypress/platform/gitgraph2.html
@@ -3,7 +3,7 @@
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/knsv-4442.html
+++ b/cypress/platform/knsv-4442.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/font-awesome.min.css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
--- a/cypress/platform/knsv.html
+++ b/cypress/platform/knsv.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/font-awesome.min.css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -4,14 +4,14 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/font-awesome.min.css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
      rel="stylesheet"
    />
    <link
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"
      rel="stylesheet"
    />
    <link
@@ -110,6 +110,48 @@
      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
--- a/cypress/platform/per.html
+++ b/cypress/platform/per.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/saurabh.html
+++ b/cypress/platform/saurabh.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/font-awesome.min.css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
--- a/cypress/platform/showcase_base.html
+++ b/cypress/platform/showcase_base.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/showcase_base_dark.html
+++ b/cypress/platform/showcase_base_dark.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/showcase_dark.html
+++ b/cypress/platform/showcase_dark.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/showcase_default.html
+++ b/cypress/platform/showcase_default.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/showcase_forest.html
+++ b/cypress/platform/showcase_forest.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/showcase_neutral.html
+++ b/cypress/platform/showcase_neutral.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/state-refactor.html
+++ b/cypress/platform/state-refactor.html
@@ -3,7 +3,7 @@
 <head>
  <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/font-awesome.min.css" />
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
--- a/cypress/platform/xss10.html
+++ b/cypress/platform/xss10.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/xss11.html
+++ b/cypress/platform/xss11.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/xss12.html
+++ b/cypress/platform/xss12.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/xss13.html
+++ b/cypress/platform/xss13.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/xss14.html
+++ b/cypress/platform/xss14.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/xss15.html
+++ b/cypress/platform/xss15.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/xss16.html
+++ b/cypress/platform/xss16.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/xss17.html
+++ b/cypress/platform/xss17.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/xss18.html
+++ b/cypress/platform/xss18.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/xss19.html
+++ b/cypress/platform/xss19.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/xss20.html
+++ b/cypress/platform/xss20.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/xss21.html
+++ b/cypress/platform/xss21.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/xss23-css.html
+++ b/cypress/platform/xss23-css.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/xss24.html
+++ b/cypress/platform/xss24.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/xss25.html
+++ b/cypress/platform/xss25.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/xss4.html
+++ b/cypress/platform/xss4.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/xss5.html
+++ b/cypress/platform/xss5.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/Show More
+++ b/Show More
@@ -1 +1 @@
 .14.0
 .11.1