fix: handle uncaught exceptions in Gantt chart rendering test for invalid dates

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

.build/common.ts

@@ -38,11 +38,6 @@ export const packageOptions = {
     packageName: 'mermaid-layout-tidy-tree',
     file: 'index.ts',
   },
-  'mermaid-layout-fcose': {
-    name: 'mermaid-layout-fcose',
-    packageName: 'mermaid-layout-fcose',
-    file: 'index.ts',
-  },
   examples: {
     name: 'mermaid-examples',
     packageName: 'examples',

.changeset/brave-baths-behave.md

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

.changeset/brave-memes-flash.md

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

.changeset/busy-mirrors-try.md

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

.changeset/chilly-words-march.md

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

.changeset/curly-apes-prove.md

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

.changeset/deep-pumas-run.md

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

.changeset/four-eyes-wish.md

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

.changeset/lazy-brooms-battle.md

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

.changeset/loud-results-melt.md

@@ -0,0 +1,5 @@
+---
+'mermaid': minor
+---
+
+feat: Add half-arrowheads (solid & stick) and central connection support

.changeset/moody-fans-try.md

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

.changeset/proud-colts-smell.md

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

.changeset/revert-marked-dependency.md

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

.changeset/short-seals-sort.md

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

.changeset/slow-lemons-know.md

@@ -0,0 +1,5 @@
+---
+'@mermaid': patch
+---
+
+fix: Mindmap breaking in ELK layout

.changeset/sweet-games-build.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix(er-diagram): prevent syntax error when using 'u', numbers, and decimals in node names

.changeset/ten-plums-bet.md

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

.changeset/tricky-rivers-stand.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: validate dates and tick interval to prevent UI freeze/crash in gantt diagramtype

.changeset/wide-lines-trade.md

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

.cspell/code-terms.txt

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

.cspell/libraries.txt

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

.esbuild/util.ts

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

.github/workflows/e2e-timings.yml

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

.github/workflows/release.yml

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

.github/workflows/scorecard.yml

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

.github/workflows/update-browserlist.yml

@@ -19,7 +19,7 @@ jobs:
           message: 'chore: update browsers list'
           push: false
       - name: Create Pull Request
-        uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e # v7.0.8
+        uses: peter-evans/create-pull-request@84ae59a2cdc2258d6fa0732dd66352dddae2a412 # v7.0.9
         with:
           branch: update-browserslist
           title: Update Browserslist

.github/workflows/validate-lockfile.yml

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

.vite/build.ts

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

Dockerfile

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

cypress/helpers/util.ts

@@ -6,6 +6,7 @@ interface CypressConfig {
   listUrl?: boolean;
   listId?: string;
   name?: string;
+  screenshot?: boolean;
 }
 type CypressMermaidConfig = MermaidConfig & CypressConfig;
 
@@ -90,20 +91,33 @@ export const renderGraph = (
 
 export const openURLAndVerifyRendering = (
   url: string,
-  options: CypressMermaidConfig,
+  { screenshot = true, ...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');
 
-  if (validation) {
-    cy.get('svg').should(validation);
+  // Handle sandbox mode where SVG is inside an iframe
+  if (options.securityLevel === 'sandbox') {
+    cy.get('iframe').should('be.visible');
+    if (validation) {
+      cy.get('iframe').should(validation);
+    }
+  } else {
+    cy.get('svg').should('be.visible');
+    // cspell:ignore viewbox
+    cy.get('svg').should('not.have.attr', 'viewbox');
+
+    if (validation) {
+      cy.get('svg').should(validation);
+    }
   }
 
-  verifyScreenshot(name);
+  if (screenshot) {
+    verifyScreenshot(name);
+  }
 };
 
 export const verifyScreenshot = (name: string): void => {

cypress/integration/rendering/c4.spec.js

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

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

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

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

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

cypress/integration/rendering/erDiagram.spec.js

@@ -369,4 +369,92 @@ ORDER ||--|{ LINE-ITEM : contains
       );
     });
   });
+
+  describe('Special characters and numbers syntax', () => {
+    it('should render ER diagram with numeric entity names', () => {
+      imgSnapshotTest(
+        `
+        erDiagram
+          1 ||--|| ORDER : places
+          ORDER ||--|{ 2 : contains
+          2 ||--o{ 3.5 : references
+        `,
+        { logLevel: 1 }
+      );
+    });
+
+    it('should render ER diagram with "u" character in entity names and cardinality', () => {
+      imgSnapshotTest(
+        `
+        erDiagram
+          CUSTOMER ||--|| u : has
+          u ||--|| ORDER : places
+          PROJECT u--o{ TEAM_MEMBER : "parent"
+        `,
+        { logLevel: 1 }
+      );
+    });
+
+    it('should render ER diagram with decimal numbers in relationships', () => {
+      imgSnapshotTest(
+        `
+        erDiagram
+          2.5 ||--|| 1.5 : has
+          CUSTOMER ||--o{ 3.14 : references
+          1.0 ||--|{ ORDER : contains
+        `,
+        { logLevel: 1 }
+      );
+    });
+
+    it('should render ER diagram with numeric entity names and attributes', () => {
+      imgSnapshotTest(
+        `
+        erDiagram
+          1 {
+            string name
+            int value
+          }
+          1 ||--|| ORDER : places
+          ORDER {
+            float price
+            string description
+          }
+        `,
+        { logLevel: 1 }
+      );
+    });
+
+    it('should render complex ER diagram with mixed special entity names', () => {
+      imgSnapshotTest(
+        `
+        erDiagram
+          CUSTOMER ||--o{ 1 : places
+          1 ||--|{ u : contains
+          1.5
+          u ||--|| 2.5 : processes
+          2.5 {
+            string id
+            float value
+          }
+          u {
+            varchar(50) name
+            int count
+          }
+        `,
+        { logLevel: 1 }
+      );
+    });
+    it('should render ER diagram with standalone numeric entities', () => {
+      imgSnapshotTest(
+        `erDiagram
+         PRODUCT ||--o{ ORDER-ITEM : has
+         1.5
+         u
+         1
+        `,
+        { logLevel: 1 }
+      );
+    });
+  });
 });

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

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

cypress/integration/rendering/flowchart.spec.js

@@ -774,6 +774,21 @@ 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(
       `
@@ -973,4 +988,19 @@ 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/gantt.spec.js

@@ -118,6 +118,15 @@ describe('Gantt diagram', () => {
     );
   });
   it('should FAIL rendering a gantt chart for issue #1060 with invalid date', () => {
+    let errorCaught = false;
+
+    cy.on('uncaught:exception', (err) => {
+      // Expect error related to invalid or missing date format
+      expect(err.message).to.include('Invalid date');
+      errorCaught = true;
+      return false; // prevent Cypress from failing the test
+    });
+
     imgSnapshotTest(
       `
       gantt
@@ -150,12 +159,16 @@ describe('Gantt diagram', () => {
 
       section Plasma Calls & updates
           OVM      :ovm, 2019-07-12, 120d
-      Plasma call 26 :pc26, 2019-08-21, 1d
-      Plasma call 27 :pc27, 2019-09-03, 1d
-      Plasma call 28 :pc28, 2019-09-17, 1d
-        `,
+          Plasma call 26 :pc26, 2019-08-21, 1d
+          Plasma call 27 :pc27, 2019-09-03, 1d
+          Plasma call 28 :pc28, 2019-09-17, 1d
+    `,
       {}
     );
+
+    cy.then(() => {
+      expect(errorCaught, 'Expected rendering to fail with invalid date error').to.equal(true);
+    });
   });
 
   it('should default to showing today marker', () => {

cypress/integration/rendering/mindmap.spec.ts

@@ -247,5 +247,31 @@ 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

@@ -655,5 +655,315 @@ describe('Sequence Diagram Special Cases', () => {
         expect(svg).to.not.have.attr('style');
       });
     });
+
+    describe('Central Connection Rendering Tests', () => {
+      it('should render central connection circles on actor vertical lines', () => {
+        imgSnapshotTest(
+          `sequenceDiagram
+        participant Alice
+        participant Bob
+        participant Charlie
+        Alice ()->>() Bob: Central connection
+        Bob ()-->> Charlie: Reverse central connection
+        Charlie ()<<-->>() Alice: Dual central connection`,
+          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+        );
+      });
+
+      it('should render central connections with different arrow types', () => {
+        imgSnapshotTest(
+          `sequenceDiagram
+        participant Alice
+        participant Bob
+        Alice ()->>() Bob: Solid open arrow
+        Alice ()-->>() Bob: Dotted open arrow
+        Alice ()-x() Bob: Solid cross
+        Alice ()--x() Bob: Dotted cross
+        Alice ()->() Bob: Solid arrow`,
+          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+        );
+      });
+
+      it('should render central connections with bidirectional arrows', () => {
+        imgSnapshotTest(
+          `sequenceDiagram
+        participant Alice
+        participant Bob
+        Alice ()<<->>() Bob: Bidirectional solid
+        Alice ()<<-->>() Bob: Bidirectional dotted`,
+          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+        );
+      });
+
+      it('should render central connections with activations', () => {
+        imgSnapshotTest(
+          `sequenceDiagram
+        participant Alice
+        participant Bob
+        participant Charlie
+        Alice ()->>() Bob: Activate Bob
+        activate Bob
+        Bob ()-->> Charlie: Message to Charlie
+        Bob ()->>() Alice: Response to Alice
+        deactivate Bob`,
+          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+        );
+      });
+
+      it('should render central connections mixed with normal messages', () => {
+        imgSnapshotTest(
+          `sequenceDiagram
+        participant Alice
+        participant Bob
+        participant Charlie
+        Alice ->> Bob: Normal message
+        Bob ()->>() Charlie: Central connection
+        Charlie -->> Alice: Normal dotted message
+        Alice ()<<-->>() Bob: Dual central connection
+        Bob -x Charlie: Normal cross message`,
+          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+        );
+      });
+
+      it('should render central connections with notes', () => {
+        imgSnapshotTest(
+          `sequenceDiagram
+        participant Alice
+        participant Bob
+        participant Charlie
+        Alice ()->>() Bob: Central connection
+        Note over Alice,Bob: Central connection note
+        Bob ()-->> Charlie: Reverse central connection
+        Note right of Charlie: Response note
+        Charlie ()<<-->>() Alice: Dual central connection`,
+          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+        );
+      });
+
+      it('should render central connections with loops and alternatives', () => {
+        imgSnapshotTest(
+          `sequenceDiagram
+        participant Alice
+        participant Bob
+        participant Charlie
+        loop Every minute
+            Alice ()->>() Bob: Central heartbeat
+            Bob ()-->> Charlie: Forward heartbeat
+        end
+        alt Success
+            Charlie ()<<-->>() Alice: Success response
+        else Failure
+            Charlie ()-x() Alice: Failure response
+        end`,
+          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+        );
+      });
+
+      it('should render central connections with different participant types', () => {
+        imgSnapshotTest(
+          `sequenceDiagram
+          participant Alice
+          actor Bob
+          participant Charlie@{"type":"boundary"}
+          participant David@{"type":"control"}
+          participant Eve@{"type":"entity"}
+          Alice ()->>() Bob: To actor
+          Bob ()-->> Charlie: To boundary
+          Charlie ()->>() David: To control
+          David ()<<-->>() Eve: To entity
+          Eve ()-x() Alice: Back to participant`,
+          { look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
+        );
+      });
+    });
+
+    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/integration/rendering/sequencediagram.spec.js

@@ -1053,4 +1053,167 @@ describe('Sequence diagram', () => {
       ]);
     });
   });
