fix: icon and text color mismatch for root node

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

.changeset/brave-baths-behave.md

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

.changeset/brave-memes-flash.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Support edge animation in hand drawn look

.changeset/busy-mirrors-try.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Resolved parsing error where direction TD was not recognized within subgraphs

.changeset/chilly-words-march.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Correct viewBox casing and make SVGs responsive

.changeset/curly-apes-prove.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Improve participant parsing and prevent recursive loops on invalid syntax

.changeset/deep-pumas-run.md

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

.changeset/four-eyes-wish.md

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

.changeset/lazy-brooms-battle.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-feat: add alias support for new participant syntax of sequence diagrams

.changeset/moody-fans-try.md

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

.changeset/proud-colts-smell.md

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

.changeset/revert-marked-dependency.md

@@ -0,0 +1,9 @@
+---
+'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

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

.changeset/ten-plums-bet.md

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

.changeset/wide-lines-trade.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Mindmap rendering issue when the number of Level 2 nodes exceeds 11

.cspell/code-terms.txt

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

.cspell/libraries.txt

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

.esbuild/util.ts

@@ -71,9 +71,6 @@ 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}`),
@@ -85,13 +82,15 @@ export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
     chunkNames: `chunks/${outFileName}/[name]-[hash]`,
     define: {
       // This needs to be stringified for esbuild
-      'injected.includeLargeFeatures': `${includeLargeFeatures}`,
-      'injected.version': `'${version}'`,
+      includeLargeFeatures: `${includeLargeFeatures}`,
       '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@b4733b9419fd47bbfa1807b15627e17cd70b5b22
+        uses: peter-evans/create-pull-request@915d841dae6a4f191bb78faf61a257411d7be4d2
         with:
           add-paths: |
             cypress/timings.json

.github/workflows/release.yml

@@ -42,4 +42,5 @@ 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@4eaacf0543bb3f2c246792bd56e8cdeffafb205a # v2.4.3
+        uses: ossf/scorecard-action@05b42c624433fc40578a4040d5cf5e36ddca8cde # v2.4.2
         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_target:
+  pull_request:
     paths:
       - 'pnpm-lock.yaml'
       - '**/package.json'
@@ -15,8 +15,13 @@ jobs:
         uses: actions/checkout@v4
         with:
           fetch-depth: 0
-          ref: ${{ github.event.pull_request.head.sha }}
-          repository: ${{ github.event.pull_request.head.repo.full_name }}
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
 
       - name: Validate pnpm-lock.yaml entries
         id: validate # give this step an ID so we can reference its outputs
@@ -50,41 +55,16 @@ 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@v5
+        uses: peter-evans/create-or-update-comment@v4
         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,8 +78,6 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
     },
     define: {
       'import.meta.vitest': 'undefined',
-      'injected.includeLargeFeatures': 'true',
-      'injected.version': `'0.0.0'`,
     },
     resolve: {
       extensions: [],
@@ -96,6 +94,10 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
       }),
       ...visualizerOptions(packageName, core),
     ],
+    define: {
+      // Needs to be string
+      includeLargeFeatures: 'true',
+    },
   };
 
   if (watch && config.build) {

Dockerfile

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

cypress/helpers/util.ts

@@ -6,7 +6,6 @@ interface CypressConfig {
   listUrl?: boolean;
   listId?: string;
   name?: string;
-  screenshot?: boolean;
 }
 type CypressMermaidConfig = MermaidConfig & CypressConfig;
 
@@ -91,33 +90,20 @@ export const renderGraph = (
 
 export const openURLAndVerifyRendering = (
   url: string,
-  { screenshot = true, ...options }: CypressMermaidConfig,
+  options: CypressMermaidConfig,
   validation?: any
 ): void => {
   const name: string = (options.name ?? cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
 
   cy.visit(url);
   cy.window().should('have.property', 'rendered', true);
+  cy.get('svg').should('be.visible');
 
-  // 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 (validation) {
+    cy.get('svg').should(validation);
   }
 
-  if (screenshot) {
-    verifyScreenshot(name);
-  }
+  verifyScreenshot(name);
 };
 
 export const verifyScreenshot = (name: string): void => {

cypress/integration/rendering/c4.spec.js

@@ -114,28 +114,4 @@ 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,20 +562,6 @@ 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,20 +709,6 @@ 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 standalone numeric entities', () => {
+    it('should render ER diagram with numeric entity names and attributes', () => {
       imgSnapshotTest(
         `erDiagram
          PRODUCT ||--o{ ORDER-ITEM : has

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

@@ -1029,19 +1029,4 @@ graph TD
       }
     );
   });
-
-  it('FDH49: should add edge animation', () => {
-    renderGraph(
-      `
-      flowchart TD
-          A(["Start"]) L_A_B_0@--> B{"Decision"}
-          B --> C["Option A"] & D["Option B"]
-          style C stroke-width:4px,stroke-dasharray: 5
-          L_A_B_0@{ animation: slow } 
-          L_B_D_0@{ animation: fast }`,
-      { look: 'handDrawn', screenshot: false }
-    );
-    cy.get('path#L_A_B_0').should('have.class', 'edge-animation-slow');
-    cy.get('path#L_B_D_0').should('have.class', 'edge-animation-fast');
-  });
 });

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

@@ -79,18 +79,6 @@ 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/flowchart.spec.js

@@ -774,21 +774,6 @@ describe('Graph', () => {
       expect(svg).to.not.have.attr('style');
     });
   });
