Merge pull request #5188 from mermaid-js/release/10.7.0

Release/10.7.0
2025-11-19 20:24:16 +01:00 · 2024-01-15 14:34:14 +05:30
parent 5e61867c89 d972ddd932
commit 0bd2340a33
102 changed files with 2786 additions and 1019 deletions
--- a/.github/pr-labeler.yml
+++ b/.github/pr-labeler.yml
@@ -1,4 +1,22 @@
-'Type: Bug / Error': ['bug/*', fix/*]
-'Type: Enhancement': ['feature/*', 'feat/*']
-'Type: Other': ['other/*', 'chore/*', 'test/*', 'refactor/*']
-'Area: Documentation': ['docs/*']
+# yaml-language-server: $schema=https://raw.githubusercontent.com/release-drafter/release-drafter/master/schema.json
+autolabeler:
+  - label: 'Type: Bug / Error'
+    branch:
+      - '/bug\/.+/'
+      - '/fix\/.+/'
+  - label: 'Type: Enhancement'
+    branch:
+      - '/feature\/.+/'
+      - '/feat\/.+/'
+  - label: 'Type: Other'
+    branch:
+      - '/other\/.+/'
+      - '/chore\/.+/'
+      - '/test\/.+/'
+      - '/refactor\/.+/'
+  - label: 'Area: Documentation'
+    branch:
+      - '/docs\/.+/'
+
+template: |
+  This field is unused, as we only use this config file for labeling PRs.
--- a/.github/release-drafter.yml
+++ b/.github/release-drafter.yml
@@ -25,8 +25,6 @@ categories:
 change-template: '- $TITLE (#$NUMBER) @$AUTHOR'
 sort-by: title
 sort-direction: ascending
-branches:
-  - develop
 exclude-labels:
  - 'Skip changelog'
 no-changes-template: 'This release contains minor changes and bugfixes.'
--- a/.github/workflows/build-docs.yml
+++ b/.github/workflows/build-docs.yml
@@ -16,12 +16,12 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4

      - uses: pnpm/action-setup@v2

      - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
        with:
          cache: pnpm
          node-version: 18
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -19,13 +19,13 @@ jobs:
      matrix:
        node-version: [18.x]
    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4

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

      - name: Setup Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
        with:
          cache: pnpm
          node-version: ${{ matrix.node-version }}
--- a/.github/workflows/check-readme-in-sync.yml
+++ b/.github/workflows/check-readme-in-sync.yml
@@ -18,7 +18,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4

      - name: Check for difference in README.md and docs/README.md
        run: |
--- a/.github/workflows/checks.yml
+++ b/.github/workflows/checks.yml
@@ -15,7 +15,7 @@ jobs:
    name: check tests
    if: github.repository_owner == 'mermaid-js'
    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - uses: testomatio/check-tests@stable
--- a/.github/workflows/codeql.yml
+++ b/.github/workflows/codeql.yml
@@ -29,7 +29,7 @@ jobs:

    steps:
      - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4

      # Initializes the CodeQL tools for scanning.
      - name: Initialize CodeQL
--- a/.github/workflows/dependency-review.yml
+++ b/.github/workflows/dependency-review.yml
@@ -1,6 +1,6 @@
 # Dependency Review Action
 #
-# This Action will scan dependency manifest files that change as part of a Pull Reqest, surfacing known-vulnerable versions of the packages declared or updated in the PR. Once installed, if the workflow run is marked as required, PRs introducing known-vulnerable packages will be blocked from merging.
+# This Action will scan dependency manifest files that change as part of a Pull Request, surfacing known-vulnerable versions of the packages declared or updated in the PR. Once installed, if the workflow run is marked as required, PRs introducing known-vulnerable packages will be blocked from merging.
 #
 # Source repository: https://github.com/actions/dependency-review-action
 # Public documentation: https://docs.github.com/en/code-security/supply-chain-security/understanding-your-software-supply-chain/about-dependency-review#dependency-review-enforcement
@@ -15,6 +15,6 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: 'Checkout Repository'
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
      - name: 'Dependency Review'
        uses: actions/dependency-review-action@v3
--- a/.github/workflows/e2e-applitools.yml
+++ b/.github/workflows/e2e-applitools.yml
@@ -28,15 +28,15 @@ jobs:
      - if: ${{ ! env.USE_APPLI }}
        name: Warn if not using Applitools
        run: |
-          echo "::error,title=Not using Applitols::APPLITOOLS_API_KEY is empty, disabling Applitools for this run."
+          echo "::error,title=Not using Applitools::APPLITOOLS_API_KEY is empty, disabling Applitools for this run."

-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4

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

      - name: Setup Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}

--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -17,13 +17,13 @@ jobs:
        node-version: [18.x]
        containers: [1, 2, 3, 4]
    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4

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

      - name: Setup Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}

--- a/.github/workflows/link-checker.yml
+++ b/.github/workflows/link-checker.yml
@@ -26,7 +26,7 @@ jobs:
      # lychee only uses the GITHUB_TOKEN to avoid rate-limiting
      contents: read
    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4

      - name: Restore lychee cache
        uses: actions/cache@v3
@@ -36,7 +36,7 @@ jobs:
          restore-keys: cache-lychee-

      - name: Link Checker
-        uses: lycheeverse/lychee-action@v1.8.0
+        uses: lycheeverse/lychee-action@v1.9.1
        with:
          args: >-
            --config .github/lychee.toml
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -20,13 +20,13 @@ jobs:
      matrix:
        node-version: [18.x]
    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4

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

      - name: Setup Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
        with:
          cache: pnpm
          node-version: ${{ matrix.node-version }}
--- a/.github/workflows/pr-labeler-config-validator.yml
+++ b/.github/workflows/pr-labeler-config-validator.yml
@@ -1,23 +0,0 @@
-name: Validate PR Labeler Configuration
-on:
-  push:
-    paths:
-      - .github/workflows/pr-labeler-config-validator.yml
-      - .github/workflows/pr-labeler.yml
-      - .github/pr-labeler.yml
-  pull_request:
-    paths:
-      - .github/workflows/pr-labeler-config-validator.yml
-      - .github/workflows/pr-labeler.yml
-      - .github/pr-labeler.yml
-
-jobs:
-  pr-labeler:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Repository
-        uses: actions/checkout@v3
-      - name: Validate Configuration
-        uses: Yash-Singh1/pr-labeler-config-validator@releases/v0.0.3
-        with:
-          configuration-path: .github/pr-labeler.yml
--- a/.github/workflows/pr-labeler.yml
+++ b/.github/workflows/pr-labeler.yml
@@ -1,13 +1,31 @@
 name: Apply labels to PR
 on:
  pull_request_target:
-    types: [opened]
+    # required for pr-labeler to support PRs from forks
+    # ===================== ⛔ ☢️ 🚫 ⚠️ Warning ⚠️ 🚫 ☢️ ⛔ =======================
+    # Be very careful what you put in this GitHub Action workflow file to avoid
+    # malicious PRs from getting access to the Mermaid-js repo.
+    #
+    # Please read the following first before reviewing/merging:
+    # - https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#pull_request_target
+    # - https://securitylab.github.com/research/github-actions-preventing-pwn-requests/
+    types: [opened, reopened, synchronize]
+
+permissions:
+  contents: read

 jobs:
  pr-labeler:
    runs-on: ubuntu-latest
+    permissions:
+      contents: read # read permission is required to read config file
+      pull-requests: write # write permission is required to label PRs
    steps:
      - name: Label PR
-        uses: TimonVS/pr-labeler-action@v4
+        uses: release-drafter/release-drafter@v5
+        with:
+          config-name: pr-labeler.yml
+          disable-autolabeler: false
+          disable-releaser: true
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
--- a/.github/workflows/publish-docs.yml
+++ b/.github/workflows/publish-docs.yml
@@ -23,12 +23,12 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4

      - uses: pnpm/action-setup@v2

      - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
        with:
          cache: pnpm
          node-version: 18
--- a/.github/workflows/release-draft.yml
+++ b/.github/workflows/release-draft.yml
@@ -5,11 +5,19 @@ on:
    branches:
      - develop

+permissions:
+  contents: read
+
 jobs:
  draft-release:
    runs-on: ubuntu-latest
+    permissions:
+      contents: write # write permission is required to create a github release
+      pull-requests: read # required to read PR titles/labels
    steps:
      - name: Draft Release
-        uses: toolmantim/release-drafter@v5
+        uses: release-drafter/release-drafter@v5
+        with:
+          disable-autolabeler: true
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
--- a/.github/workflows/release-preview-publish.yml
+++ b/.github/workflows/release-preview-publish.yml
@@ -9,14 +9,14 @@ jobs:
  publish-preview:
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
        with:
          fetch-depth: 0

      - uses: pnpm/action-setup@v2

      - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
        with:
          cache: pnpm
          node-version: 18.x
--- a/.github/workflows/release-publish.yml
+++ b/.github/workflows/release-publish.yml
@@ -8,14 +8,14 @@ jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
      - uses: fregante/setup-git-user@v2

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

      - name: Setup Node.js v18
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
        with:
          cache: pnpm
          node-version: 18.x
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -12,13 +12,13 @@ jobs:
      matrix:
        node-version: [18.x]
    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4

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

      - name: Setup Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
        with:
          cache: pnpm
          node-version: ${{ matrix.node-version }}
--- a/.github/workflows/update-browserlist.yml
+++ b/.github/workflows/update-browserlist.yml
@@ -8,7 +8,7 @@ jobs:
  update-browser-list:
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
      - run: npx browserslist@latest --update-db
      - name: Commit changes
        uses: EndBug/add-and-commit@v9
--- a/.npmrc
+++ b/.npmrc
@@ -1,2 +1,3 @@
+registry=https://registry.npmjs.org
 auto-install-peers=true
 strict-peer-dependencies=false
--- a/.prettierignore
+++ b/.prettierignore
@@ -10,3 +10,6 @@ stats
 .nyc_output
 # Autogenerated by `pnpm run --filter mermaid types:build-config`
 packages/mermaid/src/config.type.ts
+# Ignore the files creates in /demos/dev except for example.html
+demos/dev/**
+!/demos/dev/example.html
--- a/.vite/build.ts
+++ b/.vite/build.ts
@@ -117,6 +117,9 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
        output,
      },
    },
+    define: {
+      'import.meta.vitest': 'undefined',
+    },
    resolve: {
      extensions: [],
    },
--- a/README.md
+++ b/README.md
@@ -44,6 +44,22 @@ Try Live Editor previews of future releases: <a href="https://develop.git.mermai

 <a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>

+## Table of content
+
+<details>
+<summary>Expand contents</summary>
+
+- [About](#about)
+- [Examples](#examples)
+- [Release](#release)
+- [Related projects](#related-projects)
+- [Contributors](#contributors)
+- [Security and safe diagrams](#security-and-safe-diagrams)
+- [Reporting vulnerabilities](#reporting-vulnerabilities)
+- [Appreciation](#appreciation)
+
+</details>
+
 ## About

 <!-- <Main description>   -->
--- a/cSpell.json
+++ b/cSpell.json
@@ -26,6 +26,7 @@
    "città",
    "classdef",
    "codedoc",
+    "codemia",
    "colour",
    "commitlint",
    "cpettitt",
--- a/cypress/helpers/util.ts
+++ b/cypress/helpers/util.ts
@@ -10,7 +10,7 @@ interface CypressConfig {
 type CypressMermaidConfig = MermaidConfig & CypressConfig;

 interface CodeObject {
-  code: string;
+  code: string | string[];
  mermaid: CypressMermaidConfig;
 }

@@ -25,7 +25,7 @@ const batchId: string =
    : Cypress.env('CYPRESS_COMMIT') || Date.now().toString());

 export const mermaidUrl = (
-  graphStr: string,
+  graphStr: string | string[],
  options: CypressMermaidConfig,
  api: boolean
 ): string => {
@@ -82,7 +82,7 @@ export const urlSnapshotTest = (
 };

 export const renderGraph = (
-  graphStr: string,
+  graphStr: string | string[],
  options: CypressMermaidConfig = {},
  api = false
 ): void => {
--- a/cypress/integration/rendering/classDiagram-v2.spec.js
+++ b/cypress/integration/rendering/classDiagram-v2.spec.js
@@ -571,4 +571,14 @@ class C13["With Città foreign language"]
      { logLevel: 1, flowchart: { htmlLabels: false } }
    );
  });
+  it('should render a simple class diagram with style definition', () => {
+    imgSnapshotTest(
+      `
+      classDiagram-v2
+        class Class10
+        style Class10 fill:#f9f,stroke:#333,stroke-width:4px
+        `,
+      { logLevel: 1, flowchart: { htmlLabels: false } }
+    );
+  });
 });
--- a/cypress/integration/rendering/classDiagram.spec.js
+++ b/cypress/integration/rendering/classDiagram.spec.js
@@ -501,4 +501,16 @@ describe('Class diagram', () => {
        B : -methods()
      `);
  });
+
+  it('should handle notes with anchor tag having target attribute', () => {
+    renderGraph(
+      `classDiagram
+        class test { }
+        note for test "<a href='https://mermaid.js.org/' target="_blank"><code>note about mermaid</code></a>"`
+    );
+
+    cy.get('svg').then((svg) => {
+      cy.get('a').should('have.attr', 'target', '_blank').should('have.attr', 'rel', 'noopener');
+    });
+  });
 });
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -729,6 +729,18 @@ A ~~~ B
      {}
    );
  });
+
+  it('5064: Should render when subgraph child has links to outside node and subgraph', () => {
+    imgSnapshotTest(
+      `flowchart TB
+    Out --> In
+    subgraph Sub
+      In
+    end
+    Sub --> In`
+    );
+  });
+
  describe('Markdown strings flowchart (#4220)', () => {
    describe('html labels', () => {
      it('With styling and classes', () => {
--- a/cypress/integration/rendering/gitGraph.spec.js
+++ b/cypress/integration/rendering/gitGraph.spec.js
@@ -701,4 +701,129 @@ gitGraph TB:
      {}
    );
  });
+  it('34: should render a simple gitgraph with two branches from same commit', () => {
+    imgSnapshotTest(
+      `gitGraph
+      commit id:"1-abcdefg"
+      commit id:"2-abcdefg"
+      branch feature-001
+      commit id:"3-abcdefg"
+      commit id:"4-abcdefg"
+      checkout main
+      branch feature-002
+      commit id:"5-abcdefg"
+      checkout feature-001
+      merge feature-002
+      `,
+      {}
+    );
+  });
+  it('35: should render a simple gitgraph with two branches from same commit | Vertical Branch', () => {
+    imgSnapshotTest(
+      `gitGraph TB:
+      commit id:"1-abcdefg"
+      commit id:"2-abcdefg"
+      branch feature-001
+      commit id:"3-abcdefg"
+      commit id:"4-abcdefg"
+      checkout main
+      branch feature-002
+      commit id:"5-abcdefg"
+      checkout feature-001
+      merge feature-002
+      `,
+      {}
+    );
+  });
+  it('36: should render GitGraph with branch that is not used immediately', () => {
+    imgSnapshotTest(
+      `gitGraph LR:
+      commit id:"1-abcdefg"
+      branch x
+      checkout main
+      commit id:"2-abcdefg"
+      checkout x
+      commit id:"3-abcdefg"
+      checkout main
+      merge x
+      `,
+      {}
+    );
+  });
+  it('37: should render GitGraph with branch that is not used immediately | Vertical Branch', () => {
+    imgSnapshotTest(
+      `gitGraph TB:
+      commit id:"1-abcdefg"
+      branch x
+      checkout main
+      commit id:"2-abcdefg"
+      checkout x
+      commit id:"3-abcdefg"
+      checkout main
+      merge x
+      `,
+      {}
+    );
+  });
+  it('38: should render GitGraph with branch and sub-branch neither of which used immediately', () => {
+    imgSnapshotTest(
+      `gitGraph LR:
+      commit id:"1-abcdefg"
+      branch x
+      checkout main
+      commit id:"2-abcdefg"
+      checkout x
+      commit id:"3-abcdefg"
+      checkout main
+      merge x
+      checkout x
+      branch y
+      checkout x
+      commit id:"4-abcdefg"
+      checkout y
+      commit id:"5-abcdefg"
+      checkout x
+      merge y
+      `,
+      {}
+    );
+  });
+  it('39: should render GitGraph with branch and sub-branch neither of which used immediately | Vertical Branch', () => {
+    imgSnapshotTest(
+      `gitGraph TB:
+      commit id:"1-abcdefg"
+      branch x
+      checkout main
+      commit id:"2-abcdefg"
+      checkout x
+      commit id:"3-abcdefg"
+      checkout main
+      merge x
+      checkout x
+      branch y
+      checkout x
+      commit id:"4-abcdefg"
+      checkout y
+      commit id:"5-abcdefg"
+      checkout x
+      merge y
+      `,
+      {}
+    );
+  });
+  it('40: should render a simple gitgraph with cherry pick merge commit', () => {
+    imgSnapshotTest(
+      `gitGraph
+      commit id: "ZERO"
+      branch feature
+      branch release
+      checkout feature
+      commit id: "A"
+      commit id: "B"
+      checkout main
+      merge feature id: "M"
+      checkout release
+      cherry-pick id: "M" parent:"B"`
+    );
+  });
 });
--- a/cypress/integration/rendering/pie.spec.ts
+++ b/cypress/integration/rendering/pie.spec.ts
@@ -44,7 +44,7 @@ describe('pie chart', () => {
      const style = svg.attr('style');
      expect(style).to.match(/^max-width: [\d.]+px;$/);
      const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-      expect(maxWidthValue).to.eq(984);
+      expect(maxWidthValue).to.be.within(590, 600); // depends on installed fonts: 596.2 on my PC, 597.5 on CI
    });
  });

@@ -59,7 +59,7 @@ describe('pie chart', () => {
    );
    cy.get('svg').should((svg) => {
      const width = parseFloat(svg.attr('width'));
-      expect(width).to.eq(984);
+      expect(width).to.be.within(590, 600); // depends on installed fonts: 596.2 on my PC, 597.5 on CI
      expect(svg).to.not.have.attr('style');
    });
  });
--- a/cypress/integration/rendering/sequencediagram.spec.js
+++ b/cypress/integration/rendering/sequencediagram.spec.js
@@ -930,4 +930,36 @@ context('Sequence diagram', () => {
      });
    });
  });
+  context('render after error', () => {
+    it('should render diagram after fixing destroy participant error', () => {
+      cy.on('uncaught:exception', (err) => {
+        return false;
+      });
+
+      renderGraph([
+        `sequenceDiagram
+    Alice->>Bob: Hello Bob, how are you ?
+    Bob->>Alice: Fine, thank you. And you?
+    create participant Carl
+    Alice->>Carl: Hi Carl!
+    create actor D as Donald
+    Carl->>D: Hi!
+    destroy Carl
+    Alice-xCarl: We are too many
+    destroy Bo
+    Bob->>Alice: I agree`,
+        `sequenceDiagram
+    Alice->>Bob: Hello Bob, how are you ?
+    Bob->>Alice: Fine, thank you. And you?
+    create participant Carl
+    Alice->>Carl: Hi Carl!
+    create actor D as Donald
+    Carl->>D: Hi!
+    destroy Carl
+    Alice-xCarl: We are too many
+    destroy Bob
+    Bob->>Alice: I agree`,
+      ]);
+    });
+  });
 });
--- a/demos/git.html
+++ b/demos/git.html
@@ -14,30 +14,364 @@
  </head>

  <body>
-    <h1>Git diagram demo</h1>
+    <h1>Git graph demo</h1>
+    <h2>Simple "branch and merge" graph</h2>
    <pre class="mermaid">
    ---
-    title: Simple Git diagram
+    title: Simple "branch and merge" (left-to-right)
    ---
-    gitGraph:
-    options
-    {
-    "nodeSpacing": 50,
-    "nodeRadius": 5
-    }
-    end
-    branch master
+    gitGraph LR:
    commit
    branch newbranch
    checkout newbranch
    commit
+    checkout main
+    merge newbranch
+    </pre>
+    <pre class="mermaid">
+    ---
+    title: Simple "branch and merge" (top-to-bottom)
+    ---
+    gitGraph TB:
    commit
-    checkout master
+    branch newbranch
+    checkout newbranch
    commit
+    checkout main
+    merge newbranch
+    </pre>
+    <h2>Continuous development graph</h2>
+    <pre class="mermaid">
+    ---
+    title: Continuous development (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    branch develop
+    checkout develop
+    commit
+    checkout main
+    merge develop
+    checkout develop
+    commit
+    checkout main
+    merge develop
+    </pre>
+    <pre class="mermaid">
+    ---
+    title: Continuous development (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    branch develop
+    checkout develop
+    commit
+    checkout main
+    merge develop
+    checkout develop
+    commit
+    checkout main
+    merge develop
+    </pre>
+    <h2>Merge feature to advanced main graph</h2>
+    <pre class="mermaid">
+    ---
+    title: Merge feature to advanced main (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    branch newbranch
+    checkout newbranch
+    commit
+    checkout main
    commit
    merge newbranch
    </pre>
-
+    <pre class="mermaid">
+    ---
+    title: Merge feature to advanced main (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    branch newbranch
+    checkout newbranch
+    commit
+    checkout main
+    commit
+    merge newbranch
+    </pre>
+    <h2>Two-way merges</h2>
+    <pre class="mermaid">
+    ---
+    title: Two-way merges (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    branch develop
+    checkout develop
+    commit
+    checkout main
+    merge develop
+    commit
+    checkout develop
+    merge main
+    commit
+    checkout main
+    merge develop
+    </pre>
+    <pre class="mermaid">
+    ---
+    title: Two-way merges (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    branch develop
+    checkout develop
+    commit
+    checkout main
+    merge develop
+    commit
+    checkout develop
+    merge main
+    commit
+    checkout main
+    merge develop
+    </pre>
+    <h2>Cherry-pick from branch graph</h2>
+    <pre class="mermaid">
+    ---
+    title: Cherry-pick from branch (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    branch newbranch
+    checkout newbranch
+    commit id: "Pick me"
+    checkout main
+    commit
+    checkout newbranch
+    commit
+    checkout main
+    cherry-pick id: "Pick me"
+    </pre>
+    <pre class="mermaid">
+    ---
+    title: Cherry-pick from branch (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    branch newbranch
+    checkout newbranch
+    commit id: "Pick me"
+    checkout main
+    commit
+    checkout newbranch
+    commit
+    checkout main
+    cherry-pick id: "Pick me"
+    </pre>
+    <h2>Cherry-pick from main graph</h2>
+    <pre class="mermaid">
+    ---
+    title: Cherry-pick from main (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    branch develop
+    commit
+    checkout main
+    commit id:"A"
+    checkout develop
+    commit
+    cherry-pick id: "A"
+    </pre>
+    <pre class="mermaid">
+    ---
+    title: Cherry-pick from main (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    branch develop
+    commit
+    checkout main
+    commit id:"A"
+    checkout develop
+    commit
+    cherry-pick id: "A"
+    </pre>
+    <h2>Cherry-pick then merge graph</h2>
+    <pre class="mermaid">
+    ---
+    title: Cherry-pick then merge (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    branch newbranch
+    checkout newbranch
+    commit id: "Pick me"
+    checkout main
+    commit
+    checkout newbranch
+    commit
+    checkout main
+    cherry-pick id: "Pick me"
+    merge newbranch
+    </pre>
+    <pre class="mermaid">
+    ---
+    title: Cherry-pick then merge (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    branch newbranch
+    checkout newbranch
+    commit id: "Pick me"
+    checkout main
+    commit
+    checkout newbranch
+    commit
+    checkout main
+    cherry-pick id: "Pick me"
+    merge newbranch
+    </pre>
+    <h2>Merge from main onto undeveloped branch graph</h2>
+    <pre class="mermaid">
+    ---
+    title: Merge from main onto undeveloped branch (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    branch develop
+    commit
+    checkout main
+    commit
+    checkout develop
+    merge main
+    </pre>
+    <pre class="mermaid">
+    ---
+    title: Merge from main onto undeveloped branch (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    branch develop
+    commit
+    checkout main
+    commit
+    checkout develop
+    merge main
+    </pre>
+    <h2>Merge from main onto developed branch graph</h2>
+    <pre class="mermaid">
+    ---
+    title: Merge from main onto developed branch (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    branch develop
+    commit
+    checkout main
+    commit
+    checkout develop
+    commit
+    merge main
+    </pre>
+    <pre class="mermaid">
+    ---
+    title: Merge from main onto developed branch (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    branch develop
+    commit
+    checkout main
+    commit
+    checkout develop
+    commit
+    merge main
+    </pre>
+    <h2>Two branches from same commit graph</h2>
+    <pre class="mermaid">
+    ---
+    title: Two branches from same commit (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    commit
+    branch feature-001
+    commit
+    commit
+    checkout main
+    branch feature-002
+    commit
+    checkout feature-001
+    merge feature-002
+    </pre>
+    <pre class="mermaid">
+    ---
+    title: Two branches from same commit (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    commit
+    branch feature-001
+    commit
+    commit
+    checkout main
+    branch feature-002
+    commit
+    checkout feature-001
+    merge feature-002
+    </pre>
+    <h2>Three branches and a cherry-pick from each graph</h2>
+    <pre class="mermaid">
+    ---
+    title: Three branches and a cherry-pick from each (left-to-right)
+    ---
+    gitGraph LR:
+    commit id: "ZERO"
+    branch develop
+    commit id:"A"
+    checkout main
+    commit id:"ONE"
+    checkout develop
+    commit id:"B"
+    branch featureA
+    commit id:"FIX"
+    commit id: "FIX-2"
+    checkout main
+    commit id:"TWO"
+    cherry-pick id:"A"
+    commit id:"THREE"
+    cherry-pick id:"FIX"
+    checkout develop
+    commit id:"C"
+    merge featureA
+    </pre>
+    <pre class="mermaid">
+    ---
+    title: Three branches and a cherry-pick from each (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit id: "ZERO"
+    branch develop
+    commit id:"A"
+    checkout main
+    commit id:"ONE"
+    checkout develop
+    commit id:"B"
+    branch featureA
+    commit id:"FIX"
+    commit id: "FIX-2"
+    checkout main
+    commit id:"TWO"
+    cherry-pick id:"A"
+    commit id:"THREE"
+    cherry-pick id:"FIX"
+    checkout develop
+    commit id:"C"
+    merge featureA
+    </pre>
    <script type="module">
      import mermaid from './mermaid.esm.mjs';
      const ALLOWED_TAGS = [
--- a/demos/sankey.html
+++ b/demos/sankey.html
@@ -33,6 +33,7 @@
      ---
      config:
        sankey:
+          useMaxWidth: true
          showValues: false
          width: 1200
          height: 600
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,7 +1,7 @@
 version: '3.9'
 services:
  mermaid:
-    image: node:18.18.2-alpine3.18
+    image: node:18.19.0-alpine3.18
    stdin_open: true
    tty: true
    working_dir: /mermaid
--- a/docs/community/questions-and-suggestions.md
+++ b/docs/community/questions-and-suggestions.md
@@ -10,9 +10,8 @@

 ## First search to see if someone has already asked (and hopefully been answered) or suggested the same thing.

- Search in Discussions
- Search in open Issues
- Search in closed Issues
+- [Search in Discussions](https://github.com/orgs/mermaid-js/discussions)
+- [Search in Issues (Open & Closed)](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue)

 If you find an open issue or discussion thread that is similar to your question but isn't answered, you can let us know that you are also interested in it.
 Use the GitHub reactions to add a thumbs-up to the issue or discussion thread.
--- a/docs/config/configuration.md
+++ b/docs/config/configuration.md
@@ -10,8 +10,8 @@ When mermaid starts, configuration is extracted to determine a configuration to

 - The default configuration
 - Overrides at the site level are set by the initialize call, and will be applied to all diagrams in the site/app. The term for this is the **siteConfig**.
- Frontmatter (v10.5.0+) - diagram authors can update select configuration parameters in the frontmatter of the diagram. These are applied to the render config.
- Directives (Deprecated by Frontmatter) - diagram authors can update select configuration parameters directly in the diagram code via directives. These are applied to the render config.
+- Frontmatter (v10.5.0+) - diagram authors can update selected configuration parameters in the frontmatter of the diagram. These are applied to the render config.
+- Directives (Deprecated by Frontmatter) - diagram authors can update selected configuration parameters directly in the diagram code via directives. These are applied to the render config.

 **The render config** is configuration that is used when rendering by applying these configurations.

--- a/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md
+++ b/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md
@@ -16,4 +16,4 @@

 #### Defined in

-[mermaidAPI.ts:59](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L59)
+[mermaidAPI.ts:60](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L60)
--- a/docs/config/setup/interfaces/mermaidAPI.RenderResult.md
+++ b/docs/config/setup/interfaces/mermaidAPI.RenderResult.md
@@ -39,7 +39,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.

 #### Defined in

-[mermaidAPI.ts:79](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L79)
+[mermaidAPI.ts:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L80)

 ---

@@ -51,4 +51,4 @@ The svg code for the rendered graph.

 #### Defined in

-[mermaidAPI.ts:69](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L69)
+[mermaidAPI.ts:70](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L70)
--- a/docs/config/setup/modules/mermaidAPI.md
+++ b/docs/config/setup/modules/mermaidAPI.md
@@ -25,7 +25,7 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)

 #### Defined in

-[mermaidAPI.ts:63](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L63)
+[mermaidAPI.ts:64](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L64)

 ## Variables

@@ -96,7 +96,7 @@ mermaid.initialize(config);

 #### Defined in

-[mermaidAPI.ts:641](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L641)
+[mermaidAPI.ts:608](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L608)

 ## Functions

@@ -127,7 +127,7 @@ Return the last node appended

 #### Defined in

-[mermaidAPI.ts:299](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L299)
+[mermaidAPI.ts:263](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L263)

 ---

@@ -153,7 +153,7 @@ the cleaned up svgCode

 #### Defined in

-[mermaidAPI.ts:245](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L245)
+[mermaidAPI.ts:209](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L209)

 ---

@@ -178,7 +178,7 @@ the string with all the user styles

 #### Defined in

-[mermaidAPI.ts:175](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L175)
+[mermaidAPI.ts:139](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L139)

 ---

@@ -201,7 +201,7 @@ the string with all the user styles

 #### Defined in

-[mermaidAPI.ts:222](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L222)
+[mermaidAPI.ts:186](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L186)

 ---

@@ -228,47 +228,7 @@ with an enclosing block that has each of the cssClasses followed by !important;

 #### Defined in

-[mermaidAPI.ts:160](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L160)
-
---
-
-### decodeEntities
-
-▸ **decodeEntities**(`text`): `string`
-
-#### Parameters
-
-| Name   | Type     | Description        |
-| :----- | :------- | :----------------- |
-| `text` | `string` | text to be decoded |
-
-#### Returns
-
-`string`
-
-#### Defined in
-
-[mermaidAPI.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L146)
-
---
-
-### encodeEntities
-
-▸ **encodeEntities**(`text`): `string`
-
-#### Parameters
-
-| Name   | Type     | Description        |
-| :----- | :------- | :----------------- |
-| `text` | `string` | text to be encoded |
-
-#### Returns
-
-`string`
-
-#### Defined in
-
-[mermaidAPI.ts:117](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L117)
+[mermaidAPI.ts:124](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L124)

 ---

@@ -294,7 +254,7 @@ Put the svgCode into an iFrame. Return the iFrame code

 #### Defined in

-[mermaidAPI.ts:276](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L276)
+[mermaidAPI.ts:240](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L240)

 ---

@@ -319,4 +279,4 @@ Remove any existing elements from the given document

 #### Defined in

-[mermaidAPI.ts:349](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L349)
+[mermaidAPI.ts:313](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L313)
--- a/docs/ecosystem/integrations-community.md
+++ b/docs/ecosystem/integrations-community.md
@@ -51,6 +51,12 @@ To add an integration to this list, see the [Integrations - create page](./integ
  - [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
 - [LiveBook](https://livebook.dev) ✅
 - [Atlassian Products](https://www.atlassian.com)
+  - [Mermaid for Confluence](https://marketplace.atlassian.com/apps/1224722/mermaid-for-confluence?hosting=cloud&tab=overview)
+  - [Mermaid Integration for Confluence](https://marketplace.atlassian.com/apps/1222792/mermaid-integration-for-confluence?hosting=cloud&tab=overview)
+  - [Mermaid Diagrams for Confluence](https://marketplace.atlassian.com/apps/1226945/mermaid-diagrams-for-confluence?hosting=cloud&tab=overview)
+  - [Mermaid Macro for Confluence](https://marketplace.atlassian.com/apps/1231150/mermaid-macro-for-confluence?hosting=cloud&tab=overview)
+  - [EliteSoft Mermaid Charts and Diagrams](https://marketplace.atlassian.com/apps/1227286/elitesoft-mermaid-charts-and-diagrams?hosting=cloud&tab=overview)
+  - [Mermaid for Jira Cloud - Draw UML diagrams easily](https://marketplace.atlassian.com/apps/1223053/mermaid-for-jira-cloud-draw-uml-diagrams-easily?hosting=cloud&tab=overview)
  - [Mermaid Charts & Diagrams for Confluence](https://marketplace.atlassian.com/apps/1222572/)
  - [Mermaid Charts & Diagrams for Jira](https://marketplace.atlassian.com/apps/1224537/)
  - [Mermaid Live Editor for Confluence Cloud](https://marketplace.atlassian.com/apps/1231571/mermaid-live-editor-for-confluence?hosting=cloud&tab=overview)
@@ -64,6 +70,7 @@ To add an integration to this list, see the [Integrations - create page](./integ
 - [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
 - [mermerd](https://github.com/KarnerTh/mermerd)
 - Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive)
+- Codemia [a tool to practice system design problems](https://codemia.io)

 ### CRM/ERP

@@ -109,9 +116,13 @@ Communication tools and platforms
  - [phpbb-ext-mermaid](https://github.com/AlfredoRamos/phpbb-ext-mermaid)
 - [NodeBB](https://nodebb.org)
  - [Mermaid Plugin](https://www.npmjs.com/package/nodebb-plugin-mermaid)
+- [Slack](https://slack.com)
+  - [Mermaid for Slack](https://github.com/JackuB/mermaid-for-slack)

 ### Wikis

+- [PmWiki](https://www.pmwiki.org)
+  - [MermaidJs Cookbook recipe](https://www.pmwiki.org/wiki/Cookbook/MermaidJs)
 - [MediaWiki](https://www.mediawiki.org)
  - [Mermaid Extension](https://www.mediawiki.org/wiki/Extension:Mermaid)
  - [Flex Diagrams Extension](https://www.mediawiki.org/wiki/Extension:Flex_Diagrams)
@@ -142,7 +153,6 @@ Communication tools and platforms
  - [Textual UML Parser](https://github.com/manastalukdar/markdown-it-textual-uml)
  - [Mermaid Plugin](https://github.com/tylingsoft/markdown-it-mermaid)
  - [md-it-mermaid](https://github.com/iamcco/md-it-mermaid)
-  - [markdown-it-mermaid-fence-new](https://github.com/Revomatico/markdown-it-mermaid-fence-new)
  - [markdown-it-mermaid-less](https://github.com/searKing/markdown-it-mermaid-less)
 - Atom _(Atom has been [archived.](https://github.blog/2022-06-08-sunsetting-atom/))_
  - [Markdown Preview Enhanced](https://github.com/shd101wyy/markdown-preview-enhanced)
@@ -180,6 +190,7 @@ Communication tools and platforms
 ### Document Generation

 - [Docusaurus](https://docusaurus.io/docs/markdown-features/diagrams) ✅
+- [Unison programming language](https://www.unison-lang.org/docs/usage-topics/documentation/) ✅
 - [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/features/diagrams-and-charts/#mermaid--swimm--up-to-date-diagrams-)
 - [Sphinx](https://www.sphinx-doc.org/en/master/)
  - [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid)
@@ -235,5 +246,6 @@ Communication tools and platforms
 - [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)
 - [ExDoc](https://github.com/elixir-lang/ex_doc)
  - [Rendering Mermaid graphs](https://github.com/elixir-lang/ex_doc#rendering-mermaid-graphs)
- [NiceGUI: Let any browser be the frontend of your Python code](https://nicegui.io)
-  - [ui.mermaid](https://nicegui.io/documentation/mermaid#mermaid_diagrams) ✅
+- [NiceGUI: Let any browser be the frontend of your Python code](https://nicegui.io) ✅
+  - [ui.mermaid(...)](https://nicegui.io/documentation/section_text_elements#markdown_element)
+  - [ui.markdown(..., extras=\['mermaid'\])](https://nicegui.io/documentation/section_text_elements#mermaid_diagrams)
--- a/docs/intro/index.md
+++ b/docs/intro/index.md
@@ -340,7 +340,7 @@ To Deploy Mermaid:
 </script>
 ```

-**Doing so commands the mermaid parser to look for the `<div>` or `<pre>` tags with `class="mermaid"`. From these tags, mermaid tries read the diagram/chart definitions and render them into SVG charts.**
+**Doing so commands the mermaid parser to look for the `<div>` or `<pre>` tags with `class="mermaid"`. From these tags, mermaid tries to read the diagram/chart definitions and render them into SVG charts.**

 **Examples can be found in** [Other examples](../syntax/examples.md)

--- a/docs/syntax/c4.md
+++ b/docs/syntax/c4.md
@@ -399,7 +399,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
    title Component diagram for Internet Banking System - API Application

    Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
-    Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.")
+    Container(ma, "Mobile App", "Xamarin", "Provides a limited subset to the internet banking functionality to customers via their mobile mobile device.")
    ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
    System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")

@@ -439,7 +439,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
    title Component diagram for Internet Banking System - API Application

    Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
-    Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.")
+    Container(ma, "Mobile App", "Xamarin", "Provides a limited subset to the internet banking functionality to customers via their mobile mobile device.")
    ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
    System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")

--- a/docs/syntax/classDiagram.md
+++ b/docs/syntax/classDiagram.md
@@ -240,9 +240,9 @@ class BankAccount{

 #### Generic Types

-Members can be defined using generic types, such as `List<int>`, for fields, parameters, and return types by enclosing the type within `~` (**tilde**). **Nested** type declarations such as `List<List<int>>` are supported.
+Generics can be representated as part of a class definition, and for class members/return types. In order to denote an item as generic, you enclose that type within `~` (**tilde**). **Nested** type declarations such as `List<List<int>>` are supported, though generics that include a comma are currently not supported. (such as `List<List<K, V>>`)

-Generics can be represented as part of a class definition and also in the parameters or the return value of a method/function:
+> _note_ when a generic is used within a class definition, the generic type is NOT considered part of the class name. i.e.: for any syntax which required you to reference the class name, you need to drop the type part of the definition. This also means that mermaid does not currently support having two classes with the same name, but different generic types.

 ```mermaid-example
 classDiagram
@@ -425,8 +425,6 @@ And `Link` can be one of:

 A namespace groups classes.

-Code:
-
 ```mermaid-example
 classDiagram
 namespace BaseShapes {
@@ -461,9 +459,9 @@ The different cardinality options are :
 - `0..1` Zero or One
 - `1..*` One or more
 - `*` Many
- `n` n {where n>1}
- `0..n` zero to n {where n>1}
- `1..n` one to n {where n>1}
+- `n` n (where n>1)
+- `0..n` zero to n (where n>1)
+- `1..n` one to n (where n>1)

 Cardinality can be easily defined by placing the text option within quotes `"` before or after a given arrow. For example:

@@ -768,9 +766,30 @@ Beginner's tip—a full example using interactive links in an HTML page:

 ## Styling

-### Styling a node
+### Styling a node (v10.7.0+)

-It is possible to apply specific styles such as a thicker border or a different background color to individual nodes. This is done by predefining classes in css styles that can be applied from the graph definition using the `cssClass` statement or the `:::` short hand.
+It is possible to apply specific styles such as a thicker border or a different background color to an individual node using the `style` keyword.
+
+```mermaid-example
+classDiagram
+  class Animal
+  class Mineral
+  style Animal fill:#f9f,stroke:#333,stroke-width:4px
+  style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+```
+
+```mermaid
+classDiagram
+  class Animal
+  class Mineral
+  style Animal fill:#f9f,stroke:#333,stroke-width:4px
+  style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+```
+
+#### Classes
+
+More convenient than defining the style every time is to define a class of styles and attach this class to the nodes that
+should have a different look. This is done by predefining classes in css styles that can be applied from the graph definition using the `cssClass` statement or the `:::` short hand.

 ```html
 <style>
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -11,6 +11,13 @@ Flowcharts are composed of **nodes** (geometric shapes) and **edges** (arrows or
 > **Warning**
 > If you are using the word "end" in a Flowchart node, capitalize the entire word or any of the letters (e.g., "End" or "END"), or apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897). Typing "end" in all lowercase letters will break the Flowchart.

+> **Warning**
+> If you are using the letter "o" or "x" as the first letter in a connecting Flowchart node, add a space before the letter or capitalize the letter (e.g., "dev--- ops", "dev---Ops").
+>
+> Typing "A---oB" will create a [circle edge](#circle-edge-example).
+>
+> Typing "A---xB" will create a [cross edge](#cross-edge-example).
+
 ### A node (default)

 ```mermaid-example
@@ -467,7 +474,7 @@ flowchart TB
    A & B--> C & D
 ```

-If you describe the same diagram using the the basic syntax, it will take four lines. A
+If you describe the same diagram using the basic syntax, it will take four lines. A
 word of warning, one could go overboard with this making the flowchart harder to read in
 markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little.
 This goes for expressive syntaxes as well.
@@ -488,23 +495,38 @@ flowchart TB
    B --> D
 ```

-### New arrow types
+## New arrow types

-There are new types of arrows supported as per below:
+There are new types of arrows supported:
+
+- circle edge
+- cross edge
+
+### Circle edge example

 ```mermaid-example
 flowchart LR
    A --o B
-    B --x C
 ```

 ```mermaid
 flowchart LR
    A --o B
-    B --x C
 ```

-### Multi directional arrows
+### Cross edge example
+
+```mermaid-example
+flowchart LR
+    A --x B
+```
+
+```mermaid
+flowchart LR
+    A --x B
+```
+
+## Multi directional arrows

 There is the possibility to use multidirectional arrows.

--- a/docs/syntax/gitgraph.md
+++ b/docs/syntax/gitgraph.md
@@ -366,41 +366,49 @@ A few important rules to note here are:
 1.  You need to provide the `id` for an existing commit to be cherry-picked. If given commit id does not exist it will result in an error. For this, make use of the `commit id:$value` format of declaring commits. See the examples from above.
 2.  The given commit must not exist on the current branch. The cherry-picked commit must always be a different branch than the current branch.
 3.  Current branch must have at least one commit, before you can cherry-pick, otherwise it will cause an error is throw.
+4.  When cherry-picking a merge commit, providing a parent commit ID is mandatory. If the parent attribute is omitted or an invalid parent commit ID is provided, an error will be thrown.
+5.  The specified parent commit must be an immediate parent of the merge commit being cherry-picked.

 Let see an example:

 ```mermaid-example
    gitGraph
-       commit id: "ZERO"
-       branch develop
-       commit id:"A"
-       checkout main
-       commit id:"ONE"
-       checkout develop
-       commit id:"B"
-       checkout main
-       commit id:"TWO"
-       cherry-pick id:"A"
-       commit id:"THREE"
-       checkout develop
-       commit id:"C"
+        commit id: "ZERO"
+        branch develop
+        branch release
+        commit id:"A"
+        checkout main
+        commit id:"ONE"
+        checkout develop
+        commit id:"B"
+        checkout main
+        merge develop id:"MERGE"
+        commit id:"TWO"
+        checkout release
+        cherry-pick id:"MERGE" parent:"B"
+        commit id:"THREE"
+        checkout develop
+        commit id:"C"
 ```

 ```mermaid
    gitGraph
-       commit id: "ZERO"
-       branch develop
-       commit id:"A"
-       checkout main
-       commit id:"ONE"
-       checkout develop
-       commit id:"B"
-       checkout main
-       commit id:"TWO"
-       cherry-pick id:"A"
-       commit id:"THREE"
-       checkout develop
-       commit id:"C"
+        commit id: "ZERO"
+        branch develop
+        branch release
+        commit id:"A"
+        checkout main
+        commit id:"ONE"
+        checkout develop
+        commit id:"B"
+        checkout main
+        merge develop id:"MERGE"
+        commit id:"TWO"
+        checkout release
+        cherry-pick id:"MERGE" parent:"B"
+        commit id:"THREE"
+        checkout develop
+        commit id:"C"
 ```

 ## Gitgraph specific configuration options
--- a/docs/syntax/sequenceDiagram.md
+++ b/docs/syntax/sequenceDiagram.md
@@ -131,6 +131,14 @@ sequenceDiagram
    Bob->>Alice: I agree
 ```

+#### Unfixable actor/participant creation/deletion error
+
+If an error of the following type occurs when creating or deleting an actor/participant:
+
+> The destroyed participant **participant-name** does not have an associated destroying message after its declaration. Please check the sequence diagram.
+
+And fixing diagram code does not get rid of this error and rendering of all other diagrams results in the same error, then you need to update the mermaid version to (v10.7.0+).
+
 ### Grouping / Box

 The actor(s) can be grouped in vertical boxes. You can define a color (if not, it will be transparent) and/or a descriptive label using the following notation:
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
  "version": "10.2.4",
  "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
  "type": "module",
-  "packageManager": "pnpm@8.10.2",
+  "packageManager": "pnpm@8.14.1",
  "keywords": [
    "diagram",
    "markdown",
@@ -118,12 +118,12 @@
    "start-server-and-test": "^2.0.0",
    "tsx": "^4.6.2",
    "typescript": "^5.1.3",
-    "vite": "^4.3.9",
+    "vite": "^4.4.12",
    "vite-plugin-istanbul": "^4.1.0",
    "vitest": "^0.34.0"
  },
  "volta": {
-    "node": "18.18.2"
+    "node": "18.19.0"
  },
  "nyc": {
    "report-dir": "coverage/cypress"
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -1,6 +1,6 @@
 {
  "name": "mermaid",
-  "version": "10.6.1",
+  "version": "10.7.0",
  "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
  "type": "module",
  "module": "./dist/mermaid.core.mjs",
@@ -70,7 +70,7 @@
    "dagre-d3-es": "7.0.10",
    "dayjs": "^1.11.7",
    "dompurify": "^3.0.5",
-    "elkjs": "^0.8.2",
+    "elkjs": "^0.9.0",
    "khroma": "^2.0.0",
    "lodash-es": "^4.17.21",
    "mdast-util-from-markdown": "^1.3.0",
--- a/packages/mermaid/src/Diagram.ts
+++ b/packages/mermaid/src/Diagram.ts
@@ -3,6 +3,8 @@ import { log } from './logger.js';
 import { getDiagram, registerDiagram } from './diagram-api/diagramAPI.js';
 import { detectType, getDiagramLoader } from './diagram-api/detectType.js';
 import { UnknownDiagramError } from './errors.js';
+import { encodeEntities } from './utils.js';
+
 import type { DetailedError } from './utils.js';
 import type { DiagramDefinition, DiagramMetadata } from './diagram-api/types.js';

@@ -21,6 +23,7 @@ export class Diagram {

  private detectError?: UnknownDiagramError;
  constructor(public text: string, public metadata: Pick<DiagramMetadata, 'title'> = {}) {
+    this.text = encodeEntities(text);
    this.text += '\n';
    const cnf = configApi.getConfig();
    try {
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -68,6 +68,11 @@ export interface MermaidConfig {
   * The maximum allowed size of the users text diagram
   */
  maxTextSize?: number;
+  /**
+   * Defines the maximum number of edges that can be drawn in a graph.
+   *
+   */
+  maxEdges?: number;
  darkMode?: boolean;
  htmlLabels?: boolean;
  /**
--- a/packages/mermaid/src/dagre-wrapper/createLabel.js
+++ b/packages/mermaid/src/dagre-wrapper/createLabel.js
@@ -2,7 +2,7 @@ import { select } from 'd3';
 import { log } from '../logger.js';
 import { getConfig } from '../diagram-api/diagramAPI.js';
 import { evaluate } from '../diagrams/common/common.js';
-import { decodeEntities } from '../mermaidAPI.js';
+import { decodeEntities } from '../utils.js';

 /**
 * @param dom
--- a/packages/mermaid/src/dagre-wrapper/edgeMarker.spec.ts
+++ b/packages/mermaid/src/dagre-wrapper/edgeMarker.spec.ts
@@ -0,0 +1,79 @@
+import type { Mocked } from 'vitest';
+import type { SVG } from '../diagram-api/types.js';
+import { addEdgeMarkers } from './edgeMarker.js';
+
+describe('addEdgeMarker', () => {
+  const svgPath = {
+    attr: vitest.fn(),
+  } as unknown as Mocked<SVG>;
+  const url = 'http://example.com';
+  const id = 'test';
+  const diagramType = 'test';
+
+  beforeEach(() => {
+    svgPath.attr.mockReset();
+  });
+
+  it('should add markers for arrow_cross:arrow_point', () => {
+    const arrowTypeStart = 'arrow_cross';
+    const arrowTypeEnd = 'arrow_point';
+    addEdgeMarkers(svgPath, { arrowTypeStart, arrowTypeEnd }, url, id, diagramType);
+    expect(svgPath.attr).toHaveBeenCalledWith(
+      'marker-start',
+      `url(${url}#${id}_${diagramType}-crossStart)`
+    );
+    expect(svgPath.attr).toHaveBeenCalledWith(
+      'marker-end',
+      `url(${url}#${id}_${diagramType}-pointEnd)`
+    );
+  });
+
+  it('should add markers for aggregation:arrow_point', () => {
+    const arrowTypeStart = 'aggregation';
+    const arrowTypeEnd = 'arrow_point';
+    addEdgeMarkers(svgPath, { arrowTypeStart, arrowTypeEnd }, url, id, diagramType);
+    expect(svgPath.attr).toHaveBeenCalledWith(
+      'marker-start',
+      `url(${url}#${id}_${diagramType}-aggregationStart)`
+    );
+    expect(svgPath.attr).toHaveBeenCalledWith(
+      'marker-end',
+      `url(${url}#${id}_${diagramType}-pointEnd)`
+    );
+  });
+
+  it('should add markers for arrow_point:aggregation', () => {
+    const arrowTypeStart = 'arrow_point';
+    const arrowTypeEnd = 'aggregation';
+    addEdgeMarkers(svgPath, { arrowTypeStart, arrowTypeEnd }, url, id, diagramType);
+    expect(svgPath.attr).toHaveBeenCalledWith(
+      'marker-start',
+      `url(${url}#${id}_${diagramType}-pointStart)`
+    );
+    expect(svgPath.attr).toHaveBeenCalledWith(
+      'marker-end',
+      `url(${url}#${id}_${diagramType}-aggregationEnd)`
+    );
+  });
+
+  it('should add markers for aggregation:composition', () => {
+    const arrowTypeStart = 'aggregation';
+    const arrowTypeEnd = 'composition';
+    addEdgeMarkers(svgPath, { arrowTypeStart, arrowTypeEnd }, url, id, diagramType);
+    expect(svgPath.attr).toHaveBeenCalledWith(
+      'marker-start',
+      `url(${url}#${id}_${diagramType}-aggregationStart)`
+    );
+    expect(svgPath.attr).toHaveBeenCalledWith(
+      'marker-end',
+      `url(${url}#${id}_${diagramType}-compositionEnd)`
+    );
+  });
+
+  it('should not add invalid markers', () => {
+    const arrowTypeStart = 'this is an invalid marker';
+    const arrowTypeEnd = ') url(https://my-malicious-site.example)';
+    addEdgeMarkers(svgPath, { arrowTypeStart, arrowTypeEnd }, url, id, diagramType);
+    expect(svgPath.attr).not.toHaveBeenCalled();
+  });
+});
--- a/packages/mermaid/src/dagre-wrapper/edgeMarker.ts
+++ b/packages/mermaid/src/dagre-wrapper/edgeMarker.ts
@@ -0,0 +1,57 @@
+import type { SVG } from '../diagram-api/types.js';
+import { log } from '../logger.js';
+import type { EdgeData } from '../types.js';
+/**
+ * Adds SVG markers to a path element based on the arrow types specified in the edge.
+ *
+ * @param svgPath - The SVG path element to add markers to.
+ * @param edge - The edge data object containing the arrow types.
+ * @param url - The URL of the SVG marker definitions.
+ * @param id - The ID prefix for the SVG marker definitions.
+ * @param diagramType - The type of diagram being rendered.
+ */
+export const addEdgeMarkers = (
+  svgPath: SVG,
+  edge: Pick<EdgeData, 'arrowTypeStart' | 'arrowTypeEnd'>,
+  url: string,
+  id: string,
+  diagramType: string
+) => {
+  if (edge.arrowTypeStart) {
+    addEdgeMarker(svgPath, 'start', edge.arrowTypeStart, url, id, diagramType);
+  }
+  if (edge.arrowTypeEnd) {
+    addEdgeMarker(svgPath, 'end', edge.arrowTypeEnd, url, id, diagramType);
+  }
+};
+
+const arrowTypesMap = {
+  arrow_cross: 'cross',
+  arrow_point: 'point',
+  arrow_barb: 'barb',
+  arrow_circle: 'circle',
+  aggregation: 'aggregation',
+  extension: 'extension',
+  composition: 'composition',
+  dependency: 'dependency',
+  lollipop: 'lollipop',
+} as const;
+
+const addEdgeMarker = (
+  svgPath: SVG,
+  position: 'start' | 'end',
+  arrowType: string,
+  url: string,
+  id: string,
+  diagramType: string
+) => {
+  const endMarkerType = arrowTypesMap[arrowType as keyof typeof arrowTypesMap];
+
+  if (!endMarkerType) {
+    log.warn(`Unknown arrow type: ${arrowType}`);
+    return; // unknown arrow type, ignore
+  }
+
+  const suffix = position === 'start' ? 'Start' : 'End';
+  svgPath.attr(`marker-${position}`, `url(${url}#${id}_${diagramType}-${endMarkerType}${suffix})`);
+};
--- a/packages/mermaid/src/dagre-wrapper/edges.js
+++ b/packages/mermaid/src/dagre-wrapper/edges.js
@@ -6,6 +6,7 @@ import { getConfig } from '../diagram-api/diagramAPI.js';
 import utils from '../utils.js';
 import { evaluate } from '../diagrams/common/common.js';
 import { getLineFunctionsWithOffset } from '../utils/lineWithOffset.js';
+import { addEdgeMarkers } from './edgeMarker.js';

 let edgeLabels = {};
 let terminalLabels = {};
@@ -506,108 +507,8 @@ export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph
  log.info('arrowTypeStart', edge.arrowTypeStart);
  log.info('arrowTypeEnd', edge.arrowTypeEnd);

-  switch (edge.arrowTypeStart) {
-    case 'arrow_cross':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-crossStart' + ')'
-      );
-      break;
-    case 'arrow_point':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-pointStart' + ')'
-      );
-      break;
-    case 'arrow_barb':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-barbStart' + ')'
-      );
-      break;
-    case 'arrow_circle':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-circleStart' + ')'
-      );
-      break;
-    case 'aggregation':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-aggregationStart' + ')'
-      );
-      break;
-    case 'extension':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-extensionStart' + ')'
-      );
-      break;
-    case 'composition':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-compositionStart' + ')'
-      );
-      break;
-    case 'dependency':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-dependencyStart' + ')'
-      );
-      break;
-    case 'lollipop':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-lollipopStart' + ')'
-      );
-      break;
-    default:
-  }
-  switch (edge.arrowTypeEnd) {
-    case 'arrow_cross':
-      svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-crossEnd' + ')');
-      break;
-    case 'arrow_point':
-      svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-pointEnd' + ')');
-      break;
-    case 'arrow_barb':
-      svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-barbEnd' + ')');
-      break;
-    case 'arrow_circle':
-      svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-circleEnd' + ')');
-      break;
-    case 'aggregation':
-      svgPath.attr(
-        'marker-end',
-        'url(' + url + '#' + id + '_' + diagramType + '-aggregationEnd' + ')'
-      );
-      break;
-    case 'extension':
-      svgPath.attr(
-        'marker-end',
-        'url(' + url + '#' + id + '_' + diagramType + '-extensionEnd' + ')'
-      );
-      break;
-    case 'composition':
-      svgPath.attr(
-        'marker-end',
-        'url(' + url + '#' + id + '_' + diagramType + '-compositionEnd' + ')'
-      );
-      break;
-    case 'dependency':
-      svgPath.attr(
-        'marker-end',
-        'url(' + url + '#' + id + '_' + diagramType + '-dependencyEnd' + ')'
-      );
-      break;
-    case 'lollipop':
-      svgPath.attr(
-        'marker-end',
-        'url(' + url + '#' + id + '_' + diagramType + '-lollipopEnd' + ')'
-      );
-      break;
-    default:
-  }
+  addEdgeMarkers(svgPath, edge, url, id, diagramType);
+
  let paths = {};
  if (pointsHasChanged) {
    paths.updatedPath = points;
--- a/packages/mermaid/src/dagre-wrapper/nodes.js
+++ b/packages/mermaid/src/dagre-wrapper/nodes.js
@@ -1013,6 +1013,7 @@ const class_box = (parent, node) => {
  });

  rect