+  describe('render new arrow type', () => {
+    it('should render Solid half arrow top', () => {
+      imgSnapshotTest(
+        `
+    sequenceDiagram
+      Alice -|\\  John: Hello John, how are you? 
+      Alice-|\\  John: Hi Alice, I can hear you!
+      Alice -|\\  John: Test
+      `
+      );
+    });
+    it('should render Solid half arrow bottom', () => {
+      imgSnapshotTest(
+        `
+    sequenceDiagram
+      Alice-|/John: Hello John, how are you?
+      Alice-|/John: Hi Alice, I can hear you!
+      Alice-|/John: Test
+      `
+      );
+    });
+
+    it('should render Stick half arrow top ', () => {
+      imgSnapshotTest(
+        `
+     sequenceDiagram
+      Alice-\\\\John: Hello John, how are you?
+      Alice-\\\\John: Hi Alice, I can hear you!
+      Alice-\\\\John: Test
+      `
+      );
+    });
+    it('should render Stick half arrow bottom ', () => {
+      imgSnapshotTest(
+        `
+       sequenceDiagram
+      Alice-//John: Hello John, how are you?
+      Alice-//John: Hi Alice, I can hear you!
+      Alice-//John: Test
+      `
+      );
+    });
+    it('should render Solid half arrow top reverse ', () => {
+      imgSnapshotTest(
+        `
+       sequenceDiagram
+      Alice/|-John: Hello Alice, how are you?
+      Alice/|-John: Hi Alice, I can hear you!
+      Alice/|-John: Test
+
+      `
+      );
+    });
+
+    it('should render Solid half arrow bottom reverse ', () => {
+      imgSnapshotTest(
+        `sequenceDiagram
+        Alice \\|- John: Hello Alice, how are you?
+        Alice \\|- John: Hi Alice, I can hear you!
+        Alice \\|- John: Test`
+      );
+    });
+
+    it('should render Stick half arrow top reverse ', () => {
+      imgSnapshotTest(
+        `
+      sequenceDiagram
+      Alice //-John: Hello Alice, how are you?
+      Alice //-John: Hi Alice, I can hear you!
+      Alice //-John: Test`
+      );
+    });
+
+    it('should render Stick half arrow bottom reverse ', () => {
+      imgSnapshotTest(
+        `
+       sequenceDiagram
+      Alice \\\\-John: Hello Alice, how are you?
+      Alice \\\\-John: Hi Alice, I can hear you!
+      Alice \\\\-John: Test`
+      );
+    });
+
+    it('should render Solid half arrow top dotted', () => {
+      imgSnapshotTest(
+        `
+     sequenceDiagram
+      Alice --|\\John: Hello John, how are you?
+      Alice --|\\John: Hi Alice, I can hear you!
+      Alice --|\\John: Test`
+      );
+    });
+
+    it('should render Solid half arrow bottom dotted', () => {
+      imgSnapshotTest(
+        `
+     sequenceDiagram
+      Alice --|/John: Hello John, how are you?
+      Alice --|/John: Hi Alice, I can hear you!
+      Alice --|/John: Test`
+      );
+    });
+
+    it('should render Stick half arrow top dotted', () => {
+      imgSnapshotTest(
+        `
+     sequenceDiagram
+      Alice--\\\\John: Hello John, how are you?
+      Alice--\\\\John: Hi Alice, I can hear you!
+      Alice--\\\\John: Test`
+      );
+    });
+
+    it('should render Stick half arrow bottom dotted', () => {
+      imgSnapshotTest(
+        `
+     sequenceDiagram
+      Alice--//John: Hello John, how are you?
+      Alice--//John: Hi Alice, I can hear you!
+      Alice--//John: Test`
+      );
+    });
+
+    it('should render Solid half arrow top reverse dotted', () => {
+      imgSnapshotTest(
+        `
+  sequenceDiagram
+      Alice/|--John: Hello Alice, how are you?
+      Alice/|--John: Hi Alice, I can hear you!
+      Alice/|--John: Test`
+      );
+    });
+
+    it('should render Solid half arrow bottom reverse dotted', () => {
+      imgSnapshotTest(
+        `
+  sequenceDiagram
+      Alice\\|--John: Hello Alice, how are you?
+      Alice\\|--John: Hi Alice, I can hear you!
+      Alice\\|--John: Test`
+      );
+    });
+
+    it('should render Stick half arrow top reverse dotted ', () => {
+      imgSnapshotTest(
+        `
+  sequenceDiagram
+      Alice//--John: Hello Alice, how are you?
+      Alice//--John: Hi Alice, I can hear you!
+      Alice//--John: Test`
+      );
+    });
+
+    it('should render Stick half arrow bottom reverse dotted ', () => {
+      imgSnapshotTest(
+        `
+  sequenceDiagram
+      Alice\\\\--John: Hello Alice, how are you?
+      Alice\\\\--John: Hi Alice, I can hear you!
+      Alice\\\\--John: Test`
+      );
+    });
+  });
 });

cypress/integration/rendering/theme.spec.js

@@ -286,9 +286,9 @@ erDiagram
        accTitle: This is a title
        accDescr: This is a description
 
-       dateFormat                :YYYY-MM-DD
+       dateFormat                YYYY-MM-DD
        title                     :Adding GANTT diagram functionality to mermaid
-       excludes                  :excludes the named dates/days from being included in a charted task..
+       excludes                  :excludes the named dates/days from being included in a charted task.
        section A section
        Completed task            :done,    des1, 2014-01-06,2014-01-08
        Active task               :active,  des2, 2014-01-09, 3d

cypress/platform/knsv2.html

@@ -110,6 +110,48 @@
       config:
         layout: elk
       ---
+      mindmap
+      root((mindmap))
+        Origins
+          Long history
+          ::icon(fa fa-book)
+          Popularisation
+            British popular psychology author Tony Buzan
+        Research
+          On effectiveness<br/>and features
+          On Automatic creation
+            Uses
+                Creative techniques
+                Strategic planning
+                Argument mapping
+        Tools
+              id)I am a cloud(
+                  id))I am a bang((
+                    Tools
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      ---
+      config:
+        layout: elk
+      ---
+      flowchart
+       aid0
+  </pre
+    >
+    <pre id="diagram4" class="mermaid">
+      ---
+      config:
+        layout: elk
+      ---
+      mindmap
+      aid0
+
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      ---
+      config:
+        layout: ogdc
+      ---
       flowchart-elk TB
       c1-->a2
       subgraph one

cypress/platform/yari.html

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

demos/classchart.html

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

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

@@ -10,7 +10,7 @@
 
 # Interface: ParseOptions
 
-Defined in: [packages/mermaid/src/types.ts:88](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L88)
+Defined in: [packages/mermaid/src/types.ts:89](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L89)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:88](https://github.com/mermaid-js/mer
 
 > `optional` **suppressErrors**: `boolean`
 
-Defined in: [packages/mermaid/src/types.ts:93](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L93)
+Defined in: [packages/mermaid/src/types.ts:94](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L94)
 
 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:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L96)
+Defined in: [packages/mermaid/src/types.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L97)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:96](https://github.com/mermaid-js/mer
 
 > **config**: [`MermaidConfig`](MermaidConfig.md)
 
-Defined in: [packages/mermaid/src/types.ts:104](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L104)
+Defined in: [packages/mermaid/src/types.ts:105](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L105)
 
 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:100](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L100)
+Defined in: [packages/mermaid/src/types.ts:101](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L101)
 
 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:114](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L114)
+Defined in: [packages/mermaid/src/types.ts:115](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L115)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:114](https://github.com/mermaid-js/me
 
 > `optional` **bindFunctions**: (`element`) => `void`
 
-Defined in: [packages/mermaid/src/types.ts:132](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L132)
+Defined in: [packages/mermaid/src/types.ts:133](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L133)
 
 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:122](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L122)
+Defined in: [packages/mermaid/src/types.ts:123](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L123)
 
 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:118](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L118)
+Defined in: [packages/mermaid/src/types.ts:119](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L119)
 
 The svg code for the rendered graph.

docs/ecosystem/integrations-community.md

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

docs/ecosystem/mermaid-chart.md

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

docs/syntax/block.md

@@ -402,7 +402,7 @@ block
   blockArrowId4<["Label"]>(down)
   blockArrowId5<["Label"]>(x)
   blockArrowId6<["Label"]>(y)
-  blockArrowId6<["Label"]>(x, down)
+  blockArrowId7<["Label"]>(x, down)
 ```
 
 ```mermaid
@@ -413,7 +413,7 @@ block
   blockArrowId4<["Label"]>(down)
   blockArrowId5<["Label"]>(x)
   blockArrowId6<["Label"]>(y)
-  blockArrowId6<["Label"]>(x, down)
+  blockArrowId7<["Label"]>(x, down)
 ```
 
 #### Example - Space Blocks

docs/syntax/classDiagram.md

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

docs/syntax/radar.md

@@ -62,7 +62,7 @@ radar-beta
 radar-beta
   title Restaurant Comparison
   axis food["Food Quality"], service["Service"], price["Price"]
-  axis ambiance["Ambiance"],
+  axis ambiance["Ambiance"]
 
   curve a["Restaurant A"]{4, 3, 2, 4}
   curve b["Restaurant B"]{3, 4, 3, 3}
@@ -78,7 +78,7 @@ radar-beta
 radar-beta
   title Restaurant Comparison
   axis food["Food Quality"], service["Service"], price["Price"]
-  axis ambiance["Ambiance"],
+  axis ambiance["Ambiance"]
 
   curve a["Restaurant A"]{4, 3, 2, 4}
   curve b["Restaurant B"]{3, 4, 3, 3}

docs/syntax/sequenceDiagram.md

@@ -196,7 +196,11 @@ sequenceDiagram
 
 ### Aliases
 
-The actor can have a convenient identifier and a descriptive label.
+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:
 
 ```mermaid-example
 sequenceDiagram
@@ -214,6 +218,78 @@ 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.
@@ -329,7 +405,11 @@ Messages can be of two displayed either solid or with a dotted line.
 [Actor][Arrow][Actor]:Message text
 ```
 
-There are ten types of arrows currently supported:
+Lines can be solid or dotted, and can end with various types of arrowheads, crosses, or open arrows.
+
+#### Supported Arrow Types
+
+**Standard Arrow Types**
 
 | Type     | Description                                          |
 | -------- | ---------------------------------------------------- |
@@ -344,6 +424,58 @@ There are ten types of arrows currently supported:
 | `-)`     | Solid line with an open arrow at the end (async)     |
 | `--)`    | Dotted line with a open arrow at the end (async)     |
 
+**Half-Arrows (v\<MERMAID_RELEASE_VERSION>+)**
+
+The following half-arrow types are supported for more expressive sequence diagrams. Both solid and dotted variants are available by increasing the number of dashes (`-` → `--`).
+
+---
+
+| Type    | Description                                          |
+| ------- | ---------------------------------------------------- |
+| `-\|\`  | Solid line with top half arrowhead                   |
+| `--\|\` | Dotted line with top half arrowhead                  |
+| `-\|/`  | Solid line with bottom half arrowhead                |
+| `--\|/` | Dotted line with bottom half arrowhead               |
+| `/\|-`  | Solid line with reverse top half arrowhead           |
+| `/\|--` | Dotted line with reverse top half arrowhead          |
+| `\\-`   | Solid line with reverse bottom half arrowhead        |
+| `\\--`  | Dotted line with reverse bottom half arrowhead       |
+| `-\\`   | Solid line with top stick half arrowhead             |
+| `--\\`  | Dotted line with top stick half arrowhead            |
+| `-//`   | Solid line with bottom stick half arrowhead          |
+| `--//`  | Dotted line with bottom stick half arrowhead         |
+| `//-`   | Solid line with reverse top stick half arrowhead     |
+| `//--`  | Dotted line with reverse top stick half arrowhead    |
+| `\\-`   | Solid line with reverse bottom stick half arrowhead  |
+| `\\--`  | Dotted line with reverse bottom stick half arrowhead |
+
+## Central Connections (v\<MERMAID_RELEASE_VERSION>+)
+
+Mermaid sequence diagrams support **central lifeline connections** using a `()`.
+This is useful to represent messages or signals that connect to a central point, rather than from one actor directly to another.
+
+To indicate a central connection, append `()` to the arrow syntax.
+
+#### Basic Syntax
+
+```mermaid-example
+sequenceDiagram
+    participant Alice
+    participant John
+    Alice->>()John: Hello John
+    Alice()->>John: How are you?
+    John()->>()Alice: Great!
+```
+
+```mermaid
+sequenceDiagram
+    participant Alice
+    participant John
+    Alice->>()John: Hello John
+    Alice()->>John: How are you?
+    John()->>()Alice: Great!
+```
+
 ## Activations
 
 It is possible to activate and deactivate an actor. (de)activation can be dedicated declarations:

package.json

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

packages/mermaid-layout-elk/package.json

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

packages/mermaid-layout-elk/src/render.ts

