Revert "Fix Requirement overflow"

2025-10-28 09:24:10 +01:00 · 2024-08-20 14:27:54 +05:30
100 changed files with 2664 additions and 2119 deletions
--- a/.changeset/README.md
+++ b/.changeset/README.md
@@ -1,8 +0,0 @@
-# Changesets
-
-Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
-with multi-package repos, or single-package repos to help you version and publish your code. You can
-find the full documentation for it [in our repository](https://github.com/changesets/changesets)
-
-We have a quick list of common questions to get you started engaging with this project in
-[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)
--- a/.changeset/config.json
+++ b/.changeset/config.json
@@ -1,12 +0,0 @@
-{
-  "$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json",
-  "changelog": ["@changesets/changelog-github", { "repo": "mermaid-js/mermaid" }],
-  "commit": false,
-  "fixed": [],
-  "linked": [],
-  "access": "public",
-  "baseBranch": "master",
-  "updateInternalDependencies": "patch",
-  "bumpVersionsWithWorkspaceProtocolOnly": true,
-  "ignore": ["@mermaid-js/docs", "@mermaid-js/webpack-test", "@mermaid-js/mermaid-example-diagram"]
-}
--- a/.cspell/code-terms.txt
+++ b/.cspell/code-terms.txt
@@ -120,8 +120,6 @@ SUBROUTINEEND
 SUBROUTINESTART
 Subschemas
 substr
-SVGG
-SVGSVG
 TAGEND
 TAGSTART
 techn
--- a/.cspell/libraries.txt
+++ b/.cspell/libraries.txt
@@ -58,7 +58,6 @@ rehype
 roughjs
 rscratch
 shiki
-Slidev
 sparkline
 sphinxcontrib
 ssim
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -15,4 +15,4 @@ Make sure you
 - [ ] :book: have read the [contribution guidelines](https://mermaid.js.org/community/contributing.html)
 - [ ] :computer: have added necessary unit/e2e tests.
 - [ ] :notebook: have added documentation. Make sure [`MERMAID_RELEASE_VERSION`](https://mermaid.js.org/community/contributing.html#update-documentation) is used for all new features.
- [ ] :butterfly: If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running `pnpm changeset` and following the prompts. Changesets that add features should be `minor` and those that fix bugs should be `patch`. Please prefix changeset messages with `feat:`, `fix:`, or `chore:`.
+- [ ] :bookmark: targeted `develop` branch
--- a/.github/release-drafter.yml
+++ b/.github/release-drafter.yml
@@ -0,0 +1,36 @@
+name-template: '$NEXT_PATCH_VERSION'
+tag-template: '$NEXT_PATCH_VERSION'
+categories:
+  - title: '🚨 **Breaking Changes**'
+    labels:
+      - 'Breaking Change'
+  - title: '🚀 Features'
+    labels:
+      - 'Type: Enhancement'
+      - 'feature' # deprecated, new PRs shouldn't have this
+  - title: '🐛 Bug Fixes'
+    labels:
+      - 'Type: Bug / Error'
+      - 'fix' # deprecated, new PRs shouldn't have this
+  - title: '🧰 Maintenance'
+    labels:
+      - 'Type: Other'
+      - 'chore' # deprecated, new PRs shouldn't have this
+  - title: '⚡️ Performance'
+    labels:
+      - 'Type: Performance'
+  - title: '📚 Documentation'
+    labels:
+      - 'Area: Documentation'
+change-template: '- $TITLE (#$NUMBER) @$AUTHOR'
+sort-by: title
+sort-direction: ascending
+exclude-labels:
+  - 'Skip changelog'
+no-changes-template: 'This release contains minor changes and bugfixes.'
+template: |
+  # Release Notes
+
+  $CHANGES
+
+  🎉 **Thanks to all contributors helping with this release!** 🎉
--- a/.github/workflows/autofix.yml
+++ b/.github/workflows/autofix.yml
@@ -2,8 +2,6 @@ name: autofix.ci # needed to securely identify the workflow

 on:
  pull_request:
-    branches-ignore:
-      - 'renovate/**'
 permissions:
  contents: read

--- a/.github/workflows/release-draft.yml
+++ b/.github/workflows/release-draft.yml
@@ -0,0 +1,23 @@
+name: Draft Release
+
+on:
+  push:
+    branches:
+      - master
+
+permissions:
+  contents: read
+
+jobs:
+  draft-release:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write # write permission is required to create a GitHub release
+      pull-requests: read # required to read PR titles/labels
+    steps:
+      - name: Draft Release
+        uses: release-drafter/release-drafter@v6
+        with:
+          disable-autolabeler: true
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -1,37 +0,0 @@
-name: Release
-
-on:
-  push:
-    branches:
-      - master
-
-concurrency: ${{ github.workflow }}-${{ github.ref }}
-
-jobs:
-  release:
-    name: Release
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Repo
-        uses: actions/checkout@v3
-
-      - uses: pnpm/action-setup@v4
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          cache: pnpm
-          node-version-file: '.node-version'
-
-      - name: Install Packages
-        run: pnpm install --frozen-lockfile
-
-      - name: Create Release Pull Request or Publish to npm
-        id: changesets
-        uses: changesets/action@v1
-        with:
-          version: pnpm changeset:version
-          publish: pnpm changeset:publish
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
--- a/cypress/integration/rendering/flowchart-handDrawn.spec.js
+++ b/cypress/integration/rendering/flowchart-handDrawn.spec.js
@@ -12,7 +12,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
-        handDrawnSeed: 1,
+        handDrawnSeed: 0,
        flowchart: { htmlLabels: false },
        fontFamily: 'courier',
      }
@@ -30,7 +30,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
-        handDrawnSeed: 1,
+        handDrawnSeed: 0,
        flowchart: { htmlLabels: true },
        fontFamily: 'courier',
      }
@@ -47,7 +47,7 @@ describe('Flowchart HandDrawn', () => {
      C -->|Two| E[iPhone]
      C -->|Three| F[Car]
      `,
-      { look: 'handDrawn', handDrawnSeed: 1, fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' }
    );
  });

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -778,7 +778,7 @@ describe('Flowchart HandDrawn', () => {
      `graph TD
      A[Christmas]
      `,
-      { look: 'handDrawn', handDrawnSeed: 1 }
+      { look: 'handDrawn', handDrawnSeed: 0 }
    );
  });

@@ -796,7 +796,7 @@ describe('Flowchart HandDrawn', () => {
      C -----> E4
      C ======> E5
      `,
-      { look: 'handDrawn', handDrawnSeed: 1 }
+      { look: 'handDrawn', handDrawnSeed: 0 }
    );
  });
  it('FDH36: should render escaped without html labels', () => {
@@ -804,7 +804,7 @@ describe('Flowchart HandDrawn', () => {
      `graph TD
        a["<strong>Haiya</strong>"]-->b
      `,
-      { look: 'handDrawn', handDrawnSeed: 1, htmlLabels: false, flowchart: { htmlLabels: false } }
+      { look: 'handDrawn', handDrawnSeed: 0, htmlLabels: false, flowchart: { htmlLabels: false } }
    );
  });
  it('FDH37: should render non-escaped with html labels', () => {
@@ -814,7 +814,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
-        handDrawnSeed: 1,
+        handDrawnSeed: 0,
        htmlLabels: true,
        flowchart: { htmlLabels: true },
        securityLevel: 'loose',
@@ -830,7 +830,7 @@ describe('Flowchart HandDrawn', () => {
      C -->|Two| E[iPhone]
      C -->|Three| F[fa:fa-car Car]
      `,
-      { look: 'handDrawn', handDrawnSeed: 1, flowchart: { useMaxWidth: true } }
+      { look: 'handDrawn', handDrawnSeed: 0, flowchart: { useMaxWidth: true } }
    );
    cy.get('svg').should((svg) => {
      expect(svg).to.have.attr('width', '100%');
@@ -853,7 +853,7 @@ describe('Flowchart HandDrawn', () => {
      C -->|Two| E[iPhone]
      C -->|Three| F[fa:fa-car Car]
      `,
-      { look: 'handDrawn', handDrawnSeed: 1, flowchart: { useMaxWidth: false } }
+      { look: 'handDrawn', handDrawnSeed: 0, flowchart: { useMaxWidth: false } }
    );
    cy.get('svg').should((svg) => {
      // const height = parseFloat(svg.attr('height'));
@@ -874,7 +874,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
-        handDrawnSeed: 1,
+        handDrawnSeed: 0,
        htmlLabels: true,
        flowchart: { htmlLabels: true },
        securityLevel: 'loose',
@@ -904,7 +904,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
-        handDrawnSeed: 1,
+        handDrawnSeed: 0,
        htmlLabels: true,
        flowchart: { htmlLabels: true },
        securityLevel: 'loose',
@@ -919,7 +919,7 @@ graph TD
      `,
      {
        look: 'handDrawn',
-        handDrawnSeed: 1,
+        handDrawnSeed: 0,
        htmlLabels: true,
        flowchart: { htmlLabels: true },
        securityLevel: 'loose',
@@ -937,7 +937,7 @@ graph TD
      `,
      {
        look: 'handDrawn',
-        handDrawnSeed: 1,
+        handDrawnSeed: 0,
        htmlLabels: true,
        flowchart: { htmlLabels: true },
        securityLevel: 'loose',
@@ -977,7 +977,7 @@ graph TD
      `,
      {
        look: 'handDrawn',
-        handDrawnSeed: 1,
+        handDrawnSeed: 0,
        htmlLabels: true,
        flowchart: { htmlLabels: true },
        securityLevel: 'loose',
@@ -999,7 +999,7 @@ graph TD
      `,
      {
        look: 'handDrawn',
-        handDrawnSeed: 1,
+        handDrawnSeed: 0,
        htmlLabels: true,
        flowchart: { htmlLabels: true },
        securityLevel: 'loose',
@@ -1016,7 +1016,7 @@ graph TD
      `,
      {
        look: 'handDrawn',
-        handDrawnSeed: 1,
+        handDrawnSeed: 0,
        htmlLabels: true,
        flowchart: { htmlLabels: true },
        securityLevel: 'loose',
@@ -1027,12 +1027,12 @@ graph TD
    imgSnapshotTest(
      `
      graph TD
-        classDef default fill:#a34,stroke:#000,stroke-width:4px,color:#fff
+        classDef default fill:#a34,stroke:#000,stroke-width:4px,color:#fff 
        hello --> default
      `,
      {
        look: 'handDrawn',
-        handDrawnSeed: 1,
+        handDrawnSeed: 0,
        htmlLabels: true,
        flowchart: { htmlLabels: true },
        securityLevel: 'loose',
@@ -1051,7 +1051,7 @@ graph TD
    `,
      {
        look: 'handDrawn',
-        handDrawnSeed: 1,
+        handDrawnSeed: 0,
        flowchart: { htmlLabels: true },
        securityLevel: 'loose',
      }
--- a/cypress/platform/flowchart-refactor.html
+++ b/cypress/platform/flowchart-refactor.html
@@ -822,7 +822,7 @@ flowchart LR

    <script type="module">
      import mermaid from './mermaid.esm.mjs';
-      import layouts from './mermaid-layout-elk.esm.mjs';
+      import { layouts } from './mermaid-layout-elk.esm.mjs';
      mermaid.registerLayoutLoaders(layouts);
      mermaid.parseError = function (err, hash) {};

--- a/cypress/platform/flowchart-sate.html
+++ b/cypress/platform/flowchart-sate.html
@@ -147,7 +147,7 @@ flowchart LR

    <script type="module">
      import mermaid from './mermaid.esm.mjs';
-      import layouts from './mermaid-layout-elk.esm.mjs';
+      import { layouts } from './mermaid-layout-elk.esm.mjs';
      mermaid.registerLayoutLoaders(layouts);
      mermaid.parseError = function (err, hash) {};

--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -84,25 +84,16 @@
    <div class="flex">
      <pre id="diagram" class="mermaid">
 ---
-  title: hello2
-  config:
-    look: handDrawn
-    layout: elk
-    elk:
-        nodePlacementStrategy: BRANDES_KOEPF
+config:
+  look: handDrawn
+  flowchart:
+    htmlLabels: false
 ---
-flowchart LR
-  A[Start] --Some text--> B(Continue)
-  B --> C{Evaluate}
-  C -- One --> D[Option 1]
-  C -- Two --> E[Option 2]
-  C -- Three --> F[fa:fa-car Option 3]
-
-
-
+flowchart
+      A[I am a long text, where do I go??? handdrawn - false]
 </pre
      >
-      <pre id="diagram" class="mermaid2">
+      <pre id="diagram" class="mermaid">
 ---
 config:
  look: handdrawn
@@ -115,7 +106,7 @@ flowchart
      >
    </div>
    <div class="flex">
-      <pre id="diagram" class="mermaid2">
+      <pre id="diagram" class="mermaid">
 ---
 config:
  flowchart:
@@ -125,7 +116,7 @@ flowchart
      A[I am a long text, where do I go??? classic - false]
 </pre
      >
-      <pre id="diagram" class="mermaid2">
+      <pre id="diagram" class="mermaid">
 ---
 config:
  flowchart:
@@ -168,8 +159,8 @@ flowchart LR

    <script type="module">
      import mermaid from './mermaid.esm.mjs';
-      import layouts from './mermaid-layout-elk.esm.mjs';
-      mermaid.registerLayoutLoaders(layouts);
+      // import { layouts } from './mermaid-layout-elk.esm.mjs';
+      // mermaid.registerLayoutLoaders(layouts);
      mermaid.parseError = function (err, hash) {
        console.error('Mermaid error: ', err);
      };
--- a/cypress/platform/state-refactor.html
+++ b/cypress/platform/state-refactor.html
@@ -1222,7 +1222,7 @@ direction LR

  <script type="module">
    import mermaid from './mermaid.esm.mjs';
-    import layouts from './mermaid-layout-elk.esm.mjs';
+    import { layouts } from './mermaid-layout-elk.esm.mjs';
    mermaid.registerLayoutLoaders(layouts);
    mermaid.parseError = function (err, hash) {

@@ -1268,4 +1268,4 @@ direction LR
  </script>
 </body>

-</html>
+</html>
--- a/cypress/platform/viewer.js
+++ b/cypress/platform/viewer.js
@@ -1,7 +1,7 @@
-import externalExample from './mermaid-example-diagram.esm.mjs';
-import layouts from './mermaid-layout-elk.esm.mjs';
-import zenUml from './mermaid-zenuml.esm.mjs';
 import mermaid from './mermaid.esm.mjs';
+import { layouts } from './mermaid-layout-elk.esm.mjs';
+import externalExample from './mermaid-example-diagram.esm.mjs';
+import zenUml from './mermaid-zenuml.esm.mjs';

 function b64ToUtf8(str) {
  return decodeURIComponent(escape(window.atob(str)));
--- a/docs/config/setup/interfaces/mermaid.LayoutLoaderDefinition.md
+++ b/docs/config/setup/interfaces/mermaid.LayoutLoaderDefinition.md
@@ -16,7 +16,7 @@

 #### Defined in

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

 ---

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

 #### Defined in

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

 ---

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

 #### 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)
+[packages/mermaid/src/rendering-util/render.ts:7](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L7)
--- a/docs/config/setup/interfaces/mermaid.Mermaid.md
+++ b/docs/config/setup/interfaces/mermaid.Mermaid.md
@@ -28,7 +28,7 @@ page.

 #### Defined in

-[packages/mermaid/src/mermaid.ts:435](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L435)
+[packages/mermaid/src/mermaid.ts:432](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L432)

 ---

@@ -59,7 +59,7 @@ A graph definition key

 #### Defined in

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

 ---

@@ -89,7 +89,7 @@ Use [initialize](mermaid.Mermaid.md#initialize) and [run](mermaid.Mermaid.md#run

 #### Defined in

-[packages/mermaid/src/mermaid.ts:430](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L430)
+[packages/mermaid/src/mermaid.ts:427](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L427)

 ---

@@ -116,13 +116,56 @@ This function should be called before the run function.

 #### Defined in

-[packages/mermaid/src/mermaid.ts:434](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L434)
+[packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431)
+
+---
+
+### internalHelpers
+
+• **internalHelpers**: `Object`
+
+Internal helpers for mermaid
+
+**`Deprecated`**
+
+- This should not be used by external packages, as the definitions will change without notice.
+
+#### Type declaration
+
+| Name                         | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| :--------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `common`                     | { `evaluate`: (`val?`: `string` \| `boolean`) => `boolean` ; `getMax`: (...`values`: `number`\[]) => `number` ; `getMin`: (...`values`: `number`\[]) => `number` ; `getRows`: (`s?`: `string`) => `string`\[] ; `getUrl`: (`useAbsolute`: `boolean`) => `string` ; `hasBreaks`: (`text`: `string`) => `boolean` ; `lineBreakRegex`: `RegExp` ; `removeScript`: (`txt`: `string`) => `string` ; `sanitizeText`: (`text`: `string`, `config`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `string` ; `sanitizeTextOrArray`: (`a`: `string` \| `string`\[] \| `string`\[]\[], `config`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `string` \| `string`\[] ; `splitBreaks`: (`text`: `string`) => `string`\[] } |
+| `common.evaluate`            | (`val?`: `string` \| `boolean`) => `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| `common.getMax`              | (...`values`: `number`\[]) => `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| `common.getMin`              | (...`values`: `number`\[]) => `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| `common.getRows`             | (`s?`: `string`) => `string`\[]                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| `common.getUrl`              | (`useAbsolute`: `boolean`) => `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| `common.hasBreaks`           | (`text`: `string`) => `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| `common.lineBreakRegex`      | `RegExp`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| `common.removeScript`        | (`txt`: `string`) => `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| `common.sanitizeText`        | (`text`: `string`, `config`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| `common.sanitizeTextOrArray` | (`a`: `string` \| `string`\[] \| `string`\[]\[], `config`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `string` \| `string`\[]                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| `common.splitBreaks`         | (`text`: `string`) => `string`\[]                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| `getConfig`                  | () => [`MermaidConfig`](mermaid.MermaidConfig.md)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| `insertCluster`              | (`elem`: `any`, `node`: `any`) => `Promise`<`any`>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| `insertEdge`                 | (`elem`: `any`, `edge`: `any`, `clusterDb`: `any`, `diagramType`: `any`, `startNode`: `any`, `endNode`: `any`, `id`: `any`) => { `originalPath`: `any` ; `updatedPath`: `any` }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| `insertEdgeLabel`            | (`elem`: `any`, `edge`: `any`) => `Promise`<`any`>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| `insertMarkers`              | (`elem`: `any`, `markerArray`: `any`, `type`: `any`, `id`: `any`) => `void`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| `insertNode`                 | (`elem`: `any`, `node`: `any`, `dir`: `any`) => `Promise`<`any`>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| `interpolateToCurve`         | (`interpolate`: `undefined` \| `string`, `defaultCurve`: `CurveFactory`) => `CurveFactory`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| `labelHelper`                | (`parent`: `any`, `node`: `any`, `_classes`: `any`) => `Promise`<{ `bbox`: `any` ; `halfPadding`: `number` ; `label`: `any` = labelEl; `shapeSvg`: `any` }>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| `log`                        | `Record`<`LogLevel`, (...`data`: `any`\[]) => `void`(`message?`: `any`, ...`optionalParams`: `any`\[]) => `void`>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| `positionEdgeLabel`          | (`edge`: `any`, `paths`: `any`) => `void`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+
+#### Defined in
+
+[packages/mermaid/src/mermaid.ts:439](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L439)

 ---

 ### mermaidAPI

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

 **`Deprecated`**

@@ -130,7 +173,7 @@ Use [parse](mermaid.Mermaid.md#parse) and [render](mermaid.Mermaid.md#render) in

 #### Defined in

-[packages/mermaid/src/mermaid.ts:424](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L424)
+[packages/mermaid/src/mermaid.ts:421](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L421)

 ---

@@ -180,7 +223,7 @@ Error if the diagram is invalid and parseOptions.suppressErrors is false or not

 #### Defined in

-[packages/mermaid/src/mermaid.ts:425](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L425)
+[packages/mermaid/src/mermaid.ts:422](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L422)

 ---

@@ -190,7 +233,7 @@ Error if the diagram is invalid and parseOptions.suppressErrors is false or not

 #### Defined in

-[packages/mermaid/src/mermaid.ts:419](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L419)
+[packages/mermaid/src/mermaid.ts:416](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L416)

 ---

@@ -218,7 +261,7 @@ Used to register external diagram types.

 #### Defined in

-[packages/mermaid/src/mermaid.ts:433](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L433)
+[packages/mermaid/src/mermaid.ts:430](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L430)

 ---

@@ -242,7 +285,7 @@ Used to register external diagram types.

 #### Defined in

-[packages/mermaid/src/mermaid.ts:432](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L432)
+[packages/mermaid/src/mermaid.ts:429](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L429)

 ---

@@ -268,7 +311,7 @@ Used to register external diagram types.

 #### Defined in

-[packages/mermaid/src/mermaid.ts:426](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L426)
+[packages/mermaid/src/mermaid.ts:423](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L423)

 ---

@@ -316,7 +359,7 @@ Renders the mermaid diagrams

 #### Defined in

-[packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431)
+[packages/mermaid/src/mermaid.ts:428](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L428)

 ---

@@ -351,7 +394,7 @@ to it (eg. dart interop wrapper). (Initially there is no parseError member of me

 #### Defined in

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

 ---

@@ -361,4 +404,4 @@ to it (eg. dart interop wrapper). (Initially there is no parseError member of me

 #### Defined in

-[packages/mermaid/src/mermaid.ts:418](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L418)
+[packages/mermaid/src/mermaid.ts:415](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L415)
--- a/docs/config/setup/interfaces/mermaid.RenderOptions.md
+++ b/docs/config/setup/interfaces/mermaid.RenderOptions.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/interfaces/mermaid.RenderOptions.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.RenderOptions.md).
-
-# Interface: RenderOptions
-
-[mermaid](../modules/mermaid.md).RenderOptions
-
-## Properties
-
-### algorithm
-
-• `Optional` **algorithm**: `string`
-
-#### 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/interfaces/mermaid.RunOptions.md
+++ b/docs/config/setup/interfaces/mermaid.RunOptions.md
@@ -18,7 +18,7 @@ The nodes to render. If this is set, `querySelector` will be ignored.

 #### Defined in

-[packages/mermaid/src/mermaid.ts:48](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L48)
+[packages/mermaid/src/mermaid.ts:45](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L45)

 ---

@@ -44,7 +44,7 @@ A callback to call after each diagram is rendered.

 #### Defined in

-[packages/mermaid/src/mermaid.ts:52](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L52)
+[packages/mermaid/src/mermaid.ts:49](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L49)

 ---

@@ -56,7 +56,7 @@ The query selector to use when finding elements to render. Default: `".mermaid"`

 #### Defined in

-[packages/mermaid/src/mermaid.ts:44](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L44)
+[packages/mermaid/src/mermaid.ts:41](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L41)

 ---

@@ -68,4 +68,4 @@ If `true`, errors will be logged to the console, but not thrown. Default: `false

 #### Defined in

-[packages/mermaid/src/mermaid.ts:56](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L56)
+[packages/mermaid/src/mermaid.ts:53](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L53)
--- a/docs/config/setup/modules/defaultConfig.md
+++ b/docs/config/setup/modules/defaultConfig.md
@@ -14,7 +14,7 @@

 #### Defined in

-[packages/mermaid/src/defaultConfig.ts:266](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L266)
+[packages/mermaid/src/defaultConfig.ts:279](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L279)

 ---

--- a/docs/config/setup/modules/mermaid.md
+++ b/docs/config/setup/modules/mermaid.md
@@ -20,22 +20,11 @@
 - [MermaidConfig](../interfaces/mermaid.MermaidConfig.md)
 - [ParseOptions](../interfaces/mermaid.ParseOptions.md)
 - [ParseResult](../interfaces/mermaid.ParseResult.md)
- [RenderOptions](../interfaces/mermaid.RenderOptions.md)
 - [RenderResult](../interfaces/mermaid.RenderResult.md)
 - [RunOptions](../interfaces/mermaid.RunOptions.md)

 ## Type Aliases

-### 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)
-
---
-
 ### ParseErrorFunction

 Ƭ **ParseErrorFunction**: (`err`: `string` | [`DetailedError`](../interfaces/mermaid.DetailedError.md) | `unknown`, `hash?`: `any`) => `void`
@@ -59,26 +48,6 @@

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

---
-
-### SVG
-
-Ƭ **SVG**: `d3.Selection`<`SVGSVGElement`, `unknown`, `Element` | `null`, `unknown`>
-
-#### Defined in
-
-[packages/mermaid/src/diagram-api/types.ts:130](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L130)
-
---
-
-### SVGGroup
-
-Ƭ **SVGGroup**: `d3.Selection`<`SVGGElement`, `unknown`, `Element` | `null`, `unknown`>
-
-#### Defined in
-
-[packages/mermaid/src/diagram-api/types.ts:132](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L132)
-
 ## Variables

 ### default
@@ -87,4 +56,4 @@

 #### Defined in

-[packages/mermaid/src/mermaid.ts:440](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L440)
+[packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L442)
--- a/docs/ecosystem/integrations-community.md
+++ b/docs/ecosystem/integrations-community.md
@@ -59,7 +59,6 @@ To add an integration to this list, see the [Integrations - create page](./integ
 - [MonsterWriter](https://www.monsterwriter.com/) ✅
 - [Joplin](https://joplinapp.org) ✅
 - [LiveBook](https://livebook.dev) ✅
- [Slidev](https://sli.dev) ✅
 - [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) ✅
 - [Mermaid Flow Visual Editor](https://www.mermaidflow.app) ✅
 - [Mermerd](https://github.com/KarnerTh/mermerd)
@@ -135,7 +134,7 @@ Communication tools and platforms
 ### Wikis

 - [DokuWiki](https://dokuwiki.org)
-  - [ComboStrap](https://combostrap.com/utility/create-diagram-with-mermaid-vh3ab9yj)
+  - [ComboStrap](https://combostrap.com/mermaid)
  - [Mermaid Plugin](https://www.dokuwiki.org/plugin:mermaid)
 - [Foswiki](https://foswiki.org)
  - [Mermaid Plugin](https://foswiki.org/Extensions/MermaidPlugin)
--- a/docs/ecosystem/mermaid-chart.md
+++ b/docs/ecosystem/mermaid-chart.md
@@ -12,7 +12,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun

 <br />

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

 ## About

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

 # Blog

-## [Mermaid AI Is Here to Change the Game For Diagram Creation](https://www.mermaidchart.com/blog/posts/mermaid-ai-is-here-to-change-the-game-for-diagram-creation/)
-
-22 July 2024 · 5 mins
-
-The Mermaid AI chat interface
-
-## [How to Make a Sequence Diagram with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-sequence-diagram-in-mermaid-chart-step-by-step-guide/)
-
-8 July 2024 · 6 mins
-
-Sequence diagrams are important for communicating complex systems in a clear and concise manner.
-
-## [How to Use the New “Comments” Feature in Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-use-the-new-comments-feature-in-mermaid-chart/)
-
-2 July 2024 · 3 mins
-
-How to Use the New Comments Feature in Mermaid Chart
-
-## [How to Use the official Mermaid Chart for Confluence app](https://www.mermaidchart.com/blog/posts/how-to-use-the-official-mermaid-chart-for-confluence-app/)
-
-21 May 2024 · 4 mins
-
-It doesn’t matter if you’re a data enthusiast, software engineer, or visual storyteller; our Confluence app can allow you to embed Mermaid Chart diagrams — and dynamically edit them — within your Confluence pages.
-
 ## [How to Choose the Right Documentation Software](https://www.mermaidchart.com/blog/posts/how-to-choose-the-right-documentation-software/)

 7 May 2024 · 5 mins
--- a/docs/syntax/gantt.md
+++ b/docs/syntax/gantt.md
@@ -172,7 +172,7 @@ The `title` is an _optional_ string to be displayed at the top of the Gantt char
 The `excludes` is an _optional_ attribute that accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".
 These date will be marked on the graph, and be excluded from the duration calculation of tasks. Meaning that if there are excluded dates during a task interval, the number of 'skipped' days will be added to the end of the task to ensure the duration is as specified in the code.

-#### Weekend (v\11.0.0+)
+#### Weekend (v\<MERMAID_RELEASE_VERSION>+)

 When excluding weekends, it is possible to configure the weekends to be either Friday and Saturday or Saturday and Sunday. By default weekends are Saturday and Sunday.
 To define the weekend start day, there is an _optional_ attribute `weekend` that can be added in a new line followed by either `friday` or `saturday`.
--- a/docs/syntax/gitgraph.md
+++ b/docs/syntax/gitgraph.md
@@ -918,7 +918,7 @@ Usage example:
       commit
 ```

-### Bottom to Top (`BT:`) (v11.0.0+)
+### Bottom to Top (`BT:`) (v\<MERMAID_RELEASE_VERSION>+)

 In `BT` (**Bottom-to-Top**) orientation, the commits run from bottom to top of the graph and branches are arranged side-by-side.

--- a/docs/syntax/packet.md
+++ b/docs/syntax/packet.md
@@ -4,7 +4,7 @@
 >
 > ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/packet.md](../../packages/mermaid/src/docs/syntax/packet.md).

-# Packet Diagram (v11.0.0+)
+# Packet Diagram (v\<MERMAID_RELEASE_VERSION>+)

 ## Introduction

--- a/docs/syntax/sequenceDiagram.md
+++ b/docs/syntax/sequenceDiagram.md
@@ -208,18 +208,18 @@ Messages can be of two displayed either solid or with a dotted line.

 There are ten types of arrows currently supported:

-| Type     | Description                                          |
-| -------- | ---------------------------------------------------- |
-| `->`     | Solid line without arrow                             |
-| `-->`    | Dotted line without arrow                            |
-| `->>`    | Solid line with arrowhead                            |
-| `-->>`   | Dotted line with arrowhead                           |
-| `<<->>`  | Solid line with bidirectional arrowheads (v11.0.0+)  |
-| `<<-->>` | Dotted line with bidirectional arrowheads (v11.0.0+) |
-| `-x`     | Solid line with a cross at the end                   |
-| `--x`    | Dotted line with a cross at the end.                 |
-| `-)`     | Solid line with an open arrow at the end (async)     |
-| `--)`    | Dotted line with a open arrow at the end (async)     |
+| Type     | Description                                                              |
+| -------- | ------------------------------------------------------------------------ |
+| `->`     | Solid line without arrow                                                 |
+| `-->`    | Dotted line without arrow                                                |
+| `->>`    | Solid line with arrowhead                                                |
+| `-->>`   | Dotted line with arrowhead                                               |
+| `<<->>`  | Solid line with bidirectional arrowheads (v\<MERMAID_RELEASE_VERSION>+)  |
+| `<<-->>` | Dotted line with bidirectional arrowheads (v\<MERMAID_RELEASE_VERSION>+) |
+| `-x`     | Solid line with a cross at the end                                       |
+| `--x`    | Dotted line with a cross at the end.                                     |
+| `-)`     | Solid line with an open arrow at the end (async)                         |
+| `--)`    | Dotted line with a open arrow at the end (async)                         |

 ## Activations

--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
  "version": "10.2.4",
  "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
  "type": "module",
-  "packageManager": "pnpm@9.7.1+sha512.faf344af2d6ca65c4c5c8c2224ea77a81a5e8859cbc4e06b1511ddce2f0151512431dd19e6aff31f2c6a8f5f2aced9bd2273e1fed7dd4de1868984059d2c4247",
+  "packageManager": "pnpm@9.4.0+sha512.f549b8a52c9d2b8536762f99c0722205efc5af913e77835dbccc3b0b0b2ca9e7dc8022b78062c17291c48e88749c70ce88eb5a74f1fa8c4bf5e18bb46c8bd83a",
  "keywords": [
    "diagram",
    "markdown",
@@ -24,9 +24,7 @@
    "dev": "tsx .esbuild/server.ts",
    "dev:vite": "tsx .vite/server.ts",
    "dev:coverage": "pnpm coverage:cypress:clean && VITE_COVERAGE=true pnpm dev:vite",
-    "copy-readme": "cpy './README.*' ./packages/mermaid/ --cwd=.",
-    "changeset:version": "changeset version && pnpm build && pnpm --filter mermaid run docs:release-version && pnpm --filter mermaid run docs:build && git add --all",
-    "changeset:publish": "pnpm copy-readme && changeset publish",
+    "release": "pnpm build",
    "lint": "eslint --quiet --stats --cache --cache-strategy content . && pnpm lint:jison && prettier --cache --check .",
    "lint:fix": "eslint --cache --cache-strategy content --fix . && prettier --write . && tsx scripts/fixCSpell.ts",
    "lint:jison": "tsx ./scripts/jison/lint.mts",
@@ -42,6 +40,7 @@
    "test": "pnpm lint && vitest run",
    "test:watch": "vitest --watch",
    "test:coverage": "vitest --coverage",
+    "prepublishOnly": "pnpm build && pnpm test",
    "prepare": "husky install && pnpm build",
    "pre-commit": "lint-staged"
  },
@@ -64,8 +63,6 @@
  "devDependencies": {
    "@applitools/eyes-cypress": "^3.44.4",
    "@argos-ci/cypress": "^2.1.0",
-    "@changesets/changelog-github": "^0.5.0",
-    "@changesets/cli": "^2.27.7",
    "@cspell/eslint-plugin": "^8.8.4",
    "@cypress/code-coverage": "^3.12.30",
    "@eslint/js": "^9.4.0",
@@ -85,7 +82,6 @@
    "chokidar": "^3.6.0",
    "concurrently": "^8.2.2",
    "cors": "^2.8.5",
-    "cpy-cli": "^5.0.0",
    "cross-env": "^7.0.3",
    "cspell": "^8.6.0",
    "cypress": "^13.11.0",
--- a/packages/mermaid-example-diagram/package.json
+++ b/packages/mermaid-example-diagram/package.json
@@ -1,7 +1,6 @@
 {
  "name": "@mermaid-js/mermaid-example-diagram",
  "version": "9.3.0",
-  "private": true,
  "description": "Example of external diagram module for MermaidJS.",
  "module": "dist/mermaid-example-diagram.core.mjs",
  "types": "dist/detector.d.ts",
@@ -19,7 +18,9 @@
    "example",
    "mermaid"
  ],
-  "scripts": {},
+  "scripts": {
+    "prepublishOnly": "pnpm -w run build"
+  },
  "repository": {
    "type": "git",
    "url": "https://github.com/mermaid-js/mermaid"
--- a/packages/mermaid-flowchart-elk/package.json
+++ b/packages/mermaid-flowchart-elk/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "@mermaid-js/flowchart-elk",
+  "version": "1.0.0-rc.1",
+  "description": "Flowchart plugin for mermaid with ELK layout",
+  "module": "dist/mermaid-flowchart-elk.core.mjs",
+  "types": "dist/packages/mermaid-flowchart-elk/src/detector.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/mermaid-flowchart-elk.core.mjs",
+      "types": "./dist/packages/mermaid-flowchart-elk/src/detector.d.ts"
+    },
+    "./*": "./*"
+  },
+  "keywords": [
+    "diagram",
+    "markdown",
+    "flowchart",
+    "elk",
+    "mermaid"
+  ],
+  "scripts": {
+    "prepublishOnly": "pnpm -w run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mermaid-js/mermaid"
+  },
+  "author": "Knut Sveidqvist",
+  "license": "MIT",
+  "dependencies": {
+    "d3": "^7.9.0",
+    "dagre-d3-es": "7.0.10",
+    "elkjs": "^0.9.2",
+    "khroma": "^2.1.0"
+  },
+  "devDependencies": {
+    "concurrently": "^8.2.2",
+    "mermaid": "workspace:^",
+    "rimraf": "^5.0.5"
+  },
+  "files": [
+    "dist"
+  ]
+}
--- a/packages/mermaid-flowchart-elk/src/detector.spec.ts
+++ b/packages/mermaid-flowchart-elk/src/detector.spec.ts
@@ -0,0 +1,75 @@
+import plugin from './detector.js';
+import { describe, it } from 'vitest';
+
+const { detector } = plugin;
+
+describe('flowchart-elk detector', () => {
+  it('should fail for dagre-d3', () => {
+    expect(
+      detector('flowchart', {
+        flowchart: {
+          defaultRenderer: 'dagre-d3',
+        },
+      })
+    ).toBe(false);
+  });
+  it('should fail for dagre-wrapper', () => {
+    expect(
+      detector('flowchart', {
+        flowchart: {
+          defaultRenderer: 'dagre-wrapper',
+        },
+      })
+    ).toBe(false);
+  });
+  it('should succeed for elk', () => {
+    expect(
+      detector('flowchart', {
+        flowchart: {
+          defaultRenderer: 'elk',
+        },
+      })
+    ).toBe(true);
+    expect(
+      detector('graph', {
+        flowchart: {
+          defaultRenderer: 'elk',
+        },
+      })
+    ).toBe(true);
+  });
+
+  // The error from the issue was reproduced with mindmap, so this is just an example
+  // what matters is the keyword somewhere inside graph definition
+  it('should check only the beginning of the line in search of keywords', () => {
+    expect(
+      detector('mindmap ["Descendant node in flowchart"]', {
+        flowchart: {
+          defaultRenderer: 'elk',
+        },
+      })
+    ).toBe(false);
+
+    expect(
+      detector('mindmap ["Descendant node in graph"]', {
+        flowchart: {
+          defaultRenderer: 'elk',
+        },
+      })
+    ).toBe(false);
+  });
+
+  it('should detect flowchart-elk', () => {
+    expect(detector('flowchart-elk')).toBe(true);
+  });
+
+  it('should not detect class with defaultRenderer set to elk', () => {
+    expect(
+      detector('class', {
+        flowchart: {
+          defaultRenderer: 'elk',
+        },
+      })
+    ).toBe(false);
+  });
+});
--- a/packages/mermaid-flowchart-elk/src/detector.ts
+++ b/packages/mermaid-flowchart-elk/src/detector.ts
@@ -0,0 +1,32 @@
+import type {
+  ExternalDiagramDefinition,
+  DiagramDetector,
+  DiagramLoader,
+} from '../../mermaid/src/diagram-api/types.js';
+
+const id = 'flowchart-elk';
+
+const detector: DiagramDetector = (txt, config): boolean => {
+  if (
+    // If diagram explicitly states flowchart-elk
+    /^\s*flowchart-elk/.test(txt) ||
+    // If a flowchart/graph diagram has their default renderer set to elk
+    (/^\s*(flowchart|graph)/.test(txt) && config?.flowchart?.defaultRenderer === 'elk')
+  ) {
+    return true;
+  }
+  return false;
+};
+
+const loader: DiagramLoader = async () => {
+  const { diagram } = await import('./diagram-definition.js');
+  return { id, diagram };
+};
+
+const plugin: ExternalDiagramDefinition = {
+  id,
+  detector,
+  loader,
+};
+
+export default plugin;
--- a/packages/mermaid-flowchart-elk/src/diagram-definition.ts
+++ b/packages/mermaid-flowchart-elk/src/diagram-definition.ts
@@ -0,0 +1,12 @@
+// @ts-ignore: JISON typing missing
+import parser from '../../mermaid/src/diagrams/flowchart/parser/flow.jison';
+import db from '../../mermaid/src/diagrams/flowchart/flowDb.js';
+import styles from '../../mermaid/src/diagrams/flowchart/styles.js';
+import renderer from './flowRenderer-elk.js';
+
+export const diagram = {
+  db,
+  renderer,
+  parser,
+  styles,
+};
--- a/packages/mermaid-flowchart-elk/src/flowRenderer-elk.js
+++ b/packages/mermaid-flowchart-elk/src/flowRenderer-elk.js
@@ -0,0 +1,888 @@
+import { select, line, curveLinear } from 'd3';
+import { insertNode } from '../../mermaid/src/dagre-wrapper/nodes.js';
+import insertMarkers from '../../mermaid/src/dagre-wrapper/markers.js';
+import { insertEdgeLabel } from '../../mermaid/src/dagre-wrapper/edges.js';
+import { findCommonAncestor } from './render-utils.js';
+import { labelHelper } from '../../mermaid/src/dagre-wrapper/shapes/util.js';
+import { getConfig } from '../../mermaid/src/config.js';
+import { log } from '../../mermaid/src/logger.js';
+import utils from '../../mermaid/src/utils.js';
+import { setupGraphViewbox } from '../../mermaid/src/setupGraphViewbox.js';
+import common from '../../mermaid/src/diagrams/common/common.js';
+import { interpolateToCurve, getStylesFromArray } from '../../mermaid/src/utils.js';
+import ELK from 'elkjs/lib/elk.bundled.js';
+import { getLineFunctionsWithOffset } from '../../mermaid/src/utils/lineWithOffset.js';
+import { addEdgeMarkers } from '../../mermaid/src/dagre-wrapper/edgeMarker.js';
+
+const elk = new ELK();
+
+let portPos = {};
+
+const conf = {};
+export const setConf = function (cnf) {
+  const keys = Object.keys(cnf);
+  for (const key of keys) {
+    conf[key] = cnf[key];
+  }
+};
+
+let nodeDb = {};
+
+// /**
+//  * Function that adds the vertices found during parsing to the graph to be rendered.
+//  *
+//  * @param vert Object containing the vertices.
+//  * @param g The graph that is to be drawn.
+//  * @param svgId
+//  * @param root
+//  * @param doc
+//  * @param diagObj
+//  */
+export const addVertices = async function (vert, svgId, root, doc, diagObj, parentLookupDb, graph) {
+  const svg = root.select(`[id="${svgId}"]`);
+  const nodes = svg.insert('g').attr('class', 'nodes');
+  const keys = [...vert.keys()];
+
+  // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition
+  await Promise.all(
+    keys.map(async function (id) {
+      const vertex = vert.get(id);
+
+      /**
+       * Variable for storing the classes for the vertex
+       *
+       * @type {string}
+       */
+      let classStr = 'default';
+      if (vertex.classes.length > 0) {
+        classStr = vertex.classes.join(' ');
+      }
+      classStr = classStr + ' flowchart-label';
+      const styles = getStylesFromArray(vertex.styles);
+
+      // Use vertex id as text in the box if no text is provided by the graph definition
+      let vertexText = vertex.text !== undefined ? vertex.text : vertex.id;
+
+      // We create a SVG label, either by delegating to addHtmlLabel or manually
+      const labelData = { width: 0, height: 0 };
+
+      const ports = [
+        {
+          id: vertex.id + '-west',
+          layoutOptions: {
+            'port.side': 'WEST',
+          },
+        },
+        {
+          id: vertex.id + '-east',
+          layoutOptions: {
+            'port.side': 'EAST',
+          },
+        },
+        {
+          id: vertex.id + '-south',
+          layoutOptions: {
+            'port.side': 'SOUTH',
+          },
+        },
+        {
+          id: vertex.id + '-north',
+          layoutOptions: {
+            'port.side': 'NORTH',
+          },
+        },
+      ];
+
+      let radius = 0;
+      let _shape = '';
+      let layoutOptions = {};
+      // Set the shape based parameters
+      switch (vertex.type) {
+        case 'round':
+          radius = 5;
+          _shape = 'rect';
+          break;
+        case 'square':
+          _shape = 'rect';
+          break;
+        case 'diamond':
+          _shape = 'question';
+          layoutOptions = {
+            portConstraints: 'FIXED_SIDE',
+          };
+          break;
+        case 'hexagon':
+          _shape = 'hexagon';
+          break;
+        case 'odd':
+          _shape = 'rect_left_inv_arrow';
+          break;
+        case 'lean_right':
+          _shape = 'lean_right';
+          break;
+        case 'lean_left':
+          _shape = 'lean_left';
+          break;
+        case 'trapezoid':
+          _shape = 'trapezoid';
+          break;
+        case 'inv_trapezoid':
+          _shape = 'inv_trapezoid';
+          break;
+        case 'odd_right':
+          _shape = 'rect_left_inv_arrow';
+          break;
+        case 'circle':
+          _shape = 'circle';
+          break;
+        case 'ellipse':
+          _shape = 'ellipse';
+          break;
+        case 'stadium':
+          _shape = 'stadium';
+          break;
+        case 'subroutine':
+          _shape = 'subroutine';
+          break;
+        case 'cylinder':
+          _shape = 'cylinder';
+          break;
+        case 'group':
+          _shape = 'rect';
+          break;
+        case 'doublecircle':
+          _shape = 'doublecircle';
+          break;
+        default:
+          _shape = 'rect';
+      }
+
+      // Add the node
+      const node = {
+        labelStyle: styles.labelStyle,
+        shape: _shape,
+        labelText: vertexText,
+        labelType: vertex.labelType,
+        rx: radius,
+        ry: radius,
+        class: classStr,
+        style: styles.style,
+        id: vertex.id,
+        link: vertex.link,
+        linkTarget: vertex.linkTarget,
+        tooltip: diagObj.db.getTooltip(vertex.id) || '',
+        domId: diagObj.db.lookUpDomId(vertex.id),
+        haveCallback: vertex.haveCallback,
+        width: vertex.type === 'group' ? 500 : undefined,
+        dir: vertex.dir,
+        type: vertex.type,
+        props: vertex.props,
+        padding: getConfig().flowchart.padding,
+      };
+      let boundingBox;
+      let nodeEl;
+
+      // Add the element to the DOM
+      if (node.type !== 'group') {
+        nodeEl = await insertNode(nodes, node, vertex.dir);
+        boundingBox = nodeEl.node().getBBox();
+      } else {
+        const { shapeSvg, bbox } = await labelHelper(nodes, node, undefined, true);
+        labelData.width = bbox.width;
+        labelData.wrappingWidth = getConfig().flowchart.wrappingWidth;
+        labelData.height = bbox.height;
+        labelData.labelNode = shapeSvg.node();
+        node.labelData = labelData;
+      }
+      // const { shapeSvg, bbox } = await labelHelper(svg, node, undefined, true);
+
+      const data = {
+        id: vertex.id,
+        ports: vertex.type === 'diamond' ? ports : [],
+        // labelStyle: styles.labelStyle,
+        // shape: _shape,
+        layoutOptions,
+        labelText: vertexText,
+        labelData,
+        // labels: [{ text: vertexText }],
+        // rx: radius,
+        // ry: radius,
+        // class: classStr,
+        // style: styles.style,
+        // link: vertex.link,
+        // linkTarget: vertex.linkTarget,
+        // tooltip: diagObj.db.getTooltip(vertex.id) || '',
+        domId: diagObj.db.lookUpDomId(vertex.id),
+        // haveCallback: vertex.haveCallback,
+        width: boundingBox?.width,
+        height: boundingBox?.height,
+        // dir: vertex.dir,
+        type: vertex.type,
+        // props: vertex.props,
+        // padding: getConfig().flowchart.padding,
+        // boundingBox,
+        el: nodeEl,
+        parent: parentLookupDb.parentById[vertex.id],
+      };
+      // if (!Object.keys(parentLookupDb.childrenById).includes(vertex.id)) {
+      // graph.children.push({
+      //   ...data,
+      // });
+      // }
+      nodeDb[node.id] = data;
+      // log.trace('setNode', {
+      //   labelStyle: styles.labelStyle,
+      //   shape: _shape,
+      //   labelText: vertexText,
+      //   rx: radius,
+      //   ry: radius,
+      //   class: classStr,
+      //   style: styles.style,
+      //   id: vertex.id,
+      //   domId: diagObj.db.lookUpDomId(vertex.id),
+      //   width: vertex.type === 'group' ? 500 : undefined,
+      //   type: vertex.type,
+      //   dir: vertex.dir,
+      //   props: vertex.props,
+      //   padding: getConfig().flowchart.padding,
+      //   parent: parentLookupDb.parentById[vertex.id],
+      // });
+    })
+  );
+  return graph;
+};
+
+const getNextPosition = (position, edgeDirection, graphDirection) => {
+  const portPos = {
+    TB: {
+      in: {
+        north: 'north',
+      },
+      out: {
+        south: 'west',
+        west: 'east',
+        east: 'south',
+      },
+    },
+    LR: {
+      in: {
+        west: 'west',
+      },
+      out: {
+        east: 'south',
+        south: 'north',
+        north: 'east',
+      },
+    },
+    RL: {
+      in: {
+        east: 'east',
+      },
+      out: {
+        west: 'north',
+        north: 'south',
+        south: 'west',
+      },
+    },
+    BT: {
+      in: {
+        south: 'south',
+      },
+      out: {
+        north: 'east',
+        east: 'west',
+        west: 'north',
+      },
+    },
+  };
+  portPos.TD = portPos.TB;
+  return portPos[graphDirection][edgeDirection][position];
+  // return 'south';
+};
+
+const getNextPort = (node, edgeDirection, graphDirection) => {
+  log.info('getNextPort', { node, edgeDirection, graphDirection });
+  if (!portPos[node]) {
+    switch (graphDirection) {
+      case 'TB':
+      case 'TD':
+        portPos[node] = {
+          inPosition: 'north',
+          outPosition: 'south',
+        };
+        break;
+      case 'BT':
+        portPos[node] = {
+          inPosition: 'south',
+          outPosition: 'north',
+        };
+        break;
+      case 'RL':
+        portPos[node] = {
+          inPosition: 'east',
+          outPosition: 'west',
+        };
+        break;
+      case 'LR':
+        portPos[node] = {
+          inPosition: 'west',
+          outPosition: 'east',
+        };
+        break;
+    }
+  }
+  const result = edgeDirection === 'in' ? portPos[node].inPosition : portPos[node].outPosition;
+
+  if (edgeDirection === 'in') {
+    portPos[node].inPosition = getNextPosition(
+      portPos[node].inPosition,
+      edgeDirection,
+      graphDirection
+    );
+  } else {
+    portPos[node].outPosition = getNextPosition(
+      portPos[node].outPosition,
+      edgeDirection,
+      graphDirection
+    );
+  }
+  return result;
+};
+
+const getEdgeStartEndPoint = (edge, dir) => {
+  let source = edge.start;
+  let target = edge.end;
+
+  // Save the original source and target
+  const sourceId = source;
+  const targetId = target;
+
+  const startNode = nodeDb[source];
+  const endNode = nodeDb[target];
+
+  if (!startNode || !endNode) {
+    return { source, target };
+  }
+
+  if (startNode.type === 'diamond') {
+    source = `${source}-${getNextPort(source, 'out', dir)}`;
+  }
+
+  if (endNode.type === 'diamond') {
+    target = `${target}-${getNextPort(target, 'in', dir)}`;
+  }
+
+  // Add the edge to the graph
+  return { source, target, sourceId, targetId };
+};
+
+/**
+ * Add edges to graph based on parsed graph definition
+ *
+ * @param {object} edges The edges to add to the graph
+ * @param {object} g The graph object
+ * @param cy
+ * @param diagObj
+ * @param graph
+ * @param svg
+ */
+export const addEdges = function (edges, diagObj, graph, svg) {
+  log.info('abc78 edges = ', edges);
+  const labelsEl = svg.insert('g').attr('class', 'edgeLabels');
+  let linkIdCnt = {};
+  let dir = diagObj.db.getDirection();
+  let defaultStyle;
+  let defaultLabelStyle;
+
+  if (edges.defaultStyle !== undefined) {
+    const defaultStyles = getStylesFromArray(edges.defaultStyle);
+    defaultStyle = defaultStyles.style;
+    defaultLabelStyle = defaultStyles.labelStyle;
+  }
+
+  edges.forEach(function (edge) {
+    // Identify Link
+    const linkIdBase = 'L-' + edge.start + '-' + edge.end;
+    // count the links from+to the same node to give unique id
+    if (linkIdCnt[linkIdBase] === undefined) {
+      linkIdCnt[linkIdBase] = 0;
+      log.info('abc78 new entry', linkIdBase, linkIdCnt[linkIdBase]);
+    } else {
+      linkIdCnt[linkIdBase]++;
+      log.info('abc78 new entry', linkIdBase, linkIdCnt[linkIdBase]);
+    }
+    let linkId = linkIdBase + '-' + linkIdCnt[linkIdBase];
+    log.info('abc78 new link id to be used is', linkIdBase, linkId, linkIdCnt[linkIdBase]);
+    const linkNameStart = 'LS-' + edge.start;
+    const linkNameEnd = 'LE-' + edge.end;
+
+    const edgeData = { style: '', labelStyle: '' };
+    edgeData.minlen = edge.length || 1;
+    //edgeData.id = 'id' + cnt;
+
+    // Set link type for rendering
+    if (edge.type === 'arrow_open') {
+      edgeData.arrowhead = 'none';
+    } else {
+      edgeData.arrowhead = 'normal';
+    }
+
+    // Check of arrow types, placed here in order not to break old rendering
+    edgeData.arrowTypeStart = 'arrow_open';
+    edgeData.arrowTypeEnd = 'arrow_open';
+
+    /* eslint-disable no-fallthrough */
+    switch (edge.type) {
+      case 'double_arrow_cross':
+        edgeData.arrowTypeStart = 'arrow_cross';
+      case 'arrow_cross':
+        edgeData.arrowTypeEnd = 'arrow_cross';
+        break;
+      case 'double_arrow_point':
+        edgeData.arrowTypeStart = 'arrow_point';
+      case 'arrow_point':
+        edgeData.arrowTypeEnd = 'arrow_point';
+        break;
+      case 'double_arrow_circle':
+        edgeData.arrowTypeStart = 'arrow_circle';
+      case 'arrow_circle':
+        edgeData.arrowTypeEnd = 'arrow_circle';
+        break;
+    }
+
+    let style = '';
+    let labelStyle = '';
+
+    switch (edge.stroke) {
+      case 'normal':
+        style = 'fill:none;';
+        if (defaultStyle !== undefined) {
+          style = defaultStyle;
+        }
+        if (defaultLabelStyle !== undefined) {
+          labelStyle = defaultLabelStyle;
+        }
+        edgeData.thickness = 'normal';
+        edgeData.pattern = 'solid';
+        break;
+      case 'dotted':
+        edgeData.thickness = 'normal';
+        edgeData.pattern = 'dotted';
+        edgeData.style = 'fill:none;stroke-width:2px;stroke-dasharray:3;';
+        break;
+      case 'thick':
+        edgeData.thickness = 'thick';
+        edgeData.pattern = 'solid';
+        edgeData.style = 'stroke-width: 3.5px;fill:none;';
+        break;
+    }
+    if (edge.style !== undefined) {
+      const styles = getStylesFromArray(edge.style);
+      style = styles.style;
+      labelStyle = styles.labelStyle;
+    }
+
+    edgeData.style = edgeData.style += style;
+    edgeData.labelStyle = edgeData.labelStyle += labelStyle;
+
+    if (edge.interpolate !== undefined) {
+      edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear);
+    } else if (edges.defaultInterpolate !== undefined) {
+      edgeData.curve = interpolateToCurve(edges.defaultInterpolate, curveLinear);
+    } else {
+      edgeData.curve = interpolateToCurve(conf.curve, curveLinear);
+    }
+
+    if (edge.text === undefined) {
+      if (edge.style !== undefined) {
+        edgeData.arrowheadStyle = 'fill: #333';
+      }
+    } else {
+      edgeData.arrowheadStyle = 'fill: #333';
+      edgeData.labelpos = 'c';
+    }
+
+    edgeData.labelType = edge.labelType;
+    edgeData.label = edge.text.replace(common.lineBreakRegex, '\n');
+
+    if (edge.style === undefined) {
+      edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none;';
+    }
+
+    edgeData.labelStyle = edgeData.labelStyle.replace('color:', 'fill:');
+
+    edgeData.id = linkId;
+    edgeData.classes = 'flowchart-link ' + linkNameStart + ' ' + linkNameEnd;
+
+    const labelEl = insertEdgeLabel(labelsEl, edgeData);
+
+    // calculate start and end points of the edge, note that the source and target
+    // can be modified for shapes that have ports
+    const { source, target, sourceId, targetId } = getEdgeStartEndPoint(edge, dir);
+    log.debug('abc78 source and target', source, target);
+    // Add the edge to the graph
+    graph.edges.push({
+      id: 'e' + edge.start + edge.end,
+      sources: [source],
+      targets: [target],
+      sourceId,
+      targetId,
+      labelEl: labelEl,
+      labels: [
+        {
+          width: edgeData.width,
+          height: edgeData.height,
+          orgWidth: edgeData.width,
+          orgHeight: edgeData.height,
+          text: edgeData.label,
+          layoutOptions: {
+            'edgeLabels.inline': 'true',
+            'edgeLabels.placement': 'CENTER',
+          },
+        },
+      ],
+      edgeData,
+    });
+  });
+  return graph;
+};
+
+// TODO: break out and share with dagre wrapper. The current code in dagre wrapper also adds
+// adds the line to the graph, but we don't need that here. This is why we can't use the dagre
+// wrapper directly for this
+/**
+ * Add the markers to the edge depending on the type of arrow is
+ * @param svgPath
+ * @param edgeData
+ * @param diagramType
+ * @param arrowMarkerAbsolute
+ * @param id
+ */
+const addMarkersToEdge = function (svgPath, edgeData, diagramType, arrowMarkerAbsolute, id) {
+  let url = '';
+  // Check configuration for absolute path
+  if (arrowMarkerAbsolute) {
+    url =
+      window.location.protocol +
+      '//' +
+      window.location.host +
+      window.location.pathname +
+      window.location.search;
+    url = url.replace(/\(/g, '\\(');
+    url = url.replace(/\)/g, '\\)');
+  }
+
+  // look in edge data and decide which marker to use
+  addEdgeMarkers(svgPath, edgeData, url, id, diagramType);
+};
+
+/**
+ * Returns the all the styles from classDef statements in the graph definition.
+ *
+ * @param text
+ * @param diagObj
+ * @returns {Map<string, import('../../mermaid/src/diagram-api/types.js').DiagramStyleClassDef>} ClassDef styles
+ */
+export const getClasses = function (text, diagObj) {
+  log.info('Extracting classes');
+  return diagObj.db.getClasses();
+};
+
+const addSubGraphs = function (db) {
+  const parentLookupDb = { parentById: {}, childrenById: {} };
+  const subgraphs = db.getSubGraphs();
+  log.info('Subgraphs - ', subgraphs);
+  subgraphs.forEach(function (subgraph) {
+    subgraph.nodes.forEach(function (node) {
+      parentLookupDb.parentById[node] = subgraph.id;
+      if (parentLookupDb.childrenById[subgraph.id] === undefined) {
+        parentLookupDb.childrenById[subgraph.id] = [];
+      }
+      parentLookupDb.childrenById[subgraph.id].push(node);
+    });
+  });
+
+  subgraphs.forEach(function (subgraph) {
+    const data = { id: subgraph.id };
+    if (parentLookupDb.parentById[subgraph.id] !== undefined) {
+      data.parent = parentLookupDb.parentById[subgraph.id];
+    }
+  });
+  return parentLookupDb;
+};
+
+const calcOffset = function (src, dest, parentLookupDb) {
+  const ancestor = findCommonAncestor(src, dest, parentLookupDb);
+  if (ancestor === undefined || ancestor === 'root') {
+    return { x: 0, y: 0 };
+  }
+
+  const ancestorOffset = nodeDb[ancestor].offset;
+  return { x: ancestorOffset.posX, y: ancestorOffset.posY };
+};
+
+const insertEdge = function (edgesEl, edge, edgeData, diagObj, parentLookupDb, id) {
+  const offset = calcOffset(edge.sourceId, edge.targetId, parentLookupDb);
+
+  const src = edge.sections[0].startPoint;
+  const dest = edge.sections[0].endPoint;
+  const segments = edge.sections[0].bendPoints ? edge.sections[0].bendPoints : [];
+
+  const segPoints = segments.map((segment) => [segment.x + offset.x, segment.y + offset.y]);
+  const points = [
+    [src.x + offset.x, src.y + offset.y],
+    ...segPoints,
+    [dest.x + offset.x, dest.y + offset.y],
+  ];
+
+  const { x, y } = getLineFunctionsWithOffset(edge.edgeData);
+  const curve = line().x(x).y(y).curve(curveLinear);
+  const edgePath = edgesEl
+    .insert('path')
+    .attr('d', curve(points))
+    .attr('class', 'path ' + edgeData.classes)
+    .attr('fill', 'none');
+  Object.entries(edgeData).forEach(([key, value]) => {
+    if (key !== 'classes') {
+      edgePath.attr(key, value);
+    }
+  });
+  const edgeG = edgesEl.insert('g').attr('class', 'edgeLabel');
+  const edgeWithLabel = select(edgeG.node().appendChild(edge.labelEl));
+  const box = edgeWithLabel.node().firstChild.getBoundingClientRect();
+  edgeWithLabel.attr('width', box.width);
+  edgeWithLabel.attr('height', box.height);
+
+  edgeG.attr(
+    'transform',
+    `translate(${edge.labels[0].x + offset.x}, ${edge.labels[0].y + offset.y})`
+  );
+  addMarkersToEdge(edgePath, edgeData, diagObj.type, diagObj.arrowMarkerAbsolute, id);
+};
+
+/**
+ * Recursive function that iterates over an array of nodes and inserts the children of each node.
+ * It also recursively populates the inserts the children of the children and so on.
+ * @param nodeArray
+ * @param parentLookupDb
+ */
+const insertChildren = (nodeArray, parentLookupDb) => {
+  nodeArray.forEach((node) => {
+    // Check if we have reached the end of the tree
+    if (!node.children) {
+      node.children = [];
+    }
+    // Check if the node has children
+    const childIds = parentLookupDb.childrenById[node.id];
+    // If the node has children, add them to the node
+    if (childIds) {
+      childIds.forEach((childId) => {
+        node.children.push(nodeDb[childId]);
+      });
+    }
+    // Recursive call
+    insertChildren(node.children, parentLookupDb);
+  });
+};
+
+/**
+ * Draws a flowchart in the tag with id: id based on the graph definition in text.
+ *
+ * @param text
+ * @param id
+ */
+
+export const draw = async function (text, id, _version, diagObj) {
+  const { securityLevel, flowchart: conf } = getConfig();
+  nodeDb = {};
+  portPos = {};
+  const renderEl = select('body').append('div').attr('style', 'height:400px').attr('id', 'cy');
+  let graph = {
+    id: 'root',
+    layoutOptions: {
+      'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
+      'elk.layered.spacing.edgeNodeBetweenLayers': conf?.nodeSpacing ? `${conf.nodeSpacing}` : '30',
+      // 'elk.layered.mergeEdges': 'true',
+      'elk.direction': 'DOWN',
+      // 'elk.ports.sameLayerEdges': true,
+      // 'nodePlacement.strategy': 'SIMPLE',
+    },
+    children: [],
+    edges: [],
+  };
+  log.info('Drawing flowchart using v3 renderer', elk);
+
+  // Set the direction,
+  // Fetch the default direction, use TD if none was found
+  let dir = diagObj.db.getDirection();
+  switch (dir) {
+    case 'BT':
+      graph.layoutOptions['elk.direction'] = 'UP';
+      break;
+    case 'TB':
+      graph.layoutOptions['elk.direction'] = 'DOWN';
+      break;
+    case 'LR':
+      graph.layoutOptions['elk.direction'] = 'RIGHT';
+      break;
+    case 'RL':
+      graph.layoutOptions['elk.direction'] = 'LEFT';
+      break;
+  }
+
+  // Find the root dom node to ne used in rendering
+  // Handle root and document for when rendering in sandbox mode
+  let sandboxElement;
+  if (securityLevel === 'sandbox') {
+    sandboxElement = select('#i' + id);
+  }
+  const root =
+    securityLevel === 'sandbox'
+      ? select(sandboxElement.nodes()[0].contentDocument.body)
+      : select('body');
+  const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
+
+  const svg = root.select(`[id="${id}"]`);
+  // Define the supported markers for the diagram
+  const markers = ['point', 'circle', 'cross'];
+
+  // Add the marker definitions to the svg as marker tags
+  insertMarkers(svg, markers, diagObj.type, id);
+
+  // Fetch the vertices/nodes and edges/links from the parsed graph definition
+  const vert = diagObj.db.getVertices();
+
+  // Setup nodes from the subgraphs with type group, these will be used
+  // as nodes with children in the subgraph
+  let subG;
+  const subGraphs = diagObj.db.getSubGraphs();
+  log.info('Subgraphs - ', subGraphs);
+  for (let i = subGraphs.length - 1; i >= 0; i--) {
+    subG = subGraphs[i];
+    diagObj.db.addVertex(
+      subG.id,
+      { text: subG.title, type: subG.labelType },
+      'group',
+      undefined,
+      subG.classes,
+      subG.dir
+    );
+  }
+
+  // debugger;
+  // Add an element in the svg to be used to hold the subgraphs container
+  // elements
+  const subGraphsEl = svg.insert('g').attr('class', 'subgraphs');
+
+  // Create the lookup db for the subgraphs and their children to used when creating
+  // the tree structured graph
+  const parentLookupDb = addSubGraphs(diagObj.db);
+
+  // Add the nodes to the graph, this will entail creating the actual nodes
+  // in order to get the size of the node. You can't get the size of a node
+  // that is not in the dom so we need to add it to the dom, get the size
+  // we will position the nodes when we get the layout from elkjs
+  graph = await addVertices(vert, id, root, doc, diagObj, parentLookupDb, graph);
+
+  // Time for the edges, we start with adding an element in the node to hold the edges
+  const edgesEl = svg.insert('g').attr('class', 'edges edgePath');
+  // Fetch the edges form the parsed graph definition
+  const edges = diagObj.db.getEdges();
+
+  // Add the edges to the graph, this will entail creating the actual edges
+  graph = addEdges(edges, diagObj, graph, svg);
+
+  // Iterate through all nodes and add the top level nodes to the graph
+  const nodes = Object.keys(nodeDb);
+  nodes.forEach((nodeId) => {
+    const node = nodeDb[nodeId];
+    if (!node.parent) {
+      graph.children.push(node);
+    }
+    // Subgraph
+    if (parentLookupDb.childrenById[nodeId] !== undefined) {
+      node.labels = [
+        {
+          text: node.labelText,
+          layoutOptions: {
+            'nodeLabels.placement': '[H_CENTER, V_TOP, INSIDE]',
+          },
+          width: node.labelData.width,
+          height: node.labelData.height,
+          // width: 100,
+          // height: 100,
+        },
+      ];
+      delete node.x;
+      delete node.y;
+      delete node.width;
+      delete node.height;
+    }
+  });
+
+  insertChildren(graph.children, parentLookupDb);
+  log.info('after layout', JSON.stringify(graph, null, 2));
+  const g = await elk.layout(graph);
+  drawNodes(0, 0, g.children, svg, subGraphsEl, diagObj, 0);
+  utils.insertTitle(svg, 'flowchartTitleText', conf.titleTopMargin, diagObj.db.getDiagramTitle());
+  log.info('after layout', g);
+  g.edges?.map((edge) => {
+    insertEdge(edgesEl, edge, edge.edgeData, diagObj, parentLookupDb, id);
+  });
+  setupGraphViewbox({}, svg, conf.diagramPadding, conf.useMaxWidth);
+  // Remove element after layout
+  renderEl.remove();
+};
+
+const drawNodes = (relX, relY, nodeArray, svg, subgraphsEl, diagObj, depth) => {
+  nodeArray.forEach(function (node) {
+    if (node) {
+      nodeDb[node.id].offset = {
+        posX: node.x + relX,
+        posY: node.y + relY,
+        x: relX,
+        y: relY,
+        depth,
+        width: node.width,
+        height: node.height,
+      };
+      if (node.type === 'group') {
+        const subgraphEl = subgraphsEl.insert('g').attr('class', 'subgraph');
+        subgraphEl
+          .insert('rect')
+          .attr('class', 'subgraph subgraph-lvl-' + (depth % 5) + ' node')
+          .attr('x', node.x + relX)
+          .attr('y', node.y + relY)
+          .attr('width', node.width)
+          .attr('height', node.height);
+        const label = subgraphEl.insert('g').attr('class', 'label');
+        const labelCentering = getConfig().flowchart.htmlLabels ? node.labelData.width / 2 : 0;
+        label.attr(
+          'transform',
+          `translate(${node.labels[0].x + relX + node.x + labelCentering}, ${
+            node.labels[0].y + relY + node.y + 3
+          })`
+        );
+        label.node().appendChild(node.labelData.labelNode);
+
+        log.info('Id (UGH)= ', node.type, node.labels);
+      } else {
+        log.info('Id (UGH)= ', node.id);
+        node.el.attr(
+          'transform',
+          `translate(${node.x + relX + node.width / 2}, ${node.y + relY + node.height / 2})`
+        );
+      }
+    }
+  });
+  nodeArray.forEach(function (node) {
+    if (node && node.type === 'group') {
+      drawNodes(relX + node.x, relY + node.y, node.children, svg, subgraphsEl, diagObj, depth + 1);
+    }
+  });
+};
+
+export default {
+  getClasses,
+  draw,
+};
--- a/packages/mermaid-flowchart-elk/src/render-utils.spec.ts
+++ b/packages/mermaid-flowchart-elk/src/render-utils.spec.ts
@@ -0,0 +1,41 @@
+import type { TreeData } from './render-utils.js';
+import { findCommonAncestor } from './render-utils.js';
+describe('when rendering a flowchart using elk ', () => {
+  let lookupDb: TreeData;
+  beforeEach(() => {
+    lookupDb = {
+      parentById: {
+        B4: 'inner',
+        B5: 'inner',
+        C4: 'inner2',
+        C5: 'inner2',
+        B2: 'Ugge',
+        B3: 'Ugge',
+        inner: 'Ugge',
+        inner2: 'Ugge',
+        B6: 'outer',
+      },
+      childrenById: {
+        inner: ['B4', 'B5'],
+        inner2: ['C4', 'C5'],
+        Ugge: ['B2', 'B3', 'inner', 'inner2'],
+        outer: ['B6'],
+      },
+    };
+  });
+  it('to find parent of siblings in a subgraph', () => {
+    expect(findCommonAncestor('B4', 'B5', lookupDb)).toBe('inner');
+  });
+  it('to find an uncle', () => {
+    expect(findCommonAncestor('B4', 'B2', lookupDb)).toBe('Ugge');
+  });
+  it('to find a cousin', () => {
+    expect(findCommonAncestor('B4', 'C4', lookupDb)).toBe('Ugge');
+  });
+  it('to find a grandparent', () => {
+    expect(findCommonAncestor('B4', 'B6', lookupDb)).toBe('root');
+  });
+  it('to find ancestor of siblings in the root', () => {
+    expect(findCommonAncestor('B1', 'outer', lookupDb)).toBe('root');
+  });
+});
--- a/packages/mermaid-flowchart-elk/src/render-utils.ts
+++ b/packages/mermaid-flowchart-elk/src/render-utils.ts
@@ -0,0 +1,25 @@
+export interface TreeData {
+  parentById: Record<string, string>;
+  childrenById: Record<string, string[]>;
+}
+
+export const findCommonAncestor = (id1: string, id2: string, treeData: TreeData) => {
+  const { parentById } = treeData;
+  const visited = new Set();
+  let currentId = id1;
+  while (currentId) {
+    visited.add(currentId);
+    if (currentId === id2) {
+      return currentId;
+    }
+    currentId = parentById[currentId];
+  }
+  currentId = id2;
+  while (currentId) {
+    if (visited.has(currentId)) {
+      return currentId;
+    }
+    currentId = parentById[currentId];
+  }
+  return 'root';
+};
--- a/packages/mermaid-flowchart-elk/src/styles.ts
+++ b/packages/mermaid-flowchart-elk/src/styles.ts
@@ -0,0 +1,143 @@
+/** Returns the styles given options */
+export interface FlowChartStyleOptions {
+  arrowheadColor: string;
+  border2: string;
+  clusterBkg: string;
+  clusterBorder: string;
+  edgeLabelBackground: string;
+  fontFamily: string;
+  lineColor: string;
+  mainBkg: string;
+  nodeBorder: string;
+  nodeTextColor: string;
+  tertiaryColor: string;
+  textColor: string;
+  titleColor: string;
+  [key: string]: string;
+}
+
+const genSections = (options: FlowChartStyleOptions) => {
+  let sections = '';
+
+  for (let i = 0; i < 5; i++) {
+    sections += `
+      .subgraph-lvl-${i} {
+        fill: ${options[`surface${i}`]};
+        stroke: ${options[`surfacePeer${i}`]};
+      }
+    `;
+  }
+  return sections;
+};
+
+const getStyles = (options: FlowChartStyleOptions) =>
+  `.label {
+    font-family: ${options.fontFamily};
+    color: ${options.nodeTextColor || options.textColor};
+  }
+  .cluster-label text {
+    fill: ${options.titleColor};
+  }
+  .cluster-label span {
+    color: ${options.titleColor};
+  }
+
+  .label text,span {
+    fill: ${options.nodeTextColor || options.textColor};
+    color: ${options.nodeTextColor || options.textColor};
+  }
+
+  .node rect,
+  .node circle,
+  .node ellipse,
+  .node polygon,
+  .node path {
+    fill: ${options.mainBkg};
+    stroke: ${options.nodeBorder};
+    stroke-width: 1px;
+  }
+
+  .node .label {
+    text-align: center;
+  }
+  .node.clickable {
+    cursor: pointer;
+  }
+
+  .arrowheadPath {
+    fill: ${options.arrowheadColor};
+  }
+
+  .edgePath .path {
+    stroke: ${options.lineColor};
+    stroke-width: 2.0px;
+  }
+
+  .flowchart-link {
+    stroke: ${options.lineColor};
+    fill: none;
+  }
+
+  .edgeLabel {
+    background-color: ${options.edgeLabelBackground};
+    rect {
+      opacity: 0.85;
+      background-color: ${options.edgeLabelBackground};
+      fill: ${options.edgeLabelBackground};
+    }
+    text-align: center;
+  }
+
+  .cluster rect {
+    fill: ${options.clusterBkg};
+    stroke: ${options.clusterBorder};
+    stroke-width: 1px;
+  }
+
+  .cluster text {
+    fill: ${options.titleColor};
+  }
+
+  .cluster span {
+    color: ${options.titleColor};
+  }
+  /* .cluster div {
+    color: ${options.titleColor};
+  } */
+
+  div.mermaidTooltip {
+    position: absolute;
+    text-align: center;
+    max-width: 200px;
+    padding: 2px;
+    font-family: ${options.fontFamily};
+    font-size: 12px;
+    background: ${options.tertiaryColor};
+    border: 1px solid ${options.border2};
+    border-radius: 2px;
+    pointer-events: none;
+    z-index: 100;
+  }
+
+  .flowchartTitleText {
+    text-anchor: middle;
+    font-size: 18px;
+    fill: ${options.textColor};
+  }
+  .subgraph {
+    stroke-width:2;
+    rx:3;
+  }
+  // .subgraph-lvl-1 {
+  //   fill:#ccc;
+  //   // stroke:black;
+  // }
+
+  .flowchart-label text {
+    text-anchor: middle;
+  }
+
+  ${genSections(options)}
+`;
+
+export default getStyles;
--- a/packages/mermaid-flowchart-elk/tsconfig.json
+++ b/packages/mermaid-flowchart-elk/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "../..",
+    "outDir": "./dist",
+    "types": ["vitest/importMeta", "vitest/globals"]
+  },
+  "include": ["./src/**/*.ts"],
+  "typeRoots": ["./src/types"]
+}
--- a/packages/mermaid-layout-elk/README.md
+++ b/packages/mermaid-layout-elk/README.md
@@ -1,72 +0,0 @@
-# @mermaid-js/layout-elk
-
-This package provides a layout engine for Mermaid based on the [ELK](https://www.eclipse.org/elk/) layout engine.
-
-> [!NOTE]  
-> The ELK Layout engine will not be available in all providers that support mermaid by default.
-> The websites will have to install the `@mermaid-js/layout-elk` package to use the ELK layout engine.
-
-## Usage
-
-```
-flowchart-elk TD
-  A --> B
-  A --> C
-```
-
-```
---
-config:
-  layout: elk
---
-
-flowchart TD
-  A --> B
-  A --> C
-```
-
-```
---
-config:
-  layout: elk.stress
---
-
-flowchart TD
-  A --> B
-  A --> C
-```
-
-### With bundlers
-
-```sh
-npm install @mermaid-js/layout-elk
-```
-
-```ts
-import mermaid from 'mermaid';
-import elkLayouts from '@mermaid-js/layout-elk';
-
-mermaid.registerLayoutLoaders(elkLayouts);
-```
-
-### With CDN
-
-```html
-<script type="module">
-  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
-  import elkLayouts from 'https://cdn.jsdelivr.net/npm/@mermaid-js/layout-elk@11/dist/mermaid-layout-elk.esm.min.mjs';
-
-  mermaid.registerLayoutLoaders(elkLayouts);
-</script>
-```
-
-## Supported layouts
-
- `elk`: The default layout, which is `elk.layered`.
- `elk.layered`: Layered layout
- `elk.stress`: Stress layout
- `elk.force`: Force layout
- `elk.mrtree`: Multi-root tree layout
- `elk.sporeOverlap`: Spore overlap layout
-
-<!-- TODO: Add images for these layouts, as GitHub doesn't support natively -->
--- a/packages/mermaid-layout-elk/package.json
+++ b/packages/mermaid-layout-elk/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@mermaid-js/layout-elk",
-  "version": "0.1.0",
+  "version": "0.0.1",
  "description": "ELK layout engine for mermaid",
  "module": "dist/mermaid-layout-elk.core.mjs",
  "types": "dist/packages/mermaid-layout-elk/src/index.d.ts",
@@ -18,7 +18,9 @@
    "elk",
    "mermaid"
  ],
-  "scripts": {},
+  "scripts": {
+    "prepublishOnly": "pnpm -w run build"
+  },
  "repository": {
    "type": "git",
    "url": "https://github.com/mermaid-js/mermaid"
@@ -29,15 +31,11 @@
  ],
  "license": "MIT",
  "dependencies": {
-    "d3": "^7.9.0",
-    "elkjs": "^0.9.3"
-  },
-  "devDependencies": {
-    "@types/d3": "^7.4.3",
-    "mermaid": "workspace:^"
+    "elkjs": "^0.9.3",
+    "d3": "^7.9.0"
  },
  "peerDependencies": {
-    "mermaid": "^11.0.0"
+    "mermaid": "workspace:^"
  },
  "files": [
    "dist"
--- a/packages/mermaid-layout-elk/src/layouts.ts
+++ b/packages/mermaid-layout-elk/src/layouts.ts
@@ -3,7 +3,7 @@ import type { LayoutLoaderDefinition } from 'mermaid';
 const loader = async () => await import(`./render.js`);
 const algos = ['elk.stress', 'elk.force', 'elk.mrtree', 'elk.sporeOverlap'];

-const layouts: LayoutLoaderDefinition[] = [
+export const layouts: LayoutLoaderDefinition[] = [
  {
    name: 'elk',
    loader,
@@ -15,5 +15,3 @@ const layouts: LayoutLoaderDefinition[] = [
    algorithm: algo,
  })),
 ];
-
-export default layouts;
--- a/packages/mermaid-layout-elk/src/render.ts
+++ b/packages/mermaid-layout-elk/src/render.ts
--- a/packages/mermaid-zenuml/package.json
+++ b/packages/mermaid-zenuml/package.json
@@ -19,7 +19,8 @@
    "mermaid"
  ],
  "scripts": {
-    "clean": "rimraf dist"
+    "clean": "rimraf dist",
+    "prepublishOnly": "pnpm -w run build"
  },
  "repository": {
    "type": "git",
@@ -39,7 +40,7 @@
    "mermaid": "workspace:^"
  },
  "peerDependencies": {
-    "mermaid": "^10 || ^11"
+    "mermaid": "workspace:>=10.0.0"
  },
  "files": [
    "dist"
--- a/packages/mermaid/CHANGELOG.md
+++ b/packages/mermaid/CHANGELOG.md
@@ -1,23 +0,0 @@
-# mermaid
-
-## 11.0.1
-
-### Patch Changes
-
- [#2](https://github.com/calvinvette/mermaid/pull/2) [`bf05d87`](https://github.com/mermaid-js/mermaid/commit/bf05d8781edacb580fdb053da167e968b7570117) Thanks [@calvinvette](https://github.com/calvinvette)! - test changeset
-
-## 11.0.2
-
-### Patch Changes
-
- Updated dependencies [[`83926c9`](https://github.com/mermaid-js/mermaid/commit/83926c9707b09c34e300888186250191ee8ae30a)]:
-  - @mermaid-js/parser@0.1.1
-
-## 11.0.1
-
-### Patch Changes
-
- [#5744](https://github.com/mermaid-js/mermaid/pull/5744) [`5013484`](https://github.com/mermaid-js/mermaid/commit/50134849246141ec400e33e08c12c10539b84de9) Thanks [@sidharthv96](https://github.com/sidharthv96)! - Release parser, test changesets
-
- Updated dependencies [[`5013484`](https://github.com/mermaid-js/mermaid/commit/50134849246141ec400e33e08c12c10539b84de9)]:
-  - @mermaid-js/parser@0.1.0
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -1,6 +1,6 @@
 {
  "name": "mermaid",
-  "version": "11.0.1",
+  "version": "11.0.0-alpha.7",
  "description": "Markdown-ish syntax for generating flowcharts, mindmaps, sequence diagrams, class diagrams, gantt charts, git graphs and more.",
  "type": "module",
  "module": "./dist/mermaid.core.mjs",
@@ -48,7 +48,8 @@
    "types:build-config": "tsx scripts/create-types-from-json-schema.mts",
    "types:verify-config": "tsx scripts/create-types-from-json-schema.mts --verify",
    "checkCircle": "npx madge --circular ./src",
-    "prepublishOnly": "pnpm docs:verify-version"
+    "release": "pnpm build",
+    "prepublishOnly": "cpy '../../README.*' ./ --cwd=. && pnpm docs:release-version && pnpm -w run build"
  },
  "repository": {
    "type": "git",
@@ -105,6 +106,7 @@
    "ajv": "^8.12.0",
    "chokidar": "^3.6.0",
    "concurrently": "^8.2.2",
+    "cpy-cli": "^5.0.0",
    "csstree-validator": "^3.0.0",
    "globby": "^14.0.1",
    "jison": "^0.4.18",
--- a/packages/mermaid/src/defaultConfig.ts
+++ b/packages/mermaid/src/defaultConfig.ts
@@ -248,6 +248,19 @@ const config: RequiredDeep<MermaidConfig> = {
    ...defaultConfigJson.requirement,
    useWidth: undefined,
  },
+  gitGraph: {
+    ...defaultConfigJson.gitGraph,
+    // TODO: This is a temporary override for `gitGraph`, since every other
+    //       diagram does have `useMaxWidth`, but instead sets it to `true`.
+    //       Should we set this to `true` instead?
+    useMaxWidth: false,
+  },
+  sankey: {
+    ...defaultConfigJson.sankey,
+    // this is false, unlike every other diagram (other than gitGraph)
+    // TODO: can we make this default to `true` instead?
+    useMaxWidth: false,
+  },
  packet: {
    ...defaultConfigJson.packet,
  },
--- a/packages/mermaid/src/diagram-api/types.ts
+++ b/packages/mermaid/src/diagram-api/types.ts
@@ -129,6 +129,6 @@ export type HTML = d3.Selection<HTMLIFrameElement, unknown, Element | null, unkn

 export type SVG = d3.Selection<SVGSVGElement, unknown, Element | null, unknown>;

-export type SVGGroup = d3.Selection<SVGGElement, unknown, Element | null, unknown>;
+export type Group = d3.Selection<SVGGElement, unknown, Element | null, unknown>;

 export type DiagramStylesProvider = (options?: any) => string;
--- a/packages/mermaid/src/diagrams/common/svgDrawCommon.ts
+++ b/packages/mermaid/src/diagrams/common/svgDrawCommon.ts
@@ -1,6 +1,5 @@
 import { sanitizeUrl } from '@braintree/sanitize-url';
-import type { SVG, SVGGroup } from '../../diagram-api/types.js';
-import { lineBreakRegex } from './common.js';
+import type { Group, SVG } from '../../diagram-api/types.js';
 import type {
  Bound,
  D3ImageElement,
@@ -12,8 +11,9 @@ import type {
  TextData,
  TextObject,
 } from './commonTypes.js';
+import { lineBreakRegex } from './common.js';

-export const drawRect = (element: SVG | SVGGroup, rectData: RectData): D3RectElement => {
+export const drawRect = (element: SVG | Group, rectData: RectData): D3RectElement => {
  const rectElement: D3RectElement = element.append('rect');
  rectElement.attr('x', rectData.x);
  rectElement.attr('y', rectData.y);
@@ -50,7 +50,7 @@ export const drawRect = (element: SVG | SVGGroup, rectData: RectData): D3RectEle
 * @param element - Diagram (reference for bounds)
 * @param bounds - Shape of the rectangle
 */
-export const drawBackgroundRect = (element: SVG | SVGGroup, bounds: Bound): void => {
+export const drawBackgroundRect = (element: SVG | Group, bounds: Bound): void => {
  const rectData: RectData = {
    x: bounds.startx,
    y: bounds.starty,
@@ -64,7 +64,7 @@ export const drawBackgroundRect = (element: SVG | SVGGroup, bounds: Bound): void
  rectElement.lower();
 };

-export const drawText = (element: SVG | SVGGroup, textData: TextData): D3TextElement => {
+export const drawText = (element: SVG | Group, textData: TextData): D3TextElement => {
  const nText: string = textData.text.replace(lineBreakRegex, ' ');

  const textElem: D3TextElement = element.append('text');
@@ -84,7 +84,7 @@ export const drawText = (element: SVG | SVGGroup, textData: TextData): D3TextEle
  return textElem;
 };

-export const drawImage = (elem: SVG | SVGGroup, x: number, y: number, link: string): void => {
+export const drawImage = (elem: SVG | Group, x: number, y: number, link: string): void => {
  const imageElement: D3ImageElement = elem.append('image');
  imageElement.attr('x', x);
  imageElement.attr('y', y);
@@ -93,7 +93,7 @@ export const drawImage = (elem: SVG | SVGGroup, x: number, y: number, link: stri
 };

 export const drawEmbeddedImage = (
-  element: SVG | SVGGroup,
+  element: SVG | Group,
  x: number,
  y: number,
  link: string
--- a/packages/mermaid/src/diagrams/error/errorRenderer.ts
+++ b/packages/mermaid/src/diagrams/error/errorRenderer.ts
@@ -1,5 +1,5 @@
-import type { SVG, SVGGroup } from '../../diagram-api/types.js';
 import { log } from '../../logger.js';
+import type { Group, SVG } from '../../diagram-api/types.js';
 import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
 import { configureSvgSize } from '../../setupGraphViewbox.js';

@@ -13,7 +13,7 @@ import { configureSvgSize } from '../../setupGraphViewbox.js';
 export const draw = (_text: string, id: string, version: string) => {
  log.debug('rendering svg for syntax error\n');
  const svg: SVG = selectSvgElement(id);
-  const g: SVGGroup = svg.append('g');
+  const g: Group = svg.append('g');

  svg.attr('viewBox', '0 0 2412 512');
  configureSvgSize(svg, 100, 512, true);
--- a/packages/mermaid/src/diagrams/flowchart/elk/detector.ts
+++ b/packages/mermaid/src/diagrams/flowchart/elk/detector.ts
@@ -1,26 +1,34 @@
 import type {
+  ExternalDiagramDefinition,
  DiagramDetector,
  DiagramLoader,
-  ExternalDiagramDefinition,
 } from '../../../diagram-api/types.js';
+import { log } from '../../../logger.js';

 const id = 'flowchart-elk';

-const detector: DiagramDetector = (txt, config = {}): boolean => {
+const detector: DiagramDetector = (txt, config): boolean => {
  if (
    // If diagram explicitly states flowchart-elk
    /^\s*flowchart-elk/.test(txt) ||
    // If a flowchart/graph diagram has their default renderer set to elk
    (/^\s*flowchart|graph/.test(txt) && config?.flowchart?.defaultRenderer === 'elk')
  ) {
-    config.layout = 'elk';
+    // This will log at the end, hopefully.
+    setTimeout(
+      () =>
+        log.warn(
+          'flowchart-elk was moved to an external package in Mermaid v11. Please refer [release notes](link) for more details. This diagram will be rendered using `dagre` layout as a fallback.'
+        ),
+      500
+    );
    return true;
  }
  return false;
 };

 const loader: DiagramLoader = async () => {
-  const { diagram } = await import('../flowDiagram.js');
+  const { diagram } = await import('../flowDiagram-v2.js');
  return { id, diagram };
 };

--- a/packages/mermaid/src/diagrams/flowchart/flowDetector-v2.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDetector-v2.ts
@@ -1,8 +1,5 @@
-import type {
-  DiagramDetector,
-  DiagramLoader,
-  ExternalDiagramDefinition,
-} from '../../diagram-api/types.js';
+import type { DiagramDetector, DiagramLoader } from '../../diagram-api/types.js';
+import type { ExternalDiagramDefinition } from '../../diagram-api/types.js';

 const id = 'flowchart-v2';

@@ -22,7 +19,7 @@ const detector: DiagramDetector = (txt, config) => {
 };

 const loader: DiagramLoader = async () => {
-  const { diagram } = await import('./flowDiagram.js');
+  const { diagram } = await import('./flowDiagram-v2.js');
  return { id, diagram };
 };

--- a/packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts
@@ -0,0 +1,23 @@
+// @ts-ignore: JISON doesn't support types
+import flowParser from './parser/flow.jison';
+import flowDb from './flowDb.js';
+import renderer from './flowRenderer-v3-unified.js';
+import flowStyles from './styles.js';
+import type { MermaidConfig } from '../../config.type.js';
+import { setConfig } from '../../diagram-api/diagramAPI.js';
+
+export const diagram = {
+  parser: flowParser,
+  db: flowDb,
+  renderer,
+  styles: flowStyles,
+  init: (cnf: MermaidConfig) => {
+    if (!cnf.flowchart) {
+      cnf.flowchart = {};
+    }
+    cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+    setConfig({ flowchart: { arrowMarkerAbsolute: cnf.arrowMarkerAbsolute } });
+    flowDb.clear();
+    flowDb.setGen('gen-2');
+  },
+};
--- a/packages/mermaid/src/diagrams/flowchart/flowDiagram.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDiagram.ts
@@ -1,10 +1,10 @@
-import type { MermaidConfig } from '../../config.type.js';
-import { setConfig } from '../../diagram-api/diagramAPI.js';
-import flowDb from './flowDb.js';
-import renderer from './flowRenderer-v3-unified.js';
 // @ts-ignore: JISON doesn't support types
 import flowParser from './parser/flow.jison';
+import flowDb from './flowDb.js';
+import renderer from './flowRenderer-v3-unified.js';
 import flowStyles from './styles.js';
+import type { MermaidConfig } from '../../config.type.js';
+import { setConfig } from '../../diagram-api/diagramAPI.js';

 export const diagram = {
  parser: flowParser,
@@ -15,9 +15,6 @@ export const diagram = {
    if (!cnf.flowchart) {
      cnf.flowchart = {};
    }
-    if (cnf.layout) {
-      setConfig({ layout: cnf.layout });
-    }
    cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
    setConfig({ flowchart: { arrowMarkerAbsolute: cnf.arrowMarkerAbsolute } });
    flowDb.clear();
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts
@@ -2,8 +2,8 @@ import { select } from 'd3';
 import { getConfig } from '../../diagram-api/diagramAPI.js';
 import type { DiagramStyleClassDef } from '../../diagram-api/types.js';
 import { log } from '../../logger.js';
-import { getDiagramElement } from '../../rendering-util/insertElementsForSize.js';
-import { getRegisteredLayoutAlgorithm, render } from '../../rendering-util/render.js';
+import { getDiagramElements } from '../../rendering-util/insertElementsForSize.js';
+import { render } from '../../rendering-util/render.js';
 import { setupViewPortForSVG } from '../../rendering-util/setupViewPortForSVG.js';
 import type { LayoutData } from '../../rendering-util/types.js';
 import utils from '../../utils.js';
@@ -35,17 +35,12 @@ export const draw = async function (text: string, id: string, _version: string,
  log.debug('Before getData: ');
  const data4Layout = diag.db.getData() as LayoutData;
  log.debug('Data: ', data4Layout);
-  // Create the root SVG
-  const svg = getDiagramElement(id, securityLevel);
+  // Create the root SVG - the element is the div containing the SVG element
+  const { element, svg } = getDiagramElements(id, securityLevel);
  const direction = getDirection();

  data4Layout.type = diag.type;
-  data4Layout.layoutAlgorithm = getRegisteredLayoutAlgorithm(layout);
-  if (data4Layout.layoutAlgorithm === 'dagre' && layout === 'elk') {
-    log.warn(
-      'flowchart-elk was moved to an external package in Mermaid v11. Please refer [release notes](https://github.com/mermaid-js/mermaid/releases/tag/v11.0.0) for more details. This diagram will be rendered using `dagre` layout as a fallback.'
-    );
-  }
+  data4Layout.layoutAlgorithm = layout;
  data4Layout.direction = direction;
  data4Layout.nodeSpacing = conf?.nodeSpacing || 50;
  data4Layout.rankSpacing = conf?.rankSpacing || 50;
@@ -53,8 +48,8 @@ export const draw = async function (text: string, id: string, _version: string,

  data4Layout.diagramId = id;
  log.debug('REF1:', data4Layout);
-  await render(data4Layout, svg);
-  const padding = data4Layout.config.flowchart?.diagramPadding ?? 8;
+  await render(data4Layout, svg, element);
+  const padding = data4Layout.config.flowchart?.padding ?? 8;
  utils.insertTitle(
    svg,
    'flowchartTitleText',
--- a/packages/mermaid/src/diagrams/info/infoRenderer.ts
+++ b/packages/mermaid/src/diagrams/info/infoRenderer.ts
@@ -1,7 +1,7 @@
-import type { DrawDefinition, SVG, SVGGroup } from '../../diagram-api/types.js';
 import { log } from '../../logger.js';
-import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
+import type { DrawDefinition, Group, SVG } from '../../diagram-api/types.js';
+import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';

 /**
 * Draws a an info picture in the tag with id: id based on the graph definition in text.
@@ -16,7 +16,7 @@ const draw: DrawDefinition = (text, id, version) => {
  const svg: SVG = selectSvgElement(id);
  configureSvgSize(svg, 100, 400, true);

-  const group: SVGGroup = svg.append('g');
+  const group: Group = svg.append('g');
  group
    .append('text')
    .attr('x', 100)
--- a/packages/mermaid/src/diagrams/packet/renderer.ts
+++ b/packages/mermaid/src/diagrams/packet/renderer.ts
@@ -1,6 +1,6 @@
 import type { Diagram } from '../../Diagram.js';
 import type { PacketDiagramConfig } from '../../config.type.js';
-import type { DiagramRenderer, DrawDefinition, SVG, SVGGroup } from '../../diagram-api/types.js';
+import type { DiagramRenderer, DrawDefinition, Group, SVG } from '../../diagram-api/types.js';
 import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
 import type { PacketDB, PacketWord } from './types.js';
@@ -39,7 +39,7 @@ const drawWord = (
  rowNumber: number,
  { rowHeight, paddingX, paddingY, bitWidth, bitsPerRow, showBits }: Required<PacketDiagramConfig>
 ) => {
-  const group: SVGGroup = svg.append('g');
+  const group: Group = svg.append('g');
  const wordY = rowNumber * (rowHeight + paddingY) + paddingY;
  for (const block of word) {
    const blockX = (block.start % bitsPerRow) * bitWidth + 1;
--- a/packages/mermaid/src/diagrams/pie/pieRenderer.ts
+++ b/packages/mermaid/src/diagrams/pie/pieRenderer.ts
@@ -1,13 +1,13 @@
 import type d3 from 'd3';
-import { arc, pie as d3pie, scaleOrdinal } from 'd3';
-import type { MermaidConfig, PieDiagramConfig } from '../../config.type.js';
-import { getConfig } from '../../diagram-api/diagramAPI.js';
-import type { DrawDefinition, SVG, SVGGroup } from '../../diagram-api/types.js';
+import { scaleOrdinal, pie as d3pie, arc } from 'd3';
 import { log } from '../../logger.js';
-import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
+import { getConfig } from '../../diagram-api/diagramAPI.js';
 import { cleanAndMerge, parseFontSize } from '../../utils.js';
+import type { DrawDefinition, Group, SVG } from '../../diagram-api/types.js';
 import type { D3Section, PieDB, Sections } from './pieTypes.js';
+import type { MermaidConfig, PieDiagramConfig } from '../../config.type.js';
+import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';

 const createPieArcs = (sections: Sections): d3.PieArcDatum<D3Section>[] => {
  // Compute the position of each group on the pie:
@@ -46,7 +46,7 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
  const height = 450;
  const pieWidth: number = height;
  const svg: SVG = selectSvgElement(id);
-  const group: SVGGroup = svg.append('g');
+  const group: Group = svg.append('g');
  group.attr('transform', 'translate(' + pieWidth / 2 + ',' + height / 2 + ')');

  const { themeVariables } = globalConfig;
--- a/packages/mermaid/src/diagrams/requirement/requirementRenderer.js
+++ b/packages/mermaid/src/diagrams/requirement/requirementRenderer.js
@@ -1,11 +1,11 @@
 import { line, select } from 'd3';
 import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
 import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
-import { getConfig } from '../../diagram-api/diagramAPI.js';
 import { log } from '../../logger.js';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
 import common from '../common/common.js';
 import markers from './requirementMarkers.js';
+import { getConfig } from '../../diagram-api/diagramAPI.js';

 let conf = {};
 let relCnt = 0;
--- a/packages/mermaid/src/diagrams/state/dataFetcher.js
+++ b/packages/mermaid/src/diagrams/state/dataFetcher.js
@@ -166,11 +166,43 @@ function insertOrUpdateNode(nodes, nodeData, classes) {
 * @returns {string}
 */
 function getClassesFromDbInfo(dbInfoItem) {
-  return dbInfoItem?.classes?.join(' ') ?? '';
+  if (dbInfoItem === undefined || dbInfoItem === null) {
+    return '';
+  } else {
+    if (dbInfoItem.classes) {
+      let classStr = '';
+      // for each class in classes, add it to the string as comma separated
+      for (let i = 0; i < dbInfoItem.classes.length; i++) {
+        //do not add comma for the last class
+        if (i === dbInfoItem.classes.length - 1) {
+          classStr += dbInfoItem.classes[i];
+        }
+        //add comma for all other classes
+        else {
+          classStr += dbInfoItem.classes[i] + ' ';
+        }
+      }
+      return classStr;
+    } else {
+      return '';
+    }
+  }
 }
-
+/**
+ * Get classes from the db for the info item.
+ * If there aren't any or if dbInfoItem isn't defined, return an empty string.
+ * Else create 1 string from the list of classes found
+ */
 function getStylesFromDbInfo(dbInfoItem) {
-  return dbInfoItem?.styles ?? [];
+  if (dbInfoItem === undefined || dbInfoItem === null) {
+    return;
+  } else {
+    if (dbInfoItem.styles) {
+      return dbInfoItem.styles;
+    } else {
+      return [];
+    }
+  }
 }

 export const dataFetcher = (
@@ -192,10 +224,10 @@ export const dataFetcher = (

  if (itemId !== 'root') {
    let shape = SHAPE_STATE;
-    // The if === true / false can be removed if we can guarantee that the parsedItem.start is always a boolean
    if (parsedItem.start === true) {
      shape = SHAPE_START;
-    } else if (parsedItem.start === false) {
+    }
+    if (parsedItem.start === false) {
      shape = SHAPE_END;
    }
    if (parsedItem.type !== DEFAULT_STATE_TYPE) {
--- a/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts
+++ b/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts
@@ -1,7 +1,7 @@
 import { getConfig } from '../../diagram-api/diagramAPI.js';
 import type { DiagramStyleClassDef } from '../../diagram-api/types.js';
 import { log } from '../../logger.js';
-import { getDiagramElement } from '../../rendering-util/insertElementsForSize.js';
+import { getDiagramElements } from '../../rendering-util/insertElementsForSize.js';
 import { render } from '../../rendering-util/render.js';
 import { setupViewPortForSVG } from '../../rendering-util/setupViewPortForSVG.js';
 import type { LayoutData } from '../../rendering-util/types.js';
@@ -55,7 +55,7 @@ export const draw = async function (text: string, id: string, _version: string,
  const data4Layout = diag.db.getData() as LayoutData;

  // Create the root SVG - the element is the div containing the SVG element
-  const svg = getDiagramElement(id, securityLevel);
+  const { element, svg } = getDiagramElements(id, securityLevel);

  data4Layout.type = diag.type;
  data4Layout.layoutAlgorithm = layout;
@@ -67,10 +67,10 @@ export const draw = async function (text: string, id: string, _version: string,
  data4Layout.markers = ['barb'];
  data4Layout.diagramId = id;
  // console.log('REF1:', data4Layout);
-  await render(data4Layout, svg);
+  await render(data4Layout, svg, element);
  const padding = 8;
  utils.insertTitle(
-    svg,
+    element,
    'statediagramTitleText',
    conf?.titleTopMargin ?? 25,
    diag.db.getDiagramTitle()
--- a/packages/mermaid/src/diagrams/timeline/parser/timeline.jison
+++ b/packages/mermaid/src/diagrams/timeline/parser/timeline.jison
@@ -18,7 +18,7 @@
 \#[^\n]*                /* skip comments */

 "timeline"               return 'timeline';
-"title"\s[^\n]+       return 'title';
+"title"\s[^\n;]+       return 'title';
 accTitle\s*":"\s*                                               { this.begin("acc_title");return 'acc_title'; }
 <acc_title>(?!\n|;|#)*[^\n]*                                    { this.popState(); return "acc_title_value"; }
 accDescr\s*":"\s*                                               { this.begin("acc_descr");return 'acc_descr'; }
@@ -26,11 +26,11 @@ accDescr\s*":"\s*                                               { this.begin("ac
 accDescr\s*"{"\s*                                { this.begin("acc_descr_multiline");}
 <acc_descr_multiline>[\}]                       { this.popState(); }
 <acc_descr_multiline>[^\}]*                     return "acc_descr_multiline_value";
-"section"\s[^:\n]+    return 'section';
+"section"\s[^:\n;]+    return 'section';

 // event starting with "==>" keyword
-":"\s[^:\n]+        return 'event';
-[^#:\n]+               return 'period';
+":"\s[^:\n;]+        return 'event';
+[^#:\n;]+               return 'period';


 <<EOF>>                 return 'EOF';
--- a/packages/mermaid/src/diagrams/timeline/timeline.spec.js
+++ b/packages/mermaid/src/diagrams/timeline/timeline.spec.js
@@ -1,7 +1,7 @@
-import { setLogLevel } from '../../diagram-api/diagramAPI.js';
-import * as commonDb from '../common/commonDb.js';
 import { parser as timeline } from './parser/timeline.jison';
 import * as timelineDB from './timelineDb.js';
+import * as commonDb from '../common/commonDb.js';
+import { setLogLevel } from '../../diagram-api/diagramAPI.js';

 describe('when parsing a timeline ', function () {
  beforeEach(function () {
@@ -10,7 +10,7 @@ describe('when parsing a timeline ', function () {
    setLogLevel('trace');
  });
  describe('Timeline', function () {
-    it('should handle a simple section definition abc-123', function () {
+    it('TL-1 should handle a simple section definition abc-123', function () {
      let str = `timeline
    section abc-123`;

@@ -18,7 +18,7 @@ describe('when parsing a timeline ', function () {
      expect(timelineDB.getSections()).to.deep.equal(['abc-123']);
    });

-    it('should handle a simple section and only two tasks', function () {
+    it('TL-2 should handle a simple section and only two tasks', function () {
      let str = `timeline
    section abc-123
    task1
@@ -30,7 +30,7 @@ describe('when parsing a timeline ', function () {
      });
    });

-    it('should handle a two section and two coressponding tasks', function () {
+    it('TL-3 should handle a two section and two coressponding tasks', function () {
      let str = `timeline
    section abc-123
    task1
@@ -51,7 +51,7 @@ describe('when parsing a timeline ', function () {
      });
    });

-    it('should handle a section, and task and its events', function () {
+    it('TL-4 should handle a section, and task and its events', function () {
      let str = `timeline
    section abc-123
      task1: event1
@@ -75,7 +75,7 @@ describe('when parsing a timeline ', function () {
      });
    });

-    it('should handle a section, and task and its multi line events', function () {
+    it('TL-5 should handle a section, and task and its multi line events', function () {
      let str = `timeline
    section abc-123
      task1: event1
@@ -100,25 +100,7 @@ describe('when parsing a timeline ', function () {
      });
    });

-    it('should handle a title, section, task, and events with semicolons', function () {
-      let str = `timeline
-      title ;my;title;
-      section ;a;bc-123;
-      ;ta;sk1;: ;ev;ent1; : ;ev;ent2; : ;ev;ent3;
-   `;
-      timeline.parse(str);
-      expect(commonDb.getDiagramTitle()).equal(';my;title;');
-      expect(timelineDB.getSections()).to.deep.equal([';a;bc-123;']);
-      expect(timelineDB.getTasks()[0].events).toMatchInlineSnapshot(`
-        [
-          ";ev;ent1; ",
-          ";ev;ent2; ",
-          ";ev;ent3;",
-        ]
-      `);
-    });
-
-    it('should handle a title, section, task, and events with hashtags', function () {
+    it('TL-6 should handle a title, section, task, and events with hashtags', function () {
      let str = `timeline
      title #my#title#
      section #a#bc-123#
@@ -128,13 +110,9 @@ describe('when parsing a timeline ', function () {
      expect(commonDb.getDiagramTitle()).equal('#my#title#');
      expect(timelineDB.getSections()).to.deep.equal(['#a#bc-123#']);
      expect(timelineDB.getTasks()[0].task).equal('task1');
-      expect(timelineDB.getTasks()[0].events).toMatchInlineSnapshot(`
-        [
-          "#ev#ent1# ",
-          "#ev#ent2# ",
-          "#ev#ent3#",
-        ]
-      `);
+      expect(timelineDB.getTasks()[0].events[0]).equal('#ev#ent1# ');
+      expect(timelineDB.getTasks()[0].events[1]).equal('#ev#ent2# ');
+      expect(timelineDB.getTasks()[0].events[2]).equal('#ev#ent3#');
    });
  });
 });
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts
@@ -1,4 +1,4 @@
-import type { SVGGroup } from '../../../../../diagram-api/types.js';
+import type { Group } from '../../../../../diagram-api/types.js';
 import type {
  AxisDataType,
  ChartComponent,
@@ -25,7 +25,7 @@ export function getAxis(
  data: AxisDataType,
  axisConfig: XYChartAxisConfig,
  axisThemeConfig: XYChartAxisThemeConfig,
-  tmpSVGGroup: SVGGroup
+  tmpSVGGroup: Group
 ): Axis {
  const textDimensionCalculator = new TextDimensionCalculatorWithFont(tmpSVGGroup);
  if (isBandAxisData(data)) {
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/chartTitle.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/chartTitle.ts
@@ -1,13 +1,13 @@
-import type { SVGGroup } from '../../../../diagram-api/types.js';
+import type { Group } from '../../../../diagram-api/types.js';
 import type {
  BoundingRect,
  ChartComponent,
  Dimension,
  DrawableElem,
  Point,
-  XYChartConfig,
  XYChartData,
  XYChartThemeConfig,
+  XYChartConfig,
 } from '../interfaces.js';
 import type { TextDimensionCalculator } from '../textDimensionCalculator.js';
 import { TextDimensionCalculatorWithFont } from '../textDimensionCalculator.js';
@@ -84,7 +84,7 @@ export function getChartTitleComponent(
  chartConfig: XYChartConfig,
  chartData: XYChartData,
  chartThemeConfig: XYChartThemeConfig,
-  tmpSVGGroup: SVGGroup
+  tmpSVGGroup: Group
 ): ChartComponent {
  const textDimensionCalculator = new TextDimensionCalculatorWithFont(tmpSVGGroup);
  return new ChartTitle(textDimensionCalculator, chartConfig, chartData, chartThemeConfig);
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts
@@ -1,4 +1,4 @@
-import type { SVGGroup } from '../../../diagram-api/types.js';
+import type { Group } from '../../../diagram-api/types.js';
 import type { DrawableElem, XYChartConfig, XYChartData, XYChartThemeConfig } from './interfaces.js';
 import { Orchestrator } from './orchestrator.js';

@@ -7,7 +7,7 @@ export class XYChartBuilder {
    config: XYChartConfig,
    chartData: XYChartData,
    chartThemeConfig: XYChartThemeConfig,
-    tmpSVGGroup: SVGGroup
+    tmpSVGGroup: Group
  ): DrawableElem[] {
    const orchestrator = new Orchestrator(config, chartData, chartThemeConfig, tmpSVGGroup);
    return orchestrator.getDrawableElement();
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/orchestrator.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/orchestrator.ts
@@ -1,9 +1,3 @@
-import type { SVGGroup } from '../../../diagram-api/types.js';
-import type { Axis } from './components/axis/index.js';
-import { getAxis } from './components/axis/index.js';
-import { getChartTitleComponent } from './components/chartTitle.js';
-import type { Plot } from './components/plot/index.js';
-import { getPlotComponent } from './components/plot/index.js';
 import type {
  ChartComponent,
  DrawableElem,
@@ -12,6 +6,12 @@ import type {
  XYChartThemeConfig,
 } from './interfaces.js';
 import { isBarPlot } from './interfaces.js';
+import type { Axis } from './components/axis/index.js';
+import { getAxis } from './components/axis/index.js';
+import { getChartTitleComponent } from './components/chartTitle.js';
+import type { Plot } from './components/plot/index.js';
+import { getPlotComponent } from './components/plot/index.js';
+import type { Group } from '../../../diagram-api/types.js';

 export class Orchestrator {
  private componentStore: {
@@ -24,7 +24,7 @@ export class Orchestrator {
    private chartConfig: XYChartConfig,
    private chartData: XYChartData,
    chartThemeConfig: XYChartThemeConfig,
-    tmpSVGGroup: SVGGroup
+    tmpSVGGroup: Group
  ) {
    this.componentStore = {
      title: getChartTitleComponent(chartConfig, chartData, chartThemeConfig, tmpSVGGroup),
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/textDimensionCalculator.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/textDimensionCalculator.ts
@@ -1,13 +1,13 @@
-import type { SVGGroup } from '../../../diagram-api/types.js';
-import { computeDimensionOfText } from '../../../rendering-util/createText.js';
 import type { Dimension } from './interfaces.js';
+import { computeDimensionOfText } from '../../../rendering-util/createText.js';
+import type { Group } from '../../../diagram-api/types.js';

 export interface TextDimensionCalculator {
  getMaxDimension(texts: string[], fontSize: number): Dimension;
 }

 export class TextDimensionCalculatorWithFont implements TextDimensionCalculator {
-  constructor(private parentGroup: SVGGroup) {}
+  constructor(private parentGroup: Group) {}
  getMaxDimension(texts: string[], fontSize: number): Dimension {
    if (!this.parentGroup) {
      return {
--- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts
+++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts
@@ -1,9 +1,3 @@
-import * as configApi from '../../config.js';
-import defaultConfig from '../../defaultConfig.js';
-import type { SVGGroup } from '../../diagram-api/types.js';
-import { getThemeVariables } from '../../themes/theme-default.js';
-import { cleanAndMerge } from '../../utils.js';
-import { sanitizeText } from '../common/common.js';
 import {
  clear as commonClear,
  getAccDescription,
@@ -13,6 +7,11 @@ import {
  setAccTitle,
  setDiagramTitle,
 } from '../common/commonDb.js';
+import * as configApi from '../../config.js';
+import defaultConfig from '../../defaultConfig.js';
+import { getThemeVariables } from '../../themes/theme-default.js';
+import { cleanAndMerge } from '../../utils.js';
+import { sanitizeText } from '../common/common.js';
 import { XYChartBuilder } from './chartBuilder/index.js';
 import type {
  DrawableElem,
@@ -22,10 +21,11 @@ import type {
  XYChartThemeConfig,
 } from './chartBuilder/interfaces.js';
 import { isBandAxisData, isLinearAxisData } from './chartBuilder/interfaces.js';
+import type { Group } from '../../diagram-api/types.js';

 let plotIndex = 0;

-let tmpSVGGroup: SVGGroup;
+let tmpSVGGroup: Group;

 let xyChartConfig: XYChartConfig = getChartDefaultConfig();
 let xyChartThemeConfig: XYChartThemeConfig = getChartDefaultThemeConfig();
@@ -75,7 +75,7 @@ function textSanitizer(text: string) {
  return sanitizeText(text.trim(), config);
 }

-function setTmpSVGG(SVGG: SVGGroup) {
+function setTmpSVGG(SVGG: Group) {
  tmpSVGGroup = SVGG;
 }
 function setOrientation(orientation: string) {
--- a/packages/mermaid/src/docs/.vitepress/components/ProductHuntBadge.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/ProductHuntBadge.vue
@@ -1,14 +0,0 @@
-<template>
-  <div class="-mt-6 mb-8">
-    <a
-      href="https://www.producthunt.com/posts/mermaid-ai-2?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid&#0045;ai&#0045;2"
-      target="_blank"
-      ><img
-        src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=465568&theme=light"
-        alt="Mermaid&#0032;AI - Maximize&#0032;your&#0032;diagramming&#0032;efficiency&#0032;with&#0032;Mermaid&#0032;AI | Product Hunt"
-        style="width: 250px; height: 54px"
-        width="250"
-        height="54"
-    /></a>
-  </div>
-</template>
--- a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
@@ -1,65 +1,26 @@
-<script setup lang="ts">
-import { ref, onMounted } from 'vue';
-
-interface Taglines {
-  label: string;
-  url: string;
-}
-
-const taglines: Taglines[] = [
-  {
-    label: 'Use the Visual Editor in Mermaid Chart to design and build diagrams',
-    url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=visual_editor',
-  },
-  {
-    label: 'Diagram live with teammates in Mermaid Chart',
-    url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=teams',
-  },
-  {
-    label: 'Skip the rough draft with Mermaid AI in Mermaid Chart',
-    url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=mermaid_ai',
-  },
-];
-
-let index = ref(Math.floor(Math.random() * taglines.length));
-onMounted(() => {
-  setInterval(() => {
-    index.value = (index.value + 1) % taglines.length;
-  }, 60_000);
-});
-</script>
-
 <template>
-  <div class="mb-4 w-full top-bar bg-gradient-to-r from-[#bd34fe] to-[#ff3670] flex p-1">
-    <p class="w-full tracking-wide fade-text">
-      <transition name="fade" mode="out-in">
-        <a
-          :key="index"
-          :href="taglines[index].url"
-          target="_blank"
-          class="unstyled flex justify-center items-center gap-4 text-white tracking-wide plausible-event-name=bannerClick"
+  <div
+    class="w-full top-bar bg-gradient-to-r from-[#bd34fe] to-[#ff3670] flex items-center text-center justify-center p-1 text-white"
+  >
+    <p class="flex-grow text-center tracking-wide text-text">
+      <a
+        href="https://www.mermaidchart.com/landing"
+        target="_blank"
+        class="unstyled flex-grow tracking-wide plausible-event-name=bannerClick"
+      >
+        <span class="text-primary-50 font-semibold">{{
+          [
+            'Try diagramming with ChatGPT at Mermaid Chart',
+            'Try Mermaid’s Visual Editor at Mermaid Chart',
+            'Enjoy live collaboration with teammates at Mermaid Chart',
+          ][Math.floor(Math.random() * 3)]
+        }}</span>
+        <button
+          class="ml-4 rounded bg-[#111113] p-1 px-2 text-sm font-semibold tracking-wide text-white"
        >
-          <span class="font-semibold">{{ taglines[index].label }}</span>
-          <button class="rounded bg-[#111113] p-1 px-2 text-sm font-semibold tracking-wide">
-            Try it now
-          </button>
-        </a>
-      </transition>
+          Try it now
+        </button>
+      </a>
    </p>
  </div>
 </template>
-
-<style>
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 1s;
-}
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-.fade-enter-to,
-.fade-leave-from {
-  opacity: 1;
-}
-</style>
--- a/packages/mermaid/src/docs/.vitepress/theme/index.ts
+++ b/packages/mermaid/src/docs/.vitepress/theme/index.ts
@@ -11,11 +11,11 @@ import HomePage from '../components/HomePage.vue';
 import TopBar from '../components/TopBar.vue';
 import { getRedirect } from './redirect.js';
 // @ts-ignore Type not available
+import { h } from 'vue';
+import Theme from 'vitepress/theme';
+import '../style/main.css';
 import 'uno.css';
 import type { EnhanceAppContext } from 'vitepress';
-import Theme from 'vitepress/theme';
-import { h } from 'vue';
-import '../style/main.css';

 export default {
  ...DefaultTheme,
@@ -24,7 +24,6 @@ export default {
      // Keeping this as comment as it took a lot of time to figure out how to add a component to the top bar.
      'home-hero-before': () => h(TopBar),
      'home-features-after': () => h(HomePage),
-      'doc-before': () => h(TopBar),
    });
  },
  enhanceApp({ app, router }: EnhanceAppContext) {
--- a/packages/mermaid/src/docs/ecosystem/integrations-community.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md
@@ -54,7 +54,6 @@ To add an integration to this list, see the [Integrations - create page](./integ
 - [MonsterWriter](https://www.monsterwriter.com/) ✅
 - [Joplin](https://joplinapp.org) ✅
 - [LiveBook](https://livebook.dev) ✅
- [Slidev](https://sli.dev) ✅
 - [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) ✅
 - [Mermaid Flow Visual Editor](https://www.mermaidflow.app) ✅
 - [Mermerd](https://github.com/KarnerTh/mermerd)
@@ -130,7 +129,7 @@ Communication tools and platforms
 ### Wikis

 - [DokuWiki](https://dokuwiki.org)
-  - [ComboStrap](https://combostrap.com/utility/create-diagram-with-mermaid-vh3ab9yj)
+  - [ComboStrap](https://combostrap.com/mermaid)
  - [Mermaid Plugin](https://www.dokuwiki.org/plugin:mermaid)
 - [Foswiki](https://foswiki.org)
  - [Mermaid Plugin](https://foswiki.org/Extensions/MermaidPlugin)
--- a/packages/mermaid/src/docs/ecosystem/mermaid-chart.md
+++ b/packages/mermaid/src/docs/ecosystem/mermaid-chart.md
@@ -6,7 +6,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun

 <br />

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

 ## About

--- a/packages/mermaid/src/docs/news/blog.md
+++ b/packages/mermaid/src/docs/news/blog.md
@@ -1,29 +1,5 @@
 # Blog

-## [Mermaid AI Is Here to Change the Game For Diagram Creation](https://www.mermaidchart.com/blog/posts/mermaid-ai-is-here-to-change-the-game-for-diagram-creation/)
-
-22 July 2024 · 5 mins
-
-The Mermaid AI chat interface
-
-## [How to Make a Sequence Diagram with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-sequence-diagram-in-mermaid-chart-step-by-step-guide/)
-
-8 July 2024 · 6 mins
-
-Sequence diagrams are important for communicating complex systems in a clear and concise manner.
-
-## [How to Use the New “Comments” Feature in Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-use-the-new-comments-feature-in-mermaid-chart/)
-
-2 July 2024 · 3 mins
-
-How to Use the New Comments Feature in Mermaid Chart
-
-## [How to Use the official Mermaid Chart for Confluence app](https://www.mermaidchart.com/blog/posts/how-to-use-the-official-mermaid-chart-for-confluence-app/)
-
-21 May 2024 · 4 mins
-
-It doesn’t matter if you’re a data enthusiast, software engineer, or visual storyteller; our Confluence app can allow you to embed Mermaid Chart diagrams — and dynamically edit them — within your Confluence pages.
-
 ## [How to Choose the Right Documentation Software](https://www.mermaidchart.com/blog/posts/how-to-choose-the-right-documentation-software/)

 7 May 2024 · 5 mins
--- a/packages/mermaid/src/docs/package.json
+++ b/packages/mermaid/src/docs/package.json
@@ -1,7 +1,6 @@
 {
-  "name": "@mermaid-js/docs",
+  "name": "docs",
  "private": true,
-  "version": "0.0.1",
  "type": "module",
  "scripts": {
    "dev": "vitepress --port 3333 --open",
--- a/packages/mermaid/src/docs/syntax/gantt.md
+++ b/packages/mermaid/src/docs/syntax/gantt.md
@@ -114,7 +114,7 @@ The `title` is an _optional_ string to be displayed at the top of the Gantt char
 The `excludes` is an _optional_ attribute that accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".
 These date will be marked on the graph, and be excluded from the duration calculation of tasks. Meaning that if there are excluded dates during a task interval, the number of 'skipped' days will be added to the end of the task to ensure the duration is as specified in the code.

-#### Weekend (v\11.0.0+)
+#### Weekend (v\<MERMAID_RELEASE_VERSION>+)

 When excluding weekends, it is possible to configure the weekends to be either Friday and Saturday or Saturday and Sunday. By default weekends are Saturday and Sunday.
 To define the weekend start day, there is an _optional_ attribute `weekend` that can be added in a new line followed by either `friday` or `saturday`.
--- a/packages/mermaid/src/docs/syntax/gitgraph.md
+++ b/packages/mermaid/src/docs/syntax/gitgraph.md
@@ -571,7 +571,7 @@ Usage example:
       commit
 ```

-### Bottom to Top (`BT:`) (v11.0.0+)
+### Bottom to Top (`BT:`) (v<MERMAID_RELEASE_VERSION>+)

 In `BT` (**Bottom-to-Top**) orientation, the commits run from bottom to top of the graph and branches are arranged side-by-side.

--- a/packages/mermaid/src/docs/syntax/packet.md
+++ b/packages/mermaid/src/docs/syntax/packet.md
@@ -1,4 +1,4 @@
-# Packet Diagram (v11.0.0+)
+# Packet Diagram (v<MERMAID_RELEASE_VERSION>+)

 ## Introduction

--- a/packages/mermaid/src/docs/syntax/sequenceDiagram.md
+++ b/packages/mermaid/src/docs/syntax/sequenceDiagram.md
@@ -143,18 +143,18 @@ Messages can be of two displayed either solid or with a dotted line.

 There are ten types of arrows currently supported:

-| Type     | Description                                          |
-| -------- | ---------------------------------------------------- |
-| `->`     | Solid line without arrow                             |
-| `-->`    | Dotted line without arrow                            |
-| `->>`    | Solid line with arrowhead                            |
-| `-->>`   | Dotted line with arrowhead                           |
-| `<<->>`  | Solid line with bidirectional arrowheads (v11.0.0+)  |
-| `<<-->>` | Dotted line with bidirectional arrowheads (v11.0.0+) |
-| `-x`     | Solid line with a cross at the end                   |
-| `--x`    | Dotted line with a cross at the end.                 |
-| `-)`     | Solid line with an open arrow at the end (async)     |
-| `--)`    | Dotted line with a open arrow at the end (async)     |
+| Type     | Description                                                             |
+| -------- | ----------------------------------------------------------------------- |
+| `->`     | Solid line without arrow                                                |
+| `-->`    | Dotted line without arrow                                               |
+| `->>`    | Solid line with arrowhead                                               |
+| `-->>`   | Dotted line with arrowhead                                              |
+| `<<->>`  | Solid line with bidirectional arrowheads (v<MERMAID_RELEASE_VERSION>+)  |
+| `<<-->>` | Dotted line with bidirectional arrowheads (v<MERMAID_RELEASE_VERSION>+) |
+| `-x`     | Solid line with a cross at the end                                      |
+| `--x`    | Dotted line with a cross at the end.                                    |
+| `-)`     | Solid line with an open arrow at the end (async)                        |
+| `--)`    | Dotted line with a open arrow at the end (async)                        |

 ## Activations

--- a/packages/mermaid/src/internals.ts
+++ b/packages/mermaid/src/internals.ts
@@ -29,5 +29,3 @@ export const internalHelpers = {
  log,
  positionEdgeLabel,
 };
-
-export type InternalHelpers = typeof internalHelpers;
--- a/packages/mermaid/src/mermaid.ts
+++ b/packages/mermaid/src/mermaid.ts
@@ -4,37 +4,34 @@
 */
 import { dedent } from 'ts-dedent';
 import type { MermaidConfig } from './config.type.js';
-import { detectType, registerLazyLoadedDiagrams } from './diagram-api/detectType.js';
-import { addDiagrams } from './diagram-api/diagram-orchestration.js';
-import { loadRegisteredDiagrams } from './diagram-api/loadDiagram.js';
-import type { ExternalDiagramDefinition, SVG, SVGGroup } from './diagram-api/types.js';
-import type { ParseErrorFunction } from './Diagram.js';
-import type { UnknownDiagramError } from './errors.js';
-import type { InternalHelpers } from './internals.js';
 import { log } from './logger.js';
-import { mermaidAPI } from './mermaidAPI.js';
-import type { LayoutLoaderDefinition, RenderOptions } from './rendering-util/render.js';
-import { registerLayoutLoaders } from './rendering-util/render.js';
-import type { LayoutData } from './rendering-util/types.js';
+import utils from './utils.js';
 import type { ParseOptions, ParseResult, RenderResult } from './types.js';
+import { mermaidAPI } from './mermaidAPI.js';
+import { registerLazyLoadedDiagrams, detectType } from './diagram-api/detectType.js';
+import { loadRegisteredDiagrams } from './diagram-api/loadDiagram.js';
+import type { ParseErrorFunction } from './Diagram.js';
+import { isDetailedError } from './utils.js';
 import type { DetailedError } from './utils.js';
-import utils, { isDetailedError } from './utils.js';
+import type { ExternalDiagramDefinition } from './diagram-api/types.js';
+import type { UnknownDiagramError } from './errors.js';
+import { addDiagrams } from './diagram-api/diagram-orchestration.js';
+import { registerLayoutLoaders } from './rendering-util/render.js';
+import type { LayoutLoaderDefinition } from './rendering-util/render.js';
+import { internalHelpers } from './internals.js';
+import type { LayoutData } from './rendering-util/types.js';

 export type {
+  MermaidConfig,
  DetailedError,
  ExternalDiagramDefinition,
-  InternalHelpers,
-  LayoutData,
-  LayoutLoaderDefinition,
-  MermaidConfig,
  ParseErrorFunction,
+  RenderResult,
  ParseOptions,
  ParseResult,
-  RenderOptions,
-  RenderResult,
-  SVG,
-  SVGGroup,
  UnknownDiagramError,
+  LayoutLoaderDefinition,
+  LayoutData,
 };

 export interface RunOptions {
@@ -435,6 +432,11 @@ export interface Mermaid {
  contentLoaded: typeof contentLoaded;
  setParseErrorHandler: typeof setParseErrorHandler;
  detectType: typeof detectType;
+  /**
+   * Internal helpers for mermaid
+   * @deprecated - This should not be used by external packages, as the definitions will change without notice.
+   */
+  internalHelpers: typeof internalHelpers;
 }

 const mermaid: Mermaid = {
@@ -451,6 +453,7 @@ const mermaid: Mermaid = {
  contentLoaded,
  setParseErrorHandler,
  detectType,
+  internalHelpers,
 };

 export default mermaid;
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -25,7 +25,6 @@ import { preprocessDiagram } from './preprocess.js';
 import { decodeEntities } from './utils.js';
 import { toBase64 } from './utils/base64.js';
 import type { D3Element, ParseOptions, ParseResult, RenderResult } from './types.js';
-import assignWithDepth from './assignWithDepth.js';

 const MAX_TEXTLENGTH = 50_000;
 const MAX_TEXTLENGTH_EXCEEDED_MSG =
@@ -474,10 +473,9 @@ const render = async function (
 };

 /**
- * @param  userOptions - Initial Mermaid options
+ * @param  options - Initial Mermaid options
 */
-function initialize(userOptions: MermaidConfig = {}) {
-  const options = assignWithDepth({}, userOptions);
+function initialize(options: MermaidConfig = {}) {
  // Handle legacy location of font-family configuration
  if (options?.fontFamily && !options.themeVariables?.fontFamily) {
    if (!options.themeVariables) {
--- a/packages/mermaid/src/rendering-util/createText.ts
+++ b/packages/mermaid/src/rendering-util/createText.ts
@@ -1,16 +1,16 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 // @ts-nocheck TODO: Fix types
-import { getConfig } from '$root/diagram-api/diagramAPI.js';
-import common, { hasKatex, renderKatex } from '$root/diagrams/common/common.js';
-import { select } from 'd3';
 import type { MermaidConfig } from '../config.type.js';
-import type { SVGGroup } from '../diagram-api/types.js';
+import type { Group } from '../diagram-api/types.js';
+import { select } from 'd3';
 import type { D3TSpanElement, D3TextElement } from '../diagrams/common/commonTypes.js';
 import { log } from '../logger.js';
 import { markdownToHTML, markdownToLines } from '../rendering-util/handle-markdown-text.js';
 import { decodeEntities } from '../utils.js';
 import { splitLineToFitWidth } from './splitText.js';
 import type { MarkdownLine, MarkdownWord } from './types.js';
+import common, { hasKatex, renderKatex } from '$root/diagrams/common/common.js';
+import { getConfig } from '$root/diagram-api/diagramAPI.js';

 function applyStyle(dom, styleFn) {
  if (styleFn) {
@@ -36,7 +36,6 @@ async function addHtmlSpan(element, node, width, classes, addBackground = false)
  div.style('white-space', 'nowrap');
  div.style('line-height', '1.5');
  div.style('max-width', width + 'px');
-  div.style('text-align', 'center');
  div.attr('xmlns', 'http://www.w3.org/1999/xhtml');
  if (addBackground) {
    div.attr('class', 'labelBkg');
@@ -83,7 +82,7 @@ function computeWidthOfText(parentNode: any, lineHeight: number, line: MarkdownL
 }

 export function computeDimensionOfText(
-  parentNode: SVGGroup,
+  parentNode: Group,
  lineHeight: number,
  text: string
 ): DOMRect | undefined {
--- a/packages/mermaid/src/rendering-util/insertElementsForSize.js
+++ b/packages/mermaid/src/rendering-util/insertElementsForSize.js
@@ -1,7 +1,7 @@
 import { select } from 'd3';
 import { insertNode } from '../dagre-wrapper/nodes.js';

-export const getDiagramElement = (id, securityLevel) => {
+export const getDiagramElements = (id, securityLevel) => {
  let sandboxElement;
  if (securityLevel === 'sandbox') {
    sandboxElement = select('#i' + id);
@@ -15,7 +15,9 @@ export const getDiagramElement = (id, securityLevel) => {

  // Run the renderer. This is what draws the final graph.

-  return svg;
+  // @ts-ignore todo: fix this
+  const element = root.select('#' + id + ' g');
+  return { svg, element };
 };

 export function insertElementsForSize(el, data) {
--- a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
+++ b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
@@ -268,7 +268,7 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
  return { elem, diff };
 };

-export const render = async (data4Layout, svg) => {
+export const render = async (data4Layout, svg, element) => {
  const graph = new graphlib.Graph({
    multigraph: true,
    compound: true,
@@ -289,7 +289,7 @@ export const render = async (data4Layout, svg) => {
    .setDefaultEdgeLabel(function () {
      return {};
    });
-  const element = svg.select('g');
+
  insertMarkers(element, data4Layout.markers, data4Layout.type, data4Layout.diagramId);
  clearNodes();
  clearEdges();
--- a/packages/mermaid/src/rendering-util/render.ts
+++ b/packages/mermaid/src/rendering-util/render.ts
@@ -1,20 +1,5 @@
-import type { SVG } from '$root/diagram-api/types.js';
-import type { InternalHelpers } from '$root/internals.js';
-import { internalHelpers } from '$root/internals.js';
-import { log } from '$root/logger.js';
-import type { LayoutData } from './types.js';
-
-export interface RenderOptions {
-  algorithm?: string;
-}
-
 export interface LayoutAlgorithm {
-  render(
-    layoutData: LayoutData,
-    svg: SVG,
-    helpers: InternalHelpers,
-    options?: RenderOptions
-  ): Promise<void>;
+  render(data4Layout: any, svg: any, element: any, algorithm?: string): any;
 }

 export type LayoutLoader = () => Promise<LayoutAlgorithm>;
@@ -39,33 +24,21 @@ const registerDefaultLayoutLoaders = () => {
      name: 'dagre',
      loader: async () => await import('./layout-algorithms/dagre/index.js'),
    },
+    // {
+    //   name: 'elk',
+    //   loader: async () => await import('../../../mermaid-layout-elk/src/render.js'),
+    // },
  ]);
 };

 registerDefaultLayoutLoaders();

-export const render = async (data4Layout: LayoutData, svg: SVG) => {
+export const render = async (data4Layout: any, svg: any, element: any) => {
  if (!(data4Layout.layoutAlgorithm in layoutAlgorithms)) {
    throw new Error(`Unknown layout algorithm: ${data4Layout.layoutAlgorithm}`);
  }

  const layoutDefinition = layoutAlgorithms[data4Layout.layoutAlgorithm];
  const layoutRenderer = await layoutDefinition.loader();
-  return layoutRenderer.render(data4Layout, svg, internalHelpers, {
-    algorithm: layoutDefinition.algorithm,
-  });
-};
-
-/**
- * Get the registered layout algorithm. If the algorithm is not registered, use the fallback algorithm.
- */
-export const getRegisteredLayoutAlgorithm = (algorithm = '', { fallback = 'dagre' } = {}) => {
-  if (algorithm in layoutAlgorithms) {
-    return algorithm;
-  }
-  if (fallback in layoutAlgorithms) {
-    log.warn(`Layout algorithm ${algorithm} is not registered. Using ${fallback} as fallback.`);
-    return fallback;
-  }
-  throw new Error(`Both layout algorithms ${algorithm} and ${fallback} are not registered.`);
+  return layoutRenderer.render(data4Layout, svg, element, layoutDefinition.algorithm);
 };
--- a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
@@ -19,7 +19,7 @@ const rect = async (parent, node) => {
  const { themeVariables, handDrawnSeed } = siteConfig;
  const { clusterBkg, clusterBorder } = themeVariables;

-  const { labelStyles, nodeStyles, borderStyles, backgroundStyles } = styles2String(node);
+  const { labelStyles, nodeStyles } = styles2String(node);

  // Add outer g element
  const shapeSvg = parent
@@ -79,9 +79,6 @@ const rect = async (parent, node) => {
      log.debug('Rough node insert CXC', roughNode);
      return roughNode;
    }, ':first-child');
-    // Should we affect the options instead of doing this?
-    rect.select('path:nth-child(2)').attr('style', borderStyles.join(';'));
-    rect.select('path').attr('style', backgroundStyles.join(';').replace('fill', 'stroke'));
  } else {
    // add the rect
    rect = shapeSvg.insert('rect', ':first-child');
--- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
@@ -538,27 +538,6 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
      .attr('style', edgeStyles ? edgeStyles.reduce((acc, style) => acc + ';' + style, '') : '');
  }

-  // DEBUG code, DO NOT REMOVE
-  // adds a red circle at each edge coordinate
-  // cornerPoints.forEach((point) => {
-  //   elem
-  //     .append('circle')
-  //     .style('stroke', 'blue')
-  //     .style('fill', 'blue')
-  //     .attr('r', 3)
-  //     .attr('cx', point.x)
-  //     .attr('cy', point.y);
-  // });
-  // lineData.forEach((point) => {
-  //   elem
-  //     .append('circle')
-  //     .style('stroke', 'blue')
-  //     .style('fill', 'blue')
-  //     .attr('r', 3)
-  //     .attr('cx', point.x)
-  //     .attr('cy', point.y);
-  // });
-
  let url = '';
  if (getConfig().flowchart.arrowMarkerAbsolute || getConfig().state.arrowMarkerAbsolute) {
    url =
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts
@@ -103,7 +103,7 @@ export const cylinder = async (parent: SVGAElement, node: Node) => {
          Math.abs(pos.y - (node.y ?? 0)) > (node.height ?? 0) / 2 - ry))
    ) {
      let y = ry * ry * (1 - (x * x) / (rx * rx));
-      if (y > 0) {
+      if (y != 0) {
        y = Math.sqrt(y);
      }
      y = ry - y;
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.ts
@@ -37,8 +37,6 @@ export const styles2String = (node: Node) => {
  const { stylesArray } = compileStyles(node);
  const labelStyles: string[] = [];
  const nodeStyles: string[] = [];
-  const borderStyles: string[] = [];
-  const backgroundStyles: string[] = [];

  stylesArray.forEach((style) => {
    const key = style[0];
@@ -65,22 +63,10 @@ export const styles2String = (node: Node) => {
      labelStyles.push(style.join(':') + ' !important');
    } else {
      nodeStyles.push(style.join(':') + ' !important');
-      if (key.includes('stroke')) {
-        borderStyles.push(style.join(':') + ' !important');
-      }
-      if (key === 'fill') {
-        backgroundStyles.push(style.join(':') + ' !important');
-      }
    }
  });

-  return {
-    labelStyles: labelStyles.join(';'),
-    nodeStyles: nodeStyles.join(';'),
-    stylesArray,
-    borderStyles,
-    backgroundStyles,
-  };
+  return { labelStyles: labelStyles.join(';'), nodeStyles: nodeStyles.join(';') };
 };

 // Striped fill like start or fork nodes in state diagrams
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts
@@ -63,14 +63,7 @@ export const question = async (parent: SVGAElement, node: Node): Promise<SVGAEle
  updateNodeBounds(node, polygon);

  node.intersect = function (point) {
-    log.debug(
-      'APA12 Intersect called SPLIT\npoint:',
-      point,
-      '\nnode:\n',
-      node,
-      '\nres:',
-      intersect.polygon(node, points, point)
-    );
+    log.info('Intersect called SPLIT');
    return intersect.polygon(node, points, point);
  };

--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectWithTitle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectWithTitle.ts
@@ -62,13 +62,13 @@ export const rectWithTitle = async (parent: SVGElement, node: Node) => {
      )
    );

-  //if (evaluate(getConfig()?.flowchart?.htmlLabels)) {
-  const div = descr.children[0];
-  const dv = select(descr);
-  bbox = div.getBoundingClientRect();
-  dv.attr('width', bbox.width);
-  dv.attr('height', bbox.height);
-  // }
+  if (evaluate(getConfig()?.flowchart?.htmlLabels)) {
+    const div = descr.children[0];
+    const dv = select(descr);
+    bbox = div.getBoundingClientRect();
+    dv.attr('width', bbox.width);
+    dv.attr('height', bbox.height);
+  }

  const halfPadding = (node.padding || 0) / 2;
  select(descr).attr(
--- a/packages/mermaid/src/rendering-util/setupViewPortForSVG.ts
+++ b/packages/mermaid/src/rendering-util/setupViewPortForSVG.ts
@@ -22,7 +22,7 @@ export const setupViewPortForSVG = (
  svg.attr('viewBox', viewBox);

  // Log the viewBox configuration for debugging
-  log.debug(`viewBox configured: ${viewBox} with padding: ${padding}`);
+  log.debug(`viewBox configured: ${viewBox}`);
 };

 const calculateDimensionsWithPadding = (svg: SVG, padding: number) => {
--- a/packages/mermaid/src/schemas/config.schema.yaml
+++ b/packages/mermaid/src/schemas/config.schema.yaml
@@ -118,7 +118,7 @@ properties:
          - NETWORK_SIMPLEX
          - LINEAR_SEGMENTS
          - BRANDES_KOEPF
-        default: BRANDES_KOEPF
+        default: SIMPLE
  darkMode:
    type: boolean
    default: false
--- a/packages/mermaid/src/styles.ts
+++ b/packages/mermaid/src/styles.ts
@@ -70,9 +70,6 @@ const getStyles = (
    font-family: ${options.fontFamily};
    font-size: ${options.fontSize};
  }
-   & p {
-    margin: 0
-   }

  ${diagramStyles}

--- a/packages/parser/CHANGELOG.md
+++ b/packages/parser/CHANGELOG.md
@@ -1,13 +0,0 @@
-# @mermaid-js/parser
-
-## 0.1.1
-
-### Patch Changes
-
- [#5746](https://github.com/mermaid-js/mermaid/pull/5746) [`83926c9`](https://github.com/mermaid-js/mermaid/commit/83926c9707b09c34e300888186250191ee8ae30a) Thanks [@sidharthv96](https://github.com/sidharthv96)! - test changeset
-
-## 0.1.0
-
-### Minor Changes
-
- [#5744](https://github.com/mermaid-js/mermaid/pull/5744) [`5013484`](https://github.com/mermaid-js/mermaid/commit/50134849246141ec400e33e08c12c10539b84de9) Thanks [@sidharthv96](https://github.com/sidharthv96)! - Release parser, test changesets
--- a/packages/parser/package.json
+++ b/packages/parser/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@mermaid-js/parser",
-  "version": "0.1.1",
+  "version": "0.1.0-rc.2",
  "description": "MermaidJS parser",
  "author": "Yokozuna59",
  "contributors": [
@@ -19,7 +19,8 @@
  "scripts": {
    "clean": "rimraf dist src/language/generated",
    "langium:generate": "langium generate",
-    "langium:watch": "langium generate --watch"
+    "langium:watch": "langium generate --watch",
+    "prepublishOnly": "pnpm -w run build"
  },
  "repository": {
    "type": "git",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,12 +14,6 @@ importers:
      '@argos-ci/cypress':
        specifier: ^2.1.0
        version: 2.1.1(cypress@13.13.2)
-      '@changesets/changelog-github':
-        specifier: ^0.5.0
-        version: 0.5.0(encoding@0.1.13)
-      '@changesets/cli':
-        specifier: ^2.27.7
-        version: 2.27.7
      '@cspell/eslint-plugin':
        specifier: ^8.8.4
        version: 8.13.1(eslint@9.8.0)
@@ -77,9 +71,6 @@ importers:
      cors:
        specifier: ^2.8.5
        version: 2.8.5
-      cpy-cli:
-        specifier: ^5.0.0
-        version: 5.0.0
      cross-env:
        specifier: ^7.0.3
        version: 7.0.3
@@ -318,6 +309,9 @@ importers:
      concurrently:
        specifier: ^8.2.2
        version: 8.2.2
+      cpy-cli:
+        specifier: ^5.0.0
+        version: 5.0.0
      csstree-validator:
        specifier: ^3.0.0
        version: 3.0.0
@@ -407,6 +401,31 @@ importers:
        specifier: ^5.0.5
        version: 5.0.10

+  packages/mermaid-flowchart-elk:
+    dependencies:
+      d3:
+        specifier: ^7.9.0
+        version: 7.9.0
+      dagre-d3-es:
+        specifier: 7.0.10
+        version: 7.0.10
+      elkjs:
+        specifier: ^0.9.2
+        version: 0.9.3
+      khroma:
+        specifier: ^2.1.0
+        version: 2.1.0
+    devDependencies:
+      concurrently:
+        specifier: ^8.2.2
+        version: 8.2.2
+      mermaid:
+        specifier: workspace:^
+        version: link:../mermaid
+      rimraf:
+        specifier: ^5.0.5
+        version: 5.0.10
+
  packages/mermaid-layout-elk:
    dependencies:
      d3:
@@ -415,10 +434,6 @@ importers:
      elkjs:
        specifier: ^0.9.3
        version: 0.9.3
-    devDependencies:
-      '@types/d3':
-        specifier: ^7.4.3
-        version: 7.4.3
      mermaid:
        specifier: workspace:^
        version: link:../mermaid
@@ -1359,67 +1374,6 @@ packages:
  '@braintree/sanitize-url@7.1.0':
    resolution: {integrity: sha512-o+UlMLt49RvtCASlOMW0AkHnabN9wR9rwCCherxO0yG4Npy34GkvrAqdXQvrhNs+jh+gkK8gB8Lf05qL/O7KWg==}

-  '@changesets/apply-release-plan@7.0.4':
-    resolution: {integrity: sha512-HLFwhKWayKinWAul0Vj+76jVx1Pc2v55MGPVjZ924Y/ROeSsBMFutv9heHmCUj48lJyRfOTJG5+ar+29FUky/A==}
-
-  '@changesets/assemble-release-plan@6.0.3':
-    resolution: {integrity: sha512-bLNh9/Lgl1VwkjWZTq8JmRqH+hj7/Yzfz0jsQ/zJJ+FTmVqmqPj3szeKOri8O/hEM8JmHW019vh2gTO9iq5Cuw==}
-
-  '@changesets/changelog-git@0.2.0':
-    resolution: {integrity: sha512-bHOx97iFI4OClIT35Lok3sJAwM31VbUM++gnMBV16fdbtBhgYu4dxsphBF/0AZZsyAHMrnM0yFcj5gZM1py6uQ==}
-
-  '@changesets/changelog-github@0.5.0':
-    resolution: {integrity: sha512-zoeq2LJJVcPJcIotHRJEEA2qCqX0AQIeFE+L21L8sRLPVqDhSXY8ZWAt2sohtBpFZkBwu+LUwMSKRr2lMy3LJA==}
-
-  '@changesets/cli@2.27.7':
-    resolution: {integrity: sha512-6lr8JltiiXPIjDeYg4iM2MeePP6VN/JkmqBsVA5XRiy01hGS3y629LtSDvKcycj/w/5Eur1rEwby/MjcYS+e2A==}
-    hasBin: true
-
-  '@changesets/config@3.0.2':
-    resolution: {integrity: sha512-cdEhS4t8woKCX2M8AotcV2BOWnBp09sqICxKapgLHf9m5KdENpWjyrFNMjkLqGJtUys9U+w93OxWT0czorVDfw==}
-
-  '@changesets/errors@0.2.0':
-    resolution: {integrity: sha512-6BLOQUscTpZeGljvyQXlWOItQyU71kCdGz7Pi8H8zdw6BI0g3m43iL4xKUVPWtG+qrrL9DTjpdn8eYuCQSRpow==}
-
-  '@changesets/get-dependents-graph@2.1.1':
-    resolution: {integrity: sha512-LRFjjvigBSzfnPU2n/AhFsuWR5DK++1x47aq6qZ8dzYsPtS/I5mNhIGAS68IAxh1xjO9BTtz55FwefhANZ+FCA==}
-
-  '@changesets/get-github-info@0.6.0':
-    resolution: {integrity: sha512-v/TSnFVXI8vzX9/w3DU2Ol+UlTZcu3m0kXTjTT4KlAdwSvwutcByYwyYn9hwerPWfPkT2JfpoX0KgvCEi8Q/SA==}
-
-  '@changesets/get-release-plan@4.0.3':
-    resolution: {integrity: sha512-6PLgvOIwTSdJPTtpdcr3sLtGatT+Jr22+cQwEBJBy6wP0rjB4yJ9lv583J9fVpn1bfQlBkDa8JxbS2g/n9lIyA==}
-
-  '@changesets/get-version-range-type@0.4.0':
-    resolution: {integrity: sha512-hwawtob9DryoGTpixy1D3ZXbGgJu1Rhr+ySH2PvTLHvkZuQ7sRT4oQwMh0hbqZH1weAooedEjRsbrWcGLCeyVQ==}
-
-  '@changesets/git@3.0.0':
-    resolution: {integrity: sha512-vvhnZDHe2eiBNRFHEgMiGd2CT+164dfYyrJDhwwxTVD/OW0FUD6G7+4DIx1dNwkwjHyzisxGAU96q0sVNBns0w==}
-
-  '@changesets/logger@0.1.0':
-    resolution: {integrity: sha512-pBrJm4CQm9VqFVwWnSqKEfsS2ESnwqwH+xR7jETxIErZcfd1u2zBSqrHbRHR7xjhSgep9x2PSKFKY//FAshA3g==}
-
-  '@changesets/parse@0.4.0':
-    resolution: {integrity: sha512-TS/9KG2CdGXS27S+QxbZXgr8uPsP4yNJYb4BC2/NeFUj80Rni3TeD2qwWmabymxmrLo7JEsytXH1FbpKTbvivw==}
-
-  '@changesets/pre@2.0.0':
-    resolution: {integrity: sha512-HLTNYX/A4jZxc+Sq8D1AMBsv+1qD6rmmJtjsCJa/9MSRybdxh0mjbTvE6JYZQ/ZiQ0mMlDOlGPXTm9KLTU3jyw==}
-
-  '@changesets/read@0.6.0':
-    resolution: {integrity: sha512-ZypqX8+/im1Fm98K4YcZtmLKgjs1kDQ5zHpc2U1qdtNBmZZfo/IBiG162RoP0CUF05tvp2y4IspH11PLnPxuuw==}
-
-  '@changesets/should-skip-package@0.1.0':
-    resolution: {integrity: sha512-FxG6Mhjw7yFStlSM7Z0Gmg3RiyQ98d/9VpQAZ3Fzr59dCOM9G6ZdYbjiSAt0XtFr9JR5U2tBaJWPjrkGGc618g==}
-
-  '@changesets/types@4.1.0':
-    resolution: {integrity: sha512-LDQvVDv5Kb50ny2s25Fhm3d9QSZimsoUGBsUioj6MC3qbMUCuC8GPIvk/M6IvXx3lYhAs0lwWUQLb+VIEUCECw==}
-
-  '@changesets/types@6.0.0':
-    resolution: {integrity: sha512-b1UkfNulgKoWfqyHtzKS5fOZYSJO+77adgL7DLRDr+/7jhChN+QcHnbjiQVOz/U+Ts3PGNySq7diAItzDgugfQ==}
-
-  '@changesets/write@0.3.1':
-    resolution: {integrity: sha512-SyGtMXzH3qFqlHKcvFY2eX+6b0NGiFcNav8AFsYwy5l8hejOeoeTDemu5Yjmke2V5jpzY+pBvM0vCCQ3gdZpfw==}
-
  '@chevrotain/cst-dts-gen@11.0.3':
    resolution: {integrity: sha512-BvIKpRLeS/8UbfxXxgC33xOumsacaeCKAjAeLyOn7Pcp95HiRbrpl14S+9vaZLolnbssPIUuiUd8IvgkRyt6NQ==}

@@ -2139,12 +2093,6 @@ packages:
  '@leichtgewicht/ip-codec@2.0.5':
    resolution: {integrity: sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==}

-  '@manypkg/find-root@1.1.0':
-    resolution: {integrity: sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==}
-
-  '@manypkg/get-packages@1.1.3':
-    resolution: {integrity: sha512-fo+QhuU3qE/2TQMQmbVMqaQ6EWbMhi4ABWP+O4AM1NqPBuy0OrApV5LO6BrrgnhtAHS2NH6RrVk9OL181tTi8A==}
-
  '@mdi/font@7.4.47':
    resolution: {integrity: sha512-43MtGpd585SNzHZPcYowu/84Vz2a2g31TvPMTm9uTiCSWzaheQySUcSyUH/46fPnuPQWof2yd0pGBtzee/IQWw==}

@@ -2625,9 +2573,6 @@ packages:
  '@types/node-forge@1.3.11':
    resolution: {integrity: sha512-FQx220y22OKNTqaByeBGqHWYz4cl94tpcxeFdvBo3wjG6XPBuZ0BNgNZRV5J5TFmmcsJ4IzsLkmGRiQbnYsBEQ==}

-  '@types/node@12.20.55':
-    resolution: {integrity: sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==}
-
  '@types/node@18.19.43':
    resolution: {integrity: sha512-Mw/YlgXnyJdEwLoFv2dpuJaDFriX+Pc+0qOBJ57jC1H6cDxIj2xc5yUrdtArDVG0m+KV6622a4p2tenEqB3C/g==}

@@ -2665,9 +2610,6 @@ packages:
  '@types/rollup-plugin-visualizer@4.2.4':
    resolution: {integrity: sha512-BW4Q6D1Qy5gno5qHWrnMDC2dOe/TAKXvqCpckOggCCu+XpS+ZZJJ1lq1+K3bvYccoO3Y7f5kglbFAgYGqCgULg==}

-  '@types/semver@7.5.8':
-    resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==}
-
  '@types/send@0.17.4':
    resolution: {integrity: sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==}

@@ -3420,10 +3362,6 @@ packages:
  bcrypt-pbkdf@1.0.2:
    resolution: {integrity: sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==}

-  better-path-resolve@1.0.0:
-    resolution: {integrity: sha512-pbnl5XzGBdrFU/wT4jqmJVPn2B6UHPBOhzMQkY/SPUPB6QtUXtmBHBIwCbXJol93mOpGMnQyP/+BB19q04xj7g==}
-    engines: {node: '>=4'}
-
  binary-extensions@2.3.0:
    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
    engines: {node: '>=8'}
@@ -3605,9 +3543,6 @@ packages:
  character-reference-invalid@1.1.4:
    resolution: {integrity: sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==}

-  chardet@0.7.0:
-    resolution: {integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==}
-
  check-error@1.0.3:
    resolution: {integrity: sha512-iKEoDYaRmd1mxM90a2OEfWhjsjPpYPuQ+lMYsoxB126+t8fw7ySEO48nmDg5COTjxDI65/Y2OWpeEHk3ZOe8zg==}

@@ -3894,9 +3829,6 @@ packages:
    engines: {node: '>=10.14', npm: '>=6', yarn: '>=1'}
    hasBin: true

-  cross-spawn@5.1.0:
-    resolution: {integrity: sha512-pTgQJ5KC0d2hcY8eyL1IzlBPYjTkyH72XRZPnLyKus2mBfNjQs3klqbJU2VILqZryAZUt9JOb3h/mWMy23/f5A==}
-
  cross-spawn@6.0.5:
    resolution: {integrity: sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==}
    engines: {node: '>=4.8'}
@@ -4165,9 +4097,6 @@ packages:
    resolution: {integrity: sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==}
    engines: {node: '>= 0.4'}

-  dataloader@1.4.0:
-    resolution: {integrity: sha512-68s5jYdlvasItOJnCuI2Q9s4q98g0pCyL3HrcKJu8KNugUl8ahgmZYg38ysLTgQjjXX3H8CJLkAvWrclWfcalw==}
-
  date-fns@2.30.0:
    resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==}
    engines: {node: '>=0.11'}
@@ -4313,10 +4242,6 @@ packages:
    resolution: {integrity: sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==}
    engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}

-  detect-indent@6.1.0:
-    resolution: {integrity: sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==}
-    engines: {node: '>=8'}
-
  detect-libc@2.0.3:
    resolution: {integrity: sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==}
    engines: {node: '>=8'}
@@ -4372,10 +4297,6 @@ packages:
    resolution: {integrity: sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==}
    engines: {node: '>=12'}

-  dotenv@8.6.0:
-    resolution: {integrity: sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==}
-    engines: {node: '>=10'}
-
  duplexer@0.1.2:
    resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}

@@ -4742,13 +4663,6 @@ packages:
  extend@3.0.2:
    resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}

-  extendable-error@0.1.7:
-    resolution: {integrity: sha512-UOiS2in6/Q0FK0R0q6UY9vYpQ21mr/Qn1KOnte7vsACuNJf514WvCCUHSRCPcgjPT2bAhNIJdlE6bVap1GKmeg==}
-
-  external-editor@3.1.0:
-    resolution: {integrity: sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==}
-    engines: {node: '>=4'}
-
  extract-zip@2.0.1:
    resolution: {integrity: sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==}
    engines: {node: '>= 10.17.0'}
@@ -4896,9 +4810,6 @@ packages:
    resolution: {integrity: sha512-v2ZsoEuVHYy8ZIlYqwPe/39Cy+cFDzp4dXPaxNvkEuouymu+2Jbz0PxpKarJHYJTmv2HWT3O382qY8l4jMWthw==}
    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}

-  find-yarn-workspace-root2@1.2.16:
-    resolution: {integrity: sha512-hr6hb1w8ePMpPVUK39S4RlwJzi+xPLuVuG8XlwXU3KD5Yn3qgBWVfy3AzNlDhWvE1EORCE65/Qm26rFQt3VLVA==}
-
  flat-cache@4.0.1:
    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
    engines: {node: '>=16'}
@@ -4992,10 +4903,6 @@ packages:
    resolution: {integrity: sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==}
    engines: {node: '>=6 <7 || >=8'}

-  fs-extra@8.1.0:
-    resolution: {integrity: sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==}
-    engines: {node: '>=6 <7 || >=8'}
-
  fs-extra@9.1.0:
    resolution: {integrity: sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==}
    engines: {node: '>=10'}
@@ -5324,9 +5231,6 @@ packages:
    resolution: {integrity: sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==}
    engines: {node: '>= 14'}

-  human-id@1.0.2:
-    resolution: {integrity: sha512-UNopramDEhHJD+VR+ehk8rOslwSfByxPIZyJRfV739NDhN5LF1fa1MqnzKm2lGTQRjNrjK19Q5fhkgIfjlVUKw==}
-
  human-signals@1.1.1:
    resolution: {integrity: sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==}
    engines: {node: '>=8.12.0'}
@@ -5594,10 +5498,6 @@ packages:
    resolution: {integrity: sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==}
    engines: {node: '>= 0.4'}

-  is-subdir@1.2.0:
-    resolution: {integrity: sha512-2AT6j+gXe/1ueqbW6fLZJiIw3F8iXGJtt0yDrZaBhAZEG1raiTxKWU+IPqMCzQAXOUCKdA4UDMgacKH25XG2Cw==}
-    engines: {node: '>=4'}
-
  is-symbol@1.0.4:
    resolution: {integrity: sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==}
    engines: {node: '>= 0.4'}
@@ -6058,10 +5958,6 @@ packages:
    resolution: {integrity: sha512-opevsywziHd3zHCVQGAj8zu+Z3yHNkkoYhWIGnq54RrCVwLz0MozotJEDnKsIBLvkfLGN6BLOyAeRrYI0pKA4g==}
    engines: {node: '>=18.0.0'}

-  load-yaml-file@0.2.0:
-    resolution: {integrity: sha512-OfCBkGEw4nN6JLtgRidPX6QxjBQGQf72q3si2uvqyFEMbycSFFHwAZeXx6cJgFM9wmLrf9zBwCP3Ivqa+LLZPw==}
-    engines: {node: '>=6'}
-
  loader-runner@4.3.0:
    resolution: {integrity: sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==}
    engines: {node: '>=6.11.5'}
@@ -6114,9 +6010,6 @@ packages:
  lodash.sortby@4.7.0:
    resolution: {integrity: sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==}

-  lodash.startcase@4.4.0:
-    resolution: {integrity: sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg==}
-
  lodash@4.17.21:
    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}

@@ -6152,9 +6045,6 @@ packages:
  lru-cache@10.4.3:
    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}

-  lru-cache@4.1.5:
-    resolution: {integrity: sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==}
-
  lru-cache@5.1.1:
    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}

@@ -6465,10 +6355,6 @@ packages:
  mlly@1.7.1:
    resolution: {integrity: sha512-rrVRZRELyQzrIUAVMHxP97kv+G786pHmOKzuFII8zDYahFBS7qnHh2AlYSl1GAHhaMPCz6/oHjVMcfFYgFYHgA==}

-  mri@1.2.0:
-    resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
-    engines: {node: '>=4'}
-
  mrmime@2.0.0:
    resolution: {integrity: sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==}
    engines: {node: '>=10'}
@@ -6649,16 +6535,9 @@ packages:
    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
    engines: {node: '>= 0.8.0'}

-  os-tmpdir@1.0.2:
-    resolution: {integrity: sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==}
-    engines: {node: '>=0.10.0'}
-
  ospath@1.2.2:
    resolution: {integrity: sha512-o6E5qJV5zkAbIDNhGSIlyOhScKXgQrSRMilfph0clDfM0nEnBOlKlH4sWDmG95BW/CvwNz0vmm7dJVtU2KlMiA==}

-  outdent@0.5.0:
-    resolution: {integrity: sha512-/jHxFIzoMXdqPzTaCpFzAAWhpkSjZPF4Vsn6jAfNpmbH/ymsmd7Qc6VE9BGn0L6YMj6uwpQLxCECpus4ukKS9Q==}
-
  p-cancelable@2.1.1:
    resolution: {integrity: sha512-BZOr3nRQHOntUjTrH8+Lh54smKHoHyur8We1V8DSMVrl5A2malOOwuJRnKRDjSnkoeBh4at6BwEnb5I7Jl31wg==}
    engines: {node: '>=8'}
@@ -6667,10 +6546,6 @@ packages:
    resolution: {integrity: sha512-dd589iCQ7m1L0bmC5NLlVYfy3TbBEsMUfWx9PyAgPeIcFZ/E2yaTZ4Rz4MiBmmJShviiftHVXOqfnfzJ6kyMrQ==}
    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}

-  p-filter@2.1.0:
-    resolution: {integrity: sha512-ZBxxZ5sL2HghephhpGAQdoskxplTwr7ICaehZwLIlfL6acuVgZPm8yBNuRAFBGEqtD/hmUeq9eqLg2ys9Xr/yw==}
-    engines: {node: '>=8'}
-
  p-filter@3.0.0:
    resolution: {integrity: sha512-QtoWLjXAW++uTX67HZQz1dbTpqBfiidsB6VtQUC9iR85S120+s0T5sO6s+B5MLzFcZkrEd/DGMmCjR+f2Qpxwg==}
    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -6715,10 +6590,6 @@ packages:
    resolution: {integrity: sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==}
    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}

-  p-map@2.1.0:
-    resolution: {integrity: sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==}
-    engines: {node: '>=6'}
-
  p-map@3.0.0:
    resolution: {integrity: sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==}
    engines: {node: '>=8'}
@@ -6869,10 +6740,6 @@ packages:
    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
    engines: {node: '>=0.10.0'}

-  pify@4.0.1:
-    resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
-    engines: {node: '>=6'}
-
  pino-abstract-transport@1.2.0:
    resolution: {integrity: sha512-Guhh8EZfPCfH+PMXAb6rKOjGQEoy0xlAIn+irODG5kgfYV+BQ0rGYYWTIel3P5mmyXqkYkPmdIkywsn6QKUR1Q==}

@@ -6991,10 +6858,6 @@ packages:
  preact@10.23.1:
    resolution: {integrity: sha512-O5UdRsNh4vdZaTieWe3XOgSpdMAmkIYBCT3VhQDlKrzyCm8lUYsk0fmVEvoQQifoOjFRTaHZO69ylrzTW2BH+A==}

-  preferred-pm@3.1.4:
-    resolution: {integrity: sha512-lEHd+yEm22jXdCphDrkvIJQU66EuLojPPtvZkpKIkiD+l0DMThF/niqZKJSoU8Vl7iuvtmzyMhir9LdVy5WMnA==}
-    engines: {node: '>=10'}
-
  prelude-ls@1.2.1:
    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
    engines: {node: '>= 0.8.0'}
@@ -7063,9 +6926,6 @@ packages:
    engines: {node: '>= 0.10'}
    hasBin: true

-  pseudomap@1.0.2:
-    resolution: {integrity: sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==}
-
  psl@1.9.0:
    resolution: {integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==}

@@ -7131,10 +6991,6 @@ packages:
    resolution: {integrity: sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==}
    engines: {node: '>=8'}

-  read-yaml-file@1.1.0:
-    resolution: {integrity: sha512-VIMnQi/Z4HT2Fxuwg5KrY174U1VdUIASQVWXXyqtNRtxSr9IYkn1rsI6Tb6HsrHCmB7gVpNwX6JxPTHcH6IoTA==}
-    engines: {node: '>=6'}
-
  readable-stream@2.3.8:
    resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}

@@ -7584,9 +7440,6 @@ packages:
    resolution: {integrity: sha512-EeajNjfN9zMnULLwhZZQU3GWBoFNkbngTUPfaawT4RkMiviTxcX0qfhVbGey39mfctfDHkWtuecgQ8NJcyQWHg==}
    engines: {node: '>=8'}

-  spawndamnit@2.0.0:
-    resolution: {integrity: sha512-j4JKEcncSjFlqIwU5L/rp2N5SIPsdxaRsIv678+TZxZ0SRDJTm8JrxJMjE/XuiEZNEir3S8l0Fa3Ke339WI4qA==}
-
  spdx-correct@3.2.0:
    resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==}

@@ -7718,10 +7571,6 @@ packages:
    resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
    engines: {node: '>=12'}

-  strip-bom@3.0.0:
-    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
-    engines: {node: '>=4'}
-
  strip-bom@4.0.0:
    resolution: {integrity: sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==}
    engines: {node: '>=8'}
@@ -7820,10 +7669,6 @@ packages:
    resolution: {integrity: sha512-DFpBhaF5j+2f7kheKFc1ajsAUUDGOaNPpKPtiIMxlbfud6mvfFZuWGnTRpaujUa5J7yl6cIw/h6nyr4mSsENPg==}
    engines: {node: '>=8'}

-  term-size@2.2.1:
-    resolution: {integrity: sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==}
-    engines: {node: '>=8'}
-
  terser-webpack-plugin@5.3.10:
    resolution: {integrity: sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==}
    engines: {node: '>= 10.13.0'}
@@ -7893,10 +7738,6 @@ packages:
    resolution: {integrity: sha512-KYad6Vy5VDWV4GH3fjpseMQ/XU2BhIYP7Vzd0LG44qRWm/Yt2WCOTicFdvmgo6gWaqooMQCawTtILVQJupKu7A==}
    engines: {node: '>=14.0.0'}

-  tmp@0.0.33:
-    resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
-    engines: {node: '>=0.6.0'}
-
  tmp@0.2.3:
    resolution: {integrity: sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w==}
    engines: {node: '>=14.14'}
@@ -8517,10 +8358,6 @@ packages:
  which-module@2.0.1:
    resolution: {integrity: sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==}

-  which-pm@2.2.0:
-    resolution: {integrity: sha512-MOiaDbA5ZZgUjkeMWM5EkJp4loW5ZRoa5bc3/aeMox/PJelMhE6t7S/mLuiY43DBupyxH+S0U1bTui9kWUlmsw==}
-    engines: {node: '>=8.15'}
-
  which-typed-array@1.1.15:
    resolution: {integrity: sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==}
    engines: {node: '>= 0.4'}
@@ -8689,9 +8526,6 @@ packages:
    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
    engines: {node: '>=10'}

-  yallist@2.1.2:
-    resolution: {integrity: sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==}
-
  yallist@3.1.1:
    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}

@@ -9963,177 +9797,6 @@ snapshots:

  '@braintree/sanitize-url@7.1.0': {}

-  '@changesets/apply-release-plan@7.0.4':
-    dependencies:
-      '@babel/runtime': 7.25.0
-      '@changesets/config': 3.0.2
-      '@changesets/get-version-range-type': 0.4.0
-      '@changesets/git': 3.0.0
-      '@changesets/should-skip-package': 0.1.0
-      '@changesets/types': 6.0.0
-      '@manypkg/get-packages': 1.1.3
-      detect-indent: 6.1.0
-      fs-extra: 7.0.1
-      lodash.startcase: 4.4.0
-      outdent: 0.5.0
-      prettier: 2.8.8
-      resolve-from: 5.0.0
-      semver: 7.6.3
-
-  '@changesets/assemble-release-plan@6.0.3':
-    dependencies:
-      '@babel/runtime': 7.25.0
-      '@changesets/errors': 0.2.0
-      '@changesets/get-dependents-graph': 2.1.1
-      '@changesets/should-skip-package': 0.1.0
-      '@changesets/types': 6.0.0
-      '@manypkg/get-packages': 1.1.3
-      semver: 7.6.3
-
-  '@changesets/changelog-git@0.2.0':
-    dependencies:
-      '@changesets/types': 6.0.0
-
-  '@changesets/changelog-github@0.5.0(encoding@0.1.13)':
-    dependencies:
-      '@changesets/get-github-info': 0.6.0(encoding@0.1.13)
-      '@changesets/types': 6.0.0
-      dotenv: 8.6.0
-    transitivePeerDependencies:
-      - encoding
-
-  '@changesets/cli@2.27.7':
-    dependencies:
-      '@babel/runtime': 7.25.0
-      '@changesets/apply-release-plan': 7.0.4
-      '@changesets/assemble-release-plan': 6.0.3
-      '@changesets/changelog-git': 0.2.0
-      '@changesets/config': 3.0.2
-      '@changesets/errors': 0.2.0
-      '@changesets/get-dependents-graph': 2.1.1
-      '@changesets/get-release-plan': 4.0.3
-      '@changesets/git': 3.0.0
-      '@changesets/logger': 0.1.0
-      '@changesets/pre': 2.0.0
-      '@changesets/read': 0.6.0
-      '@changesets/should-skip-package': 0.1.0
-      '@changesets/types': 6.0.0
-      '@changesets/write': 0.3.1
-      '@manypkg/get-packages': 1.1.3
-      '@types/semver': 7.5.8
-      ansi-colors: 4.1.3
-      chalk: 2.4.2
-      ci-info: 3.9.0
-      enquirer: 2.4.1
-      external-editor: 3.1.0
-      fs-extra: 7.0.1
-      human-id: 1.0.2
-      mri: 1.2.0
-      outdent: 0.5.0
-      p-limit: 2.3.0
-      preferred-pm: 3.1.4
-      resolve-from: 5.0.0
-      semver: 7.6.3
-      spawndamnit: 2.0.0
-      term-size: 2.2.1
-
-  '@changesets/config@3.0.2':
-    dependencies:
-      '@changesets/errors': 0.2.0
-      '@changesets/get-dependents-graph': 2.1.1
-      '@changesets/logger': 0.1.0
-      '@changesets/types': 6.0.0
-      '@manypkg/get-packages': 1.1.3
-      fs-extra: 7.0.1
-      micromatch: 4.0.7
-
-  '@changesets/errors@0.2.0':
-    dependencies:
-      extendable-error: 0.1.7
-
-  '@changesets/get-dependents-graph@2.1.1':
-    dependencies:
-      '@changesets/types': 6.0.0
-      '@manypkg/get-packages': 1.1.3
-      chalk: 2.4.2
-      fs-extra: 7.0.1
-      semver: 7.6.3
-
-  '@changesets/get-github-info@0.6.0(encoding@0.1.13)':
-    dependencies:
-      dataloader: 1.4.0
-      node-fetch: 2.6.7(encoding@0.1.13)
-    transitivePeerDependencies:
-      - encoding
-
-  '@changesets/get-release-plan@4.0.3':
-    dependencies:
-      '@babel/runtime': 7.25.0
-      '@changesets/assemble-release-plan': 6.0.3
-      '@changesets/config': 3.0.2
-      '@changesets/pre': 2.0.0
-      '@changesets/read': 0.6.0
-      '@changesets/types': 6.0.0
-      '@manypkg/get-packages': 1.1.3
-
-  '@changesets/get-version-range-type@0.4.0': {}
-
-  '@changesets/git@3.0.0':
-    dependencies:
-      '@babel/runtime': 7.25.0
-      '@changesets/errors': 0.2.0
-      '@changesets/types': 6.0.0
-      '@manypkg/get-packages': 1.1.3
-      is-subdir: 1.2.0
-      micromatch: 4.0.7
-      spawndamnit: 2.0.0
-
-  '@changesets/logger@0.1.0':
-    dependencies:
-      chalk: 2.4.2
-
-  '@changesets/parse@0.4.0':
-    dependencies:
-      '@changesets/types': 6.0.0
-      js-yaml: 3.14.1
-
-  '@changesets/pre@2.0.0':
-    dependencies:
-      '@babel/runtime': 7.25.0
-      '@changesets/errors': 0.2.0
-      '@changesets/types': 6.0.0
-      '@manypkg/get-packages': 1.1.3
-      fs-extra: 7.0.1
-
-  '@changesets/read@0.6.0':
-    dependencies:
-      '@babel/runtime': 7.25.0
-      '@changesets/git': 3.0.0
-      '@changesets/logger': 0.1.0
-      '@changesets/parse': 0.4.0
-      '@changesets/types': 6.0.0
-      chalk: 2.4.2
-      fs-extra: 7.0.1
-      p-filter: 2.1.0
-
-  '@changesets/should-skip-package@0.1.0':
-    dependencies:
-      '@babel/runtime': 7.25.0
-      '@changesets/types': 6.0.0
-      '@manypkg/get-packages': 1.1.3
-
-  '@changesets/types@4.1.0': {}
-
-  '@changesets/types@6.0.0': {}
-
-  '@changesets/write@0.3.1':
-    dependencies:
-      '@babel/runtime': 7.25.0
-      '@changesets/types': 6.0.0
-      fs-extra: 7.0.1
-      human-id: 1.0.2
-      prettier: 2.8.8
-
  '@chevrotain/cst-dts-gen@11.0.3':
    dependencies:
      '@chevrotain/gast': 11.0.3
@@ -10900,22 +10563,6 @@ snapshots:

  '@leichtgewicht/ip-codec@2.0.5': {}

-  '@manypkg/find-root@1.1.0':
-    dependencies:
-      '@babel/runtime': 7.25.0
-      '@types/node': 12.20.55
-      find-up: 4.1.0
-      fs-extra: 8.1.0
-
-  '@manypkg/get-packages@1.1.3':
-    dependencies:
-      '@babel/runtime': 7.25.0
-      '@changesets/types': 4.1.0
-      '@manypkg/find-root': 1.1.0
-      fs-extra: 8.1.0
-      globby: 11.1.0
-      read-yaml-file: 1.1.0
-
  '@mdi/font@7.4.47': {}

  '@microsoft/tsdoc-config@0.17.0':
@@ -11429,8 +11076,6 @@ snapshots:
    dependencies:
      '@types/node': 20.14.14

-  '@types/node@12.20.55': {}
-
  '@types/node@18.19.43':
    dependencies:
      undici-types: 5.26.5
@@ -11467,8 +11112,6 @@ snapshots:
    dependencies:
      rollup: 2.79.1

-  '@types/semver@7.5.8': {}
-
  '@types/send@0.17.4':
    dependencies:
      '@types/mime': 1.3.5
@@ -12441,10 +12084,6 @@ snapshots:
    dependencies:
      tweetnacl: 0.14.5

-  better-path-resolve@1.0.0:
-    dependencies:
-      is-windows: 1.0.2
-
  binary-extensions@2.3.0: {}

  binary-searching@2.0.5: {}
@@ -12644,8 +12283,6 @@ snapshots:

  character-reference-invalid@1.1.4: {}

-  chardet@0.7.0: {}
-
  check-error@1.0.3:
    dependencies:
      get-func-name: 2.0.2
@@ -12950,12 +12587,6 @@ snapshots:
    dependencies:
      cross-spawn: 7.0.3

-  cross-spawn@5.1.0:
-    dependencies:
-      lru-cache: 4.1.5
-      shebang-command: 1.2.0
-      which: 1.3.1
-
  cross-spawn@6.0.5:
    dependencies:
      nice-try: 1.0.5
@@ -13354,8 +12985,6 @@ snapshots:
      es-errors: 1.3.0
      is-data-view: 1.0.1

-  dataloader@1.4.0: {}
-
  date-fns@2.30.0:
    dependencies:
      '@babel/runtime': 7.25.0
@@ -13454,8 +13083,6 @@ snapshots:

  destroy@1.2.0: {}

-  detect-indent@6.1.0: {}
-
  detect-libc@2.0.3: {}

  detect-newline@3.1.0: {}
@@ -13504,8 +13131,6 @@ snapshots:

  dotenv@16.4.5: {}

-  dotenv@8.6.0: {}
-
  duplexer@0.1.2: {}

  eastasianwidth@0.2.0: {}
@@ -14027,14 +13652,6 @@ snapshots:

  extend@3.0.2: {}

-  extendable-error@0.1.7: {}
-
-  external-editor@3.1.0:
-    dependencies:
-      chardet: 0.7.0
-      iconv-lite: 0.4.24
-      tmp: 0.0.33
-
  extract-zip@2.0.1(supports-color@8.1.1):
    dependencies:
      debug: 4.3.6(supports-color@8.1.1)
@@ -14221,11 +13838,6 @@ snapshots:
      locate-path: 7.2.0
      path-exists: 5.0.0

-  find-yarn-workspace-root2@1.2.16:
-    dependencies:
-      micromatch: 4.0.7
-      pkg-dir: 4.2.0
-
  flat-cache@4.0.1:
    dependencies:
      flatted: 3.3.1
@@ -14314,12 +13926,6 @@ snapshots:
      jsonfile: 4.0.0
      universalify: 0.1.2

-  fs-extra@8.1.0:
-    dependencies:
-      graceful-fs: 4.2.11
-      jsonfile: 4.0.0
-      universalify: 0.1.2
-
  fs-extra@9.1.0:
    dependencies:
      at-least-node: 1.0.0
@@ -14691,8 +14297,6 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  human-id@1.0.2: {}
-
  human-signals@1.1.1: {}

  human-signals@2.1.0: {}
@@ -14891,10 +14495,6 @@ snapshots:
    dependencies:
      has-tostringtag: 1.0.2

-  is-subdir@1.2.0:
-    dependencies:
-      better-path-resolve: 1.0.0
-
  is-symbol@1.0.4:
    dependencies:
      has-symbols: 1.0.3
@@ -15604,13 +15204,6 @@ snapshots:
      rfdc: 1.4.1
      wrap-ansi: 9.0.0

-  load-yaml-file@0.2.0:
-    dependencies:
-      graceful-fs: 4.2.11
-      js-yaml: 3.14.1
-      pify: 4.0.1
-      strip-bom: 3.0.0
-
  loader-runner@4.3.0: {}

  local-pkg@0.4.3: {}
@@ -15653,8 +15246,6 @@ snapshots:

  lodash.sortby@4.7.0: {}

-  lodash.startcase@4.4.0: {}
-
  lodash@4.17.21: {}

  log-symbols@4.1.0:
@@ -15691,11 +15282,6 @@ snapshots:

  lru-cache@10.4.3: {}

-  lru-cache@4.1.5:
-    dependencies:
-      pseudomap: 1.0.2
-      yallist: 2.1.2
-
  lru-cache@5.1.1:
    dependencies:
      yallist: 3.1.1
@@ -16178,8 +15764,6 @@ snapshots:
      pkg-types: 1.1.3
      ufo: 1.5.4

-  mri@1.2.0: {}
-
  mrmime@2.0.0: {}

  ms@2.0.0: {}
@@ -16367,22 +15951,14 @@ snapshots:
      type-check: 0.4.0
      word-wrap: 1.2.5

-  os-tmpdir@1.0.2: {}
-
  ospath@1.2.2: {}

-  outdent@0.5.0: {}
-
  p-cancelable@2.1.1: {}

  p-event@5.0.1:
    dependencies:
      p-timeout: 5.1.0

-  p-filter@2.1.0:
-    dependencies:
-      p-map: 2.1.0
-
  p-filter@3.0.0:
    dependencies:
      p-map: 5.5.0
@@ -16423,8 +15999,6 @@ snapshots:
    dependencies:
      p-limit: 4.0.0

-  p-map@2.1.0: {}
-
  p-map@3.0.0:
    dependencies:
      aggregate-error: 3.1.0
@@ -16547,8 +16121,6 @@ snapshots:

  pify@2.3.0: {}

-  pify@4.0.1: {}
-
  pino-abstract-transport@1.2.0:
    dependencies:
      readable-stream: 4.5.2
@@ -16670,13 +16242,6 @@ snapshots:

  preact@10.23.1: {}

-  preferred-pm@3.1.4:
-    dependencies:
-      find-up: 5.0.0
-      find-yarn-workspace-root2: 1.2.16
-      path-exists: 4.0.0
-      which-pm: 2.2.0
-
  prelude-ls@1.2.1: {}

  prettier-plugin-jsdoc@1.3.0(prettier@3.3.3):
@@ -16732,8 +16297,6 @@ snapshots:
    dependencies:
      event-stream: 3.3.4

-  pseudomap@1.0.2: {}
-
  psl@1.9.0: {}

  pump@3.0.0:
@@ -16797,13 +16360,6 @@ snapshots:
      parse-json: 5.2.0
      type-fest: 0.6.0

-  read-yaml-file@1.1.0:
-    dependencies:
-      graceful-fs: 4.2.11
-      js-yaml: 3.14.1
-      pify: 4.0.1
-      strip-bom: 3.0.0
-
  readable-stream@2.3.8:
    dependencies:
      core-util-is: 1.0.3
@@ -17348,11 +16904,6 @@ snapshots:
      signal-exit: 3.0.7
      which: 2.0.2

-  spawndamnit@2.0.0:
-    dependencies:
-      cross-spawn: 5.1.0
-      signal-exit: 3.0.7
-
  spdx-correct@3.2.0:
    dependencies:
      spdx-expression-parse: 3.0.1
@@ -17533,8 +17084,6 @@ snapshots:
    dependencies:
      ansi-regex: 6.0.1

-  strip-bom@3.0.0: {}
-
  strip-bom@4.0.0: {}

  strip-comments@2.0.1: {}
@@ -17648,8 +17197,6 @@ snapshots:
      ansi-escapes: 4.3.2
      iterm2-version: 4.2.0

-  term-size@2.2.1: {}
-
  terser-webpack-plugin@5.3.10(esbuild@0.21.5)(webpack@5.93.0(esbuild@0.21.5)(webpack-cli@4.10.0)):
    dependencies:
      '@jridgewell/trace-mapping': 0.3.25
@@ -17720,10 +17267,6 @@ snapshots:

  tinyspy@2.2.1: {}

-  tmp@0.0.33:
-    dependencies:
-      os-tmpdir: 1.0.2
-
  tmp@0.2.3: {}

  tmpl@1.0.5: {}
@@ -18506,11 +18049,6 @@ snapshots:

  which-module@2.0.1: {}

-  which-pm@2.2.0:
-    dependencies:
-      load-yaml-file: 0.2.0
-      path-exists: 4.0.0
-
  which-typed-array@1.1.15:
    dependencies:
      available-typed-arrays: 1.0.7
@@ -18715,8 +18253,6 @@ snapshots:

  y18n@5.0.8: {}

-  yallist@2.1.2: {}
-
  yallist@3.1.1: {}

  yaml@2.5.0: {}
--- a/tests/webpack/package.json
+++ b/tests/webpack/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@mermaid-js/webpack-test",
+  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "private": true,