+    .attr('style', node.style)
    .attr('class', 'outer title-state')
    .attr('x', -maxWidth / 2 - halfPadding)
    .attr('y', -(maxHeight / 2) - halfPadding)
--- a/packages/mermaid/src/dagre-wrapper/shapes/util.js
+++ b/packages/mermaid/src/dagre-wrapper/shapes/util.js
@@ -1,9 +1,9 @@
 import createLabel from '../createLabel.js';
 import { createText } from '../../rendering-util/createText.js';
 import { getConfig } from '../../diagram-api/diagramAPI.js';
-import { decodeEntities } from '../../mermaidAPI.js';
 import { select } from 'd3';
 import { evaluate, sanitizeText } from '../../diagrams/common/common.js';
+import { decodeEntities } from '../../utils.js';

 export const labelHelper = async (parent, node, _classes, isNode) => {
  let classes;
@@ -80,7 +80,9 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
                    ? getConfig().fontSize
                    : window.getComputedStyle(document.body).fontSize;
                  const enlargingFactor = 5;
-                  img.style.width = parseInt(bodyFontSize, 10) * enlargingFactor + 'px';
+                  const width = parseInt(bodyFontSize, 10) * enlargingFactor + 'px';
+                  img.style.minWidth = width;
+                  img.style.maxWidth = width;
                } else {
                  img.style.width = '100%';
                }
