fix: address lock file issues

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

.build/common.ts

@@ -38,6 +38,11 @@ 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

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

.changeset/brave-memes-flash.md

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

.changeset/busy-mirrors-try.md

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

.changeset/chatty-insects-dream.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix(treemap): Fixed treemap classDef style application to properly apply user-defined styles

.changeset/chilly-words-march.md

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

.changeset/curly-apes-prove.md

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

.changeset/deep-pumas-run.md

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

.changeset/four-eyes-wish.md

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

.changeset/lazy-brooms-battle.md

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

.changeset/loud-results-melt.md

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

.changeset/moody-fans-try.md

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

.changeset/proud-colts-smell.md

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

.changeset/revert-marked-dependency.md

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

.changeset/short-seals-sort.md

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

.changeset/slow-lemons-know.md

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

.changeset/sweet-games-build.md

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

.changeset/swift-cloths-run.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Add markdown-specific behavior on top of the common rendering changes.

.changeset/ten-plums-bet.md

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

.changeset/tricky-rivers-stand.md

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

.changeset/wide-lines-trade.md

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

.cspell/code-terms.txt

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

.cspell/libraries.txt

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

.esbuild/util.ts

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

.github/workflows/e2e-timings.yml

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

.github/workflows/release.yml

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

.github/workflows/scorecard.yml

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

.github/workflows/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@84ae59a2cdc2258d6fa0732dd66352dddae2a412 # v7.0.9
+        uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e # v7.0.8
         with:
           branch: update-browserslist
           title: Update Browserslist

.github/workflows/validate-lockfile.yml

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

.vite/build.ts

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

Dockerfile

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

cypress/helpers/util.ts

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

cypress/integration/rendering/c4.spec.js

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

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

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

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

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

cypress/integration/rendering/erDiagram.spec.js

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

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