-  it('40: should add edge animation', () => {
-    renderGraph(
-      `
-      flowchart TD
-          A(["Start"]) L_A_B_0@--> B{"Decision"}
-          B --> C["Option A"] & D["Option B"]
-          style C stroke-width:4px,stroke-dasharray: 5
-          L_A_B_0@{ animation: slow } 
-          L_B_D_0@{ animation: fast }`,
-      { screenshot: false }
-    );
-    // Verify animation classes are applied to both edges
-    cy.get('path#L_A_B_0').should('have.class', 'edge-animation-slow');
-    cy.get('path#L_B_D_0').should('have.class', 'edge-animation-fast');
-  });
   it('58: handle styling with style expressions', () => {
     imgSnapshotTest(
       `
@@ -988,19 +973,4 @@ graph TD
       }
     );
   });
-
-  it('70: should render a subgraph with direction TD', () => {
-    imgSnapshotTest(
-      `
-      flowchart LR
-        subgraph A
-          direction TD
-          a --> b
-        end
-      `,
-      {
-        fontFamily: 'courier',
-      }
-    );
-  });
 });

cypress/integration/rendering/mindmap.spec.ts

@@ -247,31 +247,5 @@ root
       );
     });
   });
-  describe('Level 2 nodes exceeding 11', () => {
-    it('should render all Level 2 nodes correctly when there are more than 11', () => {
-      imgSnapshotTest(
-        `mindmap
-root
-  Node1
-  Node2
-  Node3
-  Node4
-  Node5
-  Node6
-  Node7
-  Node8
-  Node9
-  Node10
-  Node11
-  Node12
-  Node13
-  Node14
-  Node15`,
-        {},
-        undefined,
-        shouldHaveRoot
-      );
-    });
-  });
   /* The end */
 });

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

@@ -776,194 +776,5 @@ describe('Sequence Diagram Special Cases', () => {
         );
       });
     });
-
-    describe('Participant Stereotypes with Aliases', () => {
-      it('should render participants with stereotypes and aliases', () => {
-        imgSnapshotTest(
-          `sequenceDiagram
-          participant API@{ "type" : "boundary" } as Public API
-          participant Auth@{ "type" : "control" } as Auth Controller
-          participant DB@{ "type" : "database" } as User Database
-          participant Cache@{ "type" : "entity" } as Cache Layer
-          API ->> Auth: Authenticate request
-          Auth ->> DB: Query user
-          DB -->> Auth: User data
-          Auth ->> Cache: Store session
-          Cache -->> Auth: Confirmed
-          Auth -->> API: Token`,
-          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
-        );
-      });
-
-      it('should render actors with stereotypes and aliases', () => {
-        imgSnapshotTest(
-          `sequenceDiagram
-          actor U@{ "type" : "actor" } as End User
-          actor A@{ "type" : "boundary" } as API Gateway
-          actor S@{ "type" : "control" } as Service Layer
-          actor D@{ "type" : "database" } as Data Store
-          U ->> A: Send request
-          A ->> S: Process
-          S ->> D: Persist
-          D -->> S: Success
-          S -->> A: Response
-          A -->> U: Result`,
-          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
-        );
-      });
-
-      it('should render mixed participants and actors with stereotypes and aliases', () => {
-        imgSnapshotTest(
-          `sequenceDiagram
-          actor Client@{ "type" : "actor" } AS Mobile Client
-          participant Gateway@{ "type" : "boundary" } as API Gateway
-          participant OrderSvc@{ "type" : "control" } as Order Service
-          participant Queue@{ "type" : "queue" } as Message Queue
-          participant DB@{ "type" : "database" } as Order Database
-          participant Logs@{ "type" : "collections" } as Audit Logs
-          Client ->> Gateway: Place order
-          Gateway ->> OrderSvc: Validate order
-          OrderSvc ->> Queue: Queue for processing  as well
-          OrderSvc ->> DB: Save order
-          OrderSvc ->> Logs: Log transaction
-          Queue -->> OrderSvc: Processing started AS Well
-          DB -->> OrderSvc: Order saved
-          Logs -->> OrderSvc: Logged
-          OrderSvc -->> Gateway: Order confirmed
-          Gateway -->> Client: Confirmation`,
-          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
-        );
-      });
-
-      it('should render stereotypes with aliases in boxes', () => {
-        imgSnapshotTest(
-          `sequenceDiagram
-          box rgb(200,220,255) Frontend Layer
-            actor User@{ "type" : "actor" } as End User
-            participant UI@{ "type" : "boundary" } as User Interface
-          end
-          box rgb(255,220,200) Backend Layer
-            participant API@{ "type" : "boundary" } as REST API
-            participant Svc@{ "type" : "control" } as Business Logic
-          end
-          box rgb(220,255,200) Data Layer
-            participant DB@{ "type" : "database" } as Primary DB
-            participant Cache@{ "type" : "entity" } as Cache Store
-          end
-          User ->> UI: Click button
-          UI ->> API: HTTP request
-          API ->> Svc: Process
-          Svc ->> Cache: Check cache
-          Cache -->> Svc: Cache miss
-          Svc ->> DB: Query data
-          DB -->> Svc: Data
-          Svc ->> Cache: Update cache
-          Svc -->> API: Response
-          API -->> UI: Data
-          UI -->> User: Display`,
-          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
-        );
-      });
-
-      it('should render stereotypes with aliases and complex interactions', () => {
-        imgSnapshotTest(
-          `sequenceDiagram
-          participant Web@{ "type" : "boundary" } as Web Portal
-          participant Auth@{ "type" : "control" } as Auth Service
-          participant UserDB@{ "type" : "database" } as User DB
-          participant Queue@{ "type" : "queue" } as Event Queue
-          participant Audit@{ "type" : "collections" } as Audit Trail
-          Web ->> Auth: Login request
-          activate Auth
-          Auth ->> UserDB: Verify credentials
-          activate UserDB
-          UserDB -->> Auth: User found
-          deactivate UserDB
-          alt Valid credentials
-            Auth ->> Queue: Publish login event
-            Auth ->> Audit: Log success
-            par Parallel processing
-              Queue -->> Auth: Event queued
-              and
-              Audit -->> Auth: Logged
-            end
-            Auth -->> Web: Success token
-          else Invalid credentials
-            Auth ->> Audit: Log failure
-            Audit -->> Auth: Logged
-            Auth --x Web: Access denied
-          end
-          deactivate Auth
-          Note over Web,Audit: All interactions logged`,
-          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
-        );
-      });
-    });
-
-    describe('Participant Inline Alias in Config', () => {
-      it('should render participants with inline alias in config object', () => {
-        imgSnapshotTest(
-          `sequenceDiagram
-          participant API@{ "type" : "boundary", "alias": "Public API" }
-          participant Auth@{ "type" : "control", "alias": "Auth Service" }
-          participant DB@{ "type" : "database", "alias": "User DB" }
-          API ->> Auth: Login request
-          Auth ->> DB: Query user
-          DB -->> Auth: User data
-          Auth -->> API: Token`,
-          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
-        );
-      });
-
-      it('should render actors with inline alias in config object', () => {
-        imgSnapshotTest(
-          `sequenceDiagram
-          actor U@{ "type" : "actor", "alias": "End User" }
-          actor G@{ "type" : "boundary", "alias": "Gateway" }
-          actor S@{ "type" : "control", "alias": "Service" }
-          U ->> G: Request
-          G ->> S: Process
-          S -->> G: Response
-          G -->> U: Result`,
-          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
-        );
-      });
-
-      it('should handle mixed inline and external alias syntax', () => {
-        imgSnapshotTest(
-          `sequenceDiagram
-          participant A@{ "type" : "boundary", "alias": "Service A" }
-          participant B@{ "type" : "control" } as Service B
-          participant C@{ "type" : "database" }
-          A ->> B: Request
-          B ->> C: Query
-          C -->> B: Data
-          B -->> A: Response`,
-          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
-        );
-      });
-
-      it('should prioritize external alias over inline alias', () => {
-        imgSnapshotTest(
-          `sequenceDiagram
-          participant API@{ "type" : "boundary", "alias": "Internal Name" } as External Name
-          participant DB@{ "type" : "database", "alias": "Internal DB" } AS External DB
-          API ->> DB: Query
-          DB -->> API: Result`,
-          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
-        );
-      });
-
-      it('should render inline alias with only alias field (no type)', () => {
-        imgSnapshotTest(
-          `sequenceDiagram
-          participant API@{ "alias": "Public API" }
-          participant Auth@{ "alias": "Auth Service" }
-          API ->> Auth: Request
-          Auth -->> API: Response`,
-          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
-        );
-      });
-    });
   });
 });

cypress/platform/e2e.html

@@ -6,6 +6,14 @@
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
+    />
+    <link
+      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
+      rel="stylesheet"
+    />
     <style>
       svg:not(svg svg) {
         border: 2px solid darkred;

cypress/platform/yari.html

@@ -603,10 +603,6 @@
       </div>
       <div class="test">
         <pre class="mermaid">
-          ---
-            config:
-              theme: dark
-          ---
           classDiagram
             test ()--() test2
         </pre>

cypress/timings.json

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

demos/classchart.html

@@ -184,7 +184,6 @@
       }
       Admin --> Report : generates
     </pre>
-    <hr />
     <pre class="mermaid">
     classDiagram
       namespace Company.Project.Module {
@@ -241,20 +240,6 @@
       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/config/setup/mermaid/interfaces/LayoutData.md

@@ -10,7 +10,7 @@
 
 # Interface: LayoutData
 
-Defined in: [packages/mermaid/src/rendering-util/types.ts:168](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L168)
+Defined in: [packages/mermaid/src/rendering-util/types.ts:169](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L169)
 
 ## Indexable
 
@@ -22,7 +22,7 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:168](https://github.co
 
 > **config**: [`MermaidConfig`](MermaidConfig.md)
 
-Defined in: [packages/mermaid/src/rendering-util/types.ts:171](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L171)
+Defined in: [packages/mermaid/src/rendering-util/types.ts:172](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L172)
 
 ---
 
@@ -30,7 +30,7 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:171](https://github.co
 
 > **edges**: `Edge`\[]
 
-Defined in: [packages/mermaid/src/rendering-util/types.ts:170](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L170)
+Defined in: [packages/mermaid/src/rendering-util/types.ts:171](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L171)
 
 ---
 
@@ -38,4 +38,4 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:170](https://github.co
 
 > **nodes**: `Node`\[]
 
-Defined in: [packages/mermaid/src/rendering-util/types.ts:169](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L169)
+Defined in: [packages/mermaid/src/rendering-util/types.ts:170](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L170)

docs/config/setup/mermaid/interfaces/ParseOptions.md

@@ -10,7 +10,7 @@
 
 # Interface: ParseOptions
 
-Defined in: [packages/mermaid/src/types.ts:89](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L89)
+Defined in: [packages/mermaid/src/types.ts:88](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L88)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:89](https://github.com/mermaid-js/mer
 
 > `optional` **suppressErrors**: `boolean`
 
-Defined in: [packages/mermaid/src/types.ts:94](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L94)
+Defined in: [packages/mermaid/src/types.ts:93](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L93)
 
 If `true`, parse will return `false` instead of throwing error when the diagram is invalid.
 The `parseError` function will not be called.

docs/config/setup/mermaid/interfaces/ParseResult.md

@@ -10,7 +10,7 @@
 
 # Interface: ParseResult
 
-Defined in: [packages/mermaid/src/types.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L97)
+Defined in: [packages/mermaid/src/types.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L96)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:97](https://github.com/mermaid-js/mer
 
 > **config**: [`MermaidConfig`](MermaidConfig.md)
 
-Defined in: [packages/mermaid/src/types.ts:105](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L105)
+Defined in: [packages/mermaid/src/types.ts:104](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L104)
 
 The config passed as YAML frontmatter or directives
 
@@ -28,6 +28,6 @@ The config passed as YAML frontmatter or directives
 
 > **diagramType**: `string`
 
-Defined in: [packages/mermaid/src/types.ts:101](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L101)
+Defined in: [packages/mermaid/src/types.ts:100](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L100)
 
 The diagram type, e.g. 'flowchart', 'sequence', etc.

docs/config/setup/mermaid/interfaces/RenderResult.md

@@ -10,7 +10,7 @@
 
 # Interface: RenderResult
 
-Defined in: [packages/mermaid/src/types.ts:115](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L115)
+Defined in: [packages/mermaid/src/types.ts:114](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L114)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:115](https://github.com/mermaid-js/me
 
 > `optional` **bindFunctions**: (`element`) => `void`
 
-Defined in: [packages/mermaid/src/types.ts:133](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L133)
+Defined in: [packages/mermaid/src/types.ts:132](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L132)
 
 Bind function to be called after the svg has been inserted into the DOM.
 This is necessary for adding event listeners to the elements in the svg.
@@ -45,7 +45,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.
 
 > **diagramType**: `string`
 
-Defined in: [packages/mermaid/src/types.ts:123](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L123)
+Defined in: [packages/mermaid/src/types.ts:122](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L122)
 
 The diagram type, e.g. 'flowchart', 'sequence', etc.
 
@@ -55,6 +55,6 @@ The diagram type, e.g. 'flowchart', 'sequence', etc.
 
 > **svg**: `string`
 
-Defined in: [packages/mermaid/src/types.ts:119](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L119)
+Defined in: [packages/mermaid/src/types.ts:118](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L118)
 
 The svg code for the rendered graph.

docs/ecosystem/integrations-community.md

@@ -57,8 +57,6 @@ 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) ✅
@@ -274,7 +272,6 @@ Communication tools and platforms
   - [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin)
 - [Reveal CK](https://github.com/jedcn/reveal-ck)
   - [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin)
-- [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 six diagrams.
+- **Free** - A free plan that includes three diagrams.
 
 - **Pro** - A paid plan that includes unlimited diagrams, access to the collaboration feature, and more.
 

docs/syntax/classDiagram.md

@@ -21,7 +21,7 @@ title: Animal example
 classDiagram
     note "From Duck till Zebra"
     Animal <|-- Duck
-    note for Duck "can fly<br>can swim<br>can dive<br>can help in debugging"
+    note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
     Animal <|-- Fish
     Animal <|-- Zebra
     Animal : +int age
@@ -50,7 +50,7 @@ title: Animal example
 classDiagram
     note "From Duck till Zebra"
     Animal <|-- Duck
-    note for Duck "can fly<br>can swim<br>can dive<br>can help in debugging"
+    note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
     Animal <|-- Fish
     Animal <|-- Zebra
     Animal : +int age

docs/syntax/sequenceDiagram.md

@@ -196,11 +196,7 @@ sequenceDiagram
 
 ### Aliases
 
-The actor can have a convenient identifier and a descriptive label. Aliases can be defined in two ways: using external syntax with the `as` keyword, or inline within the configuration object.
-
-#### External Alias Syntax
-
-You can define an alias using the `as` keyword after the participant declaration:
+The actor can have a convenient identifier and a descriptive label.
 
 ```mermaid-example
 sequenceDiagram
@@ -218,78 +214,6 @@ sequenceDiagram
     J->>A: Great!
 ```
 
-The external alias syntax also works with participant stereotype configurations, allowing you to combine type specification with aliases:
-
-```mermaid-example
-sequenceDiagram
-    participant API@{ "type": "boundary" } as Public API
-    actor DB@{ "type": "database" } as User Database
-    participant Svc@{ "type": "control" } as Auth Service
-    API->>Svc: Authenticate
-    Svc->>DB: Query user
-    DB-->>Svc: User data
-    Svc-->>API: Token
-```
-
-```mermaid
-sequenceDiagram
-    participant API@{ "type": "boundary" } as Public API
-    actor DB@{ "type": "database" } as User Database
-    participant Svc@{ "type": "control" } as Auth Service
-    API->>Svc: Authenticate
-    Svc->>DB: Query user
-    DB-->>Svc: User data
-    Svc-->>API: Token
-```
-
-#### Inline Alias Syntax
-
-Alternatively, you can define an alias directly inside the configuration object using the `"alias"` field. This works with both `participant` and `actor` keywords:
-
-```mermaid-example
-sequenceDiagram
-    participant API@{ "type": "boundary", "alias": "Public API" }
-    participant Auth@{ "type": "control", "alias": "Auth Service" }
-    participant DB@{ "type": "database", "alias": "User Database" }
-    API->>Auth: Login request
-    Auth->>DB: Query user
-    DB-->>Auth: User data
-    Auth-->>API: Access token
-```
-
-```mermaid
-sequenceDiagram
-    participant API@{ "type": "boundary", "alias": "Public API" }
-    participant Auth@{ "type": "control", "alias": "Auth Service" }
-    participant DB@{ "type": "database", "alias": "User Database" }
-    API->>Auth: Login request
-    Auth->>DB: Query user
-    DB-->>Auth: User data
-    Auth-->>API: Access token
-```
-
-#### Alias Precedence
-
-When both inline alias (in the configuration object) and external alias (using `as` keyword) are provided, the **external alias takes precedence**:
-
-```mermaid-example
-sequenceDiagram
-    participant API@{ "type": "boundary", "alias": "Internal Name" } as External Name
-    participant DB@{ "type": "database", "alias": "Internal DB" } as External DB
-    API->>DB: Query
-    DB-->>API: Result
-```
-
-```mermaid
-sequenceDiagram
-    participant API@{ "type": "boundary", "alias": "Internal Name" } as External Name
-    participant DB@{ "type": "database", "alias": "Internal DB" } as External DB
-    API->>DB: Query
-    DB-->>API: Result
-```
-
-In the example above, "External Name" and "External DB" will be displayed, not "Internal Name" and "Internal DB".
-
 ### Actor Creation and Destruction (v10.3.0+)
 
 It is possible to create and destroy actors by messages. To do so, add a create or destroy directive before the message.

package.json

@@ -63,21 +63,21 @@
     ]
   },
   "devDependencies": {
-    "@applitools/eyes-cypress": "^3.56.4",
-    "@argos-ci/cypress": "^6.2.2",
+    "@applitools/eyes-cypress": "^3.55.2",
+    "@argos-ci/cypress": "^6.1.1",
     "@changesets/changelog-github": "^0.5.1",
     "@changesets/cli": "^2.29.7",
-    "@cspell/eslint-plugin": "^9.3.0",
-    "@cypress/code-coverage": "^3.14.7",
+    "@cspell/eslint-plugin": "^8.19.4",
+    "@cypress/code-coverage": "^3.14.6",
     "@eslint/js": "^9.26.0",
     "@rollup/plugin-typescript": "^12.1.4",
     "@types/cors": "^2.8.19",
-    "@types/express": "^5.0.5",
+    "@types/express": "^5.0.3",
     "@types/js-yaml": "^4.0.9",
     "@types/jsdom": "^21.1.7",
     "@types/lodash": "^4.17.20",
     "@types/mdast": "^4.0.4",
-    "@types/node": "^22.19.1",
+    "@types/node": "^22.18.6",
     "@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.3.2",
+    "cspell": "^9.2.1",
     "cypress": "^14.5.4",
     "cypress-image-snapshot": "^4.0.1",
-    "cypress-split": "^1.24.25",
-    "esbuild": "^0.25.12",
+    "cypress-split": "^1.24.23",
+    "esbuild": "^0.25.10",
     "eslint": "^9.26.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-cypress": "^5.2.0",
+    "eslint-plugin-cypress": "^4.3.0",
     "eslint-plugin-html": "^8.1.3",
-    "eslint-plugin-jest": "^29.0.1",
-    "eslint-plugin-jsdoc": "^61.1.12",
+    "eslint-plugin-jest": "^28.14.0",
+    "eslint-plugin-jsdoc": "^50.8.0",
     "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": "^62.0.0",
+    "eslint-plugin-unicorn": "^59.0.1",
     "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.5",
-    "start-server-and-test": "^2.1.3",
+    "rollup-plugin-visualizer": "^6.0.3",
+    "start-server-and-test": "^2.1.2",
     "tslib": "^2.8.1",
-    "tsx": "^4.20.6",
+    "tsx": "^4.20.5",
     "typescript": "~5.7.3",
     "typescript-eslint": "^8.38.0",
-    "vite": "^7.0.8",
+    "vite": "^7.0.7",
     "vite-plugin-istanbul": "^7.0.0",
     "vitest": "^3.2.4"
   },

packages/mermaid-layout-elk/package.json

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

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

@@ -19,9 +19,7 @@
     "mermaid",
     "layout"
   ],
-  "scripts": {
-    "clean": "rimraf dist"
-  },
+  "scripts": {},
   "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.6"
+    "@zenuml/core": "^3.41.4"
   },
   "devDependencies": {
     "mermaid": "workspace:^"

packages/mermaid/CHANGELOG.md

@@ -1,30 +1,5 @@
 # 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.12.1",
+  "version": "11.11.0",
   "description": "Markdown-ish syntax for generating flowcharts, mindmaps, sequence diagrams, class diagrams, gantt charts, git graphs and more.",
   "type": "module",
   "module": "./dist/mermaid.core.mjs",
@@ -76,10 +76,10 @@
     "cytoscape-fcose": "^2.2.0",
     "d3": "^7.9.0",
     "d3-sankey": "^0.12.3",
-    "dagre-d3-es": "7.0.13",
-    "dayjs": "^1.11.19",
-    "dompurify": "^3.3.0",
-    "katex": "^0.16.25",
+    "dagre-d3-es": "7.0.11",
+    "dayjs": "^1.11.18",
+    "dompurify": "^3.2.5",
+    "katex": "^0.16.22",
     "khroma": "^2.1.0",
     "lodash-es": "^4.17.21",
     "marked": "^16.3.0",
@@ -89,11 +89,11 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@adobe/jsonschema2md": "^8.0.8",
+    "@adobe/jsonschema2md": "^8.0.5",
     "@iconify/types": "^2.0.0",
     "@types/cytoscape": "^3.21.9",
-    "@types/cytoscape-fcose": "^2.2.5",
-    "@types/d3-sankey": "^0.12.5",
+    "@types/cytoscape-fcose": "^2.2.4",
+    "@types/d3-sankey": "^0.12.4",
     "@types/d3-scale": "^4.0.9",
     "@types/d3-scale-chromatic": "^3.1.0",
     "@types/d3-selection": "^3.0.11",
@@ -101,7 +101,7 @@
     "@types/jsdom": "^21.1.7",
     "@types/katex": "^0.16.7",
     "@types/lodash-es": "^4.17.12",
-    "@types/micromatch": "^4.0.10",
+    "@types/micromatch": "^4.0.9",
     "@types/stylis": "^4.2.7",
     "@types/uuid": "^10.0.0",
     "ajv": "^8.17.1",
@@ -121,9 +121,9 @@
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.1",
     "rimraf": "^6.0.1",
-    "start-server-and-test": "^2.1.3",
+    "start-server-and-test": "^2.1.2",
     "type-fest": "^4.41.0",
-    "typedoc": "^0.28.14",
+    "typedoc": "^0.28.13",
     "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 (injected.includeLargeFeatures) {
+  if (includeLargeFeatures) {
     registerLazyLoadedDiagrams(flowchartElk, mindmap, architecture);
   }
 

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

@@ -1,58 +0,0 @@
-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_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();}
+<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();}
 
 <attribute>",,"                           { return 'ATTRIBUTE_EMPTY';}
 <attribute>","                            { }

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

@@ -17,7 +17,6 @@ import type {
   ClassRelation,
   ClassNode,
   ClassNote,
-  ClassNoteMap,
   ClassMap,
   NamespaceMap,
   NamespaceNode,
@@ -34,16 +33,15 @@ const sanitizeText = (txt: string) => common.sanitizeText(txt, getConfig());
 
 export class ClassDB implements DiagramDB {
   private relations: ClassRelation[] = [];
-  private classes: ClassMap = new Map<string, ClassNode>();
+  private classes = new Map<string, ClassNode>();
   private readonly styleClasses = new Map<string, StyleClass>();
-  private notes: ClassNoteMap = new Map<string, ClassNote>();
+  private notes: ClassNote[] = [];
   private interfaces: Interface[] = [];
   // private static classCounter = 0;
   private namespaces = new Map<string, NamespaceNode>();
   private namespaceCounter = 0;
 
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
-  private functions: Function[] = [];
+  private functions: any[] = [];
 
   constructor() {
     this.functions.push(this.setupToolTips.bind(this));
@@ -126,7 +124,7 @@ export class ClassDB implements DiagramDB {
       annotations: [],
       styles: [],
       domId: MERMAID_DOM_ID_PREFIX + name + '-' + classCounter,
-    });
+    } as ClassNode);
 
     classCounter++;
   }
@@ -157,12 +155,12 @@ export class ClassDB implements DiagramDB {
 
   public clear() {
     this.relations = [];
-    this.classes = new Map<string, ClassNode>();
-    this.notes = new Map<string, ClassNote>();
+    this.classes = new Map();
+    this.notes = [];
     this.interfaces = [];
     this.functions = [];
     this.functions.push(this.setupToolTips.bind(this));
-    this.namespaces = new Map<string, NamespaceNode>();
+    this.namespaces = new Map();
     this.namespaceCounter = 0;
     this.direction = 'TB';
     commonClear();
@@ -180,12 +178,7 @@ export class ClassDB implements DiagramDB {
     return this.relations;
   }
 
-  public getNote(id: string | number): ClassNote {
-    const key = typeof id === 'number' ? `note${id}` : id;
-    return this.notes.get(key)!;
-  }
-
-  public getNotes(): ClassNoteMap {
+  public getNotes() {
     return this.notes;
   }
 
@@ -286,19 +279,16 @@ export class ClassDB implements DiagramDB {
     }
   }
 
-  public addNote(text: string, className: string): string {
-    const index = this.notes.size;
+  public addNote(text: string, className: string) {
     const note = {
-      id: `note${index}`,
+      id: `note${this.notes.length}`,
       class: className,
       text: text,
-      index: index,
     };
-    this.notes.set(note.id, note);
-    return note.id;
+    this.notes.push(note);
   }
 
-  public cleanupLabel(label: string): string {
+  public cleanupLabel(label: string) {
     if (label.startsWith(':')) {
       label = label.substring(1);
     }
@@ -364,7 +354,7 @@ export class ClassDB implements DiagramDB {
     });
   }
 
-  public getTooltip(id: string, namespace?: string): string | undefined {
+  public getTooltip(id: string, namespace?: string) {
     if (namespace && this.namespaces.has(namespace)) {
       return this.namespaces.get(namespace)!.classes.get(id)!.tooltip;
     }
@@ -544,11 +534,10 @@ export class ClassDB implements DiagramDB {
 
     this.namespaces.set(id, {
       id: id,
-      classes: new Map<string, ClassNode>(),
-      notes: new Map<string, ClassNote>(),
-      children: new Map<string, NamespaceNode>(),
+      classes: new Map(),
+      children: {},
       domId: MERMAID_DOM_ID_PREFIX + id + '-' + this.namespaceCounter,
-    });
+    } as NamespaceNode);
 
     this.namespaceCounter++;
   }
@@ -566,23 +555,16 @@ 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[], noteNames: string[]) {
+  public addClassesToNamespace(id: string, classNames: string[]) {
     if (!this.namespaces.has(id)) {
       return;
     }
     for (const name of classNames) {
       const { className } = this.splitClassNameAndType(name);
-      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);
+      this.classes.get(className)!.parent = id;
+      this.namespaces.get(id)!.classes.set(className, this.classes.get(className)!);
     }
   }
 
@@ -635,32 +617,36 @@ export class ClassDB implements DiagramDB {
     const edges: Edge[] = [];
     const config = getConfig();
 
-    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 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: ['fill: none', 'stroke: black'],
+          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);
+    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 note of this.notes.values()) {
+    let cnt = 0;
+    for (const note of this.notes) {
+      cnt++;
       const noteNode: Node = {
         id: note.id,
         label: note.text,
@@ -674,15 +660,14 @@ 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${note.index}`,
+          id: `edgeNote${cnt}`,
           start: note.id,
           end: noteClassId,
           type: 'normal',
@@ -712,7 +697,7 @@ export class ClassDB implements DiagramDB {
       nodes.push(interfaceNode);
     }
 
-    let cnt = 0;
+    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.getNote(0).text).toEqual(`This is a keyword: ${keyword}. It truly is.`);
+      expect(classDb.getNotes()[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.getNote(0).text).toEqual(`${keyword}`);
+        expect(classDb.getNotes()[0].text).toEqual(`${keyword}`);
       }
     );
 
@@ -441,7 +441,7 @@ class C13["With Città foreign language"]
                    `;
 
       parser.parse(str);
-      expect(classDb.getNote(0).text).toEqual(`This is a keyword: ${keyword}. It truly is.`);
+      expect(classDb.getNotes()[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.getNote(0).text).toEqual(`${keyword}`);
+        expect(classDb.getNotes()[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, ClassMap, ClassNoteMap, NamespaceMap } from './classTypes.js';
+import type { ClassRelation, ClassNote, ClassMap, NamespaceMap } from './classTypes.js';
 import type { EdgeData } from '../../types.js';
 
 const sanitizeText = (txt: string) => common.sanitizeText(txt, getConfig());
@@ -65,9 +65,6 @@ 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);
   });
@@ -147,74 +144,69 @@ export const addClasses = function (
  * @param classes - Classes
  */
 export const addNotes = function (
-  notes: ClassNoteMap,
+  notes: ClassNote[],
   g: graphlib.Graph,
   startEdgeId: number,
-  classes: ClassMap,
-  parent?: string
+  classes: ClassMap
 ) {
   log.info(notes);
 
-  [...notes.values()]
-    .filter((note) => note.parent === parent)
-    .forEach(function (vertex) {
-      const cssNoteStr = '';
+  notes.forEach(function (note, i) {
+    const vertex = note;
 
-      const styles = { labelStyle: '', style: '' };
+    const cssNoteStr = '';
 
-      const vertexText = vertex.text;
+    const styles = { labelStyle: '', style: '' };
 
-      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 vertexText = vertex.text;
 
-      if (parent) {
-        g.setParent(vertex.id, parent);
-      }
+    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 (!vertex.class || !classes.has(vertex.class)) {
-        return;
-      }
-      const edgeId = startEdgeId + vertex.index;
+    if (!vertex.class || !classes.has(vertex.class)) {
+      return;
+    }
+    const edgeId = startEdgeId + i;
 
-      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);
+  });
 };
 
 /**
@@ -337,7 +329,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: ClassNoteMap = diagObj.db.getNotes();
+  const notes: ClassNote[] = 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().values();
+  const notes = diagObj.db.getNotes();
   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: 'classBox';
+  shape: string;
   text: string;
   cssClasses: string;
   methods: ClassMember[];
@@ -149,8 +149,6 @@ export interface ClassNote {
   id: string;
   class: string;
   text: string;
-  index: number;
-  parent?: string;
 }
 
 export interface ClassRelation {
@@ -179,7 +177,6 @@ export interface NamespaceNode {
   id: string;
   domId: string;
   classes: ClassMap;
-  notes: ClassNoteMap;
   children: NamespaceMap;
 }
 
@@ -190,5 +187,4 @@ 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[0], $3[1]); }
-    | namespaceIdentifier STRUCT_START NEWLINE classStatements STRUCT_STOP  { yy.addClassesToNamespace($1, $4[0], $4[1]); }
+    : namespaceIdentifier STRUCT_START classStatements STRUCT_STOP          { yy.addClassesToNamespace($1, $3); }
+    | namespaceIdentifier STRUCT_START NEWLINE classStatements STRUCT_STOP  { yy.addClassesToNamespace($1, $4); }
     ;
 
 namespaceIdentifier
@@ -284,12 +284,9 @@ namespaceIdentifier
     ;
 
 classStatements
-    : 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                            {$$=[$1]}
+    | classStatement NEWLINE                    {$$=[$1]}
+    | classStatement NEWLINE classStatements    {$3.unshift($1); $$=$3}
     ;
 
 classStatement
@@ -336,8 +333,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/class/styles.js

@@ -13,30 +13,6 @@ const getStyles = (options) =>
 
 }
 
-  .cluster-label text {
-    fill: ${options.titleColor};
-  }
-  .cluster-label span {
-    color: ${options.titleColor};
-  }
-  .cluster-label span p {
-    background-color: transparent;
-  }
-
-  .cluster rect {
-    fill: ${options.clusterBkg};
-    stroke: ${options.clusterBorder};
-    stroke-width: 1px;
-  }
-
-  .cluster text {
-    fill: ${options.titleColor};
-  }
-
-  .cluster span {
-    color: ${options.titleColor};
-  }
-
 .nodeLabel, .edgeLabel {
   color: ${options.classText};
 }

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

@@ -70,31 +70,6 @@ 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' || level === 'sandbox') {
+    if (level === 'antiscript' || level === 'strict') {
       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 (injected.includeLargeFeatures) {
+  if (includeLargeFeatures) {
     const { default: katex } = await import('katex');
     const outputMode =
       config.forceLegacyMathML || (!isMathMLSupported() && config.legacyMathML)

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

@@ -140,7 +140,6 @@ that id.
 .*direction\s+BT[^\n]*       return 'direction_bt';
 .*direction\s+RL[^\n]*       return 'direction_rl';
 .*direction\s+LR[^\n]*       return 'direction_lr';
-.*direction\s+TD[^\n]*       return 'direction_td';
 
 [^\s\"]+\@(?=[^\{\"])               { return 'LINK_ID'; }
 [0-9]+                       return 'NUM';
@@ -627,8 +626,6 @@ direction
     { $$={stmt:'dir', value:'RL'};}
     | direction_lr
     { $$={stmt:'dir', value:'LR'};}
-    | direction_td
-    { $$={stmt:'dir', value:'TD'};}
     ;
 
 %%

packages/mermaid/src/diagrams/flowchart/parser/subgraph.spec.js

@@ -309,21 +309,4 @@ describe('when parsing subgraphs', function () {
     expect(subgraphA.nodes).toContain('a');
     expect(subgraphA.nodes).not.toContain('c');
   });
-  it('should correctly parse direction TD inside a subgraph', function () {
-    const res = flow.parser.parse(`
-      graph LR
-        subgraph WithTD
-          direction TD
-          A1 --> A2
-        end
-    `);
-
-    const subgraphs = flow.parser.yy.getSubGraphs();
-    expect(subgraphs.length).toBe(1);
-    const subgraph = subgraphs[0];
-
-    expect(subgraph.dir).toBe('TD');
-    expect(subgraph.nodes).toContain('A1');
-    expect(subgraph.nodes).toContain('A2');
-  });
 });

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

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

packages/mermaid/src/diagrams/mindmap/mindmapDb.getData.test.ts

@@ -293,37 +293,5 @@ describe('MindmapDb getData function', () => {
       expect(edgeA1_aaa.section).toBe(1);
       expect(edgeA_a2.section).toBe(2);
     });
-
-    it('should wrap section numbers when there are more than 11 level 2 nodes', () => {
-      db.addNode(0, 'root', 'Example', 0);
-
-      for (let i = 1; i <= 15; i++) {
-        db.addNode(1, `child${i}`, `${i}`, 0);
-      }
-
-      const result = db.getData();
-
-      expect(result.nodes).toHaveLength(16);
-
-      const child1 = result.nodes.find((n) => n.label === '1') as MindmapLayoutNode;
-      const child11 = result.nodes.find((n) => n.label === '11') as MindmapLayoutNode;
-      const child12 = result.nodes.find((n) => n.label === '12') as MindmapLayoutNode;
-      const child13 = result.nodes.find((n) => n.label === '13') as MindmapLayoutNode;
-      const child14 = result.nodes.find((n) => n.label === '14') as MindmapLayoutNode;
-      const child15 = result.nodes.find((n) => n.label === '15') as MindmapLayoutNode;
-
-      expect(child1.section).toBe(0);
-      expect(child11.section).toBe(10);
-
-      expect(child12.section).toBe(0);
-      expect(child13.section).toBe(1);
-      expect(child14.section).toBe(2);
-      expect(child15.section).toBe(3);
-
-      expect(child12.cssClasses).toBe('mindmap-node section-0');
-      expect(child13.cssClasses).toBe('mindmap-node section-1');
-      expect(child14.cssClasses).toBe('mindmap-node section-2');
-      expect(child15.cssClasses).toBe('mindmap-node section-3');
-    });
   });
 });

packages/mermaid/src/diagrams/mindmap/mindmapDb.ts

@@ -7,7 +7,6 @@ import type { MindmapNode } from './mindmapTypes.js';
 import defaultConfig from '../../defaultConfig.js';
 import type { LayoutData, Node, Edge } from '../../rendering-util/types.js';
 import { getUserDefinedConfig } from '../../config.js';
-import { MAX_SECTIONS } from './svgDraw.js';
 
 // Extend Node type for mindmap-specific properties
 export type MindmapLayoutNode = Node & {
@@ -204,7 +203,7 @@ export class MindmapDB {
     // For other nodes, inherit parent's section number
     if (node.children) {
       for (const [index, child] of node.children.entries()) {
-        const childSectionNumber = node.level === 0 ? index % (MAX_SECTIONS - 1) : sectionNumber;
+        const childSectionNumber = node.level === 0 ? index : sectionNumber;
         this.assignSections(child, childSectionNumber);
       }
     }

packages/mermaid/src/diagrams/mindmap/mindmapIconHelper.ts

@@ -0,0 +1,223 @@
+import { log } from '../../logger.js';
+import type { D3Selection } from '../../types.js';
+import type { Node } from '../../rendering-util/types.js';
+import { getIconSVG, isIconAvailable } from '../../rendering-util/icons.js';
+
+export interface MindmapIconConfig {
+  iconSize: number;
+  iconPadding: number;
+  shapeType: 'circle' | 'rect' | 'rounded' | 'bang' | 'cloud' | 'hexagon' | 'default';
+}
+
+export interface MindmapDimensions {
+  width: number;
+  height: number;
+  labelOffset: { x: number; y: number };
+}
+
+/**
+ * Get icon configuration for different mindmap shape types
+ */
+export function getMindmapIconConfig(shapeType: string): MindmapIconConfig {
+  const baseConfig = {
+    iconSize: 30,
+    iconPadding: 15,
+    shapeType: shapeType as MindmapIconConfig['shapeType'],
+  };
+
+  switch (shapeType) {
+    case 'bang':
+      return { ...baseConfig, iconPadding: 1 };
+    case 'rect':
+    case 'default':
+      return { ...baseConfig, iconPadding: 10 };
+    default:
+      return baseConfig;
+  }
+}
+
+/**
+ * Calculate dimensions and label positioning for mindmap nodes with icons
+ */
+export function calculateMindmapDimensions(
+  node: Node,
+  bbox: any,
+  baseWidth: number,
+  baseHeight: number,
+  basePadding: number,
+  config: MindmapIconConfig
+): MindmapDimensions {
+  const hasIcon = Boolean(node.icon);
+
+  if (!hasIcon) {
+    return {
+      width: baseWidth,
+      height: baseHeight,
+      labelOffset: { x: -bbox.width / 2, y: -bbox.height / 2 },
+    };
+  }
+
+  const { iconSize, iconPadding, shapeType } = config;
+  let width = baseWidth;
+  let height = baseHeight;
+  let labelXOffset = -bbox.width / 2;
+  const labelYOffset = -bbox.height / 2;
+
+  switch (shapeType) {
+    case 'circle': {
+      const totalWidthNeeded = bbox.width + iconSize + iconPadding * 2;
+      const minRadiusWithIcon = totalWidthNeeded / 2 + basePadding;
+      const radius = Math.max(baseWidth / 2, minRadiusWithIcon);
+      width = radius * 2;
+      height = radius * 2;
+      labelXOffset = -radius + iconSize + iconPadding;
+      break;
+    }
+
+    case 'rect':
+    case 'rounded':
+    case 'default': {
+      const minWidthWithIcon = bbox.width + iconSize + iconPadding * 2 + basePadding * 2;
+      width = Math.max(baseWidth, minWidthWithIcon);
+      height = Math.max(baseHeight, iconSize + basePadding * 2);
+
+      const availableTextSpace = width - iconSize - iconPadding * 2;
+      labelXOffset = -width / 2 + iconSize + iconPadding + availableTextSpace / 2 - bbox.width / 2;
+      break;
+    }
+
+    case 'bang':
+    case 'cloud': {
+      const minWidthWithIcon = bbox.width + iconSize + iconPadding * 2 + basePadding;
+      width = Math.max(baseWidth, minWidthWithIcon);
+      height = Math.max(baseHeight, iconSize + basePadding);
+
+      const availableTextSpace = width - iconSize - iconPadding * 2;
+      labelXOffset = -width / 2 + iconSize + iconPadding + availableTextSpace / 2 - bbox.width / 2;
+      break;
+    }
+
+    default: {
+      const minWidthWithIcon = bbox.width + iconSize + iconPadding * 2 + basePadding * 2;
+      width = Math.max(baseWidth, minWidthWithIcon);
+      height = Math.max(baseHeight, iconSize + basePadding * 2);
+
+      const availableTextSpace = width - iconSize - iconPadding * 2;
+      labelXOffset = -width / 2 + iconSize + iconPadding + availableTextSpace / 2 - bbox.width / 2;
+      break;
+    }
+  }
+
+  return {
+    width,
+    height,
+    labelOffset: { x: labelXOffset, y: labelYOffset },
+  };
+}
+
+/**
+ * Insert mindmap icon into the shape SVG element
+ */
+export async function insertMindmapIcon(
+  parentElement: D3Selection<SVGGraphicsElement>,
+  node: Node,
+  config: MindmapIconConfig
+): Promise<void> {
+  if (!node.icon) {
+    return;
+  }
+
+  const { iconSize, iconPadding, shapeType } = config;
+  const section = node.section === undefined ? -1 : node.section;
+
+  let iconName = node.icon;
+  const isCssFormat = iconName.includes(' ');
+
+  if (isCssFormat) {
+    iconName = iconName.replace(' ', ':');
+  }
+
+  try {
+    if (await isIconAvailable(iconName)) {
+      const iconSvg = await getIconSVG(
+        iconName,
+        {
+          height: iconSize,
+          width: iconSize,
+        },
+        { class: 'label-icon' }
+      );
+
+      const iconElem = parentElement.append('g');
+      iconElem.html(`<g>${iconSvg}</g>`);
+
+      let iconX = 0;
+      let iconY = 0;
+
+      switch (shapeType) {
+        case 'circle': {
+          const nodeWidth = node.width || 100;
+          const radius = nodeWidth / 2;
+          iconX = -radius + iconSize / 2 + iconPadding;
+          iconY = 0;
+          break;
+        }
+        default: {
+          const nodeWidth = node.width || 100;
+          iconX = -nodeWidth / 2 + iconSize / 2 + iconPadding;
+          iconY = 0;
+          break;
+        }
+      }
+
+      iconElem.attr('transform', `translate(${iconX}, ${iconY})`);
+      // Use currentColor to inherit label color - works for all shapes including bang
+      iconElem.attr('style', 'color: currentColor;');
+      return;
+    }
+  } catch (error) {
+    log.debug('SVG icon rendering failed, falling back to CSS:', error);
+  }
+
+  // Fallback to CSS approach (original mindmap behavior)
+  const iconClass = isCssFormat ? node.icon : node.icon.replace(':', ' ');
+
+  let iconX = 0;
+  const iconY = -iconSize / 2;
+
+  switch (shapeType) {
+    case 'circle': {
+      const nodeWidth = node.width || 100;
+      const radius = nodeWidth / 2;
+      iconX = -radius + iconPadding;
+      break;
+    }
+    default: {
+      const nodeWidth = node.width || 100;
+      iconX = -nodeWidth / 2;
+      break;
+    }
+  }
+
+  const icon = parentElement
+    .append('foreignObject')
+    .attr('height', `${iconSize}px`)
+    .attr('width', `${iconSize}px`)
+    .attr('x', iconX)
+    .attr('y', iconY)
+    .attr(
+      'style',
+      'text-align: center; display: flex; align-items: center; justify-content: center;'
+    );
+
+  icon
+    .append('div')
+    .attr('class', 'icon-container')
+    .attr(
+      'style',
+      'width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;'
+    )
+    .append('i')
+    .attr('class', `node-icon-${section} ${iconClass}`)
+    .attr('style', `font-size: ${iconSize}px;`);
+}

packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts

@@ -7,6 +7,7 @@ import type { LayoutData } from '../../rendering-util/types.js';
 import type { FilledMindMapNode } from './mindmapTypes.js';
 import defaultConfig from '../../defaultConfig.js';
 import type { MindmapDB } from './mindmapDb.js';
+import { getMindmapIconConfig, insertMindmapIcon } from './mindmapIconHelper.js';
 
 /**
  * Update the layout data with actual node dimensions after drawing
@@ -71,6 +72,28 @@ export const draw: DrawDefinition = async (text, id, _version, diagObj) => {
 
   // Use the unified rendering system
   await render(data4Layout, svg);
+  const genericShapes = ['hexagon', 'rect', 'rounded', 'squareRect'];
+  const nodesWithIcons = data4Layout.nodes.filter(
+    (node) => node.icon && genericShapes.includes(node.shape || '')
+  );
+
+  if (nodesWithIcons.length > 0) {
+    for (const node of nodesWithIcons) {
+      const nodeId = node.domId || node.id;
+      const nodeElement = svg.select(`g[id="${nodeId}"]`);
+
+      if (!nodeElement.empty()) {
+        try {
+          const iconConfig = getMindmapIconConfig(node.shape || 'default');
+          await insertMindmapIcon(nodeElement, node, iconConfig);
+        } catch (error) {
+          log.warn(`Failed to add icon to ${nodeId}:`, error);
+        }
+      } else {
+        log.warn(`Could not find DOM element for node ${nodeId}`);
+      }
+    }
+  }
 
   // Setup the view box and size of the svg element using config from data4Layout
   setupViewPortForSVG(

packages/mermaid/src/diagrams/mindmap/styles.ts

@@ -67,6 +67,9 @@ const getStyles: DiagramStylesProvider = (options) =>
   .section-root span {
     color: ${options.gitBranchLabel0};
   }
+  .node-icon--1 {
+    color: ${options.gitBranchLabel0};
+  }
   .section-2 span {
     color: ${options.gitBranchLabel0};
   }

packages/mermaid/src/diagrams/mindmap/svgDraw.ts

@@ -5,7 +5,7 @@ import { parseFontSize } from '../../utils.js';
 import type { MermaidConfig } from '../../config.type.js';
 import type { MindmapDB } from './mindmapDb.js';
 
-export const MAX_SECTIONS = 12;
+const MAX_SECTIONS = 12;
 
 type ShapeFunction = (
   db: MindmapDB,

packages/mermaid/src/diagrams/packet/renderer.ts

@@ -16,7 +16,7 @@ const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => {
   const svgWidth = bitWidth * bitsPerRow + 2;
   const svg: SVG = selectSvgElement(id);
 
-  svg.attr('viewBox', `0 0 ${svgWidth} ${svgHeight}`);
+  svg.attr('viewbox', `0 0 ${svgWidth} ${svgHeight}`);
   configureSvgSize(svg, svgHeight, svgWidth, config.useMaxWidth);
 
   for (const [word, packet] of words.entries()) {

packages/mermaid/src/diagrams/radar/renderer.ts

@@ -2,7 +2,6 @@ import type { Diagram } from '../../Diagram.js';
 import type { RadarDiagramConfig } from '../../config.type.js';
 import type { DiagramRenderer, DrawDefinition, SVG, SVGGroup } from '../../diagram-api/types.js';
 import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
-import { configureSvgSize } from '../../setupGraphViewbox.js';
 import type { RadarDB, RadarAxis, RadarCurve } from './types.js';
 
 const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => {
@@ -54,9 +53,11 @@ const drawFrame = (svg: SVG, config: Required<RadarDiagramConfig>): SVGGroup =>
     x: config.marginLeft + config.width / 2,
     y: config.marginTop + config.height / 2,
   };
-  configureSvgSize(svg, totalHeight, totalWidth, config.useMaxWidth ?? true);
-
-  svg.attr('viewBox', `0 0 ${totalWidth} ${totalHeight}`);
+  // Initialize the SVG
+  svg
+    .attr('viewbox', `0 0 ${totalWidth} ${totalHeight}`)
+    .attr('width', totalWidth)
+    .attr('height', totalHeight);
   // g element to center the radar chart
   return svg.append('g').attr('transform', `translate(${center.x}, ${center.y})`);
 };

packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison

@@ -30,17 +30,15 @@
 [0-9]+(?=[ \n]+)       											return 'NUM';
 <ID>\@\{                                                        { this.begin('CONFIG'); return 'CONFIG_START'; }
 <CONFIG>[^\}]+                                                  { return 'CONFIG_CONTENT'; }
-<CONFIG>\}(?=\s+as\s)                                           { this.popState(); this.begin('ALIAS'); return 'CONFIG_END'; }
 <CONFIG>\}                                                      { this.popState(); this.popState(); return 'CONFIG_END'; }
 <ID>[^\<->\->:\n,;@\s]+(?=\@\{)                                 { yytext = yytext.trim(); return 'ACTOR'; }
-<ID>[^<>:\n,;@\s]+(?=\s+as\s)                                   { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; }
-<ID>[^<>:\n,;@]+(?=\s*[\n;#]|$)                                 { yytext = yytext.trim(); this.popState(); return 'ACTOR'; }
-<ID>[^<>:\n,;@]*\<[^\n]*                                        { this.popState(); return 'INVALID'; }
+<ID>[^\<->\->:\n,;@]+?([\-]*[^\<->\->:\n,;@]+?)*?(?=((?!\n)\s)+"as"(?!\n)\s|[#\n;]|$) { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; }
 "box"															{ this.begin('LINE'); return 'box'; }
 "participant"                                                   { this.begin('ID'); return 'participant'; }
 "actor"                                                   		{ this.begin('ID'); return 'participant_actor'; }
 "create"                                                        return 'create';
 "destroy"                                                       { this.begin('ID'); return 'destroy'; }
+<ID>[^<\->\->:\n,;]+?([\-]*[^<\->\->:\n,;]+?)*?(?=((?!\n)\s)+"as"(?!\n)\s|[#\n;]|$)     { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; }
 <ALIAS>"as"                                                     { this.popState(); this.popState(); this.begin('LINE'); return 'AS'; }
 <ALIAS>(?:)                                                     { this.popState(); this.popState(); return 'NEWLINE'; }
 "loop"                                                          { this.begin('LINE'); return 'loop'; }
@@ -147,7 +145,6 @@ line
 	: SPACE statement { $$ = $2 }
 	| statement { $$ = $1 }
 	| NEWLINE { $$=[]; }
-	| INVALID { $$=[]; }
 	;
 
 box_section
@@ -265,10 +262,7 @@ participant_statement
 	| 'participant_actor' actor 'AS' restOfLine 'NEWLINE' {$2.draw='actor'; $2.type='addParticipant';$2.description=yy.parseMessage($4); $$=$2;}
 	| 'participant_actor' actor 'NEWLINE' {$2.draw='actor'; $2.type='addParticipant'; $$=$2;}
 	| 'destroy' actor 'NEWLINE' {$2.type='destroyParticipant'; $$=$2;}
-    | 'participant' actor_with_config 'AS' restOfLine 'NEWLINE' {$2.draw='participant'; $2.type='addParticipant'; $2.description=yy.parseMessage($4); $$=$2;}
     | 'participant' actor_with_config 'NEWLINE' {$2.draw='participant'; $2.type='addParticipant'; $$=$2;}
-    | 'participant_actor' actor_with_config 'AS' restOfLine 'NEWLINE' {$2.draw='actor'; $2.type='addParticipant'; $2.description=yy.parseMessage($4); $$=$2;}
-    | 'participant_actor' actor_with_config 'NEWLINE' {$2.draw='actor'; $2.type='addParticipant'; $$=$2;}
 
 	;
 
@@ -417,4 +411,4 @@ text2
   : TXT {$$ = yy.parseMessage($1.trim().substring(1)) }
   ;
 
-%%
+%%

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

@@ -172,12 +172,6 @@ export class SequenceDB implements DiagramDB {
       doc = yaml.load(yamlData, { schema: yaml.JSON_SCHEMA }) as ParticipantMetaData;
     }
     type = doc?.type ?? type;
-
-    // If alias is provided in metadata and description is not already set, use the alias
-    if (doc?.alias && (!description || description.text === name)) {
-      description = { text: doc.alias, wrap: description?.wrap, type };
-    }
-
     const old = this.state.records.actors.get(id);
     if (old) {
       // If already set and trying to set to a new one throw error

packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js

@@ -2609,126 +2609,5 @@ Bob->>Alice:Got it!
       expect(actors.get('E').type).toBe('entity');
       expect(actors.get('E').description).toBe('E');
     });
-    it('should handle fail parsing when alias token causes conflicts in participant definition', async () => {
-      let error = false;
-      try {
-        await Diagram.fromText(`
-        sequenceDiagram
-        participant SAS MyServiceWithMoreThan20Chars <br> service decription
-       `);
-      } catch (e) {
-        error = true;
-      }
-      expect(error).toBe(true);
-    });
-
-    it('should parse participant with stereotype and alias', async () => {
-      const diagram = await Diagram.fromText(`
-      sequenceDiagram
-      participant Alice@{ "type" : "boundary" } as Public API
-      participant Bob@{ "type" : "control" } as Controller
-      Alice->>Bob: Request
-      Bob-->>Alice: Response
-      `);
-      const actors = diagram.db.getActors();
-      expect(actors.get('Alice').type).toBe('boundary');
-      expect(actors.get('Alice').description).toBe('Public API');
-      expect(actors.get('Bob').type).toBe('control');
-      expect(actors.get('Bob').description).toBe('Controller');
-    });
-
-    it('should parse actor with stereotype and alias', async () => {
-      const diagram = await Diagram.fromText(`
-      sequenceDiagram
-      actor A@{ "type" : "database" } AS Database Server
-      actor B@{ "type" : "queue" } as Message Queue
-      A->>B: Send message
-      `);
-      const actors = diagram.db.getActors();
-      expect(actors.get('A').type).toBe('database');
-      expect(actors.get('A').description).toBe('Database Server');
-      expect(actors.get('B').type).toBe('queue');
-      expect(actors.get('B').description).toBe('Message Queue');
-    });
-
-    it('should parse participant with stereotype and simple alias', async () => {
-      const diagram = await Diagram.fromText(`
-      sequenceDiagram
-      participant API@{ "type" : "boundary" } AS Public API
-      API->>API: test
-      `);
-      const actors = diagram.db.getActors();
-      expect(actors.get('API').type).toBe('boundary');
-      expect(actors.get('API').description).toBe('Public API');
-    });
-
-    it('should parse participant with inline alias in config object', async () => {
-      const diagram = await Diagram.fromText(`
-      sequenceDiagram
-      participant API@{ "type" : "boundary", "alias": "Public API" }
-      participant Auth@{ "type" : "control", "alias": "Auth Controller" }
-      API->>Auth: Request
-      Auth-->>API: Response
-      `);
-      const actors = diagram.db.getActors();
-      expect(actors.get('API').type).toBe('boundary');
-      expect(actors.get('API').description).toBe('Public API');
-      expect(actors.get('Auth').type).toBe('control');
-      expect(actors.get('Auth').description).toBe('Auth Controller');
-    });
-
-    it('should parse actor with inline alias in config object', async () => {
-      const diagram = await Diagram.fromText(`
-      sequenceDiagram
-      actor U@{ "type" : "actor", "alias": "End User" }
-      actor DB@{ "type" : "database", "alias": "User Database" }
-      U->>DB: Query
-      DB-->>U: Result
-      `);
-      const actors = diagram.db.getActors();
-      expect(actors.get('U').type).toBe('actor');
-      expect(actors.get('U').description).toBe('End User');
-      expect(actors.get('DB').type).toBe('database');
-      expect(actors.get('DB').description).toBe('User Database');
-    });
-
-    it('should prioritize external alias over inline alias', async () => {
-      const diagram = await Diagram.fromText(`
-      sequenceDiagram
-      participant API@{ "type" : "boundary", "alias": "Internal Name" } as External Name
-      API->>API: test
-      `);
-      const actors = diagram.db.getActors();
-      expect(actors.get('API').type).toBe('boundary');
-      expect(actors.get('API').description).toBe('External Name');
-    });
-
-    it('should handle participant with only inline alias (no type)', async () => {
-      const diagram = await Diagram.fromText(`
-      sequenceDiagram
-      participant API@{ "alias": "Public API" }
-      API->>API: test
-      `);
-      const actors = diagram.db.getActors();
-      expect(actors.get('API').description).toBe('Public API');
-    });
-
-    it('should handle mixed inline and external alias syntax', async () => {
-      const diagram = await Diagram.fromText(`
-      sequenceDiagram
-      participant A@{ "type" : "boundary", "alias": "Service A" }
-      participant B@{ "type" : "control" } as Service B
-      participant C@{ "type" : "database" }
-      A->>B: Request
-      B->>C: Query
-      `);
-      const actors = diagram.db.getActors();
-      expect(actors.get('A').type).toBe('boundary');
-      expect(actors.get('A').description).toBe('Service A');
-      expect(actors.get('B').type).toBe('control');
-      expect(actors.get('B').description).toBe('Service B');
-      expect(actors.get('C').type).toBe('database');
-      expect(actors.get('C').description).toBe('C');
-    });
   });
 });

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' with { type: 'json' };
+import packageJson from '../../../package.json' assert { type: 'json' };
 import { addCanonicalUrls } from './canonical-urls.js';
 import MermaidExample from './mermaid-markdown-all.js';
 

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

@@ -52,8 +52,6 @@ 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) ✅
@@ -269,7 +267,6 @@ Communication tools and platforms
   - [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin)
 - [Reveal CK](https://github.com/jedcn/reveal-ck)
   - [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin)
-- [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 six diagrams.
+- **Free** - A free plan that includes three 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.24"
+    "vue": "^3.5.21"
   },
   "devDependencies": {
-    "@iconify-json/carbon": "^1.2.14",
-    "@unocss/reset": "^66.5.7",
-    "@vite-pwa/vitepress": "^1.0.1",
-    "@vitejs/plugin-vue": "^6.0.2",
+    "@iconify-json/carbon": "^1.2.13",
+    "@unocss/reset": "^66.5.1",
+    "@vite-pwa/vitepress": "^1.0.0",
+    "@vitejs/plugin-vue": "^6.0.1",
     "fast-glob": "^3.3.3",
     "https-localhost": "^4.7.1",
     "pathe": "^2.0.3",
-    "unocss": "^66.5.7",
-    "unplugin-vue-components": "^28.8.0",
-    "vite": "^7.0.8",
+    "unocss": "^66.5.1",
+    "unplugin-vue-components": "^28.4.1",
+    "vite": "^7.0.7",
     "vite-plugin-pwa": "^1.0.3",
     "vitepress": "1.6.4",
     "workbox-window": "^7.3.0"

packages/mermaid/src/docs/syntax/classDiagram.md

@@ -15,7 +15,7 @@ title: Animal example
 classDiagram
     note "From Duck till Zebra"
     Animal <|-- Duck
-    note for Duck "can fly<br>can swim<br>can dive<br>can help in debugging"
+    note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
     Animal <|-- Fish
     Animal <|-- Zebra
     Animal : +int age

packages/mermaid/src/docs/syntax/sequenceDiagram.md

@@ -120,11 +120,7 @@ sequenceDiagram
 
 ### Aliases
 
-The actor can have a convenient identifier and a descriptive label. Aliases can be defined in two ways: using external syntax with the `as` keyword, or inline within the configuration object.
-
-#### External Alias Syntax
-
-You can define an alias using the `as` keyword after the participant declaration:
+The actor can have a convenient identifier and a descriptive label.
 
 ```mermaid-example
 sequenceDiagram
@@ -134,48 +130,6 @@ sequenceDiagram
     J->>A: Great!
 ```
 
-The external alias syntax also works with participant stereotype configurations, allowing you to combine type specification with aliases:
-
-```mermaid-example
-sequenceDiagram
-    participant API@{ "type": "boundary" } as Public API
-    actor DB@{ "type": "database" } as User Database
-    participant Svc@{ "type": "control" } as Auth Service
-    API->>Svc: Authenticate
-    Svc->>DB: Query user
-    DB-->>Svc: User data
-    Svc-->>API: Token
-```
-
-#### Inline Alias Syntax
-
-Alternatively, you can define an alias directly inside the configuration object using the `"alias"` field. This works with both `participant` and `actor` keywords:
-
-```mermaid-example
-sequenceDiagram
-    participant API@{ "type": "boundary", "alias": "Public API" }
-    participant Auth@{ "type": "control", "alias": "Auth Service" }
-    participant DB@{ "type": "database", "alias": "User Database" }
-    API->>Auth: Login request
-    Auth->>DB: Query user
-    DB-->>Auth: User data
-    Auth-->>API: Access token
-```
-
-#### Alias Precedence
-
-When both inline alias (in the configuration object) and external alias (using `as` keyword) are provided, the **external alias takes precedence**:
-
-```mermaid-example
-sequenceDiagram
-    participant API@{ "type": "boundary", "alias": "Internal Name" } as External Name
-    participant DB@{ "type": "database", "alias": "Internal DB" } as External DB
-    API->>DB: Query
-    DB-->>API: Result
-```
-
-In the example above, "External Name" and "External DB" will be displayed, not "Internal Name" and "Internal DB".
-
 ### Actor Creation and Destruction (v10.3.0+)
 
 It is possible to create and destroy actors by messages. To do so, add a create or destroy directive before the message.

packages/mermaid/src/mermaidAPI.ts

@@ -7,6 +7,7 @@ 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';
@@ -420,12 +421,12 @@ const render = async function (
   // -------------------------------------------------------------------------------
   // Draw the diagram with the renderer
   try {
-    await diag.renderer.draw(text, id, injected.version, diag);
+    await diag.renderer.draw(text, id, packageJson.version, diag);
   } catch (e) {
     if (config.suppressErrorRendering) {
       removeTempElements();
     } else {
-      errorRenderer.draw(text, id, injected.version);
+      errorRenderer.draw(text, id, packageJson.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'),
     },
-    ...(injected.includeLargeFeatures
+    ...(includeLargeFeatures
       ? [
           {
             name: 'cose-bilkent',

packages/mermaid/src/rendering-util/rendering-elements/edges.js

@@ -605,14 +605,6 @@ export const insertEdge = function (
   const edgeStyles = Array.isArray(edge.style) ? edge.style : [edge.style];
   let strokeColor = edgeStyles.find((style) => style?.startsWith('stroke:'));
 
-  let animationClass = '';
-  if (edge.animate) {
-    animationClass = 'edge-animation-fast';
-  }
-  if (edge.animation) {
-    animationClass = 'edge-animation-' + edge.animation;
-  }
-
   let animatedEdge = false;
   if (edge.look === 'handDrawn') {
     const rc = rough.svg(elem);
@@ -628,13 +620,7 @@ export const insertEdge = function (
     svgPath = select(svgPathNode)
       .select('path')
       .attr('id', edge.id)
-      .attr(
-        'class',
-        ' ' +
-          strokeClasses +
-          (edge.classes ? ' ' + edge.classes : '') +
-          (animationClass ? ' ' + animationClass : '')
-      )
+      .attr('class', ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : ''))
       .attr('style', edgeStyles ? edgeStyles.reduce((acc, style) => acc + ';' + style, '') : '');
     let d = svgPath.attr('d');
     svgPath.attr('d', d);
@@ -642,6 +628,13 @@ export const insertEdge = function (
   } else {
     const stylesFromClasses = edgeClassStyles.join(';');
     const styles = edgeStyles ? edgeStyles.reduce((acc, style) => acc + style + ';', '') : '';
+    let animationClass = '';
+    if (edge.animate) {
+      animationClass = ' edge-animation-fast';
+    }
+    if (edge.animation) {
+      animationClass = ' edge-animation-' + edge.animation;
+    }
 
     const pathStyle =
       (stylesFromClasses ? stylesFromClasses + ';' + styles + ';' : styles) +
@@ -653,10 +646,7 @@ export const insertEdge = function (
       .attr('id', edge.id)
       .attr(
         'class',
-        ' ' +
-          strokeClasses +
-          (edge.classes ? ' ' + edge.classes : '') +
-          (animationClass ? ' ' + animationClass : '')
+        ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : '') + (animationClass ?? '')
       )
       .attr('style', pathStyle);
 

packages/mermaid/src/rendering-util/rendering-elements/markers.js

@@ -130,6 +130,7 @@ const lollipop = (elem, type, id) => {
     .attr('markerHeight', 240)
     .attr('orient', 'auto')
     .append('circle')
+    .attr('stroke', 'black')
     .attr('fill', 'transparent')
     .attr('cx', 7)
     .attr('cy', 7)
@@ -146,6 +147,7 @@ const lollipop = (elem, type, id) => {
     .attr('markerHeight', 240)
     .attr('orient', 'auto')
     .append('circle')
+    .attr('stroke', 'black')
     .attr('fill', 'transparent')
     .attr('cx', 7)
     .attr('cy', 7)

packages/mermaid/src/rendering-util/rendering-elements/shapes/bang.ts

@@ -7,6 +7,11 @@ import rough from 'roughjs';
 import type { D3Selection } from '../../../types.js';
 import { handleUndefinedAttr } from '../../../utils.js';
 import type { Bounds, Point } from '../../../types.js';
+import {
+  calculateMindmapDimensions,
+  getMindmapIconConfig,
+  insertMindmapIcon,
+} from '../../../diagrams/mindmap/mindmapIconHelper.js';
 
 export async function bang<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
   const { labelStyles, nodeStyles } = styles2String(node);
@@ -17,20 +22,34 @@ export async function bang<T extends SVGGraphicsElement>(parent: D3Selection<T>,
     getNodeClasses(node)
   );
 
-  const w = bbox.width + 10 * halfPadding;
-  const h = bbox.height + 8 * halfPadding;
-  const r = 0.15 * w;
-  const { cssStyles } = node;
+  const baseWidth = bbox.width + 10 * halfPadding;
+  const baseHeight = bbox.height + 8 * halfPadding;
+
+  const iconConfig = getMindmapIconConfig('bang');
+  const dimensions = calculateMindmapDimensions(
+    node,
+    bbox,
+    baseWidth,
+    baseHeight,
+    halfPadding,
+    iconConfig
+  );
+
+  const w = dimensions.width;
+  const h = dimensions.height;
+
+  node.width = w;
+  node.height = h;
 
   const minWidth = bbox.width + 20;
   const minHeight = bbox.height + 20;
   const effectiveWidth = Math.max(w, minWidth);
   const effectiveHeight = Math.max(h, minHeight);
 
-  label.attr('transform', `translate(${-bbox.width / 2}, ${-bbox.height / 2})`);
+  label.attr('transform', `translate(${dimensions.labelOffset.x}, ${dimensions.labelOffset.y})`);
 
-  let bangElem;
-  const path = `M0 0 
+  const r = 0.15 * effectiveWidth;
+  const path = `M0 0
     a${r},${r} 1 0,0 ${effectiveWidth * 0.25},${-1 * effectiveHeight * 0.1}
     a${r},${r} 1 0,0 ${effectiveWidth * 0.25},${0}
     a${r},${r} 1 0,0 ${effectiveWidth * 0.25},${0}
@@ -50,13 +69,16 @@ export async function bang<T extends SVGGraphicsElement>(parent: D3Selection<T>,
     a${r},${r} 1 0,0 ${effectiveWidth * 0.1},${-1 * effectiveHeight * 0.33}
   H0 V0 Z`;
 
+  let bangElem;
   if (node.look === 'handDrawn') {
     // @ts-expect-error -- Passing a D3.Selection seems to work for some reason
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});
     const roughNode = rc.path(path, options);
     bangElem = shapeSvg.insert(() => roughNode, ':first-child');
