Merge branch 'develop' into 6584-piechart-zero-negative-values

2025-08-15 06:19:24 +02:00 · 2025-06-23 19:52:23 +05:30
parent 3920ad442d e7970c66ee
commit 42ac1848dd
91 changed files with 1790 additions and 256 deletions
--- a/.changeset/add-vert-tag-bar-chart.md
+++ b/.changeset/add-vert-tag-bar-chart.md
@@ -1,5 +0,0 @@
 ---
 'mermaid': minor
 ---
 feat: Add Vertical Line To Gantt Plot At Specified Time
--- a/.changeset/bitter-colts-remain.md
+++ b/.changeset/bitter-colts-remain.md
@@ -1,5 +0,0 @@
 ---
 '@mermaid-js/mermaid-zenuml': major
 ---
 Upgraded the dependency @zenuml/core
--- a/.changeset/curly-coats-tell.md
+++ b/.changeset/curly-coats-tell.md
@@ -1,5 +0,0 @@
 ---
 'mermaid': patch
 ---
 Fix stroke styles for ER diagram to correctly apply path and row-specific styles
--- a/.changeset/eleven-wolves-deny.md
+++ b/.changeset/eleven-wolves-deny.md
@@ -1,5 +0,0 @@
 ---
 'mermaid': patch
 ---
 chore: Convert StateDB into TypeScript
--- a/.changeset/gold-shoes-camp.md
+++ b/.changeset/gold-shoes-camp.md
@@ -1,5 +0,0 @@
 ---
 'mermaid': patch
 ---
 fix: Remove incorrect `style="undefined;"` attributes in some Mermaid diagrams
--- a/.changeset/honest-trees-dress.md
+++ b/.changeset/honest-trees-dress.md
@@ -1,7 +0,0 @@
 ---
 '@mermaid-js/mermaid-zenuml': patch
 ---
 chore: bump minimum ZenUML version to 3.23.28
 commit: 9d06d8f31e7f12af9e9e092214f907f2dc93ad75
--- a/.changeset/neat-moose-compare.md
+++ b/.changeset/neat-moose-compare.md
@@ -1,5 +0,0 @@
 ---
 'mermaid': minor
 ---
 feat: Add support for styling Journey Diagram title (color, font-family, and font-size)
--- a/.changeset/proud-seahorses-wash.md
+++ b/.changeset/proud-seahorses-wash.md
@@ -1,5 +0,0 @@
 ---
 'mermaid': patch
 ---
 FontAwesome icons can now be embedded as SVGs in flowcharts if they are registered via `mermaid.registerIconPacks`.
--- a/.changeset/public-things-stare.md
+++ b/.changeset/public-things-stare.md
@@ -1,5 +0,0 @@
 ---
 'mermaid': minor
 ---
 Added support for the click directive in stateDiagram syntax
--- a/.changeset/quiet-hotels-shine.md
+++ b/.changeset/quiet-hotels-shine.md
@@ -1,6 +0,0 @@
 ---
 'mermaid': minor
 '@mermaid-js/parser': minor
 ---
 feat: Add shorter `+<count>: Label` syntax in packet diagram
--- a/.changeset/sad-mails-accept.md
+++ b/.changeset/sad-mails-accept.md
@@ -1,6 +0,0 @@
 ---
 'mermaid': patch
 '@mermaid-js/parser': patch
 ---
 Refactor grammar so that title don't break Architecture Diagrams
--- a/.changeset/sixty-deer-tell.md
+++ b/.changeset/sixty-deer-tell.md
@@ -1,5 +0,0 @@
 ---
 'mermaid': major
 ---
 fix: allow sequence diagram arrows with a trailing colon but no message
--- a/.changeset/soft-readers-tan.md
+++ b/.changeset/soft-readers-tan.md
@@ -1,5 +0,0 @@
 ---
 'mermaid': minor
 ---
 feat: Dynamically Render Data Labels Within Bar Charts
--- a/.changeset/ten-lamps-trade.md
+++ b/.changeset/ten-lamps-trade.md
@@ -1,5 +0,0 @@
 ---
 'mermaid': patch
 ---
 fix: allow colons in events
--- a/.changeset/yellow-mirrors-change.md
+++ b/.changeset/yellow-mirrors-change.md
@@ -1,7 +0,0 @@
 ---
 '@mermaid-js/mermaid-zenuml': patch
 ---
 fix(zenuml): limit `peerDependencies` to Mermaid v10 and v11
 commit: 0ad44c12feead9d20c6a870a49327ada58d6e657
--- a/.changeset/yellow-walls-fry.md
+++ b/.changeset/yellow-walls-fry.md
@@ -1,5 +0,0 @@
 ---
 'mermaid': patch
 ---
 fix: Fix incomplete string escaping in URL manipulation logic when `arrowMarkerAbsolute: true` by ensuring all unsafe characters are escaped.
--- a/.cspell/code-terms.txt
+++ b/.cspell/code-terms.txt
@@ -47,6 +47,7 @@ edgesep
 EMPTYSTR
 enddate
 ERDIAGRAM
 eslint
 flatmap
 forwardable
 frontmatter
--- a/.cspell/contributors.txt
+++ b/.cspell/contributors.txt
@@ -2,8 +2,10 @@
 Ashish Jain
 cpettitt
 Dong Cai
 knsv
 Knut Sveidqvist
 Nikolay Rozhkov
 Peng Xiao
 Per Brolin
 Sidharth Vinod
 subhash-halder
 Vinod Sidharth
--- a/.cspell/mermaid-terms.txt
+++ b/.cspell/mermaid-terms.txt
@@ -13,11 +13,10 @@ gitgraph
 gzipped
 handDrawn
 kanban
 knsv
 Knut
 marginx
 marginy
 Markdownish
 mermaidchart
 mermaidjs
 mindmap
 mindmaps
@@ -35,7 +34,6 @@ sandboxed
 siebling
 statediagram
 substate
 Sveidqvist
 unfixable
 Viewbox
 viewports
--- a/.esbuild/build.ts
+++ b/.esbuild/build.ts
@@ -1,5 +1,5 @@
 import { build } from 'esbuild';
-import { mkdir, readFile, rename, writeFile } from 'node:fs/promises';
+import { cp, mkdir, readFile, rename, writeFile } from 'node:fs/promises';
 import { packageOptions } from '../.build/common.js';
 import { generateLangium } from '../.build/generateLangium.js';
 import type { MermaidBuildOptions } from './util.js';
