Merge branch 'develop' into fix/sequence-diagram-autonumber-arrow-positioning

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

.changeset/brave-baths-behave.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Prevent HTML tags from being escaped in sandbox label rendering

.changeset/deep-pumas-run.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-chore: Fix mindmap rendering in docs and apply tidytree layout

.changeset/four-eyes-wish.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Ensure edge label color is applied when using classDef with edge IDs

.changeset/moody-fans-try.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Resolve gantt chart crash due to invalid array length

.changeset/proud-colts-smell.md

@@ -1,5 +0,0 @@
----
-'mermaid': minor
----
-
-feat: Add IDs in architecture diagrams

.changeset/revert-marked-dependency.md

@@ -1,9 +0,0 @@
----
-'mermaid': patch
----
-
-chore: revert marked dependency from ^15.0.7 to ^16.0.0
-
-- Reverted marked package version to ^16.0.0 for better compatibility
-- This is a dependency update that maintains API compatibility
-- All tests pass with the updated version

.changeset/short-seals-sort.md

@@ -0,0 +1,5 @@
+---
+'mermaid': minor
+---
+
+feat: allow to put notes in namespaces on classDiagram

.changeset/ten-plums-bet.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Support ComponentQueue_Ext to prevent parsing error

.cspell/code-terms.txt

@@ -1,3 +1,5 @@
+!viewbox
+# It should be viewBox
 # This file contains coding related terms
 ALPHANUM
 antiscript

.cspell/libraries.txt

@@ -64,6 +64,7 @@ rscratch
 shiki
 Slidev
 sparkline
+speccharts
 sphinxcontrib
 ssim
 stylis

.esbuild/util.ts

@@ -71,6 +71,9 @@ export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
 
   const external: string[] = ['require', 'fs', 'path'];
   const outFileName = getFileName(name, options);
+  const { dependencies, version } = JSON.parse(
+    readFileSync(resolve(__dirname, `../packages/${packageName}/package.json`), 'utf-8')
+  );
   const output: BuildOptions = buildOptions({
     ...rest,
     absWorkingDir: resolve(__dirname, `../packages/${packageName}`),
@@ -82,15 +85,13 @@ export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
     chunkNames: `chunks/${outFileName}/[name]-[hash]`,
     define: {
       // This needs to be stringified for esbuild
-      includeLargeFeatures: `${includeLargeFeatures}`,
+      'injected.includeLargeFeatures': `${includeLargeFeatures}`,
+      'injected.version': `'${version}'`,
       'import.meta.vitest': 'undefined',
     },
   });
 
   if (core) {
-    const { dependencies } = JSON.parse(
-      readFileSync(resolve(__dirname, `../packages/${packageName}/package.json`), 'utf-8')
-    );
     // Core build is used to generate file without bundled dependencies.
     // This is used by downstream projects to bundle dependencies themselves.
     // Ignore dependencies and any dependencies of dependencies

.github/workflows/e2e-timings.yml

@@ -58,7 +58,7 @@ jobs:
           echo "EOF" >> $GITHUB_OUTPUT
 
       - name: Commit and create pull request
-        uses: peter-evans/create-pull-request@915d841dae6a4f191bb78faf61a257411d7be4d2
+        uses: peter-evans/create-pull-request@0edc001d28a2959cd7a6b505629f1d82f0a6e67d
         with:
           add-paths: |
             cypress/timings.json

.github/workflows/release.yml

@@ -42,5 +42,4 @@ jobs:
           publish: pnpm changeset:publish
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
           NPM_CONFIG_PROVENANCE: true

.github/workflows/scorecard.yml

@@ -20,7 +20,7 @@ jobs:
         with:
           persist-credentials: false
       - name: Run analysis
-        uses: ossf/scorecard-action@05b42c624433fc40578a4040d5cf5e36ddca8cde # v2.4.2
+        uses: ossf/scorecard-action@4eaacf0543bb3f2c246792bd56e8cdeffafb205a # v2.4.3
         with:
           results_file: results.sarif
           results_format: sarif

.github/workflows/validate-lockfile.yml

@@ -1,7 +1,7 @@
 name: Validate pnpm-lock.yaml
 
 on:
-  pull_request:
+  pull_request_target:
     paths:
       - 'pnpm-lock.yaml'
       - '**/package.json'
@@ -15,13 +15,8 @@ jobs:
         uses: actions/checkout@v4
         with:
           fetch-depth: 0
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-
-      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+          ref: ${{ github.event.pull_request.head.sha }}
+          repository: ${{ github.event.pull_request.head.repo.full_name }}
 
       - name: Validate pnpm-lock.yaml entries
         id: validate # give this step an ID so we can reference its outputs
@@ -55,16 +50,41 @@ jobs:
             exit 1
           fi
 
+      - name: Find existing lockfile validation comment
+        if: always()
+        uses: peter-evans/find-comment@v3
+        id: find-comment
+        with:
+          issue-number: ${{ github.event.pull_request.number }}
+          comment-author: 'github-actions[bot]'
+          body-includes: 'Lockfile Validation Failed'
+
       - name: Comment on PR if validation failed
         if: failure()
-        uses: peter-evans/create-or-update-comment@v4
+        uses: peter-evans/create-or-update-comment@v5
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           issue-number: ${{ github.event.pull_request.number }}
+          comment-id: ${{ steps.find-comment.outputs.comment-id }}
+          edit-mode: replace
           body: |
+            ❌ **Lockfile Validation Failed**
+
             The following issue(s) were detected:
             ${{ steps.validate.outputs.errors }}
 
             Please address these and push an update.
 
             _Posted automatically by GitHub Actions_
+
+      - name: Delete comment if validation passed
+        if: success() && steps.find-comment.outputs.comment-id != ''
+        uses: actions/github-script@v7
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            await github.rest.issues.deleteComment({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              comment_id: ${{ steps.find-comment.outputs.comment-id }},
+            });

.vite/build.ts

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

CHANGELOG.md

@@ -1 +1 @@
-./packages/mermaid/CHANGELOG.md
+./packages/mermaid/CHANGELOG.md

CONTRIBUTING.md

@@ -1 +1 @@
-./packages/mermaid/src/docs/community/contributing.md
+./packages/mermaid/src/docs/community/contributing.md

Dockerfile

@@ -5,7 +5,7 @@ USER 0:0
 RUN corepack enable \
     && corepack enable pnpm
 
-RUN apk add --no-cache git~=2.43.4 \
+RUN apk add --no-cache git~=2.43 \
     && git config --add --system safe.directory /mermaid
 
 ENV NODE_OPTIONS="--max_old_space_size=8192"

cypress/helpers/util.ts

@@ -98,11 +98,21 @@ export const openURLAndVerifyRendering = (
 
   cy.visit(url);
   cy.window().should('have.property', 'rendered', true);
-  cy.get('svg').should('be.visible');
-  cy.get('svg').should('not.have.attr', 'viewbox');
 
-  if (validation) {
-    cy.get('svg').should(validation);
+  // Handle sandbox mode where SVG is inside an iframe
+  if (options.securityLevel === 'sandbox') {
+    cy.get('iframe').should('be.visible');
+    if (validation) {
+      cy.get('iframe').should(validation);
+    }
+  } else {
+    cy.get('svg').should('be.visible');
+    // cspell:ignore viewbox
+    cy.get('svg').should('not.have.attr', 'viewbox');
+
+    if (validation) {
+      cy.get('svg').should(validation);
+    }
   }
 
   if (screenshot) {

cypress/integration/rendering/c4.spec.js

@@ -114,4 +114,28 @@ describe('C4 diagram', () => {
       {}
     );
   });
+  it('C4.6 should render C4Context diagram with ComponentQueue_Ext', () => {
+    imgSnapshotTest(
+      `
+      C4Context
+      title System Context diagram with ComponentQueue_Ext
+
+      Enterprise_Boundary(b0, "BankBoundary0") {
+          Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
+
+          System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
+
+          Enterprise_Boundary(b1, "BankBoundary") {
+            ComponentQueue_Ext(msgQueue, "Message Queue", "RabbitMQ", "External message queue system for processing banking transactions")
+            System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
+          }
+        }
+
+      BiRel(customerA, SystemAA, "Uses")
+      Rel(SystemAA, msgQueue, "Sends messages to")
+      Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
+      `,
+      {}
+    );
+  });
 });

cypress/integration/rendering/classDiagram-v2.spec.js

@@ -562,6 +562,20 @@ class C13["With Città foreign language"]
       `
     );
   });
+  it('should add notes in namespaces', function () {
+    imgSnapshotTest(
+      `
+      classDiagram
+      note "This is a outer note"
+      note for C1 "This is a outer note for C1"
+      namespace Namespace1 {
+        note "This is a inner note"
+        note for C1 "This is a inner note for C1"
+        class C1
+      }
+      `
+    );
+  });
   it('should render a simple class diagram with no members', () => {
     imgSnapshotTest(
       `

cypress/integration/rendering/classDiagram-v3.spec.js

@@ -709,6 +709,20 @@ class C13["With Città foreign language"]
       `
     );
   });
+  it('should add notes in namespaces', function () {
+    imgSnapshotTest(
+      `
+      classDiagram
+      note "This is a outer note"
+      note for C1 "This is a outer note for C1"
+      namespace Namespace1 {
+        note "This is a inner note"
+        note for C1 "This is a inner note for C1"
+        class C1
+      }
+      `
+    );
+  });
   it('should render a simple class diagram with no members', () => {
     imgSnapshotTest(
       `

cypress/integration/rendering/erDiagram.spec.js

@@ -445,7 +445,7 @@ ORDER ||--|{ LINE-ITEM : contains
         { logLevel: 1 }
       );
     });