--- a/packages/mermaid/src/diagram.spec.ts
+++ b/packages/mermaid/src/diagram.spec.ts
@@ -69,4 +69,18 @@ Expecting 'TXT', got 'NEWLINE'"
      '"No diagram type detected matching given configuration for text: thor TD; A-->B"'
    );
  });
+
+  test('should consider entity codes when present in diagram defination', async () => {
+    const diagram = await getDiagramFromText(`sequenceDiagram
+    A->>B: I #9829; you!
+    B->>A: I #9829; you #infin; times more!`);
+    // @ts-ignore: we need to add types for sequenceDb which will be done in separate PR
+    const messages = diagram.db?.getMessages?.();
+    if (!messages) {
+      throw new Error('Messages not found!');
+    }
+
+    expect(messages[0].message).toBe('I ﬂ°°9829¶ß you!');
+    expect(messages[1].message).toBe('I ﬂ°°9829¶ß you ﬂ°infin¶ß times more!');
+  });
 });
--- a/packages/mermaid/src/diagrams/class/classDb.ts
+++ b/packages/mermaid/src/diagrams/class/classDb.ts
@@ -84,6 +84,7 @@ export const addClass = function (_id: string) {
    methods: [],
    members: [],
    annotations: [],
+    styles: [],
    domId: MERMAID_DOM_ID_PREFIX + name + '-' + classCounter,
  } as ClassNode;