-    bangElem.attr('class', 'basic label-container').attr('style', handleUndefinedAttr(cssStyles));
+    bangElem
+      .attr('class', 'basic label-container')
+      .attr('style', handleUndefinedAttr(node.cssStyles));
   } else {
     bangElem = shapeSvg
       .insert('path', ':first-child')
@@ -68,6 +90,10 @@ export async function bang<T extends SVGGraphicsElement>(parent: D3Selection<T>,
   // Translate the path (center the shape)
   bangElem.attr('transform', `translate(${-effectiveWidth / 2}, ${-effectiveHeight / 2})`);
 
+  if (node.icon) {
+    await insertMindmapIcon(shapeSvg, node, iconConfig);
+  }
+
   updateNodeBounds(node, bangElem);
   node.calcIntersect = function (bounds: Bounds, point: Point) {
     return intersect.rect(bounds, point);

packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts

@@ -14,9 +14,25 @@ export async function circle<T extends SVGGraphicsElement>(
 ) {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, getNodeClasses(node));
+
+  const { shapeSvg, bbox, halfPadding, label } = await labelHelper(
+    parent,
+    node,
+    getNodeClasses(node)
+  );
+
   const padding = options?.padding ?? halfPadding;
+
   const radius = bbox.width / 2 + padding;
+
+  node.width = radius * 2;
+  node.height = radius * 2;
+
+  const labelXOffset = -bbox.width / 2;
+  const labelYOffset = -bbox.height / 2;
+  if (node.icon) {
+    label.attr('transform', `translate(${labelXOffset}, ${labelYOffset})`);
+  }
   let circleElem;
   const { cssStyles } = node;
 

packages/mermaid/src/rendering-util/rendering-elements/shapes/cloud.ts

@@ -6,6 +6,11 @@ import type { Node } from '../../types.js';
 import intersect from '../intersect/index.js';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import { getNodeClasses, labelHelper, updateNodeBounds } from './util.js';
+import {
+  getMindmapIconConfig,
+  calculateMindmapDimensions,
+  insertMindmapIcon,
+} from '../../../diagrams/mindmap/mindmapIconHelper.js';
 
 export async function cloud<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
   const { labelStyles, nodeStyles } = styles2String(node);
@@ -17,8 +22,26 @@ export async function cloud<T extends SVGGraphicsElement>(parent: D3Selection<T>
     getNodeClasses(node)
   );
 
-  const w = bbox.width + 2 * halfPadding;
-  const h = bbox.height + 2 * halfPadding;
+  const baseWidth = bbox.width + 2 * halfPadding;
+  const baseHeight = bbox.height + 2 * halfPadding;
+
+  const iconConfig = getMindmapIconConfig('cloud');
+  const dimensions = calculateMindmapDimensions(
+    node,
+    bbox,
+    baseWidth,
+    baseHeight,
+    halfPadding,
+    iconConfig
+  );
+
+  const w = dimensions.width;
+  const h = dimensions.height;
+
+  node.width = w;
+  node.height = h;
+
+  label.attr('transform', `translate(${dimensions.labelOffset.x}, ${dimensions.labelOffset.y})`);
 
   // Cloud radii
   const r1 = 0.15 * w;
@@ -61,11 +84,13 @@ export async function cloud<T extends SVGGraphicsElement>(parent: D3Selection<T>
       .attr('d', path);
   }
 
-  label.attr('transform', `translate(${-bbox.width / 2}, ${-bbox.height / 2})`);
-
   // Center the shape
   cloudElem.attr('transform', `translate(${-w / 2}, ${-h / 2})`);
 
+  if (node.icon) {
+    await insertMindmapIcon(shapeSvg, node, iconConfig);
+  }
+
   updateNodeBounds(node, cloudElem);
 
   node.calcIntersect = function (bounds: Bounds, point: Point) {

packages/mermaid/src/rendering-util/rendering-elements/shapes/defaultMindmapNode.ts

@@ -3,6 +3,11 @@ import type { Node } from '../../types.js';
 import intersect from '../intersect/index.js';
 import { styles2String } from './handDrawnShapeStyles.js';
 import { getNodeClasses, labelHelper, updateNodeBounds } from './util.js';
+import {
+  getMindmapIconConfig,
+  calculateMindmapDimensions,
+  insertMindmapIcon,
+} from '../../../diagrams/mindmap/mindmapIconHelper.js';
 
 export async function defaultMindmapNode<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
@@ -17,22 +22,38 @@ export async function defaultMindmapNode<T extends SVGGraphicsElement>(
     getNodeClasses(node)
   );
 
-  const w = bbox.width + 8 * halfPadding;
-  const h = bbox.height + 2 * halfPadding;
-  const rd = 5;
+  const baseWidth = bbox.width + 8 * halfPadding;
+  const baseHeight = bbox.height + 2 * halfPadding;
 
-  const rectPath = `
-    M${-w / 2} ${h / 2 - rd}
-    v${-h + 2 * rd}
-    q0,-${rd} ${rd},-${rd}
-    h${w - 2 * rd}
-    q${rd},0 ${rd},${rd}
-    v${h - 2 * rd}
-    q0,${rd} -${rd},${rd}
-    h${-w + 2 * rd}
-    q-${rd},0 -${rd},-${rd}
-    Z
-  `;
+  const iconConfig = getMindmapIconConfig('default');
+  const dimensions = calculateMindmapDimensions(
+    node,
+    bbox,
+    baseWidth,
+    baseHeight,
+    halfPadding,
+    iconConfig
+  );
+
+  const w = dimensions.width;
+  const h = dimensions.height;
+
+  node.width = w;
+  node.height = h;
+
+  label.attr('transform', `translate(${dimensions.labelOffset.x}, ${dimensions.labelOffset.y})`);
+
+  const RD = 5;
+  const rectPath = `M${-w / 2} ${h / 2 - RD} 
+    v${-h + 2 * RD} 
+    q0,-${RD} ${RD},-${RD} 
+    h${w - 2 * RD} 
+    q${RD},0 ${RD},${RD} 
+    v${h - 2 * RD} 
+    q0,${RD} -${RD},${RD} 
+    h${-w + 2 * RD} 
+    q-${RD},0 -${RD},-${RD} 
+    Z`;
 
   const bg = shapeSvg
     .append('path')
@@ -49,9 +70,12 @@ export async function defaultMindmapNode<T extends SVGGraphicsElement>(
     .attr('x2', w / 2)
     .attr('y2', h / 2);
 
-  label.attr('transform', `translate(${-bbox.width / 2}, ${-bbox.height / 2})`);
   shapeSvg.append(() => label.node());
 
+  if (node.icon) {
+    await insertMindmapIcon(shapeSvg, node, iconConfig);
+  }
+
   updateNodeBounds(node, bg);
   node.calcIntersect = function (bounds: Bounds, point: Point) {
     return intersect.rect(bounds, point);

packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts

@@ -15,11 +15,21 @@ export async function drawRect<T extends SVGGraphicsElement>(
 ) {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  // console.log('IPI labelStyles:', labelStyles);
-  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
+
+  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
 
   const totalWidth = Math.max(bbox.width + options.labelPaddingX * 2, node?.width || 0);
   const totalHeight = Math.max(bbox.height + options.labelPaddingY * 2, node?.height || 0);
+
+  node.width = totalWidth;
+  node.height = totalHeight;
+
+  const labelXOffset = -bbox.width / 2;
+
+  const labelYOffset = -bbox.height / 2;
+  if (node.icon) {
+    label.attr('transform', `translate(${labelXOffset}, ${labelYOffset})`);
+  }
   const x = -totalWidth / 2;
   const y = -totalHeight / 2;
 

packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts

@@ -26,10 +26,22 @@ export const createHexagonPathD = (
 export async function hexagon<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
+
+  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
 
   const h = bbox.height + (node.padding ?? 0);
   const w = bbox.width + (node.padding ?? 0) * 2.5;
+
+  node.width = w;
+  node.height = h;
+
+  const labelXOffset = -bbox.width / 2;
+
+  const labelYOffset = -bbox.height / 2;
+
+  if (node.icon) {
+    label.attr('transform', `translate(${labelXOffset}, ${labelYOffset})`);
+  }
   const { cssStyles } = node;
   // @ts-expect-error -- Passing a D3.Selection seems to work for some reason
   const rc = rough.svg(shapeSvg);
@@ -74,9 +86,6 @@ export async function hexagon<T extends SVGGraphicsElement>(parent: D3Selection<
     polygon.selectChildren('path').attr('style', nodeStyles);
   }
 
-  node.width = w;
-  node.height = h;
-
   updateNodeBounds(node, polygon);
 
   node.intersect = function (point) {

packages/mermaid/src/rendering-util/rendering-elements/shapes/mindmapCircle.ts

@@ -1,13 +1,57 @@
-import { circle } from './circle.js';
-import type { Node, MindmapOptions } from '../../types.js';
+import type { Node } from '../../types.js';
 import type { D3Selection } from '../../../types.js';
+import { getNodeClasses, labelHelper, updateNodeBounds } from './util.js';
+import { styles2String } from './handDrawnShapeStyles.js';
+import intersect from '../intersect/index.js';
+import {
+  getMindmapIconConfig,
+  calculateMindmapDimensions,
+  insertMindmapIcon,
+} from '../../../diagrams/mindmap/mindmapIconHelper.js';
 
 export async function mindmapCircle<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
   node: Node
 ) {
-  const options = {
-    padding: node.padding ?? 0,
-  } as MindmapOptions;
-  return circle(parent, node, options);
+  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
+  const halfPadding = (node.padding ?? 0) / 2;
+
+  const iconConfig = getMindmapIconConfig('circle');
+  const baseRadius = bbox.width / 2 + halfPadding;
+  const baseDiameter = baseRadius * 2;
+
+  const dimensions = calculateMindmapDimensions(
+    node,
+    bbox,
+    baseDiameter,
+    baseDiameter,
+    halfPadding,
+    iconConfig
+  );
+
+  const radius = dimensions.width / 2;
+  node.width = dimensions.width;
+  node.height = dimensions.height;
+
+  label.attr('transform', `translate(${dimensions.labelOffset.x}, ${dimensions.labelOffset.y})`);
+
+  const circle = shapeSvg
+    .insert('circle', ':first-child')
+    .attr('r', radius)
+    .attr('class', 'basic label-container')
+    .attr('style', styles2String(node).nodeStyles);
+
+  shapeSvg.append(() => label.node());
+
+  if (node.icon) {
+    await insertMindmapIcon(shapeSvg, node, iconConfig);
+  }
+
+  updateNodeBounds(node, circle);
+
+  node.intersect = function (point) {
+    return intersect.circle(node, radius, point);
+  };
+
+  return shapeSvg;
 }

packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts

@@ -2,8 +2,8 @@ import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } f
 import intersect from '../intersect/index.js';
 import type { Node } from '../../types.js';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
-import rough from 'roughjs';
 import type { D3Selection } from '../../../types.js';
+import rough from 'roughjs';
 
 /**
  * Generates evenly spaced points along an elliptical arc connecting two points.
@@ -91,13 +91,20 @@ export async function roundedRect<T extends SVGGraphicsElement>(
 ) {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
+  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
 
   const labelPaddingX = node?.padding ?? 0;
   const labelPaddingY = node?.padding ?? 0;
 
   const w = (node?.width ? node?.width : bbox.width) + labelPaddingX * 2;
   const h = (node?.height ? node?.height : bbox.height) + labelPaddingY * 2;
+
+  const labelXOffset = -bbox.width / 2;
+
+  if (node.icon) {
+    label.attr('transform', `translate(${labelXOffset}, ${-bbox.height / 2})`);
+  }
+
   const radius = node.radius || 5;
   const taper = node.taper || 5; // Taper width for the rounded corners
   const { cssStyles } = node;

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

@@ -84,6 +84,7 @@ interface BaseNode {
   radius?: number;
   taper?: number;
   stroke?: string;
+  section?: number;
 }
 
 /**

packages/mermaid/src/type.d.ts

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

packages/mermaid/src/types.ts

@@ -23,7 +23,6 @@ export interface ParticipantMetaData {
     | 'database'
     | 'collections'
     | 'queue';
-  alias?: string;
 }
 
 export interface EdgeMetaData {

packages/parser/CHANGELOG.md

@@ -1,15 +1,5 @@
 # @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.3",
+  "version": "0.6.2",
   "description": "MermaidJS parser",
   "author": "Yokozuna59",
   "contributors": [