-    it('should render ER diagram with numeric entity names and attributes', () => {
+    it('should render ER diagram with standalone numeric entities', () => {
       imgSnapshotTest(
         `erDiagram
          PRODUCT ||--o{ ORDER-ITEM : has

cypress/integration/rendering/flowchart-v2.spec.js

@@ -79,6 +79,18 @@ describe('Flowchart v2', () => {
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
+  it('6a: should render complex HTML in labels with sandbox security', () => {
+    imgSnapshotTest(
+      `flowchart TD
+    A[Christmas] -->|Get money| B(Go shopping)
+    B --> C{Let me think}
+    C -->|One| D[Laptop]
+    C -->|Two| E[iPhone]
+    C -->|Three| F[fa:fa-car Car]
+      `,
+      { securityLevel: 'sandbox', flowchart: { htmlLabels: true } }
+    );
+  });
   it('7: should render a flowchart when useMaxWidth is true (default)', () => {
     renderGraph(
       `flowchart TD

cypress/integration/rendering/sequencediagram-v2.spec.js

@@ -776,5 +776,834 @@ describe('Sequence Diagram Special Cases', () => {
         );
       });
     });
+    describe('Sequence Diagram Rendering with Autonumber and All Arrow Types', () => {
+      describe('Autonumber with All Arrow Types', () => {
+        it('should render all arrow types with autonumbering', () => {
+          imgSnapshotTest(
+            `%%{init: {'theme':'base'}}%%
+sequenceDiagram
+    autonumber
+    Alice->>Bob: Solid arrow (->>)
+    Bob-->>Alice: Dotted arrow (-->>)
+    Alice->Charlie: Solid open arrow (->)
+    Charlie-->Dave: Dotted open arrow (-->)
+    Alice-xBob: Solid cross (-x)
+    Bob--xAlice: Dotted cross (--x)
+    Alice-)Charlie: Solid point async (-)
+    Charlie--)Dave: Dotted point async (--)
+    Alice<<->>Bob: Bidirectional solid (<<->>)
+    Charlie<<-->>Dave: Bidirectional dotted (<<-->>)
+    Alice-|\\Bob: Solid top half (-|\\)
+    Bob-|/Alice: Solid bottom half (-|/)
+    Alice-\\\\Charlie: Stick top half (-\\\\)
+    Charlie-//Dave: Stick bottom half (-//)
+    Dave/|-Charlie: Solid top reverse (/|-)
+    Charlie\\|-Bob: Solid bottom reverse (\\|-)
+    Bob//-Alice: Stick top reverse (//-)
+    Alice\\\\-Bob: Stick bottom reverse (\\\\-)
+    Alice--|\\Bob: Dotted solid top (--|\\)
+    Bob--|/Alice: Dotted solid bottom (--|/)
+    Alice--\\\\Charlie: Dotted stick top (--\\\\)
+    Charlie--//Dave: Dotted stick bottom (--//)
+    Dave/|--Charlie: Dotted solid top reverse (/|--)
+    Charlie\\|--Bob: Dotted solid bottom reverse (\\|--)
+    Bob//--Alice: Dotted stick top reverse (//--)
+    Alice\\\\--Bob: Dotted stick bottom reverse (\\\\--)
+    Alice->>()Bob: Solid with central connection
+    Bob()-->>Alice: Dotted with reverse central
+    Alice()->>()Charlie: Dual central connections`,
+            { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+          );
+        });
+
+        it('should render all arrow types with autonumbering - left to right only', () => {
+          imgSnapshotTest(
+            `%%{init: {'theme':'base'}}%%
+sequenceDiagram
+    autonumber
+    Alice->>Bob: Solid arrow (->>)
+    Alice-->>Bob: Dotted arrow (-->>)
+    Alice->Bob: Solid open arrow (->)
+    Alice-->Bob: Dotted open arrow (-->)
+    Alice-xBob: Solid cross (-x)
+    Alice--xBob: Dotted cross (--x)
+    Alice-)Bob: Solid point async (-)
+    Alice--)Bob: Dotted point async (--)
+    Alice<<->>Bob: Bidirectional solid (<<->>)
+    Alice<<-->>Bob: Bidirectional dotted (<<-->>)
+    Alice-|\\Bob: Solid top half (-|\\)
+    Alice-|/Bob: Solid bottom half (-|/)
+    Alice-\\\\Bob: Stick top half (-\\\\)
+    Alice-//Bob: Stick bottom half (-//)
+    Bob/|-Alice: Solid top reverse (/|-)
+    Bob\\|-Alice: Solid bottom reverse (\\|-)
+    Bob//-Alice: Stick top reverse (//-)
+    Bob\\\\-Alice: Stick bottom reverse (\\\\-)
+    Alice--|\\Bob: Dotted solid top (--|\\)
+    Alice--|/Bob: Dotted solid bottom (--|/)
+    Alice--\\\\Bob: Dotted stick top (--\\\\)
+    Alice--//Bob: Dotted stick bottom (--//)
+    Bob/|--Alice: Dotted solid top reverse (/|--)
+    Bob\\|--Alice: Dotted solid bottom reverse (\\|--)
+    Bob//--Alice: Dotted stick top reverse (//--)
+    Bob\\\\--Alice: Dotted stick bottom reverse (\\\\--)
+    Alice->>()Bob: Solid with central connection
+    Alice()-->>Bob: Dotted with reverse central
+    Alice()->>()Bob: Dual central connections`,
+            { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+          );
+        });
+
+        it('should render central connections with autonumbering', () => {
+          imgSnapshotTest(
+            `%%{init: {'theme':'base'}}%%
+sequenceDiagram
+    autonumber
+    participant Alice
+    participant Bob
+    participant Charlie
+    Alice->>()Bob: Central connection at destination
+    Bob()->>Alice: Reverse central at source
+    Alice()->>()Bob: Dual central connections
+    Bob->>()Charlie: Another central connection
+    Charlie()-->>Alice: Reverse central dotted
+    Alice()<<-->>()Bob: Dual central bidirectional`,
+            { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+          );
+        });
+
+        it('should render bidirectional arrows with autonumbering', () => {
+          imgSnapshotTest(
+            `%%{init: {'theme':'base'}}%%
+sequenceDiagram
+    autonumber
+    participant Alice
+    participant Bob
+    participant Charlie
+    Alice<<->>Bob: Bidirectional solid left to right
+    Bob<<->>Alice: Bidirectional solid right to left
+    Alice<<-->>Charlie: Bidirectional dotted left to right
+    Charlie<<-->>Alice: Bidirectional dotted right to left
+    Bob<<->>Charlie: Bidirectional solid
+    Charlie<<-->>Bob: Bidirectional dotted`,
+            { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+          );
+        });
+
+        it('should render reverse arrows with autonumbering', () => {
+          imgSnapshotTest(
+            `%%{init: {'theme':'base'}}%%
+sequenceDiagram
+    autonumber
+    participant Alice
+    participant Bob
+    participant Charlie
+    Bob/|-Alice: Solid top reverse left to right
+    Alice/|-Bob: Solid top reverse right to left
+    Bob\\|-Alice: Solid bottom reverse left to right
+    Alice\\|-Bob: Solid bottom reverse right to left
+    Bob//-Alice: Stick top reverse left to right
+    Alice//-Bob: Stick top reverse right to left
+    Bob\\\\-Alice: Stick bottom reverse left to right
+    Alice\\\\-Bob: Stick bottom reverse right to left
+    Bob/|--Alice: Dotted solid top reverse
+    Alice\\|--Bob: Dotted solid bottom reverse
+    Bob//--Alice: Dotted stick top reverse
+    Alice\\\\--Bob: Dotted stick bottom reverse`,
+            { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+          );
+        });
+      });
+
+      describe('Central Connections with Autonumber - Comprehensive Coverage', () => {
+        it('should render CENTRAL_CONNECTION with normal arrows - left to right', () => {
+          imgSnapshotTest(
+            `%%{init: {'theme':'base'}}%%
+sequenceDiagram
+    autonumber
+    participant Alice
+    participant Bob
+    participant Charlie
+    Alice->>()Bob: Solid arrow with circle at destination
+    Alice-->>()Bob: Dotted arrow with circle at destination
+    Alice->()Bob: Open arrow with circle at destination
+    Alice--x()Bob: Cross arrow with circle at destination
+    Alice--)()Bob: Close arrow with circle at destination`,
+            { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+          );
+        });
+
+        it('should render CENTRAL_CONNECTION with normal arrows - right to left', () => {
+          imgSnapshotTest(
+            `%%{init: {'theme':'base'}}%%
+sequenceDiagram
+    autonumber
+    participant Alice
+    participant Bob
+    participant Charlie
+    Bob->>()Alice: Solid arrow with circle at destination (RTL)
+    Charlie-->>()Bob: Dotted arrow with circle at destination (RTL)
+    Bob->()Alice: Open arrow with circle at destination (RTL)
+    Charlie--x()Alice: Cross arrow with circle at destination (RTL)
+    Bob--)()Alice: Close arrow with circle at destination (RTL)`,
+            { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+          );
+        });
+
+        it('should render CENTRAL_CONNECTION with reverse arrows - left to right', () => {
+          imgSnapshotTest(
+            `%%{init: {'theme':'base'}}%%
+sequenceDiagram
+    autonumber
+    participant Alice
+    participant Bob
+    participant Charlie
+    Bob/|-()Alice: Solid top reverse with circle (LTR)
+    Bob\\|-()Alice: Solid bottom reverse with circle (LTR)
+    Bob//-()Alice: Stick top reverse with circle (LTR)
+    Bob\\\\-()Alice: Stick bottom reverse with circle (LTR)
+    Bob/|--()Alice: Dotted solid top reverse with circle (LTR)
+    Bob\\|--()Alice: Dotted solid bottom reverse with circle (LTR)
+    Bob//--()Alice: Dotted stick top reverse with circle (LTR)
+    Bob\\\\--()Alice: Dotted stick bottom reverse with circle (LTR)`,
+            { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+          );
+        });
+
+        it('should render CENTRAL_CONNECTION with reverse arrows - right to left', () => {
+          imgSnapshotTest(
+            `%%{init: {'theme':'base'}}%%
+sequenceDiagram
+    autonumber
+    participant Alice
+    participant Bob
+    participant Charlie
+    Alice/|-()Bob: Solid top reverse with circle (RTL)
+    Alice\\|-()Bob: Solid bottom reverse with circle (RTL)
+    Alice//-()Bob: Stick top reverse with circle (RTL)
+    Alice\\\\-()Bob: Stick bottom reverse with circle (RTL)
+    Alice/|--()Bob: Dotted solid top reverse with circle (RTL)
+    Alice\\|--()Bob: Dotted solid bottom reverse with circle (RTL)
+    Alice//--()Bob: Dotted stick top reverse with circle (RTL)
+    Alice\\\\--()Bob: Dotted stick bottom reverse with circle (RTL)`,
+            { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+          );
+        });
+
+        it('should render Central_Connection_REVERSE ()->> normal LTR', () => {
+          imgSnapshotTest(
+            `%%{init: {'theme':'base'}}%%
+sequenceDiagram
+    autonumber
+    participant Alice
+    participant Bob
+    participant Charlie
+    Alice()->>Bob: Circle at source with solid arrow
+    Alice()-->>Bob: Circle at source with dotted arrow
+    Alice()->Bob: Circle at source with open arrow
+    Alice()--xBob: Circle at source with cross arrow
+    Alice()--)Bob: Circle at source with close arrow`,
+            { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+          );
+        });
+
+        it('should render Central_Connection_REVERSE ()->> normal RTL', () => {
+          imgSnapshotTest(
+            `%%{init: {'theme':'base'}}%%
+sequenceDiagram
+    autonumber
+    participant Alice
+    participant Bob
+    participant Charlie
+    Bob()->>Alice: Circle at source with solid arrow (RTL)
+    Charlie()-->>Bob: Circle at source with dotted arrow (RTL)
+    Bob()->Alice: Circle at source with open arrow (RTL)
+    Charlie()--xAlice: Circle at source with cross arrow (RTL)
+    Bob()--)Alice: Circle at source with close arrow (RTL)`,
+            { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+          );
+        });
+
+        it('should render Central_Connection_REVERSE ()->> reverse LTR', () => {
+          imgSnapshotTest(
+            `%%{init: {'theme':'base'}}%%
+sequenceDiagram
+    autonumber
+    participant Alice
+    participant Bob
+    participant Charlie
+    Bob()/|-Alice: Circle at source with solid top reverse (LTR)
+    Bob()\\|-Alice: Circle at source with solid bottom reverse (LTR)
+    Bob()//-Alice: Circle at source with stick top reverse (LTR)
+    Bob()\\\\-Alice: Circle at source with stick bottom reverse (LTR)
+    Bob()/|--Alice: Circle at source with dotted solid top reverse (LTR)
+    Bob()\\|--Alice: Circle at source with dotted solid bottom reverse (LTR)
+    Bob()//--Alice: Circle at source with dotted stick top reverse (LTR)
+    Bob()\\\\--Alice: Circle at source with dotted stick bottom reverse (LTR)`,
+            { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+          );
+        });
+
+        it('should render Central_Connection_REVERSE ()->> reverse RTL', () => {
+          imgSnapshotTest(
+            `%%{init: {'theme':'base'}}%%
+sequenceDiagram
+    autonumber
+    participant Alice
+    participant Bob
+    participant Charlie
+    Alice()/|-Bob: Circle at source with solid top reverse (RTL)
+    Alice()\\|-Bob: Circle at source with solid bottom reverse (RTL)
+    Alice()//-Bob: Circle at source with stick top reverse (RTL)
+    Alice()\\\\-Bob: Circle at source with stick bottom reverse (RTL)
+    Alice()/|--Bob: Circle at source with dotted solid top reverse (RTL)
+    Alice()\\|--Bob: Circle at source with dotted solid bottom reverse (RTL)
+    Alice()//--Bob: Circle at source with dotted stick top reverse (RTL)
+    Alice()\\\\--Bob: Circle at source with dotted stick bottom reverse (RTL)`,
+            { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+          );
+        });
+
+        it('should render Central_Connection_DUAL ()->>() normal LTR', () => {
+          imgSnapshotTest(
+            `%%{init: {'theme':'base'}}%%
+sequenceDiagram
+    autonumber
+    participant Alice
+    participant Bob
+    participant Charlie
+    Alice()->>()Bob: Circles at both ends with solid arrow
+    Alice()-->>()Bob: Circles at both ends with dotted arrow
+    Alice()->()Bob: Circles at both ends with open arrow
+    Alice()--x()Bob: Circles at both ends with cross arrow
+    Alice()--)()Bob: Circles at both ends with close arrow`,
+            { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+          );
+        });
+
+        it('should render Central_Connection_DUAL ()->>() normal RTL', () => {
+          imgSnapshotTest(
+            `%%{init: {'theme':'base'}}%%
+sequenceDiagram
+    autonumber
+    participant Alice
+    participant Bob
+    participant Charlie
+    Bob()->>()Alice: Circles at both ends with solid arrow (RTL)
+    Charlie()-->>()Bob: Circles at both ends with dotted arrow (RTL)
+    Bob()->()Alice: Circles at both ends with open arrow (RTL)
+    Charlie()--x()Alice: Circles at both ends with cross arrow (RTL)
+    Bob()--)()Alice: Circles at both ends with close arrow (RTL)`,
+            { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+          );
+        });
+
+        it('should render Central_Connection_DUAL ()->>() reverse LTR', () => {
+          imgSnapshotTest(
+            `%%{init: {'theme':'base'}}%%
+sequenceDiagram
+    autonumber
+    participant Alice
+    participant Bob
+    participant Charlie
+    Bob()/|-()Alice: Circles at both ends with solid top reverse (LTR)
+    Bob()\\|-()Alice: Circles at both ends with solid bottom reverse (LTR)
+    Bob()//-()Alice: Circles at both ends with stick top reverse (LTR)
+    Bob()\\\\-()Alice: Circles at both ends with stick bottom reverse (LTR)
+    Bob()/|--()Alice: Circles at both ends with dotted solid top reverse (LTR)
+    Bob()\\|--()Alice: Circles at both ends with dotted solid bottom reverse (LTR)
+    Bob()//--()Alice: Circles at both ends with dotted stick top reverse (LTR)
+    Bob()\\\\--()Alice: Circles at both ends with dotted stick bottom reverse (LTR)`,
+            { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+          );
+        });
+
+        it('should render Central_Connection_DUAL ()->>() reverse RTL', () => {
+          imgSnapshotTest(
+            `%%{init: {'theme':'base'}}%%
+sequenceDiagram
+    autonumber
+    participant Alice
+    participant Bob
+    participant Charlie
+    Alice()/|-()Bob: Circles at both ends with solid top reverse (RTL)
+    Alice()\\|-()Bob: Circles at both ends with solid bottom reverse (RTL)
+    Alice()//-()Bob: Circles at both ends with stick top reverse (RTL)
+    Alice()\\\\-()Bob: Circles at both ends with stick bottom reverse (RTL)
+    Alice()/|--()Bob: Circles at both ends with dotted solid top reverse (RTL)
+    Alice()\\|--()Bob: Circles at both ends with dotted solid bottom reverse (RTL)
+    Alice()//--()Bob: Circles at both ends with dotted stick top reverse (RTL)
+    Alice()\\\\--()Bob: Circles at both ends with dotted stick bottom reverse (RTL)`,
+            { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+          );
+        });
+
+        it('should render mixed central connections with autonumber', () => {
+          imgSnapshotTest(
+            `%%{init: {'theme':'base'}}%%
+sequenceDiagram
+    autonumber
+    participant Alice
+    participant Bob
+    participant Charlie
+    participant David
+
+    Note over Alice,David: Normal arrows with central connections
+    Alice->>()Bob: CENTRAL_CONNECTION LTR
+    Bob->>()Alice: CENTRAL_CONNECTION RTL
+    Alice()->>Bob: CENTRAL_CONNECTION_REVERSE LTR
+    Bob()->>Alice: CENTRAL_CONNECTION_REVERSE RTL
+    Alice()->>()Bob: CENTRAL_CONNECTION_DUAL LTR
+    Bob()->>()Alice: CENTRAL_CONNECTION_DUAL RTL
+
+    Note over Alice,David: Reverse arrows with central connections
+    Bob/|-()Alice: Reverse with CENTRAL_CONNECTION LTR
+    Alice/|-()Bob: Reverse with CENTRAL_CONNECTION RTL
+    Bob()/|-Alice: Reverse with CENTRAL_CONNECTION_REVERSE LTR
+    Alice()/|-Bob: Reverse with CENTRAL_CONNECTION_REVERSE RTL
+    Bob()/|-()Alice: Reverse with CENTRAL_CONNECTION_DUAL LTR
+    Alice()/|-()Bob: Reverse with CENTRAL_CONNECTION_DUAL RTL
+
+    Note over Alice,David: Mixed with different participants
+    Alice->>()Charlie: Skip participant
+    Charlie()->>Alice: Back skip
+    Bob()->>()David: Another skip
+    David()->>()Bob: Return skip`,
+            { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+          );
+        });
+
+        it('should render central connections with bidirectional arrows and autonumber', () => {
+          imgSnapshotTest(
+            `%%{init: {'theme':'base'}}%%
+sequenceDiagram
+    autonumber
+    participant Alice
+    participant Bob
+    participant Charlie
+    Alice()<<->>()Bob: Dual central with bidirectional solid LTR
+    Bob()<<->>()Alice: Dual central with bidirectional solid RTL
+    Alice()<<-->>()Bob: Dual central with bidirectional dotted LTR
+    Bob()<<-->>()Alice: Dual central with bidirectional dotted RTL
+    Alice<<->>()Bob: Central at end with bidirectional LTR
+    Bob()<<->>Alice: Central at start with bidirectional RTL`,
+            { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+          );
+        });
+      });
+
+      describe('Self-Reference Arrows - Comprehensive Coverage', () => {
+        it('should render self-reference with normal arrows - without autonumber', () => {
+          imgSnapshotTest(
+            `%%{init: {'theme':'base'}}%%
+sequenceDiagram
+    participant Alice
+    participant Bob
+    participant Charlie
+    Alice->>Alice: Solid arrow self-reference
+    Bob-->>Bob: Dotted arrow self-reference
+    Charlie->Charlie: Open arrow self-reference
+    Alice-->Alice: Dotted open arrow self-reference
+    Bob-xBob: Cross arrow self-reference
+    Charlie--xCharlie: Dotted cross self-reference`,
+            { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+          );
+        });
+
+        it('should render self-reference with normal arrows - with autonumber', () => {
+          imgSnapshotTest(
+            `%%{init: {'theme':'base'}}%%
+sequenceDiagram
+    autonumber
+    participant Alice
+    participant Bob
+    participant Charlie
+    Alice->>Alice: Solid arrow self-reference
+    Bob-->>Bob: Dotted arrow self-reference
+    Charlie->Charlie: Open arrow self-reference
+    Alice-->Alice: Dotted open arrow self-reference
+    Bob-xBob: Cross arrow self-reference
+    Charlie--xCharlie: Dotted cross self-reference`,
+            { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+          );
+        });
+
+        it('should render self-reference with reverse arrows - without autonumber', () => {
+          imgSnapshotTest(
+            `%%{init: {'theme':'base'}}%%
+sequenceDiagram
+    participant Alice
+    participant Bob
+    participant Charlie
+    Alice/|-Alice: Solid top reverse self-reference
+    Bob\\|-Bob: Solid bottom reverse self-reference
+    Charlie//-Charlie: Stick top reverse self-reference
+    Alice\\\\-Alice: Stick bottom reverse self-reference
+    Bob/|--Bob: Dotted solid top reverse self-reference
+    Charlie\\|--Charlie: Dotted solid bottom reverse self-reference
+    Alice//--Alice: Dotted stick top reverse self-reference
+    Bob\\\\--Bob: Dotted stick bottom reverse self-reference`,
+            { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+          );
+        });
+
+        it('should render self-reference with reverse arrows - with autonumber', () => {
+          imgSnapshotTest(
+            `%%{init: {'theme':'base'}}%%
+sequenceDiagram
+    autonumber
+    participant Alice
+    participant Bob
+    participant Charlie
+    Alice/|-Alice: Solid top reverse self-reference
+    Bob\\|-Bob: Solid bottom reverse self-reference
+    Charlie//-Charlie: Stick top reverse self-reference
+    Alice\\\\-Alice: Stick bottom reverse self-reference
+    Bob/|--Bob: Dotted solid top reverse self-reference
+    Charlie\\|--Charlie: Dotted solid bottom reverse self-reference
+    Alice//--Alice: Dotted stick top reverse self-reference
+    Bob\\\\--Bob: Dotted stick bottom reverse self-reference`,
+            { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+          );
+        });
+
+        it('should render self-reference with bidirectional arrows - without autonumber', () => {
+          imgSnapshotTest(
+            `%%{init: {'theme':'base'}}%%
+sequenceDiagram
+    participant Alice
+    participant Bob
+    participant Charlie
+    Alice<<->>Alice: Bidirectional solid self-reference
+    Bob<<-->>Bob: Bidirectional dotted self-reference
+    Charlie<<->>Charlie: Another bidirectional solid
+    Alice<<-->>Alice: Another bidirectional dotted`,
+            { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+          );
+        });
+
+        it('should render self-reference with bidirectional arrows - with autonumber', () => {
+          imgSnapshotTest(
+            `%%{init: {'theme':'base'}}%%
+sequenceDiagram
+    autonumber
+    participant Alice
+    participant Bob
+    participant Charlie
+    Alice<<->>Alice: Bidirectional solid self-reference
+    Bob<<-->>Bob: Bidirectional dotted self-reference
+    Charlie<<->>Charlie: Another bidirectional solid
+    Alice<<-->>Alice: Another bidirectional dotted`,
+            { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+          );
+        });
+
+        it('should render self-reference with CENTRAL_CONNECTION - without autonumber', () => {
+          imgSnapshotTest(
+            `%%{init: {'theme':'base'}}%%
+sequenceDiagram
+    participant Alice
+    participant Bob
+    participant Charlie
+    Alice->>()Alice: Solid arrow with circle at destination
+    Bob-->>()Bob: Dotted arrow with circle at destination
+    Charlie->()Charlie: Open arrow with circle at destination
+    Alice--x()Alice: Cross arrow with circle at destination
+    Bob--)()Bob: Close arrow with circle at destination`,
+            { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+          );
+        });
+
+        it('should render self-reference with CENTRAL_CONNECTION - with autonumber', () => {
+          imgSnapshotTest(
+            `%%{init: {'theme':'base'}}%%
+sequenceDiagram
+    autonumber
+    participant Alice
+    participant Bob
+    participant Charlie
+    Alice->>()Alice: Solid arrow with circle at destination
+    Bob-->>()Bob: Dotted arrow with circle at destination
+    Charlie->()Charlie: Open arrow with circle at destination
+    Alice--x()Alice: Cross arrow with circle at destination
+    Bob--)()Bob: Close arrow with circle at destination`,
+            { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+          );
+        });
+
+        it('should render self-reference with CENTRAL_CONNECTION_REVERSE  - without autonumber', () => {
+          imgSnapshotTest(
+            `%%{init: {'theme':'base'}}%%
+sequenceDiagram
+    participant Alice
+    participant Bob
+    participant Charlie
+    Alice()->>Alice: Circle at source with solid arrow
+    Bob()-->>Bob: Circle at source with dotted arrow
+    Charlie()->Charlie: Circle at source with open arrow
+    Alice()--xAlice: Circle at source with cross arrow
+    Bob()--)Bob: Circle at source with close arrow`,
+            { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+          );
+        });
+
+        it('should render self-reference with CENTRAL_CONNECTION_REVERSE - with autonumber', () => {
+          imgSnapshotTest(
+            `%%{init: {'theme':'base'}}%%
+sequenceDiagram
+    autonumber
+    participant Alice
+    participant Bob
+    participant Charlie
+    Alice()->>Alice: Circle at source with solid arrow
+    Bob()-->>Bob: Circle at source with dotted arrow
+    Charlie()->Charlie: Circle at source with open arrow
+    Alice()--xAlice: Circle at source with cross arrow
+    Bob()--)Bob: Circle at source with close arrow`,
+            { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+          );
+        });
+
+        it('should render self-reference with CENTRAL_CONNECTION_DUAL - without autonumber', () => {
+          imgSnapshotTest(
+            `%%{init: {'theme':'base'}}%%
+sequenceDiagram
+    participant Alice
+    participant Bob
+    participant Charlie
+    Alice()->>()Alice: Circles at both ends with solid arrow
+    Bob()-->>()Bob: Circles at both ends with dotted arrow
+    Charlie()->()Charlie: Circles at both ends with open arrow
+    Alice()--x()Alice: Circles at both ends with cross arrow
+    Bob()--)()Bob: Circles at both ends with close arrow`,
+            { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+          );
+        });
+
+        it('should render self-reference with CENTRAL_CONNECTION_DUAL - with autonumber', () => {
+          imgSnapshotTest(
+            `%%{init: {'theme':'base'}}%%
+sequenceDiagram
+    autonumber
+    participant Alice
+    participant Bob
+    participant Charlie
+    Alice()->>()Alice: Circles at both ends with solid arrow
+    Bob()-->>()Bob: Circles at both ends with dotted arrow
+    Charlie()->()Charlie: Circles at both ends with open arrow
+    Alice()--x()Alice: Circles at both ends with cross arrow
+    Bob()--)()Bob: Circles at both ends with close arrow`,
+            { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+          );
+        });
+
+        it('should render self-reference with reverse arrows and CENTRAL_CONNECTION', () => {
+          imgSnapshotTest(
+            `%%{init: {'theme':'base'}}%%
+sequenceDiagram
+    participant Alice
+    participant Bob
+    participant Charlie
+    Alice/|-()Alice: Solid top reverse with circle at destination
+    Bob\\|-()Bob: Solid bottom reverse with circle at destination
+    Charlie//-()Charlie: Stick top reverse with circle at destination
+    Alice\\\\-()Alice: Stick bottom reverse with circle at destination
+    Bob/|--()Bob: Dotted solid top reverse with circle at destination
+    Charlie\\|--()Charlie: Dotted solid bottom reverse with circle at destination
+    Alice//--()Alice: Dotted stick top reverse with circle at destination
+    Bob\\\\--()Bob: Dotted stick bottom reverse with circle at destination`,
+            { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+          );
+        });
+
+        it('should render self-reference with reverse arrows and CENTRAL_CONNECTION - with autonumber', () => {
+          imgSnapshotTest(
+            `%%{init: {'theme':'base'}}%%
+sequenceDiagram
+    autonumber
+    participant Alice
+    participant Bob
+    participant Charlie
+    Alice/|-()Alice: Solid top reverse with circle at destination
+    Bob\\|-()Bob: Solid bottom reverse with circle at destination
+    Charlie//-()Charlie: Stick top reverse with circle at destination
+    Alice\\\\-()Alice: Stick bottom reverse with circle at destination
+    Bob/|--()Bob: Dotted solid top reverse with circle at destination
+    Charlie\\|--()Charlie: Dotted solid bottom reverse with circle at destination
+    Alice//--()Alice: Dotted stick top reverse with circle at destination
+    Bob\\\\--()Bob: Dotted stick bottom reverse with circle at destination`,
+            { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+          );
+        });
+
+        it('should render self-ref reverse Central_Connection_REVERSE no-autonumber', () => {
+          imgSnapshotTest(
+            `%%{init: {'theme':'base'}}%%
+sequenceDiagram
+    participant Alice
+    participant Bob
+    participant Charlie
+    Alice()/|-Alice: Circle at source with solid top reverse
+    Bob()\\|-Bob: Circle at source with solid bottom reverse
+    Charlie()//-Charlie: Circle at source with stick top reverse
+    Alice()\\\\-Alice: Circle at source with stick bottom reverse
+    Bob()/|--Bob: Circle at source with dotted solid top reverse
+    Charlie()\\|--Charlie: Circle at source with dotted solid bottom reverse
+    Alice()//--Alice: Circle at source with dotted stick top reverse
+    Bob()\\\\--Bob: Circle at source with dotted stick bottom reverse`,
+            { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+          );
+        });
+
+        it('should render self-ref reverse Central_Connection_REVERSE autonumber', () => {
+          imgSnapshotTest(
+            `%%{init: {'theme':'base'}}%%
+sequenceDiagram
+    autonumber
+    participant Alice
+    participant Bob
+    participant Charlie
+    Alice()/|-Alice: Circle at source with solid top reverse
+    Bob()\\|-Bob: Circle at source with solid bottom reverse
+    Charlie()//-Charlie: Circle at source with stick top reverse
+    Alice()\\\\-Alice: Circle at source with stick bottom reverse
+    Bob()/|--Bob: Circle at source with dotted solid top reverse
+    Charlie()\\|--Charlie: Circle at source with dotted solid bottom reverse
+    Alice()//--Alice: Circle at source with dotted stick top reverse
+    Bob()\\\\--Bob: Circle at source with dotted stick bottom reverse`,
+            { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+          );
+        });
+
+        it('should render self-ref reverse Central_Connection_DUAL no-autonumber', () => {
+          imgSnapshotTest(
+            `%%{init: {'theme':'base'}}%%
+sequenceDiagram
+    participant Alice
+    participant Bob
+    participant Charlie
+    Alice()/|-()Alice: Circles at both ends with solid top reverse
+    Bob()\\|-()Bob: Circles at both ends with solid bottom reverse
+    Charlie()//-()Charlie: Circles at both ends with stick top reverse
+    Alice()\\\\-()Alice: Circles at both ends with stick bottom reverse
+    Bob()/|--()Bob: Circles at both ends with dotted solid top reverse
+    Charlie()\\|--()Charlie: Circles at both ends with dotted solid bottom reverse
+    Alice()//--()Alice: Circles at both ends with dotted stick top reverse
+    Bob()\\\\--()Bob: Circles at both ends with dotted stick bottom reverse`,
+            { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+          );
+        });
+
+        it('should render self-references, reverse arrows & dual central connection (autonumber).', () => {
+          imgSnapshotTest(
+            `%%{init: {'theme':'base'}}%%
+sequenceDiagram
+    autonumber
+    participant Alice
+    participant Bob
+    participant Charlie
+    Alice()/|-()Alice: Circles at both ends with solid top reverse
+    Bob()\\|-()Bob: Circles at both ends with solid bottom reverse
+    Charlie()//-()Charlie: Circles at both ends with stick top reverse
+    Alice()\\\\-()Alice: Circles at both ends with stick bottom reverse
+    Bob()/|--()Bob: Circles at both ends with dotted solid top reverse
+    Charlie()\\|--()Charlie: Circles at both ends with dotted solid bottom reverse
+    Alice()//--()Alice: Circles at both ends with dotted stick top reverse
+    Bob()\\\\--()Bob: Circles at both ends with dotted stick bottom reverse`,
+            { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+          );
+        });
+
+        it('Render self-references with bidirectional central connections (no autonumber).', () => {
+          imgSnapshotTest(
+            `%%{init: {'theme':'base'}}%%
+sequenceDiagram
+    participant Alice
+    participant Bob
+    participant Charlie
+    Alice()<<->>()Alice: Dual central with bidirectional solid
+    Bob()<<-->>()Bob: Dual central with bidirectional dotted
+    Charlie<<->>()Alice: Central at end with bidirectional
+    Bob()<<->>Bob: Central at start with bidirectional`,
+            { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+          );
+        });
+
+        it('should render self-reference with bidirectional and central connections - with autonumber', () => {
+          imgSnapshotTest(
+            `%%{init: {'theme':'base'}}%%
+sequenceDiagram
+    autonumber
+    participant Alice
+    participant Bob
+    participant Charlie
+    Alice()<<->>()Alice: Dual central with bidirectional solid
+    Bob()<<-->>()Bob: Dual central with bidirectional dotted
+    Charlie<<->>()Charlie: Central at end with bidirectional
+    Bob()<<->>Bob: Central at start with bidirectional`,
+            { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+          );
+        });
+
+        it('should render comprehensive self-reference scenario - all arrow types mixed', () => {
+          imgSnapshotTest(
+            `%%{init: {'theme':'base'}}%%
+sequenceDiagram
+    autonumber
+    participant Alice
+    participant Bob
+    participant Charlie
+
+    Note over Alice,Charlie: Normal arrows
+    Alice->>Alice: Normal solid
+    Bob-->>Bob: Normal dotted
+    Charlie->Charlie: Normal open
+
+    Note over Alice,Charlie: Reverse arrows
+    Alice/|-Alice: Reverse solid top
+    Bob\\|-Bob: Reverse solid bottom
+
+    Note over Alice,Charlie: Bidirectional arrows
+    Charlie<<->>Charlie: Bidirectional solid
+    Alice<<-->>Alice: Bidirectional dotted
+
+    Note over Alice,Charlie: Central connections
+    Bob->>()Bob: Central at destination
+    Charlie()->>Charlie: Central at source
+    Alice()->>()Alice: Dual central
+
+    Note over Alice,Charlie: Reverse with central
+    Bob()/|-()Bob: Reverse with dual central
+    Charlie/|-()Charlie: Reverse with central at destination
+
+    Note over Alice,Charlie: Bidirectional with central
+    Alice()<<->>()Alice: Bidirectional with dual central`,
+            { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+          );
+        });
+
+        it('should render self-reference mixed with regular messages and autonumber', () => {
+          imgSnapshotTest(
+            `%%{init: {'theme':'base'}}%%
+sequenceDiagram
+    autonumber
+    participant Alice
+    participant Bob
+    participant Charlie
+
+    Alice->>Bob: Regular message
+    Bob->>Bob: Self-reference solid
+    Bob-->>Charlie: Regular dotted
+    Charlie()->>()Charlie: Self-ref dual central
+    Charlie->>Alice: Regular back
+    Alice<<->>Alice: Self-ref bidirectional
+    Alice()->>Bob: Regular with central
+    Bob()/|-()Bob: Self-ref reverse dual central
+    Bob-->>Alice: Regular dotted back`,
+            { sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+          );
+        });
+      });
+    });
   });
 });

cypress/timings.json

@@ -2,227 +2,227 @@
   "durations": [
     {
       "spec": "cypress/integration/other/configuration.spec.js",
-      "duration": 5841
+      "duration": 6099
     },
     {
       "spec": "cypress/integration/other/external-diagrams.spec.js",
-      "duration": 2138
+      "duration": 2236
     },
     {
       "spec": "cypress/integration/other/ghsa.spec.js",
-      "duration": 3370
+      "duration": 3405
     },
     {
       "spec": "cypress/integration/other/iife.spec.js",
-      "duration": 2052
+      "duration": 2176
     },
     {
       "spec": "cypress/integration/other/interaction.spec.js",
-      "duration": 12243
+      "duration": 12300
     },
     {
       "spec": "cypress/integration/other/rerender.spec.js",
-      "duration": 2065
+      "duration": 2089
     },
     {
       "spec": "cypress/integration/other/xss.spec.js",
-      "duration": 31288
+      "duration": 32033
     },
     {
       "spec": "cypress/integration/rendering/appli.spec.js",
-      "duration": 3421
+      "duration": 3672
     },
     {
       "spec": "cypress/integration/rendering/architecture.spec.ts",
-      "duration": 97
+      "duration": 103
     },
     {
       "spec": "cypress/integration/rendering/block.spec.js",
-      "duration": 18500
+      "duration": 18135
     },
     {
       "spec": "cypress/integration/rendering/c4.spec.js",
-      "duration": 5793
+      "duration": 5661
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-elk-v3.spec.js",
-      "duration": 40966
+      "duration": 41456
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-handDrawn-v3.spec.js",
-      "duration": 39176
+      "duration": 38910
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-v2.spec.js",
-      "duration": 23468
+      "duration": 24120
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-v3.spec.js",
-      "duration": 38291
+      "duration": 38454
     },
     {
       "spec": "cypress/integration/rendering/classDiagram.spec.js",
-      "duration": 16949
+      "duration": 17099
     },
     {
       "spec": "cypress/integration/rendering/conf-and-directives.spec.js",
-      "duration": 9480
+      "duration": 9844
     },
     {
       "spec": "cypress/integration/rendering/current.spec.js",
-      "duration": 2753
+      "duration": 2951
     },
     {
       "spec": "cypress/integration/rendering/erDiagram-unified.spec.js",
-      "duration": 88028
+      "duration": 90081
     },
     {
       "spec": "cypress/integration/rendering/erDiagram.spec.js",
-      "duration": 15615
+      "duration": 19496
     },
     {
       "spec": "cypress/integration/rendering/errorDiagram.spec.js",
-      "duration": 3706
+      "duration": 3829
     },
     {
       "spec": "cypress/integration/rendering/flowchart-elk.spec.js",
-      "duration": 43905
+      "duration": 42517
     },
     {
       "spec": "cypress/integration/rendering/flowchart-handDrawn.spec.js",
-      "duration": 31217
+      "duration": 31541
     },
     {
       "spec": "cypress/integration/rendering/flowchart-icon.spec.js",
-      "duration": 7531
+      "duration": 7749
     },
     {
       "spec": "cypress/integration/rendering/flowchart-shape-alias.spec.ts",
-      "duration": 25423
+      "duration": 25230
     },
     {
       "spec": "cypress/integration/rendering/flowchart-v2.spec.js",
-      "duration": 49664
+      "duration": 49359
     },
     {
       "spec": "cypress/integration/rendering/flowchart.spec.js",
-      "duration": 32525
+      "duration": 33028
     },
     {
       "spec": "cypress/integration/rendering/gantt.spec.js",
-      "duration": 20915
+      "duration": 22271
     },
     {
       "spec": "cypress/integration/rendering/gitGraph.spec.js",
-      "duration": 53556
+      "duration": 51837
     },
     {
       "spec": "cypress/integration/rendering/iconShape.spec.ts",
-      "duration": 283038
+      "duration": 285060
     },
     {
       "spec": "cypress/integration/rendering/imageShape.spec.ts",
-      "duration": 59434
+      "duration": 59517
     },
     {
       "spec": "cypress/integration/rendering/info.spec.ts",
-      "duration": 3101
+      "duration": 3501
     },
     {
       "spec": "cypress/integration/rendering/journey.spec.js",
-      "duration": 7099
+      "duration": 7405
     },
     {
       "spec": "cypress/integration/rendering/kanban.spec.ts",
-      "duration": 7567
+      "duration": 7975
     },
     {
       "spec": "cypress/integration/rendering/katex.spec.js",
-      "duration": 3817
+      "duration": 4312
     },
     {
       "spec": "cypress/integration/rendering/marker_unique_id.spec.js",
-      "duration": 2624
+      "duration": 2630
     },
     {
       "spec": "cypress/integration/rendering/mindmap-tidy-tree.spec.js",
-      "duration": 4246
+      "duration": 4541
     },
     {
       "spec": "cypress/integration/rendering/mindmap.spec.ts",
-      "duration": 11967
+      "duration": 12134
     },
     {
       "spec": "cypress/integration/rendering/newShapes.spec.ts",
-      "duration": 151914
+      "duration": 151160
     },
     {
       "spec": "cypress/integration/rendering/oldShapes.spec.ts",
-      "duration": 116698
+      "duration": 118044
     },
     {
       "spec": "cypress/integration/rendering/packet.spec.ts",
-      "duration": 4967
+      "duration": 5166
     },
     {
       "spec": "cypress/integration/rendering/pie.spec.ts",
-      "duration": 6700
+      "duration": 7074
     },
     {
       "spec": "cypress/integration/rendering/quadrantChart.spec.js",
-      "duration": 8963
+      "duration": 9518
     },
     {
       "spec": "cypress/integration/rendering/radar.spec.js",
-      "duration": 5540
+      "duration": 5846
     },
     {
       "spec": "cypress/integration/rendering/requirement.spec.js",
-      "duration": 2782
+      "duration": 3089
     },
     {
       "spec": "cypress/integration/rendering/requirementDiagram-unified.spec.js",
-      "duration": 54797
+      "duration": 55361
     },
     {
       "spec": "cypress/integration/rendering/sankey.spec.ts",
-      "duration": 6914
+      "duration": 7236
     },
     {
       "spec": "cypress/integration/rendering/sequencediagram-v2.spec.js",
-      "duration": 20481
+      "duration": 26057
     },
     {
       "spec": "cypress/integration/rendering/sequencediagram.spec.js",
-      "duration": 38490
+      "duration": 48401
     },
     {
       "spec": "cypress/integration/rendering/stateDiagram-v2.spec.js",
-      "duration": 30766
+      "duration": 30364
     },
     {
       "spec": "cypress/integration/rendering/stateDiagram.spec.js",
-      "duration": 16705
+      "duration": 16862
     },
     {
       "spec": "cypress/integration/rendering/theme.spec.js",
-      "duration": 30928
+      "duration": 30553
     },
     {
       "spec": "cypress/integration/rendering/timeline.spec.ts",
-      "duration": 8424
+      "duration": 8962
     },
     {
       "spec": "cypress/integration/rendering/treemap.spec.ts",
-      "duration": 12533
+      "duration": 12486
     },
     {
       "spec": "cypress/integration/rendering/xyChart.spec.js",
-      "duration": 21197
+      "duration": 21718
     },
     {
       "spec": "cypress/integration/rendering/zenuml.spec.js",
-      "duration": 3455
+      "duration": 3882
     }
   ]
 }

demos/classchart.html

@@ -184,6 +184,7 @@
       }
       Admin --> Report : generates
     </pre>
+    <hr />
     <pre class="mermaid">
     classDiagram
       namespace Company.Project.Module {
@@ -240,6 +241,20 @@
       Bike --> Square : "Logo Shape"
 
     </pre>
+    <hr />
+    <pre class="mermaid">
+      classDiagram
+        note "This is a outer note"
+        note for Class1 "This is a outer note for Class1"
+        namespace ns {
+          note "This is a inner note"
+          note for Class1 "This is a inner note for Class1"
+          class Class1
+          class Class2
+        }
+    </pre>
+    <hr />
+
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({

docs/ecosystem/integrations-community.md

@@ -57,6 +57,8 @@ To add an integration to this list, see the [Integrations - create page](./integ
   - [GitHub Writer](https://github.com/ckeditor/github-writer)
   - [SVG diagram generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
 - [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) ✅
+- [GNU Octave](https://octave.org/) ✅
+  - [octave_mermaid_js](https://github.com/CNOCTAVE/octave_mermaid_js) ✅
 - [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
 - [MonsterWriter](https://www.monsterwriter.com/) ✅
 - [Joplin](https://joplinapp.org) ✅
@@ -272,6 +274,7 @@ Communication tools and platforms
   - [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin)
 - [Reveal CK](https://github.com/jedcn/reveal-ck)
   - [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin)
+- [speccharts: Turn your test suites into specification diagrams](https://github.com/arnaudrenaud/speccharts)
 - [Vitepress Plugin](https://github.com/sametcn99/vitepress-mermaid-renderer)
 
 <!--- cspell:ignore Blazorade HueHive --->

docs/ecosystem/mermaid-chart.md

@@ -47,7 +47,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun
 
 ## Plans
 
-- **Free** - A free plan that includes three diagrams.
+- **Free** - A free plan that includes six diagrams.
 
 - **Pro** - A paid plan that includes unlimited diagrams, access to the collaboration feature, and more.
 

package.json

@@ -63,21 +63,21 @@
     ]
   },
   "devDependencies": {
-    "@applitools/eyes-cypress": "^3.55.2",
-    "@argos-ci/cypress": "^6.1.3",
+    "@applitools/eyes-cypress": "^3.56.3",
+    "@argos-ci/cypress": "^6.2.1",
     "@changesets/changelog-github": "^0.5.1",
     "@changesets/cli": "^2.29.7",
-    "@cspell/eslint-plugin": "^8.19.4",
-    "@cypress/code-coverage": "^3.14.6",
+    "@cspell/eslint-plugin": "^9.3.0",
+    "@cypress/code-coverage": "^3.14.7",
     "@eslint/js": "^9.26.0",
     "@rollup/plugin-typescript": "^12.1.4",
     "@types/cors": "^2.8.19",
-    "@types/express": "^5.0.3",
+    "@types/express": "^5.0.5",
     "@types/js-yaml": "^4.0.9",
     "@types/jsdom": "^21.1.7",
     "@types/lodash": "^4.17.20",
     "@types/mdast": "^4.0.4",
-    "@types/node": "^22.18.6",
+    "@types/node": "^22.19.0",
     "@types/rollup-plugin-visualizer": "^5.0.3",
     "@vitest/coverage-v8": "^3.2.4",
     "@vitest/spy": "^3.2.4",
@@ -88,23 +88,23 @@
     "cors": "^2.8.5",
     "cpy-cli": "^5.0.0",
     "cross-env": "^7.0.3",
-    "cspell": "^9.2.1",
+    "cspell": "^9.3.0",
     "cypress": "^14.5.4",
     "cypress-image-snapshot": "^4.0.1",
-    "cypress-split": "^1.24.23",
-    "esbuild": "^0.25.10",
+    "cypress-split": "^1.24.25",
+    "esbuild": "^0.25.12",
     "eslint": "^9.26.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-cypress": "^4.3.0",
+    "eslint-plugin-cypress": "^5.2.0",
     "eslint-plugin-html": "^8.1.3",
-    "eslint-plugin-jest": "^28.14.0",
-    "eslint-plugin-jsdoc": "^50.8.0",
+    "eslint-plugin-jest": "^29.0.1",
+    "eslint-plugin-jsdoc": "^61.1.12",
     "eslint-plugin-json": "^4.0.1",
     "eslint-plugin-lodash": "^8.0.0",
     "eslint-plugin-markdown": "^5.1.0",
     "eslint-plugin-no-only-tests": "^3.3.0",
     "eslint-plugin-tsdoc": "^0.4.0",
-    "eslint-plugin-unicorn": "^59.0.1",
+    "eslint-plugin-unicorn": "^62.0.0",
     "express": "^5.1.0",
     "globals": "^16.4.0",
     "globby": "^14.1.0",
@@ -121,13 +121,13 @@
     "prettier": "^3.6.2",
     "prettier-plugin-jsdoc": "^1.3.3",
     "rimraf": "^6.0.1",
-    "rollup-plugin-visualizer": "^6.0.3",
+    "rollup-plugin-visualizer": "^6.0.5",
     "start-server-and-test": "^2.1.2",
     "tslib": "^2.8.1",
-    "tsx": "^4.20.5",
+    "tsx": "^4.20.6",
     "typescript": "~5.7.3",
     "typescript-eslint": "^8.38.0",
-    "vite": "^7.0.7",
+    "vite": "^7.0.8",
     "vite-plugin-istanbul": "^7.0.0",
     "vitest": "^3.2.4"
   },

packages/mermaid-layout-elk/package.json

@@ -18,7 +18,9 @@
     "elk",
     "mermaid"
   ],
-  "scripts": {},
+  "scripts": {
+    "clean": "rimraf dist"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/mermaid-js/mermaid"

packages/mermaid-layout-tidy-tree/package.json

@@ -19,7 +19,9 @@
     "mermaid",
     "layout"
   ],
-  "scripts": {},
+  "scripts": {
+    "clean": "rimraf dist"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/mermaid-js/mermaid"

packages/mermaid-zenuml/package.json

@@ -33,7 +33,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@zenuml/core": "^3.41.4"
+    "@zenuml/core": "^3.41.6"
   },
   "devDependencies": {
     "mermaid": "workspace:^"

packages/mermaid/CHANGELOG.md

@@ -1,5 +1,30 @@
 # mermaid
 
+## 11.12.1
+
+### Patch Changes
+
+- [#7107](https://github.com/mermaid-js/mermaid/pull/7107) [`cbf8946`](https://github.com/mermaid-js/mermaid/commit/cbf89462acecac7a06f19843e8d48cb137df0753) Thanks [@shubhamparikh2704](https://github.com/shubhamparikh2704)! - fix: Updated the dependency dagre-d3-es to 7.0.13 to fix GHSA-cc8p-78qf-8p7q
+
+## 11.12.0
+
+### Minor Changes
+
+- [#6921](https://github.com/mermaid-js/mermaid/pull/6921) [`764b315`](https://github.com/mermaid-js/mermaid/commit/764b315dc16d0359add7c6b8e3ef7592e9bdc09c) Thanks [@quilicicf](https://github.com/quilicicf)! - feat: Add IDs in architecture diagrams
+
+### Patch Changes
+
+- [#6950](https://github.com/mermaid-js/mermaid/pull/6950) [`a957908`](https://github.com/mermaid-js/mermaid/commit/a9579083bfba367a4f4678547ec37ed7b61b9f5b) Thanks [@shubhamparikh2704](https://github.com/shubhamparikh2704)! - chore: Fix mindmap rendering in docs and apply tidytree layout
+
+- [#6826](https://github.com/mermaid-js/mermaid/pull/6826) [`1d36810`](https://github.com/mermaid-js/mermaid/commit/1d3681053b9168354e48e5763023b6305cd1ca72) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: Ensure edge label color is applied when using classDef with edge IDs
+
+- [#6945](https://github.com/mermaid-js/mermaid/pull/6945) [`d318f1a`](https://github.com/mermaid-js/mermaid/commit/d318f1a13cd7429334a29c70e449074ec1cb9f68) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: Resolve gantt chart crash due to invalid array length
+
+- [#6918](https://github.com/mermaid-js/mermaid/pull/6918) [`cfe9238`](https://github.com/mermaid-js/mermaid/commit/cfe9238882cbe95416db1feea3112456a71b6aaf) Thanks [@shubhamparikh2704](https://github.com/shubhamparikh2704)! - chore: revert marked dependency from ^15.0.7 to ^16.0.0
+  - Reverted marked package version to ^16.0.0 for better compatibility
+  - This is a dependency update that maintains API compatibility
+  - All tests pass with the updated version
+
 ## 11.11.0
 
 ### Minor Changes

packages/mermaid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "11.11.0",
+  "version": "11.12.1",
   "description": "Markdown-ish syntax for generating flowcharts, mindmaps, sequence diagrams, class diagrams, gantt charts, git graphs and more.",
   "type": "module",
   "module": "./dist/mermaid.core.mjs",
@@ -76,10 +76,10 @@
     "cytoscape-fcose": "^2.2.0",
     "d3": "^7.9.0",
     "d3-sankey": "^0.12.3",
-    "dagre-d3-es": "7.0.11",
-    "dayjs": "^1.11.18",
-    "dompurify": "^3.2.5",
-    "katex": "^0.16.22",
+    "dagre-d3-es": "7.0.13",
+    "dayjs": "^1.11.19",
+    "dompurify": "^3.3.0",
+    "katex": "^0.16.25",
     "khroma": "^2.1.0",
     "lodash-es": "^4.17.21",
     "marked": "^16.3.0",
@@ -89,10 +89,10 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@adobe/jsonschema2md": "^8.0.5",
+    "@adobe/jsonschema2md": "^8.0.7",
     "@iconify/types": "^2.0.0",
     "@types/cytoscape": "^3.21.9",
-    "@types/cytoscape-fcose": "^2.2.4",
+    "@types/cytoscape-fcose": "^2.2.5",
     "@types/d3-sankey": "^0.12.4",
     "@types/d3-scale": "^4.0.9",
     "@types/d3-scale-chromatic": "^3.1.0",
@@ -101,7 +101,7 @@
     "@types/jsdom": "^21.1.7",
     "@types/katex": "^0.16.7",
     "@types/lodash-es": "^4.17.12",
-    "@types/micromatch": "^4.0.9",
+    "@types/micromatch": "^4.0.10",
     "@types/stylis": "^4.2.7",
     "@types/uuid": "^10.0.0",
     "ajv": "^8.17.1",
@@ -123,7 +123,7 @@
     "rimraf": "^6.0.1",
     "start-server-and-test": "^2.1.2",
     "type-fest": "^4.41.0",
-    "typedoc": "^0.28.13",
+    "typedoc": "^0.28.14",
     "typedoc-plugin-markdown": "^4.8.1",
     "typescript": "~5.7.3",
     "unist-util-flatmap": "^1.0.0",

packages/mermaid/src/diagram-api/diagram-orchestration.ts

@@ -72,7 +72,7 @@ export const addDiagrams = () => {
     }
   );
 
-  if (includeLargeFeatures) {
+  if (injected.includeLargeFeatures) {
     registerLazyLoadedDiagrams(flowchartElk, mindmap, architecture);
   }
 

packages/mermaid/src/diagrams/c4/parser/c4Component.spec.js

@@ -0,0 +1,58 @@
+import c4Db from '../c4Db.js';
+import c4 from './c4Diagram.jison';
+import { setConfig } from '../../../config.js';
+
+setConfig({
+  securityLevel: 'strict',
+});
+
+describe.each([
+  ['Component', 'component'],
+  ['ComponentDb', 'component_db'],
+  ['ComponentQueue', 'component_queue'],
+  ['Component_Ext', 'external_component'],
+  ['ComponentDb_Ext', 'external_component_db'],
+  ['ComponentQueue_Ext', 'external_component_queue'],
+])('parsing a C4 %s', function (macroName, elementName) {
+  beforeEach(function () {
+    c4.parser.yy = c4Db;
+    c4.parser.yy.clear();
+  });
+
+  it('should parse a C4 diagram with one Component correctly', function () {
+    c4.parser.parse(`C4Component
+title Component diagram for Internet Banking Component
+${macroName}(ComponentAA, "Internet Banking Component", "Technology", "Allows customers to view information about their bank accounts, and make payments.")`);
+
+    const yy = c4.parser.yy;
+
+    const shapes = yy.getC4ShapeArray();
+    expect(shapes.length).toBe(1);
+    const onlyShape = shapes[0];
+
+    expect(onlyShape).toMatchObject({
+      alias: 'ComponentAA',
+      descr: {
+        text: 'Allows customers to view information about their bank accounts, and make payments.',
+      },
+      label: {
+        text: 'Internet Banking Component',
+      },
+      techn: {
+        text: 'Technology',
+      },
+      typeC4Shape: {
+        text: elementName,
+      },
+    });
+  });
+
+  it('should handle a trailing whitespaces after Component', function () {
+    const whitespace = ' ';
+    const rendered = c4.parser.parse(`C4Component${whitespace}
+title Component diagram for Internet Banking Component${whitespace}
+${macroName}(ComponentAA, "Internet Banking Component", "Technology", "Allows customers to view information about their bank accounts, and make payments.")${whitespace}`);
+
+    expect(rendered).toBe(true);
+  });
+});

packages/mermaid/src/diagrams/c4/parser/c4Diagram.jison

@@ -158,10 +158,10 @@ accDescr\s*"{"\s*                         { this.begin("acc_descr_multiline");}
 "UpdateRelStyle"                          { this.begin("update_rel_style"); return 'UPDATE_REL_STYLE';}
 "UpdateLayoutConfig"                      { this.begin("update_layout_config"); return 'UPDATE_LAYOUT_CONFIG';}
 
-<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config><<EOF>>                return "EOF_IN_STRUCT";
-<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config>[(][ ]*[,]             { this.begin("attribute"); return "ATTRIBUTE_EMPTY";}
-<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config>[(]                    { this.begin("attribute"); }
-<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config,attribute>[)]          { this.popState();this.popState();}
+<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext_queue,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config><<EOF>>                return "EOF_IN_STRUCT";
+<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext_queue,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config>[(][ ]*[,]             { this.begin("attribute"); return "ATTRIBUTE_EMPTY";}
+<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext_queue,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config>[(]                    { this.begin("attribute"); }
+<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext_queue,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config,attribute>[)]          { this.popState();this.popState();}
 
 <attribute>",,"                           { return 'ATTRIBUTE_EMPTY';}
 <attribute>","                            { }

packages/mermaid/src/diagrams/class/classDb.ts

@@ -17,6 +17,7 @@ import type {
   ClassRelation,
   ClassNode,
   ClassNote,
+  ClassNoteMap,
   ClassMap,
   NamespaceMap,
   NamespaceNode,
@@ -33,15 +34,16 @@ const sanitizeText = (txt: string) => common.sanitizeText(txt, getConfig());
 
 export class ClassDB implements DiagramDB {
   private relations: ClassRelation[] = [];
-  private classes = new Map<string, ClassNode>();
+  private classes: ClassMap = new Map<string, ClassNode>();
   private readonly styleClasses = new Map<string, StyleClass>();
-  private notes: ClassNote[] = [];
+  private notes: ClassNoteMap = new Map<string, ClassNote>();
   private interfaces: Interface[] = [];
   // private static classCounter = 0;
   private namespaces = new Map<string, NamespaceNode>();
   private namespaceCounter = 0;
 
-  private functions: any[] = [];
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
+  private functions: Function[] = [];
 
   constructor() {
     this.functions.push(this.setupToolTips.bind(this));
@@ -124,7 +126,7 @@ export class ClassDB implements DiagramDB {
       annotations: [],
       styles: [],
       domId: MERMAID_DOM_ID_PREFIX + name + '-' + classCounter,
-    } as ClassNode);
+    });
 
     classCounter++;
   }
@@ -155,12 +157,12 @@ export class ClassDB implements DiagramDB {
 
   public clear() {
     this.relations = [];
-    this.classes = new Map();
-    this.notes = [];
+    this.classes = new Map<string, ClassNode>();
+    this.notes = new Map<string, ClassNote>();
     this.interfaces = [];
     this.functions = [];
     this.functions.push(this.setupToolTips.bind(this));
-    this.namespaces = new Map();
+    this.namespaces = new Map<string, NamespaceNode>();
     this.namespaceCounter = 0;
     this.direction = 'TB';
     commonClear();
@@ -178,7 +180,12 @@ export class ClassDB implements DiagramDB {
     return this.relations;
   }
 
-  public getNotes() {
+  public getNote(id: string | number): ClassNote {
+    const key = typeof id === 'number' ? `note${id}` : id;
+    return this.notes.get(key)!;
+  }
+
+  public getNotes(): ClassNoteMap {
     return this.notes;
   }
 
@@ -279,16 +286,19 @@ export class ClassDB implements DiagramDB {
     }
   }
 
-  public addNote(text: string, className: string) {
+  public addNote(text: string, className: string): string {
+    const index = this.notes.size;
     const note = {
-      id: `note${this.notes.length}`,
+      id: `note${index}`,
       class: className,
       text: text,
+      index: index,
     };
-    this.notes.push(note);
+    this.notes.set(note.id, note);
+    return note.id;
   }
 
-  public cleanupLabel(label: string) {
+  public cleanupLabel(label: string): string {
     if (label.startsWith(':')) {
       label = label.substring(1);
     }
@@ -354,7 +364,7 @@ export class ClassDB implements DiagramDB {
     });
   }
 
-  public getTooltip(id: string, namespace?: string) {
+  public getTooltip(id: string, namespace?: string): string | undefined {
     if (namespace && this.namespaces.has(namespace)) {
       return this.namespaces.get(namespace)!.classes.get(id)!.tooltip;
     }
@@ -534,10 +544,11 @@ export class ClassDB implements DiagramDB {
 
     this.namespaces.set(id, {
       id: id,
-      classes: new Map(),
-      children: {},
+      classes: new Map<string, ClassNode>(),
+      notes: new Map<string, ClassNote>(),
+      children: new Map<string, NamespaceNode>(),
       domId: MERMAID_DOM_ID_PREFIX + id + '-' + this.namespaceCounter,
-    } as NamespaceNode);
+    });
 
     this.namespaceCounter++;
   }
@@ -555,16 +566,23 @@ export class ClassDB implements DiagramDB {
    *
    * @param id - ID of the namespace to add
    * @param classNames - IDs of the class to add
+   * @param noteNames - IDs of the notes to add
    * @public
    */
-  public addClassesToNamespace(id: string, classNames: string[]) {
+  public addClassesToNamespace(id: string, classNames: string[], noteNames: string[]) {
     if (!this.namespaces.has(id)) {
       return;
     }
     for (const name of classNames) {
       const { className } = this.splitClassNameAndType(name);
-      this.classes.get(className)!.parent = id;
-      this.namespaces.get(id)!.classes.set(className, this.classes.get(className)!);
+      const classNode = this.getClass(className);
+      classNode.parent = id;
+      this.namespaces.get(id)!.classes.set(className, classNode);
+    }
+    for (const noteName of noteNames) {
+      const noteNode = this.getNote(noteName);
+      noteNode.parent = id;
+      this.namespaces.get(id)!.notes.set(noteName, noteNode);
     }
   }
 
@@ -617,36 +635,32 @@ export class ClassDB implements DiagramDB {
     const edges: Edge[] = [];
     const config = getConfig();
 
-    for (const namespaceKey of this.namespaces.keys()) {
-      const namespace = this.namespaces.get(namespaceKey);
-      if (namespace) {
-        const node: Node = {
-          id: namespace.id,
-          label: namespace.id,
-          isGroup: true,
-          padding: config.class!.padding ?? 16,
-          // parent node must be one of [rect, roundedWithTitle, noteGroup, divider]
-          shape: 'rect',
-          cssStyles: [],
-          look: config.look,
-        };
-        nodes.push(node);
-      }
+    for (const namespace of this.namespaces.values()) {
+      const node: Node = {
+        id: namespace.id,
+        label: namespace.id,
+        isGroup: true,
+        padding: config.class!.padding ?? 16,
+        // parent node must be one of [rect, roundedWithTitle, noteGroup, divider]
+        shape: 'rect',
+        cssStyles: [],
+        look: config.look,
+      };
+      nodes.push(node);
     }
 
-    for (const classKey of this.classes.keys()) {
-      const classNode = this.classes.get(classKey);
-      if (classNode) {
-        const node = classNode as unknown as Node;
-        node.parentId = classNode.parent;
-        node.look = config.look;
-        nodes.push(node);
-      }
+    for (const classNode of this.classes.values()) {
+      const node: Node = {
+        ...classNode,
+        type: undefined,
+        isGroup: false,
+        parentId: classNode.parent,
+        look: config.look,
+      };
+      nodes.push(node);
     }
 
-    let cnt = 0;
-    for (const note of this.notes) {
-      cnt++;
+    for (const note of this.notes.values()) {
       const noteNode: Node = {
         id: note.id,
         label: note.text,
@@ -660,14 +674,15 @@ export class ClassDB implements DiagramDB {
           `stroke: ${config.themeVariables.noteBorderColor}`,
         ],
         look: config.look,
+        parentId: note.parent,
       };
       nodes.push(noteNode);
 
-      const noteClassId = this.classes.get(note.class)?.id ?? '';
+      const noteClassId = this.classes.get(note.class)?.id;
 
       if (noteClassId) {
         const edge: Edge = {
-          id: `edgeNote${cnt}`,
+          id: `edgeNote${note.index}`,
           start: note.id,
           end: noteClassId,
           type: 'normal',
@@ -697,7 +712,7 @@ export class ClassDB implements DiagramDB {
       nodes.push(interfaceNode);
     }
 
-    cnt = 0;
+    let cnt = 0;
     for (const classRelation of this.relations) {
       cnt++;
       const edge: Edge = {

packages/mermaid/src/diagrams/class/classDiagram.spec.ts

@@ -417,7 +417,7 @@ class C13["With Città foreign language"]
                      note "This is a keyword: ${keyword}. It truly is."
                   `;
       parser.parse(str);
-      expect(classDb.getNotes()[0].text).toEqual(`This is a keyword: ${keyword}. It truly is.`);
+      expect(classDb.getNote(0).text).toEqual(`This is a keyword: ${keyword}. It truly is.`);
     });
 
     it.each(keywords)(
@@ -427,7 +427,7 @@ class C13["With Città foreign language"]
                       note "${keyword}"`;
 
         parser.parse(str);
-        expect(classDb.getNotes()[0].text).toEqual(`${keyword}`);
+        expect(classDb.getNote(0).text).toEqual(`${keyword}`);
       }
     );
 
@@ -441,7 +441,7 @@ class C13["With Città foreign language"]
                    `;
 
       parser.parse(str);
-      expect(classDb.getNotes()[0].text).toEqual(`This is a keyword: ${keyword}. It truly is.`);
+      expect(classDb.getNote(0).text).toEqual(`This is a keyword: ${keyword}. It truly is.`);
     });
 
     it.each(keywords)(
@@ -456,7 +456,7 @@ class C13["With Città foreign language"]
                     `;
 
         parser.parse(str);
-        expect(classDb.getNotes()[0].text).toEqual(`${keyword}`);
+        expect(classDb.getNote(0).text).toEqual(`${keyword}`);
       }
     );
 

packages/mermaid/src/diagrams/class/classRenderer-v2.ts

@@ -8,7 +8,7 @@ import utils, { getEdgeId } from '../../utils.js';
 import { interpolateToCurve, getStylesFromArray } from '../../utils.js';
 import { setupGraphViewbox } from '../../setupGraphViewbox.js';
 import common from '../common/common.js';
-import type { ClassRelation, ClassNote, ClassMap, NamespaceMap } from './classTypes.js';
+import type { ClassRelation, ClassMap, ClassNoteMap, NamespaceMap } from './classTypes.js';
 import type { EdgeData } from '../../types.js';
 
 const sanitizeText = (txt: string) => common.sanitizeText(txt, getConfig());
@@ -65,6 +65,9 @@ export const addNamespaces = function (
 
     g.setNode(vertex.id, node);
     addClasses(vertex.classes, g, _id, diagObj, vertex.id);
+    const classes: ClassMap = diagObj.db.getClasses();
+    const relations: ClassRelation[] = diagObj.db.getRelations();
+    addNotes(vertex.notes, g, relations.length + 1, classes, vertex.id);
 
     log.info('setNode', node);
   });
@@ -144,69 +147,74 @@ export const addClasses = function (
  * @param classes - Classes
  */
 export const addNotes = function (
-  notes: ClassNote[],
+  notes: ClassNoteMap,
   g: graphlib.Graph,
   startEdgeId: number,
-  classes: ClassMap
+  classes: ClassMap,
+  parent?: string
 ) {
   log.info(notes);
 
-  notes.forEach(function (note, i) {
-    const vertex = note;
+  [...notes.values()]
+    .filter((note) => note.parent === parent)
+    .forEach(function (vertex) {
+      const cssNoteStr = '';
 
-    const cssNoteStr = '';
+      const styles = { labelStyle: '', style: '' };
 
-    const styles = { labelStyle: '', style: '' };
+      const vertexText = vertex.text;
 
-    const vertexText = vertex.text;
+      const radius = 0;
+      const shape = 'note';
+      const node = {
+        labelStyle: styles.labelStyle,
+        shape: shape,
+        labelText: sanitizeText(vertexText),
+        noteData: vertex,
+        rx: radius,
+        ry: radius,
+        class: cssNoteStr,
+        style: styles.style,
+        id: vertex.id,
+        domId: vertex.id,
+        tooltip: '',
+        type: 'note',
+        // TODO V10: Flowchart ? Keeping flowchart for backwards compatibility. Remove in next major release
+        padding: getConfig().flowchart?.padding ?? getConfig().class?.padding,
+      };
+      g.setNode(vertex.id, node);
+      log.info('setNode', node);
 
-    const radius = 0;
-    const shape = 'note';
-    const node = {
-      labelStyle: styles.labelStyle,
-      shape: shape,
-      labelText: sanitizeText(vertexText),
-      noteData: vertex,
-      rx: radius,
-      ry: radius,
-      class: cssNoteStr,
-      style: styles.style,
-      id: vertex.id,
-      domId: vertex.id,
-      tooltip: '',
-      type: 'note',
-      // TODO V10: Flowchart ? Keeping flowchart for backwards compatibility. Remove in next major release
-      padding: getConfig().flowchart?.padding ?? getConfig().class?.padding,
-    };
-    g.setNode(vertex.id, node);
-    log.info('setNode', node);
+      if (parent) {
+        g.setParent(vertex.id, parent);
+      }
 
-    if (!vertex.class || !classes.has(vertex.class)) {
-      return;
-    }
-    const edgeId = startEdgeId + i;
+      if (!vertex.class || !classes.has(vertex.class)) {
+        return;
+      }
+      const edgeId = startEdgeId + vertex.index;
 
-    const edgeData: EdgeData = {
-      id: `edgeNote${edgeId}`,
-      //Set relationship style and line type
-      classes: 'relation',
-      pattern: 'dotted',
-      // Set link type for rendering
-      arrowhead: 'none',
-      //Set edge extra labels
-      startLabelRight: '',
-      endLabelLeft: '',
-      //Set relation arrow types
-      arrowTypeStart: 'none',
-      arrowTypeEnd: 'none',
-      style: 'fill:none',
-      labelStyle: '',
-      curve: interpolateToCurve(conf.curve, curveLinear),
-    };
+      const edgeData: EdgeData = {
+        id: `edgeNote${edgeId}`,
+        //Set relationship style and line type
+        classes: 'relation',
+        pattern: 'dotted',
+        // Set link type for rendering
+        arrowhead: 'none',
+        //Set edge extra labels
+        startLabelRight: '',
+        endLabelLeft: '',
+        //Set relation arrow types
+        arrowTypeStart: 'none',
+        arrowTypeEnd: 'none',
+        style: 'fill:none',
+        labelStyle: '',
+        curve: interpolateToCurve(conf.curve, curveLinear),
+      };
 
-    // Add the edge to the graph
-    g.setEdge(vertex.id, vertex.class, edgeData, edgeId);
-  });
+      // Add the edge to the graph
+      g.setEdge(vertex.id, vertex.class, edgeData, edgeId);
+    });
 };
 
 /**
@@ -329,7 +337,7 @@ export const draw = async function (text: string, id: string, _version: string,
   const namespaces: NamespaceMap = diagObj.db.getNamespaces();
   const classes: ClassMap = diagObj.db.getClasses();
   const relations: ClassRelation[] = diagObj.db.getRelations();
-  const notes: ClassNote[] = diagObj.db.getNotes();
+  const notes: ClassNoteMap = diagObj.db.getNotes();
   log.info(relations);
   addNamespaces(namespaces, g, id, diagObj);
   addClasses(classes, g, id, diagObj);

packages/mermaid/src/diagrams/class/classRenderer.js

@@ -206,7 +206,7 @@ export const draw = function (text, id, _version, diagObj) {
     );
   });
 
-  const notes = diagObj.db.getNotes();
+  const notes = diagObj.db.getNotes().values();
   notes.forEach(function (note) {
     log.debug(`Adding note: ${JSON.stringify(note)}`);
     const node = svgDraw.drawNote(diagram, note, conf, diagObj);

packages/mermaid/src/diagrams/class/classTypes.ts

@@ -5,7 +5,7 @@ export interface ClassNode {
   id: string;
   type: string;
   label: string;
-  shape: string;
+  shape: 'classBox';
   text: string;
   cssClasses: string;
   methods: ClassMember[];
@@ -149,6 +149,8 @@ export interface ClassNote {
   id: string;
   class: string;
   text: string;
+  index: number;
+  parent?: string;
 }
 
 export interface ClassRelation {
@@ -177,6 +179,7 @@ export interface NamespaceNode {
   id: string;
   domId: string;
   classes: ClassMap;
+  notes: ClassNoteMap;
   children: NamespaceMap;
 }
 
@@ -187,4 +190,5 @@ export interface StyleClass {
 }
 
 export type ClassMap = Map<string, ClassNode>;
+export type ClassNoteMap = Map<string, ClassNote>;
 export type NamespaceMap = Map<string, NamespaceNode>;

packages/mermaid/src/diagrams/class/parser/classDiagram.jison

@@ -275,8 +275,8 @@ statement
     ;
 
 namespaceStatement
-    : namespaceIdentifier STRUCT_START classStatements STRUCT_STOP          { yy.addClassesToNamespace($1, $3); }
-    | namespaceIdentifier STRUCT_START NEWLINE classStatements STRUCT_STOP  { yy.addClassesToNamespace($1, $4); }
+    : namespaceIdentifier STRUCT_START classStatements STRUCT_STOP          { yy.addClassesToNamespace($1, $3[0], $3[1]); }
+    | namespaceIdentifier STRUCT_START NEWLINE classStatements STRUCT_STOP  { yy.addClassesToNamespace($1, $4[0], $4[1]); }
     ;
 
 namespaceIdentifier
@@ -284,9 +284,12 @@ namespaceIdentifier
     ;
 
 classStatements
-    : classStatement                            {$$=[$1]}
-    | classStatement NEWLINE                    {$$=[$1]}
-    | classStatement NEWLINE classStatements    {$3.unshift($1); $$=$3}
+    : classStatement                            {$$=[[$1], []]}
+    | classStatement NEWLINE                    {$$=[[$1], []]}
+    | classStatement NEWLINE classStatements    {$3[0].unshift($1); $$=$3}
+    | noteStatement                             {$$=[[], [$1]]}
+    | noteStatement NEWLINE                     {$$=[[], [$1]]}
+    | noteStatement NEWLINE classStatements     {$3[1].unshift($1); $$=$3}
     ;
 
 classStatement
@@ -333,8 +336,8 @@ relationStatement
     ;
 
 noteStatement
-    : NOTE_FOR className noteText  { yy.addNote($3, $2); }
-    | NOTE noteText                { yy.addNote($2); }
+    : NOTE_FOR className noteText  { $$ = yy.addNote($3, $2); }
+    | NOTE noteText                { $$ = yy.addNote($2); }
     ;
 
 classDefStatement

packages/mermaid/src/diagrams/common/common.spec.ts

@@ -70,6 +70,31 @@ describe('Sanitize text', () => {
     });
     expect(result).not.toContain('javascript:alert(1)');
   });
+
+  it('should allow HTML tags in sandbox mode', () => {
+    const htmlStr = '<p>This is a <strong>bold</strong> text</p>';
+    const result = sanitizeText(htmlStr, {
+      securityLevel: 'sandbox',
+      flowchart: { htmlLabels: true },
+    });
+    expect(result).toContain('<p>');
+    expect(result).toContain('<strong>');
+    expect(result).toContain('</strong>');
+    expect(result).toContain('</p>');
+  });
+
+  it('should remove script tags in sandbox mode', () => {
+    const maliciousStr = '<p>Hello <script>alert(1)</script> world</p>';
+    const result = sanitizeText(maliciousStr, {
+      securityLevel: 'sandbox',
+      flowchart: { htmlLabels: true },
+    });
+    expect(result).not.toContain('<script>');
+    expect(result).not.toContain('alert(1)');
+    expect(result).toContain('<p>');
+    expect(result).toContain('Hello');
+    expect(result).toContain('world');
+  });
 });
 
 describe('generic parser', () => {

packages/mermaid/src/diagrams/common/common.ts

@@ -66,7 +66,7 @@ export const removeScript = (txt: string): string => {
 const sanitizeMore = (text: string, config: MermaidConfig) => {
   if (config.flowchart?.htmlLabels !== false) {
     const level = config.securityLevel;
-    if (level === 'antiscript' || level === 'strict') {
+    if (level === 'antiscript' || level === 'strict' || level === 'sandbox') {
       text = removeScript(text);
     } else if (level !== 'loose') {
       text = breakToPlaceholder(text);
@@ -333,7 +333,7 @@ const renderKatexUnsanitized = async (text: string, config: MermaidConfig): Prom
     return text.replace(katexRegex, 'MathML is unsupported in this environment.');
   }
 
-  if (includeLargeFeatures) {
+  if (injected.includeLargeFeatures) {
     const { default: katex } = await import('katex');
     const outputMode =
       config.forceLegacyMathML || (!isMathMLSupported() && config.legacyMathML)

packages/mermaid/src/diagrams/flowchart/parser/flow-arrows.spec.js

@@ -266,156 +266,4 @@ describe('[Arrows] when parsing', () => {
       });
     });
   });
-
-  describe('Issue #2492: Node names starting with o/x should not be consumed by arrow markers', () => {
-    it('should handle node names starting with "o" after plain arrows', function () {
-      const res = flow.parser.parse('graph TD;\ndev---ops;');
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert.get('dev').id).toBe('dev');
-      expect(vert.get('ops').id).toBe('ops');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('dev');
-      expect(edges[0].end).toBe('ops');
-      expect(edges[0].type).toBe('arrow_open');
-      expect(edges[0].stroke).toBe('normal');
-    });
-
-    it('should handle node names starting with "x" after plain arrows', function () {
-      const res = flow.parser.parse('graph TD;\ndev---xerxes;');
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert.get('dev').id).toBe('dev');
-      expect(vert.get('xerxes').id).toBe('xerxes');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('dev');
-      expect(edges[0].end).toBe('xerxes');
-      expect(edges[0].type).toBe('arrow_open');
-      expect(edges[0].stroke).toBe('normal');
-    });
-
-    it('should still support circle arrows with spaces', function () {
-      const res = flow.parser.parse('graph TD;\nA --o B;');
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert.get('A').id).toBe('A');
-      expect(vert.get('B').id).toBe('B');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('A');
-      expect(edges[0].end).toBe('B');
-      expect(edges[0].type).toBe('arrow_circle');
-      expect(edges[0].stroke).toBe('normal');
-    });
-
-    it('should still support cross arrows with spaces', function () {
-      const res = flow.parser.parse('graph TD;\nC --x D;');
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert.get('C').id).toBe('C');
-      expect(vert.get('D').id).toBe('D');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('C');
-      expect(edges[0].end).toBe('D');
-      expect(edges[0].type).toBe('arrow_cross');
-      expect(edges[0].stroke).toBe('normal');
-    });
-
-    it('should support circle arrows to uppercase nodes without spaces', function () {
-      const res = flow.parser.parse('graph TD;\nA--oB;');
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert.get('A').id).toBe('A');
-      expect(vert.get('B').id).toBe('B');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('A');
-      expect(edges[0].end).toBe('B');
-      expect(edges[0].type).toBe('arrow_circle');
-      expect(edges[0].stroke).toBe('normal');
-    });
-
-    it('should support cross arrows to uppercase nodes without spaces', function () {
-      const res = flow.parser.parse('graph TD;\nA--xBar;');
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert.get('A').id).toBe('A');
-      expect(vert.get('Bar').id).toBe('Bar');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('A');
-      expect(edges[0].end).toBe('Bar');
-      expect(edges[0].type).toBe('arrow_cross');
-      expect(edges[0].stroke).toBe('normal');
-    });
-
-    it('should handle thick arrows with lowercase node names starting with "o"', function () {
-      const res = flow.parser.parse('graph TD;\nalpha===omega;');
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert.get('alpha').id).toBe('alpha');
-      expect(vert.get('omega').id).toBe('omega');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('alpha');
-      expect(edges[0].end).toBe('omega');
-      expect(edges[0].type).toBe('arrow_open');
-      expect(edges[0].stroke).toBe('thick');
-    });
-
-    it('should handle dotted arrows with lowercase node names starting with "o"', function () {
-      const res = flow.parser.parse('graph TD;\nfoo-.-opus;');
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert.get('foo').id).toBe('foo');
-      expect(vert.get('opus').id).toBe('opus');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('foo');
-      expect(edges[0].end).toBe('opus');
-      expect(edges[0].type).toBe('arrow_open');
-      expect(edges[0].stroke).toBe('dotted');
-    });
-
-    it('should still support dotted circle arrows with spaces', function () {
-      const res = flow.parser.parse('graph TD;\nB -.-o C;');
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert.get('B').id).toBe('B');
-      expect(vert.get('C').id).toBe('C');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('B');
-      expect(edges[0].end).toBe('C');
-      expect(edges[0].type).toBe('arrow_circle');
-      expect(edges[0].stroke).toBe('dotted');
-    });
-
-    it('should still support thick cross arrows with spaces', function () {
-      const res = flow.parser.parse('graph TD;\nC ==x D;');
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert.get('C').id).toBe('C');
-      expect(vert.get('D').id).toBe('D');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('C');
-      expect(edges[0].end).toBe('D');
-      expect(edges[0].type).toBe('arrow_cross');
-      expect(edges[0].stroke).toBe('thick');
-    });
-  });
 });

packages/mermaid/src/diagrams/flowchart/parser/flow-arrows.spec.ts

@@ -1,129 +0,0 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import flow from './flowParser.js';
-import { FlowDB } from '../flowDb.js';
-
-describe('Flowchart arrow parsing - Issue #2492', () => {
-  let flowDb: FlowDB;
-
-  beforeEach(() => {
-    flowDb = new FlowDB();
-    flow.parser.yy = flowDb;
-    flowDb.clear();
-  });
-
-  describe('Solid arrows with markers', () => {
-    it('should parse --> followed by uppercase node', () => {
-      const diagram = 'graph TD\nA-->B';
-      expect(() => flow.parser.parse(diagram)).not.toThrow();
-    });
-
-    it('should parse --> followed by lowercase node', () => {
-      const diagram = 'graph TD\nA-->b';
-      expect(() => flow.parser.parse(diagram)).not.toThrow();
-    });
-
-    it('should parse --> followed by space', () => {
-      const diagram = 'graph TD\nA--> B';
-      expect(() => flow.parser.parse(diagram)).not.toThrow();
-    });
-
-    it('should parse --- followed by uppercase node (issue #2492)', () => {
-      const diagram = 'graph TD\ndev---Ops';
-      expect(() => flow.parser.parse(diagram)).not.toThrow();
-    });
-
-    it('should parse --- followed by lowercase node (issue #2492)', () => {
-      const diagram = 'graph TD\ndev---ops';
-      expect(() => flow.parser.parse(diagram)).not.toThrow();
-    });
-
-    it('should parse --o followed by uppercase node', () => {
-      const diagram = 'graph TD\nA--oB';
-      expect(() => flow.parser.parse(diagram)).not.toThrow();
-    });
-
-    it('should parse --o followed by lowercase node', () => {
-      const diagram = 'graph TD\nA--ob';
-      expect(() => flow.parser.parse(diagram)).not.toThrow();
-    });
-
-    it('should parse --x followed by uppercase node', () => {
-      const diagram = 'graph TD\nA--xBar';
-      expect(() => flow.parser.parse(diagram)).not.toThrow();
-    });
-
-    it('should parse --x followed by lowercase node', () => {
-      const diagram = 'graph TD\nA--xbar';
-      expect(() => flow.parser.parse(diagram)).not.toThrow();
-    });
-  });
-
-  describe('Thick arrows with markers', () => {
-    it('should parse ==> followed by uppercase node', () => {
-      const diagram = 'graph TD\nA==>B';
-      expect(() => flow.parser.parse(diagram)).not.toThrow();
-    });
-
-    it('should parse ==> followed by lowercase node', () => {
-      const diagram = 'graph TD\nA==>b';
-      expect(() => flow.parser.parse(diagram)).not.toThrow();
-    });
-
-    it('should parse === followed by lowercase node', () => {
-      const diagram = 'graph TD\nA===b';
-      expect(() => flow.parser.parse(diagram)).not.toThrow();
-    });
-  });
-
-  describe('Dotted arrows with markers', () => {
-    it('should parse -.-> followed by uppercase node', () => {
-      const diagram = 'graph TD\nA-.->B';
-      expect(() => flow.parser.parse(diagram)).not.toThrow();
-    });
-
-    it('should parse -.-> followed by lowercase node', () => {
-      const diagram = 'graph TD\nA-.->b';
-      expect(() => flow.parser.parse(diagram)).not.toThrow();
-    });
-
-    it('should parse -.- followed by lowercase node', () => {
-      const diagram = 'graph TD\nA-.-b';
-      expect(() => flow.parser.parse(diagram)).not.toThrow();
-    });
-  });
-
-  describe('Arrows with edge text', () => {
-    it('should parse arrow with edge text followed by uppercase node', () => {
-      const diagram = 'graph TD\nA-->|text|B';
-      expect(() => flow.parser.parse(diagram)).not.toThrow();
-    });
-
-    it('should parse arrow with edge text followed by lowercase node', () => {
-      const diagram = 'graph TD\nA-->|text|b';
-      expect(() => flow.parser.parse(diagram)).not.toThrow();
-    });
-
-    it('should parse multiple arrows with edge text (regression test)', () => {
-      const diagram = 'graph TD\nA-->|Get money|B\nB-->C\nC-->|One|D\nC-->|Two|E';
-      expect(() => flow.parser.parse(diagram)).not.toThrow();
-    });
-  });
-
-  describe('Arrows followed by digits', () => {
-    it('should parse --> followed by digit', () => {
-      const diagram = 'graph LR\n47-->48';
-      expect(() => flow.parser.parse(diagram)).not.toThrow();
-    });
-
-    it('should parse --> followed by node starting with digit', () => {
-      const diagram = 'graph LR\nA-->48(Node)';
-      expect(() => flow.parser.parse(diagram)).not.toThrow();
-    });
-
-    it('should parse complex diagram with digit node IDs (Sample 4)', () => {
-      const diagram =
-        'graph LR\n47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)\n37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)';
-      expect(() => flow.parser.parse(diagram)).not.toThrow();
-    });
-  });
-});

packages/mermaid/src/diagrams/flowchart/parser/flow.jison

@@ -152,29 +152,17 @@ that id.
 ","                          return 'COMMA';
 "*"                          return 'MULT';
 
-<INITIAL,edgeText>\s*[xo<]?\-\-+[-xo>]\s+                 { this.popState(); return 'LINK'; }
-<INITIAL>\s*[xo<]?\-\-+[-xo>](?=[A-Z])                    { return 'LINK'; }
-<INITIAL>\s*[xo<]?\-\-+[-xo>](?=[a-z])                    { return 'LINK'; }
-<INITIAL>\s*[xo<]?\-\-+[-xo>](?=[0-9])                    { return 'LINK'; }
-<INITIAL,edgeText>\s*[xo<]?\-\-+[-xo>](?=\s*\|)           { this.popState(); return 'LINK'; }
-<INITIAL>\s*[xo<]?\-\-\s*                              { this.pushState("edgeText"); return 'START_LINK'; }
-<edgeText>[^-]|\-(?!\-)+                              return 'EDGE_TEXT';
+<INITIAL,edgeText>\s*[xo<]?\-\-+[-xo>]\s*          { this.popState(); return 'LINK'; }
+<INITIAL>\s*[xo<]?\-\-\s*                          { this.pushState("edgeText"); return 'START_LINK'; }
+<edgeText>[^-]|\-(?!\-)+                           return 'EDGE_TEXT';
 
-<INITIAL,thickEdgeText>\s*[xo<]?\=\=+[=xo>]\s+            { this.popState(); return 'LINK'; }
-<INITIAL>\s*[xo<]?\=\=+[=xo>](?=[A-Z])                    { return 'LINK'; }
-<INITIAL>\s*[xo<]?\=\=+[=xo>](?=[a-z])                    { return 'LINK'; }
-<INITIAL>\s*[xo<]?\=\=+[=xo>](?=[0-9])                    { return 'LINK'; }
-<INITIAL,thickEdgeText>\s*[xo<]?\=\=+[=xo>](?=\s*\|)      { this.popState(); return 'LINK'; }
-<INITIAL>\s*[xo<]?\=\=\s*                              { this.pushState("thickEdgeText"); return 'START_LINK'; }
-<thickEdgeText>[^=]|\=(?!=)                            return 'EDGE_TEXT';
+<INITIAL,thickEdgeText>\s*[xo<]?\=\=+[=xo>]\s*      { this.popState(); return 'LINK'; }
+<INITIAL>\s*[xo<]?\=\=\s*                           { this.pushState("thickEdgeText"); return 'START_LINK'; }
+<thickEdgeText>[^=]|\=(?!=)                         return 'EDGE_TEXT';
 
-<INITIAL,dottedEdgeText>\s*[xo<]?\-?\.+\-[xo>]?\s+         { this.popState(); return 'LINK'; }
-<INITIAL>\s*[xo<]?\-?\.+\-[xo>]?(?=[A-Z])                  { return 'LINK'; }
-<INITIAL>\s*[xo<]?\-?\.+\-[xo>]?(?=[a-z])                  { return 'LINK'; }
-<INITIAL>\s*[xo<]?\-?\.+\-[xo>]?(?=[0-9])                  { return 'LINK'; }
-<INITIAL,dottedEdgeText>\s*[xo<]?\-?\.+\-[xo>]?(?=\s*\|)   { this.popState(); return 'LINK'; }
-<INITIAL>\s*[xo<]?\-\.\s*                               { this.pushState("dottedEdgeText"); return 'START_LINK'; }
-<dottedEdgeText>[^\.]|\.(?!-)                           return 'EDGE_TEXT';
+<INITIAL,dottedEdgeText>\s*[xo<]?\-?\.+\-[xo>]?\s*   { this.popState(); return 'LINK'; }
+<INITIAL>\s*[xo<]?\-\.\s*                            { this.pushState("dottedEdgeText"); return 'START_LINK'; }
+<dottedEdgeText>[^\.]|\.(?!-)                        return 'EDGE_TEXT';
 
 
 <*>\s*\~\~[\~]+\s*              return 'LINK';

packages/mermaid/src/diagrams/info/infoDb.ts

@@ -1,8 +1,7 @@
 import type { InfoFields, InfoDB } from './infoTypes.js';
-import packageJson from '../../../package.json' assert { type: 'json' };
 
 export const DEFAULT_INFO_DB: InfoFields = {
-  version: packageJson.version + (includeLargeFeatures ? '' : '-tiny'),
+  version: injected.version + (injected.includeLargeFeatures ? '' : '-tiny'),
 } as const;
 
 export const getVersion = (): string => DEFAULT_INFO_DB.version;

packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts

@@ -294,11 +294,25 @@ const drawCentralConnection = function (
   const actors = diagObj.db.getActors();
   const fromActor = actors.get(msg.from);
   const toActor = actors.get(msg.to);
-  const fromCenter = fromActor.x + fromActor.width / 2;
-  const toCenter = toActor.x + toActor.width / 2;
+  const isAutoNumberOn = msgModel.sequenceVisible;
+  let fromCenter = fromActor.x + fromActor.width / 2;
+  let toCenter = toActor.x + toActor.width / 2;
+
+  // Determine arrow direction: left-to-right or right-to-left
+  const isLeftToRight = fromCenter <= toCenter;
+  const isReverse = isReverseArrowType(msg, diagObj);
 
   const g = elem.append('g');
 
+  const CENTRAL_CONNECTION_CIRCLE_OFFSET = 16.5;
+
+  const getCircleOffset = (isLeftToRight: boolean, isReverse: boolean) => {
+    const baseOffset = isLeftToRight
+      ? CENTRAL_CONNECTION_CIRCLE_OFFSET
+      : -CENTRAL_CONNECTION_CIRCLE_OFFSET;
+    return isReverse ? -baseOffset : baseOffset;
+  };
+
   const drawCircle = (cx: number) => {
     g.append('circle')
       .attr('cx', cx)
@@ -311,6 +325,37 @@ const drawCentralConnection = function (
   const { CENTRAL_CONNECTION, CENTRAL_CONNECTION_REVERSE, CENTRAL_CONNECTION_DUAL } =
     diagObj.db.LINETYPE;
 
+  // Calculate circle position adjustments when autonumber is enabled
+  if (isAutoNumberOn) {
+    switch (msg.centralConnection) {
+      case CENTRAL_CONNECTION:
+        // Pattern: actor ->>() actor - circle at destination
+        if (isReverse) {
+          toCenter += getCircleOffset(isLeftToRight, true);
+        }
+        // No adjustment for normal arrows
+        break;
+
+      case CENTRAL_CONNECTION_REVERSE:
+        // Pattern: actor ()->> actor - circle at source
+        if (!isReverse) {
+          fromCenter += getCircleOffset(isLeftToRight, false);
+        }
+        // No adjustment for reverse arrows
+        break;
+
+      case CENTRAL_CONNECTION_DUAL:
+        // Pattern: actor ()->>() actor - circles at both ends
+        if (isReverse) {
+          toCenter += getCircleOffset(isLeftToRight, true);
+        } else {
+          fromCenter += getCircleOffset(isLeftToRight, false);
+        }
+        break;
+    }
+  }
+
+  // Draw circles based on central connection type
   switch (msg.centralConnection) {
     case CENTRAL_CONNECTION:
       drawCircle(toCenter);
@@ -438,12 +483,17 @@ const drawMessage = async function (diagram, msgModel, lineStartY: number, diagO
 
   let line;
   if (startx === stopx) {
+    const isAutoNumberOn = sequenceVisible || conf.showSequenceNumbers;
+    const isReverse = isReverseArrowType(msg, diagObj);
+    const isBidirectional = isBidirectionalArrowType(msg, diagObj);
+    const lineStartX = startx + (isAutoNumberOn && (isReverse || isBidirectional) ? 10 : 0);
+
     if (conf.rightAngles) {
       line = diagram
         .append('path')
         .attr(
           'd',
-          `M  ${startx},${lineStartY} H ${
+          `M  ${lineStartX},${lineStartY} H ${
             startx + common.getMax(conf.width / 2, textWidth / 2)
           } V ${lineStartY + 25} H ${startx}`
         );
@@ -453,11 +503,11 @@ const drawMessage = async function (diagram, msgModel, lineStartY: number, diagO
         .attr(
           'd',
           'M ' +
-            startx +
+            lineStartX +
             ',' +
             lineStartY +
             ' C ' +
-            (startx + 60) +
+            (lineStartX + 60) +
             ',' +
             (lineStartY - 10) +
             ' ' +
@@ -590,38 +640,75 @@ const drawMessage = async function (diagram, msgModel, lineStartY: number, diagO
       type === diagObj.db.LINETYPE.STICK_ARROW_BOTTOM_REVERSE ||
       type === diagObj.db.LINETYPE.STICK_ARROW_BOTTOM_REVERSE_DOTTED;
 
-    let x = 0;
-    if (isBidirectional || isReverseArrowType) {
-      const SEQUENCE_NUMBER_RADIUS = 6;
+    const SEQUENCE_NUMBER_RADIUS = 6;
+    const hasCentralConn = hasCentralConnection(msg, diagObj);
+    let lineStartX = startx;
+    let lineStopX = stopx;
 
+    if (isBidirectional) {
+      // For bidirectional arrows, adjust the start position
       if (startx < stopx) {
-        line.attr('x1', startx + 2 * SEQUENCE_NUMBER_RADIUS);
+        lineStartX = startx + SEQUENCE_NUMBER_RADIUS * 2;
       } else {
-        line.attr('x1', startx + SEQUENCE_NUMBER_RADIUS);
+        lineStartX = startx - SEQUENCE_NUMBER_RADIUS + (hasCentralConn ? -5 : 0);
+        lineStartX +=
+          msg?.centralConnection === diagObj.db.LINETYPE.CENTRAL_CONNECTION_DUAL ||
+          msg?.centralConnection === diagObj.db.LINETYPE.CENTRAL_CONNECTION_REVERSE
+            ? -7.5
+            : 0;
       }
-      x = 3.5;
+      line.attr('x1', lineStartX);
+    } else if (isReverseArrowType) {
+      // For reverse arrows, adjust the stop position (where the arrowhead is)
+      if (stopx > startx) {
+        lineStopX = stopx - 2 * SEQUENCE_NUMBER_RADIUS;
+      } else {
+        lineStopX = stopx - SEQUENCE_NUMBER_RADIUS;
+        lineStartX +=
+          msg?.centralConnection === diagObj.db.LINETYPE.CENTRAL_CONNECTION_DUAL ||
+          msg?.centralConnection === diagObj.db.LINETYPE.CENTRAL_CONNECTION_REVERSE
+            ? -7.5
+            : 0;
+      }
+      lineStopX += hasCentralConn ? 15 : 0;
+
+      line.attr('x2', lineStopX);
+      line.attr('x1', lineStartX);
+    } else {
+      line.attr('x1', startx + SEQUENCE_NUMBER_RADIUS);
+    }
+
+    // Calculate autonumber X position
+    let autonumberX = 0;
+    const isSelfMessage = startx === stopx;
+    const isLeftToRight = startx <= stopx;
+
+    if (isSelfMessage) {
+      autonumberX = msgModel.fromBounds + 1;
+    } else if (isReverseArrowType) {
+      autonumberX = isLeftToRight ? msgModel.toBounds - 1 : msgModel.fromBounds + 1;
+    } else {
+      autonumberX = isLeftToRight ? msgModel.fromBounds + 1 : msgModel.toBounds - 1;
     }
 
     diagram
       .append('line')
-      .attr('x1', startx)
+      .attr('x1', autonumberX)
       .attr('y1', lineStartY)
-      .attr('x2', startx)
+      .attr('x2', autonumberX)
       .attr('y2', lineStartY)
       .attr('stroke-width', 0)
-      .attr('marker-start', 'url(' + url + '#sequencenumber)')
-      .attr('transform', `translate(-${x}, 0)`);
+      .attr('marker-start', 'url(' + url + '#sequencenumber)');
 
     diagram
       .append('text')
-      .attr('x', startx)
+      .attr('x', autonumberX)
       .attr('y', lineStartY + 4)
       .attr('font-family', 'sans-serif')
       .attr('font-size', '12px')
       .attr('text-anchor', 'middle')
       .attr('class', 'sequenceNumber')
-      .text(sequenceIndex)
-      .attr('transform', `translate(-${x}, 0)`);
+      .text(sequenceIndex);
   }
 };
 
@@ -1648,7 +1735,8 @@ const calculateCentralConnectionOffset = function (msg, diagObj, isArrowToRight)
   }
 
   if (
-    msg.centralConnection === CENTRAL_CONNECTION_DUAL &&
+    (msg.centralConnection === CENTRAL_CONNECTION_REVERSE ||
+      msg.centralConnection === CENTRAL_CONNECTION_DUAL) &&
     (msg.type === BIDIRECTIONAL_SOLID || msg.type === BIDIRECTIONAL_DOTTED)
   ) {
     offset += isArrowToRight ? 0 : -CENTRAL_CONNECTION_BIDIRECTIONAL_OFFSET;
@@ -1657,6 +1745,47 @@ const calculateCentralConnectionOffset = function (msg, diagObj, isArrowToRight)
   return offset;
 };
 
+/**
+ * Check if a message is a reverse arrow type
+ * @param msg - The message object
+ * @param diagObj - The diagram object containing LINETYPE constants
+ * @returns True if the message is a reverse arrow type
+ */
+const isReverseArrowType = function (msg, diagObj) {
+  const {
+    SOLID_ARROW_TOP_REVERSE,
+    SOLID_ARROW_TOP_REVERSE_DOTTED,
+    SOLID_ARROW_BOTTOM_REVERSE,
+    SOLID_ARROW_BOTTOM_REVERSE_DOTTED,
+    STICK_ARROW_TOP_REVERSE,
+    STICK_ARROW_TOP_REVERSE_DOTTED,
+    STICK_ARROW_BOTTOM_REVERSE,
+    STICK_ARROW_BOTTOM_REVERSE_DOTTED,
+  } = diagObj.db.LINETYPE;
+
+  return [
+    SOLID_ARROW_TOP_REVERSE,
+    SOLID_ARROW_TOP_REVERSE_DOTTED,
+    SOLID_ARROW_BOTTOM_REVERSE,
+    SOLID_ARROW_BOTTOM_REVERSE_DOTTED,
+    STICK_ARROW_TOP_REVERSE,
+    STICK_ARROW_TOP_REVERSE_DOTTED,
+    STICK_ARROW_BOTTOM_REVERSE,
+    STICK_ARROW_BOTTOM_REVERSE_DOTTED,
+  ].includes(msg.type);
+};
+
+/**
+ * Check if a message is a bidirectional arrow type
+ * @param msg - The message object
+ * @param diagObj - The diagram object containing LINETYPE constants
+ * @returns True if the message is a bidirectional arrow type
+ */
+const isBidirectionalArrowType = function (msg, diagObj) {
+  const { BIDIRECTIONAL_SOLID, BIDIRECTIONAL_DOTTED } = diagObj.db.LINETYPE;
+  return [BIDIRECTIONAL_SOLID, BIDIRECTIONAL_DOTTED].includes(msg.type);
+};
+
 const buildMessageModel = function (msg, actors, diagObj) {
   if (
     ![

packages/mermaid/src/diagrams/sequence/svgDraw.js

@@ -681,8 +681,8 @@ const drawActorTypeControl = function (elem, actor, conf, isFooter) {
   rect.class = 'actor';
 
   const cx = actor.x + actor.width / 2;
-  const cy = actorY + 30;
-  const r = 18;
+  const cy = actorY + 32;
+  const r = 22;
 
   actElem
     .append('defs')
@@ -719,7 +719,7 @@ const drawActorTypeControl = function (elem, actor, conf, isFooter) {
     actor.description,
     actElem,
     rect.x,
-    rect.y + r + (isFooter ? 5 : 10),
+    rect.y + r + (!isFooter ? 12 : 5),
     rect.width,
     rect.height,
     { class: `actor ${ACTOR_MAN_FIGURE_CLASS}` },
@@ -737,7 +737,7 @@ const drawActorTypeEntity = function (elem, actor, conf, isFooter) {
   const line = elem.append('g').lower();
 
   const actElem = elem.append('g');
-  let cssClass = ACTOR_MAN_FIGURE_CLASS;
+  let cssClass = 'actor';
   if (isFooter) {
     cssClass += ` ${BOTTOM_ACTOR_CLASS}`;
   } else {
@@ -756,7 +756,7 @@ const drawActorTypeEntity = function (elem, actor, conf, isFooter) {
 
   const cx = actor.x + actor.width / 2;
   const cy = actorY + (!isFooter ? 25 : 10);
-  const r = 18;
+  const r = 22;
 
   actElem
     .append('circle')
@@ -772,7 +772,6 @@ const drawActorTypeEntity = function (elem, actor, conf, isFooter) {
     .attr('x2', cx + r)
     .attr('y1', cy + r)
     .attr('y2', cy + r)
-    .attr('stroke', '#333')
     .attr('stroke-width', 2);
 
   const bounds = actElem.node().getBBox();
@@ -799,7 +798,7 @@ const drawActorTypeEntity = function (elem, actor, conf, isFooter) {
     actor.description,
     actElem,
     rect.x,
-    rect.y + (!isFooter ? (cy + r - actorY) / 2 : (cy - actorY + r - 5) / 2),
+    rect.y + (!isFooter ? 30 : 15),
     rect.width,
     rect.height,
     { class: `actor ${ACTOR_MAN_FIGURE_CLASS}` },
@@ -807,9 +806,9 @@ const drawActorTypeEntity = function (elem, actor, conf, isFooter) {
   );
 
   if (!isFooter) {
-    actElem.attr('transform', `translate(${0}, ${r / 2})`);
+    actElem.attr('transform', `translate(${0}, ${r / 2 - 5})`);
   } else {
-    actElem.attr('transform', `translate(${0}, ${r / 2})`);
+    actElem.attr('transform', `translate(${0}, ${r})`);
   }
 
   return actor.height;
@@ -872,8 +871,8 @@ const drawActorTypeDatabase = function (elem, actor, conf, isFooter) {
   // Cylinder dimensions
   rect.x = actor.x;
   rect.y = actorY;
-  const w = rect.width / 4;
-  const h = rect.width / 4;
+  const w = rect.width / 3;
+  const h = rect.width / 3;
   const rx = w / 2;
   const ry = rx / (2.5 + w / 50);
 
@@ -897,17 +896,14 @@ const drawActorTypeDatabase = function (elem, actor, conf, isFooter) {
     .attr('stroke-width', 1)
     .attr('class', cssclass);
 
-  if (!isFooter) {
-    cylinderGroup.attr('transform', `translate(${w * 1.5}, ${(rect.height + ry) / 4})`);
-  } else {
-    cylinderGroup.attr('transform', `translate(${w * 1.5}, ${rect.height / 4 - 2 * ry})`);
-  }
+  cylinderGroup.attr('transform', `translate(${w}, ${ry})`);
+
   actor.rectData = rect;
   _drawTextCandidateFunc(conf, hasKatex(actor.description))(
     actor.description,
     g,
     rect.x,
-    rect.y + (!isFooter ? (rect.height + ry) / 2 : (rect.height + h) / 4),
+    rect.y + 35,
     rect.width,
     rect.height,
     { class: `actor ${ACTOR_BOX_CLASS}` },
@@ -927,7 +923,7 @@ const drawActorTypeBoundary = function (elem, actor, conf, isFooter) {
   const actorY = isFooter ? actor.stopy : actor.starty;
   const center = actor.x + actor.width / 2;
   const centerY = actorY + 80;
-  const radius = 30;
+  const radius = 22;
   const line = elem.append('g').lower();
 
   if (!isFooter) {
@@ -968,22 +964,22 @@ const drawActorTypeBoundary = function (elem, actor, conf, isFooter) {
     .append('line')
     .attr('id', 'actor-man-torso' + actorCnt)
     .attr('x1', actor.x + actor.width / 2 - radius * 2.5)
-    .attr('y1', actorY + 10)
+    .attr('y1', actorY + 12)
     .attr('x2', actor.x + actor.width / 2 - 15)
-    .attr('y2', actorY + 10);
+    .attr('y2', actorY + 12);
 
   actElem
     .append('line')
     .attr('id', 'actor-man-arms' + actorCnt)
     .attr('x1', actor.x + actor.width / 2 - radius * 2.5)
-    .attr('y1', actorY + 0) // starting Y
+    .attr('y1', actorY + 2) // starting Y
     .attr('x2', actor.x + actor.width / 2 - radius * 2.5)
-    .attr('y2', actorY + 20); // ending Y (26px long, adjust as needed)
+    .attr('y2', actorY + 22); // ending Y (26px long, adjust as needed)
 
   actElem
     .append('circle')
     .attr('cx', actor.x + actor.width / 2)
-    .attr('cy', actorY + 10)
+    .attr('cy', actorY + 12)
     .attr('r', radius);
 
   const bounds = actElem.node().getBBox();
@@ -993,7 +989,7 @@ const drawActorTypeBoundary = function (elem, actor, conf, isFooter) {
     actor.description,
     actElem,
     rect.x,
-    rect.y + (!isFooter ? radius / 2 + 3 : radius / 2 - 4),
+    rect.y + 15,
     rect.width,
     rect.height,
     { class: `actor ${ACTOR_MAN_FIGURE_CLASS}` },
@@ -1001,9 +997,9 @@ const drawActorTypeBoundary = function (elem, actor, conf, isFooter) {
   );
 
   if (!isFooter) {
-    actElem.attr('transform', `translate(0,${radius / 2 + 7})`);
+    actElem.attr('transform', `translate(0,${radius / 2 + 10})`);
   } else {
-    actElem.attr('transform', `translate(0,${radius / 2 + 7})`);
+    actElem.attr('transform', `translate(0,${radius / 2 + 10})`);
   }
 
   return actor.height;

packages/mermaid/src/docs/.vitepress/config.ts

@@ -1,6 +1,6 @@
 import type { MarkdownOptions } from 'vitepress';
 import { defineConfig } from 'vitepress';
-import packageJson from '../../../package.json' assert { type: 'json' };
+import packageJson from '../../../package.json' with { type: 'json' };
 import { addCanonicalUrls } from './canonical-urls.js';
 import MermaidExample from './mermaid-markdown-all.js';
 

packages/mermaid/src/docs/ecosystem/integrations-community.md

@@ -52,6 +52,8 @@ To add an integration to this list, see the [Integrations - create page](./integ
   - [GitHub Writer](https://github.com/ckeditor/github-writer)
   - [SVG diagram generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
 - [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) ✅
+- [GNU Octave](https://octave.org/) ✅
+  - [octave_mermaid_js](https://github.com/CNOCTAVE/octave_mermaid_js) ✅
 - [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
 - [MonsterWriter](https://www.monsterwriter.com/) ✅
 - [Joplin](https://joplinapp.org) ✅
@@ -267,6 +269,7 @@ Communication tools and platforms
   - [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin)
 - [Reveal CK](https://github.com/jedcn/reveal-ck)
   - [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin)
+- [speccharts: Turn your test suites into specification diagrams](https://github.com/arnaudrenaud/speccharts)
 - [Vitepress Plugin](https://github.com/sametcn99/vitepress-mermaid-renderer)
 
 <!--- cspell:ignore Blazorade HueHive --->

packages/mermaid/src/docs/ecosystem/mermaid-chart.md

@@ -41,7 +41,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun
 
 ## Plans
 
-- **Free** - A free plan that includes three diagrams.
+- **Free** - A free plan that includes six diagrams.
 
 - **Pro** - A paid plan that includes unlimited diagrams, access to the collaboration feature, and more.
 

packages/mermaid/src/docs/package.json

@@ -21,19 +21,19 @@
     "font-awesome": "^4.7.0",
     "jiti": "^2.4.2",
     "mermaid": "workspace:^",
-    "vue": "^3.5.21"
+    "vue": "^3.5.24"
   },
   "devDependencies": {
-    "@iconify-json/carbon": "^1.2.13",
-    "@unocss/reset": "^66.5.1",
-    "@vite-pwa/vitepress": "^1.0.0",
+    "@iconify-json/carbon": "^1.2.14",
+    "@unocss/reset": "^66.5.5",
+    "@vite-pwa/vitepress": "^1.0.1",
     "@vitejs/plugin-vue": "^6.0.1",
     "fast-glob": "^3.3.3",
     "https-localhost": "^4.7.1",
     "pathe": "^2.0.3",
-    "unocss": "^66.5.1",
-    "unplugin-vue-components": "^28.4.1",
-    "vite": "^7.0.7",
+    "unocss": "^66.5.5",
+    "unplugin-vue-components": "^28.8.0",
+    "vite": "^7.0.8",
     "vite-plugin-pwa": "^1.0.3",
     "vitepress": "1.6.4",
     "workbox-window": "^7.3.0"

packages/mermaid/src/mermaidAPI.ts

@@ -7,7 +7,6 @@ import { select } from 'd3';
 import { compile, serialize, stringify } from 'stylis';
 import DOMPurify from 'dompurify';
 import isEmpty from 'lodash-es/isEmpty.js';
-import packageJson from '../package.json' assert { type: 'json' };
 import { addSVGa11yTitleDescription, setA11yDiagramInfo } from './accessibility.js';
 import assignWithDepth from './assignWithDepth.js';
 import * as configApi from './config.js';
@@ -421,12 +420,12 @@ const render = async function (
   // -------------------------------------------------------------------------------
   // Draw the diagram with the renderer
   try {
-    await diag.renderer.draw(text, id, packageJson.version, diag);
+    await diag.renderer.draw(text, id, injected.version, diag);
   } catch (e) {
     if (config.suppressErrorRendering) {
       removeTempElements();
     } else {
-      errorRenderer.draw(text, id, packageJson.version);
+      errorRenderer.draw(text, id, injected.version);
     }
     throw e;
   }

packages/mermaid/src/rendering-util/render.ts

@@ -42,7 +42,7 @@ const registerDefaultLayoutLoaders = () => {
       name: 'dagre',
       loader: async () => await import('./layout-algorithms/dagre/index.js'),
     },
-    ...(includeLargeFeatures
+    ...(injected.includeLargeFeatures
       ? [
           {
             name: 'cose-bilkent',

packages/mermaid/src/type.d.ts

@@ -1,2 +1,5 @@
 // eslint-disable-next-line no-var
-declare var includeLargeFeatures: boolean;
+declare var injected: {
+  version: string;
+  includeLargeFeatures: boolean;
+};

packages/parser/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @mermaid-js/parser
 
+## 0.6.3
+
+### Patch Changes
+
+- [#7051](https://github.com/mermaid-js/mermaid/pull/7051) [`63df702`](https://github.com/mermaid-js/mermaid/commit/63df7021462e8dc1f2aaecb9c5febbbbde4c38e3) Thanks [@shubhamparikh2704](https://github.com/shubhamparikh2704)! - Add validation for negative values in pie charts:
+
+  Prevents crashes during parsing by validating values post-parsing.
+
+  Provides clearer, user-friendly error messages for invalid negative inputs.
+
 ## 0.6.2
 
 ### Patch Changes

packages/parser/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mermaid-js/parser",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "description": "MermaidJS parser",
   "author": "Yokozuna59",
   "contributors": [

packages/tiny/CHANGELOG.md

@@ -1,5 +1,30 @@
 # mermaid
 
+## 11.12.1
+
+### Patch Changes
+
+- [#7107](https://github.com/mermaid-js/mermaid/pull/7107) [`cbf8946`](https://github.com/mermaid-js/mermaid/commit/cbf89462acecac7a06f19843e8d48cb137df0753) Thanks [@shubhamparikh2704](https://github.com/shubhamparikh2704)! - fix: Updated the dependency dagre-d3-es to 7.0.13 to fix GHSA-cc8p-78qf-8p7q
+
+## 11.12.0
+
+### Minor Changes
+
+- [#6921](https://github.com/mermaid-js/mermaid/pull/6921) [`764b315`](https://github.com/mermaid-js/mermaid/commit/764b315dc16d0359add7c6b8e3ef7592e9bdc09c) Thanks [@quilicicf](https://github.com/quilicicf)! - feat: Add IDs in architecture diagrams
+
+### Patch Changes
+
+- [#6950](https://github.com/mermaid-js/mermaid/pull/6950) [`a957908`](https://github.com/mermaid-js/mermaid/commit/a9579083bfba367a4f4678547ec37ed7b61b9f5b) Thanks [@shubhamparikh2704](https://github.com/shubhamparikh2704)! - chore: Fix mindmap rendering in docs and apply tidytree layout
+
+- [#6826](https://github.com/mermaid-js/mermaid/pull/6826) [`1d36810`](https://github.com/mermaid-js/mermaid/commit/1d3681053b9168354e48e5763023b6305cd1ca72) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: Ensure edge label color is applied when using classDef with edge IDs
+
+- [#6945](https://github.com/mermaid-js/mermaid/pull/6945) [`d318f1a`](https://github.com/mermaid-js/mermaid/commit/d318f1a13cd7429334a29c70e449074ec1cb9f68) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: Resolve gantt chart crash due to invalid array length
+
+- [#6918](https://github.com/mermaid-js/mermaid/pull/6918) [`cfe9238`](https://github.com/mermaid-js/mermaid/commit/cfe9238882cbe95416db1feea3112456a71b6aaf) Thanks [@shubhamparikh2704](https://github.com/shubhamparikh2704)! - chore: revert marked dependency from ^15.0.7 to ^16.0.0
+  - Reverted marked package version to ^16.0.0 for better compatibility
+  - This is a dependency update that maintains API compatibility
+  - All tests pass with the updated version
+
 ## 11.11.0
 
 ### Minor Changes

packages/tiny/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mermaid-js/tiny",
-  "version": "11.11.0",
+  "version": "11.12.1",
   "description": "Tiny version of mermaid",
   "type": "commonjs",
   "main": "./dist/mermaid.tiny.js",

vite.config.ts

@@ -35,7 +35,8 @@ export default defineConfig({
   },
   define: {
     // Needs to be string
-    includeLargeFeatures: 'true',
+    'injected.includeLargeFeatures': 'true',
     'import.meta.vitest': 'undefined',
+    packageVersion: "'0.0.0'",
   },
 });