@@ -214,7 +215,7 @@ export const cleanupLabel = function (label: string) {
 };

 /**
- * Called by parser when a special node is found, e.g. a clickable element.
+ * Called by parser when assigning cssClass to a class
 *
 * @param ids - Comma separated list of ids
 * @param className - Class to add
@@ -446,11 +447,27 @@ const getNamespaces = function (): NamespaceMap {
 * @public
 */
 export const addClassesToNamespace = function (id: string, classNames: string[]) {
-  if (namespaces[id] !== undefined) {
-    classNames.map((className) => {
-      classes[className].parent = id;
-      namespaces[id].classes[className] = classes[className];
-    });
+  if (namespaces[id] === undefined) {
+    return;
+  }
+  for (const name of classNames) {
+    const { className } = splitClassNameAndType(name);
+    classes[className].parent = id;
+    namespaces[id].classes[className] = classes[className];
+  }
+};
+
+export const setCssStyle = function (id: string, styles: string[]) {
+  const thisClass = classes[id];
+  if (!styles || !thisClass) {
+    return;
+  }
+  for (const s of styles) {
+    if (s.includes(',')) {
+      thisClass.styles.push(...s.split(','));
+    } else {
+      thisClass.styles.push(s);
+    }
  }
 };

@@ -490,4 +507,5 @@ export default {
  addClassesToNamespace,
  getNamespace,
  getNamespaces,
+  setCssStyle,
 };
--- a/packages/mermaid/src/diagrams/class/classDiagram-styles.spec.js
+++ b/packages/mermaid/src/diagrams/class/classDiagram-styles.spec.js
@@ -56,5 +56,18 @@ describe('class diagram, ', function () {
      expect(parser.yy.getClass('Class01').cssClasses[0]).toBe('exClass');
      expect(parser.yy.getClass('Class02').cssClasses[0]).toBe('exClass');
    });
+    it('should be possible to apply a style to an individual node', function () {
+      const str =
+        'classDiagram\n' +
+        'class Class01\n class Class02\n style Class01 fill:#f9f,stroke:#333,stroke-width:4px';
+
+      parser.parse(str);
+
+      const styleElements = parser.yy.getClass('Class01').styles;
+
+      expect(styleElements[0]).toBe('fill:#f9f');
+      expect(styleElements[1]).toBe('stroke:#333');
+      expect(styleElements[2]).toBe('stroke-width:4px');
+    });
  });
 });
--- a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
+++ b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
@@ -409,6 +409,7 @@ class C13["With Città foreign language"]
            },
          ],
          "methods": [],
+          "styles": [],
          "type": "",
        }
      `);
@@ -1043,6 +1044,19 @@ foo()
 `;
      parser.parse(str);
    });
+
+    it('should handle namespace with generic types', () => {
+      parser.parse(`classDiagram
+
+namespace space {
+    class Square~Shape~{
+        int id
+        List~int~ position
+        setPoints(List~int~ points)
+        getPoints() List~int~
+    }
+}`);
+    });
  });
 });

--- a/packages/mermaid/src/diagrams/class/classRenderer-v2.ts
+++ b/packages/mermaid/src/diagrams/class/classRenderer-v2.ts
@@ -104,7 +104,7 @@ export const addClasses = function (
       */
      const cssClassStr = vertex.cssClasses.join(' ');

-      const styles = { labelStyle: '', style: '' }; //getStylesFromArray(vertex.styles);
+      const styles = getStylesFromArray(vertex.styles);

      // Use vertex id as text in the box if no text is provided by the graph definition
      const vertexText = vertex.label ?? vertex.id;
@@ -231,7 +231,7 @@ export const addRelations = function (relations: ClassRelation[], g: graphlib.Gr
      //Set relationship style and line type
      classes: 'relation',
      pattern: edge.relation.lineType == 1 ? 'dashed' : 'solid',
-      id: 'id' + cnt,
+      id: `id_${edge.id1}_${edge.id2}_${cnt}`,
      // Set link type for rendering
      arrowhead: edge.type === 'arrow_open' ? 'none' : 'normal',
      //Set edge extra labels
--- a/packages/mermaid/src/diagrams/class/classTypes.spec.ts
+++ b/packages/mermaid/src/diagrams/class/classTypes.spec.ts
@@ -681,3 +681,82 @@ describe('given text representing a method, ', function () {
    });
  });
 });