@@ -67,7 +67,22 @@ export const render = async (
 
     // Add the element to the DOM
     if (!node.isGroup) {
-      const child = node as NodeWithVertex;
+      // const child = node as NodeWithVertex;
+      const child: NodeWithVertex = {
+        id: node.id,
+        width: node.width,
+        height: node.height,
+        // Store the original node data for later use
+        label: node.label,
+        isGroup: node.isGroup,
+        shape: node.shape,
+        padding: node.padding,
+        cssClasses: node.cssClasses,
+        cssStyles: node.cssStyles,
+        look: node.look,
+        // Include parentId for subgraph processing
+        parentId: node.parentId,
+      };
       graph.children.push(child);
       nodeDb[node.id] = node;
 
@@ -150,7 +165,7 @@ export const render = async (
         domId: { node: () => any; attr: (arg0: string, arg1: string) => void };
       }) {
         if (node) {
-          nodeDb[node.id] = node;
+          nodeDb[node.id] ??= {};
           nodeDb[node.id].offset = {
             posX: node.x + relX,
             posY: node.y + relY,
@@ -860,11 +875,13 @@ export const render = async (
     log.info('APA01 layout result:', JSON.stringify(g, null, 2));
   } catch (error) {
     log.error('APA01 ELK layout error:', error);
+    log.error('APA01 elkGraph that caused error:', JSON.stringify(elkGraph, null, 2));
     throw error;
   }
 
   // debugger;
   await drawNodes(0, 0, g.children, svg, subGraphsEl, 0);
+
   g.edges?.map(
     (edge: {
       sources: (string | number)[];

packages/mermaid-layout-fcose/package.json

@@ -1,48 +0,0 @@
-{
-  "name": "@mermaid-js/layout-fcose",
-  "version": "0.1.0",
-  "description": "FCoSE layout engine for architecture diagrams",
-  "module": "dist/mermaid-layout-fcose.core.mjs",
-  "types": "dist/layouts.d.ts",
-  "type": "module",
-  "exports": {
-    ".": {
-      "import": "./dist/mermaid-layout-fcose.core.mjs",
-      "types": "./dist/layouts.d.ts"
-    },
-    "./": "./"
-  },
-  "keywords": [
-    "diagram",
-    "markdown",
-    "fcose",
-    "mermaid",
-    "layout",
-    "architecture"
-  ],
-  "scripts": {},
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/mermaid-js/mermaid"
-  },
-  "contributors": [
-    "Knut Sveidqvist"
-  ],
-  "license": "MIT",
-  "dependencies": {
-    "cytoscape": "^3.27.0",
-    "cytoscape-fcose": "^2.2.0",
-    "d3": "^7.9.0"
-  },
-  "devDependencies": {
-    "@types/d3": "^7.4.3",
-    "mermaid": "workspace:^"
-  },
-  "peerDependencies": {
-    "mermaid": "^11.0.2"
-  },
-  "files": [
-    "dist"
-  ]
-}
-

packages/mermaid-layout-fcose/src/index.ts

@@ -1,22 +0,0 @@
-/**
- * FCoSE Layout Algorithm for Architecture Diagrams
- *
- * This module provides a layout algorithm implementation using the
- * cytoscape-fcose algorithm for positioning nodes and edges in architecture
- * diagrams with spatial constraints and group alignments.
- *
- * The algorithm is optimized for architecture diagrams and supports:
- * - Spatial maps for relative positioning
- * - Group alignments for organizing related services
- * - XY edges with 90-degree bends
- * - Complex edge routing
- *
- * The algorithm follows the unified rendering pattern and can be used
- * by architecture diagrams that provide compatible LayoutData with
- * architecture-specific data structures.
- */
-
-export { default } from './layouts.js';
-export * from './types.js';
-export * from './layout.js';
-export { render } from './render.js';

packages/mermaid-layout-fcose/src/layout.ts

@@ -1,637 +0,0 @@
-import type { LayoutData } from 'mermaid';
-import type { LayoutOptions, Position } from 'cytoscape';
-import cytoscape from 'cytoscape';
-import fcose from 'cytoscape-fcose';
-import { select } from 'd3';
-import type {
-  ArchitectureAlignment,
-  ArchitectureDataStructures,
-  ArchitectureGroupAlignments,
-  ArchitectureSpatialMap,
-  LayoutResult,
-  PositionedNode,
-  PositionedEdge,
-} from './types.js';
-import type {
-  FcoseAlignmentConstraint,
-  FcoseRelativePlacementConstraint,
-} from './cytoscape-fcose.d.js';
-
-cytoscape.use(fcose as any);
-
-/**
- * Architecture direction types
- */
-export type ArchitectureDirection = 'L' | 'R' | 'T' | 'B';
-
-const ArchitectureDirectionName = {
-  L: 'left',
-  R: 'right',
-  T: 'top',
-  B: 'bottom',
-} as const;
-
-function isArchitectureDirectionY(x: ArchitectureDirection): boolean {
-  return x === 'T' || x === 'B';
-}
-
-function isArchitectureDirectionXY(a: ArchitectureDirection, b: ArchitectureDirection): boolean {
-  const aX = a === 'L' || a === 'R';
-  const bY = b === 'T' || b === 'B';
-  const aY = a === 'T' || a === 'B';
-  const bX = b === 'L' || b === 'R';
-  return (aX && bY) || (aY && bX);
-}
-
-function getOppositeArchitectureDirection(x: ArchitectureDirection): ArchitectureDirection {
-  if (x === 'L' || x === 'R') {
-    return x === 'L' ? 'R' : 'L';
-  } else {
-    return x === 'T' ? 'B' : 'T';
-  }
-}
-
-/**
- * Execute the fcose layout algorithm on architecture diagram data
- *
- * This function takes layout data and uses cytoscape-fcose to calculate
- * optimal node positions for architecture diagrams with spatial constraints.
- *
- * @param data - The layout data containing nodes, edges, and configuration
- * @returns Promise resolving to layout result with positioned nodes and edges
- */
-export function executeFcoseLayout(data: LayoutData): Promise<LayoutResult> {
-  return new Promise((resolve, reject) => {
-    try {
-      if (!data.nodes || !Array.isArray(data.nodes) || data.nodes.length === 0) {
-        throw new Error('No nodes found in layout data');
-      }
-
-      if (!data.edges || !Array.isArray(data.edges)) {
-        data.edges = [];
-      }
-
-      // Extract architecture-specific data structures if available
-      const dataStructures = data.dataStructures as ArchitectureDataStructures | undefined;
-
-      const spatialMaps = dataStructures?.spatialMaps ?? [];
-      const groupAlignments = dataStructures?.groupAlignments ?? {};
-
-      // Get icon size from config (default to 50)
-      // Try to get from architecture config, or use a reasonable default
-      const iconSize = data.config?.architecture?.iconSize || data.config?.iconSize || 50;
-
-      // Create a hidden container for cytoscape
-      const renderEl = select('body')
-        .append('div')
-        .attr('id', 'cy-fcose')
-        .attr('style', 'display:none');
-      const cy = cytoscape({
-        container: document.getElementById('cy-fcose'),
-        style: [
-          {
-            selector: 'edge',
-            style: {
-              'curve-style': 'straight',
-              label: 'data(label)',
-            },
-          },
-          {
-            selector: 'edge.segments',
-            style: {
-              'curve-style': 'segments',
-              'segment-weights': '0',
-              'segment-distances': [0.5],
-            },
-          },
-          {
-            selector: 'node',
-            style: {
-              // @ts-ignore Incorrect library types
-              'compound-sizing-wrt-labels': 'include',
-            },
-          },
-          {
-            selector: 'node[label]',
-            style: {
-              'text-valign': 'bottom',
-              'text-halign': 'center',
-            },
-          },
-          {
-            selector: '.node-service',
-            style: {
-              label: 'data(label)',
-              width: 'data(width)',
-              height: 'data(height)',
-            },
-          },
-          {
-            selector: '.node-junction',
-            style: {
-              width: 'data(width)',
-              height: 'data(height)',
-            },
-          },
-          {
-            selector: '.node-group',
-            style: {
-              // @ts-ignore Incorrect library types
-              padding: `${iconSize * 0.5}px`,
-            },
-          },
-        ],
-        layout: {
-          name: 'grid',
-          boundingBox: {
-            x1: 0,
-            x2: 100,
-            y1: 0,
-            y2: 100,
-          },
-        },
-      });
-
-      // Add nodes to cytoscape
-      // First add groups, then services/junctions (to ensure parents exist before children)
-      const nodeMap = new Map<string, any>();
-      const groups = data.nodes.filter((n) => n.isGroup);
-      const services = data.nodes.filter((n) => !n.isGroup);
-
-      // Add groups first
-      groups.forEach((node) => {
-        const cyNode = cy.add({
-          group: 'nodes',
-          data: {
-            id: node.id,
-            label: node.label || '',
-            parent: node.parentId,
-            type: 'group',
-          },
-          classes: 'node-group',
-        });
-        nodeMap.set(node.id, { node: cyNode, originalNode: node });
-      });
-
-      // Then add services and junctions
-      services.forEach((node) => {
-        const nodeType = (node as any).type === 'junction' ? 'junction' : 'service';
-        const cyNode = cy.add({
-          group: 'nodes',
-          data: {
-            id: node.id,
-            label: node.label || '',
-            parent: node.parentId,
-            width: node.width || iconSize,
-            height: node.height || iconSize,
-            type: nodeType,
-          },
-          classes: nodeType === 'junction' ? 'node-junction' : 'node-service',
-        });
-        nodeMap.set(node.id, { node: cyNode, originalNode: node });
-      });
-
-      // Add edges to cytoscape
-      const edgeMap = new Map<string, any>();
-      data.edges.forEach((edge) => {
-        const edgeData: any = {
-          id: edge.id,
-          source: edge.start || edge.source,
-          target: edge.end || edge.target,
-          label: edge.label || '',
-        };
-
-        // Preserve architecture-specific edge data
-        if ((edge as any).lhsDir) {
-          edgeData.sourceDir = (edge as any).lhsDir;
-          edgeData.targetDir = (edge as any).rhsDir;
-        }
-
-        const edgeType =
-          (edge as any).lhsDir && (edge as any).rhsDir
-            ? isArchitectureDirectionXY((edge as any).lhsDir, (edge as any).rhsDir)
-              ? 'segments'
-              : 'straight'
-            : 'straight';
-
-        const cyEdge = cy.add({
-          group: 'edges',
-          data: edgeData,
-          classes: edgeType,
-        });
-        edgeMap.set(edge.id, { edge: cyEdge, originalEdge: edge });
-      });
-
-      // Make cytoscape care about the dimensions of the nodes
-      cy.nodes().forEach(function (n) {
-        n.layoutDimensions = () => {
-          const nodeData = n.data();
-          return { w: nodeData.width || iconSize, h: nodeData.height || iconSize };
-        };
-      });
-
-      // Get alignment constraints
-      const alignmentConstraint = getAlignments(data.nodes, spatialMaps, groupAlignments);
-
-      // Get relative placement constraints
-      const relativePlacementConstraint = getRelativeConstraints(spatialMaps, data.nodes, iconSize);
-
-      // Run fcose layout
-      const layout = cy.layout({
-        name: 'fcose',
-        quality: 'proof',
-        styleEnabled: false,
-        animate: false,
-        nodeDimensionsIncludeLabels: false,
-        idealEdgeLength(edge: any) {
-          const [nodeA, nodeB] = edge.connectedNodes();
-          const parentA = nodeA.data('parent');
-          const parentB = nodeB.data('parent');
-          const elasticity = parentA === parentB ? 1.5 * iconSize : 0.5 * iconSize;
-          return elasticity;
-        },
-        edgeElasticity(edge: any) {
-          const [nodeA, nodeB] = edge.connectedNodes();
-          const parentA = nodeA.data('parent');
-          const parentB = nodeB.data('parent');
-          const elasticity = parentA === parentB ? 0.45 : 0.001;
-          return elasticity;
-        },
-        alignmentConstraint,
-        relativePlacementConstraint,
-      } as LayoutOptions);
-
-      // Handle XY edges (edges with bends)
-      layout.one('layoutstop', () => {
-        function getSegmentWeights(
-          source: Position,
-          target: Position,
-          pointX: number,
-          pointY: number
-        ) {
-          const { x: sX, y: sY } = source;
-          const { x: tX, y: tY } = target;
-
-          let D =
-            (pointY - sY + ((sX - pointX) * (sY - tY)) / (sX - tX)) /
-            Math.sqrt(1 + Math.pow((sY - tY) / (sX - tX), 2));
-          let W = Math.sqrt(Math.pow(pointY - sY, 2) + Math.pow(pointX - sX, 2) - Math.pow(D, 2));
-
-          const distAB = Math.sqrt(Math.pow(tX - sX, 2) + Math.pow(tY - sY, 2));
-          W = W / distAB;
-
-          let delta1 = (tX - sX) * (pointY - sY) - (tY - sY) * (pointX - sX);
-          delta1 = delta1 >= 0 ? 1 : -1;
-
-          let delta2 = (tX - sX) * (pointX - sX) + (tY - sY) * (pointY - sY);
-          delta2 = delta2 >= 0 ? 1 : -1;
-
-          D = Math.abs(D) * delta1;
-          W = W * delta2;
-
-          return { distances: D, weights: W };
-        }
-
-        cy.startBatch();
-        cy.edges().forEach((cyEdge) => {
-          // Check if edge has data method and data exists
-          if (
-            cyEdge &&
-            typeof cyEdge.data === 'function' &&
-            typeof cyEdge.source === 'function' &&
-            typeof cyEdge.target === 'function'
-          ) {
-            try {
-              const edgeData = cyEdge.data();
-              if (edgeData?.sourceDir && edgeData?.targetDir) {
-                const sourceNode = cyEdge.source();
-                const targetNode = cyEdge.target();
-                if (
-                  sourceNode &&
-                  targetNode &&
-                  typeof sourceNode.position === 'function' &&
-                  typeof targetNode.position === 'function'
-                ) {
-                  const { x: sX, y: sY } = sourceNode.position();
-                  const { x: tX, y: tY } = targetNode.position();
-                  if (
-                    sX !== tX &&
-                    sY !== tY &&
-                    !isNaN(sX) &&
-                    !isNaN(sY) &&
-                    !isNaN(tX) &&
-                    !isNaN(tY)
-                  ) {
-                    const sourceDir = edgeData.sourceDir as ArchitectureDirection;
-                    if (
-                      typeof cyEdge.sourceEndpoint === 'function' &&
-                      typeof cyEdge.targetEndpoint === 'function'
-                    ) {
-                      const sEP = cyEdge.sourceEndpoint();
-                      const tEP = cyEdge.targetEndpoint();
-                      if (
-                        sEP &&
-                        tEP &&
-                        typeof sEP.x === 'number' &&
-                        typeof sEP.y === 'number' &&
-                        typeof tEP.x === 'number' &&
-                        typeof tEP.y === 'number'
-                      ) {
-                        const [pointX, pointY] = isArchitectureDirectionY(sourceDir)
-                          ? [sEP.x, tEP.y]
-                          : [tEP.x, sEP.y];
-                        const { weights, distances } = getSegmentWeights(sEP, tEP, pointX, pointY);
-                        if (typeof cyEdge.style === 'function') {
-                          cyEdge.style('segment-distances', distances);
-                          cyEdge.style('segment-weights', weights);
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            } catch (error) {
-              // skip edges that can't be processed
-              void error;
-            }
-          }
-        });
-        cy.endBatch();
-        layout.run();
-      });
-
-      layout.run();
-
-      cy.ready(() => {
-        // Extract positioned nodes
-        const positionedNodes: PositionedNode[] = [];
-        cy.nodes().forEach((cyNode) => {
-          const nodeData = nodeMap.get(cyNode.id());
-          if (!nodeData) {
-            return;
-          }
-          const nodeType = typeof cyNode.data === 'function' ? cyNode.data('type') : undefined;
-          const isGroup = nodeType === 'group';
-
-          let pos: { x: number; y: number } | null = null;
-
-          if (isGroup && typeof cyNode.boundingBox === 'function') {
-            const bbox = cyNode.boundingBox();
-            if (
-              bbox &&
-              typeof bbox.x1 === 'number' &&
-              typeof bbox.y1 === 'number' &&
-              !isNaN(bbox.x1) &&
-              !isNaN(bbox.y1)
-            ) {
-              pos = { x: bbox.x1, y: bbox.y1 };
-              if (
-                typeof bbox.w === 'number' &&
-                typeof bbox.h === 'number' &&
-                !isNaN(bbox.w) &&
-                !isNaN(bbox.h)
-              ) {
-                positionedNodes.push({
-                  id: cyNode.id(),
-                  x: pos.x,
-                  y: pos.y,
-                  width: bbox.w,
-                  height: bbox.h,
-                  originalNode: nodeData.originalNode,
-                });
-                return;
-              }
-            }
-          }
-
-          if (!pos && typeof cyNode.position === 'function') {
-            const nodePos = cyNode.position();
-            if (
-              nodePos &&
-              typeof nodePos.x === 'number' &&
-              typeof nodePos.y === 'number' &&
-              !isNaN(nodePos.x) &&
-              !isNaN(nodePos.y)
-            ) {
-              pos = { x: nodePos.x, y: nodePos.y };
-            }
-          }
-
-          if (pos) {
-            positionedNodes.push({
-              id: cyNode.id(),
-              x: pos.x,
-              y: pos.y,
-              width: typeof cyNode.data === 'function' ? cyNode.data('width') : undefined,
-              height: typeof cyNode.data === 'function' ? cyNode.data('height') : undefined,
-              originalNode: nodeData.originalNode,
-            });
-          }
-        });
-
-        // Extract positioned edges
-        const positionedEdges: PositionedEdge[] = [];
-        cy.edges().forEach((cyEdge) => {
-          if (
-            cyEdge &&
-            typeof cyEdge.id === 'function' &&
-            typeof cyEdge.source === 'function' &&
-            typeof cyEdge.target === 'function'
-          ) {
-            const edgeData = edgeMap.get(cyEdge.id());
-            if (edgeData) {
-              const sourceNode = cyEdge.source();
-              const targetNode = cyEdge.target();
-              if (
-                sourceNode &&
-                targetNode &&
-                typeof sourceNode.position === 'function' &&
-                typeof targetNode.position === 'function'
-              ) {
-                const sourcePos = sourceNode.position();
-                const targetPos = targetNode.position();
-                if (
-                  sourcePos &&
-                  targetPos &&
-                  typeof sourcePos.x === 'number' &&
-                  typeof sourcePos.y === 'number' &&
-                  typeof targetPos.x === 'number' &&
-                  typeof targetPos.y === 'number'
-                ) {
-                  positionedEdges.push({
-                    id: cyEdge.id(),
-                    source: sourceNode.id(),
-                    target: targetNode.id(),
-                    points: [
-                      { x: sourcePos.x, y: sourcePos.y },
-                      { x: targetPos.x, y: targetPos.y },
-                    ],
-                  });
-                }
-              }
-            }
-          }
-        });
-
-        // Clean up
-        renderEl.remove();
-
-        resolve({
-          nodes: positionedNodes,
-          edges: positionedEdges,
-        });
-      });
-    } catch (error) {
-      reject(error);
-    }
-  });
-}
-
-/**
- * Get alignment constraints for fcose
- */
-function getAlignments(
-  nodes: LayoutData['nodes'],
-  spatialMaps: ArchitectureSpatialMap[],
-  groupAlignments: ArchitectureGroupAlignments
-): FcoseAlignmentConstraint {
-  const flattenAlignments = (
-    alignmentObj: Record<number, Record<string, string[]>>,
-    alignmentDir: ArchitectureAlignment
-  ): Record<string, string[]> => {
-    return Object.entries(alignmentObj).reduce(
-      (prev, [dir, alignments]) => {
-        let cnt = 0;
-        const arr = Object.entries(alignments);
-        if (arr.length === 1) {
-          prev[dir] = arr[0][1];
-          return prev;
-        }
-        for (let i = 0; i < arr.length - 1; i++) {
-          for (let j = i + 1; j < arr.length; j++) {
-            const [aGroupId, aNodeIds] = arr[i];
-            const [bGroupId, bNodeIds] = arr[j];
-            const alignment = groupAlignments[aGroupId]?.[bGroupId];
-
-            if (alignment === alignmentDir) {
-              prev[dir] ??= [];
-              prev[dir] = [...prev[dir], ...aNodeIds, ...bNodeIds];
-            } else if (aGroupId === 'default' || bGroupId === 'default') {
-              prev[dir] ??= [];
-              prev[dir] = [...prev[dir], ...aNodeIds, ...bNodeIds];
-            } else {
-              const keyA = `${dir}-${cnt++}`;
-              prev[keyA] = aNodeIds;
-              const keyB = `${dir}-${cnt++}`;
-              prev[keyB] = bNodeIds;
-            }
-          }
-        }
-        return prev;
-      },
-      {} as Record<string, string[]>
-    );
-  };
-
-  // Create a node lookup by group
-  const nodeGroupMap = new Map<string, string>();
-  nodes.forEach((node) => {
-    nodeGroupMap.set(node.id, node.parentId || 'default');
-  });
-
-  const alignments = spatialMaps.map((spatialMap) => {
-    const horizontalAlignments: Record<number, Record<string, string[]>> = {};
-    const verticalAlignments: Record<number, Record<string, string[]>> = {};
-
-    Object.entries(spatialMap).forEach(([id, [x, y]]) => {
-      const nodeGroup = nodeGroupMap.get(id) ?? 'default';
-
-      horizontalAlignments[y] ??= {};
-      horizontalAlignments[y][nodeGroup] ??= [];
-      horizontalAlignments[y][nodeGroup].push(id);
-
-      verticalAlignments[x] ??= {};
-      verticalAlignments[x][nodeGroup] ??= [];
-      verticalAlignments[x][nodeGroup].push(id);
-    });
-
-    return {
-      horiz: Object.values(flattenAlignments(horizontalAlignments, 'horizontal')).filter(
-        (arr) => arr.length > 1
-      ),
-      vert: Object.values(flattenAlignments(verticalAlignments, 'vertical')).filter(
-        (arr) => arr.length > 1
-      ),
-    };
-  });
-
-  const [horizontal, vertical] = alignments.reduce(
-    ([prevHoriz, prevVert], { horiz, vert }) => {
-      return [
-        [...prevHoriz, ...horiz],
-        [...prevVert, ...vert],
-      ];
-    },
-    [[] as string[][], [] as string[][]]
-  );
-
-  return {
-    horizontal,
-    vertical,
-  };
-}
-
-/**
- * Get relative placement constraints for fcose
- */
-function getRelativeConstraints(
-  spatialMaps: ArchitectureSpatialMap[],
-  nodes: LayoutData['nodes'],
-  iconSize: number
-): FcoseRelativePlacementConstraint[] {
-  const relativeConstraints: FcoseRelativePlacementConstraint[] = [];
-  const posToStr = (pos: number[]) => `${pos[0]},${pos[1]}`;
-  const strToPos = (pos: string) => pos.split(',').map((p) => parseInt(p));
-
-  spatialMaps.forEach((spatialMap) => {
-    const invSpatialMap = Object.fromEntries(
-      Object.entries(spatialMap).map(([id, pos]) => [posToStr(pos), id])
-    );
-
-    const queue = [posToStr([0, 0])];
-    const visited: Record<string, number> = {};
-    const directions: Record<ArchitectureDirection, number[]> = {
-      L: [-1, 0],
-      R: [1, 0],
-      T: [0, 1],
-      B: [0, -1],
-    };
-
-    while (queue.length > 0) {
-      const curr = queue.shift();
-      if (curr) {
-        visited[curr] = 1;
-        const currId = invSpatialMap[curr];
-        if (currId) {
-          const currPos = strToPos(curr);
-          Object.entries(directions).forEach(([dir, shift]) => {
-            const newPos = posToStr([currPos[0] + shift[0], currPos[1] + shift[1]]);
-            const newId = invSpatialMap[newPos];
-            if (newId && !visited[newPos]) {
-              queue.push(newPos);
-              relativeConstraints.push({
-                [ArchitectureDirectionName[dir as ArchitectureDirection]]: newId,
-                [ArchitectureDirectionName[
-                  getOppositeArchitectureDirection(dir as ArchitectureDirection)
-                ]]: currId,
-                gap: 1.5 * iconSize,
-              } as any);
-            }
-          });
-        }
-      }
-    }
-  });
-
-  return relativeConstraints;
-}

packages/mermaid-layout-fcose/src/layouts.ts

@@ -1,13 +0,0 @@
-import type { LayoutLoaderDefinition } from 'mermaid';
-
-const loader = async () => await import(`./render.js`);
-
-const fcoseLayout: LayoutLoaderDefinition[] = [
-  {
-    name: 'architecture-fcose',
-    loader,
-    algorithm: 'architecture-fcose',
-  },
-];
-
-export default fcoseLayout;

packages/mermaid-layout-fcose/src/render.ts

@@ -1,201 +0,0 @@
-import type { InternalHelpers, LayoutData, RenderOptions, SVG } from 'mermaid';
-import { executeFcoseLayout } from './layout.js';
-
-interface NodeWithPosition {
-  id: string;
-  x?: number;
-  y?: number;
-  width?: number;
-  height?: number;
-  domId?: any;
-  [key: string]: any;
-}
-
-/**
- * Render function for fcose layout algorithm
-
- * The fcose layout is optimized for architecture diagrams with spatial constraints
- * and group alignments.
- */
-export const render = async (
-  data4Layout: LayoutData,
-  svg: SVG,
-  {
-    insertCluster,
-    insertEdge,
-    insertEdgeLabel,
-    insertMarkers,
-    insertNode,
-    log,
-    positionEdgeLabel,
-  }: InternalHelpers,
-  { algorithm: _algorithm }: RenderOptions
-) => {
-  const nodeDb: Record<string, NodeWithPosition> = {};
-  const clusterDb: Record<string, any> = {};
-
-  const element = svg.select('g');
-  insertMarkers(element, data4Layout.markers, data4Layout.type, data4Layout.diagramId);
-
-  const subGraphsEl = element.insert('g').attr('class', 'subgraphs');
-  const edgePaths = element.insert('g').attr('class', 'edgePaths');
-  const edgeLabels = element.insert('g').attr('class', 'edgeLabels');
-  const nodes = element.insert('g').attr('class', 'nodes');
-
-  await Promise.all(
-    data4Layout.nodes.map(async (node) => {
-      if (node.isGroup) {
-        const clusterNode: NodeWithPosition = {
-          ...node,
-          id: node.id,
-          width: node.width,
-          height: node.height,
-        };
-        clusterDb[node.id] = clusterNode;
-        nodeDb[node.id] = clusterNode;
-
-        const clusterResult = await insertCluster(subGraphsEl, node);
-        if (clusterResult?.cluster) {
-          clusterNode.domId = clusterResult.cluster;
-        }
-      } else {
-        const nodeWithPosition: NodeWithPosition = {
-          ...node,
-          id: node.id,
-          width: node.width,
-          height: node.height,
-        };
-        nodeDb[node.id] = nodeWithPosition;
-
-        const nodeEl = await insertNode(nodes, node, {
-          config: data4Layout.config,
-          dir: data4Layout.direction ?? 'TB',
-        });
-
-        const boundingBox = nodeEl.node()!.getBBox();
-        nodeWithPosition.width = boundingBox.width;
-        nodeWithPosition.height = boundingBox.height;
-        nodeWithPosition.domId = nodeEl;
-
-        log.debug(`Node ${node.id} dimensions: ${boundingBox.width}x${boundingBox.height}`);
-      }
-    })
-  );
-
-  const updatedLayoutData = {
-    ...data4Layout,
-    nodes: data4Layout.nodes.map((node) => {
-      const nodeWithDimensions = nodeDb[node.id];
-      return {
-        ...node,
-        width: nodeWithDimensions.width ?? node.width ?? 100,
-        height: nodeWithDimensions.height ?? node.height ?? 50,
-      };
-    }),
-  };
-
-  const layoutResult = await executeFcoseLayout(updatedLayoutData);
-
-  log.debug('Positioning nodes based on fcose layout results');
-
-  layoutResult.nodes.forEach((positionedNode) => {
-    const node = nodeDb[positionedNode.id];
-    if (
-      node &&
-      positionedNode.x !== undefined &&
-      positionedNode.y !== undefined &&
-      !isNaN(positionedNode.x) &&
-      !isNaN(positionedNode.y)
-    ) {
-      node.x = positionedNode.x;
-      node.y = positionedNode.y;
-
-      if (node.domId) {
-        if (
-          node.isGroup &&
-          positionedNode.width !== undefined &&
-          positionedNode.height !== undefined
-        ) {
-          const rect = node.domId.select('rect');
-          if (!rect.empty()) {
-            rect.attr('width', positionedNode.width);
-            rect.attr('height', positionedNode.height);
-          }
-        }
-        node.domId.attr('transform', `translate(${positionedNode.x}, ${positionedNode.y})`);
-        log.debug(
-          `Positioned node ${node.id} at (${positionedNode.x}, ${positionedNode.y})${node.isGroup ? ` with size ${positionedNode.width}x${positionedNode.height}` : ''}`
-        );
-      } else if (node.isGroup) {
-        const clusterElement = subGraphsEl.select(`#${node.id}`);
-        if (clusterElement && !clusterElement.empty()) {
-          if (positionedNode.width !== undefined && positionedNode.height !== undefined) {
-            const rect = clusterElement.select('rect');
-            if (!rect.empty()) {
-              rect.attr('width', positionedNode.width);
-              rect.attr('height', positionedNode.height);
-            }
-          }
-          clusterElement.attr('transform', `translate(${positionedNode.x}, ${positionedNode.y})`);
-          log.debug(
-            `Positioned group ${node.id} at (${positionedNode.x}, ${positionedNode.y})${positionedNode.width !== undefined ? ` with size ${positionedNode.width}x${positionedNode.height}` : ''}`
-          );
-        }
-      }
-    } else if (node && (isNaN(positionedNode.x) || isNaN(positionedNode.y))) {
-      log.warn(
-        `Node ${node.id} has invalid position: x=${positionedNode.x}, y=${positionedNode.y}`
-      );
-    }
-  });
-
-  await Promise.all(
-    data4Layout.edges.map(async (edge) => {
-      await insertEdgeLabel(edgeLabels, edge);
-
-      const startNode = nodeDb[edge.start ?? ''];
-      const endNode = nodeDb[edge.end ?? ''];
-
-      if (startNode && endNode) {
-        const positionedEdge = layoutResult.edges.find((e) => e.id === edge.id);
-
-        if (positionedEdge) {
-          const edgeWithPath = {
-            ...edge,
-            points: positionedEdge.points,
-          };
-          const paths = insertEdge(
-            edgePaths,
-            edgeWithPath,
-            clusterDb,
-            data4Layout.type,
-            startNode,
-            endNode,
-            data4Layout.diagramId
-          );
-
-          positionEdgeLabel(edgeWithPath, paths);
-        } else {
-          const edgeWithPath = {
-            ...edge,
-            points: [
-              { x: startNode.x ?? 0, y: startNode.y ?? 0 },
-              { x: endNode.x ?? 0, y: endNode.y ?? 0 },
-            ],
-          };
-
-          const paths = insertEdge(
-            edgePaths,
-            edgeWithPath,
-            clusterDb,
-            data4Layout.type,
-            startNode,
-            endNode,
-            data4Layout.diagramId
-          );
-          positionEdgeLabel(edgeWithPath, paths);
-        }
-      }
-    })
-  );
-};

packages/mermaid-layout-fcose/src/types.ts

@@ -1,53 +0,0 @@
-import type { LayoutData } from 'mermaid';
-
-export type Node = LayoutData['nodes'][number];
-export type Edge = LayoutData['edges'][number];
-
-/**
- * Positioned node after layout calculation
- */
-export interface PositionedNode {
-  id: string;
-  x: number;
-  y: number;
-  width?: number;
-  height?: number;
-  originalNode?: Node;
-  [key: string]: unknown;
-}
-
-/**
- * Positioned edge after layout calculation
- */
-export interface PositionedEdge {
-  id: string;
-  source: string;
-  target: string;
-  points: { x: number; y: number }[];
-  [key: string]: unknown;
-}
-
-/**
- * Result of layout algorithm execution
- */
-export interface LayoutResult {
-  nodes: PositionedNode[];
-  edges: PositionedEdge[];
-}
-
-/**
- * Architecture-specific data structures for fcose layout
- */
-export type ArchitectureSpatialMap = Record<string, number[]>;
-
-export type ArchitectureAlignment = 'vertical' | 'horizontal' | 'bend';
-
-export type ArchitectureGroupAlignments = Record<
-  string,
-  Record<string, Exclude<ArchitectureAlignment, 'bend'>>
->;
-
-export interface ArchitectureDataStructures {
-  spatialMaps: ArchitectureSpatialMap[];
-  groupAlignments: ArchitectureGroupAlignments;
-}

packages/mermaid-layout-fcose/tsconfig.json

@@ -1,11 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "rootDir": "./src",
-    "outDir": "./dist",
-    "types": ["vitest/importMeta", "vitest/globals"]
-  },
-  "include": ["./src/**/*.ts", "./src/**/*.d.ts"],
-  "typeRoots": ["./src/types"]
-}
-

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

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

packages/mermaid-zenuml/package.json

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

packages/mermaid/CHANGELOG.md

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

packages/mermaid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "11.11.0",
+  "version": "11.12.1",
   "description": "Markdown-ish syntax for generating flowcharts, mindmaps, sequence diagrams, class diagrams, gantt charts, git graphs and more.",
   "type": "module",
   "module": "./dist/mermaid.core.mjs",
@@ -76,10 +76,10 @@
     "cytoscape-fcose": "^2.2.0",
     "d3": "^7.9.0",
     "d3-sankey": "^0.12.3",
-    "dagre-d3-es": "7.0.11",
-    "dayjs": "^1.11.18",
-    "dompurify": "^3.2.5",
-    "katex": "^0.16.22",
+    "dagre-d3-es": "7.0.13",
+    "dayjs": "^1.11.19",
+    "dompurify": "^3.3.0",
+    "katex": "^0.16.25",
     "khroma": "^2.1.0",
     "lodash-es": "^4.17.21",
     "marked": "^16.3.0",
@@ -89,11 +89,11 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@adobe/jsonschema2md": "^8.0.5",
+    "@adobe/jsonschema2md": "^8.0.8",
     "@iconify/types": "^2.0.0",
     "@types/cytoscape": "^3.21.9",
-    "@types/cytoscape-fcose": "^2.2.4",
-    "@types/d3-sankey": "^0.12.4",
+    "@types/cytoscape-fcose": "^2.2.5",
+    "@types/d3-sankey": "^0.12.5",
     "@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.9",
+    "@types/micromatch": "^4.0.10",
     "@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.2",
+    "start-server-and-test": "^2.1.3",
     "type-fest": "^4.41.0",
-    "typedoc": "^0.28.13",
+    "typedoc": "^0.28.14",
     "typedoc-plugin-markdown": "^4.8.1",
     "typescript": "~5.7.3",
     "unist-util-flatmap": "^1.0.0",

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

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

packages/mermaid/src/diagrams/architecture/architectureDb.ts

@@ -3,9 +3,7 @@ import type { ArchitectureDiagramConfig } from '../../config.type.js';
 import DEFAULT_CONFIG from '../../defaultConfig.js';
 import type { DiagramDB } from '../../diagram-api/types.js';
 import type { D3Element } from '../../types.js';
-import { cleanAndMerge, getEdgeId } from '../../utils.js';
-import type { LayoutData, Node, Edge } from '../../rendering-util/types.js';
-
+import { cleanAndMerge } from '../../utils.js';
 import {
   clear as commonClear,
   getAccDescription,
@@ -353,147 +351,15 @@ export class ArchitectureDB implements DiagramDB {
   public getDiagramTitle = getDiagramTitle;
   public getAccDescription = getAccDescription;
   public setAccDescription = setAccDescription;
-
-  /**
-   * Converts architecture diagram data to LayoutData format for unified rendering
-   */
-  public getData(): LayoutData {
-    const config = commonGetConfig();
-    const nodes: Node[] = [];
-    const edges: Edge[] = [];
-
-    const groups = this.getGroups();
-    for (const group of groups) {
-      const padding = this.getConfigField('padding');
-      const fontSize = this.getConfigField('fontSize');
-
-      const groupWidth = 200;
-      let groupHeight = 150;
-
-      if (group.title || group.icon) {
-        groupHeight += fontSize + padding;
-      }
-
-      nodes.push({
-        id: group.id,
-        label: group.title,
-        parentId: group.in,
-        isGroup: true,
-        shape: 'rect',
-        icon: group.icon ? `mermaid-architecture:${group.icon}` : undefined,
-        width: groupWidth,
-        height: groupHeight,
-        padding: padding,
-        cssClasses: 'architecture-group',
-        cssCompiledStyles: [
-          'stroke: #cccccc',
-          'stroke-width: 2px',
-          'stroke-dasharray: 8,8',
-          'fill: transparent',
-        ],
-        labelStyle: '',
-        look: config.look || 'classic',
-        rx: 5,
-        ry: 5,
-      });
-    }
-
-    const services = this.getServices();
-    for (const service of services) {
-      const iconSize = this.getConfigField('iconSize');
-      let nodeWidth = iconSize;
-      let nodeHeight = iconSize;
-
-      if (service.title) {
-        nodeHeight += iconSize * 0.3;
-        nodeWidth = Math.max(nodeWidth, iconSize * 1.5);
-      }
-
-      nodes.push({
-        id: service.id,
-        label: service.title,
-        parentId: service.in,
-        isGroup: false,
-        shape: service.icon || (service as any).iconText ? 'icon' : 'squareRect',
-        icon: service.icon ? `mermaid-architecture:${service.icon}` : 'mermaid-architecture:blank',
-        width: service.width || nodeWidth,
-        height: service.height || nodeHeight,
-        cssClasses: 'architecture-service',
-        look: config.look,
-        padding: this.getConfigField('padding') / 4,
-        description: (service as any).iconText ? [(service as any).iconText] : undefined,
-        assetWidth: iconSize,
-        assetHeight: iconSize,
-      });
-    }
-
-    const junctions = this.getJunctions();
-    for (const junction of junctions) {
-      nodes.push({
-        id: junction.id,
-        parentId: junction.in,
-        isGroup: false,
-        shape: 'squareRect',
-        width: 2,
-        height: 2,
-        cssClasses: 'architecture-junction',
-        look: config.look,
-        type: 'junction' as any,
-        padding: 0,
-      });
-    }
-
-    const architectureEdges = this.getEdges();
-    let edgeCounter = 0;
-    for (const edge of architectureEdges) {
-      const edgeData = {
-        id: getEdgeId(edge.lhsId, edge.rhsId, { counter: edgeCounter, prefix: 'L' }),
-        start: edge.lhsId,
-        end: edge.rhsId,
-        source: edge.lhsId,
-        target: edge.rhsId,
-        label: edge.title || '',
-        labelpos: 'c',
-        type: 'normal',
-        minlen: 2,
-        weight: 1,
-        classes: 'edge-thickness-normal edge-pattern-solid architecture-edge',
-        look: config.look || 'classic',
-        curve: 'linear',
-        arrowTypeStart: edge.lhsInto ? 'point' : 'none',
-        arrowTypeEnd: edge.rhsInto ? 'point' : 'none',
-        arrowheadStyle: 'fill: #333',
-        thickness: 'normal',
-        pattern: 'solid',
-        style: ['stroke: #333333', 'stroke-width: 3px', 'fill: none'],
-        cssCompiledStyles: [],
-        labelStyle: [],
-        lhsDir: edge.lhsDir,
-        rhsDir: edge.rhsDir,
-        lhsInto: edge.lhsInto,
-        rhsInto: edge.rhsInto,
-        lhsGroup: edge.lhsGroup,
-        rhsGroup: edge.rhsGroup,
-      } as Edge & {
-        lhsDir: any;
-        rhsDir: any;
-        lhsInto?: boolean;
-        rhsInto?: boolean;
-        lhsGroup?: boolean;
-        rhsGroup?: boolean;
-      };
-
-      edges.push(edgeData);
-      edgeCounter++;
-    }
-
-    const result = {
-      nodes,
-      edges,
-      config,
-      dataStructures: this.getDataStructures(),
-    };
-
-    return result;
-  }
 }
+
+/**
+ * Typed wrapper for resolving an architecture diagram's config fields. Returns the default value if undefined
+ * @param field - the config field to access
+ * @returns
+ */
+// export function getConfigField<T extends keyof ArchitectureDiagramConfig>(
+//   field: T
+// ): Required<ArchitectureDiagramConfig>[T] {
+//   return db.getConfig()[field];
+// }

packages/mermaid/src/diagrams/architecture/architectureDiagram.ts

@@ -2,7 +2,7 @@ import type { DiagramDefinition } from '../../diagram-api/types.js';
 import { parser } from './architectureParser.js';
 import { ArchitectureDB } from './architectureDb.js';
 import styles from './architectureStyles.js';
-import { renderer } from './architectureRenderer-unified.js';
+import { renderer } from './architectureRenderer.js';
 
 export const diagram: DiagramDefinition = {
   parser,

packages/mermaid/src/diagrams/architecture/architectureRenderer-unified.ts

@@ -1,51 +0,0 @@
-import { getConfig } from '../../diagram-api/diagramAPI.js';
-import type { DiagramStyleClassDef } from '../../diagram-api/types.js';
-import { log } from '../../logger.js';
-import { getDiagramElement } from '../../rendering-util/insertElementsForSize.js';
-import { getRegisteredLayoutAlgorithm, render } from '../../rendering-util/render.js';
-import { setupViewPortForSVG } from '../../rendering-util/setupViewPortForSVG.js';
-import type { LayoutData } from '../../rendering-util/types.js';
-import utils from '../../utils.js';
-
-import { registerIconPacks } from '../../rendering-util/icons.js';
-import { architectureIcons } from './architectureIcons.js';
-
-export const getClasses = function (
-  _text: string,
-  _diagramObj: any
-): Map<string, DiagramStyleClassDef> {
-  return new Map();
-};
-
-export const draw = async function (_text: string, id: string, _version: string, diag: any) {
-  registerIconPacks([
-    {
-      name: architectureIcons.prefix,
-      icons: architectureIcons,
-    },
-  ]);
-  const { securityLevel, architecture: conf, layout } = getConfig();
-
-  const data4Layout = diag.db.getData() as LayoutData;
-
-  const svg = getDiagramElement(id, securityLevel);
-
-  data4Layout.type = diag.type;
-  const layoutToUse = layout || 'architecture-fcose';
-  data4Layout.layoutAlgorithm = getRegisteredLayoutAlgorithm(layoutToUse, { fallback: 'dagre' });
-
-  data4Layout.nodeSpacing = 100;
-  data4Layout.rankSpacing = 100;
-  data4Layout.markers = ['point'];
-  data4Layout.diagramId = id;
-
-  log.debug('Architecture layout data:', data4Layout);
-  await render(data4Layout, svg);
-
-  const padding = conf?.padding ?? 8;
-  utils.insertTitle(svg, 'architectureTitleText', 0, diag.db.getDiagramTitle());
-
-  setupViewPortForSVG(svg, padding, 'architecture', conf?.useMaxWidth ?? true);
-};
-
-export const renderer = { draw };

packages/mermaid/src/diagrams/architecture/architectureTypes.ts

@@ -2,7 +2,6 @@ import type { DiagramDBBase } from '../../diagram-api/types.js';
 import type { ArchitectureDiagramConfig } from '../../config.type.js';
 import type { D3Element } from '../../types.js';
 import type cytoscape from 'cytoscape';
-import type { LayoutData } from '../../rendering-util/types.js';
 
 /*=======================================*\
 |       Architecture Diagram Types        |
@@ -257,8 +256,7 @@ export interface ArchitectureDB extends DiagramDBBase<ArchitectureDiagramConfig>
   getEdges: () => ArchitectureEdge[];
   setElementForId: (id: string, element: D3Element) => void;
   getElementById: (id: string) => D3Element;
-  getData: () => LayoutData;
-  getDirection: () => string;
+  getDataStructures: () => ArchitectureDataStructures;
 }
 
 export type ArchitectureAdjacencyList = Record<string, ArchitectureDirectionPairMap>;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

packages/mermaid/src/diagrams/er/parser/erDiagram.jison

@@ -66,12 +66,15 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 \}\|                            return 'ONE_OR_MORE';
 "one"                           return 'ONLY_ONE';
 "only one"                      return 'ONLY_ONE';
-"1"                             return 'ONLY_ONE';
+[0-9]+\.[0-9]+                  return 'DECIMAL_NUM';
+"1"(?=\s+[A-Za-z_"'])           return 'ONLY_ONE';
+"1"                             return 'ENTITY_ONE';
+[0-9]+                          return 'NUM';
 \|\|                            return 'ONLY_ONE';
 o\|                             return 'ZERO_OR_ONE';
 o\{                             return 'ZERO_OR_MORE';
 \|\{                            return 'ONE_OR_MORE';
-\s*u                            return 'MD_PARENT';
+u(?=[\.\-\|])                   return 'MD_PARENT';
 \.\.                            return 'NON_IDENTIFYING';
 \-\-                            return 'IDENTIFYING';
 "to"                            return 'IDENTIFYING';
@@ -80,13 +83,15 @@ o\{                             return 'ZERO_OR_MORE';
 \-\.                            return 'NON_IDENTIFYING';
 <style>([^\x00-\x7F]|\w|\-|\*)+ return 'STYLE_TEXT';
 <style>';'                      return 'SEMI';
-([^\x00-\x7F]|\w|\-|\*)+        return 'UNICODE_TEXT';
-[0-9]                           return 'NUM';
+([^\x00-\x7F]|\w|\-|\*|\.)+      return 'UNICODE_TEXT';
 .                               return yytext[0];
 <<EOF>>                         return 'EOF';
 
 /lex
 
+%left 'ONLY_ONE'
+%left 'ZERO_OR_ONE' 'ZERO_OR_MORE' 'ONE_OR_MORE' 'MD_PARENT'
+
 %start start
 %% /* language grammar */
 
@@ -228,6 +233,9 @@ styleComponent: STYLE_TEXT | NUM | COLON | BRKT;
 entityName
     : 'ENTITY_NAME'      { $$ = $1.replace(/"/g, ''); }
     | 'UNICODE_TEXT' { $$ = $1; }
+    | 'NUM' { $$ = $1; }
+    | 'DECIMAL_NUM' { $$ = $1; }
+    | 'ENTITY_ONE' { $$ = $1; }
     ;
 
 attributes

packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js

@@ -1001,4 +1001,90 @@ describe('when parsing ER diagram it...', function () {
       }
     );
   });
+
+  describe('syntax fixes for special characters and numbers', function () {
+    describe('standalone entity names', function () {
+      it('should allow number "1" as standalone entity', function () {
+        erDiagram.parser.parse(`erDiagram\nCUSTOMER }|..|{ DELIVERY-ADDRESS : has\n1`);
+      });
+
+      it('should allow character "u" as standalone entity', function () {
+        erDiagram.parser.parse(`erDiagram\nCUSTOMER }|..|{ DELIVERY-ADDRESS : has\nu`);
+      });
+
+      it('should allow decimal numbers as standalone entities', function () {
+        erDiagram.parser.parse(`erDiagram\nCUSTOMER }|..|{ DELIVERY-ADDRESS : has\n2.5`);
+        erDiagram.parser.parse(`erDiagram\nCUSTOMER }|..|{ DELIVERY-ADDRESS : has\n1.5`);
+        erDiagram.parser.parse(`erDiagram\nCUSTOMER }|..|{ DELIVERY-ADDRESS : has\n0.1`);
+        erDiagram.parser.parse(`erDiagram\nCUSTOMER }|..|{ DELIVERY-ADDRESS : has\n99.99`);
+      });
+    });
+
+    describe('entity names with attributes', function () {
+      it('should allow "u" as entity name with attributes', function () {
+        erDiagram.parser.parse(`erDiagram\nu {\nstring name\nint id\n}`);
+      });
+
+      it('should allow number "1" as entity name with attributes', function () {
+        erDiagram.parser.parse(`erDiagram\n1 {\nstring name\nint id\n}`);
+      });
+
+      it('should allow decimal numbers as entity names with attributes', function () {
+        erDiagram.parser.parse(`erDiagram\n2.5 {\nstring name\nint id\n}`);
+        erDiagram.parser.parse(`erDiagram\n1.5 {\nstring value\n}`);
+      });
+    });
+
+    describe('entity names in relationships', function () {
+      it('should allow "u" in relationships', function () {
+        erDiagram.parser.parse(`erDiagram\nCUSTOMER ||--|| u : has`);
+        erDiagram.parser.parse(`erDiagram\nu ||--|| ORDER : places`);
+        erDiagram.parser.parse(`erDiagram\nu ||--|| v : connects`);
+      });
+
+      it('should allow numbers in relationships', function () {
+        erDiagram.parser.parse(`erDiagram\nCUSTOMER ||--|| 1 : has`);
+        erDiagram.parser.parse(`erDiagram\n1 ||--|| ORDER : places`);
+        erDiagram.parser.parse(`erDiagram\n1 ||--|| 2 : connects`);
+      });
+
+      it('should allow decimal numbers in relationships', function () {
+        erDiagram.parser.parse(`erDiagram\nCUSTOMER ||--|| 2.5 : has`);
+        erDiagram.parser.parse(`erDiagram\n1.5 ||--|| ORDER : places`);
+        erDiagram.parser.parse(`erDiagram\n2.5 ||--|| 5.5 : connects`);
+      });
+    });
+
+    describe('mixed scenarios', function () {
+      it('should handle complex diagram with special entity names', function () {
+        erDiagram.parser.parse(
+          `erDiagram
+              CUSTOMER ||--o{ 1 : places
+              1 ||--|{ u : contains
+              u {
+                string name
+                int quantity
+              }
+              "2.5" ||--|| ORDER : processes
+              ORDER {
+                int id
+                date created
+              }
+        `
+        );
+      });
+
+      it('should handle attributes with numbers in names (but not starting)', function () {
+        erDiagram.parser.parse(
+          `erDiagram
+              ENTITY {
+                string name1
+                int value2
+                float point3_5
+              }
+        `
+        );
+      });
+    });
+  });
 });

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

@@ -140,6 +140,7 @@ 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';
@@ -626,6 +627,8 @@ 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,4 +309,21 @@ 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/gantt/ganttDb.js

@@ -300,6 +300,16 @@ const getStartDate = function (prevTime, dateFormat, str) {
   } else {
     log.debug('Invalid date:' + str);
     log.debug('With date format:' + dateFormat.trim());
+
+    // Only allow fallback for formats that are simple timestamps (x, X)
+    // which represent Unix timestamps. For all other formats, if dayjs
+    // strict parsing fails - throws an error.
+    const isTimestampFormat = dateFormat.trim() === 'x' || dateFormat.trim() === 'X';
+
+    if (!isTimestampFormat) {
+      throw new Error(`Invalid date: "${str}" does not match format "${dateFormat.trim()}".`);
+    }
+
     const d = new Date(str);
     if (
       d === undefined ||

packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts

@@ -503,6 +503,51 @@ describe('when using the ganttDb', function () {
   it('should reject dates with ridiculous years', function () {
     ganttDb.setDateFormat('YYYYMMDD');
     ganttDb.addTask('test1', 'id1,202304,1d');
-    expect(() => ganttDb.getTasks()).toThrowError('Invalid date:202304');
+    expect(() => ganttDb.getTasks()).toThrowError(/Invalid date/);
+  });
+
+  describe('when using non-standard date formats (issue #5496)', function () {
+    it('should reject invalid dates when using seconds-only format', function () {
+      ganttDb.setDateFormat('ss');
+      ganttDb.addTask('RTT', 'rtt, 0, 20');
+      expect(() => ganttDb.getTasks()).toThrowError(/Invalid date/);
+    });
+
+    it('should reject invalid dates when using time-only formats without year', function () {
+      // Formats without year info should not fall back to new Date()
+      ganttDb.setDateFormat('HH:mm');
+      ganttDb.addTask('test', 'id1, invalid_date, 1h');
+      expect(() => ganttDb.getTasks()).toThrowError(/Invalid date/);
+    });
+
+    it('should allow valid seconds-only format when date matches', function () {
+      // Valid case - the date format 'ss' should work when the value is valid
+      ganttDb.setDateFormat('ss');
+      ganttDb.addTask('Task', 'task1, 00, 6s');
+      // This should not throw - 00 is a valid 'ss' value
+      const tasks = ganttDb.getTasks();
+      expect(tasks).toHaveLength(1);
+    });
+
+    it('should reject dates with typos in year like 202-12-01 instead of 2024-12-01', function () {
+      ganttDb.setDateFormat('YYYY-MM-DD');
+      ganttDb.addSection('Vacation');
+      ganttDb.addTask('London', '2024-12-01, 7d');
+      ganttDb.addTask('London', '202-12-01, 7d');
+      expect(() => ganttDb.getTasks()).toThrowError(/Invalid date/);
+    });
+
+    it('should work correctly with valid YYYY-MM-DD dates', function () {
+      // Valid case - both dates are correctly formatted
+      ganttDb.setDateFormat('YYYY-MM-DD');
+      ganttDb.addSection('Vacation');
+      ganttDb.addTask('London Trip 1', '2024-12-01, 7d');
+      ganttDb.addTask('London Trip 2', '2024-12-15, 7d');
+      const tasks = ganttDb.getTasks();
+      expect(tasks).toHaveLength(2);
+      // Verify years are correct (2024)
+      expect(tasks[0].startTime.getFullYear()).toBe(2024);
+      expect(tasks[1].startTime.getFullYear()).toBe(2024);
+    });
   });
 });

packages/mermaid/src/diagrams/gantt/ganttRenderer.js

@@ -78,6 +78,7 @@ const getMaxIntersections = (tasks, orderOffset) => {
 };
 
 let w;
+const MAX_TICK_COUNT = 10000;
 export const draw = function (text, id, version, diagObj) {
   const conf = getConfig().gantt;
 
@@ -602,6 +603,30 @@ export const draw = function (text, id, version, diagObj) {
       .attr('class', 'exclude-range');
   }
 
+  /**
+   * Calculates the estimated number of ticks based on the time domain and tick interval.
+   * Returns the count or Infinity if there would be too many ticks.
+   * @param {Date} minTime - The minimum time in the domain
+   * @param {Date} maxTime - The maximum time in the domain
+   * @param {number} every - The interval count (e.g., 1 for "1second")
+   * @param {string} interval - The interval unit (e.g., "second", "day")
+   * @returns {number} The estimated number of ticks
+   */
+  function getEstimatedTickCount(minTime, maxTime, every, interval) {
+    const timeDiffMs = maxTime - minTime;
+    const msPerUnit = {
+      millisecond: 1,
+      second: 1000,
+      minute: 60 * 1000,
+      hour: 60 * 60 * 1000,
+      day: 24 * 60 * 60 * 1000,
+      week: 7 * 24 * 60 * 60 * 1000,
+      month: 30 * 24 * 60 * 60 * 1000, // Approximate
+    };
+    const intervalMs = (msPerUnit[interval] || msPerUnit.day) * every;
+    return Math.ceil(timeDiffMs / intervalMs);
+  }
+
   /**
    * @param theSidePad
    * @param theTopPad
@@ -630,32 +655,47 @@ export const draw = function (text, id, version, diagObj) {
     );
 
     if (resultTickInterval !== null) {
-      const every = resultTickInterval[1];
+      const every = parseInt(resultTickInterval[1], 10);
       const interval = resultTickInterval[2];
       const weekday = diagObj.db.getWeekday() || conf.weekday;
 
-      switch (interval) {
-        case 'millisecond':
-          bottomXAxis.ticks(timeMillisecond.every(every));
-          break;
-        case 'second':
-          bottomXAxis.ticks(timeSecond.every(every));
-          break;
-        case 'minute':
-          bottomXAxis.ticks(timeMinute.every(every));
-          break;
-        case 'hour':
-          bottomXAxis.ticks(timeHour.every(every));
-          break;
-        case 'day':
-          bottomXAxis.ticks(timeDay.every(every));
-          break;
-        case 'week':
-          bottomXAxis.ticks(mapWeekdayToTimeFunction[weekday].every(every));
-          break;
-        case 'month':
-          bottomXAxis.ticks(timeMonth.every(every));
-          break;
+      // Get the time domain to check tick count
+      const domain = timeScale.domain();
+      const minTime = domain[0];
+      const maxTime = domain[1];
+      const estimatedTicks = getEstimatedTickCount(minTime, maxTime, every, interval);
+
+      if (estimatedTicks > MAX_TICK_COUNT) {
+        log.warn(
+          `The tick interval "${every}${interval}" would generate ${estimatedTicks} ticks, ` +
+            `which exceeds the maximum allowed (${MAX_TICK_COUNT}). ` +
+            `This may indicate an invalid date or time range. Skipping custom tick interval.`
+        );
+        // D3 using its default automatic tick generation
+      } else {
+        switch (interval) {
+          case 'millisecond':
+            bottomXAxis.ticks(timeMillisecond.every(every));
+            break;
+          case 'second':
+            bottomXAxis.ticks(timeSecond.every(every));
+            break;
+          case 'minute':
+            bottomXAxis.ticks(timeMinute.every(every));
+            break;
+          case 'hour':
+            bottomXAxis.ticks(timeHour.every(every));
+            break;
+          case 'day':
+            bottomXAxis.ticks(timeDay.every(every));
+            break;
+          case 'week':
+            bottomXAxis.ticks(mapWeekdayToTimeFunction[weekday].every(every));
+            break;
+          case 'month':
+            bottomXAxis.ticks(timeMonth.every(every));
+            break;
+        }
       }
     }
 
@@ -677,32 +717,41 @@ export const draw = function (text, id, version, diagObj) {
         .tickFormat(timeFormat(axisFormat));
 
       if (resultTickInterval !== null) {
-        const every = resultTickInterval[1];
+        const every = parseInt(resultTickInterval[1], 10);
         const interval = resultTickInterval[2];
         const weekday = diagObj.db.getWeekday() || conf.weekday;
 
-        switch (interval) {
-          case 'millisecond':
-            topXAxis.ticks(timeMillisecond.every(every));
-            break;
-          case 'second':
-            topXAxis.ticks(timeSecond.every(every));
-            break;
-          case 'minute':
-            topXAxis.ticks(timeMinute.every(every));
-            break;
-          case 'hour':
-            topXAxis.ticks(timeHour.every(every));
-            break;
-          case 'day':
-            topXAxis.ticks(timeDay.every(every));
-            break;
-          case 'week':
-            topXAxis.ticks(mapWeekdayToTimeFunction[weekday].every(every));
-            break;
-          case 'month':
-            topXAxis.ticks(timeMonth.every(every));
-            break;
+        // Get the time domain to check tick count
+        const domain = timeScale.domain();
+        const minTime = domain[0];
+        const maxTime = domain[1];
+        const estimatedTicks = getEstimatedTickCount(minTime, maxTime, every, interval);
+
+        // Only apply custom ticks if the count is reasonable
+        if (estimatedTicks <= MAX_TICK_COUNT) {
+          switch (interval) {
+            case 'millisecond':
+              topXAxis.ticks(timeMillisecond.every(every));
+              break;
+            case 'second':
+              topXAxis.ticks(timeSecond.every(every));
+              break;
+            case 'minute':
+              topXAxis.ticks(timeMinute.every(every));
+              break;
+            case 'hour':
+              topXAxis.ticks(timeHour.every(every));
+              break;
+            case 'day':
+              topXAxis.ticks(timeDay.every(every));
+              break;
+            case 'week':
+              topXAxis.ticks(mapWeekdayToTimeFunction[weekday].every(every));
+              break;
+            case 'month':
+              topXAxis.ticks(timeMonth.every(every));
+              break;
+          }
         }
       }
 

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

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

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

@@ -293,5 +293,37 @@ 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,6 +7,7 @@ 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 & {
@@ -203,7 +204,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 : sectionNumber;
+        const childSectionNumber = node.level === 0 ? index % (MAX_SECTIONS - 1) : sectionNumber;
         this.assignSections(child, childSectionNumber);
       }
     }

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';
 
-const MAX_SECTIONS = 12;
+export 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,6 +2,7 @@ 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) => {
@@ -53,11 +54,9 @@ const drawFrame = (svg: SVG, config: Required<RadarDiagramConfig>): SVGGroup =>
     x: config.marginLeft + config.width / 2,
     y: config.marginTop + config.height / 2,
   };
-  // Initialize the SVG
-  svg
-    .attr('viewbox', `0 0 ${totalWidth} ${totalHeight}`)
-    .attr('width', totalWidth)
-    .attr('height', totalHeight);
+  configureSvgSize(svg, totalHeight, totalWidth, config.useMaxWidth ?? true);
+
+  svg.attr('viewBox', `0 0 ${totalWidth} ${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,15 +30,17 @@
 [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,;@]+?([\-]*[^\<->\->:\n,;@]+?)*?(?=((?!\n)\s)+"as"(?!\n)\s|[#\n;]|$) { yytext = yytext.trim(); this.begin('ALIAS'); 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'; }
 "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'; }
@@ -78,7 +80,7 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 "off"															return 'off';
 ","                                                             return ',';
 ";"                                                             return 'NEWLINE';
-[^+<\->\->:\n,;]+((?!(\-x|\-\-x|\-\)|\-\-\)))[\-]*[^\+<\->\->:\n,;]+)*             { yytext = yytext.trim(); return 'ACTOR'; }
+[^\/\\\+\()\+<\->\->:\n,;]+((?!(\-x|\-\-x|\-\)|\-\-\)|\-\|\\|\-\\|\-\/|\-\/\/|\-\|\/|\/\|\-|\\\|\-|\/\/\-|\\\\\-|\/\|\-|\-\-\|\\|\-\-|\(\)))[\-]*[^\+<\->\->:\n,;]+)*             { yytext = yytext.trim(); return 'ACTOR'; } //final_4.11
 "->>"                                                           return 'SOLID_ARROW';
 "<<->>"                                                           return 'BIDIRECTIONAL_SOLID_ARROW';
 "-->>"                                                          return 'DOTTED_ARROW';
@@ -89,10 +91,36 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 \-\-[x]                                                         return 'DOTTED_CROSS';
 \-[\)]                                                          return 'SOLID_POINT';
 \-\-[\)]                                                        return 'DOTTED_POINT';
+
+//normal-dotted
+\-\-\|\\                                                        return 'SOLID_ARROW_TOP_DOTTED';
+\-\-\|\/                                                        return 'SOLID_ARROW_BOTTOM_DOTTED';
+\-\-\\\\                                                        return 'STICK_ARROW_TOP_DOTTED';
+\-\-\/\/                                                        return 'STICK_ARROW_BOTTOM_DOTTED';
+
+//reverse-dotted
+\/\|\-\-                                                          return 'SOLID_ARROW_TOP_REVERSE_DOTTED';
+\\\|\-\-                                                          return 'SOLID_ARROW_BOTTOM_REVERSE_DOTTED';
+\/\/\-\-                                                          return 'STICK_ARROW_TOP_REVERSE_DOTTED';
+\\\\\-\-                                                          return 'STICK_ARROW_BOTTOM_REVERSE_DOTTED';
+
+//normal
+\-\|\\                                                          return 'SOLID_ARROW_TOP';
+\-\|\/                                                          return 'SOLID_ARROW_BOTTOM';
+\-\\\\                                                          return 'STICK_ARROW_TOP';
+\-\/\/                                                          return 'STICK_ARROW_BOTTOM';
+
+//reverse
+\/\|\-                                                          return 'SOLID_ARROW_TOP_REVERSE';
+\\\|\-                                                          return 'SOLID_ARROW_BOTTOM_REVERSE';
+\/\/\-                                                          return 'STICK_ARROW_TOP_REVERSE';
+\\\\\-                                                          return 'STICK_ARROW_BOTTOM_REVERSE';
+
 ":"(?:(?:no)?wrap:)?[^#\n;]*                                    return 'TXT';
 ":"                             								return 'TXT';
 "+"                                                             return '+';
 "-"                                                             return '-';
+"()"                                                            return '()';
 <<EOF>>                                                         return 'NEWLINE';
 .                                                               return 'INVALID';
 
@@ -119,6 +147,7 @@ line
 	: SPACE statement { $$ = $2 }
 	| statement { $$ = $1 }
 	| NEWLINE { $$=[]; }
+	| INVALID { $$=[]; }
 	;
 
 box_section
@@ -236,7 +265,10 @@ 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;}
 
 	;
 
@@ -304,6 +336,20 @@ signal
 	{ $$ = [$1,$4,{type: 'addMessage', from:$1.actor, to:$4.actor, signalType:$2, msg:$5},
 	             {type: 'activeEnd', signalType: yy.LINETYPE.ACTIVE_END, actor: $1.actor}
 	             ]}
+    | actor signaltype '()' actor text2
+	{ $$ = [$1,$4,{type: 'addMessage', from:$1.actor, to:$4.actor, signalType:$2, msg:$5, activate: true, centralConnection: yy.LINETYPE.CENTRAL_CONNECTION},
+	              {type: 'centralConnection', signalType: yy.LINETYPE.CENTRAL_CONNECTION, actor: $4.actor, }
+	             ]}
+    
+	| actor '()' signaltype actor text2
+	{ $$ = [$1,$4,{type: 'addMessage', from:$1.actor, to:$4.actor, signalType:$3, msg:$5, activate: false, centralConnection: yy.LINETYPE.CENTRAL_CONNECTION_REVERSE},
+	              {type: 'centralConnectionReverse', signalType: yy.LINETYPE.CENTRAL_CONNECTION_REVERSE, actor: $1.actor}
+	             ]}
+	| actor '()' signaltype '()' actor text2
+	{ $$ = [$1,$5,{type: 'addMessage', from:$1.actor, to:$5.actor, signalType:$3, msg:$6, activate: true, centralConnection: yy.LINETYPE.CENTRAL_CONNECTION_DUAL},
+	 			 {type: 'centralConnection', signalType: yy.LINETYPE.CENTRAL_CONNECTION, actor: $5.actor, },
+				 {type: 'centralConnectionReverse', signalType: yy.LINETYPE.CENTRAL_CONNECTION_REVERSE, actor: $1.actor}
+	             ]}
 	| actor signaltype actor text2
 	{ $$ = [$1,$3,{type: 'addMessage', from:$1.actor, to:$3.actor, signalType:$2, msg:$4}]}
 	;
@@ -337,7 +383,28 @@ signaltype
 	: SOLID_OPEN_ARROW  { $$ = yy.LINETYPE.SOLID_OPEN; }
 	| DOTTED_OPEN_ARROW { $$ = yy.LINETYPE.DOTTED_OPEN; }
 	| SOLID_ARROW       { $$ = yy.LINETYPE.SOLID; }
-	| BIDIRECTIONAL_SOLID_ARROW       { $$ = yy.LINETYPE.BIDIRECTIONAL_SOLID; }
+	
+	| SOLID_ARROW_TOP    { $$ = yy.LINETYPE.SOLID_TOP; }
+	| SOLID_ARROW_BOTTOM { $$ = yy.LINETYPE.SOLID_BOTTOM; }
+	| STICK_ARROW_TOP    { $$ = yy.LINETYPE.STICK_TOP; }
+	| STICK_ARROW_BOTTOM { $$ = yy.LINETYPE.STICK_BOTTOM; }
+
+	| SOLID_ARROW_TOP_DOTTED    { $$ = yy.LINETYPE.SOLID_TOP_DOTTED; }	
+	| SOLID_ARROW_BOTTOM_DOTTED { $$ = yy.LINETYPE.SOLID_BOTTOM_DOTTED; }
+	| STICK_ARROW_TOP_DOTTED    { $$ = yy.LINETYPE.STICK_TOP_DOTTED; }
+	| STICK_ARROW_BOTTOM_DOTTED { $$ = yy.LINETYPE.STICK_BOTTOM_DOTTED; }
+
+	| SOLID_ARROW_TOP_REVERSE    { $$ = yy.LINETYPE.SOLID_ARROW_TOP_REVERSE; }
+	| SOLID_ARROW_BOTTOM_REVERSE { $$ = yy.LINETYPE.SOLID_ARROW_BOTTOM_REVERSE; }
+	| STICK_ARROW_TOP_REVERSE    { $$ = yy.LINETYPE.STICK_ARROW_TOP_REVERSE; }
+	| STICK_ARROW_BOTTOM_REVERSE { $$ = yy.LINETYPE.STICK_ARROW_BOTTOM_REVERSE; }
+
+	| SOLID_ARROW_TOP_REVERSE_DOTTED    { $$ = yy.LINETYPE.SOLID_ARROW_TOP_REVERSE_DOTTED; }
+	| SOLID_ARROW_BOTTOM_REVERSE_DOTTED { $$ = yy.LINETYPE.SOLID_ARROW_BOTTOM_REVERSE_DOTTED; }
+	| STICK_ARROW_TOP_REVERSE_DOTTED    { $$ = yy.LINETYPE.STICK_ARROW_TOP_REVERSE_DOTTED; }
+	| STICK_ARROW_BOTTOM_REVERSE_DOTTED { $$ = yy.LINETYPE.STICK_ARROW_BOTTOM_REVERSE_DOTTED; }
+
+  | BIDIRECTIONAL_SOLID_ARROW       { $$ = yy.LINETYPE.BIDIRECTIONAL_SOLID; }
 	| DOTTED_ARROW      { $$ = yy.LINETYPE.DOTTED; }
 	| BIDIRECTIONAL_DOTTED_ARROW      { $$ = yy.LINETYPE.BIDIRECTIONAL_DOTTED; }
 	| SOLID_CROSS       { $$ = yy.LINETYPE.SOLID_CROSS; }
@@ -350,4 +417,4 @@ text2
   : TXT {$$ = yy.parseMessage($1.trim().substring(1)) }
   ;
 
-%%
+%%

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

@@ -64,6 +64,30 @@ const LINETYPE = {
   PAR_OVER_START: 32,
   BIDIRECTIONAL_SOLID: 33,
   BIDIRECTIONAL_DOTTED: 34,
+
+  SOLID_TOP: 41,
+  SOLID_BOTTOM: 42,
+  STICK_TOP: 43,
+  STICK_BOTTOM: 44,
+
+  SOLID_ARROW_TOP_REVERSE: 45,
+  SOLID_ARROW_BOTTOM_REVERSE: 46,
+  STICK_ARROW_TOP_REVERSE: 47,
+  STICK_ARROW_BOTTOM_REVERSE: 48,
+
+  SOLID_TOP_DOTTED: 51,
+  SOLID_BOTTOM_DOTTED: 52,
+  STICK_TOP_DOTTED: 53,
+  STICK_BOTTOM_DOTTED: 54,
+
+  SOLID_ARROW_TOP_REVERSE_DOTTED: 55,
+  SOLID_ARROW_BOTTOM_REVERSE_DOTTED: 56,
+  STICK_ARROW_TOP_REVERSE_DOTTED: 57,
+  STICK_ARROW_BOTTOM_REVERSE_DOTTED: 58,
+
+  CENTRAL_CONNECTION: 59,
+  CENTRAL_CONNECTION_REVERSE: 60,
+  CENTRAL_CONNECTION_DUAL: 61,
 } as const;
 
 const ARROWTYPE = {
@@ -148,6 +172,12 @@ 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
@@ -244,7 +274,8 @@ export class SequenceDB implements DiagramDB {
     idTo?: Message['to'],
     message?: { text: string; wrap: boolean },
     messageType?: number,
-    activate = false
+    activate = false,
+    centralConnection?: number
   ) {
     if (messageType === this.LINETYPE.ACTIVE_END) {
       const cnt = this.activationCount(idFrom ?? '');
@@ -271,6 +302,7 @@ export class SequenceDB implements DiagramDB {
       wrap: message?.wrap ?? this.autoWrap(),
       type: messageType,
       activate,
+      centralConnection: centralConnection ?? 0,
     });
     return true;
   }
@@ -563,6 +595,12 @@ export class SequenceDB implements DiagramDB {
         case 'activeStart':
           this.addSignal(param.actor, undefined, undefined, param.signalType);
           break;
+        case 'centralConnection':
+          this.addSignal(param.actor, undefined, undefined, param.signalType);
+          break;
+        case 'centralConnectionReverse':
+          this.addSignal(param.actor, undefined, undefined, param.signalType);
+          break;
         case 'activeEnd':
           this.addSignal(param.actor, undefined, undefined, param.signalType);
           break;
@@ -606,7 +644,14 @@ export class SequenceDB implements DiagramDB {
               this.state.records.lastDestroyed = undefined;
             }
           }
-          this.addSignal(param.from, param.to, param.msg, param.signalType, param.activate);
+          this.addSignal(
+            param.from,
+            param.to,
+            param.msg,
+            param.signalType,
+            param.activate,
+            param.centralConnection
+          );
           break;
         case 'boxStart':
           this.addBox(param.boxData);