@@ -79,18 +79,6 @@ describe('Flowchart v2', () => {
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
-  it('6a: should render complex HTML in labels with sandbox security', () => {
-    imgSnapshotTest(
-      `flowchart TD
-    A[Christmas] -->|Get money| B(Go shopping)
-    B --> C{Let me think}
-    C -->|One| D[Laptop]
-    C -->|Two| E[iPhone]
-    C -->|Three| F[fa:fa-car Car]
-      `,
-      { securityLevel: 'sandbox', flowchart: { htmlLabels: true } }
-    );
-  });
   it('7: should render a flowchart when useMaxWidth is true (default)', () => {
     renderGraph(
       `flowchart TD
@@ -1186,8 +1174,8 @@ end
     end
     githost["Github, Gitlab, BitBucket, etc."]
     githost2["\`Github, Gitlab, BitBucket, etc.\`"]
-    a["\`1.\`"]
-    b["\`- x\`"]
+    a["1."]
+    b["- x"]
       `;
 
     it('should render raw strings', () => {

cypress/integration/rendering/flowchart.spec.js

@@ -774,21 +774,6 @@ describe('Graph', () => {
       expect(svg).to.not.have.attr('style');
     });
   });
-  it('40: should add edge animation', () => {
-    renderGraph(
-      `
-      flowchart TD
-          A(["Start"]) L_A_B_0@--> B{"Decision"}
-          B --> C["Option A"] & D["Option B"]
-          style C stroke-width:4px,stroke-dasharray: 5
-          L_A_B_0@{ animation: slow } 
-          L_B_D_0@{ animation: fast }`,
-      { screenshot: false }
-    );
-    // Verify animation classes are applied to both edges
-    cy.get('path#L_A_B_0').should('have.class', 'edge-animation-slow');
-    cy.get('path#L_B_D_0').should('have.class', 'edge-animation-fast');
-  });
   it('58: handle styling with style expressions', () => {
     imgSnapshotTest(
       `
@@ -988,64 +973,4 @@ graph TD
       }
     );
   });
-
-  it('70: should render a subgraph with direction TD', () => {
-    imgSnapshotTest(
-      `
-      flowchart LR
-        subgraph A
-          direction TD
-          a --> b
-        end
-      `,
-      {
-        fontFamily: 'courier',
-      }
-    );
-  });
-});
-it('#5824: should be able to render string and markdown labels', () => {
-  imgSnapshotTest(
-    `
-flowchart TB
-    mermaid{"What is\nyourmermaid version?"} --> v10["<11"] --"\`<**1**1\`"--> fine["No bug"]
-    mermaid --> v11[">= v11"] -- ">= v11" --> broken["Affected by https://github.com/mermaid-js/mermaid/issues/5824"]
-    subgraph subgraph1["\`How to fix **fix**\`"]
-        broken --> B["B"]
-    end
-    githost["Github, Gitlab, BitBucket, etc."]
-    githost2["\`Github, Gitlab, BitBucket, etc.\`"]
-    a["1."]
-    b["- x"]
-    `,
-    {
-      flowchart: { htmlLabels: true },
-      securityLevel: 'loose',
-    }
-  );
-});
-it('69: should render subgraphs with adhoc list headings', () => {
-  imgSnapshotTest(
-    `
-    graph TB
-      subgraph "1. first"
-        a1-->a2
-      end
-      subgraph 2. second
-        b1-->b2
-      end
-      `,
-    { fontFamily: 'courier' }
-  );
-});
-it('70: should render subgraphs with markdown headings', () => {
-  imgSnapshotTest(
-    `
-    graph TB
-      subgraph "\`**strong**\`"
-        a1-->a2
-      end
-      `,
-    { fontFamily: 'courier' }
-  );
 });

cypress/integration/rendering/gantt.spec.js

@@ -833,34 +833,4 @@ describe('Gantt diagram', () => {
       {}
     );
   });
-  it('should handle seconds-only format with tickInterval (issue #5496)', () => {
-    imgSnapshotTest(
-      `
-     gantt
-     tickInterval 1second
-     dateFormat ss
-     axisFormat %s
-
-     section Network Request
-     RTT : rtt, 0, 20
-    `,
-      {}
-    );
-  });
-  it('should handle dates with year typo like 202 instead of 2024 (issue #5496)', () => {
-    imgSnapshotTest(
-      `
-     gantt
-     title Schedule
-     dateFormat YYYY-MM-DD
-     tickInterval 1week
-     axisFormat %m-%d
-
-     section Vacation
-     London : 2024-12-01, 7d
-     London : 202-12-01, 7d
-    `,
-      {}
-    );
-  });
 });

cypress/integration/rendering/mindmap.spec.ts

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

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

@@ -655,315 +655,5 @@ 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,167 +1053,4 @@ 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/treemap.spec.ts

@@ -327,97 +327,8 @@ classDef sales fill:#c3a66b,stroke:#333;
       {}
     );
   });
-
-  it('12: should apply classDef fill color to leaf nodes', () => {
-    imgSnapshotTest(
-      `treemap-beta
-"Root"
-    "Item A": 30:::redClass
-    "Item B": 20
-    "Item C": 25:::blueClass
-
-classDef redClass fill:#ff0000;
-classDef blueClass fill:#0000ff;
-      `,
-      {}
-    );
-  });
-
-  it('13: should apply classDef stroke styles to sections', () => {
-    imgSnapshotTest(
-      `treemap-beta
-      %% This is a comment
-      "Category A":::thickBorder
-          "Item A1": 10
-          "Item A2": 20
-      %% Another comment
-      "Category B":::dashedBorder
-          "Item B1": 15
-          "Item B2": 25
-
-classDef thickBorder stroke:red,stroke-width:8px;
-classDef dashedBorder stroke:black,stroke-dasharray:5,stroke-width:8px;
-      `,
-      {}
-    );
-  });
-
-  it('14: should apply classDef color to text labels', () => {
-    imgSnapshotTest(
-      `treemap-beta
-"Products"
-    "Electronics":::whiteText
-        "Phones": 40
-        "Laptops": 30
-    "Furniture":::darkText
-        "Chairs": 25
-        "Tables": 20
-
-classDef whiteText fill:#2c3e50,color:#ffffff;
-classDef darkText fill:#ecf0f1,color:#000000;
-      `,
-      {}
-    );
-  });
-
-  it('15: should apply multiple classDef properties simultaneously', () => {
-    imgSnapshotTest(
-      `treemap-beta
-"Budget"
-    "Critical":::critical
-        "Server Costs": 50000
-        "Salaries": 80000
-    "Normal":::normal
-        "Office Supplies": 5000
-        "Marketing": 15000
-classDef critical fill:#e74c3c,color:#fff,stroke:#c0392b,stroke-width:3px;
-classDef normal fill:#3498db,color:#fff,stroke:#2980b9,stroke-width:1px;
-      `,
-      {}
-    );
-  });
-
-  it('16: should handle classDef on nested sections and leaves', () => {
-    imgSnapshotTest(
-      `treemap-beta
-"Company"
-    "Engineering":::engSection
-        "Frontend": 30:::highlight
-        "Backend": 40
-        "DevOps": 20:::highlight
-    "Sales"
-        "Direct": 35
-        "Channel": 25:::highlight
-
-classDef engSection fill:#9b59b6,stroke:#8e44ad,stroke-width:2px;
-classDef highlight fill:#f39c12,color:#000,stroke:#e67e22,stroke-width:2px;
-      `,
-      {}
-    );
-  });
-
   /*
-  it.skip('17: should render a treemap with title', () => {
+  it.skip('12: should render a treemap with title', () => {
     imgSnapshotTest(
       `
     treemap-beta

cypress/platform/knsv2.html

@@ -110,48 +110,6 @@
       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,10 +603,6 @@
       </div>
       <div class="test">
         <pre class="mermaid">
-          ---
-            config:
-              theme: dark
-          ---
           classDiagram
             test ()--() test2
         </pre>

cypress/timings.json

@@ -2,227 +2,227 @@
   "durations": [
     {
       "spec": "cypress/integration/other/configuration.spec.js",
-      "duration": 5944
+      "duration": 5841
     },
     {
       "spec": "cypress/integration/other/external-diagrams.spec.js",
-      "duration": 2180
+      "duration": 2138
     },
     {
       "spec": "cypress/integration/other/ghsa.spec.js",
-      "duration": 3282
+      "duration": 3370
     },
     {
       "spec": "cypress/integration/other/iife.spec.js",
-      "duration": 2137
+      "duration": 2052
     },
     {
       "spec": "cypress/integration/other/interaction.spec.js",
-      "duration": 11926
+      "duration": 12243
     },
     {
       "spec": "cypress/integration/other/rerender.spec.js",
-      "duration": 2021
+      "duration": 2065
     },
     {
       "spec": "cypress/integration/other/xss.spec.js",
-      "duration": 31377
+      "duration": 31288
     },
     {
       "spec": "cypress/integration/rendering/appli.spec.js",
-      "duration": 3442
+      "duration": 3421
     },
     {
       "spec": "cypress/integration/rendering/architecture.spec.ts",
-      "duration": 103
+      "duration": 97
     },
     {
       "spec": "cypress/integration/rendering/block.spec.js",
-      "duration": 18390
+      "duration": 18500
     },
     {
       "spec": "cypress/integration/rendering/c4.spec.js",
-      "duration": 6468
+      "duration": 5793
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-elk-v3.spec.js",
-      "duration": 41282
+      "duration": 40966
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-handDrawn-v3.spec.js",
-      "duration": 39226
+      "duration": 39176
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-v2.spec.js",
-      "duration": 25028
+      "duration": 23468
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-v3.spec.js",
-      "duration": 38458
+      "duration": 38291
     },
     {
       "spec": "cypress/integration/rendering/classDiagram.spec.js",
-      "duration": 17305
+      "duration": 16949
     },
     {
       "spec": "cypress/integration/rendering/conf-and-directives.spec.js",
-      "duration": 9762
+      "duration": 9480
     },
     {
       "spec": "cypress/integration/rendering/current.spec.js",
-      "duration": 2923
+      "duration": 2753
     },
     {
       "spec": "cypress/integration/rendering/erDiagram-unified.spec.js",
-      "duration": 89135
+      "duration": 88028
     },
     {
       "spec": "cypress/integration/rendering/erDiagram.spec.js",
-      "duration": 18976
+      "duration": 15615
     },
     {
       "spec": "cypress/integration/rendering/errorDiagram.spec.js",
-      "duration": 3643
+      "duration": 3706
     },
     {
       "spec": "cypress/integration/rendering/flowchart-elk.spec.js",
-      "duration": 43103
+      "duration": 43905
     },
     {
       "spec": "cypress/integration/rendering/flowchart-handDrawn.spec.js",
-      "duration": 31637
+      "duration": 31217
     },
     {
       "spec": "cypress/integration/rendering/flowchart-icon.spec.js",
-      "duration": 7630
+      "duration": 7531
     },
     {
       "spec": "cypress/integration/rendering/flowchart-shape-alias.spec.ts",
-      "duration": 25642
+      "duration": 25423
     },
     {
       "spec": "cypress/integration/rendering/flowchart-v2.spec.js",
-      "duration": 50365
+      "duration": 49664
     },
     {
       "spec": "cypress/integration/rendering/flowchart.spec.js",
-      "duration": 32790
+      "duration": 32525
     },
     {
       "spec": "cypress/integration/rendering/gantt.spec.js",
-      "duration": 23065
+      "duration": 20915
     },
     {
       "spec": "cypress/integration/rendering/gitGraph.spec.js",
-      "duration": 52238
+      "duration": 53556
     },
     {
       "spec": "cypress/integration/rendering/iconShape.spec.ts",
-      "duration": 289380
+      "duration": 283038
     },
     {
       "spec": "cypress/integration/rendering/imageShape.spec.ts",
-      "duration": 59265
+      "duration": 59434
     },
     {
       "spec": "cypress/integration/rendering/info.spec.ts",
-      "duration": 3269
+      "duration": 3101
     },
     {
       "spec": "cypress/integration/rendering/journey.spec.js",
-      "duration": 7470
+      "duration": 7099
     },
     {
       "spec": "cypress/integration/rendering/kanban.spec.ts",
-      "duration": 7980
+      "duration": 7567
     },
     {
       "spec": "cypress/integration/rendering/katex.spec.js",
-      "duration": 3896
+      "duration": 3817
     },
     {
       "spec": "cypress/integration/rendering/marker_unique_id.spec.js",
-      "duration": 2640
+      "duration": 2624
     },
     {
       "spec": "cypress/integration/rendering/mindmap-tidy-tree.spec.js",
-      "duration": 4327
+      "duration": 4246
     },
     {
       "spec": "cypress/integration/rendering/mindmap.spec.ts",
-      "duration": 12588
+      "duration": 11967
     },
     {
       "spec": "cypress/integration/rendering/newShapes.spec.ts",
-      "duration": 153490
+      "duration": 151914
     },
     {
       "spec": "cypress/integration/rendering/oldShapes.spec.ts",
-      "duration": 117833
+      "duration": 116698
     },
     {
       "spec": "cypress/integration/rendering/packet.spec.ts",
-      "duration": 4975
+      "duration": 4967
     },
     {
       "spec": "cypress/integration/rendering/pie.spec.ts",
-      "duration": 6682
+      "duration": 6700
     },
     {
       "spec": "cypress/integration/rendering/quadrantChart.spec.js",
-      "duration": 8972
+      "duration": 8963
     },
     {
       "spec": "cypress/integration/rendering/radar.spec.js",
-      "duration": 5631
+      "duration": 5540
     },
     {
       "spec": "cypress/integration/rendering/requirement.spec.js",
-      "duration": 2776
+      "duration": 2782
     },
     {
       "spec": "cypress/integration/rendering/requirementDiagram-unified.spec.js",
-      "duration": 54373
+      "duration": 54797
     },
     {
       "spec": "cypress/integration/rendering/sankey.spec.ts",
-      "duration": 7203
+      "duration": 6914
     },
     {
       "spec": "cypress/integration/rendering/sequencediagram-v2.spec.js",
-      "duration": 31707
+      "duration": 20481
     },
     {
       "spec": "cypress/integration/rendering/sequencediagram.spec.js",
-      "duration": 48327
+      "duration": 38490
     },
     {
       "spec": "cypress/integration/rendering/stateDiagram-v2.spec.js",
-      "duration": 30728
+      "duration": 30766
     },
     {
       "spec": "cypress/integration/rendering/stateDiagram.spec.js",
-      "duration": 16881
+      "duration": 16705
     },
     {
       "spec": "cypress/integration/rendering/theme.spec.js",
-      "duration": 30715
+      "duration": 30928
     },
     {
       "spec": "cypress/integration/rendering/timeline.spec.ts",
-      "duration": 8586
+      "duration": 8424
     },
     {
       "spec": "cypress/integration/rendering/treemap.spec.ts",
-      "duration": 15184
+      "duration": 12533
     },
     {
       "spec": "cypress/integration/rendering/xyChart.spec.js",
-      "duration": 21282
+      "duration": 21197
     },
     {
       "spec": "cypress/integration/rendering/zenuml.spec.js",
-      "duration": 3576
+      "duration": 3455
     }
   ]
 }

demos/classchart.html

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

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

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

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

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

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

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

docs/ecosystem/integrations-community.md

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

docs/ecosystem/mermaid-chart.md

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

docs/syntax/block.md

@@ -402,7 +402,7 @@ block
   blockArrowId4<["Label"]>(down)
   blockArrowId5<["Label"]>(x)
   blockArrowId6<["Label"]>(y)
-  blockArrowId7<["Label"]>(x, down)
+  blockArrowId6<["Label"]>(x, down)
 ```
 
 ```mermaid
@@ -413,7 +413,7 @@ block
   blockArrowId4<["Label"]>(down)
   blockArrowId5<["Label"]>(x)
   blockArrowId6<["Label"]>(y)
-  blockArrowId7<["Label"]>(x, down)
+  blockArrowId6<["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<br>can swim<br>can dive<br>can help in debugging"
+    note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
     Animal <|-- Fish
     Animal <|-- Zebra
     Animal : +int age
@@ -50,7 +50,7 @@ title: Animal example
 classDiagram
     note "From Duck till Zebra"
     Animal <|-- Duck
-    note for Duck "can fly<br>can swim<br>can dive<br>can help in debugging"
+    note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
     Animal <|-- Fish
     Animal <|-- Zebra
     Animal : +int age

docs/syntax/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,11 +196,7 @@ sequenceDiagram
 
 ### Aliases
 
-The actor can have a convenient identifier and a descriptive label. Aliases can be defined in two ways: using external syntax with the `as` keyword, or inline within the configuration object.
-
-#### External Alias Syntax
-
-You can define an alias using the `as` keyword after the participant declaration:
+The actor can have a convenient identifier and a descriptive label.
 
 ```mermaid-example
 sequenceDiagram
@@ -218,78 +214,6 @@ sequenceDiagram
     J->>A: Great!
 ```
 
-The external alias syntax also works with participant stereotype configurations, allowing you to combine type specification with aliases:
-
-```mermaid-example
-sequenceDiagram
-    participant API@{ "type": "boundary" } as Public API
-    actor DB@{ "type": "database" } as User Database
-    participant Svc@{ "type": "control" } as Auth Service
-    API->>Svc: Authenticate
-    Svc->>DB: Query user
-    DB-->>Svc: User data
-    Svc-->>API: Token
-```
-
-```mermaid
-sequenceDiagram
-    participant API@{ "type": "boundary" } as Public API
-    actor DB@{ "type": "database" } as User Database
-    participant Svc@{ "type": "control" } as Auth Service
-    API->>Svc: Authenticate
-    Svc->>DB: Query user
-    DB-->>Svc: User data
-    Svc-->>API: Token
-```
-
-#### Inline Alias Syntax
-
-Alternatively, you can define an alias directly inside the configuration object using the `"alias"` field. This works with both `participant` and `actor` keywords:
-
-```mermaid-example
-sequenceDiagram
-    participant API@{ "type": "boundary", "alias": "Public API" }
-    participant Auth@{ "type": "control", "alias": "Auth Service" }
-    participant DB@{ "type": "database", "alias": "User Database" }
-    API->>Auth: Login request
-    Auth->>DB: Query user
-    DB-->>Auth: User data
-    Auth-->>API: Access token
-```
-
-```mermaid
-sequenceDiagram
-    participant API@{ "type": "boundary", "alias": "Public API" }
-    participant Auth@{ "type": "control", "alias": "Auth Service" }
-    participant DB@{ "type": "database", "alias": "User Database" }
-    API->>Auth: Login request
-    Auth->>DB: Query user
-    DB-->>Auth: User data
-    Auth-->>API: Access token
-```
-
-#### Alias Precedence
-
-When both inline alias (in the configuration object) and external alias (using `as` keyword) are provided, the **external alias takes precedence**:
-
-```mermaid-example
-sequenceDiagram
-    participant API@{ "type": "boundary", "alias": "Internal Name" } as External Name
-    participant DB@{ "type": "database", "alias": "Internal DB" } as External DB
-    API->>DB: Query
-    DB-->>API: Result
-```
-
-```mermaid
-sequenceDiagram
-    participant API@{ "type": "boundary", "alias": "Internal Name" } as External Name
-    participant DB@{ "type": "database", "alias": "Internal DB" } as External DB
-    API->>DB: Query
-    DB-->>API: Result
-```
-
-In the example above, "External Name" and "External DB" will be displayed, not "Internal Name" and "Internal DB".
-
 ### Actor Creation and Destruction (v10.3.0+)
 
 It is possible to create and destroy actors by messages. To do so, add a create or destroy directive before the message.
@@ -405,11 +329,7 @@ Messages can be of two displayed either solid or with a dotted line.
 [Actor][Arrow][Actor]:Message text
 ```
 
-Lines can be solid or dotted, and can end with various types of arrowheads, crosses, or open arrows.
-
-#### Supported Arrow Types
-
-**Standard Arrow Types**
+There are ten types of arrows currently supported:
 
 | Type     | Description                                          |
 | -------- | ---------------------------------------------------- |
@@ -424,58 +344,6 @@ Lines can be solid or dotted, and can end with various types of arrowheads, cros
 | `-)`     | 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.56.5",
-    "@argos-ci/cypress": "^6.2.2",
-    "@changesets/changelog-github": "^0.5.2",
-    "@changesets/cli": "^2.29.8",
-    "@cspell/eslint-plugin": "^9.3.2",
-    "@cypress/code-coverage": "^3.14.7",
+    "@applitools/eyes-cypress": "^3.55.2",
+    "@argos-ci/cypress": "^6.1.1",
+    "@changesets/changelog-github": "^0.5.1",
+    "@changesets/cli": "^2.29.7",
+    "@cspell/eslint-plugin": "^8.19.4",
+    "@cypress/code-coverage": "^3.14.6",
     "@eslint/js": "^9.26.0",
     "@rollup/plugin-typescript": "^12.1.4",
     "@types/cors": "^2.8.19",
-    "@types/express": "^5.0.6",
+    "@types/express": "^5.0.3",
     "@types/js-yaml": "^4.0.9",
     "@types/jsdom": "^21.1.7",
-    "@types/lodash": "^4.17.21",
+    "@types/lodash": "^4.17.20",
     "@types/mdast": "^4.0.4",
-    "@types/node": "^22.19.1",
+    "@types/node": "^22.18.6",
     "@types/rollup-plugin-visualizer": "^5.0.3",
     "@vitest/coverage-v8": "^3.2.4",
     "@vitest/spy": "^3.2.4",
@@ -88,30 +88,30 @@
     "cors": "^2.8.5",
     "cpy-cli": "^5.0.0",
     "cross-env": "^7.0.3",
-    "cspell": "^9.3.2",
+    "cspell": "^9.2.1",
     "cypress": "^14.5.4",
     "cypress-image-snapshot": "^4.0.1",
-    "cypress-split": "^1.24.25",
-    "esbuild": "^0.25.12",
+    "cypress-split": "^1.24.23",
+    "esbuild": "^0.25.10",
     "eslint": "^9.26.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-cypress": "^5.2.0",
+    "eslint-plugin-cypress": "^4.3.0",
     "eslint-plugin-html": "^8.1.3",
-    "eslint-plugin-jest": "^29.0.1",
-    "eslint-plugin-jsdoc": "^61.1.12",
+    "eslint-plugin-jest": "^28.14.0",
+    "eslint-plugin-jsdoc": "^50.8.0",
     "eslint-plugin-json": "^4.0.1",
     "eslint-plugin-lodash": "^8.0.0",
     "eslint-plugin-markdown": "^5.1.0",
     "eslint-plugin-no-only-tests": "^3.3.0",
     "eslint-plugin-tsdoc": "^0.4.0",
-    "eslint-plugin-unicorn": "^62.0.0",
-    "express": "^5.2.1",
+    "eslint-plugin-unicorn": "^59.0.1",
+    "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.1",
+    "js-yaml": "^4.1.0",
     "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.5",
-    "start-server-and-test": "^2.1.3",
+    "rollup-plugin-visualizer": "^6.0.3",
+    "start-server-and-test": "^2.1.2",
     "tslib": "^2.8.1",
-    "tsx": "^4.20.6",
+    "tsx": "^4.20.5",
     "typescript": "~5.7.3",
     "typescript-eslint": "^8.38.0",
-    "vite": "^7.0.8",
+    "vite": "^7.0.7",
     "vite-plugin-istanbul": "^7.0.0",
     "vitest": "^3.2.4"
   },

packages/mermaid-layout-elk/package.json

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

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

@@ -67,22 +67,7 @@ export const render = async (
 
     // Add the element to the DOM
     if (!node.isGroup) {
-      // 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,
-      };
+      const child = node as NodeWithVertex;
       graph.children.push(child);
       nodeDb[node.id] = node;
 
@@ -165,7 +150,7 @@ export const render = async (
         domId: { node: () => any; attr: (arg0: string, arg1: string) => void };
       }) {
         if (node) {
-          nodeDb[node.id] ??= {};
+          nodeDb[node.id] = node;
           nodeDb[node.id].offset = {
             posX: node.x + relX,
             posY: node.y + relY,
@@ -875,13 +860,11 @@ 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

@@ -0,0 +1,48 @@
+{
+  "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

@@ -0,0 +1,22 @@
+/**
+ * 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

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

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

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

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

@@ -0,0 +1,11 @@
+{
+  "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,9 +19,7 @@
     "mermaid",
     "layout"
   ],
-  "scripts": {
-    "clean": "rimraf dist"
-  },
+  "scripts": {},
   "repository": {
     "type": "git",
     "url": "https://github.com/mermaid-js/mermaid"

packages/mermaid-zenuml/package.json

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

packages/mermaid/CHANGELOG.md

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

packages/mermaid/package.json

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

packages/mermaid/src/dagre-wrapper/shapes/util.js

@@ -4,7 +4,6 @@ import { getConfig } from '../../diagram-api/diagramAPI.js';
 import { select } from 'd3';
 import { evaluate, sanitizeText } from '../../diagrams/common/common.js';
 import { decodeEntities } from '../../utils.js';
-import { configureLabelImages } from '../../rendering-util/rendering-elements/shapes/labelImageUtils.js';
 
 export const labelHelper = async (parent, node, _classes, isNode) => {
   const config = getConfig();
@@ -66,7 +65,46 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
     const dv = select(text);
 
     // if there are images, need to wait for them to load before getting the bounding box
-    await configureLabelImages(div, labelText);
+    const images = div.getElementsByTagName('img');
+    if (images) {
+      const noImgText = labelText.replace(/<img[^>]*>/g, '').trim() === '';
+
+      await Promise.all(
+        [...images].map(
+          (img) =>
+            new Promise((res) => {
+              /**
+               *
+               */
+              function setupImage() {
+                img.style.display = 'flex';
+                img.style.flexDirection = 'column';
+
+                if (noImgText) {
+                  // default size if no text
+                  const bodyFontSize = config.fontSize
+                    ? config.fontSize
+                    : window.getComputedStyle(document.body).fontSize;
+                  const enlargingFactor = 5;
+                  const width = parseInt(bodyFontSize, 10) * enlargingFactor + 'px';
+                  img.style.minWidth = width;
+                  img.style.maxWidth = width;
+                } else {
+                  img.style.width = '100%';
+                }
+                res(img);
+              }
+              setTimeout(() => {
+                if (img.complete) {
+                  setupImage();
+                }
+              });
+              img.addEventListener('error', setupImage);
+              img.addEventListener('load', setupImage);
+            })
+        )
+      );
+    }
 
     bbox = div.getBoundingClientRect();
     dv.attr('width', bbox.width);

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

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

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

@@ -3,7 +3,9 @@ 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 } from '../../utils.js';
+import { cleanAndMerge, getEdgeId } from '../../utils.js';
+import type { LayoutData, Node, Edge } from '../../rendering-util/types.js';
+
 import {
   clear as commonClear,
   getAccDescription,
@@ -351,15 +353,147 @@ export class ArchitectureDB implements DiagramDB {
   public getDiagramTitle = getDiagramTitle;
   public getAccDescription = getAccDescription;
   public setAccDescription = setAccDescription;
-}
 
-/**
- * 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];
-// }
+  /**
+   * 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;
+  }
+}

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.js';
+import { renderer } from './architectureRenderer-unified.js';
 
 export const diagram: DiagramDefinition = {
   parser,

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

@@ -0,0 +1,51 @@
+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,6 +2,7 @@ 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        |
@@ -256,7 +257,8 @@ export interface ArchitectureDB extends DiagramDBBase<ArchitectureDiagramConfig>
   getEdges: () => ArchitectureEdge[];
   setElementForId: (id: string, element: D3Element) => void;
   getElementById: (id: string) => D3Element;
-  getDataStructures: () => ArchitectureDataStructures;
+  getData: () => LayoutData;
+  getDirection: () => string;
 }
 
 export type ArchitectureAdjacencyList = Record<string, ArchitectureDirectionPairMap>;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -66,15 +66,12 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 \}\|                            return 'ONE_OR_MORE';
 "one"                           return 'ONLY_ONE';
 "only one"                      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';
+"1"                             return 'ONLY_ONE';
 \|\|                            return 'ONLY_ONE';
 o\|                             return 'ZERO_OR_ONE';
 o\{                             return 'ZERO_OR_MORE';
 \|\{                            return 'ONE_OR_MORE';
-u(?=[\.\-\|])                   return 'MD_PARENT';
+\s*u                            return 'MD_PARENT';
 \.\.                            return 'NON_IDENTIFYING';
 \-\-                            return 'IDENTIFYING';
 "to"                            return 'IDENTIFYING';
@@ -83,15 +80,13 @@ u(?=[\.\-\|])                   return 'MD_PARENT';
 \-\.                            return 'NON_IDENTIFYING';
 <style>([^\x00-\x7F]|\w|\-|\*)+ return 'STYLE_TEXT';
 <style>';'                      return 'SEMI';
-([^\x00-\x7F]|\w|\-|\*|\.)+      return 'UNICODE_TEXT';
+([^\x00-\x7F]|\w|\-|\*)+        return 'UNICODE_TEXT';
+[0-9]                           return 'NUM';
 .                               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 */
 
@@ -233,9 +228,6 @@ 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,90 +1001,4 @@ 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/flowDb.ts

@@ -85,17 +85,6 @@ export class FlowDB implements DiagramDB {
     return common.sanitizeText(txt, this.config);
   }
 
-  private sanitizeNodeLabelType(labelType?: string) {
-    switch (labelType) {
-      case 'markdown':
-      case 'string':
-      case 'text':
-        return labelType;
-      default:
-        return 'markdown';
-    }
-  }
-
   /**
    * Function to lookup domId from id in the graph definition.
    *
@@ -219,7 +208,6 @@ export class FlowDB implements DiagramDB {
 
       if (doc?.label) {
         vertex.text = doc?.label;
-        vertex.labelType = this.sanitizeNodeLabelType(doc?.labelType);
       }
       if (doc?.icon) {
         vertex.icon = doc?.icon;
@@ -279,7 +267,7 @@ export class FlowDB implements DiagramDB {
       if (edge.text.startsWith('"') && edge.text.endsWith('"')) {
         edge.text = edge.text.substring(1, edge.text.length - 1);
       }
-      edge.labelType = this.sanitizeNodeLabelType(linkTextObj.type);
+      edge.labelType = linkTextObj.type;
     }
 
     if (type !== undefined) {
@@ -714,7 +702,7 @@ You have to call mermaid.initialize.`
       title: title.trim(),
       classes: [],
       dir,
-      labelType: this.sanitizeNodeLabelType(_title?.type),
+      labelType: _title.type,
     };
 
     log.info('Adding', subGraph.id, subGraph.nodes, subGraph.dir);
@@ -1024,7 +1012,6 @@ You have to call mermaid.initialize.`
       const baseNode = {
         id: vertex.id,
         label: vertex.text,
-        labelType: vertex.labelType,
         labelStyle: '',
         parentId,
         padding: config.flowchart?.padding || 8,
@@ -1101,7 +1088,6 @@ You have to call mermaid.initialize.`
         id: subGraph.id,
         label: subGraph.title,
         labelStyle: '',
-        labelType: subGraph.labelType,
         parentId: parentDB.get(subGraph.id),
         padding: 8,
         cssCompiledStyles: this.getCompiledStyles(subGraph.classes),
@@ -1133,7 +1119,6 @@ You have to call mermaid.initialize.`
         end: rawEdge.end,
         type: rawEdge.type ?? 'normal',
         label: rawEdge.text,
-        labelType: rawEdge.labelType,
         labelpos: 'c',
         thickness: rawEdge.stroke,
         minlen: rawEdge.length,

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

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

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

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

packages/mermaid/src/diagrams/flowchart/types.ts

@@ -29,7 +29,7 @@ export interface FlowVertex {
   domId: string;
   haveCallback?: boolean;
   id: string;
-  labelType: 'markdown' | 'string' | 'text';
+  labelType: 'text';
   link?: string;
   linkTarget?: string;
   props?: any;
@@ -62,7 +62,7 @@ export interface FlowEdge {
   style?: string[];
   length?: number;
   text: string;
-  labelType: 'markdown' | 'string' | 'text';
+  labelType: 'text';
   classes: string[];
   id?: string;
   animation?: 'fast' | 'slow';

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

@@ -268,15 +268,7 @@ const fixTaskDates = function (startTime, endTime, dateFormat, excludes, include
 
 const getStartDate = function (prevTime, dateFormat, str) {
   str = str.trim();
-
-  // Helper function to check if format is a timestamp format (x or X)
-  const isTimestampFormat = (format) => {
-    const trimmedFormat = format.trim();
-    return trimmedFormat === 'x' || trimmedFormat === 'X';
-  };
-
-  // Handle timestamp formats (x, X) with numeric strings
-  if (isTimestampFormat(dateFormat) && /^\d+$/.test(str)) {
+  if ((dateFormat.trim() === 'x' || dateFormat.trim() === 'X') && /^\d+$/.test(str)) {
     return new Date(Number(str));
   }
   // Test for after
@@ -301,15 +293,13 @@ const getStartDate = function (prevTime, dateFormat, str) {
     return today;
   }
 
-  // Check for actual date set using dayjs strict parsing
+  // Check for actual date set
   let mDate = dayjs(str, dateFormat.trim(), true);
   if (mDate.isValid()) {
     return mDate.toDate();
   } else {
     log.debug('Invalid date:' + str);
     log.debug('With date format:' + dateFormat.trim());
-
-    // Timestamp formats can fall back to new Date()
     const d = new Date(str);
     if (
       d === undefined ||

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

@@ -505,27 +505,4 @@ describe('when using the ganttDb', function () {
     ganttDb.addTask('test1', 'id1,202304,1d');
     expect(() => ganttDb.getTasks()).toThrowError('Invalid date:202304');
   });
-
-  it('should handle seconds-only format with valid numeric values (issue #5496)', function () {
-    ganttDb.setDateFormat('ss');
-    ganttDb.addSection('Network Request');
-    ganttDb.addTask('RTT', 'rtt, 0, 20');
-    const tasks = ganttDb.getTasks();
-    expect(tasks).toHaveLength(1);
-    expect(tasks[0].task).toBe('RTT');
-    expect(tasks[0].id).toBe('rtt');
-  });
-
-  it('should handle dates with year typo like 202 instead of 2024 (issue #5496)', function () {
-    ganttDb.setDateFormat('YYYY-MM-DD');
-    ganttDb.addSection('Vacation');
-    ganttDb.addTask('London Trip 1', '2024-12-01, 7d');
-    ganttDb.addTask('London Trip 2', '202-12-01, 7d');
-    const tasks = ganttDb.getTasks();
-    expect(tasks).toHaveLength(2);
-    // First task should be in year 2024
-    expect(tasks[0].startTime.getFullYear()).toBe(2024);
-    // Second task will be parsed as year 202 (fallback to new Date())
-    expect(tasks[1].startTime.getFullYear()).toBe(202);
-  });
 });

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

@@ -1,5 +1,4 @@
 import dayjs from 'dayjs';
-import dayjsDuration from 'dayjs/plugin/duration.js';
 import { log } from '../../logger.js';
 import {
   select,
@@ -29,8 +28,6 @@ import common from '../common/common.js';
 import { getConfig } from '../../diagram-api/diagramAPI.js';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
 
-dayjs.extend(dayjsDuration);
-
 export const setConf = function () {
   log.debug('Something is calling, setConf, remove the call');
 };
@@ -81,7 +78,6 @@ const getMaxIntersections = (tasks, orderOffset) => {
 };
 
 let w;
-const MAX_TICK_COUNT = 10000;
 export const draw = function (text, id, version, diagObj) {
   const conf = getConfig().gantt;
 
@@ -606,27 +602,6 @@ 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 estimated number of ticks as a number.
-   * @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) {
-    if (every <= 0 || minTime > maxTime) {
-      return Infinity;
-    }
-    const timeDiffMs = maxTime - minTime;
-    const intervalMs = dayjs.duration({ [interval ?? 'day']: every }).asMilliseconds();
-    if (intervalMs <= 0) {
-      return Infinity;
-    }
-    return Math.ceil(timeDiffMs / intervalMs);
-  }
-
   /**
    * @param theSidePad
    * @param theTopPad
@@ -655,54 +630,32 @@ export const draw = function (text, id, version, diagObj) {
     );
 
     if (resultTickInterval !== null) {
-      const every = parseInt(resultTickInterval[1], 10);
-      if (isNaN(every) || every <= 0) {
-        log.warn(
-          `Invalid tick interval value: "${resultTickInterval[1]}". Skipping custom tick interval.`
-        );
-        // Skip applying custom ticks
-      } else {
-        const interval = resultTickInterval[2];
-        const weekday = diagObj.db.getWeekday() || conf.weekday;
+      const every = resultTickInterval[1];
+      const interval = resultTickInterval[2];
+      const weekday = diagObj.db.getWeekday() || conf.weekday;
 
-        // 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 will use 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;
-          }
-        }
+      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;
       }
     }
 
@@ -724,48 +677,32 @@ export const draw = function (text, id, version, diagObj) {
         .tickFormat(timeFormat(axisFormat));
 
       if (resultTickInterval !== null) {
-        const every = parseInt(resultTickInterval[1], 10);
-        if (isNaN(every) || every <= 0) {
-          log.warn(
-            `Invalid tick interval value: "${resultTickInterval[1]}". Skipping custom tick interval.`
-          );
-          // Skip applying custom ticks
-        } else {
-          const interval = resultTickInterval[2];
-          const weekday = diagObj.db.getWeekday() || conf.weekday;
+        const every = resultTickInterval[1];
+        const interval = resultTickInterval[2];
+        const weekday = diagObj.db.getWeekday() || conf.weekday;
 
-          // 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;
-            }
-          }
+        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,7 +1,8 @@
 import type { InfoFields, InfoDB } from './infoTypes.js';
+import packageJson from '../../../package.json' assert { type: 'json' };
 
 export const DEFAULT_INFO_DB: InfoFields = {
-  version: injected.version + (injected.includeLargeFeatures ? '' : '-tiny'),
+  version: packageJson.version + (includeLargeFeatures ? '' : '-tiny'),
 } as const;
 
 export const getVersion = (): string => DEFAULT_INFO_DB.version;

packages/mermaid/src/diagrams/kanban/kanbanDb.ts

@@ -62,7 +62,6 @@ const getData = function () {
     const node = {
       id: section.id,
       label: sanitizeText(section.label ?? '', conf),
-      labelType: 'markdown',
       isGroup: true,
       ticket: section.ticket,
       shape: 'kanbanSection',
@@ -77,7 +76,6 @@ const getData = function () {
         id: item.id,
         parentId: section.id,
         label: sanitizeText(item.label ?? '', conf),
-        labelType: 'markdown',
         isGroup: false,
         ticket: item?.ticket,
         priority: item?.priority,

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

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