+
+describe('given text representing an attribute', () => {
+  describe('when the attribute has no modifiers', () => {
+    it('should parse the display text correctly', () => {
+      const str = 'name String';
+
+      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
+
+      expect(displayDetails.displayText).toBe('name String');
+      expect(displayDetails.cssStyle).toBe('');
+    });
+  });
+
+  describe('when the attribute has public "+" modifier', () => {
+    it('should parse the display text correctly', () => {
+      const str = '+name String';
+
+      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
+
+      expect(displayDetails.displayText).toBe('+name String');
+      expect(displayDetails.cssStyle).toBe('');
+    });
+  });
+
+  describe('when the attribute has protected "#" modifier', () => {
+    it('should parse the display text correctly', () => {
+      const str = '#name String';
+
+      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
+
+      expect(displayDetails.displayText).toBe('#name String');
+      expect(displayDetails.cssStyle).toBe('');
+    });
+  });
+
+  describe('when the attribute has private "-" modifier', () => {
+    it('should parse the display text correctly', () => {
+      const str = '-name String';
+
+      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
+
+      expect(displayDetails.displayText).toBe('-name String');
+      expect(displayDetails.cssStyle).toBe('');
+    });
+  });
+
+  describe('when the attribute has internal "~" modifier', () => {
+    it('should parse the display text correctly', () => {
+      const str = '~name String';
+
+      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
+
+      expect(displayDetails.displayText).toBe('~name String');
+      expect(displayDetails.cssStyle).toBe('');
+    });
+  });
+
+  describe('when the attribute has static "$" modifier', () => {
+    it('should parse the display text correctly and apply static css style', () => {
+      const str = 'name String$';
+
+      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
+
+      expect(displayDetails.displayText).toBe('name String');
+      expect(displayDetails.cssStyle).toBe(staticCssStyle);
+    });
+  });
+
+  describe('when the attribute has abstract "*" modifier', () => {
+    it('should parse the display text correctly and apply abstract css style', () => {
+      const str = 'name String*';
+
+      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
+
+      expect(displayDetails.displayText).toBe('name String');
+      expect(displayDetails.cssStyle).toBe(abstractCssStyle);
+    });
+  });
+});
--- a/packages/mermaid/src/diagrams/class/classTypes.ts
+++ b/packages/mermaid/src/diagrams/class/classTypes.ts
@@ -10,6 +10,7 @@ export interface ClassNode {
  members: ClassMember[];
  annotations: string[];
  domId: string;
+  styles: string[];
  parent?: string;
  link?: string;
  linkTarget?: string;
@@ -106,7 +107,7 @@ export class ClassMember {
        this.visibility = firstChar as Visibility;
      }

-      if (lastChar.match(/[*?]/)) {
+      if (lastChar.match(/[$*]/)) {
        potentialClassifier = lastChar;
      }

--- a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
+++ b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
@@ -60,6 +60,7 @@ Function arguments are optional: 'call <callback_name>()' simply executes 'callb
 <string>["]                     this.popState();
 <string>[^"]*                   return "STR";
 <*>["]                          this.begin("string");
+"style"                         return 'STYLE';

 <INITIAL,namespace>"namespace"  { this.begin('namespace'); return 'NAMESPACE'; }
 <namespace>\s*(\r?\n)+          { this.popState(); return 'NEWLINE'; }
@@ -127,6 +128,10 @@ line was introduced with 'click'.
 <*>\-                           return 'MINUS';
 <*>"."                          return 'DOT';
 <*>\+                           return 'PLUS';
+":"                             return 'COLON';
+","                             return 'COMMA';
+\#                              return 'BRKT';
+"#"                             return 'BRKT';
 <*>\%                           return 'PCT';
 <*>"="                          return 'EQUALS';
 <*>\=                           return 'EQUALS';
@@ -198,6 +203,7 @@ line was introduced with 'click'.
 [\uFFD2-\uFFD7\uFFDA-\uFFDC]
                                return 'UNICODE_TEXT';
 <*>\s                           return 'SPACE';
+\s                              return 'SPACE';
 <*><<EOF>>                      return 'EOF';

 /lex
@@ -254,6 +260,7 @@ statement
    | memberStatement
    | annotationStatement
    | clickStatement
+    | styleStatement
    | cssClassStatement
    | noteStatement
    | direction
@@ -365,10 +372,26 @@ clickStatement
    | CLICK className HREF STR STR LINK_TARGET          {$$ = $1;yy.setLink($2, $4, $6);yy.setTooltip($2, $5);}
    ;

-cssClassStatement
-    : CSSCLASS STR alphaNumToken  {yy.setCssClass($2, $3);}
+styleStatement
+    :STYLE ALPHA stylesOpt                              {$$ = $STYLE;yy.setCssStyle($2,$stylesOpt);}
    ;

+cssClassStatement
+    : CSSCLASS STR ALPHA                            {yy.setCssClass($2, $3);}
+    ;
+
+stylesOpt
+    : style {$$ = [$style]}
+    | stylesOpt COMMA style {$stylesOpt.push($style);$$ = $stylesOpt;}
+    ;
+
+style
+    : styleComponent
+    | style styleComponent  {$$ = $style + $styleComponent;}
+    ;
+
+styleComponent: ALPHA | NUM | COLON | UNIT | SPACE | BRKT | STYLE | PCT | LABEL;
+
 commentToken   : textToken | graphCodeTokens ;

 textToken      : textNoTagsToken | TAGSTART | TAGEND | '=='  | '--' | PCT | DEFAULT;
--- a/packages/mermaid/src/diagrams/class/styles.js
+++ b/packages/mermaid/src/diagrams/class/styles.js
@@ -145,6 +145,7 @@ g.classGroup line {

 .edgeTerminals {
  font-size: 11px;
+  line-height: initial;
 }

 .classTitleText {
--- a/packages/mermaid/src/diagrams/common/common.spec.ts
+++ b/packages/mermaid/src/diagrams/common/common.spec.ts
@@ -38,6 +38,20 @@ describe('when securityLevel is antiscript, all script must be removed', () => {
    compareRemoveScript(`<img onerror="alert('hello');">`, `<img>`);
  });

+  it('should detect unsecured target attribute, if value is _blank then generate a secured link', () => {
+    compareRemoveScript(
+      `<a href="https://mermaid.js.org/" target="_blank">note about mermaid</a>`,
+      `<a href="https://mermaid.js.org/" target="_blank" rel="noopener">note about mermaid</a>`
+    );
+  });
+
+  it('should detect unsecured target attribute from links', () => {
+    compareRemoveScript(
+      `<a href="https://mermaid.js.org/" target="_self">note about mermaid</a>`,
+      `<a href="https://mermaid.js.org/" target="_self">note about mermaid</a>`
+    );
+  });
+
  it('should detect iframes', () => {
    compareRemoveScript(
      `<iframe src="http://abc.com/script1.js"></iframe>
--- a/packages/mermaid/src/diagrams/common/common.ts
+++ b/packages/mermaid/src/diagrams/common/common.ts
@@ -25,7 +25,27 @@ export const getRows = (s?: string): string[] => {
 * @returns The safer text
 */
 export const removeScript = (txt: string): string => {
-  return DOMPurify.sanitize(txt);
+  const TEMPORARY_ATTRIBUTE = 'data-temp-href-target';
+
+  DOMPurify.addHook('beforeSanitizeAttributes', (node: Element) => {
+    if (node.tagName === 'A' && node.hasAttribute('target')) {
+      node.setAttribute(TEMPORARY_ATTRIBUTE, node.getAttribute('target') || '');
+    }
+  });
+
+  const sanitizedText = DOMPurify.sanitize(txt);
+
+  DOMPurify.addHook('afterSanitizeAttributes', (node: Element) => {
+    if (node.tagName === 'A' && node.hasAttribute(TEMPORARY_ATTRIBUTE)) {
+      node.setAttribute('target', node.getAttribute(TEMPORARY_ATTRIBUTE) || '');
+      node.removeAttribute(TEMPORARY_ATTRIBUTE);
+      if (node.getAttribute('target') === '_blank') {
+        node.setAttribute('rel', 'noopener');
+      }
+    }
+  });
+
+  return sanitizedText;
 };

 const sanitizeMore = (text: string, config: MermaidConfig) => {
--- a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
+++ b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
@@ -11,6 +11,7 @@ import common from '../../common/common.js';
 import { interpolateToCurve, getStylesFromArray } from '../../../utils.js';
 import ELK from 'elkjs/lib/elk.bundled.js';
 import { getLineFunctionsWithOffset } from '../../../utils/lineWithOffset.js';
+import { addEdgeMarkers } from '../../../dagre-wrapper/edgeMarker.js';

 const elk = new ELK();

@@ -586,108 +587,7 @@ const addMarkersToEdge = function (svgPath, edgeData, diagramType, arrowMarkerAb
  }

  // look in edge data and decide which marker to use
-  switch (edgeData.arrowTypeStart) {
-    case 'arrow_cross':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-crossStart' + ')'
-      );
-      break;
-    case 'arrow_point':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-pointStart' + ')'
-      );
-      break;
-    case 'arrow_barb':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-barbStart' + ')'
-      );
-      break;
-    case 'arrow_circle':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-circleStart' + ')'
-      );
-      break;
-    case 'aggregation':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-aggregationStart' + ')'
-      );
-      break;
-    case 'extension':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-extensionStart' + ')'
-      );
-      break;
-    case 'composition':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-compositionStart' + ')'
-      );
-      break;
-    case 'dependency':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-dependencyStart' + ')'
-      );
-      break;
-    case 'lollipop':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-lollipopStart' + ')'
-      );
-      break;
-    default:
-  }
-  switch (edgeData.arrowTypeEnd) {
-    case 'arrow_cross':
-      svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-crossEnd' + ')');
-      break;
-    case 'arrow_point':
-      svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-pointEnd' + ')');
-      break;
-    case 'arrow_barb':
-      svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-barbEnd' + ')');
-      break;
-    case 'arrow_circle':
-      svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-circleEnd' + ')');
-      break;
-    case 'aggregation':
-      svgPath.attr(
-        'marker-end',
-        'url(' + url + '#' + id + '_' + diagramType + '-aggregationEnd' + ')'
-      );
-      break;
-    case 'extension':
-      svgPath.attr(
-        'marker-end',
-        'url(' + url + '#' + id + '_' + diagramType + '-extensionEnd' + ')'
-      );
-      break;
-    case 'composition':
-      svgPath.attr(
-        'marker-end',
-        'url(' + url + '#' + id + '_' + diagramType + '-compositionEnd' + ')'
-      );
-      break;
-    case 'dependency':
-      svgPath.attr(
-        'marker-end',
-        'url(' + url + '#' + id + '_' + diagramType + '-dependencyEnd' + ')'
-      );
-      break;
-    case 'lollipop':
-      svgPath.attr(
-        'marker-end',
-        'url(' + url + '#' + id + '_' + diagramType + '-lollipopEnd' + ')'
-      );
-      break;
-    default:
-  }
+  addEdgeMarkers(svgPath, edgeData, url, id, diagramType);
 };

 /**
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js
@@ -12,7 +12,6 @@ import {
  setDiagramTitle,
  getDiagramTitle,
 } from '../common/commonDb.js';
-import errorDiagram from '../error/errorDiagram.js';

 const MERMAID_DOM_ID_PREFIX = 'flowchart-';
 let vertexCounter = 0;
@@ -92,7 +91,6 @@ export const addVertex = function (_id, textObj, type, style, classes, dir, prop
    if (txt[0] === '"' && txt[txt.length - 1] === '"') {
      txt = txt.substring(1, txt.length - 1);
    }
-
    vertices[id].text = txt;
  } else {
    if (vertices[id].text === undefined) {
@@ -160,11 +158,17 @@ export const addSingleLink = function (_start, _end, type) {
  if (edge?.length > 10) {
    edge.length = 10;
  }
-  if (edges.length < 280) {
+  if (edges.length < (config.maxEdges ?? 500)) {
    log.info('abc78 pushing edge...');
    edges.push(edge);
  } else {
-    throw new Error('Too many edges');
+    throw new Error(
+      `Edge limit exceeded. ${edges.length} edges found, but the limit is ${config.maxEdges}.
+
+Initialize mermaid with maxEdges set to a higher number to allow more edges. 
+You cannot set this config via configuration inside the diagram as it is a secure config. 
+You have to call mermaid.initialize.`
+    );
  }
 };
 export const addLink = function (_start, _end, type) {
@@ -201,6 +205,13 @@ export const updateLinkInterpolate = function (positions, interp) {
 */
 export const updateLink = function (positions, style) {
  positions.forEach(function (pos) {
+    if (pos >= edges.length) {
+      throw new Error(
+        `The index ${pos} for linkStyle is out of bounds. Valid indices for linkStyle are between 0 and ${
+          edges.length - 1
+        }. (Help: Ensure that the index is within the range of existing edges.)`
+      );
+    }
    if (pos === 'default') {
      edges.defaultStyle = style;
    } else {
@@ -425,7 +436,7 @@ const setupToolTips = function (element) {
      tooltipElem
        .text(el.attr('title'))
        .style('left', window.scrollX + rect.left + (rect.right - rect.left) / 2 + 'px')
-        .style('top', window.scrollY + rect.top - 14 + document.body.scrollTop + 'px');
+        .style('top', window.scrollY + rect.bottom + 'px');
      tooltipElem.html(tooltipElem.html().replace(/&lt;br\/&gt;/g, '<br/>'));
      el.classed('hover', true);
    })
@@ -453,6 +464,7 @@ export const clear = function (ver = 'gen-1') {
  tooltips = {};
  firstGraphFlag = true;
  version = ver;
+  config = getConfig();
  commonClear();
 };
 export const setGen = (ver) => {
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js
@@ -286,6 +286,30 @@ describe('[Style] when parsing', () => {
    expect(edges[0].type).toBe('arrow_point');
  });

+  it('should handle style definitions within number of edges', function () {
+    expect(() =>
+      flow.parser
+        .parse(
+          `graph TD
+    A-->B
+    linkStyle 1 stroke-width:1px;`
+        )
+        .toThrow(
+          'The index 1 for linkStyle is out of bounds. Valid indices for linkStyle are between 0 and 0. (Help: Ensure that the index is within the range of existing edges.)'
+        )
+    );
+  });
+
+  it('should handle style definitions within number of edges', function () {
+    const res = flow.parser.parse(`graph TD
+    A-->B
+    linkStyle 0 stroke-width:1px;`);
+
+    const edges = flow.parser.yy.getEdges();
+
+    expect(edges[0].style[0]).toBe('stroke-width:1px');
+  });
+
  it('should handle multi-numbered style definitions with more then 1 digit in a row', function () {
    const res = flow.parser.parse(
      'graph TD\n' +
--- a/packages/mermaid/src/diagrams/gantt/styles.js
+++ b/packages/mermaid/src/diagrams/gantt/styles.js
@@ -1,9 +1,9 @@
 const getStyles = (options) =>
  `
  .mermaid-main-font {
-    font-family: "trebuchet ms", verdana, arial, sans-serif;
-    font-family: var(--mermaid-font-family);
+    font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif);
  }
+
  .exclude-range {
    fill: ${options.excludeBkgColor};
  }
@@ -45,11 +45,7 @@ const getStyles = (options) =>

  .sectionTitle {
    text-anchor: start;
-    // font-size: ${options.ganttFontSize};
-    // text-height: 14px;
-    font-family: 'trebuchet ms', verdana, arial, sans-serif;
-    font-family: var(--mermaid-font-family);
-
+    font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif);
  }


@@ -59,10 +55,11 @@ const getStyles = (options) =>
    stroke: ${options.gridColor};
    opacity: 0.8;
    shape-rendering: crispEdges;
-    text {
-      font-family: ${options.fontFamily};
-      fill: ${options.textColor};
-    }
+  }
+
+  .grid .tick text {
+    font-family: ${options.fontFamily};
+    fill: ${options.textColor};
  }

  .grid path {
@@ -89,33 +86,27 @@ const getStyles = (options) =>

  .taskText {
    text-anchor: middle;
-    font-family: 'trebuchet ms', verdana, arial, sans-serif;
-    font-family: var(--mermaid-font-family);
+    font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif);
  }

-  // .taskText:not([font-size]) {
-  //   font-size: ${options.ganttFontSize};
-  // }
-
  .taskTextOutsideRight {
    fill: ${options.taskTextDarkColor};
    text-anchor: start;
-    // font-size: ${options.ganttFontSize};
-    font-family: 'trebuchet ms', verdana, arial, sans-serif;
-    font-family: var(--mermaid-font-family);
-
+    font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif);
  }

  .taskTextOutsideLeft {
    fill: ${options.taskTextDarkColor};
    text-anchor: end;
-    // font-size: ${options.ganttFontSize};
  }

+
  /* Special case clickable */
+
  .task.clickable {
    cursor: pointer;
  }
+
  .taskText.clickable {
    cursor: pointer;
    fill: ${options.taskTextClickableColor} !important;
@@ -134,6 +125,7 @@ const getStyles = (options) =>
    font-weight: bold;
  }

+
  /* Specific task settings for the sections*/

  .taskText0,
@@ -255,9 +247,8 @@ const getStyles = (options) =>
  .titleText {
    text-anchor: middle;
    font-size: 18px;
-    fill: ${options.textColor}    ;
-    font-family: 'trebuchet ms', verdana, arial, sans-serif;
-    font-family: var(--mermaid-font-family);
+    fill: ${options.titleColor || options.textColor};
+    font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif);
  }
 `;

--- a/packages/mermaid/src/diagrams/git/gitGraphAst.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphAst.js
@@ -255,11 +255,12 @@ export const merge = function (otherBranch, custom_id, override_type, custom_tag
  log.debug('in mergeBranch');
 };

-export const cherryPick = function (sourceId, targetId, tag) {
+export const cherryPick = function (sourceId, targetId, tag, parentCommitId) {
  log.debug('Entering cherryPick:', sourceId, targetId, tag);
  sourceId = common.sanitizeText(sourceId, getConfig());
  targetId = common.sanitizeText(targetId, getConfig());
  tag = common.sanitizeText(tag, getConfig());
+  parentCommitId = common.sanitizeText(parentCommitId, getConfig());

  if (!sourceId || commits[sourceId] === undefined) {
    let error = new Error(
@@ -274,20 +275,21 @@ export const cherryPick = function (sourceId, targetId, tag) {
    };
    throw error;
  }
-
  let sourceCommit = commits[sourceId];
  let sourceCommitBranch = sourceCommit.branch;
-  if (sourceCommit.type === commitType.MERGE) {
+  if (
+    parentCommitId &&
+    !(Array.isArray(sourceCommit.parents) && sourceCommit.parents.includes(parentCommitId))
+  ) {
    let error = new Error(
-      'Incorrect usage of "cherryPick". Source commit should not be a merge commit'
+      'Invalid operation: The specified parent commit is not an immediate parent of the cherry-picked commit.'
+    );
+    throw error;
+  }
+  if (sourceCommit.type === commitType.MERGE && !parentCommitId) {
+    let error = new Error(
+      'Incorrect usage of cherry-pick: If the source commit is a merge commit, an immediate parent commit must be specified.'
    );
-    error.hash = {
-      text: 'cherryPick ' + sourceId + ' ' + targetId,
-      token: 'cherryPick ' + sourceId + ' ' + targetId,
-      line: '1',
-      loc: { first_line: 1, last_line: 1, first_column: 1, last_column: 1 },
-      expected: ['cherry-pick abc'],
-    };
    throw error;
  }
  if (!targetId || commits[targetId] === undefined) {
@@ -327,7 +329,11 @@ export const cherryPick = function (sourceId, targetId, tag) {
      parents: [head == null ? null : head.id, sourceCommit.id],
      branch: curBranch,
      type: commitType.CHERRY_PICK,
-      tag: tag ?? 'cherry-pick:' + sourceCommit.id,
+      tag:
+        tag ??
+        `cherry-pick:${sourceCommit.id}${
+          sourceCommit.type === commitType.MERGE ? `|parent:${parentCommitId}` : ''
+        }`,
    };
    head = commit;
    commits[commit.id] = commit;
--- a/packages/mermaid/src/diagrams/git/gitGraphParserV2.spec.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphParserV2.spec.js
@@ -673,6 +673,145 @@ describe('when parsing a gitGraph', function () {
    expect(commits[cherryPickCommitID].branch).toBe('main');
  });

+  it('should support cherry-picking of merge commits', function () {
+    const str = `gitGraph
+    commit id: "ZERO"
+    branch feature
+    branch release
+    checkout feature
+    commit id: "A"
+    commit id: "B"
+    checkout main
+    merge feature id: "M"
+    checkout release
+    cherry-pick id: "M" parent:"B"
+    `;
+
+    parser.parse(str);
+    const commits = parser.yy.getCommits();
+    const cherryPickCommitID = Object.keys(commits)[4];
+    expect(commits[cherryPickCommitID].tag).toBe('cherry-pick:M|parent:B');
+    expect(commits[cherryPickCommitID].branch).toBe('release');
+  });
+
+  it('should support cherry-picking of merge commits with tag', function () {
+    const str = `gitGraph
+    commit id: "ZERO"
+    branch feature
+    branch release
+    checkout feature
+    commit id: "A"
+    commit id: "B"
+    checkout main
+    merge feature id: "M"
+    checkout release
+    cherry-pick id: "M" parent:"ZERO" tag: "v1.0"
+    `;
+
+    parser.parse(str);
+    const commits = parser.yy.getCommits();
+    const cherryPickCommitID = Object.keys(commits)[4];
+    expect(commits[cherryPickCommitID].tag).toBe('v1.0');
+    expect(commits[cherryPickCommitID].branch).toBe('release');
+  });
+
+  it('should support cherry-picking of merge commits with additional commit', function () {
+    const str = `gitGraph
+    commit id: "ZERO"
+    branch feature
+    branch release
+    checkout feature
+    commit id: "A"
+    commit id: "B"
+    checkout main
+    merge feature id: "M"
+    checkout release
+    commit id: "C"
+    cherry-pick id: "M" tag: "v2.1:ZERO" parent:"ZERO"
+    commit id: "D"
+    `;
+
+    parser.parse(str);
+    const commits = parser.yy.getCommits();
+    const cherryPickCommitID = Object.keys(commits)[5];
+    expect(commits[cherryPickCommitID].tag).toBe('v2.1:ZERO');
+    expect(commits[cherryPickCommitID].branch).toBe('release');
+  });
+
+  it('should support cherry-picking of merge commits with empty tag', function () {
+    const str = `gitGraph
+    commit id: "ZERO"
+    branch feature
+    branch release
+    checkout feature
+    commit id: "A"
+    commit id: "B"
+    checkout main
+    merge feature id: "M"
+    checkout release
+    commit id: "C"
+    cherry-pick id:"M" parent: "ZERO" tag:""
+    commit id: "D"
+    cherry-pick id:"M" tag:"" parent: "B"
+    `;
+
+    parser.parse(str);
+    const commits = parser.yy.getCommits();
+    const cherryPickCommitID = Object.keys(commits)[5];
+    const cherryPickCommitID2 = Object.keys(commits)[7];
+    expect(commits[cherryPickCommitID].tag).toBe('');
+    expect(commits[cherryPickCommitID2].tag).toBe('');
+    expect(commits[cherryPickCommitID].branch).toBe('release');
+  });
+
+  it('should fail cherry-picking of merge commits if the parent of merge commits is not specified', function () {
+    expect(() =>
+      parser
+        .parse(
+          `gitGraph
+    commit id: "ZERO"
+    branch feature
+    branch release
+    checkout feature
+    commit id: "A"
+    commit id: "B"
+    checkout main
+    merge feature id: "M"
+    checkout release
+    commit id: "C"
+    cherry-pick id:"M"
+    `
+        )
+        .toThrow(
+          'Incorrect usage of cherry-pick: If the source commit is a merge commit, an immediate parent commit must be specified.'
+        )
+    );
+  });
+
+  it('should fail cherry-picking of merge commits when the parent provided is not an immediate parent of cherry picked commit', function () {
+    expect(() =>
+      parser
+        .parse(
+          `gitGraph
+    commit id: "ZERO"
+    branch feature
+    branch release
+    checkout feature
+    commit id: "A"
+    commit id: "B"
+    checkout main
+    merge feature id: "M"
+    checkout release
+    commit id: "C"
+    cherry-pick id:"M" parent: "A"
+    `
+        )
+        .toThrow(
+          'Invalid operation: The specified parent commit is not an immediate parent of the cherry-picked commit.'
+        )
+    );
+  });
+
  it('should throw error when try to branch existing branch: main', function () {
    const str = `gitGraph
    commit
--- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
@@ -338,26 +338,34 @@ const drawCommits = (svg, commits, modifyGraph) => {
 };

 /**
- * Detect if there are other commits between commit1's x-position and commit2's x-position on the
- * same branch as commit2.
+ * Detect if there are commits
+ * between commitA's x-position
+ * and commitB's x-position on the
+ * same branch as commitA, where
+ * commitA isn't main
 *
- * @param {any} commit1
- * @param {any} commit2
+ * @param {any} commitA
+ * @param {any} commitB
+ * @param branchToGetCurve
+ * @param p1
+ * @param p2
 * @param allCommits
- * @returns {boolean} If there are commits between commit1's x-position and commit2's x-position
+ * @returns {boolean}
+ * If there are commits between
+ * commitA's x-position
+ * and commitB's x-position
+ * on the source branch, where
+ * source branch is not main
+ * return true
 */
-const hasOverlappingCommits = (commit1, commit2, allCommits) => {
-  // Find commits on the same branch as commit2
-  const keys = Object.keys(allCommits);
-  const overlappingComits = keys.filter((key) => {
-    return (
-      allCommits[key].branch === commit2.branch &&
-      allCommits[key].seq > commit1.seq &&
-      allCommits[key].seq < commit2.seq
-    );
+const shouldRerouteArrow = (commitA, commitB, p1, p2, allCommits) => {
+  const commitBIsFurthest = dir === 'TB' ? p1.x < p2.x : p1.y < p2.y;
+  const branchToGetCurve = commitBIsFurthest ? commitB.branch : commitA.branch;
+  const isOnBranchToGetCurve = (x) => x.branch === branchToGetCurve;
+  const isBetweenCommits = (x) => x.seq > commitA.seq && x.seq < commitB.seq;
+  return Object.values(allCommits).some((commitX) => {
+    return isBetweenCommits(commitX) && isOnBranchToGetCurve(commitX);
  });
-
-  return overlappingComits.length > 0;
 };

 /**
@@ -388,49 +396,61 @@ const findLane = (y1, y2, depth = 0) => {
 * Draw the lines between the commits. They were arrows initially.
 *
 * @param {any} svg
- * @param {any} commit1
- * @param {any} commit2
+ * @param {any} commitA
+ * @param {any} commitB
 * @param {any} allCommits
 */
-const drawArrow = (svg, commit1, commit2, allCommits) => {
-  const p1 = commitPos[commit1.id];
-  const p2 = commitPos[commit2.id];
-  const overlappingCommits = hasOverlappingCommits(commit1, commit2, allCommits);
-  // log.debug('drawArrow', p1, p2, overlappingCommits, commit1.id, commit2.id);
+const drawArrow = (svg, commitA, commitB, allCommits) => {
+  const p1 = commitPos[commitA.id]; // arrowStart
+  const p2 = commitPos[commitB.id]; // arrowEnd
+  const arrowNeedsRerouting = shouldRerouteArrow(commitA, commitB, p1, p2, allCommits);
+  // log.debug('drawArrow', p1, p2, arrowNeedsRerouting, commitA.id, commitB.id);
+
+  // Lower-right quadrant logic; top-left is 0,0

  let arc = '';
  let arc2 = '';
  let radius = 0;
  let offset = 0;
-  let colorClassNum = branchPos[commit2.branch].index;
+  let colorClassNum = branchPos[commitB.branch].index;
  let lineDef;
-  if (overlappingCommits) {
+  if (arrowNeedsRerouting) {
    arc = 'A 10 10, 0, 0, 0,';
    arc2 = 'A 10 10, 0, 0, 1,';
    radius = 10;
    offset = 10;
-    // Figure out the color of the arrow,arrows going down take the color from the destination branch
-    colorClassNum = branchPos[commit2.branch].index;

    const lineY = p1.y < p2.y ? findLane(p1.y, p2.y) : findLane(p2.y, p1.y);
    const lineX = p1.x < p2.x ? findLane(p1.x, p2.x) : findLane(p2.x, p1.x);

    if (dir === 'TB') {
      if (p1.x < p2.x) {
+        // Source commit is on branch position left of destination commit
+        // so render arrow rightward with colour of destination branch
+        colorClassNum = branchPos[commitB.branch].index;
        lineDef = `M ${p1.x} ${p1.y} L ${lineX - radius} ${p1.y} ${arc2} ${lineX} ${
          p1.y + offset
        } L ${lineX} ${p2.y - radius} ${arc} ${lineX + offset} ${p2.y} L ${p2.x} ${p2.y}`;
      } else {
+        // Source commit is on branch position right of destination commit
+        // so render arrow leftward with colour of source branch
+        colorClassNum = branchPos[commitA.branch].index;
        lineDef = `M ${p1.x} ${p1.y} L ${lineX + radius} ${p1.y} ${arc} ${lineX} ${
          p1.y + offset
        } L ${lineX} ${p2.y - radius} ${arc2} ${lineX - offset} ${p2.y} L ${p2.x} ${p2.y}`;
      }
    } else {
      if (p1.y < p2.y) {
+        // Source commit is on branch positioned above destination commit
+        // so render arrow downward with colour of destination branch
+        colorClassNum = branchPos[commitB.branch].index;
        lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY - radius} ${arc} ${
          p1.x + offset
        } ${lineY} L ${p2.x - radius} ${lineY} ${arc2} ${p2.x} ${lineY + offset} L ${p2.x} ${p2.y}`;
      } else {
+        // Source commit is on branch positioned below destination commit
+        // so render arrow upward with colour of source branch
+        colorClassNum = branchPos[commitA.branch].index;
        lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY + radius} ${arc2} ${
          p1.x + offset
        } ${lineY} L ${p2.x - radius} ${lineY} ${arc} ${p2.x} ${lineY - offset} L ${p2.x} ${p2.y}`;
@@ -445,7 +465,7 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
        offset = 20;

        // Figure out the color of the arrow,arrows going down take the color from the destination branch
-        colorClassNum = branchPos[commit2.branch].index;
+        colorClassNum = branchPos[commitB.branch].index;

        lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc2} ${p2.x} ${
          p1.y + offset
@@ -458,14 +478,14 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
        offset = 20;

        // Arrows going up take the color from the source branch
-        colorClassNum = branchPos[commit1.branch].index;
+        colorClassNum = branchPos[commitA.branch].index;
        lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc2} ${p1.x - offset} ${
          p2.y
        } L ${p2.x} ${p2.y}`;
      }

      if (p1.x === p2.x) {
-        colorClassNum = branchPos[commit1.branch].index;
+        colorClassNum = branchPos[commitA.branch].index;
        lineDef = `M ${p1.x} ${p1.y} L ${p1.x + radius} ${p1.y} ${arc} ${p1.x + offset} ${
          p2.y + radius
        } L ${p2.x} ${p2.y}`;
@@ -475,10 +495,8 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
        arc = 'A 20 20, 0, 0, 0,';
        radius = 20;
        offset = 20;
-
-        // Figure out the color of the arrow,arrows going down take the color from the destination branch
-        colorClassNum = branchPos[commit2.branch].index;
-
+        // Arrows going up take the color from the target branch
+        colorClassNum = branchPos[commitB.branch].index;
        lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${
          p2.x
        } ${p2.y}`;
@@ -487,16 +505,15 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
        arc = 'A 20 20, 0, 0, 0,';
        radius = 20;
        offset = 20;
-
        // Arrows going up take the color from the source branch
-        colorClassNum = branchPos[commit1.branch].index;
+        colorClassNum = branchPos[commitA.branch].index;
        lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc} ${p2.x} ${p1.y - offset} L ${
          p2.x
        } ${p2.y}`;
      }

      if (p1.y === p2.y) {
-        colorClassNum = branchPos[commit1.branch].index;
+        colorClassNum = branchPos[commitA.branch].index;
        lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${
          p2.x
        } ${p2.y}`;
--- a/packages/mermaid/src/diagrams/git/parser/gitGraph.jison
+++ b/packages/mermaid/src/diagrams/git/parser/gitGraph.jison
@@ -39,6 +39,7 @@ branch(?=\s|$)                          return 'BRANCH';
 "order:"                                return 'ORDER';
 merge(?=\s|$)                           return 'MERGE';
 cherry\-pick(?=\s|$)                    return 'CHERRY_PICK';
+"parent:"                               return 'PARENT_COMMIT'
 // "reset"                                 return 'RESET';
 checkout(?=\s|$)                        return 'CHECKOUT';
 "LR"                                    return 'DIR';
@@ -109,10 +110,17 @@ branchStatement

 cherryPickStatement
    : CHERRY_PICK COMMIT_ID STR {yy.cherryPick($3, '', undefined)}
+    | CHERRY_PICK COMMIT_ID STR PARENT_COMMIT STR {yy.cherryPick($3, '', undefined,$5)}
    | CHERRY_PICK COMMIT_ID STR COMMIT_TAG STR {yy.cherryPick($3, '', $5)}
-    | CHERRY_PICK COMMIT_ID STR COMMIT_TAG EMPTYSTR {yy.cherryPick($3, '', '')}
+    | CHERRY_PICK COMMIT_ID STR PARENT_COMMIT STR COMMIT_TAG STR {yy.cherryPick($3, '', $7,$5)}
+    | CHERRY_PICK COMMIT_ID STR COMMIT_TAG STR PARENT_COMMIT STR {yy.cherryPick($3, '', $5,$7)}
    | CHERRY_PICK COMMIT_TAG STR COMMIT_ID STR {yy.cherryPick($5, '', $3)}
-    | CHERRY_PICK COMMIT_TAG EMPTYSTR COMMIT_ID STR {yy.cherryPick($3, '', '')}
+    | CHERRY_PICK COMMIT_TAG EMPTYSTR COMMIT_ID STR {yy.cherryPick($5, '', '')}
+    | CHERRY_PICK COMMIT_ID STR COMMIT_TAG EMPTYSTR {yy.cherryPick($3, '', '')}
+    | CHERRY_PICK COMMIT_ID STR PARENT_COMMIT STR COMMIT_TAG EMPTYSTR {yy.cherryPick($3, '', '',$5)}
+    | CHERRY_PICK COMMIT_ID STR COMMIT_TAG EMPTYSTR PARENT_COMMIT STR {yy.cherryPick($3, '', '',$7)}
+    | CHERRY_PICK COMMIT_TAG STR COMMIT_ID STR PARENT_COMMIT STR {yy.cherryPick($5, '', $3,$7)}
+    | CHERRY_PICK COMMIT_TAG EMPTYSTR COMMIT_ID STR PARENT_COMMIT STR{yy.cherryPick($5, '', '',$7)}
    ;

 mergeStatement
--- a/packages/mermaid/src/diagrams/pie/pieRenderer.ts
+++ b/packages/mermaid/src/diagrams/pie/pieRenderer.ts
@@ -1,6 +1,5 @@
 import type d3 from 'd3';
 import { scaleOrdinal, pie as d3pie, arc } from 'd3';
-
 import { log } from '../../logger.js';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
 import { getConfig } from '../../diagram-api/diagramAPI.js';
@@ -38,33 +37,25 @@ const createPieArcs = (sections: Sections): d3.PieArcDatum<D3Sections>[] => {
 */
 export const draw: DrawDefinition = (text, id, _version, diagObj) => {
  log.debug('rendering pie chart\n' + text);
-
  const db = diagObj.db as PieDB;
  const globalConfig: MermaidConfig = getConfig();
  const pieConfig: Required<PieDiagramConfig> = cleanAndMerge(db.getConfig(), globalConfig.pie);
-
-  const height = 450;
-  // TODO: remove document width
-  const width: number =
-    document.getElementById(id)?.parentElement?.offsetWidth ?? pieConfig.useWidth;
-  const svg: SVG = selectSvgElement(id);
-  // Set viewBox
-  svg.attr('viewBox', `0 0 ${width} ${height}`);
-  configureSvgSize(svg, height, width, pieConfig.useMaxWidth);
-
  const MARGIN = 40;
  const LEGEND_RECT_SIZE = 18;
  const LEGEND_SPACING = 4;
-
+  const height = 450;
+  const pieWidth: number = height;
+  const svg: SVG = selectSvgElement(id);
  const group: Group = svg.append('g');
-  group.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
+  const sections: Sections = db.getSections();
+  group.attr('transform', 'translate(' + pieWidth / 2 + ',' + height / 2 + ')');

  const { themeVariables } = globalConfig;
  let [outerStrokeWidth] = parseFontSize(themeVariables.pieOuterStrokeWidth);
  outerStrokeWidth ??= 2;

  const textPosition: number = pieConfig.textPosition;
-  const radius: number = Math.min(width, height) / 2 - MARGIN;
+  const radius: number = Math.min(pieWidth, height) / 2 - MARGIN;
  // Shape helper to build arcs:
  const arcGenerator: d3.Arc<unknown, d3.PieArcDatum<D3Sections>> = arc<
    d3.PieArcDatum<D3Sections>
@@ -84,7 +75,6 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
    .attr('r', radius + outerStrokeWidth / 2)
    .attr('class', 'pieOuterCircle');

-  const sections: Sections = db.getSections();
  const arcs: d3.PieArcDatum<D3Sections>[] = createPieArcs(sections);

  const myGeneratedColors = [
@@ -177,6 +167,19 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
      }
      return label;
    });
+
+  const longestTextWidth = Math.max(
+    ...legend
+      .selectAll('text')
+      .nodes()
+      .map((node) => (node as Element)?.getBoundingClientRect().width ?? 0)
+  );
+
+  const totalWidth = pieWidth + MARGIN + LEGEND_RECT_SIZE + LEGEND_SPACING + longestTextWidth;
+
+  // Set viewBox
+  svg.attr('viewBox', `0 0 ${totalWidth} ${height}`);
+  configureSvgSize(svg, height, totalWidth, pieConfig.useMaxWidth);
 };

 export const renderer = { draw };
--- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -16,7 +16,7 @@ import {
  sankeyCenter as d3SankeyCenter,
  sankeyJustify as d3SankeyJustify,
 } from 'd3-sankey';
-import { configureSvgSize } from '../../setupGraphViewbox.js';
+import { setupGraphViewbox } from '../../setupGraphViewbox.js';
 import { Uid } from '../../rendering-util/uid.js';
 import type { SankeyNodeAlignment } from '../../config.type.js';

@@ -70,12 +70,6 @@ export const draw = function (text: string, id: string, _version: string, diagOb
  const suffix = conf?.suffix ?? defaultSankeyConfig.suffix!;
  const showValues = conf?.showValues ?? defaultSankeyConfig.showValues!;

-  // FIX: using max width prevents height from being set, is it intended?
-  // to add height directly one can use `svg.attr('height', height)`
-  //
-  // @ts-ignore TODO: svg type vs selection mismatch
-  configureSvgSize(svg, height, width, useMaxWidth);
-
  // Prepare data for construction based on diagObj.db
  // This must be a mutable object with `nodes` and `links` properties:
  //
@@ -208,6 +202,8 @@ export const draw = function (text: string, id: string, _version: string, diagOb
    .attr('d', d3SankeyLinkHorizontal())
    .attr('stroke', coloring)
    .attr('stroke-width', (d: any) => Math.max(1, d.width));
+
+  setupGraphViewbox(undefined, svg, 0, useMaxWidth);
 };

 export default {
--- a/packages/mermaid/src/diagrams/sequence/sequenceDb.js
+++ b/packages/mermaid/src/diagrams/sequence/sequenceDb.js
@@ -2,57 +2,60 @@ import { getConfig } from '../../diagram-api/diagramAPI.js';
 import { log } from '../../logger.js';
 import { sanitizeText } from '../common/common.js';
 import {
-  setAccTitle,
-  getAccTitle,
-  setDiagramTitle,
-  getDiagramTitle,
-  getAccDescription,
-  setAccDescription,
  clear as commonClear,
+  getAccDescription,
+  getAccTitle,
+  getDiagramTitle,
+  setAccDescription,
+  setAccTitle,
+  setDiagramTitle,
 } from '../common/commonDb.js';
+import { ImperativeState } from '../../utils/imperativeState.js';

-let prevActor = undefined;
-let actors = {};
-let createdActors = {};
-let destroyedActors = {};
-let boxes = [];
-let messages = [];
-const notes = [];
-let sequenceNumbersEnabled = false;
-let wrapEnabled;
-let currentBox = undefined;
-let lastCreated = undefined;
-let lastDestroyed = undefined;
+const state = new ImperativeState(() => ({
+  prevActor: undefined,
+  actors: {},
+  createdActors: {},
+  destroyedActors: {},
+  boxes: [],
+  messages: [],
+  notes: [],
+  sequenceNumbersEnabled: false,
+  wrapEnabled: undefined,
+  currentBox: undefined,
+  lastCreated: undefined,
+  lastDestroyed: undefined,
+}));

 export const addBox = function (data) {
-  boxes.push({
+  state.records.boxes.push({
    name: data.text,
    wrap: (data.wrap === undefined && autoWrap()) || !!data.wrap,
    fill: data.color,
    actorKeys: [],
  });
-  currentBox = boxes.slice(-1)[0];
+  state.records.currentBox = state.records.boxes.slice(-1)[0];
 };

 export const addActor = function (id, name, description, type) {
-  let assignedBox = currentBox;
-  const old = actors[id];
+  let assignedBox = state.records.currentBox;
+  const old = state.records.actors[id];
  if (old) {
    // If already set and trying to set to a new one throw error
-    if (currentBox && old.box && currentBox !== old.box) {
+    if (state.records.currentBox && old.box && state.records.currentBox !== old.box) {
      throw new Error(
        'A same participant should only be defined in one Box: ' +
          old.name +
          " can't be in '" +
          old.box.name +
          "' and in '" +
-          currentBox.name +
+          state.records.currentBox.name +
          "' at the same time."
      );
    }

    // Don't change the box if already
-    assignedBox = old.box ? old.box : currentBox;
+    assignedBox = old.box ? old.box : state.records.currentBox;
    old.box = assignedBox;

    // Don't allow description nulling
@@ -69,36 +72,42 @@ export const addActor = function (id, name, description, type) {
    description = { text: name, wrap: null, type };
  }

-  actors[id] = {
+  state.records.actors[id] = {
    box: assignedBox,
    name: name,
    description: description.text,
    wrap: (description.wrap === undefined && autoWrap()) || !!description.wrap,
-    prevActor: prevActor,
+    prevActor: state.records.prevActor,
    links: {},
    properties: {},
    actorCnt: null,
    rectData: null,
    type: type || 'participant',
  };
-  if (prevActor && actors[prevActor]) {
-    actors[prevActor].nextActor = id;
+  if (state.records.prevActor && state.records.actors[state.records.prevActor]) {
+    state.records.actors[state.records.prevActor].nextActor = id;
  }

-  if (currentBox) {
-    currentBox.actorKeys.push(id);
+  if (state.records.currentBox) {
+    state.records.currentBox.actorKeys.push(id);
  }
-  prevActor = id;
+  state.records.prevActor = id;
 };

 const activationCount = (part) => {
  let i;
  let count = 0;
-  for (i = 0; i < messages.length; i++) {
-    if (messages[i].type === LINETYPE.ACTIVE_START && messages[i].from.actor === part) {
+  for (i = 0; i < state.records.messages.length; i++) {
+    if (
+      state.records.messages[i].type === LINETYPE.ACTIVE_START &&
+      state.records.messages[i].from.actor === part
+    ) {
      count++;
    }
-    if (messages[i].type === LINETYPE.ACTIVE_END && messages[i].from.actor === part) {
+    if (
+      state.records.messages[i].type === LINETYPE.ACTIVE_END &&
+      state.records.messages[i].from.actor === part
+    ) {
      count--;
    }
  }
@@ -106,7 +115,7 @@ const activationCount = (part) => {
 };

 export const addMessage = function (idFrom, idTo, message, answer) {
-  messages.push({
+  state.records.messages.push({
    from: idFrom,
    to: idTo,
    message: message.text,
@@ -137,7 +146,7 @@ export const addSignal = function (
      throw error;
    }
  }
-  messages.push({
+  state.records.messages.push({
    from: idFrom,
    to: idTo,
    message: message.text,
@@ -149,63 +158,58 @@ export const addSignal = function (
 };

 export const hasAtLeastOneBox = function () {
-  return boxes.length > 0;
+  return state.records.boxes.length > 0;
 };

 export const hasAtLeastOneBoxWithTitle = function () {
-  return boxes.some((b) => b.name);
+  return state.records.boxes.some((b) => b.name);
 };

 export const getMessages = function () {
-  return messages;
+  return state.records.messages;
 };

 export const getBoxes = function () {
-  return boxes;
+  return state.records.boxes;
 };
 export const getActors = function () {
-  return actors;
+  return state.records.actors;
 };
 export const getCreatedActors = function () {
-  return createdActors;
+  return state.records.createdActors;
 };
 export const getDestroyedActors = function () {
-  return destroyedActors;
+  return state.records.destroyedActors;
 };
 export const getActor = function (id) {
-  return actors[id];
+  return state.records.actors[id];
 };
 export const getActorKeys = function () {
-  return Object.keys(actors);
+  return Object.keys(state.records.actors);
 };
 export const enableSequenceNumbers = function () {
-  sequenceNumbersEnabled = true;
+  state.records.sequenceNumbersEnabled = true;
 };
 export const disableSequenceNumbers = function () {
-  sequenceNumbersEnabled = false;
+  state.records.sequenceNumbersEnabled = false;
 };
-export const showSequenceNumbers = () => sequenceNumbersEnabled;
+export const showSequenceNumbers = () => state.records.sequenceNumbersEnabled;

 export const setWrap = function (wrapSetting) {
-  wrapEnabled = wrapSetting;
+  state.records.wrapEnabled = wrapSetting;
 };

 export const autoWrap = () => {
  // if setWrap has been called, use that value, otherwise use the value from the config
  // TODO: refactor, always use the config value let setWrap update the config value
-  if (wrapEnabled !== undefined) {
-    return wrapEnabled;
+  if (state.records.wrapEnabled !== undefined) {
+    return state.records.wrapEnabled;
  }
  return getConfig().sequence.wrap;
 };

 export const clear = function () {
-  actors = {};
-  createdActors = {};
-  destroyedActors = {};
-  boxes = [];
-  messages = [];
-  sequenceNumbersEnabled = false;
+  state.reset();
  commonClear();
 };

@@ -247,7 +251,7 @@ export const parseBoxData = function (str) {
    }
  }

-  const boxData = {
+  return {
    color: color,
    text:
      title !== undefined
@@ -262,7 +266,6 @@ export const parseBoxData = function (str) {
          : undefined
        : undefined,
  };
-  return boxData;
 };

 export const LINETYPE = {
@@ -321,8 +324,8 @@ export const addNote = function (actor, placement, message) {
  // eslint-disable-next-line unicorn/prefer-spread
  const actors = [].concat(actor, actor);

-  notes.push(note);
-  messages.push({
+  state.records.notes.push(note);
+  state.records.messages.push({
    from: actors[0],
    to: actors[1],
    message: message.text,
@@ -414,7 +417,7 @@ function insertProperties(actor, properties) {
 *
 */
 function boxEnd() {
-  currentBox = undefined;
+  state.records.currentBox = undefined;
 }

 export const addDetails = function (actorId, text) {
@@ -468,7 +471,7 @@ export const apply = function (param) {
  } else {
    switch (param.type) {
      case 'sequenceIndex':
-        messages.push({
+        state.records.messages.push({
          from: undefined,
          to: undefined,
          message: {
@@ -484,18 +487,18 @@ export const apply = function (param) {
        addActor(param.actor, param.actor, param.description, param.draw);
        break;
      case 'createParticipant':
-        if (actors[param.actor]) {
+        if (state.records.actors[param.actor]) {
          throw new Error(
            "It is not possible to have actors with the same id, even if one is destroyed before the next is created. Use 'AS' aliases to simulate the behavior"
          );
        }
-        lastCreated = param.actor;
+        state.records.lastCreated = param.actor;
        addActor(param.actor, param.actor, param.description, param.draw);
-        createdActors[param.actor] = messages.length;
+        state.records.createdActors[param.actor] = state.records.messages.length;
        break;
      case 'destroyParticipant':
-        lastDestroyed = param.actor;
-        destroyedActors[param.actor] = messages.length;
+        state.records.lastDestroyed = param.actor;
+        state.records.destroyedActors[param.actor] = state.records.messages.length;
        break;
      case 'activeStart':
        addSignal(param.actor, undefined, undefined, param.signalType);
@@ -519,25 +522,28 @@ export const apply = function (param) {
        addDetails(param.actor, param.text);
        break;
      case 'addMessage':
-        if (lastCreated) {
-          if (param.to !== lastCreated) {
+        if (state.records.lastCreated) {
+          if (param.to !== state.records.lastCreated) {
            throw new Error(
              'The created participant ' +
-                lastCreated +
+                state.records.lastCreated +
                ' does not have an associated creating message after its declaration. Please check the sequence diagram.'
            );
          } else {
-            lastCreated = undefined;
+            state.records.lastCreated = undefined;
          }
-        } else if (lastDestroyed) {
-          if (param.to !== lastDestroyed && param.from !== lastDestroyed) {
+        } else if (state.records.lastDestroyed) {
+          if (
+            param.to !== state.records.lastDestroyed &&
+            param.from !== state.records.lastDestroyed
+          ) {
            throw new Error(
              'The destroyed participant ' +
-                lastDestroyed +
+                state.records.lastDestroyed +
                ' does not have an associated destroying message after its declaration. Please check the sequence diagram.'
            );
          } else {
-            lastDestroyed = undefined;
+            state.records.lastDestroyed = undefined;
          }
        }
        addSignal(param.from, param.to, param.msg, param.signalType, param.activate);
--- a/packages/mermaid/src/docs/community/questions-and-suggestions.md
+++ b/packages/mermaid/src/docs/community/questions-and-suggestions.md
@@ -4,9 +4,8 @@

 ## First search to see if someone has already asked (and hopefully been answered) or suggested the same thing.

- Search in Discussions
- Search in open Issues
- Search in closed Issues
+- [Search in Discussions](https://github.com/orgs/mermaid-js/discussions)
+- [Search in Issues (Open & Closed)](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue)

 If you find an open issue or discussion thread that is similar to your question but isn't answered, you can let us know that you are also interested in it.
 Use the GitHub reactions to add a thumbs-up to the issue or discussion thread.
--- a/packages/mermaid/src/docs/config/configuration.md
+++ b/packages/mermaid/src/docs/config/configuration.md
@@ -4,8 +4,8 @@ When mermaid starts, configuration is extracted to determine a configuration to

 - The default configuration
 - Overrides at the site level are set by the initialize call, and will be applied to all diagrams in the site/app. The term for this is the **siteConfig**.
- Frontmatter (v10.5.0+) - diagram authors can update select configuration parameters in the frontmatter of the diagram. These are applied to the render config.
- Directives (Deprecated by Frontmatter) - diagram authors can update select configuration parameters directly in the diagram code via directives. These are applied to the render config.
+- Frontmatter (v10.5.0+) - diagram authors can update selected configuration parameters in the frontmatter of the diagram. These are applied to the render config.
+- Directives (Deprecated by Frontmatter) - diagram authors can update selected configuration parameters directly in the diagram code via directives. These are applied to the render config.

 **The render config** is configuration that is used when rendering by applying these configurations.

--- a/packages/mermaid/src/docs/ecosystem/integrations-community.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md
@@ -50,6 +50,12 @@ To add an integration to this list, see the [Integrations - create page](./integ
  - [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
 - [LiveBook](https://livebook.dev) ✅
 - [Atlassian Products](https://www.atlassian.com)
+  - [Mermaid for Confluence](https://marketplace.atlassian.com/apps/1224722/mermaid-for-confluence?hosting=cloud&tab=overview)
+  - [Mermaid Integration for Confluence](https://marketplace.atlassian.com/apps/1222792/mermaid-integration-for-confluence?hosting=cloud&tab=overview)
+  - [Mermaid Diagrams for Confluence](https://marketplace.atlassian.com/apps/1226945/mermaid-diagrams-for-confluence?hosting=cloud&tab=overview)
+  - [Mermaid Macro for Confluence](https://marketplace.atlassian.com/apps/1231150/mermaid-macro-for-confluence?hosting=cloud&tab=overview)
+  - [EliteSoft Mermaid Charts and Diagrams](https://marketplace.atlassian.com/apps/1227286/elitesoft-mermaid-charts-and-diagrams?hosting=cloud&tab=overview)
+  - [Mermaid for Jira Cloud - Draw UML diagrams easily](https://marketplace.atlassian.com/apps/1223053/mermaid-for-jira-cloud-draw-uml-diagrams-easily?hosting=cloud&tab=overview)
  - [Mermaid Charts & Diagrams for Confluence](https://marketplace.atlassian.com/apps/1222572/)
  - [Mermaid Charts & Diagrams for Jira](https://marketplace.atlassian.com/apps/1224537/)
  - [Mermaid Live Editor for Confluence Cloud](https://marketplace.atlassian.com/apps/1231571/mermaid-live-editor-for-confluence?hosting=cloud&tab=overview)
@@ -63,6 +69,7 @@ To add an integration to this list, see the [Integrations - create page](./integ
 - [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
 - [mermerd](https://github.com/KarnerTh/mermerd)
 - Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive)
+- Codemia [a tool to practice system design problems](https://codemia.io)

 ### CRM/ERP

@@ -108,9 +115,13 @@ Communication tools and platforms
  - [phpbb-ext-mermaid](https://github.com/AlfredoRamos/phpbb-ext-mermaid)
 - [NodeBB](https://nodebb.org)
  - [Mermaid Plugin](https://www.npmjs.com/package/nodebb-plugin-mermaid)
+- [Slack](https://slack.com)
+  - [Mermaid for Slack](https://github.com/JackuB/mermaid-for-slack)

 ### Wikis

+- [PmWiki](https://www.pmwiki.org)
+  - [MermaidJs Cookbook recipe](https://www.pmwiki.org/wiki/Cookbook/MermaidJs)
 - [MediaWiki](https://www.mediawiki.org)
  - [Mermaid Extension](https://www.mediawiki.org/wiki/Extension:Mermaid)
  - [Flex Diagrams Extension](https://www.mediawiki.org/wiki/Extension:Flex_Diagrams)
@@ -141,7 +152,6 @@ Communication tools and platforms
  - [Textual UML Parser](https://github.com/manastalukdar/markdown-it-textual-uml)
  - [Mermaid Plugin](https://github.com/tylingsoft/markdown-it-mermaid)
  - [md-it-mermaid](https://github.com/iamcco/md-it-mermaid)
-  - [markdown-it-mermaid-fence-new](https://github.com/Revomatico/markdown-it-mermaid-fence-new)
  - [markdown-it-mermaid-less](https://github.com/searKing/markdown-it-mermaid-less)
 - Atom _(Atom has been [archived.](https://github.blog/2022-06-08-sunsetting-atom/))_
  - [Markdown Preview Enhanced](https://github.com/shd101wyy/markdown-preview-enhanced)
@@ -179,6 +189,7 @@ Communication tools and platforms
 ### Document Generation

 - [Docusaurus](https://docusaurus.io/docs/markdown-features/diagrams) ✅
+- [Unison programming language](https://www.unison-lang.org/docs/usage-topics/documentation/) ✅
 - [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/features/diagrams-and-charts/#mermaid--swimm--up-to-date-diagrams-)
 - [Sphinx](https://www.sphinx-doc.org/en/master/)
  - [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid)
@@ -234,5 +245,6 @@ Communication tools and platforms
 - [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)
 - [ExDoc](https://github.com/elixir-lang/ex_doc)
  - [Rendering Mermaid graphs](https://github.com/elixir-lang/ex_doc#rendering-mermaid-graphs)
- [NiceGUI: Let any browser be the frontend of your Python code](https://nicegui.io)
-  - [ui.mermaid](https://nicegui.io/documentation/mermaid#mermaid_diagrams) ✅
+- [NiceGUI: Let any browser be the frontend of your Python code](https://nicegui.io) ✅
+  - [ui.mermaid(...)](https://nicegui.io/documentation/section_text_elements#markdown_element)
+  - [ui.markdown(..., extras=['mermaid'])](https://nicegui.io/documentation/section_text_elements#mermaid_diagrams)
--- a/packages/mermaid/src/docs/intro/index.md
+++ b/packages/mermaid/src/docs/intro/index.md
@@ -97,7 +97,7 @@ To Deploy Mermaid:
 </script>
 ```

-**Doing so commands the mermaid parser to look for the `<div>` or `<pre>` tags with `class="mermaid"`. From these tags, mermaid tries read the diagram/chart definitions and render them into SVG charts.**
+**Doing so commands the mermaid parser to look for the `<div>` or `<pre>` tags with `class="mermaid"`. From these tags, mermaid tries to read the diagram/chart definitions and render them into SVG charts.**

 **Examples can be found in** [Other examples](../syntax/examples.md)

--- a/packages/mermaid/src/docs/package.json
+++ b/packages/mermaid/src/docs/package.json
@@ -22,17 +22,17 @@
  },
  "devDependencies": {
    "@iconify-json/carbon": "^1.1.16",
-    "@unocss/reset": "^0.57.0",
-    "@vite-pwa/vitepress": "^0.2.0",
+    "@unocss/reset": "^0.58.0",
+    "@vite-pwa/vitepress": "^0.3.0",
    "@vitejs/plugin-vue": "^4.2.1",
    "fast-glob": "^3.2.12",
    "https-localhost": "^4.7.1",
    "pathe": "^1.1.0",
-    "unocss": "^0.57.0",
-    "unplugin-vue-components": "^0.25.0",
-    "vite": "^4.3.9",
-    "vite-plugin-pwa": "^0.16.0",
-    "vitepress": "1.0.0-rc.24",
+    "unocss": "^0.58.0",
+    "unplugin-vue-components": "^0.26.0",
+    "vite": "^4.4.12",
+    "vite-plugin-pwa": "^0.17.0",
+    "vitepress": "1.0.0-rc.31",
    "workbox-window": "^7.0.0"
  }
 }
--- a/packages/mermaid/src/docs/syntax/c4.md
+++ b/packages/mermaid/src/docs/syntax/c4.md
@@ -257,7 +257,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
    title Component diagram for Internet Banking System - API Application

    Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
-    Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.")
+    Container(ma, "Mobile App", "Xamarin", "Provides a limited subset to the internet banking functionality to customers via their mobile mobile device.")
    ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
    System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")

--- a/packages/mermaid/src/docs/syntax/classDiagram.md
+++ b/packages/mermaid/src/docs/syntax/classDiagram.md
@@ -143,9 +143,9 @@ class BankAccount{

 #### Generic Types

-Members can be defined using generic types, such as `List<int>`, for fields, parameters, and return types by enclosing the type within `~` (**tilde**). **Nested** type declarations such as `List<List<int>>` are supported.
+Generics can be representated as part of a class definition, and for class members/return types. In order to denote an item as generic, you enclose that type within `~` (**tilde**). **Nested** type declarations such as `List<List<int>>` are supported, though generics that include a comma are currently not supported. (such as `List<List<K, V>>`)

-Generics can be represented as part of a class definition and also in the parameters or the return value of a method/function:
+> _note_ when a generic is used within a class definition, the generic type is NOT considered part of the class name. i.e.: for any syntax which required you to reference the class name, you need to drop the type part of the definition. This also means that mermaid does not currently support having two classes with the same name, but different generic types.

 ```mermaid-example
 classDiagram
@@ -281,8 +281,6 @@ And `Link` can be one of:

 A namespace groups classes.

-Code:
-
 ```mermaid-example
 classDiagram
 namespace BaseShapes {
@@ -306,9 +304,9 @@ The different cardinality options are :
 - `0..1` Zero or One
 - `1..*` One or more
 - `*` Many
- `n` n {where n>1}
- `0..n` zero to n {where n>1}
- `1..n` one to n {where n>1}
+- `n` n (where n>1)
+- `0..n` zero to n (where n>1)
+- `1..n` one to n (where n>1)

 Cardinality can be easily defined by placing the text option within quotes `"` before or after a given arrow. For example:

@@ -520,9 +518,22 @@ Beginner's tip—a full example using interactive links in an HTML page:

 ## Styling

-### Styling a node
+### Styling a node (v10.7.0+)

-It is possible to apply specific styles such as a thicker border or a different background color to individual nodes. This is done by predefining classes in css styles that can be applied from the graph definition using the `cssClass` statement or the `:::` short hand.
+It is possible to apply specific styles such as a thicker border or a different background color to an individual node using the `style` keyword.
+
+```mermaid-example
+classDiagram
+  class Animal
+  class Mineral
+  style Animal fill:#f9f,stroke:#333,stroke-width:4px
+  style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+```
+
+#### Classes
+
+More convenient than defining the style every time is to define a class of styles and attach this class to the nodes that
+should have a different look. This is done by predefining classes in css styles that can be applied from the graph definition using the `cssClass` statement or the `:::` short hand.

 ```html
 <style>
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -11,6 +11,14 @@ Flowcharts are composed of **nodes** (geometric shapes) and **edges** (arrows or
 If you are using the word "end" in a Flowchart node, capitalize the entire word or any of the letters (e.g., "End" or "END"), or apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897). Typing "end" in all lowercase letters will break the Flowchart.
 ```

+```warning
+If you are using the letter "o" or "x" as the first letter in a connecting Flowchart node, add a space before the letter or capitalize the letter (e.g., "dev--- ops", "dev---Ops").
+
+Typing "A---oB" will create a [circle edge](#circle-edge-example).
+
+Typing "A---xB" will create a [cross edge](#cross-edge-example).
+```
+
 ### A node (default)

 ```mermaid-example
@@ -293,7 +301,7 @@ flowchart TB
    A & B--> C & D
 ```

-If you describe the same diagram using the the basic syntax, it will take four lines. A
+If you describe the same diagram using the basic syntax, it will take four lines. A
 word of warning, one could go overboard with this making the flowchart harder to read in
 markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little.
 This goes for expressive syntaxes as well.
@@ -306,17 +314,28 @@ flowchart TB
    B --> D
 ```

-### New arrow types
+## New arrow types

-There are new types of arrows supported as per below:
+There are new types of arrows supported:
+
+- circle edge
+- cross edge
+
+### Circle edge example

 ```mermaid-example
 flowchart LR
    A --o B
-    B --x C
 ```

-### Multi directional arrows
+### Cross edge example
+
+```mermaid-example
+flowchart LR
+    A --x B
+```
+
+## Multi directional arrows

 There is the possibility to use multidirectional arrows.

--- a/packages/mermaid/src/docs/syntax/gitgraph.md
+++ b/packages/mermaid/src/docs/syntax/gitgraph.md
@@ -244,24 +244,29 @@ A few important rules to note here are:
 1. You need to provide the `id` for an existing commit to be cherry-picked. If given commit id does not exist it will result in an error. For this, make use of the `commit id:$value` format of declaring commits. See the examples from above.
 2. The given commit must not exist on the current branch. The cherry-picked commit must always be a different branch than the current branch.
 3. Current branch must have at least one commit, before you can cherry-pick, otherwise it will cause an error is throw.
+4. When cherry-picking a merge commit, providing a parent commit ID is mandatory. If the parent attribute is omitted or an invalid parent commit ID is provided, an error will be thrown.
+5. The specified parent commit must be an immediate parent of the merge commit being cherry-picked.

 Let see an example:

 ```mermaid-example
    gitGraph
-       commit id: "ZERO"
-       branch develop
-       commit id:"A"
-       checkout main
-       commit id:"ONE"
-       checkout develop
-       commit id:"B"
-       checkout main
-       commit id:"TWO"
-       cherry-pick id:"A"
-       commit id:"THREE"
-       checkout develop
-       commit id:"C"
+        commit id: "ZERO"
+        branch develop
+        branch release
+        commit id:"A"
+        checkout main
+        commit id:"ONE"
+        checkout develop
+        commit id:"B"
+        checkout main
+        merge develop id:"MERGE"
+        commit id:"TWO"
+        checkout release
+        cherry-pick id:"MERGE" parent:"B"
+        commit id:"THREE"
+        checkout develop
+        commit id:"C"
 ```

 ## Gitgraph specific configuration options
--- a/packages/mermaid/src/docs/syntax/sequenceDiagram.md
+++ b/packages/mermaid/src/docs/syntax/sequenceDiagram.md
@@ -83,6 +83,14 @@ sequenceDiagram
    Bob->>Alice: I agree
 ```

+#### Unfixable actor/participant creation/deletion error
+
+If an error of the following type occurs when creating or deleting an actor/participant:
+
+> The destroyed participant **participant-name** does not have an associated destroying message after its declaration. Please check the sequence diagram.
+
+And fixing diagram code does not get rid of this error and rendering of all other diagrams results in the same error, then you need to update the mermaid version to (v10.7.0+).
+
 ### Grouping / Box

 The actor(s) can be grouped in vertical boxes. You can define a color (if not, it will be transparent) and/or a descriptive label using the following notation:
--- a/packages/mermaid/src/mermaid.spec.ts
+++ b/packages/mermaid/src/mermaid.spec.ts
@@ -2,7 +2,7 @@ import mermaid from './mermaid.js';
 import { mermaidAPI } from './mermaidAPI.js';
 import './diagram-api/diagram-orchestration.js';
 import { addDiagrams } from './diagram-api/diagram-orchestration.js';
-import { beforeAll, describe, it, expect, vi } from 'vitest';
+import { beforeAll, describe, it, expect, vi, afterEach } from 'vitest';
 import type { DiagramDefinition } from './diagram-api/types.js';

 beforeAll(async () => {
@@ -89,7 +89,7 @@ describe('when using mermaid and ', () => {
      ).resolves.not.toThrow();
      // should still render, even if lazyLoadedDiagrams fails
      expect(mermaidAPI.render).toHaveBeenCalled();
-    });
+    }, 20_000);

    it('should defer diagram load based on parameter', async () => {
      let loaded = false;
--- a/packages/mermaid/src/mermaidAPI.spec.ts
+++ b/packages/mermaid/src/mermaidAPI.spec.ts
@@ -38,8 +38,6 @@ import type { MermaidConfig } from './config.type.js';

 import mermaidAPI, { removeExistingElements } from './mermaidAPI.js';
 import {
-  encodeEntities,
-  decodeEntities,
  createCssStyles,
  createUserStyles,
  appendDivSvgG,
@@ -68,6 +66,8 @@ vi.mock('stylis', () => {
  };
 });
 import { compile, serialize } from 'stylis';
+import { decodeEntities, encodeEntities } from './utils.js';
+import { Diagram } from './Diagram.js';

 /**
 * @see https://vitest.dev/guide/mocking.html Mock part of a module
@@ -745,4 +745,16 @@ describe('mermaidAPI', () => {
      });
    });
  });
+
+  describe('getDiagramFromText', () => {
+    it('should clean up comments when present in diagram definition', async () => {
+      const diagram = await mermaidAPI.getDiagramFromText(
+        `flowchart LR
+      %% This is a comment A -- text --> B{node}
+      A -- text --> B -- text2 --> C`
+      );
+      expect(diagram).toBeInstanceOf(Diagram);
+      expect(diagram.type).toBe('flowchart-v2');
+    });
+  });
 });
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -17,7 +17,7 @@ import { compile, serialize, stringify } from 'stylis';
 import { version } from '../package.json';
 import * as configApi from './config.js';
 import { addDiagrams } from './diagram-api/diagram-orchestration.js';
-import { Diagram, getDiagramFromText } from './Diagram.js';
+import { Diagram, getDiagramFromText as getDiagramFromTextInternal } from './Diagram.js';
 import errorRenderer from './diagrams/error/errorRenderer.js';
 import { attachFunctions } from './interactionDb.js';
 import { log, setLogLevel } from './logger.js';
@@ -28,8 +28,9 @@ import type { MermaidConfig } from './config.type.js';
 import { evaluate } from './diagrams/common/common.js';
 import isEmpty from 'lodash-es/isEmpty.js';
 import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility.js';
-import type { DiagramStyleClassDef } from './diagram-api/types.js';
+import type { DiagramMetadata, DiagramStyleClassDef } from './diagram-api/types.js';
 import { preprocessDiagram } from './preprocess.js';
+import { decodeEntities } from './utils.js';

 const MAX_TEXTLENGTH = 50_000;
 const MAX_TEXTLENGTH_EXCEEDED_MSG =
@@ -110,43 +111,6 @@ async function parse(text: string, parseOptions?: ParseOptions): Promise<boolean
  return true;
 }

-/**
- * @param  text - text to be encoded
- * @returns
- */
-export const encodeEntities = function (text: string): string {
-  let txt = text;
-
-  txt = txt.replace(/style.*:\S*#.*;/g, function (s): string {
-    return s.substring(0, s.length - 1);
-  });
-  txt = txt.replace(/classDef.*:\S*#.*;/g, function (s): string {
-    return s.substring(0, s.length - 1);
-  });
-
-  txt = txt.replace(/#\w+;/g, function (s) {
-    const innerTxt = s.substring(1, s.length - 1);
-
-    const isInt = /^\+?\d+$/.test(innerTxt);
-    if (isInt) {
-      return 'ﬂ°°' + innerTxt + '¶ß';
-    } else {
-      return 'ﬂ°' + innerTxt + '¶ß';
-    }
-  });
-
-  return txt;
-};
-
-/**
- *
- * @param  text - text to be decoded
- * @returns
- */
-export const decodeEntities = function (text: string): string {
-  return text.replace(/ﬂ°°/g, '&#').replace(/ﬂ°/g, '&').replace(/¶ß/g, ';');
-};
-
 // append !important; to each cssClass followed by a final !important, all enclosed in { }
 //
 /**
@@ -436,8 +400,6 @@ const render = async function (
    appendDivSvgG(root, id, enclosingDivID);
  }

-  text = encodeEntities(text);
-
  // -------------------------------------------------------------------------------
  // Create the diagram

@@ -557,6 +519,11 @@ function initialize(options: MermaidConfig = {}) {
  addDiagrams();
 }

+const getDiagramFromText = (text: string, metadata: Pick<DiagramMetadata, 'title'> = {}) => {
+  const { code } = preprocessDiagram(text);
+  return getDiagramFromTextInternal(code, metadata);
+};
+
 /**
 * Add accessibility (a11y) information to the diagram.
 *
--- a/packages/mermaid/src/rendering-util/createText.ts
+++ b/packages/mermaid/src/rendering-util/createText.ts
@@ -3,8 +3,8 @@
 import type { Group } from '../diagram-api/types.js';
 import type { D3TSpanElement, D3TextElement } from '../diagrams/common/commonTypes.js';
 import { log } from '../logger.js';
-import { decodeEntities } from '../mermaidAPI.js';
 import { markdownToHTML, markdownToLines } from '../rendering-util/handle-markdown-text.js';
+import { decodeEntities } from '../utils.js';
 import { splitLineToFitWidth } from './splitText.js';
 import type { MarkdownLine, MarkdownWord } from './types.js';

--- a/packages/mermaid/src/schemas/config.schema.yaml
+++ b/packages/mermaid/src/schemas/config.schema.yaml
@@ -74,6 +74,12 @@ properties:
    description: The maximum allowed size of the users text diagram
    type: number
    default: 50000
+  maxEdges:
+    description: |
+      Defines the maximum number of edges that can be drawn in a graph.
+    type: integer
+    default: 500
+    minimum: 0
  darkMode:
    type: boolean
    default: false
@@ -156,7 +162,7 @@ properties:
      in the current `currentConfig`.

      This prevents malicious graph directives from overriding a site's default security.
-    default: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
+    default: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize', 'maxEdges']
    type: array
    items:
      type: string
--- a/packages/mermaid/src/setupGraphViewbox.js
+++ b/packages/mermaid/src/setupGraphViewbox.js
@@ -44,6 +44,8 @@ export const configureSvgSize = function (svgElem, height, width, useMaxWidth) {
  const attrs = calculateSvgSizeAttrs(height, width, useMaxWidth);
  d3Attrs(svgElem, attrs);
 };
+
+// TODO v11: Remove the graph parameter. It is not used.
 export const setupGraphViewbox = function (graph, svgElem, padding, useMaxWidth) {
  const svgBounds = svgElem.node().getBBox();
  const sWidth = svgBounds.width;
@@ -55,26 +57,13 @@ export const setupGraphViewbox = function (graph, svgElem, padding, useMaxWidth)
  let height = 0;
  log.info(`Graph bounds: ${width}x${height}`, graph);

-  // let tx = 0;
-  // let ty = 0;
-  // if (sWidth > width) {
-  //   tx = (sWidth - width) / 2 + padding;
  width = sWidth + padding * 2;
-  // } else {
-  //   if (Math.abs(sWidth - width) >= 2 * padding + 1) {
-  //     width = width - padding;
-  //   }
-  // }
-  // if (sHeight > height) {
-  //   ty = (sHeight - height) / 2 + padding;
  height = sHeight + padding * 2;
-  // }

  log.info(`Calculated bounds: ${width}x${height}`);
  configureSvgSize(svgElem, height, width, useMaxWidth);

  // Ensure the viewBox includes the whole svgBounds area with extra space for padding
-  // const vBox = `0 0 ${width} ${height}`;
  const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${
    svgBounds.width + 2 * padding
  } ${svgBounds.height + 2 * padding}`;
--- a/packages/mermaid/src/utils.ts
+++ b/packages/mermaid/src/utils.ts
@@ -888,3 +888,40 @@ export default {
  parseFontSize,
  InitIDGenerator,
 };
+
+/**
+ * @param  text - text to be encoded
+ * @returns
+ */
+export const encodeEntities = function (text: string): string {
+  let txt = text;
+
+  txt = txt.replace(/style.*:\S*#.*;/g, function (s): string {
+    return s.substring(0, s.length - 1);
+  });
+  txt = txt.replace(/classDef.*:\S*#.*;/g, function (s): string {
+    return s.substring(0, s.length - 1);
+  });
+
+  txt = txt.replace(/#\w+;/g, function (s) {
+    const innerTxt = s.substring(1, s.length - 1);
+
+    const isInt = /^\+?\d+$/.test(innerTxt);
+    if (isInt) {
+      return 'ﬂ°°' + innerTxt + '¶ß';
+    } else {
+      return 'ﬂ°' + innerTxt + '¶ß';
+    }
+  });
+
+  return txt;
+};
+
+/**
+ *
+ * @param  text - text to be decoded
+ * @returns
+ */
+export const decodeEntities = function (text: string): string {
+  return text.replace(/ﬂ°°/g, '&#').replace(/ﬂ°/g, '&').replace(/¶ß/g, ';');
+};
--- a/packages/mermaid/src/utils/imperativeState.spec.ts
+++ b/packages/mermaid/src/utils/imperativeState.spec.ts
@@ -0,0 +1,60 @@
+import { ImperativeState } from './imperativeState.js';
+
+describe('createImperativeState', () => {
+  it('should create state with values from initializer', () => {
+    const baz = {
+      flag: false,
+    };
+
+    const state = new ImperativeState(() => ({
+      foo: undefined as number | undefined,
+      bar: [] as string[],
+      baz,
+    }));
+
+    expect(state.records.foo).toBeUndefined();
+    expect(state.records.bar).toEqual([]);
+    expect(state.records.baz).toBe(baz);
+  });
+
+  it('should update records', () => {
+    const state = new ImperativeState(() => ({
+      foo: undefined as number | undefined,
+      bar: [] as string[],
+      baz: {
+        flag: false,
+      },
+    }));
+
+    state.records.foo = 5;
+    state.records.bar = ['hello'];
+    state.records.baz.flag = true;
+
+    expect(state.records.foo).toEqual(5);
+    expect(state.records.bar).toEqual(['hello']);
+    expect(state.records.baz).toEqual({
+      flag: true,
+    });
+  });
+
+  it('should reset records', () => {
+    const state = new ImperativeState(() => ({
+      foo: undefined as number | undefined,
+      bar: [] as string[],
+      baz: {
+        flag: false,
+      },
+    }));
+
+    state.records.foo = 5;
+    state.records.bar = ['hello'];
+    state.records.baz.flag = true;
+    state.reset();
+
+    expect(state.records.foo).toBeUndefined();
+    expect(state.records.bar).toEqual([]);
+    expect(state.records.baz).toEqual({
+      flag: false,
+    });
+  });
+});
--- a/packages/mermaid/src/utils/imperativeState.ts
+++ b/packages/mermaid/src/utils/imperativeState.ts
@@ -0,0 +1,37 @@
+/**
+ * Resettable state storage.
+ * @example
+ * ```
+ * const state = new ImperativeState(() => {
+ *   foo: undefined as string | undefined,
+ *   bar: [] as number[],
+ *   baz: 1 as number | undefined,
+ * });
+ *
+ * state.records.foo = "hi";
+ * console.log(state.records.foo); // prints "hi";
+ * state.reset();
+ * console.log(state.records.foo); // prints "default";
+ *
+ * // typeof state.records:
+ * // {
+ * //   foo: string | undefined, // actual: undefined
+ * //   bar: number[],           // actual: []
+ * //   baz: number | undefined, // actual: 1
+ * // }
+ * ```
+ */
+export class ImperativeState<S extends Record<string, unknown>> {
+  public records: S;
+
+  /**
+   * @param init - Function that creates the default state.
+   */
+  constructor(private init: () => S) {
+    this.records = this.init();
+  }
+
+  reset() {
+    this.records = this.init();
+  }
+}
--- a/packages/mermaid/src/utils/lineWithOffset.ts
+++ b/packages/mermaid/src/utils/lineWithOffset.ts
@@ -19,9 +19,12 @@ const markerOffsets = {
 * @returns The angle, deltaX and deltaY
 */
 function calculateDeltaAndAngle(
-  point1: Point | [number, number],
-  point2: Point | [number, number]
+  point1?: Point | [number, number],
+  point2?: Point | [number, number]
 ): { angle: number; deltaX: number; deltaY: number } {
+  if (point1 === undefined || point2 === undefined) {
+    return { angle: 0, deltaX: 0, deltaY: 0 };
+  }
  point1 = pointTransformer(point1);
  point2 = pointTransformer(point2);
  const [x1, y1] = [point1.x, point1.y];
@@ -90,3 +93,44 @@ export const getLineFunctionsWithOffset = (
    },
  };
 };
+
+if (import.meta.vitest) {
+  const { it, expect, describe } = import.meta.vitest;
+  describe('calculateDeltaAndAngle', () => {
+    it('should calculate the angle and deltas between two points', () => {
+      expect(calculateDeltaAndAngle([0, 0], [0, 1])).toStrictEqual({
+        angle: 1.5707963267948966,
+        deltaX: 0,
+        deltaY: 1,
+      });
+      expect(calculateDeltaAndAngle([1, 0], [0, -1])).toStrictEqual({
+        angle: 0.7853981633974483,
+        deltaX: -1,
+        deltaY: -1,
+      });
+      expect(calculateDeltaAndAngle({ x: 1, y: 0 }, [0, -1])).toStrictEqual({
+        angle: 0.7853981633974483,
+        deltaX: -1,
+        deltaY: -1,
+      });
+      expect(calculateDeltaAndAngle({ x: 1, y: 0 }, { x: 1, y: 0 })).toStrictEqual({
+        angle: NaN,
+        deltaX: 0,
+        deltaY: 0,
+      });
+    });
+
+    it('should calculate the angle and deltas if one point in undefined', () => {
+      expect(calculateDeltaAndAngle(undefined, [0, 1])).toStrictEqual({
+        angle: 0,
+        deltaX: 0,
+        deltaY: 0,
+      });
+      expect(calculateDeltaAndAngle([0, 1], undefined)).toStrictEqual({
+        angle: 0,
+        deltaX: 0,
+        deltaY: 0,
+      });
+    });
+  });
+}
--- a/packages/mermaid/tsconfig.json
+++ b/packages/mermaid/tsconfig.json
@@ -2,7 +2,8 @@
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "rootDir": "./src",
-    "outDir": "./dist"
+    "outDir": "./dist",
+    "types": ["vitest/importMeta", "vitest/globals"]
  },
  "include": ["./src/**/*.ts", "./package.json"]
 }
--- a/Show More
+++ b/Show More