@@ -90,6 +90,7 @@ const buildTinyMermaid = async () => {
  tinyPkg.version = mermaidPkg.version;
  await writeFile('./packages/tiny/package.json', JSON.stringify(tinyPkg, null, 2) + '\n');
  await cp('./packages/mermaid/CHANGELOG.md', './packages/tiny/CHANGELOG.md');
 };
 const main = async () => {
--- a/.github/lychee.toml
+++ b/.github/lychee.toml
@@ -53,6 +53,7 @@ exclude = [
 "https://huehive.co",
 "https://foswiki.org",
 "https://www.gnu.org",
 "https://mermaid-preview.com"
 ]
 # Exclude all private IPs from checking.
--- a/.github/workflows/validate-lockfile.yml
+++ b/.github/workflows/validate-lockfile.yml
@@ -0,0 +1,68 @@
 name: Validate pnpm-lock.yaml
 on:
  pull_request:
    paths:
      - 'pnpm-lock.yaml'
      - '**/package.json'
      - '.github/workflows/validate-lockfile.yml'
 jobs:
  validate-lockfile:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
      - name: Validate pnpm-lock.yaml entries
        id: validate # give this step an ID so we can reference its outputs
        run: |
          issues=()
          # 1) No tarball references
          if grep -qF 'tarball:' pnpm-lock.yaml; then
            issues+=("• Tarball references found (forbidden)")
          fi
          # 2) No unwanted vitepress paths
          if grep -qF 'packages/mermaid/src/vitepress' pnpm-lock.yaml; then
            issues+=("• Disallowed path 'packages/mermaid/src/vitepress' present. Run `rm -rf packages/mermaid/src/vitepress && pnpm install` to regenerate.")
          fi
          # 3) Lockfile only changes when package.json changes
          git diff --name-only ${{ github.event.pull_request.base.sha }} ${{ github.sha }} > changed.txt
          if grep -q '^pnpm-lock.yaml$' changed.txt && ! grep -q 'package.json' changed.txt; then
            issues+=("• pnpm-lock.yaml changed without any package.json modification")
          fi
          # If any issues, output them and fail
          if [ ${#issues[@]} -gt 0 ]; then
            # Use the new GITHUB_OUTPUT approach to set a multiline output
            {
              echo "errors<<EOF"
              printf '%s\n' "${issues[@]}"
              echo "EOF"
            } >> $GITHUB_OUTPUT
            exit 1
          fi
      - name: Comment on PR if validation failed
        if: failure()
        uses: peter-evans/create-or-update-comment@v4
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          issue-number: ${{ github.event.pull_request.number }}
          body: |
            The following issue(s) were detected:
            ${{ steps.validate.outputs.errors }}
            Please address these and push an update.
            _Posted automatically by GitHub Actions_
--- a/README.md
+++ b/README.md
@@ -95,10 +95,6 @@ In our release process we rely heavily on visual regression tests using [applito
 <!-- </Main description> -->
 ## Mermaid AI Bot
 [Mermaid](https://codeparrot.ai/oracle?owner=mermaid-js&repo=mermaid) Bot will help you understand this repository better. You can ask for code examples, installation guide, debugging help and much more.
 ## Examples
 **The following are some examples of the diagrams, charts and graphs that can be made using Mermaid. Click here to jump into the [text syntax](https://mermaid.js.org/intro/syntax-reference.html).**
--- a/cypress/integration/rendering/timeline.spec.ts
+++ b/cypress/integration/rendering/timeline.spec.ts
@@ -161,4 +161,68 @@ describe('Timeline diagram', () => {
      {}
    );
  });
  it('11: should render timeline with many stacked events and proper timeline line length', () => {
    imgSnapshotTest(
      `timeline
        title Medical Device Lifecycle
        section Pre-Development
          Quality Management System : Regulatory Compliance : Risk Management
        section Development
          Management Responsibility : Planning Activities : Human Resources
          Resource Management : Management Reviews : Infrastructure
        section Post-Development
          Product Realization Activities : Planning Activities : Customer-related Processes
          Post-Production Activities : Feedback : Complaints : Adverse Events
                                    : Research and Development : Purchasing Activities
                                    : Production Activities : Installation Activities
                                    : Servicing Activities : Post-Market Surveillance
      `,
      {}
    );
  });
  it('12: should render timeline with proper vertical line lengths for all columns', () => {
    imgSnapshotTest(
      `---
 config:
    theme: base
    themeVariables:
        fontFamily: Fira Sans
        fontSize: 17px
        cScale0: '#b3cde0'
        cScale1: '#f49090'
        cScale2: '#85d5b8'
 ---
 timeline
    title Medical Device Lifecycle
    section Planning
        Quality Management System (4): Regulatory Compliance (4.1.1)
            : Risk Management (4.1.2)
        Management Resposibility (5): Planning Activities (5.4)
            : Management Reviews (5.6)
         Resource Management (6): Human Resources (6.2)
            : Infrastructure (6.3)
    section Realization
        Research and Development (7.3): RnD Planning (7.3.2)
            : Inputs (7.3.3)
            : Outputs (7.3.4)
            : Review (7.3.5)
            : Verification (7.3.6)
            : Validation (7.3.7)
        Purchasing (7.4): Purchasing Process (7.4.1)
            : Purchasing Information (7.4.2)
        Production (7.5): Production Activities (7.5.1)
            : Production Feedback (8.2.1)
        Installation (7.5.3): Installation Activities (7.5.3)
        Servicing (7.5.4): Servicing Activities (7.5.4)
    section Post-Production
        Post-Market Activities (8): Feedback (8.2.1)
            : Complaints (8.2.2)
            : Adverse Events (8.2.3)
      `,
      {}
    );
  });
 });
--- a/demos/timeline.html
+++ b/demos/timeline.html
@@ -23,6 +23,23 @@
          1940 : fourth step : fifth step
 				</pre>
    <h2>Medical Device Lifecycle Timeline</h2>
    <pre class="mermaid">
        timeline
        title Medical Device Lifecycle
        section Planning
          Quality Management System (4) : Regulatory Compliance (4.1) : Risk Management (4.1.3) : Management Review (5.6) : Infrastructure (6.3)
          Management Responsibility (5) : Planning Activities (5.2) : Human Resources (6.2) : RnD Planning (7.3.2) : Purchasing Process (7.4.1) : Production Activities (7.5.1) : Installation Activities (7.5.3) : Servicing Activities (7.5.4)
        section Realization
          Research and Development (7.3) : Inputs (7.3.3) : Outputs (7.3.4) : Review (7.3.5) : Verification (7.3.6) : Validation (7.3.7)
          Purchasing (7.4) : Purchasing Information (7.4.2) : Production Feedback (8.2.1)
          Production (7.5) : Production Feedback (8.2.1)
          Installation (7.5.3) : Installation Activities (7.5.3)
          Servicing (7.5.4) : Servicing Activities (7.5.4)
        section Post-Production
          Post-Market Activities (8) : Feedback (8.2.1) : Complaints (8.2.2) : Adverse Events (8.2.3)
    </pre>
    <script type="module">
      import mermaid from './mermaid.esm.mjs';
      mermaid.initialize({
--- a/docs/ecosystem/integrations-community.md
+++ b/docs/ecosystem/integrations-community.md
@@ -270,5 +270,6 @@ Communication tools and platforms
  - [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin)
 - [Reveal CK](https://github.com/jedcn/reveal-ck)
  - [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin)
 - [Vitepress Plugin](https://github.com/sametcn99/vitepress-mermaid-renderer)
 <!--- cspell:ignore Blazorade HueHive --->
--- a/docs/public/1-Callout-Easy.svg
+++ b/docs/public/1-Callout-Easy.svg
@@ -0,0 +1,9 @@
 <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect width="48" height="48" rx="12" fill="#E0095F"/>
 <mask id="mask0_1_24" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="9" y="9" width="30" height="30">
 <rect x="9" y="9" width="30" height="30" fill="#D9D9D9"/>
 </mask>
 <g mask="url(#mask0_1_24)">
 <path d="M24 30.875C25.2083 30.875 26.3229 30.5833 27.3438 30C28.3646 29.4167 29.1875 28.625 29.8125 27.625C29.9375 27.375 29.9271 27.125 29.7812 26.875C29.6354 26.625 29.4167 26.5 29.125 26.5H18.875C18.5833 26.5 18.3646 26.625 18.2188 26.875C18.0729 27.125 18.0625 27.375 18.1875 27.625C18.8125 28.625 19.6406 29.4167 20.6719 30C21.7031 30.5833 22.8125 30.875 24 30.875ZM20.125 21.4375L20.7813 22.0938C20.9688 22.2813 21.1875 22.375 21.4375 22.375C21.6875 22.375 21.9063 22.2813 22.0938 22.0938C22.2813 21.9063 22.3698 21.6875 22.3594 21.4375C22.349 21.1875 22.2604 20.9688 22.0938 20.7813L21 19.6563C20.75 19.4063 20.4531 19.2812 20.1094 19.2812C19.7656 19.2812 19.4688 19.4063 19.2188 19.6563L18.0938 20.7813C17.9063 20.9688 17.8125 21.1875 17.8125 21.4375C17.8125 21.6875 17.9063 21.9063 18.0938 22.0938C18.2604 22.2604 18.474 22.349 18.7344 22.3594C18.9948 22.3698 19.2188 22.2917 19.4063 22.125L20.125 21.4375ZM27.875 21.4375L28.5938 22.125C28.7813 22.2917 29 22.375 29.25 22.375C29.5 22.375 29.7188 22.2813 29.9063 22.0938C30.0938 21.9063 30.1875 21.6875 30.1875 21.4375C30.1875 21.1875 30.0938 20.9688 29.9063 20.7813L28.7812 19.6563C28.5312 19.4063 28.2344 19.2812 27.8906 19.2812C27.5469 19.2812 27.25 19.4063 27 19.6563L25.875 20.7813C25.7083 20.9688 25.625 21.1875 25.625 21.4375C25.625 21.6875 25.7188 21.9063 25.9063 22.0938C26.0938 22.2813 26.3125 22.375 26.5625 22.375C26.8125 22.375 27.0312 22.2813 27.2187 22.0938L27.875 21.4375ZM24 36.5C22.2708 36.5 20.6458 36.1719 19.125 35.5156C17.6042 34.8594 16.2812 33.9688 15.1562 32.8438C14.0312 31.7188 13.1406 30.3958 12.4844 28.875C11.8281 27.3542 11.5 25.7292 11.5 24C11.5 22.2708 11.8281 20.6458 12.4844 19.125C13.1406 17.6042 14.0312 16.2812 15.1562 15.1562C16.2812 14.0312 17.6042 13.1406 19.125 12.4844C20.6458 11.8281 22.2708 11.5 24 11.5C25.7292 11.5 27.3542 11.8281 28.875 12.4844C30.3958 13.1406 31.7188 14.0312 32.8438 15.1562C33.9688 16.2812 34.8594 17.6042 35.5156 19.125C36.1719 20.6458 36.5 22.2708 36.5 24C36.5 25.7292 36.1719 27.3542 35.5156 28.875C34.8594 30.3958 33.9688 31.7188 32.8438 32.8438C31.7188 33.9688 30.3958 34.8594 28.875 35.5156C27.3542 36.1719 25.7292 36.5 24 36.5ZM24 34C26.7917 34 29.1563 33.0313 31.0938 31.0938C33.0313 29.1563 34 26.7917 34 24C34 21.2083 33.0313 18.8438 31.0938 16.9063C29.1563 14.9688 26.7917 14 24 14C21.2083 14 18.8438 14.9688 16.9063 16.9063C14.9688 18.8438 14 21.2083 14 24C14 26.7917 14.9688 29.1563 16.9063 31.0938C18.8438 33.0313 21.2083 34 24 34Z" fill="white"/>
 </g>
 </svg>
--- a/docs/public/2-Callout-Integrations.svg
+++ b/docs/public/2-Callout-Integrations.svg
@@ -0,0 +1,9 @@
 <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect width="48" height="48" rx="12" fill="#E0095F"/>
 <mask id="mask0_2_44" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="9" y="9" width="30" height="30">
 <rect x="9" y="9" width="30" height="30" fill="#D9D9D9"/>
 </mask>
 <g mask="url(#mask0_2_44)">
 <path d="M32.75 27.75C32.3958 27.75 32.099 27.6302 31.8594 27.3906C31.6198 27.151 31.5 26.8542 31.5 26.5C31.5 26.1458 31.6198 25.849 31.8594 25.6094C32.099 25.3698 32.3958 25.25 32.75 25.25H34C34.3542 25.25 34.651 25.3698 34.8906 25.6094C35.1302 25.849 35.25 26.1458 35.25 26.5C35.25 26.8542 35.1302 27.151 34.8906 27.3906C34.651 27.6302 34.3542 27.75 34 27.75H32.75ZM32.75 32.75C32.3958 32.75 32.099 32.6302 31.8594 32.3906C31.6198 32.151 31.5 31.8542 31.5 31.5C31.5 31.1458 31.6198 30.849 31.8594 30.6094C32.099 30.3698 32.3958 30.25 32.75 30.25H34C34.3542 30.25 34.651 30.3698 34.8906 30.6094C35.1302 30.849 35.25 31.1458 35.25 31.5C35.25 31.8542 35.1302 32.151 34.8906 32.3906C34.651 32.6302 34.3542 32.75 34 32.75H32.75ZM26.5 34C25.8125 34 25.224 33.7552 24.7344 33.2656C24.2448 32.776 24 32.1875 24 31.5H22.75C22.3958 31.5 22.099 31.3802 21.8594 31.1406C21.6198 30.901 21.5 30.6042 21.5 30.25V27.75C21.5 27.3958 21.6198 27.099 21.8594 26.8594C22.099 26.6198 22.3958 26.5 22.75 26.5H24C24 25.8125 24.2448 25.224 24.7344 24.7344C25.224 24.2448 25.8125 24 26.5 24H29C29.3542 24 29.651 24.1198 29.8906 24.3594C30.1302 24.599 30.25 24.8958 30.25 25.25V32.75C30.25 33.1042 30.1302 33.401 29.8906 33.6406C29.651 33.8802 29.3542 34 29 34H26.5ZM17.75 30.25C16.375 30.25 15.1979 29.7604 14.2188 28.7812C13.2396 27.8021 12.75 26.625 12.75 25.25C12.75 23.875 13.2396 22.6979 14.2188 21.7188C15.1979 20.7396 16.375 20.25 17.75 20.25H19.625C20.1458 20.25 20.5885 20.0677 20.9531 19.7031C21.3177 19.3385 21.5 18.8958 21.5 18.375C21.5 17.8542 21.3177 17.4115 20.9531 17.0469C20.5885 16.6823 20.1458 16.5 19.625 16.5H15.25C14.8958 16.5 14.599 16.3802 14.3594 16.1406C14.1198 15.901 14 15.6042 14 15.25C14 14.8958 14.1198 14.599 14.3594 14.3594C14.599 14.1198 14.8958 14 15.25 14H19.625C20.8333 14 21.8646 14.4271 22.7187 15.2812C23.5729 16.1354 24 17.1667 24 18.375C24 19.5833 23.5729 20.6146 22.7187 21.4687C21.8646 22.3229 20.8333 22.75 19.625 22.75H17.75C17.0625 22.75 16.474 22.9948 15.9844 23.4844C15.4948 23.974 15.25 24.5625 15.25 25.25C15.25 25.9375 15.4948 26.526 15.9844 27.0156C16.474 27.5052 17.0625 27.75 17.75 27.75H19C19.3542 27.75 19.651 27.8698 19.8906 28.1094C20.1302 28.349 20.25 28.6458 20.25 29C20.25 29.3542 20.1302 29.651 19.8906 29.8906C19.651 30.1302 19.3542 30.25 19 30.25H17.75Z" fill="white"/>
 </g>
 </svg>
--- a/docs/public/3-Callout-Awards.svg
+++ b/docs/public/3-Callout-Awards.svg
@@ -0,0 +1,9 @@
 <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect width="48" height="48" rx="12" fill="#E0095F"/>
 <mask id="mask0_2_49" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="9" y="9" width="30" height="30">
 <rect x="9" y="9" width="30" height="30" fill="#D9D9D9"/>
 </mask>
 <g mask="url(#mask0_2_49)">
 <path d="M22.75 32.75V28.875C21.7292 28.6458 20.8177 28.2135 20.0156 27.5781C19.2135 26.9427 18.625 26.1458 18.25 25.1875C16.6875 25 15.3802 24.3177 14.3281 23.1406C13.276 21.9635 12.75 20.5833 12.75 19V17.75C12.75 17.0625 12.9948 16.474 13.4844 15.9844C13.974 15.4948 14.5625 15.25 15.25 15.25H17.75C17.75 14.5625 17.9948 13.974 18.4844 13.4844C18.974 12.9948 19.5625 12.75 20.25 12.75H27.75C28.4375 12.75 29.026 12.9948 29.5156 13.4844C30.0052 13.974 30.25 14.5625 30.25 15.25H32.75C33.4375 15.25 34.026 15.4948 34.5156 15.9844C35.0052 16.474 35.25 17.0625 35.25 17.75V19C35.25 20.5833 34.724 21.9635 33.6719 23.1406C32.6198 24.3177 31.3125 25 29.75 25.1875C29.375 26.1458 28.7865 26.9427 27.9844 27.5781C27.1823 28.2135 26.2708 28.6458 25.25 28.875V32.75H29C29.3542 32.75 29.651 32.8698 29.8906 33.1094C30.1302 33.349 30.25 33.6458 30.25 34C30.25 34.3542 30.1302 34.651 29.8906 34.8906C29.651 35.1302 29.3542 35.25 29 35.25H19C18.6458 35.25 18.349 35.1302 18.1094 34.8906C17.8698 34.651 17.75 34.3542 17.75 34C17.75 33.6458 17.8698 33.349 18.1094 33.1094C18.349 32.8698 18.6458 32.75 19 32.75H22.75ZM17.75 22.5V17.75H15.25V19C15.25 19.7917 15.4792 20.5052 15.9375 21.1406C16.3958 21.776 17 22.2292 17.75 22.5ZM24 26.5C25.0417 26.5 25.9271 26.1354 26.6562 25.4062C27.3854 24.6771 27.75 23.7917 27.75 22.75V15.25H20.25V22.75C20.25 23.7917 20.6146 24.6771 21.3438 25.4062C22.0729 26.1354 22.9583 26.5 24 26.5ZM30.25 22.5C31 22.2292 31.6042 21.776 32.0625 21.1406C32.5208 20.5052 32.75 19.7917 32.75 19V17.75H30.25V22.5Z" fill="white"/>
 </g>
 </svg>
--- a/docs/public/hero-chart-dark.svg
+++ b/docs/public/hero-chart-dark.svg
--- a/docs/public/hero-chart.svg
+++ b/docs/public/hero-chart.svg
--- a/docs/public/icons/ai-diagram.svg
+++ b/docs/public/icons/ai-diagram.svg
@@ -0,0 +1,19 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
  <mask
    id="mask0_89_26528"
    style="mask-type: alpha"
    maskUnits="userSpaceOnUse"
    x="0"
    y="0"
    width="20"
    height="20"
  >
    <rect width="20" height="20" fill="currentColor" />
  </mask>
  <g mask="url(#mask0_89_26528)">
    <path
      d="M10.25 12.9792C11.2083 12.9792 12.0312 12.6667 12.7188 12.0417C13.4062 11.4167 13.75 10.6671 13.75 9.79292C13.75 9.01431 13.4965 8.35069 12.9896 7.80208C12.4826 7.25347 11.8747 6.97917 11.1656 6.97917C10.5248 6.97917 9.98285 7.1875 9.53979 7.60417C9.0966 8.02083 8.875 8.52083 8.875 9.10417C8.875 9.38194 8.92528 9.63847 9.02583 9.87375C9.12639 10.109 9.27056 10.3247 9.45833 10.5208L10.5208 9.45833C10.4722 9.41667 10.4358 9.36458 10.4115 9.30208C10.3872 9.23958 10.375 9.17687 10.375 9.11396C10.375 8.94076 10.4514 8.79167 10.6042 8.66667C10.7569 8.54167 10.9444 8.47917 11.1667 8.47917C11.4583 8.47917 11.7118 8.60806 11.9271 8.86583C12.1424 9.12361 12.25 9.43222 12.25 9.79167C12.25 10.25 12.0521 10.6458 11.6562 10.9792C11.2604 11.3125 10.7933 11.4792 10.255 11.4792C9.57111 11.4792 8.98264 11.191 8.48958 10.6146C7.99653 10.0382 7.75 9.35417 7.75 8.5625C7.75 8.13514 7.82986 7.72625 7.98958 7.33583C8.14931 6.94528 8.38194 6.59722 8.6875 6.29167L7.625 5.25C7.18056 5.69444 6.84028 6.20139 6.60417 6.77083C6.36806 7.34028 6.25 7.9375 6.25 8.5625C6.25 9.78472 6.63889 10.8264 7.41667 11.6875C8.19444 12.5486 9.13889 12.9792 10.25 12.9792ZM5.5 18V14.3542C4.70833 13.6875 4.09375 12.8849 3.65625 11.9465C3.21875 11.008 3 10.0189 3 8.97917C3 7.04056 3.68257 5.39271 5.04771 4.03563C6.41285 2.67854 8.07056 2 10.0208 2C11.5347 2 12.8958 2.40625 14.1042 3.21875C15.3125 4.03125 16.1111 5.09028 16.5 6.39583L17.875 11.0417C17.9444 11.2844 17.9062 11.5049 17.7604 11.7029C17.6146 11.901 17.4167 12 17.1667 12H16V14.5C16 14.9125 15.8531 15.2656 15.5594 15.5594C15.2656 15.8531 14.9125 16 14.5 16H12.5V18H11V14.5H14.5V10.5H16.1667L15.0833 6.89583C14.7778 5.89583 14.1562 5.07986 13.2188 4.44792C12.2812 3.81597 11.2153 3.5 10.0208 3.5C8.47917 3.5 7.17361 4.03215 6.10417 5.09646C5.03472 6.16076 4.5 7.455 4.5 8.97917C4.5 9.79764 4.67361 10.5751 5.02083 11.3117C5.36806 12.0483 5.85417 12.6806 6.47917 13.2083L7 13.6667V18H5.5Z"
      fill="currentColor"
    />
  </g>
 </svg>
--- a/docs/public/icons/ai-repair.svg
+++ b/docs/public/icons/ai-repair.svg
@@ -0,0 +1,19 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
  <mask
    id="mask0_89_26616"
    style="mask-type: alpha"
    maskUnits="userSpaceOnUse"
    x="0"
    y="0"
    width="20"
    height="20"
  >
    <rect width="20" height="20" fill="currentColor" />
  </mask>
  <g mask="url(#mask0_89_26616)">
    <path
      d="M4 16.9999V14.4999H5.875L4.4375 8.77077C3.99306 8.56244 3.64236 8.25341 3.38542 7.84369C3.12847 7.43396 3 6.98605 3 6.49993C3 5.7916 3.24306 5.19785 3.72917 4.71868C4.21528 4.23952 4.8125 3.99993 5.52083 3.99993C6.0625 3.99993 6.55208 4.15966 6.98958 4.4791C7.42708 4.79855 7.72222 5.22216 7.875 5.74993H9.5V4.74993C9.5 4.5416 9.57292 4.36452 9.71875 4.21868C9.86458 4.07285 10.0417 3.99993 10.25 3.99993C10.4583 3.99993 10.6354 4.07285 10.7812 4.21868C10.9271 4.36452 11 4.5416 11 4.74993V4.89577L13 3.18743C13.1111 3.09021 13.2361 3.03466 13.375 3.02077C13.5139 3.00688 13.6528 3.02771 13.7917 3.08327L16.5625 4.33327C16.7569 4.4166 16.8924 4.55202 16.9688 4.73952C17.0451 4.92702 17.0347 5.11799 16.9375 5.31243C16.8542 5.49299 16.7153 5.61799 16.5208 5.68743C16.3264 5.75688 16.1319 5.75688 15.9375 5.68743L13.6042 4.64577L11.4167 6.49993L13.6042 8.37494L15.9375 7.33327C16.1319 7.24993 16.3229 7.24299 16.5104 7.31244C16.6979 7.38188 16.8403 7.51382 16.9375 7.70827C17.0208 7.88882 17.0243 8.06938 16.9479 8.24994C16.8715 8.43049 16.7431 8.57632 16.5625 8.68744L13.7917 9.93744C13.6667 10.0069 13.5312 10.0312 13.3854 10.0104C13.2396 9.98952 13.1111 9.93049 13 9.83327L11 8.12494V8.24994C11 8.45827 10.9271 8.63535 10.7812 8.78119C10.6354 8.92702 10.4583 8.99994 10.25 8.99994C10.0417 8.99994 9.86458 8.92702 9.71875 8.78119C9.57292 8.63535 9.5 8.45827 9.5 8.24994V7.24994H7.875C7.81944 7.44438 7.73958 7.62146 7.63542 7.78119C7.53125 7.94091 7.40972 8.09716 7.27083 8.24994L10.8542 14.4999H14V16.9999H4ZM5.5 7.62494C5.81944 7.62494 6.08681 7.5173 6.30208 7.30202C6.51736 7.08674 6.625 6.81938 6.625 6.49993C6.625 6.19438 6.51736 5.93396 6.30208 5.71868C6.08681 5.50341 5.81944 5.39577 5.5 5.39577C5.18056 5.39577 4.91319 5.50341 4.69792 5.71868C4.48264 5.93396 4.375 6.19438 4.375 6.49993C4.375 6.81938 4.48264 7.08674 4.69792 7.30202C4.91319 7.5173 5.18056 7.62494 5.5 7.62494ZM7.41667 14.4999H9.125L6.08333 9.18744L7.41667 14.4999Z"
      fill="currentColor"
    />
  </g>
 </svg>
--- a/docs/public/icons/comment.svg
+++ b/docs/public/icons/comment.svg
@@ -0,0 +1,19 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
  <mask
    id="mask0_89_26596"
    style="mask-type: alpha"
    maskUnits="userSpaceOnUse"
    x="0"
    y="0"
    width="20"
    height="20"
  >
    <rect width="20" height="20" fill="currentColor" />
  </mask>
  <g mask="url(#mask0_89_26596)">
    <path
      d="M5 12H15V10.5H5V12ZM5 9.25H15V7.75H5V9.25ZM5 6.5H15V5H5V6.5ZM18 18L15 15H3.5C3.0875 15 2.73438 14.8531 2.44063 14.5594C2.14688 14.2656 2 13.9125 2 13.5V3.5C2 3.0875 2.14688 2.73438 2.44063 2.44063C2.73438 2.14688 3.0875 2 3.5 2H16.5C16.9125 2 17.2656 2.14688 17.5594 2.44063C17.8531 2.73438 18 3.0875 18 3.5V18ZM3.5 13.5H15.625L16.5 14.375V3.5H3.5V13.5Z"
      fill="currentColor"
    />
  </g>
 </svg>
--- a/docs/public/icons/folder.svg
+++ b/docs/public/icons/folder.svg
@@ -0,0 +1,11 @@
 <svg
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 -960 960 960"
  width="24px"
  fill="currentColor"
 >
  <path
    d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H447l-80-80H160v480Zm0 0v-480 480Z"
  />
 </svg>
--- a/docs/public/icons/group.svg
+++ b/docs/public/icons/group.svg
@@ -0,0 +1,11 @@
 <svg
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 -960 960 960"
  width="24px"
  fill="currentColor"
 >
  <path
    d="M40-160v-112q0-34 17.5-62.5T104-378q62-31 126-46.5T360-440q66 0 130 15.5T616-378q29 15 46.5 43.5T680-272v112H40Zm720 0v-120q0-44-24.5-84.5T666-434q51 6 96 20.5t84 35.5q36 20 55 44.5t19 53.5v120H760ZM360-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Zm400-160q0 66-47 113t-113 47q-11 0-28-2.5t-28-5.5q27-32 41.5-71t14.5-81q0-42-14.5-81T544-792q14-5 28-6.5t28-1.5q66 0 113 47t47 113ZM120-240h480v-32q0-11-5.5-20T580-306q-54-27-109-40.5T360-360q-56 0-111 13.5T140-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T440-640q0-33-23.5-56.5T360-720q-33 0-56.5 23.5T280-640q0 33 23.5 56.5T360-560Zm0 320Zm0-400Z"
  />
 </svg>
--- a/docs/public/icons/groups.svg
+++ b/docs/public/icons/groups.svg
@@ -0,0 +1,19 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
  <mask
    id="mask0_89_26621"
    style="mask-type: alpha"
    maskUnits="userSpaceOnUse"
    x="0"
    y="0"
    width="20"
    height="20"
  >
    <rect width="20" height="20" fill="currentColor" />
  </mask>
  <g mask="url(#mask0_89_26621)">
    <path
      d="M3.5 11.5L5.5 9.5L3.5 7.5L1.5 9.5L3.5 11.5ZM14.5 11.5L16.5 8L18.5 11.5H14.5ZM9.98958 10.5C9.30208 10.5 8.71528 10.2569 8.22917 9.77083C7.74306 9.28472 7.5 8.69444 7.5 8C7.5 7.30556 7.74306 6.71528 8.22917 6.22917C8.71528 5.74306 9.30556 5.5 10 5.5C10.6944 5.5 11.2847 5.74306 11.7708 6.22917C12.2569 6.71528 12.5 7.30903 12.5 8.01042C12.5 8.69792 12.2569 9.28472 11.7708 9.77083C11.2847 10.2569 10.691 10.5 9.98958 10.5ZM10 7C9.71667 7 9.47917 7.09583 9.2875 7.2875C9.09583 7.47917 9 7.71667 9 8C9 8.28333 9.09583 8.52083 9.2875 8.7125C9.47917 8.90417 9.71667 9 10 9C10.2833 9 10.5208 8.90417 10.7125 8.7125C10.9042 8.52083 11 8.28333 11 8C11 7.71667 10.9042 7.47917 10.7125 7.2875C10.5208 7.09583 10.2833 7 10 7ZM0 15.5V14.25C0 13.5139 0.34375 12.9722 1.03125 12.625C1.71875 12.2778 2.54167 12.1042 3.5 12.1042C3.70833 12.1042 3.91667 12.1146 4.125 12.1354C4.33333 12.1563 4.54167 12.1875 4.75 12.2292C4.5 12.4792 4.3125 12.7951 4.1875 13.1771C4.0625 13.559 4 13.9167 4 14.25V15.5H0ZM5 15.5V14.2604C5 13.434 5.42361 12.7674 6.27083 12.2604C7.11806 11.7535 8.36111 11.5 10 11.5C11.6389 11.5 12.8819 11.7528 13.7292 12.2585C14.5764 12.7644 15 13.4282 15 14.25V15.5H5ZM16.5 12.1042C17.4583 12.1042 18.2812 12.2778 18.9688 12.625C19.6562 12.9722 20 13.5139 20 14.25V15.5H16V14.25C16 13.9167 15.941 13.559 15.8229 13.1771C15.7049 12.7951 15.5139 12.4792 15.25 12.2292C15.4583 12.1875 15.6652 12.1563 15.8706 12.1354C16.0759 12.1146 16.2857 12.1042 16.5 12.1042ZM10 13C9.11111 13 8.40972 13.0799 7.89583 13.2396C7.38194 13.3993 6.93056 13.6528 6.54167 14H13.4583C13.0556 13.6528 12.6007 13.3993 12.0938 13.2396C11.5868 13.0799 10.8889 13 10 13Z"
      fill="currentColor"
    />
  </g>
 </svg>
--- a/docs/public/icons/open-source.svg
+++ b/docs/public/icons/open-source.svg
@@ -0,0 +1,11 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
  <!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE -->
  <path
    fill="none"
    stroke="currentColor"
    stroke-linecap="round"
    stroke-linejoin="round"
    stroke-width="2"
    d="M12 3a9 9 0 0 1 3.618 17.243l-2.193-5.602a3 3 0 1 0-2.849 0l-2.193 5.603A9 9 0 0 1 12 3"
  />
 </svg>
--- a/docs/public/icons/plugins.svg
+++ b/docs/public/icons/plugins.svg
@@ -0,0 +1,19 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
  <mask
    id="mask0_89_26548"
    style="mask-type: alpha"
    maskUnits="userSpaceOnUse"
    x="0"
    y="0"
    width="20"
    height="20"
  >
    <rect width="20" height="20" fill="currentColor" />
  </mask>
  <g mask="url(#mask0_89_26548)">
    <path
      d="M8 17H4.5C4.0875 17 3.73437 16.8531 3.44062 16.5594C3.14687 16.2656 3 15.9125 3 15.5V12C3.55556 11.9722 4.02778 11.7674 4.41667 11.3854C4.80556 11.0035 5 10.5417 5 10C5 9.45833 4.80556 8.99653 4.41667 8.61458C4.02778 8.23264 3.55556 8.02778 3 8V4.5C3 4.0875 3.14687 3.73438 3.44062 3.44063C3.73437 3.14688 4.0875 3 4.5 3H8C8 2.44444 8.19285 1.97222 8.57854 1.58333C8.96438 1.19444 9.4366 1 9.99521 1C10.554 1 11.0278 1.19333 11.4167 1.58C11.8056 1.96667 12 2.44 12 3H15.5C15.9125 3 16.2656 3.14688 16.5594 3.44063C16.8531 3.73438 17 4.0875 17 4.5V8C17.5556 8 18.0278 8.19285 18.4167 8.57854C18.8056 8.96438 19 9.4366 19 9.99521C19 10.554 18.8067 11.0278 18.42 11.4167C18.0333 11.8056 17.56 12 17 12V15.5C17 15.9125 16.8531 16.2656 16.5594 16.5594C16.2656 16.8531 15.9125 17 15.5 17H12C11.9722 16.4444 11.7682 15.9722 11.3879 15.5833C11.0076 15.1944 10.5458 15 10.0025 15C9.45917 15 8.99653 15.1944 8.61458 15.5833C8.23264 15.9722 8.02778 16.4444 8 17ZM4.5 15.5H6.83333C7.11111 14.875 7.53819 14.3854 8.11458 14.0312C8.69097 13.6771 9.31944 13.5 10 13.5C10.6806 13.5 11.309 13.6771 11.8854 14.0312C12.4618 14.3854 12.8889 14.875 13.1667 15.5H15.5V10.5H17C17.1333 10.5 17.25 10.45 17.35 10.35C17.45 10.25 17.5 10.1333 17.5 10C17.5 9.86667 17.45 9.75 17.35 9.65C17.25 9.55 17.1333 9.5 17 9.5H15.5V4.5H10.5V3C10.5 2.86667 10.45 2.75 10.35 2.65C10.25 2.55 10.1333 2.5 10 2.5C9.86667 2.5 9.75 2.55 9.65 2.65C9.55 2.75 9.5 2.86667 9.5 3V4.5H4.5V6.83333C5.125 7.11111 5.61458 7.53819 5.96875 8.11458C6.32292 8.69097 6.5 9.31944 6.5 10C6.5 10.6974 6.32292 11.3335 5.96875 11.9083C5.61458 12.4833 5.125 12.9028 4.5 13.1667V15.5Z"
      fill="currentColor"
    />
  </g>
 </svg>
--- a/docs/public/icons/presentation.svg
+++ b/docs/public/icons/presentation.svg
@@ -0,0 +1,19 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
  <mask
    id="mask0_89_26538"
    style="mask-type: alpha"
    maskUnits="userSpaceOnUse"
    x="0"
    y="0"
    width="20"
    height="20"
  >
    <rect width="20" height="20" fill="currentColor" />
  </mask>
  <g mask="url(#mask0_89_26538)">
    <path
      d="M8 13.5L13.5 10L8 6.5V13.5ZM4.5 17C4.0875 17 3.73437 16.8531 3.44062 16.5594C3.14687 16.2656 3 15.9125 3 15.5V4.5C3 4.0875 3.14687 3.73438 3.44062 3.44063C3.73437 3.14688 4.0875 3 4.5 3H15.5C15.9125 3 16.2656 3.14688 16.5594 3.44063C16.8531 3.73438 17 4.0875 17 4.5V15.5C17 15.9125 16.8531 16.2656 16.5594 16.5594C16.2656 16.8531 15.9125 17 15.5 17H4.5ZM4.5 15.5H15.5V4.5H4.5V15.5Z"
      fill="currentColor"
    />
  </g>
 </svg>
--- a/docs/public/icons/public.svg
+++ b/docs/public/icons/public.svg
@@ -0,0 +1,11 @@
 <svg
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 -960 960 960"
  width="24px"
  fill="currentColor"
 >
  <path
    d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm-40-82v-78q-33 0-56.5-23.5T360-320v-40L168-552q-3 18-5.5 36t-2.5 36q0 121 79.5 212T440-162Zm276-102q41-45 62.5-100.5T800-480q0-98-54.5-179T600-776v16q0 33-23.5 56.5T520-680h-80v80q0 17-11.5 28.5T400-560h-80v80h240q17 0 28.5 11.5T600-440v120h40q26 0 47 15.5t29 40.5Z"
  />
 </svg>
--- a/docs/public/icons/terminal.svg
+++ b/docs/public/icons/terminal.svg
@@ -0,0 +1,11 @@
 <svg
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 -960 960 960"
  width="24px"
  fill="currentColor"
 >
  <path
    d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H160v400Zm140-40-56-56 103-104-104-104 57-56 160 160-160 160Zm180 0v-80h240v80H480Z"
  />
 </svg>
--- a/docs/public/icons/version-history.svg
+++ b/docs/public/icons/version-history.svg
@@ -0,0 +1,19 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
  <mask
    id="mask0_89_26543"
    style="mask-type: alpha"
    maskUnits="userSpaceOnUse"
    x="0"
    y="0"
    width="20"
    height="20"
  >
    <rect width="20" height="20" fill="currentColor" />
  </mask>
  <g mask="url(#mask0_89_26543)">
    <path
      d="M10 17C8.05556 17 6.40278 16.3194 5.04167 14.9583C3.68056 13.5972 3 11.9444 3 10H4.5C4.5 11.5139 5.03819 12.809 6.11458 13.8854C7.19097 14.9618 8.48611 15.5 10 15.5C11.5139 15.5 12.809 14.9618 13.8854 13.8854C14.9618 12.809 15.5 11.5139 15.5 10C15.5 8.48611 14.9618 7.19097 13.8854 6.11458C12.809 5.03819 11.5139 4.5 10 4.5C9.13889 4.5 8.3434 4.67778 7.61354 5.03333C6.88382 5.38889 6.26958 5.87778 5.77083 6.5H8V8H3V3H4.5V5.70833C5.13889 4.875 5.93403 4.21528 6.88542 3.72917C7.83681 3.24306 8.875 3 10 3C10.9722 3 11.8828 3.18472 12.7319 3.55417C13.581 3.92361 14.3199 4.42271 14.9485 5.05146C15.5773 5.68007 16.0764 6.41896 16.4458 7.26813C16.8153 8.11715 17 9.02778 17 10C17 10.9722 16.8153 11.8828 16.4458 12.7319C16.0764 13.581 15.5773 14.3199 14.9485 14.9485C14.3199 15.5773 13.581 16.0764 12.7319 16.4458C11.8828 16.8153 10.9722 17 10 17ZM12.0833 12.8333L9.25 10V6H10.75V9.375L13.1458 11.7708L12.0833 12.8333Z"
      fill="currentColor"
    />
  </g>
 </svg>
--- a/docs/public/icons/whiteboard.svg
+++ b/docs/public/icons/whiteboard.svg
@@ -0,0 +1,19 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
  <mask
    id="mask0_89_26533"
    style="mask-type: alpha"
    maskUnits="userSpaceOnUse"
    x="0"
    y="0"
    width="20"
    height="20"
  >
    <rect width="20" height="20" fill="currentColor" />
  </mask>
  <g mask="url(#mask0_89_26533)">
    <path
      d="M6.54165 17L5.83332 16.2917L4.56249 17.5625C4.27082 17.8542 3.91665 18 3.49999 18C3.08332 18 2.72915 17.8542 2.43749 17.5625C2.15971 17.2569 2.01735 16.8993 2.0104 16.4896C2.00346 16.0799 2.14582 15.7292 2.43749 15.4375L3.70832 14.1667L2.99999 13.4583L13.0208 3.4375C13.3125 3.14583 13.6632 3 14.0729 3C14.4826 3 14.8403 3.14583 15.1458 3.4375L16.5625 4.85417C16.8542 5.13194 17 5.47917 17 5.89583C17 6.3125 16.8542 6.66667 16.5625 6.95833L6.54165 17ZM9.27082 9.33333L5.12499 13.4583L6.54165 14.875L10.6875 10.7292L9.27082 9.33333Z"
      fill="#2B2542"
    />
  </g>
 </svg>
--- a/docs/public/mermaid-logo-horizontal.svg
+++ b/docs/public/mermaid-logo-horizontal.svg
@@ -0,0 +1,11 @@
 <svg width="1200" height="630" viewBox="0 0 1200 630" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_1_2)">
 <rect width="1200" height="630" fill="#FF3670"/>
 <path d="M807.836 142.655C715.59 138.706 630.888 195.464 599.461 282.281C568.034 195.464 483.332 138.706 391.086 142.655C388.013 215.854 423.032 285.658 483.546 326.958C514.556 348.257 533.087 383.583 532.984 421.202V486.46H665.951V421.202C665.843 383.585 684.37 348.258 715.376 326.958C775.907 285.674 810.931 215.859 807.836 142.655Z" fill="white"/>
 </g>
 <defs>
 <clipPath id="clip0_1_2">
 <rect width="1200" height="630" fill="white"/>
 </clipPath>
 </defs>
 </svg>
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -1949,7 +1949,7 @@ flowchart TD
 There are two ways to display these FontAwesome icons:
-### Register FontAwesome icon packs (v\<MERMAID_RELEASE_VERSION>+)
+### Register FontAwesome icon packs (v11.7.0+)
 You can register your own FontAwesome icon pack following the ["Registering icon packs" instructions](../config/icons.md).
--- a/docs/syntax/packet.md
+++ b/docs/syntax/packet.md
@@ -23,7 +23,7 @@ start-end: "Block name" %% Multi-bit blocks
 ... More Fields ...
 ```
-### Bits Syntax (v\<MERMAID_RELEASE_VERSION>+)
+### Bits Syntax (v11.7.0+)
 Using start and end bit counts can be difficult, especially when modifying a design. For this we add a bit count field, which starts from the end of the previous field automagically. Use `+<count>` to set the number of bits, thus:
--- a/packages/mermaid-layout-elk/CHANGELOG.md
+++ b/packages/mermaid-layout-elk/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @mermaid-js/layout-elk
 ## 0.1.8
 ### Patch Changes
 - [#6648](https://github.com/mermaid-js/mermaid/pull/6648) [`85c5b9b`](https://github.com/mermaid-js/mermaid/commit/85c5b9b4c064e2edabf21757c8215a1018d4d288) Thanks [@knsv](https://github.com/knsv)! - Make elk respect the order of nodes based from the code
 - Updated dependencies [[`97b79c3`](https://github.com/mermaid-js/mermaid/commit/97b79c3578a2004c63fa32f6d5e17bd8a536e13a), [`b1cf291`](https://github.com/mermaid-js/mermaid/commit/b1cf29127348602137552405e3300dee1697f0de), [`a4754ad`](https://github.com/mermaid-js/mermaid/commit/a4754ad195e70d52fbd46ef44f40797d2d215e41), [`2b05d7e`](https://github.com/mermaid-js/mermaid/commit/2b05d7e1edef635e6c80cb383b10ea0a89279f41), [`41e84b7`](https://github.com/mermaid-js/mermaid/commit/41e84b726a1f2df002b77c4b0071e2c15e47838e), [`d63d3bf`](https://github.com/mermaid-js/mermaid/commit/d63d3bf1e7596ac7eeb24ba06cbc7a70f9c8b070), [`aa6cb86`](https://github.com/mermaid-js/mermaid/commit/aa6cb86899968c65561eebfc1d54dd086b1518a2), [`df9df9d`](https://github.com/mermaid-js/mermaid/commit/df9df9dc32b80a8c320cc0efd5483b9485f15bde), [`cdbd3e5`](https://github.com/mermaid-js/mermaid/commit/cdbd3e58a3a35d63a79258115dedca4a535c1038), [`c17277e`](https://github.com/mermaid-js/mermaid/commit/c17277e743b1c12e4134fba44c62a7d5885f2574), [`a1ba65c`](https://github.com/mermaid-js/mermaid/commit/a1ba65c0c08432ec36e772570c3a5899cb57c102), [`1ddaf10`](https://github.com/mermaid-js/mermaid/commit/1ddaf10b89d8c7311c5e10d466b42fa36b61210b), [`ca80f71`](https://github.com/mermaid-js/mermaid/commit/ca80f719eac86cf4c31392105d5d896f39b84bbc), [`bca6ed6`](https://github.com/mermaid-js/mermaid/commit/bca6ed67c3e0db910bf498fdd0fc0346c02d392b)]:
  - mermaid@11.7.0
 ## 0.1.7
 ### Patch Changes
--- a/packages/mermaid-layout-elk/package.json
+++ b/packages/mermaid-layout-elk/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@mermaid-js/layout-elk",
-  "version": "0.1.7",
+  "version": "0.1.8",
  "description": "ELK layout engine for mermaid",
  "module": "dist/mermaid-layout-elk.core.mjs",
  "types": "dist/layouts.d.ts",
--- a/packages/mermaid-layout-elk/src/render.ts
+++ b/packages/mermaid-layout-elk/src/render.ts
@@ -766,6 +766,7 @@ export const render = async (
    id: 'root',
    layoutOptions: {
      'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
      'elk.layered.crossingMinimization.forceNodeModelOrder': true,
      'elk.algorithm': algorithm,
      'nodePlacement.strategy': data4Layout.config.elk?.nodePlacementStrategy,
      'elk.layered.mergeEdges': data4Layout.config.elk?.mergeEdges,
@@ -780,7 +781,6 @@ export const render = async (
      // 'spacing.edgeEdge': 10,
      // 'spacing.edgeEdgeBetweenLayers': 20,
      // 'spacing.nodeSelfLoop': 20,
      // Tweaking options
      // 'elk.layered.nodePlacement.favorStraightEdges': true,
      // 'nodePlacement.feedbackEdges': true,
--- a/packages/mermaid-zenuml/CHANGELOG.md
+++ b/packages/mermaid-zenuml/CHANGELOG.md
@@ -0,0 +1,14 @@
 # @mermaid-js/mermaid-zenuml
 ## 0.2.1
 ### Patch Changes
 - [#6581](https://github.com/mermaid-js/mermaid/pull/6581) [`941bc69`](https://github.com/mermaid-js/mermaid/commit/941bc698350bd103b2a431ed8fed0c7b0d92fff0) Thanks [@MrCoder](https://github.com/MrCoder)! - Upgraded the dependency @zenuml/core
 - [#6319](https://github.com/mermaid-js/mermaid/pull/6319) [`9d06d8f`](https://github.com/mermaid-js/mermaid/commit/9d06d8f31e7f12af9e9e092214f907f2dc93ad75) Thanks [@renovate](https://github.com/apps/renovate)! - chore: bump minimum ZenUML version to 3.23.28
 - [#5737](https://github.com/mermaid-js/mermaid/pull/5737) [`0ad44c1`](https://github.com/mermaid-js/mermaid/commit/0ad44c12feead9d20c6a870a49327ada58d6e657) Thanks [@sidharthv96](https://github.com/sidharthv96)! - fix(zenuml): limit `peerDependencies` to Mermaid v10 and v11
 - Updated dependencies [[`97b79c3`](https://github.com/mermaid-js/mermaid/commit/97b79c3578a2004c63fa32f6d5e17bd8a536e13a), [`b1cf291`](https://github.com/mermaid-js/mermaid/commit/b1cf29127348602137552405e3300dee1697f0de), [`a4754ad`](https://github.com/mermaid-js/mermaid/commit/a4754ad195e70d52fbd46ef44f40797d2d215e41), [`2b05d7e`](https://github.com/mermaid-js/mermaid/commit/2b05d7e1edef635e6c80cb383b10ea0a89279f41), [`41e84b7`](https://github.com/mermaid-js/mermaid/commit/41e84b726a1f2df002b77c4b0071e2c15e47838e), [`d63d3bf`](https://github.com/mermaid-js/mermaid/commit/d63d3bf1e7596ac7eeb24ba06cbc7a70f9c8b070), [`aa6cb86`](https://github.com/mermaid-js/mermaid/commit/aa6cb86899968c65561eebfc1d54dd086b1518a2), [`df9df9d`](https://github.com/mermaid-js/mermaid/commit/df9df9dc32b80a8c320cc0efd5483b9485f15bde), [`cdbd3e5`](https://github.com/mermaid-js/mermaid/commit/cdbd3e58a3a35d63a79258115dedca4a535c1038), [`c17277e`](https://github.com/mermaid-js/mermaid/commit/c17277e743b1c12e4134fba44c62a7d5885f2574), [`a1ba65c`](https://github.com/mermaid-js/mermaid/commit/a1ba65c0c08432ec36e772570c3a5899cb57c102), [`1ddaf10`](https://github.com/mermaid-js/mermaid/commit/1ddaf10b89d8c7311c5e10d466b42fa36b61210b), [`ca80f71`](https://github.com/mermaid-js/mermaid/commit/ca80f719eac86cf4c31392105d5d896f39b84bbc), [`bca6ed6`](https://github.com/mermaid-js/mermaid/commit/bca6ed67c3e0db910bf498fdd0fc0346c02d392b)]:
  - mermaid@11.7.0
--- a/packages/mermaid-zenuml/package.json
+++ b/packages/mermaid-zenuml/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@mermaid-js/mermaid-zenuml",
-  "version": "0.3.0",
+  "version": "0.2.1",
  "description": "MermaidJS plugin for ZenUML integration",
  "module": "dist/mermaid-zenuml.core.mjs",
  "types": "dist/detector.d.ts",
--- a/packages/mermaid/CHANGELOG.md
+++ b/packages/mermaid/CHANGELOG.md
@@ -1,5 +1,44 @@
 # mermaid
 ## 11.7.0
 ### Minor Changes
 - [#6479](https://github.com/mermaid-js/mermaid/pull/6479) [`97b79c3`](https://github.com/mermaid-js/mermaid/commit/97b79c3578a2004c63fa32f6d5e17bd8a536e13a) Thanks [@monicanguyen25](https://github.com/monicanguyen25)! - feat: Add Vertical Line To Gantt Plot At Specified Time
 - [#6225](https://github.com/mermaid-js/mermaid/pull/6225) [`41e84b7`](https://github.com/mermaid-js/mermaid/commit/41e84b726a1f2df002b77c4b0071e2c15e47838e) Thanks [@Shahir-47](https://github.com/Shahir-47)! - feat: Add support for styling Journey Diagram title (color, font-family, and font-size)
 - [#6423](https://github.com/mermaid-js/mermaid/pull/6423) [`aa6cb86`](https://github.com/mermaid-js/mermaid/commit/aa6cb86899968c65561eebfc1d54dd086b1518a2) Thanks [@BambioGaming](https://github.com/BambioGaming)! - Added support for the click directive in stateDiagram syntax
 - [#5980](https://github.com/mermaid-js/mermaid/pull/5980) [`df9df9d`](https://github.com/mermaid-js/mermaid/commit/df9df9dc32b80a8c320cc0efd5483b9485f15bde) Thanks [@BryanCrotazGivEnergy](https://github.com/BryanCrotazGivEnergy)! - feat: Add shorter `+<count>: Label` syntax in packet diagram
 - [#6523](https://github.com/mermaid-js/mermaid/pull/6523) [`c17277e`](https://github.com/mermaid-js/mermaid/commit/c17277e743b1c12e4134fba44c62a7d5885f2574) Thanks [@NourBenz](https://github.com/NourBenz)! - fix: allow sequence diagram arrows with a trailing colon but no message
 - [#6475](https://github.com/mermaid-js/mermaid/pull/6475) [`a1ba65c`](https://github.com/mermaid-js/mermaid/commit/a1ba65c0c08432ec36e772570c3a5899cb57c102) Thanks [@Shahir-47](https://github.com/Shahir-47)! - feat: Dynamically Render Data Labels Within Bar Charts
 ### Patch Changes
 - [#6588](https://github.com/mermaid-js/mermaid/pull/6588) [`b1cf291`](https://github.com/mermaid-js/mermaid/commit/b1cf29127348602137552405e3300dee1697f0de) Thanks [@omkarht](https://github.com/omkarht)! - Fix stroke styles for ER diagram to correctly apply path and row-specific styles
 - [#6296](https://github.com/mermaid-js/mermaid/pull/6296) [`a4754ad`](https://github.com/mermaid-js/mermaid/commit/a4754ad195e70d52fbd46ef44f40797d2d215e41) Thanks [@sidharthv96](https://github.com/sidharthv96)! - chore: Convert StateDB into TypeScript
 - [#6463](https://github.com/mermaid-js/mermaid/pull/6463) [`2b05d7e`](https://github.com/mermaid-js/mermaid/commit/2b05d7e1edef635e6c80cb383b10ea0a89279f41) Thanks [@AaronMoat](https://github.com/AaronMoat)! - fix: Remove incorrect `style="undefined;"` attributes in some Mermaid diagrams
 - [#6282](https://github.com/mermaid-js/mermaid/pull/6282) [`d63d3bf`](https://github.com/mermaid-js/mermaid/commit/d63d3bf1e7596ac7eeb24ba06cbc7a70f9c8b070) Thanks [@saurabhg772244](https://github.com/saurabhg772244)! - FontAwesome icons can now be embedded as SVGs in flowcharts if they are registered via `mermaid.registerIconPacks`.
 - [#6407](https://github.com/mermaid-js/mermaid/pull/6407) [`cdbd3e5`](https://github.com/mermaid-js/mermaid/commit/cdbd3e58a3a35d63a79258115dedca4a535c1038) Thanks [@thomascizeron](https://github.com/thomascizeron)! - Refactor grammar so that title don't break Architecture Diagrams
 - [#6343](https://github.com/mermaid-js/mermaid/pull/6343) [`1ddaf10`](https://github.com/mermaid-js/mermaid/commit/1ddaf10b89d8c7311c5e10d466b42fa36b61210b) Thanks [@jeswr](https://github.com/jeswr)! - fix: allow colons in events
 - [#6616](https://github.com/mermaid-js/mermaid/pull/6616) [`ca80f71`](https://github.com/mermaid-js/mermaid/commit/ca80f719eac86cf4c31392105d5d896f39b84bbc) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - fix(timeline): ensure consistent vertical line lengths with visible arrowheads
  Fixed timeline diagrams where vertical dashed lines from tasks had inconsistent lengths. All vertical lines now extend to the same depth regardless of the number of events in each column, with sufficient padding to clearly display both the dashed line pattern and complete arrowheads.
 - [#6566](https://github.com/mermaid-js/mermaid/pull/6566) [`bca6ed6`](https://github.com/mermaid-js/mermaid/commit/bca6ed67c3e0db910bf498fdd0fc0346c02d392b) Thanks [@arpitjain099](https://github.com/arpitjain099)! - fix: Fix incomplete string escaping in URL manipulation logic when `arrowMarkerAbsolute: true` by ensuring all unsafe characters are escaped.
 - Updated dependencies [[`df9df9d`](https://github.com/mermaid-js/mermaid/commit/df9df9dc32b80a8c320cc0efd5483b9485f15bde), [`cdbd3e5`](https://github.com/mermaid-js/mermaid/commit/cdbd3e58a3a35d63a79258115dedca4a535c1038)]:
  - @mermaid-js/parser@0.5.0
 ## 11.6.0
 ### Minor Changes
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -1,6 +1,6 @@
 {
  "name": "mermaid",
-  "version": "11.6.0",
+  "version": "11.7.0",
  "description": "Markdown-ish syntax for generating flowcharts, mindmaps, sequence diagrams, class diagrams, gantt charts, git graphs and more.",
  "type": "module",
  "module": "./dist/mermaid.core.mjs",
--- a/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts
+++ b/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts
@@ -126,6 +126,10 @@ export const draw = function (text: string, id: string, version: string, diagObj
      };
      maxEventLineLengthTemp += svgDraw.getVirtualNodeHeight(svg, eventNode, conf);
    }
    // Add spacing between events (10px per event except the last one)
    if (task.events.length > 0) {
      maxEventLineLengthTemp += (task.events.length - 1) * 10;
    }
    maxEventLineLength = Math.max(maxEventLineLength, maxEventLineLengthTemp);
  }
@@ -285,16 +289,9 @@ export const drawTasks = function (
      lineWrapper
        .append('line')
        .attr('x1', masterX + 190 / 2)
-        .attr('y1', masterY + maxTaskHeight) // One section head + one task + margins
+        .attr('y1', masterY + maxTaskHeight) // Start from bottom of task box
-        .attr('x2', masterX + 190 / 2) // Subtract stroke width so arrow point is retained
+        .attr('x2', masterX + 190 / 2) // Same x coordinate for vertical line
-        .attr(
+        .attr('y2', masterY + maxTaskHeight + 100 + maxEventLineLength + 100) // End at consistent depth with ample padding for visible dashed lines and arrowheads
          'y2',
          masterY +
            maxTaskHeight +
            (isWithoutSections ? maxTaskHeight : maxSectionHeight) +
            maxEventLineLength +
            120
        )
        .attr('stroke-width', 2)
        .attr('stroke', 'black')
        .attr('marker-end', 'url(#arrowhead)')
--- a/packages/mermaid/src/docs/.vitepress/canonical-config.ts
+++ b/packages/mermaid/src/docs/.vitepress/canonical-config.ts
@@ -0,0 +1,149 @@
 import type { CanonicalUrlConfig } from './canonical-urls.js';
 /**
 * Canonical URL configuration for Mermaid documentation
 *
 * This file contains the configuration for generating canonical URLs
 * for the Mermaid documentation site.
 */
 export const canonicalConfig: CanonicalUrlConfig = {
  // Base URL for the Mermaid documentation site
  baseUrl: 'https://docs.mermaidchart.com',
  // Disable automatic generation - only use specificCanonicalUrls
  autoGenerate: false,
  // Patterns for pages to exclude from automatic canonical URL generation
  excludePatterns: [
    // Exclude the main index page (handled by VitePress home layout)
    'index.md',
    // Exclude any draft or temporary files
    'draft-*.md',
    '**/draft-*.md',
    'temp-*.md',
    '**/temp-*.md',
    '*.draft.md',
    '**/*.draft.md',
    // Exclude any test files
    '*.test.md',
    '**/*.test.md',
    '*.spec.md',
    '**/*.spec.md',
    // You can add more patterns here as needed
    // Examples:
    // '**/internal/**',  // Exclude internal documentation
    // '**/archive/**',   // Exclude archived content
  ],
  // URL transformation rules
  transformations: {
    // Remove index.md from URLs (e.g., /intro/index.md -> /intro/)
    //removeIndex: true,
    // Remove .md extension from URLs (e.g., /syntax/flowchart.md -> /syntax/flowchart)
    removeMarkdownExtension: true,
    // Custom path transformations
    customTransforms: [
      // Example: Redirect old paths to new paths
      // { pattern: /^old-syntax\//, replacement: 'syntax/' },
      // Example: Handle special cases
      // { pattern: /^config\/setup\/README$/, replacement: 'config/setup/' },
      // Add your custom transformations here
    ],
  },
 };
 /**
 * Pages that should have specific canonical URLs
 *
 * Since autoGenerate is set to false, ONLY pages listed here will get canonical URLs.
 *
 * Usage: Add entries to this object where the key is the relative path
 * of the markdown file and the value is the desired canonical URL.
 *
 * Examples:
 * - 'intro/index.md': 'https://docs.mermaidchart.com/intro/index.html'
 * - 'syntax/flowchart.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/flowchart.html'
 * - 'config/configuration.md': 'https://docs.mermaidchart.com/mermaid-oss/config/configuration.html'
 */
 export const specificCanonicalUrls: Record<string, string> = {
  // Add your specific canonical URLs here
  // Example:
  // 'syntax/flowchart.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/flowchart.html',
  // Intro section
  'intro/index.md': 'https://docs.mermaidchart.com/intro/index.html',
  'intro/getting-started.md':
    'https://docs.mermaidchart.com/mermaid-oss/intro/getting-started.html',
  'intro/syntax-reference.md':
    'https://docs.mermaidchart.com/mermaid-oss/intro/syntax-reference.html',
  // Syntax section
  'syntax/flowchart.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/flowchart.html',
  'syntax/sequenceDiagram.md':
    'https://docs.mermaidchart.com/mermaid-oss/syntax/sequenceDiagram.html',
  'syntax/classDiagram.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/classDiagram.html',
  'syntax/stateDiagram.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/stateDiagram.html',
  'syntax/entityRelationshipDiagram.md':
    'https://docs.mermaidchart.com/mermaid-oss/syntax/entityRelationshipDiagram.html',
  'syntax/userJourney.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/userJourney.html',
  'syntax/gantt.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/gantt.html',
  'syntax/pie.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/pie.html',
  'syntax/quadrantChart.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/quadrantChart.html',
  'syntax/requirementDiagram.md':
    'https://docs.mermaidchart.com/mermaid-oss/syntax/requirementDiagram.html',
  'syntax/mindmap.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/mindmap.html',
  'syntax/timeline.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/timeline.html',
  'syntax/gitgraph.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/gitgraph.html',
  'syntax/c4.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/c4.html',
  'syntax/sankey.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/sankey.html',
  'syntax/xyChart.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/xyChart.html',
  'syntax/block.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/block.html',
  'syntax/packet.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/packet.html',
  'syntax/kanban.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/kanban.html',
  'syntax/architecture.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/architecture.html',
  'syntax/radar.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/radar.html',
  'syntax/examples.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/examples.html',
  // Config section
  'config/configuration.md': 'https://docs.mermaidchart.com/mermaid-oss/config/configuration.html',
  'config/usage.md': 'https://docs.mermaidchart.com/mermaid-oss/config/usage.html',
  'config/icons.md': 'https://docs.mermaidchart.com/mermaid-oss/config/icons.html',
  'config/directives.md': 'https://docs.mermaidchart.com/mermaid-oss/config/directives.html',
  'config/theming.md': 'https://docs.mermaidchart.com/mermaid-oss/config/theming.html',
  'config/math.md': 'https://docs.mermaidchart.com/mermaid-oss/config/math.html',
  'config/accessibility.md': 'https://docs.mermaidchart.com/mermaid-oss/config/accessibility.html',
  'config/mermaidCLI.md': 'https://docs.mermaidchart.com/mermaid-oss/config/mermaidCLI.html',
  'config/faq.md': 'https://docs.mermaidchart.com/mermaid-oss/config/faq.html',
  // Ecosystem section
  'ecosystem/mermaid-chart.md':
    'https://docs.mermaidchart.com/mermaid-oss/ecosystem/mermaid-chart.html',
  'ecosystem/tutorials.md': 'https://docs.mermaidchart.com/mermaid-oss/ecosystem/tutorials.html',
  'ecosystem/integrations-community.md':
    'https://docs.mermaidchart.com/mermaid-oss/ecosystem/integrations-community.html',
  'ecosystem/integrations-create.md':
    'https://docs.mermaidchart.com/mermaid-oss/ecosystem/integrations-create.html',
  // Community section
  'community/intro.md': 'https://docs.mermaidchart.com/mermaid-oss/community/intro.html',
  'community/contributing.md':
    'https://docs.mermaidchart.com/mermaid-oss/community/contributing.html',
  'community/new-diagram.md':
    'https://docs.mermaidchart.com/mermaid-oss/community/new-diagram.html',
  'community/questions-and-suggestions.md':
    'https://docs.mermaidchart.com/mermaid-oss/community/questions-and-suggestions.html',
  'community/security.md': 'https://docs.mermaidchart.com/mermaid-oss/community/security.html',
 };
 /**
 * Helper function to get canonical URL for a specific page
 * This can be used in frontmatter or for manual overrides
 */
 export function getCanonicalUrl(relativePath: string): string | undefined {
  return specificCanonicalUrls[relativePath];
 }
--- a/packages/mermaid/src/docs/.vitepress/canonical-urls.ts
+++ b/packages/mermaid/src/docs/.vitepress/canonical-urls.ts
@@ -0,0 +1,198 @@
 import type { PageData } from 'vitepress';
 import { canonicalConfig, specificCanonicalUrls } from './canonical-config.js';
 /**
 * Configuration for canonical URL generation
 */
 export interface CanonicalUrlConfig {
  /** Base URL for the site (e.g., 'https://mermaid.js.org') */
  baseUrl: string;
  /** Whether to automatically generate canonical URLs for pages without explicit ones */
  autoGenerate: boolean;
  /** Pages to exclude from automatic canonical URL generation (glob patterns supported) */
  excludePatterns?: string[];
  /** Custom URL transformations */
  transformations?: {
    /** Remove index.md from URLs */
    removeIndex?: boolean;
    /** Remove .md extension from URLs */
    removeMarkdownExtension?: boolean;
    /** Custom path transformations */
    customTransforms?: {
      pattern: RegExp;
      replacement: string;
    }[];
  };
 }
 /**
 * Default configuration for canonical URLs
 */
 const defaultConfig: CanonicalUrlConfig = {
  baseUrl: 'https://mermaid.js.org',
  autoGenerate: true,
  excludePatterns: [
    // Exclude the home page as it's handled separately
    'index.md',
    // Exclude any temporary or draft files
    '**/draft-*',
    '**/temp-*',
  ],
  transformations: {
    removeIndex: true,
    removeMarkdownExtension: true,
    customTransforms: [
      // Transform any special cases here
      // Example: { pattern: /^old-path\//, replacement: 'new-path/' }
    ],
  },
 };
 /**
 * Check if a path matches any of the exclude patterns
 */
 function shouldExcludePath(relativePath: string, excludePatterns: string[] = []): boolean {
  return excludePatterns.some((pattern) => {
    // Convert glob pattern to regex
    const regexPattern = pattern
      .replace(/\*\*/g, '.*')
      .replace(/\*/g, '[^/]*')
      .replace(/\?/g, '.')
      .replace(/\./g, '\\.');
    const regex = new RegExp(`^${regexPattern}$`);
    return regex.test(relativePath);
  });
 }
 /**
 * Transform a relative path to a canonical URL path
 */
 function transformPath(relativePath: string, config: CanonicalUrlConfig): string {
  let transformedPath = relativePath;
  // Apply built-in transformations
  if (config.transformations?.removeMarkdownExtension) {
    transformedPath = transformedPath.replace(/\.md$/, '');
  }
  if (config.transformations?.removeIndex) {
    transformedPath = transformedPath.replace(/\/index$/, '/');
    if (transformedPath === 'index') {
      transformedPath = '';
    }
  }
  // Apply custom transformations
  if (config.transformations?.customTransforms) {
    for (const transform of config.transformations.customTransforms) {
      transformedPath = transformedPath.replace(transform.pattern, transform.replacement);
    }
  }
  // Ensure path starts with /
  if (transformedPath && !transformedPath.startsWith('/')) {
    transformedPath = '/' + transformedPath;
  }
  // Handle root path
  if (!transformedPath) {
    transformedPath = '/';
  }
  return transformedPath;
 }
 /**
 * Generate a canonical URL for a page
 */
 function generateCanonicalUrl(relativePath: string, config: CanonicalUrlConfig): string {
  const transformedPath = transformPath(relativePath, config);
  return config.baseUrl + transformedPath;
 }
 /**
 * VitePress transformPageData hook to add canonical URLs
 */
 export function addCanonicalUrls(pageData: PageData): void {
  const config = canonicalConfig;
  // Check for specific canonical URLs first
  const specificUrl = specificCanonicalUrls[pageData.relativePath];
  if (specificUrl) {
    addCanonicalToHead(pageData, specificUrl);
    return;
  }
  // Skip if canonical URL is already explicitly set in frontmatter
  if (pageData.frontmatter.canonical) {
    // If it's already a full URL, use as-is
    if (pageData.frontmatter.canonical.startsWith('http')) {
      addCanonicalToHead(pageData, pageData.frontmatter.canonical);
      return;
    }
    // If it's a relative path, convert to absolute URL
    const canonicalUrl = config.baseUrl + pageData.frontmatter.canonical;
    addCanonicalToHead(pageData, canonicalUrl);
    return;
  }
  // Skip if canonicalPath is set in frontmatter
  if (pageData.frontmatter.canonicalPath) {
    const canonicalUrl = config.baseUrl + pageData.frontmatter.canonicalPath;
    addCanonicalToHead(pageData, canonicalUrl);
    return;
  }
  // Skip if auto-generation is disabled
  if (!config.autoGenerate) {
    return;
  }
  // Skip if path should be excluded
  if (shouldExcludePath(pageData.relativePath, config.excludePatterns)) {
    return;
  }
  // Generate canonical URL
  const canonicalUrl = generateCanonicalUrl(pageData.relativePath, config);
  addCanonicalToHead(pageData, canonicalUrl);
 }
 /**
 * Add canonical URL to page head
 */
 function addCanonicalToHead(pageData: PageData, canonicalUrl: string): void {
  // Initialize head array if it doesn't exist
  pageData.frontmatter.head = pageData.frontmatter.head || [];
  // Check if canonical link already exists
  const hasCanonical = pageData.frontmatter.head.some(
    (item: any) => Array.isArray(item) && item[0] === 'link' && item[1]?.rel === 'canonical'
  );
  // Add canonical link if it doesn't exist
  if (!hasCanonical) {
    pageData.frontmatter.head.push(['link', { rel: 'canonical', href: canonicalUrl }]);
  }
 }
 /**
 * Utility function to create a custom configuration
 * This can be used to override the default configuration
 */
 export function createCanonicalUrlConfig(
  customConfig: Partial<CanonicalUrlConfig>
 ): CanonicalUrlConfig {
  return {
    ...defaultConfig,
    ...customConfig,
    transformations: {
      ...defaultConfig.transformations,
      ...customConfig.transformations,
      customTransforms: [
        ...(defaultConfig.transformations?.customTransforms || []),
        ...(customConfig.transformations?.customTransforms || []),
      ],
    },
  };
 }
--- a/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue
@@ -0,0 +1,138 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from 'vue';
 interface Feature {
  iconUrl: string;
  featureName: string;
 }
 interface EditorColumn {
  title: string;
  description: string;
  redirectUrl: string;
  highlighted?: boolean;
  features: Feature[];
 }
 const editorColumns: EditorColumn[] = [
  {
    title: 'Playground',
    description: 'Basic features, no login',
    redirectUrl:
      'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=editor_selection&utm_campaign=playground',
    features: [
      { iconUrl: '/icons/public.svg', featureName: 'Diagram stored in URL' },
      { iconUrl: '/icons/terminal.svg', featureName: 'Code editor' },
      { iconUrl: '/icons/whiteboard.svg', featureName: 'Whiteboard' },
    ],
  },
  {
    title: 'Free',
    description: 'Advanced features, free account',
    redirectUrl:
      'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=editor_selection&utm_campaign=mermaid_chart&redirect=%2Fapp%2Fdiagrams%2Fnew',
    highlighted: true,
    features: [
      { iconUrl: '/icons/folder.svg', featureName: 'Storage' },
      { iconUrl: '/icons/terminal.svg', featureName: 'Code editor' },
      { iconUrl: '/icons/ai-diagram.svg', featureName: 'AI diagram generator' },
      { iconUrl: '/icons/whiteboard.svg', featureName: 'Whiteboard' },
      { iconUrl: '/icons/group.svg', featureName: 'Teams' },
      { iconUrl: '/icons/groups.svg', featureName: 'Multi-user editing' },
      { iconUrl: '/icons/ai-repair.svg', featureName: 'AI diagram repair' },
      { iconUrl: '/icons/version-history.svg', featureName: 'Version history' },
      { iconUrl: '/icons/comment.svg', featureName: 'Comments' },
      { iconUrl: '/icons/presentation.svg', featureName: 'Presentations' },
      { iconUrl: '/icons/plugins.svg', featureName: 'Advanced Plugins' },
    ],
  },
  {
    title: 'Open Source',
    description: 'Code only, no login',
    redirectUrl: 'https://mermaid.live/edit',
    features: [
      { iconUrl: '/icons/public.svg', featureName: 'Diagram stored in URL' },
      { iconUrl: '/icons/terminal.svg', featureName: 'Code editor' },
      { iconUrl: '/icons/open-source.svg', featureName: 'Open source' },
      { iconUrl: '/icons/version-history.svg', featureName: 'Version history' },
    ],
  },
 ];
 const isVisible = ref(false);
 const handleMouseDown = (e: MouseEvent) => {
  const target = e.target as HTMLElement;
  if (
    (target.tagName === 'A' && target.textContent?.trim() === 'Try Editor') ||
    (target.tagName === 'SPAN' && target.textContent?.trim() === '💻 Open Editor')
  ) {
    e.preventDefault();
    isVisible.value = !isVisible.value;
  }
 };
 onMounted(() => {
  document.addEventListener('click', handleMouseDown);
 });
 onUnmounted(() => {
  document.removeEventListener('click', handleMouseDown);
 });
 </script>
 <template>
  <div
    v-if="isVisible"
    class="fixed top-0 left-0 z-50 flex h-screen w-screen backdrop-blur-sm items-center justify-center"
    @click.self="isVisible = false"
  >
    <div class="flex flex-row rounded-3xl shadow relative gap-5 pt-20 pb-10 px-10 bg-[#F1F8FA]">
      <div
        v-for="column in editorColumns"
        class="w-80 flex relative flex-col justify-start items-center bg-[#dceef1] p-8 text-gray-800 shadow"
        :class="
          column.highlighted ? 'bg-white rounded-b-3xl shadow-xl' : 'bg-[#DCEEF1] rounded-3xl'
        "
      >
        <div
          v-if="column.highlighted"
          class="absolute -top-10 w-full rounded-t-3xl bg-[#E0095F] py-2 flex justify-center"
        >
          <p class="text-lg font-semibold text-white">Best for collaboration</p>
        </div>
        <header class="mb-6 w-full text-start space-y-1">
          <p class="text-2xl font-medium capitalize text-[#1E1A2E]">
            {{ column.title }}
          </p>
          <p class="text-sm text-gray-600">
            {{ column.description }}
          </p>
        </header>
        <a
          :href="column.redirectUrl"
          target="_blank"
          class="mb-6 flex h-10 w-full items-center justify-center rounded-xl hover:bg-[#272040] hover:text-white hover:shadow-md"
          :class="
            column.highlighted
              ? 'bg-[#1e1a2e] text-[#BEDDE3] hover:text-[#5CA3B4]'
              : 'bg-[#BEDDE3] hover:bg-[#5CA3B4] text-[#1E1A2E]'
          "
        >
          Start free
        </a>
        <div class="h-px w-full bg-[#bedde3] mb-6"></div>
        <ul class="w-full space-y-2">
          <li
            v-for="{ iconUrl, featureName } in column.features"
            :key="featureName"
            class="flex items-center gap-2"
          >
            <img :src="iconUrl" :alt="featureName" class="inline-block size-5" />
            <span>{{ featureName }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
 </template>
--- a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
@@ -1,134 +1,65 @@
 <script setup lang="ts">
-import { type Ref, ref, onMounted } from 'vue';
+import { useRoute } from 'vitepress';
 import { computed, onMounted, type Ref, ref } from 'vue';
 interface Taglines {
  label: string;
  url: string;
 }
-const allTaglines: { [key: string]: { design: number; taglines: Taglines[] } } = {
+const taglines: Taglines[] = [
-  A: {
+  {
-    design: 1,
+    label: 'Customize your layout and design in Mermaid Chart’s visual editor!',
-    taglines: [
+    url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=visual_editor',
      {
        label: 'Replace ChatGPT Pro, Mermaid.live, and Lucid Chart with Mermaid Chart',
        url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=AIbundle_A',
      },
      {
        label: 'Diagram live with teammates in Mermaid Chart',
        url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=teams_A',
      },
      {
        label: 'Use the Visual Editor in Mermaid Chart to design and build diagrams',
        url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=visual_editor_A',
      },
      {
        label: 'Explore the Mermaid Whiteboard from the creators of Mermaid',
        url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=whiteboard_A',
      },
    ],
  },
-  B: {
+  {
-    design: 2,
+    label: 'Replace ChatGPT Pro, Mermaid.live, and Lucid Chart with Mermaid Chart',
-    taglines: [
+    url: 'https://www.mermaidchart.com/mermaid-ai?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=aibundle',
      {
        label: 'Replace ChatGPT Pro, Mermaid.live, and Lucid Chart with Mermaid Chart',
        url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=AIbundle_B',
      },
      {
        label: 'Diagram live with teammates in Mermaid Chart',
        url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=teams_B',
      },
      {
        label: 'Use the Visual Editor in Mermaid Chart to design and build diagrams',
        url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=visual_editor_B',
      },
      {
        label: 'Explore the Mermaid Whiteboard from the creators of Mermaid',
        url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=whiteboard_B',
      },
    ],
  },
-  C: {
+  {
-    design: 1,
+    label: 'Diagram live with teammates in Mermaid Chart',
-    taglines: [
+    url: 'https://www.mermaidchart.com/landing?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=team_collaboration',
      {
        label: 'Replace ChatGPT Pro, Mermaid.live, and Lucid Chart with Mermaid Pro',
        url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=AIbundle_C',
      },
      {
        label: 'Diagram live with teammates in Mermaid Pro',
        url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=teams_C',
      },
      {
        label: 'Use the Visual Editor in Mermaid Pro to design and build diagrams',
        url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=visual_editor_C',
      },
      {
        label: 'Explore the Mermaid Whiteboard from the creators of Mermaid',
        url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=whiteboard_A',
      },
    ],
  },
-  D: {
+];
    design: 2,
    taglines: [
      {
        label: 'Replace ChatGPT Pro, Mermaid.live, and Lucid Chart with Mermaid Pro',
        url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=AIbundle_D',
      },
      {
        label: 'Diagram live with teammates in Mermaid Pro',
        url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=teams_D',
      },
      {
        label: 'Use the Visual Editor in Mermaid Pro to design and build diagrams',
        url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=visual_editor_D',
      },
      {
        label: 'Explore the Mermaid Whiteboard from the creators of Mermaid',
        url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=whiteboard_B',
      },
    ],
  },
 };
 // Initialize with default values
 const design: Ref<number> = ref(1);
 const taglines: Ref<Taglines[]> = ref([]);
 const index: Ref<number> = ref(0);
 const isPaused: Ref<boolean> = ref(false);
 const route = useRoute();
 const isHomePage = computed(() => {
  return route.path === '/';
 });
 onMounted(() => {
-  // Select a random variant on client side
+  index.value = Math.floor(Math.random() * taglines.length);
  const variant =
    Object.values(allTaglines)[Math.floor(Math.random() * Object.values(allTaglines).length)];
  design.value = variant.design;
  taglines.value = variant.taglines;
  index.value = Math.floor(Math.random() * taglines.value.length);
  // Set up the interval for cycling through taglines
  setInterval(() => {
-    index.value = (index.value + 1) % taglines.value.length;
+    if (isPaused.value) {
      return;
    }
    index.value = (index.value + 1) % taglines.length;
  }, 5_000);
 });
 </script>
 <template>
  <div
-    :class="[design === 1 ? 'bg-gradient-to-r from-[#bd34fe] to-[#ff3670] ' : 'bg-[#E0095F]']"
+    class="mb-4 w-full top-bar flex p-2 bg-[#E0095F]"
-    class="mb-4 w-full top-bar flex p-2"
+    @mouseenter="isPaused = true"
    @mouseleave="isPaused = false"
  >
-    <p class="w-full tracking-wide fade-text text-sm">
+    <p class="w-full tracking-wide fade-text" :class="isHomePage ? 'text-lg' : 'text-sm'">
      <transition name="fade" mode="out-in">
        <a
          v-if="taglines.length > 0 && taglines[index]"
          :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"
+          class="unstyled flex justify-center items-center gap-4 no-tooltip text-white tracking-wide plausible-event-name=bannerClick"
        >
          <span class="font-semibold">{{ taglines[index].label }}</span>
-          <button class="bg-[#1E1A2E] shrink-0 rounded-lg p-1.5 px-4 font-semibold tracking-wide">
+          <button
            class="bg-[#1E1A2E] shrink-0 rounded-lg p-1.5 px-4 font-semibold tracking-wide"
            :class="isHomePage ? 'text-lg' : 'text-sm'"
          >
            Try now
          </button>
        </a>
--- a/packages/mermaid/src/docs/.vitepress/config.ts
+++ b/packages/mermaid/src/docs/.vitepress/config.ts
@@ -2,6 +2,7 @@ import type { MarkdownOptions } from 'vitepress';
 import { defineConfig } from 'vitepress';
 import packageJson from '../../../package.json' assert { type: 'json' };
 import MermaidExample from './mermaid-markdown-all.js';
 import { addCanonicalUrls } from './canonical-urls.js';
 const allMarkdownTransformers: MarkdownOptions = {
  // the shiki theme to highlight code blocks
@@ -25,8 +26,23 @@ export default defineConfig({
    // ignore all localhost links
    /^https?:\/\/localhost/,
  ],
  transformPageData: addCanonicalUrls,
  head: [
    ['link', { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
    ['meta', { property: 'og:title', content: 'Mermaid' }],
    [
      'meta',
      {
        property: 'og:description',
        content: 'Create diagrams and visualizations using text and code.',
      },
    ],
    ['meta', { property: 'og:type', content: 'website' }],
    ['meta', { property: 'og:url', content: 'https://mermaid.js.org' }],
    [
      'meta',
      { property: 'og:image', content: 'https://mermaid.js.org/mermaid-logo-horizontal.svg' },
    ],
    [
      'script',
      {
@@ -38,6 +54,7 @@ export default defineConfig({
    ],
  ],
  themeConfig: {
    logo: '/favicon.svg',
    nav: nav(),
    editLink: {
      pattern: ({ filePath, frontmatter }) => {
@@ -104,8 +121,10 @@ function nav() {
      ],
    },
    {
-      text: '💻 Live Editor',
+      text: '💻 Open Editor',
-      link: 'https://mermaid.live',
+      link: 'https://mermaid.live/edit',
      target: '_blank',
      rel: 'external',
    },
  ];
 }
--- a/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts
+++ b/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts
@@ -32,11 +32,17 @@ async function fetchAvatars() {
  });
  contributors = JSON.parse(await readFile(pathContributors, { encoding: 'utf-8' }));
  const avatars = contributors.map((name) =>
    download(`https://github.com/${name}.png?size=100`, getAvatarPath(name))
  );
-  await Promise.allSettled(avatars);
+  const batchSize = 10;
  for (let i = 0; i < contributors.length; i += batchSize) {
    console.log(
      `Processing batch ${i / batchSize + 1} of ${Math.ceil(contributors.length / batchSize)}`
    );
    const batch = contributors.slice(i, i + batchSize);
    await Promise.allSettled(
      batch.map((name) => download(`https://github.com/${name}.png?size=100`, getAvatarPath(name)))
    );
  }
 }
 void fetchAvatars();
--- a/packages/mermaid/src/docs/.vitepress/theme/Tooltip.vue
+++ b/packages/mermaid/src/docs/.vitepress/theme/Tooltip.vue
@@ -0,0 +1,113 @@
 <template>
  <div
    class="mermaid-chart-tooltip"
    :class="{ showing: isVisible, hiding: !isVisible }"
    :style="tooltipStyle"
  >
    <span class="mdi mdi-open-in-new"></span>
    Opens in MermaidChart.com
  </div>
 </template>
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from 'vue';
 const isVisible = ref(false);
 const currentTarget = ref<HTMLElement | null>(null);
 const tooltipStyle = ref({});
 const showTooltip = (target: HTMLElement) => {
  currentTarget.value = target;
  const rect = target.getBoundingClientRect();
  tooltipStyle.value = {
    left: `${rect.left + rect.width / 2}px`,
    top: `${rect.bottom}px`,
  };
  isVisible.value = true;
 };
 const hideTooltip = () => {
  currentTarget.value = null;
  isVisible.value = false;
 };
 const handleMouseOver = (e: MouseEvent) => {
  const target = e.target as HTMLElement;
  if (
    (target.matches('a[href*="mermaidchart.com"]') ||
      target.matches('button[onclick*="mermaidchart.com"]')) &&
    !target.matches('.no-tooltip') &&
    !target.matches('.VPSocialLink')
  ) {
    showTooltip(target);
  }
 };
 const handleMouseOut = (e: MouseEvent) => {
  if (!currentTarget.value?.contains(e.relatedTarget as HTMLElement)) {
    hideTooltip();
  }
 };
 onMounted(() => {
  document.addEventListener('mouseover', handleMouseOver);
  document.addEventListener('mouseout', handleMouseOut);
 });
 onUnmounted(() => {
  document.removeEventListener('mouseover', handleMouseOver);
  document.removeEventListener('mouseout', handleMouseOut);
 });
 </script>
 <style>
 .mermaid-chart-tooltip {
  position: fixed;
  background: black;
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 400;
  pointer-events: none;
  z-index: 1000;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  margin-top: -0.5rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
 }
 .mermaid-chart-tooltip.showing {
  animation: tooltipFadeIn 0.3s ease 0.4s forwards;
 }
 .mermaid-chart-tooltip.hiding {
  animation: tooltipFadeOut 0.3s ease forwards;
 }
@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, 5px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 10px);
  }
 }
@keyframes tooltipFadeOut {
  from {
    opacity: 1;
    transform: translate(-50%, 10px);
  }
  to {
    opacity: 0;
    transform: translate(-50%, 5px);
  }
 }
 </style>
--- a/packages/mermaid/src/docs/.vitepress/theme/custom.css
+++ b/packages/mermaid/src/docs/.vitepress/theme/custom.css
@@ -1,22 +1,25 @@
@import 'font-awesome/css/font-awesome.min.css';
@import '@mdi/font/css/materialdesignicons.min.css';
 /* Colors: Brand */
 :root {
-  --vp-c-brand: #ff3670;
+  /* use for colored text */
-  --vp-c-brand-light: #ff5e8c;
+  --vp-c-pink-1: #e0095f;
-  --vp-c-brand-lighter: #ff85a8;
+
-  --vp-c-brand-lightest: #ff9bb7;
+  /* use for hover state of button */
-  --vp-c-brand-dark: #bd34fe;
+  --vp-c-pink-2: #b0134a;
-  --vp-c-brand-darker: #9339bd;
+
-  --vp-c-brand-dimm: rgba(100, 108, 255, 0.08);
+  /* use for background button color */
  --vp-c-pink-3: #e0095f;
  /* use for custom container or badges */
  --vp-c-pink-4: rgba(159, 122, 234, 0.14);
 }
 :root {
-  --vp-home-hero-name-color: transparent;
+  --vp-c-brand-1: var(--vp-c-pink-1);
-  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe 30%, #ff3670);
+  --vp-c-brand-2: var(--vp-c-pink-2);
-
+  --vp-c-brand-3: var(--vp-c-pink-3);
  --vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #ff3670 50%);
  --vp-home-hero-image-filter: blur(72px);
 }
 .vp-doc > div {
--- a/packages/mermaid/src/docs/.vitepress/theme/index.ts
+++ b/packages/mermaid/src/docs/.vitepress/theme/index.ts
@@ -1,15 +1,13 @@
 /* eslint-disable no-console */
 import DefaultTheme from 'vitepress/theme';
 import './custom.css';
 // @ts-ignore Type not available
 import Mermaid from './Mermaid.vue';
 // @ts-ignore Type not available
 import Contributors from '../components/Contributors.vue';
-// @ts-ignore Type not available
+import EditorSelectionModal from '../components/EditorSelectionModal.vue';
 import HomePage from '../components/HomePage.vue';
 // @ts-ignore Type not available
 import TopBar from '../components/TopBar.vue';
 import './custom.css';
 import Mermaid from './Mermaid.vue';
 import { getRedirect } from './redirect.js';
 import Tooltip from './Tooltip.vue';
 // @ts-ignore Type not available
 import 'uno.css';
 import type { EnhanceAppContext } from 'vitepress';
@@ -21,16 +19,18 @@ export default {
  ...DefaultTheme,
  Layout() {
    return h(Theme.Layout, null, {
      // 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),
      'home-hero-before': () => h(TopBar),
      'doc-before': () => h(TopBar),
      'layout-bottom': () => h(Tooltip),
      'home-hero-after': () => h(EditorSelectionModal),
    });
  },
  enhanceApp({ app, router }: EnhanceAppContext) {
    // register global components
    app.component('Mermaid', Mermaid);
    app.component('Contributors', Contributors);
    router.onBeforeRouteChange = (to) => {
      try {
        const url = new URL(window.location.origin + to);
--- a/packages/mermaid/src/docs/ecosystem/integrations-community.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md
@@ -265,5 +265,6 @@ Communication tools and platforms
  - [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin)
 - [Reveal CK](https://github.com/jedcn/reveal-ck)
  - [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin)
 - [Vitepress Plugin](https://github.com/sametcn99/vitepress-mermaid-renderer)
 <!--- cspell:ignore Blazorade HueHive --->
--- a/packages/mermaid/src/docs/index.md
+++ b/packages/mermaid/src/docs/index.md
@@ -11,27 +11,33 @@ hero:
  tagline: JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
  image:
-    src: /mermaid-logo.svg
+    light: /hero-chart.svg
-    alt: Mermaid
+    dark: /hero-chart-dark.svg
    alt: Mermaid diagram
  actions:
    - theme: brand
-      text: Get Started
+      text: Try Editor
-      link: /intro/
+      link: https://mermaid.live/edit
      target: _blank
      rel: external
    - theme: alt
-      text: View on GitHub
+      text: Get started
-      link: https://github.com/mermaid-js/mermaid
+      link: /intro/
 features:
-  - title: ➕ Easy to use!
+  - icon:
-    details: Easily create and render detailed diagrams and charts with the Mermaid Live Editor.
+      src: /1-Callout-Easy.svg
    title: Easy to use
    details: Easily create diagrams and charts with the Mermaid Live Editor.
    link: https://mermaid.live/
-  - title: 🧩 Integrations available!
+  - icon:
      src: /2-Callout-Integrations.svg
    title: Integrations available
    details: Use Mermaid with your favorite applications, check out the integrations list.
    link: ../../ecosystem/integrations-community.md
-  - title: 🏆 Award winning!
+  - icon:
      src: /3-Callout-Awards.svg
    title: Award winning
    details: 2019 JavaScript Open Source Award winner for "The Most Exciting Use of Technology".
    link: https://osawards.com/javascript/2019
  - title: 🥰 Mermaid + Mermaid Chart
    details: Mermaid Chart is a major supporter of the Mermaid project.
    link: https://www.mermaidchart.com/
 ---
--- a/packages/mermaid/src/docs/public/1-Callout-Easy.svg
+++ b/packages/mermaid/src/docs/public/1-Callout-Easy.svg
@@ -0,0 +1,9 @@
 <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect width="48" height="48" rx="12" fill="#E0095F"/>
 <mask id="mask0_1_24" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="9" y="9" width="30" height="30">
 <rect x="9" y="9" width="30" height="30" fill="#D9D9D9"/>
 </mask>
 <g mask="url(#mask0_1_24)">
 <path d="M24 30.875C25.2083 30.875 26.3229 30.5833 27.3438 30C28.3646 29.4167 29.1875 28.625 29.8125 27.625C29.9375 27.375 29.9271 27.125 29.7812 26.875C29.6354 26.625 29.4167 26.5 29.125 26.5H18.875C18.5833 26.5 18.3646 26.625 18.2188 26.875C18.0729 27.125 18.0625 27.375 18.1875 27.625C18.8125 28.625 19.6406 29.4167 20.6719 30C21.7031 30.5833 22.8125 30.875 24 30.875ZM20.125 21.4375L20.7813 22.0938C20.9688 22.2813 21.1875 22.375 21.4375 22.375C21.6875 22.375 21.9063 22.2813 22.0938 22.0938C22.2813 21.9063 22.3698 21.6875 22.3594 21.4375C22.349 21.1875 22.2604 20.9688 22.0938 20.7813L21 19.6563C20.75 19.4063 20.4531 19.2812 20.1094 19.2812C19.7656 19.2812 19.4688 19.4063 19.2188 19.6563L18.0938 20.7813C17.9063 20.9688 17.8125 21.1875 17.8125 21.4375C17.8125 21.6875 17.9063 21.9063 18.0938 22.0938C18.2604 22.2604 18.474 22.349 18.7344 22.3594C18.9948 22.3698 19.2188 22.2917 19.4063 22.125L20.125 21.4375ZM27.875 21.4375L28.5938 22.125C28.7813 22.2917 29 22.375 29.25 22.375C29.5 22.375 29.7188 22.2813 29.9063 22.0938C30.0938 21.9063 30.1875 21.6875 30.1875 21.4375C30.1875 21.1875 30.0938 20.9688 29.9063 20.7813L28.7812 19.6563C28.5312 19.4063 28.2344 19.2812 27.8906 19.2812C27.5469 19.2812 27.25 19.4063 27 19.6563L25.875 20.7813C25.7083 20.9688 25.625 21.1875 25.625 21.4375C25.625 21.6875 25.7188 21.9063 25.9063 22.0938C26.0938 22.2813 26.3125 22.375 26.5625 22.375C26.8125 22.375 27.0312 22.2813 27.2187 22.0938L27.875 21.4375ZM24 36.5C22.2708 36.5 20.6458 36.1719 19.125 35.5156C17.6042 34.8594 16.2812 33.9688 15.1562 32.8438C14.0312 31.7188 13.1406 30.3958 12.4844 28.875C11.8281 27.3542 11.5 25.7292 11.5 24C11.5 22.2708 11.8281 20.6458 12.4844 19.125C13.1406 17.6042 14.0312 16.2812 15.1562 15.1562C16.2812 14.0312 17.6042 13.1406 19.125 12.4844C20.6458 11.8281 22.2708 11.5 24 11.5C25.7292 11.5 27.3542 11.8281 28.875 12.4844C30.3958 13.1406 31.7188 14.0312 32.8438 15.1562C33.9688 16.2812 34.8594 17.6042 35.5156 19.125C36.1719 20.6458 36.5 22.2708 36.5 24C36.5 25.7292 36.1719 27.3542 35.5156 28.875C34.8594 30.3958 33.9688 31.7188 32.8438 32.8438C31.7188 33.9688 30.3958 34.8594 28.875 35.5156C27.3542 36.1719 25.7292 36.5 24 36.5ZM24 34C26.7917 34 29.1563 33.0313 31.0938 31.0938C33.0313 29.1563 34 26.7917 34 24C34 21.2083 33.0313 18.8438 31.0938 16.9063C29.1563 14.9688 26.7917 14 24 14C21.2083 14 18.8438 14.9688 16.9063 16.9063C14.9688 18.8438 14 21.2083 14 24C14 26.7917 14.9688 29.1563 16.9063 31.0938C18.8438 33.0313 21.2083 34 24 34Z" fill="white"/>
 </g>
 </svg>
--- a/packages/mermaid/src/docs/public/2-Callout-Integrations.svg
+++ b/packages/mermaid/src/docs/public/2-Callout-Integrations.svg
@@ -0,0 +1,9 @@
 <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect width="48" height="48" rx="12" fill="#E0095F"/>
 <mask id="mask0_2_44" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="9" y="9" width="30" height="30">
 <rect x="9" y="9" width="30" height="30" fill="#D9D9D9"/>
 </mask>
 <g mask="url(#mask0_2_44)">
 <path d="M32.75 27.75C32.3958 27.75 32.099 27.6302 31.8594 27.3906C31.6198 27.151 31.5 26.8542 31.5 26.5C31.5 26.1458 31.6198 25.849 31.8594 25.6094C32.099 25.3698 32.3958 25.25 32.75 25.25H34C34.3542 25.25 34.651 25.3698 34.8906 25.6094C35.1302 25.849 35.25 26.1458 35.25 26.5C35.25 26.8542 35.1302 27.151 34.8906 27.3906C34.651 27.6302 34.3542 27.75 34 27.75H32.75ZM32.75 32.75C32.3958 32.75 32.099 32.6302 31.8594 32.3906C31.6198 32.151 31.5 31.8542 31.5 31.5C31.5 31.1458 31.6198 30.849 31.8594 30.6094C32.099 30.3698 32.3958 30.25 32.75 30.25H34C34.3542 30.25 34.651 30.3698 34.8906 30.6094C35.1302 30.849 35.25 31.1458 35.25 31.5C35.25 31.8542 35.1302 32.151 34.8906 32.3906C34.651 32.6302 34.3542 32.75 34 32.75H32.75ZM26.5 34C25.8125 34 25.224 33.7552 24.7344 33.2656C24.2448 32.776 24 32.1875 24 31.5H22.75C22.3958 31.5 22.099 31.3802 21.8594 31.1406C21.6198 30.901 21.5 30.6042 21.5 30.25V27.75C21.5 27.3958 21.6198 27.099 21.8594 26.8594C22.099 26.6198 22.3958 26.5 22.75 26.5H24C24 25.8125 24.2448 25.224 24.7344 24.7344C25.224 24.2448 25.8125 24 26.5 24H29C29.3542 24 29.651 24.1198 29.8906 24.3594C30.1302 24.599 30.25 24.8958 30.25 25.25V32.75C30.25 33.1042 30.1302 33.401 29.8906 33.6406C29.651 33.8802 29.3542 34 29 34H26.5ZM17.75 30.25C16.375 30.25 15.1979 29.7604 14.2188 28.7812C13.2396 27.8021 12.75 26.625 12.75 25.25C12.75 23.875 13.2396 22.6979 14.2188 21.7188C15.1979 20.7396 16.375 20.25 17.75 20.25H19.625C20.1458 20.25 20.5885 20.0677 20.9531 19.7031C21.3177 19.3385 21.5 18.8958 21.5 18.375C21.5 17.8542 21.3177 17.4115 20.9531 17.0469C20.5885 16.6823 20.1458 16.5 19.625 16.5H15.25C14.8958 16.5 14.599 16.3802 14.3594 16.1406C14.1198 15.901 14 15.6042 14 15.25C14 14.8958 14.1198 14.599 14.3594 14.3594C14.599 14.1198 14.8958 14 15.25 14H19.625C20.8333 14 21.8646 14.4271 22.7187 15.2812C23.5729 16.1354 24 17.1667 24 18.375C24 19.5833 23.5729 20.6146 22.7187 21.4687C21.8646 22.3229 20.8333 22.75 19.625 22.75H17.75C17.0625 22.75 16.474 22.9948 15.9844 23.4844C15.4948 23.974 15.25 24.5625 15.25 25.25C15.25 25.9375 15.4948 26.526 15.9844 27.0156C16.474 27.5052 17.0625 27.75 17.75 27.75H19C19.3542 27.75 19.651 27.8698 19.8906 28.1094C20.1302 28.349 20.25 28.6458 20.25 29C20.25 29.3542 20.1302 29.651 19.8906 29.8906C19.651 30.1302 19.3542 30.25 19 30.25H17.75Z" fill="white"/>
 </g>
 </svg>
--- a/packages/mermaid/src/docs/public/3-Callout-Awards.svg
+++ b/packages/mermaid/src/docs/public/3-Callout-Awards.svg
@@ -0,0 +1,9 @@
 <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect width="48" height="48" rx="12" fill="#E0095F"/>
 <mask id="mask0_2_49" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="9" y="9" width="30" height="30">
 <rect x="9" y="9" width="30" height="30" fill="#D9D9D9"/>
 </mask>
 <g mask="url(#mask0_2_49)">
 <path d="M22.75 32.75V28.875C21.7292 28.6458 20.8177 28.2135 20.0156 27.5781C19.2135 26.9427 18.625 26.1458 18.25 25.1875C16.6875 25 15.3802 24.3177 14.3281 23.1406C13.276 21.9635 12.75 20.5833 12.75 19V17.75C12.75 17.0625 12.9948 16.474 13.4844 15.9844C13.974 15.4948 14.5625 15.25 15.25 15.25H17.75C17.75 14.5625 17.9948 13.974 18.4844 13.4844C18.974 12.9948 19.5625 12.75 20.25 12.75H27.75C28.4375 12.75 29.026 12.9948 29.5156 13.4844C30.0052 13.974 30.25 14.5625 30.25 15.25H32.75C33.4375 15.25 34.026 15.4948 34.5156 15.9844C35.0052 16.474 35.25 17.0625 35.25 17.75V19C35.25 20.5833 34.724 21.9635 33.6719 23.1406C32.6198 24.3177 31.3125 25 29.75 25.1875C29.375 26.1458 28.7865 26.9427 27.9844 27.5781C27.1823 28.2135 26.2708 28.6458 25.25 28.875V32.75H29C29.3542 32.75 29.651 32.8698 29.8906 33.1094C30.1302 33.349 30.25 33.6458 30.25 34C30.25 34.3542 30.1302 34.651 29.8906 34.8906C29.651 35.1302 29.3542 35.25 29 35.25H19C18.6458 35.25 18.349 35.1302 18.1094 34.8906C17.8698 34.651 17.75 34.3542 17.75 34C17.75 33.6458 17.8698 33.349 18.1094 33.1094C18.349 32.8698 18.6458 32.75 19 32.75H22.75ZM17.75 22.5V17.75H15.25V19C15.25 19.7917 15.4792 20.5052 15.9375 21.1406C16.3958 21.776 17 22.2292 17.75 22.5ZM24 26.5C25.0417 26.5 25.9271 26.1354 26.6562 25.4062C27.3854 24.6771 27.75 23.7917 27.75 22.75V15.25H20.25V22.75C20.25 23.7917 20.6146 24.6771 21.3438 25.4062C22.0729 26.1354 22.9583 26.5 24 26.5ZM30.25 22.5C31 22.2292 31.6042 21.776 32.0625 21.1406C32.5208 20.5052 32.75 19.7917 32.75 19V17.75H30.25V22.5Z" fill="white"/>
 </g>
 </svg>
--- a/packages/mermaid/src/docs/public/hero-chart-dark.svg
+++ b/packages/mermaid/src/docs/public/hero-chart-dark.svg
--- a/packages/mermaid/src/docs/public/hero-chart.svg
+++ b/packages/mermaid/src/docs/public/hero-chart.svg
--- a/packages/mermaid/src/docs/public/icons/ai-diagram.svg
+++ b/packages/mermaid/src/docs/public/icons/ai-diagram.svg
@@ -0,0 +1,19 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
  <mask
    id="mask0_89_26528"
    style="mask-type: alpha"
    maskUnits="userSpaceOnUse"
    x="0"
    y="0"
    width="20"
    height="20"
  >
    <rect width="20" height="20" fill="currentColor" />
  </mask>
  <g mask="url(#mask0_89_26528)">
    <path
      d="M10.25 12.9792C11.2083 12.9792 12.0312 12.6667 12.7188 12.0417C13.4062 11.4167 13.75 10.6671 13.75 9.79292C13.75 9.01431 13.4965 8.35069 12.9896 7.80208C12.4826 7.25347 11.8747 6.97917 11.1656 6.97917C10.5248 6.97917 9.98285 7.1875 9.53979 7.60417C9.0966 8.02083 8.875 8.52083 8.875 9.10417C8.875 9.38194 8.92528 9.63847 9.02583 9.87375C9.12639 10.109 9.27056 10.3247 9.45833 10.5208L10.5208 9.45833C10.4722 9.41667 10.4358 9.36458 10.4115 9.30208C10.3872 9.23958 10.375 9.17687 10.375 9.11396C10.375 8.94076 10.4514 8.79167 10.6042 8.66667C10.7569 8.54167 10.9444 8.47917 11.1667 8.47917C11.4583 8.47917 11.7118 8.60806 11.9271 8.86583C12.1424 9.12361 12.25 9.43222 12.25 9.79167C12.25 10.25 12.0521 10.6458 11.6562 10.9792C11.2604 11.3125 10.7933 11.4792 10.255 11.4792C9.57111 11.4792 8.98264 11.191 8.48958 10.6146C7.99653 10.0382 7.75 9.35417 7.75 8.5625C7.75 8.13514 7.82986 7.72625 7.98958 7.33583C8.14931 6.94528 8.38194 6.59722 8.6875 6.29167L7.625 5.25C7.18056 5.69444 6.84028 6.20139 6.60417 6.77083C6.36806 7.34028 6.25 7.9375 6.25 8.5625C6.25 9.78472 6.63889 10.8264 7.41667 11.6875C8.19444 12.5486 9.13889 12.9792 10.25 12.9792ZM5.5 18V14.3542C4.70833 13.6875 4.09375 12.8849 3.65625 11.9465C3.21875 11.008 3 10.0189 3 8.97917C3 7.04056 3.68257 5.39271 5.04771 4.03563C6.41285 2.67854 8.07056 2 10.0208 2C11.5347 2 12.8958 2.40625 14.1042 3.21875C15.3125 4.03125 16.1111 5.09028 16.5 6.39583L17.875 11.0417C17.9444 11.2844 17.9062 11.5049 17.7604 11.7029C17.6146 11.901 17.4167 12 17.1667 12H16V14.5C16 14.9125 15.8531 15.2656 15.5594 15.5594C15.2656 15.8531 14.9125 16 14.5 16H12.5V18H11V14.5H14.5V10.5H16.1667L15.0833 6.89583C14.7778 5.89583 14.1562 5.07986 13.2188 4.44792C12.2812 3.81597 11.2153 3.5 10.0208 3.5C8.47917 3.5 7.17361 4.03215 6.10417 5.09646C5.03472 6.16076 4.5 7.455 4.5 8.97917C4.5 9.79764 4.67361 10.5751 5.02083 11.3117C5.36806 12.0483 5.85417 12.6806 6.47917 13.2083L7 13.6667V18H5.5Z"
      fill="currentColor"
    />
  </g>
 </svg>
--- a/packages/mermaid/src/docs/public/icons/ai-repair.svg
+++ b/packages/mermaid/src/docs/public/icons/ai-repair.svg
@@ -0,0 +1,19 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
  <mask
    id="mask0_89_26616"
    style="mask-type: alpha"
    maskUnits="userSpaceOnUse"
    x="0"
    y="0"
    width="20"
    height="20"
  >
    <rect width="20" height="20" fill="currentColor" />
  </mask>
  <g mask="url(#mask0_89_26616)">
    <path
      d="M4 16.9999V14.4999H5.875L4.4375 8.77077C3.99306 8.56244 3.64236 8.25341 3.38542 7.84369C3.12847 7.43396 3 6.98605 3 6.49993C3 5.7916 3.24306 5.19785 3.72917 4.71868C4.21528 4.23952 4.8125 3.99993 5.52083 3.99993C6.0625 3.99993 6.55208 4.15966 6.98958 4.4791C7.42708 4.79855 7.72222 5.22216 7.875 5.74993H9.5V4.74993C9.5 4.5416 9.57292 4.36452 9.71875 4.21868C9.86458 4.07285 10.0417 3.99993 10.25 3.99993C10.4583 3.99993 10.6354 4.07285 10.7812 4.21868C10.9271 4.36452 11 4.5416 11 4.74993V4.89577L13 3.18743C13.1111 3.09021 13.2361 3.03466 13.375 3.02077C13.5139 3.00688 13.6528 3.02771 13.7917 3.08327L16.5625 4.33327C16.7569 4.4166 16.8924 4.55202 16.9688 4.73952C17.0451 4.92702 17.0347 5.11799 16.9375 5.31243C16.8542 5.49299 16.7153 5.61799 16.5208 5.68743C16.3264 5.75688 16.1319 5.75688 15.9375 5.68743L13.6042 4.64577L11.4167 6.49993L13.6042 8.37494L15.9375 7.33327C16.1319 7.24993 16.3229 7.24299 16.5104 7.31244C16.6979 7.38188 16.8403 7.51382 16.9375 7.70827C17.0208 7.88882 17.0243 8.06938 16.9479 8.24994C16.8715 8.43049 16.7431 8.57632 16.5625 8.68744L13.7917 9.93744C13.6667 10.0069 13.5312 10.0312 13.3854 10.0104C13.2396 9.98952 13.1111 9.93049 13 9.83327L11 8.12494V8.24994C11 8.45827 10.9271 8.63535 10.7812 8.78119C10.6354 8.92702 10.4583 8.99994 10.25 8.99994C10.0417 8.99994 9.86458 8.92702 9.71875 8.78119C9.57292 8.63535 9.5 8.45827 9.5 8.24994V7.24994H7.875C7.81944 7.44438 7.73958 7.62146 7.63542 7.78119C7.53125 7.94091 7.40972 8.09716 7.27083 8.24994L10.8542 14.4999H14V16.9999H4ZM5.5 7.62494C5.81944 7.62494 6.08681 7.5173 6.30208 7.30202C6.51736 7.08674 6.625 6.81938 6.625 6.49993C6.625 6.19438 6.51736 5.93396 6.30208 5.71868C6.08681 5.50341 5.81944 5.39577 5.5 5.39577C5.18056 5.39577 4.91319 5.50341 4.69792 5.71868C4.48264 5.93396 4.375 6.19438 4.375 6.49993C4.375 6.81938 4.48264 7.08674 4.69792 7.30202C4.91319 7.5173 5.18056 7.62494 5.5 7.62494ZM7.41667 14.4999H9.125L6.08333 9.18744L7.41667 14.4999Z"
      fill="currentColor"
    />
  </g>
 </svg>
--- a/packages/mermaid/src/docs/public/icons/comment.svg
+++ b/packages/mermaid/src/docs/public/icons/comment.svg
@@ -0,0 +1,19 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
  <mask
    id="mask0_89_26596"
    style="mask-type: alpha"
    maskUnits="userSpaceOnUse"
    x="0"
    y="0"
    width="20"
    height="20"
  >
    <rect width="20" height="20" fill="currentColor" />
  </mask>
  <g mask="url(#mask0_89_26596)">
    <path
      d="M5 12H15V10.5H5V12ZM5 9.25H15V7.75H5V9.25ZM5 6.5H15V5H5V6.5ZM18 18L15 15H3.5C3.0875 15 2.73438 14.8531 2.44063 14.5594C2.14688 14.2656 2 13.9125 2 13.5V3.5C2 3.0875 2.14688 2.73438 2.44063 2.44063C2.73438 2.14688 3.0875 2 3.5 2H16.5C16.9125 2 17.2656 2.14688 17.5594 2.44063C17.8531 2.73438 18 3.0875 18 3.5V18ZM3.5 13.5H15.625L16.5 14.375V3.5H3.5V13.5Z"
      fill="currentColor"
    />
  </g>
 </svg>
--- a/packages/mermaid/src/docs/public/icons/folder.svg
+++ b/packages/mermaid/src/docs/public/icons/folder.svg
@@ -0,0 +1,11 @@
 <svg
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 -960 960 960"
  width="24px"
  fill="currentColor"
 >
  <path
    d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H447l-80-80H160v480Zm0 0v-480 480Z"
  />
 </svg>
--- a/packages/mermaid/src/docs/public/icons/group.svg
+++ b/packages/mermaid/src/docs/public/icons/group.svg
@@ -0,0 +1,11 @@
 <svg
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 -960 960 960"
  width="24px"
  fill="currentColor"
 >
  <path
    d="M40-160v-112q0-34 17.5-62.5T104-378q62-31 126-46.5T360-440q66 0 130 15.5T616-378q29 15 46.5 43.5T680-272v112H40Zm720 0v-120q0-44-24.5-84.5T666-434q51 6 96 20.5t84 35.5q36 20 55 44.5t19 53.5v120H760ZM360-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Zm400-160q0 66-47 113t-113 47q-11 0-28-2.5t-28-5.5q27-32 41.5-71t14.5-81q0-42-14.5-81T544-792q14-5 28-6.5t28-1.5q66 0 113 47t47 113ZM120-240h480v-32q0-11-5.5-20T580-306q-54-27-109-40.5T360-360q-56 0-111 13.5T140-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T440-640q0-33-23.5-56.5T360-720q-33 0-56.5 23.5T280-640q0 33 23.5 56.5T360-560Zm0 320Zm0-400Z"
  />
 </svg>
--- a/packages/mermaid/src/docs/public/icons/groups.svg
+++ b/packages/mermaid/src/docs/public/icons/groups.svg
@@ -0,0 +1,19 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
  <mask
    id="mask0_89_26621"
    style="mask-type: alpha"
    maskUnits="userSpaceOnUse"
    x="0"
    y="0"
    width="20"
    height="20"
  >
    <rect width="20" height="20" fill="currentColor" />
  </mask>
  <g mask="url(#mask0_89_26621)">
    <path
      d="M3.5 11.5L5.5 9.5L3.5 7.5L1.5 9.5L3.5 11.5ZM14.5 11.5L16.5 8L18.5 11.5H14.5ZM9.98958 10.5C9.30208 10.5 8.71528 10.2569 8.22917 9.77083C7.74306 9.28472 7.5 8.69444 7.5 8C7.5 7.30556 7.74306 6.71528 8.22917 6.22917C8.71528 5.74306 9.30556 5.5 10 5.5C10.6944 5.5 11.2847 5.74306 11.7708 6.22917C12.2569 6.71528 12.5 7.30903 12.5 8.01042C12.5 8.69792 12.2569 9.28472 11.7708 9.77083C11.2847 10.2569 10.691 10.5 9.98958 10.5ZM10 7C9.71667 7 9.47917 7.09583 9.2875 7.2875C9.09583 7.47917 9 7.71667 9 8C9 8.28333 9.09583 8.52083 9.2875 8.7125C9.47917 8.90417 9.71667 9 10 9C10.2833 9 10.5208 8.90417 10.7125 8.7125C10.9042 8.52083 11 8.28333 11 8C11 7.71667 10.9042 7.47917 10.7125 7.2875C10.5208 7.09583 10.2833 7 10 7ZM0 15.5V14.25C0 13.5139 0.34375 12.9722 1.03125 12.625C1.71875 12.2778 2.54167 12.1042 3.5 12.1042C3.70833 12.1042 3.91667 12.1146 4.125 12.1354C4.33333 12.1563 4.54167 12.1875 4.75 12.2292C4.5 12.4792 4.3125 12.7951 4.1875 13.1771C4.0625 13.559 4 13.9167 4 14.25V15.5H0ZM5 15.5V14.2604C5 13.434 5.42361 12.7674 6.27083 12.2604C7.11806 11.7535 8.36111 11.5 10 11.5C11.6389 11.5 12.8819 11.7528 13.7292 12.2585C14.5764 12.7644 15 13.4282 15 14.25V15.5H5ZM16.5 12.1042C17.4583 12.1042 18.2812 12.2778 18.9688 12.625C19.6562 12.9722 20 13.5139 20 14.25V15.5H16V14.25C16 13.9167 15.941 13.559 15.8229 13.1771C15.7049 12.7951 15.5139 12.4792 15.25 12.2292C15.4583 12.1875 15.6652 12.1563 15.8706 12.1354C16.0759 12.1146 16.2857 12.1042 16.5 12.1042ZM10 13C9.11111 13 8.40972 13.0799 7.89583 13.2396C7.38194 13.3993 6.93056 13.6528 6.54167 14H13.4583C13.0556 13.6528 12.6007 13.3993 12.0938 13.2396C11.5868 13.0799 10.8889 13 10 13Z"
      fill="currentColor"
    />
  </g>
 </svg>
--- a/packages/mermaid/src/docs/public/icons/open-source.svg
+++ b/packages/mermaid/src/docs/public/icons/open-source.svg
@@ -0,0 +1,11 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
  <!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE -->
  <path
    fill="none"
    stroke="currentColor"
    stroke-linecap="round"
    stroke-linejoin="round"
    stroke-width="2"
    d="M12 3a9 9 0 0 1 3.618 17.243l-2.193-5.602a3 3 0 1 0-2.849 0l-2.193 5.603A9 9 0 0 1 12 3"
  />
 </svg>
--- a/packages/mermaid/src/docs/public/icons/plugins.svg
+++ b/packages/mermaid/src/docs/public/icons/plugins.svg
@@ -0,0 +1,19 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
  <mask
    id="mask0_89_26548"
    style="mask-type: alpha"
    maskUnits="userSpaceOnUse"
    x="0"
    y="0"
    width="20"
    height="20"
  >
    <rect width="20" height="20" fill="currentColor" />
  </mask>
  <g mask="url(#mask0_89_26548)">
    <path
      d="M8 17H4.5C4.0875 17 3.73437 16.8531 3.44062 16.5594C3.14687 16.2656 3 15.9125 3 15.5V12C3.55556 11.9722 4.02778 11.7674 4.41667 11.3854C4.80556 11.0035 5 10.5417 5 10C5 9.45833 4.80556 8.99653 4.41667 8.61458C4.02778 8.23264 3.55556 8.02778 3 8V4.5C3 4.0875 3.14687 3.73438 3.44062 3.44063C3.73437 3.14688 4.0875 3 4.5 3H8C8 2.44444 8.19285 1.97222 8.57854 1.58333C8.96438 1.19444 9.4366 1 9.99521 1C10.554 1 11.0278 1.19333 11.4167 1.58C11.8056 1.96667 12 2.44 12 3H15.5C15.9125 3 16.2656 3.14688 16.5594 3.44063C16.8531 3.73438 17 4.0875 17 4.5V8C17.5556 8 18.0278 8.19285 18.4167 8.57854C18.8056 8.96438 19 9.4366 19 9.99521C19 10.554 18.8067 11.0278 18.42 11.4167C18.0333 11.8056 17.56 12 17 12V15.5C17 15.9125 16.8531 16.2656 16.5594 16.5594C16.2656 16.8531 15.9125 17 15.5 17H12C11.9722 16.4444 11.7682 15.9722 11.3879 15.5833C11.0076 15.1944 10.5458 15 10.0025 15C9.45917 15 8.99653 15.1944 8.61458 15.5833C8.23264 15.9722 8.02778 16.4444 8 17ZM4.5 15.5H6.83333C7.11111 14.875 7.53819 14.3854 8.11458 14.0312C8.69097 13.6771 9.31944 13.5 10 13.5C10.6806 13.5 11.309 13.6771 11.8854 14.0312C12.4618 14.3854 12.8889 14.875 13.1667 15.5H15.5V10.5H17C17.1333 10.5 17.25 10.45 17.35 10.35C17.45 10.25 17.5 10.1333 17.5 10C17.5 9.86667 17.45 9.75 17.35 9.65C17.25 9.55 17.1333 9.5 17 9.5H15.5V4.5H10.5V3C10.5 2.86667 10.45 2.75 10.35 2.65C10.25 2.55 10.1333 2.5 10 2.5C9.86667 2.5 9.75 2.55 9.65 2.65C9.55 2.75 9.5 2.86667 9.5 3V4.5H4.5V6.83333C5.125 7.11111 5.61458 7.53819 5.96875 8.11458C6.32292 8.69097 6.5 9.31944 6.5 10C6.5 10.6974 6.32292 11.3335 5.96875 11.9083C5.61458 12.4833 5.125 12.9028 4.5 13.1667V15.5Z"
      fill="currentColor"
    />
  </g>
 </svg>
--- a/packages/mermaid/src/docs/public/icons/presentation.svg
+++ b/packages/mermaid/src/docs/public/icons/presentation.svg
@@ -0,0 +1,19 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
  <mask
    id="mask0_89_26538"
    style="mask-type: alpha"
    maskUnits="userSpaceOnUse"
    x="0"
    y="0"
    width="20"
    height="20"
  >
    <rect width="20" height="20" fill="currentColor" />
  </mask>
  <g mask="url(#mask0_89_26538)">
    <path
      d="M8 13.5L13.5 10L8 6.5V13.5ZM4.5 17C4.0875 17 3.73437 16.8531 3.44062 16.5594C3.14687 16.2656 3 15.9125 3 15.5V4.5C3 4.0875 3.14687 3.73438 3.44062 3.44063C3.73437 3.14688 4.0875 3 4.5 3H15.5C15.9125 3 16.2656 3.14688 16.5594 3.44063C16.8531 3.73438 17 4.0875 17 4.5V15.5C17 15.9125 16.8531 16.2656 16.5594 16.5594C16.2656 16.8531 15.9125 17 15.5 17H4.5ZM4.5 15.5H15.5V4.5H4.5V15.5Z"
      fill="currentColor"
    />
  </g>
 </svg>
--- a/packages/mermaid/src/docs/public/icons/public.svg
+++ b/packages/mermaid/src/docs/public/icons/public.svg
@@ -0,0 +1,11 @@
 <svg
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 -960 960 960"
  width="24px"
  fill="currentColor"
 >
  <path
    d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm-40-82v-78q-33 0-56.5-23.5T360-320v-40L168-552q-3 18-5.5 36t-2.5 36q0 121 79.5 212T440-162Zm276-102q41-45 62.5-100.5T800-480q0-98-54.5-179T600-776v16q0 33-23.5 56.5T520-680h-80v80q0 17-11.5 28.5T400-560h-80v80h240q17 0 28.5 11.5T600-440v120h40q26 0 47 15.5t29 40.5Z"
  />
 </svg>
--- a/packages/mermaid/src/docs/public/icons/terminal.svg
+++ b/packages/mermaid/src/docs/public/icons/terminal.svg
@@ -0,0 +1,11 @@
 <svg
  xmlns="http://www.w3.org/2000/svg"
  height="24px"
  viewBox="0 -960 960 960"
  width="24px"
  fill="currentColor"
 >
  <path
    d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H160v400Zm140-40-56-56 103-104-104-104 57-56 160 160-160 160Zm180 0v-80h240v80H480Z"
  />
 </svg>
--- a/packages/mermaid/src/docs/public/icons/version-history.svg
+++ b/packages/mermaid/src/docs/public/icons/version-history.svg
@@ -0,0 +1,19 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
  <mask
    id="mask0_89_26543"
    style="mask-type: alpha"
    maskUnits="userSpaceOnUse"
    x="0"
    y="0"
    width="20"
    height="20"
  >
    <rect width="20" height="20" fill="currentColor" />
  </mask>
  <g mask="url(#mask0_89_26543)">
    <path
      d="M10 17C8.05556 17 6.40278 16.3194 5.04167 14.9583C3.68056 13.5972 3 11.9444 3 10H4.5C4.5 11.5139 5.03819 12.809 6.11458 13.8854C7.19097 14.9618 8.48611 15.5 10 15.5C11.5139 15.5 12.809 14.9618 13.8854 13.8854C14.9618 12.809 15.5 11.5139 15.5 10C15.5 8.48611 14.9618 7.19097 13.8854 6.11458C12.809 5.03819 11.5139 4.5 10 4.5C9.13889 4.5 8.3434 4.67778 7.61354 5.03333C6.88382 5.38889 6.26958 5.87778 5.77083 6.5H8V8H3V3H4.5V5.70833C5.13889 4.875 5.93403 4.21528 6.88542 3.72917C7.83681 3.24306 8.875 3 10 3C10.9722 3 11.8828 3.18472 12.7319 3.55417C13.581 3.92361 14.3199 4.42271 14.9485 5.05146C15.5773 5.68007 16.0764 6.41896 16.4458 7.26813C16.8153 8.11715 17 9.02778 17 10C17 10.9722 16.8153 11.8828 16.4458 12.7319C16.0764 13.581 15.5773 14.3199 14.9485 14.9485C14.3199 15.5773 13.581 16.0764 12.7319 16.4458C11.8828 16.8153 10.9722 17 10 17ZM12.0833 12.8333L9.25 10V6H10.75V9.375L13.1458 11.7708L12.0833 12.8333Z"
      fill="currentColor"
    />
  </g>
 </svg>
--- a/packages/mermaid/src/docs/public/icons/whiteboard.svg
+++ b/packages/mermaid/src/docs/public/icons/whiteboard.svg
@@ -0,0 +1,19 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
  <mask
    id="mask0_89_26533"
    style="mask-type: alpha"
    maskUnits="userSpaceOnUse"
    x="0"
    y="0"
    width="20"
    height="20"
  >
    <rect width="20" height="20" fill="currentColor" />
  </mask>
  <g mask="url(#mask0_89_26533)">
    <path
      d="M6.54165 17L5.83332 16.2917L4.56249 17.5625C4.27082 17.8542 3.91665 18 3.49999 18C3.08332 18 2.72915 17.8542 2.43749 17.5625C2.15971 17.2569 2.01735 16.8993 2.0104 16.4896C2.00346 16.0799 2.14582 15.7292 2.43749 15.4375L3.70832 14.1667L2.99999 13.4583L13.0208 3.4375C13.3125 3.14583 13.6632 3 14.0729 3C14.4826 3 14.8403 3.14583 15.1458 3.4375L16.5625 4.85417C16.8542 5.13194 17 5.47917 17 5.89583C17 6.3125 16.8542 6.66667 16.5625 6.95833L6.54165 17ZM9.27082 9.33333L5.12499 13.4583L6.54165 14.875L10.6875 10.7292L9.27082 9.33333Z"
      fill="#2B2542"
    />
  </g>
 </svg>
--- a/packages/mermaid/src/docs/public/mermaid-logo-horizontal.svg
+++ b/packages/mermaid/src/docs/public/mermaid-logo-horizontal.svg
@@ -0,0 +1,11 @@
 <svg width="1200" height="630" viewBox="0 0 1200 630" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_1_2)">
 <rect width="1200" height="630" fill="#FF3670"/>
 <path d="M807.836 142.655C715.59 138.706 630.888 195.464 599.461 282.281C568.034 195.464 483.332 138.706 391.086 142.655C388.013 215.854 423.032 285.658 483.546 326.958C514.556 348.257 533.087 383.583 532.984 421.202V486.46H665.951V421.202C665.843 383.585 684.37 348.258 715.376 326.958C775.907 285.674 810.931 215.859 807.836 142.655Z" fill="white"/>
 </g>
 <defs>
 <clipPath id="clip0_1_2">
 <rect width="1200" height="630" fill="white"/>
 </clipPath>
 </defs>
 </svg>
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -1253,7 +1253,7 @@ flowchart TD
 There are two ways to display these FontAwesome icons:
-### Register FontAwesome icon packs (v<MERMAID_RELEASE_VERSION>+)
+### Register FontAwesome icon packs (v11.7.0+)
 You can register your own FontAwesome icon pack following the ["Registering icon packs" instructions](../config/icons.md).
--- a/packages/mermaid/src/docs/syntax/packet.md
+++ b/packages/mermaid/src/docs/syntax/packet.md
@@ -17,7 +17,7 @@ start-end: "Block name" %% Multi-bit blocks
 ... More Fields ...
 ```
-### Bits Syntax (v<MERMAID_RELEASE_VERSION>+)
+### Bits Syntax (v11.7.0+)
 Using start and end bit counts can be difficult, especially when modifying a design. For this we add a bit count field, which starts from the end of the previous field automagically. Use `+<count>` to set the number of bits, thus:
--- a/packages/parser/CHANGELOG.md
+++ b/packages/parser/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @mermaid-js/parser
 ## 0.5.0
 ### Minor Changes
 - [#5980](https://github.com/mermaid-js/mermaid/pull/5980) [`df9df9d`](https://github.com/mermaid-js/mermaid/commit/df9df9dc32b80a8c320cc0efd5483b9485f15bde) Thanks [@BryanCrotazGivEnergy](https://github.com/BryanCrotazGivEnergy)! - feat: Add shorter `+<count>: Label` syntax in packet diagram
 ### Patch Changes
 - [#6407](https://github.com/mermaid-js/mermaid/pull/6407) [`cdbd3e5`](https://github.com/mermaid-js/mermaid/commit/cdbd3e58a3a35d63a79258115dedca4a535c1038) Thanks [@thomascizeron](https://github.com/thomascizeron)! - Refactor grammar so that title don't break Architecture Diagrams
 ## 0.4.0
 ### Minor Changes
--- a/packages/parser/package.json
+++ b/packages/parser/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@mermaid-js/parser",
-  "version": "0.4.0",
+  "version": "0.5.0",
  "description": "MermaidJS parser",
  "author": "Yokozuna59",
  "contributors": [
--- a/packages/tiny/CHANGELOG.md
+++ b/packages/tiny/CHANGELOG.md
@@ -0,0 +1,240 @@
 # mermaid
 ## 11.7.0
 ### Minor Changes
 - [#6479](https://github.com/mermaid-js/mermaid/pull/6479) [`97b79c3`](https://github.com/mermaid-js/mermaid/commit/97b79c3578a2004c63fa32f6d5e17bd8a536e13a) Thanks [@monicanguyen25](https://github.com/monicanguyen25)! - feat: Add Vertical Line To Gantt Plot At Specified Time
 - [#6225](https://github.com/mermaid-js/mermaid/pull/6225) [`41e84b7`](https://github.com/mermaid-js/mermaid/commit/41e84b726a1f2df002b77c4b0071e2c15e47838e) Thanks [@Shahir-47](https://github.com/Shahir-47)! - feat: Add support for styling Journey Diagram title (color, font-family, and font-size)
 - [#6423](https://github.com/mermaid-js/mermaid/pull/6423) [`aa6cb86`](https://github.com/mermaid-js/mermaid/commit/aa6cb86899968c65561eebfc1d54dd086b1518a2) Thanks [@BambioGaming](https://github.com/BambioGaming)! - Added support for the click directive in stateDiagram syntax
 - [#5980](https://github.com/mermaid-js/mermaid/pull/5980) [`df9df9d`](https://github.com/mermaid-js/mermaid/commit/df9df9dc32b80a8c320cc0efd5483b9485f15bde) Thanks [@BryanCrotazGivEnergy](https://github.com/BryanCrotazGivEnergy)! - feat: Add shorter `+<count>: Label` syntax in packet diagram
 - [#6523](https://github.com/mermaid-js/mermaid/pull/6523) [`c17277e`](https://github.com/mermaid-js/mermaid/commit/c17277e743b1c12e4134fba44c62a7d5885f2574) Thanks [@NourBenz](https://github.com/NourBenz)! - fix: allow sequence diagram arrows with a trailing colon but no message
 - [#6475](https://github.com/mermaid-js/mermaid/pull/6475) [`a1ba65c`](https://github.com/mermaid-js/mermaid/commit/a1ba65c0c08432ec36e772570c3a5899cb57c102) Thanks [@Shahir-47](https://github.com/Shahir-47)! - feat: Dynamically Render Data Labels Within Bar Charts
 ### Patch Changes
 - [#6588](https://github.com/mermaid-js/mermaid/pull/6588) [`b1cf291`](https://github.com/mermaid-js/mermaid/commit/b1cf29127348602137552405e3300dee1697f0de) Thanks [@omkarht](https://github.com/omkarht)! - Fix stroke styles for ER diagram to correctly apply path and row-specific styles
 - [#6296](https://github.com/mermaid-js/mermaid/pull/6296) [`a4754ad`](https://github.com/mermaid-js/mermaid/commit/a4754ad195e70d52fbd46ef44f40797d2d215e41) Thanks [@sidharthv96](https://github.com/sidharthv96)! - chore: Convert StateDB into TypeScript
 - [#6463](https://github.com/mermaid-js/mermaid/pull/6463) [`2b05d7e`](https://github.com/mermaid-js/mermaid/commit/2b05d7e1edef635e6c80cb383b10ea0a89279f41) Thanks [@AaronMoat](https://github.com/AaronMoat)! - fix: Remove incorrect `style="undefined;"` attributes in some Mermaid diagrams
 - [#6282](https://github.com/mermaid-js/mermaid/pull/6282) [`d63d3bf`](https://github.com/mermaid-js/mermaid/commit/d63d3bf1e7596ac7eeb24ba06cbc7a70f9c8b070) Thanks [@saurabhg772244](https://github.com/saurabhg772244)! - FontAwesome icons can now be embedded as SVGs in flowcharts if they are registered via `mermaid.registerIconPacks`.
 - [#6407](https://github.com/mermaid-js/mermaid/pull/6407) [`cdbd3e5`](https://github.com/mermaid-js/mermaid/commit/cdbd3e58a3a35d63a79258115dedca4a535c1038) Thanks [@thomascizeron](https://github.com/thomascizeron)! - Refactor grammar so that title don't break Architecture Diagrams
 - [#6343](https://github.com/mermaid-js/mermaid/pull/6343) [`1ddaf10`](https://github.com/mermaid-js/mermaid/commit/1ddaf10b89d8c7311c5e10d466b42fa36b61210b) Thanks [@jeswr](https://github.com/jeswr)! - fix: allow colons in events
 - [#6616](https://github.com/mermaid-js/mermaid/pull/6616) [`ca80f71`](https://github.com/mermaid-js/mermaid/commit/ca80f719eac86cf4c31392105d5d896f39b84bbc) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - fix(timeline): ensure consistent vertical line lengths with visible arrowheads
  Fixed timeline diagrams where vertical dashed lines from tasks had inconsistent lengths. All vertical lines now extend to the same depth regardless of the number of events in each column, with sufficient padding to clearly display both the dashed line pattern and complete arrowheads.
 - [#6566](https://github.com/mermaid-js/mermaid/pull/6566) [`bca6ed6`](https://github.com/mermaid-js/mermaid/commit/bca6ed67c3e0db910bf498fdd0fc0346c02d392b) Thanks [@arpitjain099](https://github.com/arpitjain099)! - fix: Fix incomplete string escaping in URL manipulation logic when `arrowMarkerAbsolute: true` by ensuring all unsafe characters are escaped.
 - Updated dependencies [[`df9df9d`](https://github.com/mermaid-js/mermaid/commit/df9df9dc32b80a8c320cc0efd5483b9485f15bde), [`cdbd3e5`](https://github.com/mermaid-js/mermaid/commit/cdbd3e58a3a35d63a79258115dedca4a535c1038)]:
  - @mermaid-js/parser@0.5.0
 ## 11.6.0
 ### Minor Changes
 - [#6408](https://github.com/mermaid-js/mermaid/pull/6408) [`ad65313`](https://github.com/mermaid-js/mermaid/commit/ad653138e16765d095613a6e5de86dc5e52ac8f0) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - fix: restore curve type configuration functionality for flowcharts. This fixes the issue where curve type settings were not being applied when configured through any of the following methods:
  - Config
  - Init directive (%%{ init: { 'flowchart': { 'curve': '...' } } }%%)
  - LinkStyle command (linkStyle default interpolate ...)
 - [#6381](https://github.com/mermaid-js/mermaid/pull/6381) [`95d73bc`](https://github.com/mermaid-js/mermaid/commit/95d73bc3f064dbf261a06483f94a7ef4d0bb52eb) Thanks [@thomascizeron](https://github.com/thomascizeron)! - Add Radar Chart
 ### Patch Changes
 - [#2](https://github.com/calvinvette/mermaid/pull/2) [`16d9b63`](https://github.com/mermaid-js/mermaid/commit/16d9b6345749ab5f24d5b8433efc3635d4913863) Thanks [@calvinvette](https://github.com/calvinvette)! - - [#6388](https://github.com/mermaid-js/mermaid/pull/6386)
  Thanks [@bollwyvl](https://github.com/bollwyvl) - Fix requirement diagram containment arrow
 - Updated dependencies [[`95d73bc`](https://github.com/mermaid-js/mermaid/commit/95d73bc3f064dbf261a06483f94a7ef4d0bb52eb)]:
  - @mermaid-js/parser@0.4.0
 ## 11.5.0
 ### Minor Changes
 - [#6187](https://github.com/mermaid-js/mermaid/pull/6187) [`7809b5a`](https://github.com/mermaid-js/mermaid/commit/7809b5a93fae127f45727071f5ff14325222c518) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - Flowchart new syntax for node metadata bugs
  - Incorrect label mapping for nodes when using `&`
  - Syntax error when `}` with trailing spaces before new line
 - [#6136](https://github.com/mermaid-js/mermaid/pull/6136) [`ec0d9c3`](https://github.com/mermaid-js/mermaid/commit/ec0d9c389aa6018043187654044c1e0b5aa4f600) Thanks [@knsv](https://github.com/knsv)! - Adding support for animation of flowchart edges
 - [#6373](https://github.com/mermaid-js/mermaid/pull/6373) [`05bdf0e`](https://github.com/mermaid-js/mermaid/commit/05bdf0e20e2629fe77513218fbd4e28e65f75882) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - Upgrade Requirement and ER diagram to use the common renderer flow
  - Added support for directions
  - Added support for hand drawn look
 - [#6371](https://github.com/mermaid-js/mermaid/pull/6371) [`4d25cab`](https://github.com/mermaid-js/mermaid/commit/4d25caba8e65df078966a283e7e0ae1200bef595) Thanks [@knsv](https://github.com/knsv)! - The arrowhead color should match the color of the edge. Creates a unique clone of the arrow marker with the appropriate color.
 ### Patch Changes
 - [#6064](https://github.com/mermaid-js/mermaid/pull/6064) [`2a91849`](https://github.com/mermaid-js/mermaid/commit/2a91849a38641e97ed6b20cb60aa4506d1b63177) Thanks [@NicolasNewman](https://github.com/NicolasNewman)! - fix: architecture diagrams no longer grow to extreme heights due to conflicting alignments
 - [#6198](https://github.com/mermaid-js/mermaid/pull/6198) [`963efa6`](https://github.com/mermaid-js/mermaid/commit/963efa64c794466dcd0f06bad6de6ba554d05a54) Thanks [@ferozmht](https://github.com/ferozmht)! - Fixes for consistent edge id creation & handling edge cases for animate edge feature
 - [#6196](https://github.com/mermaid-js/mermaid/pull/6196) [`127bac1`](https://github.com/mermaid-js/mermaid/commit/127bac1147034d8a8588cc8f7870abe92ebc945e) Thanks [@knsv](https://github.com/knsv)! - Fix for issue #6195 - allowing @ signs inside node labels
 - [#6212](https://github.com/mermaid-js/mermaid/pull/6212) [`90bbf90`](https://github.com/mermaid-js/mermaid/commit/90bbf90a83bf5da53fc8030cf1370bc8238fa4aa) Thanks [@saurabhg772244](https://github.com/saurabhg772244)! - fix: `mermaidAPI.getDiagramFromText()` now returns a new different db for each class diagram
 - [#6218](https://github.com/mermaid-js/mermaid/pull/6218) [`232e60c`](https://github.com/mermaid-js/mermaid/commit/232e60c8cbaea804e6d98aa90f90d1ce76730e17) Thanks [@saurabhg772244](https://github.com/saurabhg772244)! - fix: revert state db to resolve getData returning empty nodes and edges
 - [#6250](https://github.com/mermaid-js/mermaid/pull/6250) [`9cad3c7`](https://github.com/mermaid-js/mermaid/commit/9cad3c7aea3bbbc61495b23225ccff76d312783f) Thanks [@saurabhg772244](https://github.com/saurabhg772244)! - `mermaidAPI.getDiagramFromText()` now returns a new db instance on each call for state diagrams
 - [#6293](https://github.com/mermaid-js/mermaid/pull/6293) [`cfd84e5`](https://github.com/mermaid-js/mermaid/commit/cfd84e54d502f4d36a35b50478121558cfbef2c4) Thanks [@saurabhg772244](https://github.com/saurabhg772244)! - Added versioning to StateDB and updated tests and diagrams to use it.
 - [#6161](https://github.com/mermaid-js/mermaid/pull/6161) [`6cc31b7`](https://github.com/mermaid-js/mermaid/commit/6cc31b74530baa6d0f527346ab1395b0896bb3c2) Thanks [@saurabhg772244](https://github.com/saurabhg772244)! - fix: `mermaidAPI.getDiagramFromText()` now returns a new different db for each flowchart
 - [#6272](https://github.com/mermaid-js/mermaid/pull/6272) [`ffa7804`](https://github.com/mermaid-js/mermaid/commit/ffa7804af0701b3d044d6794e36bd9132d6c7e8d) Thanks [@saurabhg772244](https://github.com/saurabhg772244)! - fix: `mermaidAPI.getDiagramFromText()` now returns a new different db for each sequence diagram. Added unique IDs for messages.
 - [#6205](https://github.com/mermaid-js/mermaid/pull/6205) [`32a68d4`](https://github.com/mermaid-js/mermaid/commit/32a68d489ed83a5b79f516d6b2fb3a7505c5eb24) Thanks [@saurabhg772244](https://github.com/saurabhg772244)! - fix: Gantt, Sankey and User Journey diagram are now able to pick font-family from mermaid config.
 - [#6295](https://github.com/mermaid-js/mermaid/pull/6295) [`da6361f`](https://github.com/mermaid-js/mermaid/commit/da6361f6527918b4b6a9c07cc9558cf2e2c709d2) Thanks [@omkarht](https://github.com/omkarht)! - fix: `getDirection` and `setDirection` in `stateDb` refactored to return and set actual direction
 - [#6185](https://github.com/mermaid-js/mermaid/pull/6185) [`3e32332`](https://github.com/mermaid-js/mermaid/commit/3e32332814c659e7ed1bb73d4a26ed4e61b77d59) Thanks [@saurabhg772244](https://github.com/saurabhg772244)! - `mermaidAPI.getDiagramFromText()` now returns a new different db for each state diagram
 ## 11.4.1
 ### Patch Changes
 - [#6059](https://github.com/mermaid-js/mermaid/pull/6059) [`01b5079`](https://github.com/mermaid-js/mermaid/commit/01b5079562ec8d34ce9964910f168873843c68f8) Thanks [@knsv](https://github.com/knsv)! - fix: Kanban diagrams will not render when adding a number as ticket id or assigned for a task
 - [#6038](https://github.com/mermaid-js/mermaid/pull/6038) [`1388662`](https://github.com/mermaid-js/mermaid/commit/1388662132cc829f9820c2e9970ae04e2dd90588) Thanks [@knsv](https://github.com/knsv)! - fix: Intersection calculations for tilted cylinder/DAS when using handdrawn look. Some random seeds could cause the calculations to break.
 - [#6079](https://github.com/mermaid-js/mermaid/pull/6079) [`fe3cffb`](https://github.com/mermaid-js/mermaid/commit/fe3cffbb673a25b81989aacb06e5d0eda35326db) Thanks [@aloisklink](https://github.com/aloisklink)! - Bump dompurify to `^3.2.1`. This removes the need for `@types/dompurify`.
 ## 11.4.0
 ### Minor Changes
 - [#5999](https://github.com/mermaid-js/mermaid/pull/5999) [`742ad7c`](https://github.com/mermaid-js/mermaid/commit/742ad7c130964df1fb5544e909d9556081285f68) Thanks [@knsv](https://github.com/knsv)! - Adding Kanban board, a new diagram type
 - [#5880](https://github.com/mermaid-js/mermaid/pull/5880) [`bdf145f`](https://github.com/mermaid-js/mermaid/commit/bdf145ffe362462176d9c1e68d5f3ff5c9d962b0) Thanks [@yari-dewalt](https://github.com/yari-dewalt)! - Class diagram changes:
  - Updates the class diagram to the new unified way of rendering.
  - Includes a new "classBox" shape to be used in diagrams
  - Other updates such as:
    - the option to hide the empty members box in class diagrams,
    - support for handDrawn look,
    - the introduction of the classDef statement into class diagrams,
    - support for styling the default class,
    - support lollipop interfaces.
  - Includes fixes / additions for #5562 #3139 and #4037
 ### Patch Changes
 - [#5937](https://github.com/mermaid-js/mermaid/pull/5937) [`17b7831`](https://github.com/mermaid-js/mermaid/commit/17b783135f9b2b7748b620dbf81d0f56ab4755f1) Thanks [@saurabhg772244](https://github.com/saurabhg772244)! - fix: Jagged edge fix for icon shape
 - [#5933](https://github.com/mermaid-js/mermaid/pull/5933) [`72d60d2`](https://github.com/mermaid-js/mermaid/commit/72d60d2633584eb59bccdb6cf30b9522db645db2) Thanks [@remcohaszing](https://github.com/remcohaszing)! - Add missing TypeScript dependencies
 - [#5937](https://github.com/mermaid-js/mermaid/pull/5937) [`17b7831`](https://github.com/mermaid-js/mermaid/commit/17b783135f9b2b7748b620dbf81d0f56ab4755f1) Thanks [@saurabhg772244](https://github.com/saurabhg772244)! - fix: Icon color fix for colored icons.
 - [#6002](https://github.com/mermaid-js/mermaid/pull/6002) [`5fabd41`](https://github.com/mermaid-js/mermaid/commit/5fabd414fbee01e43bf6c900907ffc1511ca7440) Thanks [@aloisklink](https://github.com/aloisklink)! - fix: error `mermaid.parse` on an invalid shape, so that it matches the errors thrown by `mermaid.render`
 ## 11.3.0
 ### Minor Changes
 - [#5825](https://github.com/mermaid-js/mermaid/pull/5825) [`9e3aa70`](https://github.com/mermaid-js/mermaid/commit/9e3aa705ae21fd4898504ab22d775a9e437b898e) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - New Flowchart Shapes (with new syntax)
 ### Patch Changes
 - [#5849](https://github.com/mermaid-js/mermaid/pull/5849) [`6c5b7ce`](https://github.com/mermaid-js/mermaid/commit/6c5b7ce9f41c0fbd59fe03dbefc8418d97697f0a) Thanks [@ReneLombard](https://github.com/ReneLombard)! - Fixed an issue when the mermaid classdiagram crashes when adding a . to the namespace.
  For example
  ```mermaid
  classDiagram
    namespace Company.Project.Module {
      class GenericClass~T~ {
        +addItem(item: T)
        +getItem() T
      }
    }
  ```
 - [#5914](https://github.com/mermaid-js/mermaid/pull/5914) [`de2c05c`](https://github.com/mermaid-js/mermaid/commit/de2c05cd5463af68d19dd7b6b3f1303d69ddb2dd) Thanks [@aloisklink](https://github.com/aloisklink)! - Ban DOMPurify v3.1.7 as a dependency
 ## 11.2.1
 ### Patch Changes
 - [#5856](https://github.com/mermaid-js/mermaid/pull/5856) [`bfd8c63`](https://github.com/mermaid-js/mermaid/commit/bfd8c63daaa8420e57da9953922b9f0c94123064) Thanks [@knsv](https://github.com/knsv)! - Fix for issue with calculation of label width when using in firefox
 ## 11.2.0
 ### Minor Changes
 - [#5831](https://github.com/mermaid-js/mermaid/pull/5831) [`64abf29`](https://github.com/mermaid-js/mermaid/commit/64abf29ea870eaa47148197f95ce714f85bd7eea) Thanks [@sidharthv96](https://github.com/sidharthv96)! - feat: Return parsed config from mermaid.parse
 ### Patch Changes
 - [#5838](https://github.com/mermaid-js/mermaid/pull/5838) [`5e75320`](https://github.com/mermaid-js/mermaid/commit/5e75320d49eab65aca630dcc3c04c8d620a8bbf7) Thanks [@bollwyvl](https://github.com/bollwyvl)! - fix: Replace $root with relative paths
 ## 11.1.1
 ### Patch Changes
 - [#5828](https://github.com/mermaid-js/mermaid/pull/5828) [`4c43d21`](https://github.com/mermaid-js/mermaid/commit/4c43d21196f784b6f483ae635fc462329f3d176f) Thanks [@knsv](https://github.com/knsv)! - fix: Fix for issue where self-loops in the root of diagrams break the rendering
 ## 11.1.0
 ### Minor Changes
 - [#5793](https://github.com/mermaid-js/mermaid/pull/5793) [`6ecdf7b`](https://github.com/mermaid-js/mermaid/commit/6ecdf7be688efdc53c52fea3ba891327242bc890) Thanks [@sidharthv96](https://github.com/sidharthv96)! - feat: Add support for iconify icons
 - [#5711](https://github.com/mermaid-js/mermaid/pull/5711) [`8e640da`](https://github.com/mermaid-js/mermaid/commit/8e640da5436e8ae013b11b1c1821a9afcc15d0d3) Thanks [@NicolasNewman](https://github.com/NicolasNewman)! - feat(er): allow multi-line relationship labels
 - [#5452](https://github.com/mermaid-js/mermaid/pull/5452) [`256a148`](https://github.com/mermaid-js/mermaid/commit/256a148bbf484fc7db6c19f94dd69d5d268ee048) Thanks [@NicolasNewman](https://github.com/NicolasNewman)! - New Diagram: Architecture
  Adds architecture diagrams which allows users to show relations between services.
 ### Patch Changes
 - [#5810](https://github.com/mermaid-js/mermaid/pull/5810) [`28bd07f`](https://github.com/mermaid-js/mermaid/commit/28bd07fdeb4fc981107d21317ec6160b31f80116) Thanks [@knsv](https://github.com/knsv)! - Fix for self loops in cluster
  Supporting legacy defaultRenderer directive
 - [#5789](https://github.com/mermaid-js/mermaid/pull/5789) [`16faef4`](https://github.com/mermaid-js/mermaid/commit/16faef4613b91a7d3a98a1563c25b57f9238acc7) Thanks [@sidharthv96](https://github.com/sidharthv96)! - chore: Move icons to architecture, remove full icon sets to reduce bundle size
 - Updated dependencies [[`256a148`](https://github.com/mermaid-js/mermaid/commit/256a148bbf484fc7db6c19f94dd69d5d268ee048), [`7d8143b`](https://github.com/mermaid-js/mermaid/commit/7d8143b917ee3562149a0e0a821ed2d6f29cc05d)]:
  - @mermaid-js/parser@0.3.0
 ## 11.0.2
 ### Patch Changes
 - [#5664](https://github.com/mermaid-js/mermaid/pull/5664) [`5deaef4`](https://github.com/mermaid-js/mermaid/commit/5deaef456e74d796866431c26f69360e4e74dbff) Thanks [@Austin-Fulbright](https://github.com/Austin-Fulbright)! - chore: Migrate git graph to langium, use typescript for internals
 - Updated dependencies [[`5deaef4`](https://github.com/mermaid-js/mermaid/commit/5deaef456e74d796866431c26f69360e4e74dbff)]:
  - @mermaid-js/parser@0.2.0
 ## 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/tiny/package.json
+++ b/packages/tiny/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@mermaid-js/tiny",
-  "version": "11.6.0",
+  "version": "11.7.0",
  "description": "Tiny version of mermaid",
  "type": "commonjs",
  "main": "./dist/mermaid.tiny.js",