Merge branch 'test-merge' into 6088-fix-for-diamond-intersections

.build/common.ts

@@ -33,9 +33,4 @@ export const packageOptions = {
     packageName: 'mermaid-layout-elk',
     file: 'layouts.ts',
   },
-  examples: {
-    name: 'mermaid-examples',
-    packageName: 'examples',
-    file: 'index.ts',
-  },
 } as const satisfies Record<string, PackageOptions>;

.build/types.ts

@@ -10,16 +10,13 @@ const buildType = (packageName: string) => {
       console.log(out.toString());
     }
   } catch (e) {
+    console.error(e);
     if (e.stdout.length > 0) {
       console.error(e.stdout.toString());
     }
     if (e.stderr.length > 0) {
       console.error(e.stderr.toString());
     }
-    // Exit the build process if we are in CI
-    if (process.env.CI) {
-      throw new Error(`Failed to build types for ${packageName}`);
-    }
   }
 };
 

.changeset/gold-olives-rule.md

@@ -1,5 +0,0 @@
----
-'mermaid': minor
----
-
-feat: Add `getRegisteredDiagramsMetadata` to `mermaid`, which returns all the registered diagram IDs in mermaid

.changeset/hungry-guests-drive.md

@@ -0,0 +1,5 @@
+---
+'@mermaid-js/layout-elk': patch
+---
+
+fix: Updated offset calculations for diamond shape when handling intersections

.changeset/platinum-olives-rule.md

@@ -1,5 +0,0 @@
----
-'@mermaid-js/examples': minor
----
-
-feat: Add examples for diagrams in the `@mermaid-js/examples` package

.changeset/slimy-peaches-win.md

@@ -1,7 +0,0 @@
----
-'@mermaid-js/examples': patch
-'mermaid': patch
-'@mermaid-js/parser': patch
----
-
-chore: Move packet diagram out of beta

.changeset/tangy-ghosts-watch.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: adjust sequence diagram title positioning to prevent overlap with top border in Safari

.changeset/thick-women-find.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-chore: downgrade chokidar to 3.6.0 and ignore updates for hot reload stability

.changeset/wild-areas-lick.md

@@ -1,7 +0,0 @@
----
-'mermaid': patch
----
-
-fix(timeline): fix loading `leftMargin` from config
-
-The `timeline.leftMargin` config value should now correctly control the size of the left margin, instead of being ignored.

.cspell/code-terms.txt

@@ -88,7 +88,6 @@ NODIR
 NSTR
 outdir
 Qcontrolx
-QSTR
 reinit
 rels
 reqs

.github/lychee.toml

@@ -46,9 +46,6 @@ exclude = [
 # Drupal 403
 "https://(www.)?drupal.org",
 
-# Phbpp 403
-"https://(www.)?phpbb.com",
-
 # Swimm returns 404, even though the link is valid
 "https://docs.swimm.io",
 

.github/workflows/autofix.yml

@@ -42,4 +42,4 @@ jobs:
         working-directory: ./packages/mermaid
         run: pnpm run docs:build
 
-      - uses: autofix-ci/action@635ffb0c9798bd160680f18fd73371e355b85f27 # main
+      - uses: autofix-ci/action@551dded8c6cc8a1054039c8bc0b8b48c51dfc6ef # main

.github/workflows/pr-labeler.yml

@@ -29,29 +29,3 @@ jobs:
           disable-releaser: true
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Add "Sponsored by MermaidChart" label
-        uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: |
-            const prNumber = context.payload.pull_request.number;
-            const { data: commits } = await github.rest.pulls.listCommits({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              pull_number: prNumber,
-            });
-
-            const isSponsored = commits.every(
-              (c) => c.commit.author.email?.endsWith('@mermaidchart.com')
-            );
-
-            if (isSponsored) {
-              console.log('PR is sponsored. Adding label.');
-              await github.rest.issues.addLabels({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                issue_number: prNumber,
-                labels: ['Sponsored by MermaidChart'],
-              });
-            }

.github/workflows/validate-lockfile.yml

@@ -21,8 +21,6 @@ jobs:
         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
         run: |
@@ -35,7 +33,7 @@ jobs:
 
           # 2) No unwanted vitepress paths
           if grep -qF 'packages/mermaid/src/vitepress' pnpm-lock.yaml; then
-            issues+=("• Disallowed path 'packages/mermaid/src/vitepress' present. Run \`rm -rf packages/mermaid/src/vitepress && pnpm install\` to regenerate.")
+            issues+=("• Disallowed path 'packages/mermaid/src/vitepress' present. Run `rm -rf packages/mermaid/src/vitepress && pnpm install` to regenerate.")
           fi
 
           # 3) Lockfile only changes when package.json changes
@@ -46,11 +44,12 @@ jobs:
 
           # If any issues, output them and fail
           if [ ${#issues[@]} -gt 0 ]; then
+            # Use the new GITHUB_OUTPUT approach to set a multiline output
             {
               echo "errors<<EOF"
               printf '%s\n' "${issues[@]}"
               echo "EOF"
-            } >> "$GITHUB_OUTPUT"
+            } >> $GITHUB_OUTPUT
             exit 1
           fi
 
@@ -62,7 +61,6 @@ jobs:
           issue-number: ${{ github.event.pull_request.number }}
           body: |
             The following issue(s) were detected:
-              
             ${{ steps.validate.outputs.errors }}
 
             Please address these and push an update.

cypress.config.ts

@@ -26,10 +26,7 @@ export default eyesPlugin(
         config.env.useArgos = process.env.RUN_VISUAL_TEST === 'true';
 
         if (config.env.useArgos) {
-          registerArgosTask(on, config, {
-            // Enable upload to Argos only when it runs on CI.
-            uploadToArgos: !!process.env.CI,
-          });
+          registerArgosTask(on, config);
         } else {
           addMatchImageSnapshotPlugin(on, config);
         }

cypress/integration/rendering/packet.spec.ts

@@ -1,7 +1,7 @@
 import { imgSnapshotTest } from '../../helpers/util';
 
 describe('packet structure', () => {
-  it('should render a simple packet-beta diagram', () => {
+  it('should render a simple packet diagram', () => {
     imgSnapshotTest(
       `packet-beta
   title Hello world
@@ -10,18 +10,9 @@ describe('packet structure', () => {
     );
   });
 
-  it('should render a simple packet diagram', () => {
-    imgSnapshotTest(
-      `packet
-  title Hello world
-  0-10: "hello"
-`
-    );
-  });
-
   it('should render a simple packet diagram without ranges', () => {
     imgSnapshotTest(
-      `packet
+      `packet-beta
   0: "h"
   1: "i"
 `
@@ -30,7 +21,7 @@ describe('packet structure', () => {
 
   it('should render a complex packet diagram', () => {
     imgSnapshotTest(
-      `packet
+      `packet-beta
         0-15: "Source Port"
         16-31: "Destination Port"
         32-63: "Sequence Number"
@@ -61,7 +52,7 @@ describe('packet structure', () => {
         packet:
           showBits: false
       ---
-      packet
+      packet-beta
         0-15: "Source Port"
         16-31: "Destination Port"
         32-63: "Sequence Number"

cypress/integration/rendering/treemap.spec.ts

@@ -1,382 +0,0 @@
-import { imgSnapshotTest } from '../../helpers/util.ts';
-
-describe('Treemap Diagram', () => {
-  it('1: should render a basic treemap', () => {
-    imgSnapshotTest(
-      `treemap-beta
-"Category A"
-    "Item A1": 10
-    "Item A2": 20
-"Category B"
-    "Item B1": 15
-    "Item B2": 25
-      `,
-      {}
-    );
-  });
-
-  it('2: should render a hierarchical treemap', () => {
-    imgSnapshotTest(
-      `treemap-beta
-"Products"
-    "Electronics"
-        "Phones": 50
-        "Computers": 30
-        "Accessories": 20
-    "Clothing"
-        "Men's"
-            "Shirts": 10
-            "Pants": 15
-        "Women's"
-            "Dresses": 20
-            "Skirts": 10
-      `,
-      {}
-    );
-  });
-
-  it('3: should render a treemap with styling using classDef', () => {
-    imgSnapshotTest(
-      `treemap-beta
-"Section 1"
-    "Leaf 1.1": 12
-    "Section 1.2":::class1
-      "Leaf 1.2.1": 12
-"Section 2"
-    "Leaf 2.1": 20:::class1
-    "Leaf 2.2": 25
-    "Leaf 2.3": 12
-
-classDef class1 fill:red,color:blue,stroke:#FFD600;
-      `,
-      {}
-    );
-  });
-
-  it('4: should handle long text that wraps', () => {
-    imgSnapshotTest(
-      `treemap-beta
-"Main Category"
-    "This is a very long item name that should wrap to the next line when rendered in the treemap diagram": 50
-    "Short item": 20
-      `,
-      {}
-    );
-  });
-
-  it('5: should render with a forest theme', () => {
-    imgSnapshotTest(
-      `---
-config:
-  theme: forest
----
-treemap-beta
-"Category A"
-    "Item A1": 10
-    "Item A2": 20
-"Category B"
-    "Item B1": 15
-    "Item B2": 25
-      `,
-      {}
-    );
-  });
-
-  it('6: should handle multiple levels of nesting', () => {
-    imgSnapshotTest(
-      `treemap-beta
-"Level 1"
-    "Level 2A"
-        "Level 3A": 10
-        "Level 3B": 15
-    "Level 2B"
-        "Level 3C": 20
-        "Level 3D"
-            "Level 4A": 5
-            "Level 4B": 5
-      `,
-      {}
-    );
-  });
-
-  it('7: should handle classDef with multiple styles', () => {
-    imgSnapshotTest(
-      `treemap-beta
-"Main"
-    "A": 20
-    "B":::important
-        "B1": 10
-        "B2": 15
-    "C": 5:::secondary
-
-classDef important fill:#f96,stroke:#333,stroke-width:2px;
-classDef secondary fill:#6cf,stroke:#333,stroke-dasharray:5 5;
-      `,
-      {}
-    );
-  });
-
-  it('8: should handle dollar value formatting with thousands separator', () => {
-    imgSnapshotTest(
-      `---
-config:
-  treemap:
-    valueFormat: "$0,0"
----
-treemap
-"Budget"
-    "Operations"
-        "Salaries": 700000
-        "Equipment": 200000
-        "Supplies": 100000
-    "Marketing"
-        "Advertising": 400000
-        "Events": 100000
-      `,
-      {}
-    );
-  });
-
-  it('8a: should handle percentage formatting', () => {
-    imgSnapshotTest(
-      `---
-config:
-  treemap:
-    valueFormat: ".1%"
----
-treemap-beta
-"Market Share"
-    "Company A": 0.35
-    "Company B": 0.25
-    "Company C": 0.15
-    "Others": 0.25
-      `,
-      {}
-    );
-  });
-
-  it('8b: should handle decimal formatting', () => {
-    imgSnapshotTest(
-      `---
-config:
-  treemap:
-    valueFormat: ".2f"
----
-treemap-beta
-"Metrics"
-    "Conversion Rate": 0.0567
-    "Bounce Rate": 0.6723
-    "Click-through Rate": 0.1289
-    "Engagement": 0.4521
-      `,
-      {}
-    );
-  });
-
-  it('8c: should handle dollar sign with decimal places', () => {
-    imgSnapshotTest(
-      `---
-config:
-  treemap:
-    valueFormat: "$.2f"
----
-treemap-beta
-"Product Prices"
-    "Basic": 19.99
-    "Standard": 49.99
-    "Premium": 99.99
-    "Enterprise": 199.99
-      `,
-      {}
-    );
-  });
-
-  it('8d: should handle dollar sign with thousands separator and decimal places', () => {
-    imgSnapshotTest(
-      `---
-config:
-  treemap:
-    valueFormat: "$,.2f"
----
-treemap-beta
-"Revenue"
-    "Q1": 1250345.75
-    "Q2": 1645789.25
-    "Q3": 1845123.50
-    "Q4": 2145678.75
-      `,
-      {}
-    );
-  });
-
-  it('8e: should handle simple thousands separator', () => {
-    imgSnapshotTest(
-      `---
-config:
-  treemap:
-    valueFormat: ","
----
-treemap-beta
-"User Counts"
-    "Active Users": 1250345
-    "New Signups": 45789
-    "Churned": 12350
-    "Converted": 78975
-      `,
-      {}
-    );
-  });
-
-  it('8f: should handle valueFormat set via directive with dollar and thousands separator', () => {
-    imgSnapshotTest(
-      `---
-config:
-  treemap:
-    valueFormat: "$,.0f"
----
-treemap-beta
-"Sales by Region"
-    "North": 1234567
-    "South": 7654321
-    "East": 4567890
-    "West": 9876543
-      `,
-      {}
-    );
-  });
-
-  it('8g: should handle scientific notation format', () => {
-    imgSnapshotTest(
-      `---
-config:
-  treemap:
-    valueFormat: ".2e"
----
-treemap-beta
-"Scientific Values"
-    "Value 1": 1234567
-    "Value 2": 0.0000123
-    "Value 3": 1000000000
-      `,
-      {}
-    );
-  });
-
-  it('9: should handle a complex example with multiple features', () => {
-    imgSnapshotTest(
-      `---
-config:
-  theme: dark
-  treemap:
-    valueFormat: "$0,0"
----
-treemap-beta
-"Company Budget"
-    "Engineering":::engineering
-        "Frontend": 300000
-        "Backend": 400000
-        "DevOps": 200000
-    "Marketing":::marketing
-        "Digital": 250000
-        "Print": 100000
-        "Events": 150000
-    "Sales":::sales
-        "Direct": 500000
-        "Channel": 300000
-
-classDef engineering fill:#6b9bc3,stroke:#333;
-classDef marketing fill:#c36b9b,stroke:#333;
-classDef sales fill:#c3a66b,stroke:#333;
-      `,
-      {}
-    );
-  });
-
-  it('10: should render the example from documentation', () => {
-    imgSnapshotTest(
-      `
-    treemap-beta
-      "Section 1"
-          "Leaf 1.1": 12
-          "Section 1.2":::class1
-            "Leaf 1.2.1": 12
-      "Section 2"
-          "Leaf 2.1": 20:::class1
-          "Leaf 2.2": 25
-          "Leaf 2.3": 12
-
-      classDef class1 fill:red,color:blue,stroke:#FFD600;
-      `,
-      {}
-    );
-  });
-
-  it('11: should handle comments', () => {
-    imgSnapshotTest(
-      `
-    treemap-beta
-      %% This is a comment
-      "Category A"
-          "Item A1": 10
-          "Item A2": 20
-      %% Another comment
-      "Category B"
-          "Item B1": 15
-          "Item B2": 25
-      `,
-      {}
-    );
-  });
-  /*
-  it.skip('12: should render a treemap with title', () => {
-    imgSnapshotTest(
-      `
-    treemap-beta
-      title Treemap with Title
-      "Category A"
-          "Item A1": 10
-          "Item A2": 20
-      "Category B"
-          "Item B1": 15
-          "Item B2": 25
-      `,
-      {}
-    );
-  });
-
-  it.skip('13: should render a treemap with accessibility attributes', () => {
-    imgSnapshotTest(
-      `
-    treemap-beta
-      accTitle: Accessible Treemap Title
-      accDescr: This is a description of the treemap for accessibility purposes
-      "Category A"
-          "Item A1": 10
-          "Item A2": 20
-      "Category B"
-          "Item B1": 15
-          "Item B2": 25
-      `,
-      {}
-    );
-  });
-
-  it.skip('14: should render a treemap with title and accessibility attributes', () => {
-    imgSnapshotTest(
-      `
-    treemap
-      title Treemap with Title and Accessibility
-      accTitle: Accessible Treemap Title
-      accDescr: This is a description of the treemap for accessibility purposes
-      "Category A"
-          "Item A1": 10
-          "Item A2": 20
-      "Category B"
-          "Item B1": 15
-          "Item B2": 25
-      `,
-      {}
-    );
-  });
-  */
-});

cypress/platform/knsv2.html

@@ -32,26 +32,8 @@
       href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
       rel="stylesheet"
     />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Recursive:wght@300..1000&display=swap"
-      rel="stylesheet"
-    />
 
     <style>
-      .recursive-mermaid {
-        font-family: 'Recursive', sans-serif;
-        font-optical-sizing: auto;
-        font-weight: 500;
-        font-style: normal;
-        font-variation-settings:
-          'slnt' 0,
-          'CASL' 0,
-          'CRSV' 0.5,
-          'MONO' 0;
-      }
-
       body {
         /* background: rgb(221, 208, 208); */
         /* background: #333; */
@@ -63,9 +45,7 @@
       h1 {
         color: grey;
       }
-      .mermaid {
-        border: 1px solid red;
-      }
+
       .mermaid2 {
         display: none;
       }
@@ -103,11 +83,6 @@
         width: 100%;
       }
 
-      .class2 {
-        fill: red;
-        fill-opacity: 1;
-      }
-
       /* tspan {
               font-size: 6px !important;
             } */
@@ -131,94 +106,95 @@
 
   <body>
     <pre id="diagram4" class="mermaid">
-treemap
-"Section 1"
-    "Leaf 1.1": 12
-    "Section 1.2":::class1
-      "Leaf 1.2.1": 12
-"Section 2"
-    "Leaf 2.1": 20:::class1
-    "Leaf 2.2": 25
-    "Leaf 2.3": 12
+      ---
+      config:
+        layout: elk
+        flowchart:
+          curve: linear
+      ---
+      flowchart LR
+          A[A] -- Mermaid js --> B[B]
+          A[A] -- Mermaid js --- B[B]
+          A@{ shape: diamond}
+          B@{ shape: diamond}
 
-classDef class1   fill:red,color:blue,stroke:#FFD600;
-
-
-</pre
-    >
-    <pre id="diagram4" class="mermaid2">
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      ---
+      config:
+        layout: elk
+        flowchart:
+          curve: rounded
+      ---
+      flowchart LR
+          D["Use the editor"] -- Mermaid js --> I["fa:fa-code Text"]
+          I --> D & D
+          D@{ shape: question}
+          I@{ shape: question}
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      ---
+      config:
+        layout: elk
+        flowchart:
+          curve: rounded
+        elk:
+          nodePlacementStrategy: NETWORK_SIMPLEX
+      ---
+      flowchart LR
+          D["Use the editor"] -- Mermaid js --> I["fa:fa-code Text"]
+          D --> I & I
+          a["a"]
+          D@{ shape: trap-b}
+          I@{ shape: lean-l}
+    </pre>
+    <pre id="diagram4" class="mermaid">
 ---
 config:
-  treemap:
-    valueFormat: '$0,0'
+  layout: elk
+
 ---
-treemap
-"Budget"
-    "Operations"
-        "Salaries": 7000
-        "Equipment": 2000
-        "Supplies": 1000
-    "Marketing"
-        "Advertising": 4000
-        "Events": 1000
+flowchart LR
+ %% subgraph s1["Untitled subgraph"]
+        C["Evaluate"]
+ %% end
 
-</pre
-    >
+    B --> C
+    </pre>
     <pre id="diagram4" class="mermaid">
-    treemap
-      title Accessible Treemap Title
-      "Category A"
-          "Item A1": 10
-          "Item A2": 20
-      "Category B"
-          "Item B1": 15
-          "Item B2": 25
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-      flowchart LR
-        AB["apa@apa@"] --> B(("`apa@apa`"))
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-      flowchart
-        D(("for D"))
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-      flowchart LR
-        A e1@==> B
-        e1@{ animate: true}
-    </pre>
-    <pre id="diagram4" class="mermaid2">
+---
+config:
+  layout: elk
+  flowchart:
+    //curve: linear
+---
 flowchart LR
-  A e1@--> B
-  classDef animate stroke-width:2,stroke-dasharray:10\,8,stroke-dashoffset:-180,animation: edge-animation-frame 6s linear infinite, stroke-linecap: round
-  class e1 animate
-    </pre>
-    <h2>infinite</h2>
-    <pre id="diagram4" class="mermaid2">
-flowchart LR
-  A e1@--> B
-  classDef animate stroke-dasharray: 9\,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
-  class e1 animate
-    </pre>
-    <h2>Mermaid - edge-animation-slow</h2>
-    <pre id="diagram4" class="mermaid2">
-flowchart LR
-  A e1@--> B
-e1@{ animation: fast}
-    </pre>
-    <h2>Mermaid - edge-animation-fast</h2>
-    <pre id="diagram4" class="mermaid2">
-flowchart LR
-  A e1@--> B
-  classDef animate stroke-dasharray: 1000,stroke-dashoffset: 1000,animation: dash 10s linear;
-  class e1 edge-animation-fast
-    </pre>
+%% A ==> B
+%% A2 --> B2
+A{A} --> B((Bo boo)) & B & B & B
 
-    <pre id="diagram4" class="mermaid2">
-
-info    </pre
-    >
-    <pre id="diagram4" class="mermaid2">
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      ---
+      config:
+        layout: elk
+        theme: default
+        look: classic
+      ---
+      flowchart LR
+       subgraph s1["APA"]
+              D{"Use the editor"}
+        end
+       subgraph S2["S2"]
+              s1
+              I>"fa:fa-code Text"]
+              E["E"]
+        end
+          D -- Mermaid js --> I
+          D --> I & E
+          E --> I
+    </pre>
+    <pre id="diagram4" class="mermaid">
 ---
 config:
   layout: elk
@@ -243,7 +219,7 @@ config:
       end
       end
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 ---
 config:
   layout: elk
@@ -256,7 +232,7 @@ config:
       D-->I
       D-->I
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 ---
 config:
   layout: elk
@@ -295,7 +271,7 @@ flowchart LR
     n8@{ shape: rect}
 
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 ---
 config:
   layout: elk
@@ -311,7 +287,7 @@ flowchart LR
 
 
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 ---
 config:
   layout: elk
@@ -320,7 +296,7 @@ flowchart LR
     A{A} --> B & C
 </pre
     >
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 ---
 config:
   layout: elk
@@ -332,7 +308,7 @@ flowchart LR
     end
 </pre
     >
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 ---
 config:
   layout: elk
@@ -350,7 +326,7 @@ flowchart LR
 
 
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 ---
 config:
   kanban:
@@ -369,81 +345,81 @@ kanban
     task3[💻 Develop login feature]@{ ticket: 103 }
 
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 flowchart LR
 nA[Default] --> A@{ icon: 'fa:bell', form: 'rounded' }
 
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 flowchart LR
 nA[Style] --> A@{ icon: 'fa:bell', form: 'rounded' }
 style A fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 flowchart LR
 nA[Class] --> A@{ icon: 'fa:bell', form: 'rounded' }
 A:::AClass
 classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 flowchart LR
   nA[Class] --> A@{ icon: 'logos:aws', form: 'rounded' }
 
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 flowchart LR
 nA[Default] --> A@{ icon: 'fa:bell', form: 'square' }
 
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 flowchart LR
 nA[Style] --> A@{ icon: 'fa:bell', form: 'square' }
 style A fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 flowchart LR
 nA[Class] --> A@{ icon: 'fa:bell', form: 'square' }
 A:::AClass
 classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 flowchart LR
   nA[Class] --> A@{ icon: 'logos:aws', form: 'square' }
 
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 flowchart LR
 nA[Default] --> A@{ icon: 'fa:bell', form: 'circle' }
 
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 flowchart LR
 nA[Style] --> A@{ icon: 'fa:bell', form: 'circle' }
 style A fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 flowchart LR
 nA[Class] --> A@{ icon: 'fa:bell', form: 'circle' }
 A:::AClass
 classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 flowchart LR
   nA[Class] --> A@{ icon: 'logos:aws', form: 'circle' }
   A:::AClass
   classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 flowchart LR
   nA[Style] --> A@{ icon: 'logos:aws', form: 'circle' }
   style A fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 kanban
   id2[In progress]
     docs[Create Blog about the new diagram]@{ priority: 'Very Low', ticket: MC-2037, assigned: 'knsv' }
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 ---
 config:
   kanban:
@@ -507,18 +483,22 @@ kanban
         alert('It worked');
       }
       await mermaid.initialize({
-        // theme: 'forest',
+        // theme: 'base',
         // theme: 'default',
         // theme: 'forest',
         // handDrawnSeed: 12,
         // look: 'handDrawn',
         // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
         // layout: 'dagre',
-        // layout: 'elk',
+        layout: 'elk',
         // layout: 'fixed',
         // htmlLabels: false,
         flowchart: { titleTopMargin: 10 },
-        fontFamily: "'Recursive', sans-serif",
+
+        // fontFamily: 'Caveat',
+        // fontFamily: 'Kalam',
+        // fontFamily: 'courier',
+        fontFamily: 'arial',
         sequence: {
           actorFontFamily: 'courier',
           noteFontFamily: 'courier',

cypress/timings.json

@@ -2,35 +2,35 @@
   "durations": [
     {
       "spec": "cypress/integration/other/configuration.spec.js",
-      "duration": 5672
+      "duration": 6130
     },
     {
       "spec": "cypress/integration/other/external-diagrams.spec.js",
-      "duration": 1990
+      "duration": 1974
     },
     {
       "spec": "cypress/integration/other/ghsa.spec.js",
-      "duration": 3186
+      "duration": 3308
     },
     {
       "spec": "cypress/integration/other/iife.spec.js",
-      "duration": 1948
+      "duration": 1877
     },
     {
       "spec": "cypress/integration/other/interaction.spec.js",
-      "duration": 11938
+      "duration": 10902
     },
     {
       "spec": "cypress/integration/other/rerender.spec.js",
-      "duration": 1932
+      "duration": 1836
     },
     {
       "spec": "cypress/integration/other/xss.spec.js",
-      "duration": 27237
+      "duration": 26467
     },
     {
       "spec": "cypress/integration/rendering/appli.spec.js",
-      "duration": 3170
+      "duration": 3129
     },
     {
       "spec": "cypress/integration/rendering/architecture.spec.ts",
@@ -38,147 +38,147 @@
     },
     {
       "spec": "cypress/integration/rendering/block.spec.js",
-      "duration": 17390
+      "duration": 16230
     },
     {
       "spec": "cypress/integration/rendering/c4.spec.js",
-      "duration": 5296
+      "duration": 5231
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-elk-v3.spec.js",
-      "duration": 39004
+      "duration": 38113
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-handDrawn-v3.spec.js",
-      "duration": 37653
+      "duration": 36423
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-v2.spec.js",
-      "duration": 23278
+      "duration": 22509
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-v3.spec.js",
-      "duration": 36645
+      "duration": 34933
     },
     {
       "spec": "cypress/integration/rendering/classDiagram.spec.js",
-      "duration": 15418
+      "duration": 14681
     },
     {
       "spec": "cypress/integration/rendering/conf-and-directives.spec.js",
-      "duration": 9684
+      "duration": 8877
     },
     {
       "spec": "cypress/integration/rendering/current.spec.js",
-      "duration": 2570
+      "duration": 2517
     },
     {
       "spec": "cypress/integration/rendering/erDiagram-unified.spec.js",
-      "duration": 84687
+      "duration": 81226
     },
     {
       "spec": "cypress/integration/rendering/erDiagram.spec.js",
-      "duration": 14819
+      "duration": 14211
     },
     {
       "spec": "cypress/integration/rendering/errorDiagram.spec.js",
-      "duration": 3371
+      "duration": 3355
     },
     {
       "spec": "cypress/integration/rendering/flowchart-elk.spec.js",
-      "duration": 39925
+      "duration": 38857
     },
     {
       "spec": "cypress/integration/rendering/flowchart-handDrawn.spec.js",
-      "duration": 34694
+      "duration": 28570
     },
     {
       "spec": "cypress/integration/rendering/flowchart-icon.spec.js",
-      "duration": 7137
+      "duration": 6902
     },
     {
       "spec": "cypress/integration/rendering/flowchart-shape-alias.spec.ts",
-      "duration": 24740
+      "duration": 23075
     },
     {
       "spec": "cypress/integration/rendering/flowchart-v2.spec.js",
-      "duration": 42077
+      "duration": 40514
     },
     {
       "spec": "cypress/integration/rendering/flowchart.spec.js",
-      "duration": 30642
+      "duration": 28611
     },
     {
       "spec": "cypress/integration/rendering/gantt.spec.js",
-      "duration": 18085
+      "duration": 16605
     },
     {
       "spec": "cypress/integration/rendering/gitGraph.spec.js",
-      "duration": 50107
+      "duration": 47636
     },
     {
       "spec": "cypress/integration/rendering/iconShape.spec.ts",
-      "duration": 276279
+      "duration": 262219
     },
     {
       "spec": "cypress/integration/rendering/imageShape.spec.ts",
-      "duration": 56505
+      "duration": 54111
     },
     {
       "spec": "cypress/integration/rendering/info.spec.ts",
-      "duration": 3036
+      "duration": 3006
     },
     {
       "spec": "cypress/integration/rendering/journey.spec.js",
-      "duration": 6889
+      "duration": 6858
     },
     {
       "spec": "cypress/integration/rendering/kanban.spec.ts",
-      "duration": 7353
+      "duration": 7281
     },
     {
       "spec": "cypress/integration/rendering/katex.spec.js",
-      "duration": 3580
+      "duration": 3579
     },
     {
       "spec": "cypress/integration/rendering/marker_unique_id.spec.js",
-      "duration": 2508
+      "duration": 2448
     },
     {
       "spec": "cypress/integration/rendering/mindmap.spec.ts",
-      "duration": 10939
+      "duration": 10618
     },
     {
       "spec": "cypress/integration/rendering/newShapes.spec.ts",
-      "duration": 149102
+      "duration": 140874
     },
     {
       "spec": "cypress/integration/rendering/oldShapes.spec.ts",
-      "duration": 113987
+      "duration": 108015
     },
     {
       "spec": "cypress/integration/rendering/packet.spec.ts",
-      "duration": 4060
+      "duration": 4241
     },
     {
       "spec": "cypress/integration/rendering/pie.spec.ts",
-      "duration": 5715
+      "duration": 5645
     },
     {
       "spec": "cypress/integration/rendering/quadrantChart.spec.js",
-      "duration": 8945
+      "duration": 8524
     },
     {
       "spec": "cypress/integration/rendering/radar.spec.js",
-      "duration": 5337
+      "duration": 5203
     },
     {
       "spec": "cypress/integration/rendering/requirement.spec.js",
-      "duration": 2643
+      "duration": 2635
     },
     {
       "spec": "cypress/integration/rendering/requirementDiagram-unified.spec.js",
-      "duration": 52072
+      "duration": 50512
     },
     {
       "spec": "cypress/integration/rendering/sankey.spec.ts",
@@ -186,35 +186,31 @@
     },
     {
       "spec": "cypress/integration/rendering/sequencediagram.spec.js",
-      "duration": 35721
+      "duration": 34559
     },
     {
       "spec": "cypress/integration/rendering/stateDiagram-v2.spec.js",
-      "duration": 26030
+      "duration": 24421
     },
     {
       "spec": "cypress/integration/rendering/stateDiagram.spec.js",
-      "duration": 16333
+      "duration": 15316
     },
     {
       "spec": "cypress/integration/rendering/theme.spec.js",
-      "duration": 29287
+      "duration": 28240
     },
     {
       "spec": "cypress/integration/rendering/timeline.spec.ts",
-      "duration": 8491
-    },
-    {
-      "spec": "cypress/integration/rendering/treemap.spec.ts",
-      "duration": 12291
+      "duration": 6808
     },
     {
       "spec": "cypress/integration/rendering/xyChart.spec.js",
-      "duration": 20651
+      "duration": 19359
     },
     {
       "spec": "cypress/integration/rendering/zenuml.spec.js",
-      "duration": 3218
+      "duration": 3164
     }
   ]
 }

demos/er-multiline.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
     />
     <link
       href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"

demos/packet.html

@@ -17,7 +17,7 @@
 
     <div class="diagrams">
       <pre class="mermaid">
-      packet
+      packet-beta
         0-15: "Source Port"
         16-31: "Destination Port"
         32-63: "Sequence Number"
@@ -44,7 +44,7 @@
         packet:
           showBits: false
       ---
-      packet
+      packet-beta
         0-15: "Source Port"
         16-31: "Destination Port"
         32-63: "Sequence Number"
@@ -70,7 +70,7 @@
       config:
         theme: forest
       ---
-      packet
+      packet-beta
         title Forest theme
         0-15: "Source Port"
         16-31: "Destination Port"
@@ -97,7 +97,7 @@
       config:
         theme: dark
       ---
-      packet
+      packet-beta
         title Dark theme
         0-15: "Source Port"
         16-31: "Destination Port"

demos/treemap.html

@@ -1,75 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Mermaid Treemap Diagram Demo</title>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <style>
-      body {
-        font-family: 'Montserrat', sans-serif;
-        margin: 0 auto;
-        max-width: 900px;
-        padding: 20px;
-      }
-      .mermaid {
-        margin: 30px 0;
-      }
-      h1,
-      h2 {
-        color: #333;
-      }
-      pre {
-        background-color: #f5f5f5;
-        padding: 15px;
-        border-radius: 5px;
-      }
-    </style>
-  </head>
-  <body>
-    <h1>Treemap Diagram Demo</h1>
-    <p>This is a demo of the new treemap diagram type in Mermaid.</p>
-
-    <h2>Basic Treemap Example</h2>
-    <pre class="mermaid">
-treemap
-    "Root"
-        "Branch 1"
-            "Leaf 1.1": 10
-            "Leaf 1.2": 15
-        "Branch 2"
-            "Branch 2.1"
-                "Leaf 2.1.1": 20
-                "Leaf 2.1.2": 25
-            "Leaf 2.2": 25
-            "Leaf 2.3": 30
-    </pre>
-
-    <h2>Technology Stack Treemap Example</h2>
-    <pre class="mermaid">
-treemap
-    "Technology Stack"
-        "Frontend"
-            "React": 35
-            "CSS": 15
-            "HTML": 10
-        "Backend"
-            "Node.js": 25
-            "Express": 10
-            "MongoDB": 15
-        "DevOps"
-            "Docker": 10
-            "Kubernetes": 15
-            "CI/CD": 5
-    </pre>
-
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      mermaid.initialize({
-        theme: 'forest',
-        logLevel: 1,
-        securityLevel: 'loose',
-      });
-    </script>
-  </body>
-</html>

docs/community/new-diagram.md

@@ -111,13 +111,3 @@ const themes = {
 ```
 
 The actual options and values for the colors are defined in **src/theme/theme-\[xyz].js**. If you provide the options your diagram needs in the existing theme files then the theming will work smoothly without hiccups.
-
-## Examples
-
-The `@mermaid-js/examples` package contains a collection of examples that are used by tools like mermaid.live to help users get started with the new diagram.
-
-You can duplicate an existing diagram example file, eg: `packages/examples/src/examples/flowchart.ts`, and modify it with details specific to your diagram.
-
-Then you can import the example in the `packages/examples/src/index.ts` file and add it to the `examples` array.
-
-Each diagram should have at least one example, and that should be marked as default. It is good to add more examples to showcase different features of the diagram.

docs/config/setup/defaultConfig/variables/configKeys.md

@@ -12,4 +12,4 @@
 
 > `const` **configKeys**: `Set`<`string`>
 
-Defined in: [packages/mermaid/src/defaultConfig.ts:290](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L290)
+Defined in: [packages/mermaid/src/defaultConfig.ts:278](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L278)

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

@@ -10,7 +10,7 @@
 
 # Interface: ExternalDiagramDefinition
 
-Defined in: [packages/mermaid/src/diagram-api/types.ts:94](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L94)
+Defined in: [packages/mermaid/src/diagram-api/types.ts:99](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L99)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:94](https://github.com/me
 
 > **detector**: `DiagramDetector`
 
-Defined in: [packages/mermaid/src/diagram-api/types.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L96)
+Defined in: [packages/mermaid/src/diagram-api/types.ts:101](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L101)
 
 ---
 
@@ -26,7 +26,7 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:96](https://github.com/me
 
 > **id**: `string`
 
-Defined in: [packages/mermaid/src/diagram-api/types.ts:95](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L95)
+Defined in: [packages/mermaid/src/diagram-api/types.ts:100](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L100)
 
 ---
 
@@ -34,4 +34,4 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:95](https://github.com/me
 
 > **loader**: `DiagramLoader`
 
-Defined in: [packages/mermaid/src/diagram-api/types.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L97)
+Defined in: [packages/mermaid/src/diagram-api/types.ts:102](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L102)

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

@@ -10,7 +10,7 @@
 
 # Interface: Mermaid
 
-Defined in: [packages/mermaid/src/mermaid.ts:429](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L429)
+Defined in: [packages/mermaid/src/mermaid.ts:418](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L418)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/mermaid.ts:429](https://github.com/mermaid-js/
 
 > **contentLoaded**: () => `void`
 
-Defined in: [packages/mermaid/src/mermaid.ts:447](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L447)
+Defined in: [packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L436)
 
 \##contentLoaded Callback function that is called when page is loaded. This functions fetches
 configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the
@@ -34,7 +34,7 @@ page.
 
 > **detectType**: (`text`, `config`?) => `string`
 
-Defined in: [packages/mermaid/src/mermaid.ts:449](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L449)
+Defined in: [packages/mermaid/src/mermaid.ts:438](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L438)
 
 Detects the type of the graph text.
 
@@ -86,28 +86,11 @@ A graph definition key
 
 ---
 
-### getRegisteredDiagramsMetadata()
-
-> **getRegisteredDiagramsMetadata**: () => `Pick`<[`ExternalDiagramDefinition`](ExternalDiagramDefinition.md), `"id"`>\[]
-
-Defined in: [packages/mermaid/src/mermaid.ts:451](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L451)
-
-Gets the metadata for all registered diagrams.
-Currently only the id is returned.
-
-#### Returns
-
-`Pick`<[`ExternalDiagramDefinition`](ExternalDiagramDefinition.md), `"id"`>\[]
-
-An array of objects with the id of the diagram.
-
----
-
 ### ~~init()~~
 
 > **init**: (`config`?, `nodes`?, `callback`?) => `Promise`<`void`>
 
-Defined in: [packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L442)
+Defined in: [packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431)
 
 ## init
 
@@ -155,7 +138,7 @@ Use [initialize](Mermaid.md#initialize) and [run](Mermaid.md#run) instead.
 
 > **initialize**: (`config`) => `void`
 
-Defined in: [packages/mermaid/src/mermaid.ts:446](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L446)
+Defined in: [packages/mermaid/src/mermaid.ts:435](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L435)
 
 Used to set configurations for mermaid.
 This function should be called before the run function.
@@ -178,7 +161,7 @@ Configuration object for mermaid.
 
 > **mermaidAPI**: `Readonly`<{ `defaultConfig`: [`MermaidConfig`](MermaidConfig.md); `getConfig`: () => [`MermaidConfig`](MermaidConfig.md); `getDiagramFromText`: (`text`, `metadata`) => `Promise`<`Diagram`>; `getSiteConfig`: () => [`MermaidConfig`](MermaidConfig.md); `globalReset`: () => `void`; `initialize`: (`userOptions`) => `void`; `parse`: (`text`, `parseOptions`) => `Promise`<`false` | [`ParseResult`](ParseResult.md)>(`text`, `parseOptions`?) => `Promise`<[`ParseResult`](ParseResult.md)>; `render`: (`id`, `text`, `svgContainingElement`?) => `Promise`<[`RenderResult`](RenderResult.md)>; `reset`: () => `void`; `setConfig`: (`conf`) => [`MermaidConfig`](MermaidConfig.md); `updateSiteConfig`: (`conf`) => [`MermaidConfig`](MermaidConfig.md); }>
 
-Defined in: [packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L436)
+Defined in: [packages/mermaid/src/mermaid.ts:425](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L425)
 
 **`Internal`**
 
@@ -192,7 +175,7 @@ Use [parse](Mermaid.md#parse) and [render](Mermaid.md#render) instead. Please [o
 
 > **parse**: (`text`, `parseOptions`) => `Promise`<`false` | [`ParseResult`](ParseResult.md)>(`text`, `parseOptions`?) => `Promise`<[`ParseResult`](ParseResult.md)>
 
-Defined in: [packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437)
+Defined in: [packages/mermaid/src/mermaid.ts:426](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L426)
 
 Parse the text and validate the syntax.
 
@@ -260,7 +243,7 @@ Error if the diagram is invalid and parseOptions.suppressErrors is false or not
 
 > `optional` **parseError**: [`ParseErrorFunction`](../type-aliases/ParseErrorFunction.md)
 
-Defined in: [packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431)
+Defined in: [packages/mermaid/src/mermaid.ts:420](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L420)
 
 ---
 
@@ -268,7 +251,7 @@ Defined in: [packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/
 
 > **registerExternalDiagrams**: (`diagrams`, `opts`) => `Promise`<`void`>
 
-Defined in: [packages/mermaid/src/mermaid.ts:445](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L445)
+Defined in: [packages/mermaid/src/mermaid.ts:434](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L434)
 
 Used to register external diagram types.
 
@@ -298,7 +281,7 @@ If opts.lazyLoad is false, the diagrams will be loaded immediately.
 
 > **registerIconPacks**: (`iconLoaders`) => `void`
 
-Defined in: [packages/mermaid/src/mermaid.ts:450](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L450)
+Defined in: [packages/mermaid/src/mermaid.ts:439](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L439)
 
 #### Parameters
 
@@ -316,7 +299,7 @@ Defined in: [packages/mermaid/src/mermaid.ts:450](https://github.com/mermaid-js/
 
 > **registerLayoutLoaders**: (`loaders`) => `void`
 
-Defined in: [packages/mermaid/src/mermaid.ts:444](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L444)
+Defined in: [packages/mermaid/src/mermaid.ts:433](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L433)
 
 #### Parameters
 
@@ -334,7 +317,7 @@ Defined in: [packages/mermaid/src/mermaid.ts:444](https://github.com/mermaid-js/
 
 > **render**: (`id`, `text`, `svgContainingElement`?) => `Promise`<[`RenderResult`](RenderResult.md)>
 
-Defined in: [packages/mermaid/src/mermaid.ts:438](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L438)
+Defined in: [packages/mermaid/src/mermaid.ts:427](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L427)
 
 #### Parameters
 
@@ -366,7 +349,7 @@ Deprecated for external use.
 
 > **run**: (`options`) => `Promise`<`void`>
 
-Defined in: [packages/mermaid/src/mermaid.ts:443](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L443)
+Defined in: [packages/mermaid/src/mermaid.ts:432](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L432)
 
 ## run
 
@@ -410,7 +393,7 @@ Optional runtime configs
 
 > **setParseErrorHandler**: (`parseErrorHandler`) => `void`
 
-Defined in: [packages/mermaid/src/mermaid.ts:448](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L448)
+Defined in: [packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437)
 
 ## setParseErrorHandler Alternative to directly setting parseError using:
 
@@ -441,4 +424,4 @@ New parseError() callback.
 
 > **startOnLoad**: `boolean`
 
-Defined in: [packages/mermaid/src/mermaid.ts:430](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L430)
+Defined in: [packages/mermaid/src/mermaid.ts:419](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L419)

docs/config/setup/mermaid/type-aliases/SVG.md

@@ -12,4 +12,4 @@
 
 > **SVG**: `d3.Selection`<`SVGSVGElement`, `unknown`, `Element` | `null`, `unknown`>
 
-Defined in: [packages/mermaid/src/diagram-api/types.ts:126](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L126)
+Defined in: [packages/mermaid/src/diagram-api/types.ts:130](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L130)

docs/config/setup/mermaid/type-aliases/SVGGroup.md

@@ -12,4 +12,4 @@
 
 > **SVGGroup**: `d3.Selection`<`SVGGElement`, `unknown`, `Element` | `null`, `unknown`>
 
-Defined in: [packages/mermaid/src/diagram-api/types.ts:128](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L128)
+Defined in: [packages/mermaid/src/diagram-api/types.ts:132](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L132)

docs/config/setup/mermaid/variables/default.md

@@ -12,4 +12,4 @@
 
 > `const` **default**: [`Mermaid`](../interfaces/Mermaid.md)
 
-Defined in: [packages/mermaid/src/mermaid.ts:454](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L454)
+Defined in: [packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L442)

docs/ecosystem/integrations-community.md

@@ -245,7 +245,7 @@ Communication tools and platforms
 | GitHub + Mermaid         | -                                                                                                           | [🦊🔗](https://addons.mozilla.org/firefox/addon/github-mermaid/)               | -                                                                              | -                                                                                                                            | [🐙🔗](https://github.com/BackMarket/github-mermaid-extension)                                       |
 | Asciidoctor Live Preview | [🎡🔗](https://chromewebstore.google.com/detail/asciidoctorjs-live-previe/iaalpfgpbocpdfblpnhhgllgbdbchmia) | -                                                                              | -                                                                              | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/asciidoctorjs-live-previ/pefkelkanablhjdekgdahplkccnbdggd?hl=en-US) | -                                                                                                    |
 | Diagram Tab              | -                                                                                                           | -                                                                              | -                                                                              | -                                                                                                                            | [🐙🔗](https://github.com/khafast/diagramtab)                                                        |
-| Markdown Diagrams        | [🎡🔗](https://chromewebstore.google.com/detail/markdown-diagrams/pmoglnmodacnbbofbgcagndelmgaclel)         | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-diagrams/)      | -                                                                              | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/markdown-diagrams/hceenoomhhdkjjijnmlclkpenkapfihe)                 | [🐙🔗](https://github.com/marcozaccari/markdown-diagrams-browser-extension/tree/master/doc/examples) |
+| Markdown Diagrams        | [🎡🔗](https://chromewebstore.google.com/detail/markdown-diagrams/pmoglnmodacnbbofbgcagndelmgaclel)         | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-diagrams/)      | [🔴🔗](https://addons.opera.com/en/extensions/details/markdown-diagrams/)      | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/markdown-diagrams/hceenoomhhdkjjijnmlclkpenkapfihe)                 | [🐙🔗](https://github.com/marcozaccari/markdown-diagrams-browser-extension/tree/master/doc/examples) |
 | Markdown Viewer          | -                                                                                                           | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | -                                                                              | -                                                                                                                            | [🐙🔗](https://github.com/simov/markdown-viewer)                                                     |
 | Extensions for Mermaid   | -                                                                                                           | -                                                                              | [🔴🔗](https://addons.opera.com/en/extensions/details/extensions-for-mermaid/) | -                                                                                                                            | [🐙🔗](https://github.com/Stefan-S/mermaid-extension)                                                |
 | Chrome Diagrammer        | [🎡🔗](https://chromewebstore.google.com/detail/chrome-diagrammer/bkpbgjmkomfoakfklcjeoegkklgjnnpk)         | -                                                                              | -                                                                              | -                                                                                                                            | -                                                                                                    |

docs/ecosystem/mermaid-chart.md

@@ -30,7 +30,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun
 
   Official Mermaid Chart plugins:
 
-  - [Mermaid Chart GPT](https://chatgpt.com/g/g-684cc36f30208191b21383b88650a45d-mermaid-chart-diagrams-and-charts)
+  - [Mermaid Chart GPT](https://chat.openai.com/g/g-1IRFKwq4G-mermaid-chart)
   - [Confluence](https://marketplace.atlassian.com/apps/1234056/mermaid-chart-for-confluence?hosting=cloud&tab=overview)
   - [Jira](https://marketplace.atlassian.com/apps/1234810/mermaid-chart-for-jira?tab=overview&hosting=cloud)
   - [Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MermaidChart.vscode-mermaid-chart)

docs/syntax/packet.md

@@ -17,7 +17,7 @@ This diagram type is particularly useful for developers, network engineers, educ
 ## Syntax
 
 ```
-packet
+packet-beta
 start: "Block name" %% Single-bit block
 start-end: "Block name" %% Multi-bit blocks
 ... More Fields ...
@@ -28,7 +28,7 @@ start-end: "Block name" %% Multi-bit blocks
 Using start and end bit counts can be difficult, especially when modifying a design. For this we add a bit count field, which starts from the end of the previous field automagically. Use `+<count>` to set the number of bits, thus:
 
 ```
-packet
+packet-beta
 +1: "Block name" %% Single-bit block
 +8: "Block name" %% 8-bit block
 9-15: "Manually set start and end, it's fine to mix and match"
@@ -41,7 +41,7 @@ packet
 ---
 title: "TCP Packet"
 ---
-packet
+packet-beta
 0-15: "Source Port"
 16-31: "Destination Port"
 32-63: "Sequence Number"
@@ -65,7 +65,7 @@ packet
 ---
 title: "TCP Packet"
 ---
-packet
+packet-beta
 0-15: "Source Port"
 16-31: "Destination Port"
 32-63: "Sequence Number"
@@ -86,7 +86,7 @@ packet
 ```
 
 ```mermaid-example
-packet
+packet-beta
 title UDP Packet
 +16: "Source Port"
 +16: "Destination Port"
@@ -96,7 +96,7 @@ title UDP Packet
 ```
 
 ```mermaid
-packet
+packet-beta
 title UDP Packet
 +16: "Source Port"
 +16: "Destination Port"
@@ -144,7 +144,7 @@ config:
     packet:
       startByteColor: red
 ---
-packet
+packet-beta
 0-15: "Source Port"
 16-31: "Destination Port"
 32-63: "Sequence Number"

docs/syntax/treemap.md

@@ -1,353 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/treemap.md](../../packages/mermaid/src/docs/syntax/treemap.md).
-
-# Treemap Diagram
-
-> A treemap diagram displays hierarchical data as a set of nested rectangles. Each branch of the tree is represented by a rectangle, which is then tiled with smaller rectangles representing sub-branches.
-
-> **Warning**
-> This is a new diagram type in Mermaid. Its syntax may evolve in future versions.
-
-## Introduction
-
-Treemap diagrams are an effective way to visualize hierarchical data and show proportions between categories and subcategories. The size of each rectangle is proportional to the value it represents, making it easy to compare different parts of a hierarchy.
-
-Treemap diagrams are particularly useful for:
-
-- Visualizing hierarchical data structures
-- Comparing proportions between categories
-- Displaying large amounts of hierarchical data in a limited space
-- Identifying patterns and outliers in hierarchical data
-
-## Syntax
-
-```
-treemap-beta
-"Section 1"
-    "Leaf 1.1": 12
-    "Section 1.2"
-      "Leaf 1.2.1": 12
-"Section 2"
-    "Leaf 2.1": 20
-    "Leaf 2.2": 25
-```
-
-### Node Definition
-
-Nodes in a treemap are defined using the following syntax:
-
-- **Section/Parent nodes**: Defined with quoted text `"Section Name"`
-- **Leaf nodes with values**: Defined with quoted text followed by a colon and value `"Leaf Name": value`
-- **Hierarchy**: Created using indentation (spaces or tabs)
-- **Styling**: Nodes can be styled using the `:::class` syntax
-
-## Examples
-
-### Basic Treemap
-
-```mermaid-example
-treemap-beta
-"Category A"
-    "Item A1": 10
-    "Item A2": 20
-"Category B"
-    "Item B1": 15
-    "Item B2": 25
-```
-
-```mermaid
-treemap-beta
-"Category A"
-    "Item A1": 10
-    "Item A2": 20
-"Category B"
-    "Item B1": 15
-    "Item B2": 25
-```
-
-### Hierarchical Treemap
-
-```mermaid-example
-treemap-beta
-"Products"
-    "Electronics"
-        "Phones": 50
-        "Computers": 30
-        "Accessories": 20
-    "Clothing"
-        "Men's": 40
-        "Women's": 40
-```
-
-```mermaid
-treemap-beta
-"Products"
-    "Electronics"
-        "Phones": 50
-        "Computers": 30
-        "Accessories": 20
-    "Clothing"
-        "Men's": 40
-        "Women's": 40
-```
-
-### Treemap with Styling
-
-```mermaid-example
-treemap-beta
-"Section 1"
-    "Leaf 1.1": 12
-    "Section 1.2":::class1
-      "Leaf 1.2.1": 12
-"Section 2"
-    "Leaf 2.1": 20:::class1
-    "Leaf 2.2": 25
-    "Leaf 2.3": 12
-
-classDef class1 fill:red,color:blue,stroke:#FFD600;
-```
-
-```mermaid
-treemap-beta
-"Section 1"
-    "Leaf 1.1": 12
-    "Section 1.2":::class1
-      "Leaf 1.2.1": 12
-"Section 2"
-    "Leaf 2.1": 20:::class1
-    "Leaf 2.2": 25
-    "Leaf 2.3": 12
-
-classDef class1 fill:red,color:blue,stroke:#FFD600;
-```
-
-## Styling and Configuration
-
-Treemap diagrams can be customized using Mermaid's styling and configuration options.
-
-### Using classDef for Styling
-
-You can define custom styles for nodes using the `classDef` syntax, which is a standard feature across many Mermaid diagram types:
-
-```mermaid-example
-treemap-beta
-"Main"
-    "A": 20
-    "B":::important
-        "B1": 10
-        "B2": 15
-    "C": 5
-
-classDef important fill:#f96,stroke:#333,stroke-width:2px;
-```
-
-```mermaid
-treemap-beta
-"Main"
-    "A": 20
-    "B":::important
-        "B1": 10
-        "B2": 15
-    "C": 5
-
-classDef important fill:#f96,stroke:#333,stroke-width:2px;
-```
-
-### Theme Configuration
-
-You can customize the colors of your treemap using the theme configuration:
-
-```mermaid-example
----
-config:
-    theme: 'forest'
----
-treemap-beta
-"Category A"
-    "Item A1": 10
-    "Item A2": 20
-"Category B"
-    "Item B1": 15
-    "Item B2": 25
-```
-
-```mermaid
----
-config:
-    theme: 'forest'
----
-treemap-beta
-"Category A"
-    "Item A1": 10
-    "Item A2": 20
-"Category B"
-    "Item B1": 15
-    "Item B2": 25
-```
-
-### Diagram Padding
-
-You can adjust the padding around the treemap diagram using the `diagramPadding` configuration option:
-
-```mermaid-example
----
-config:
-  treemap:
-    diagramPadding: 200
----
-treemap-beta
-"Category A"
-    "Item A1": 10
-    "Item A2": 20
-"Category B"
-    "Item B1": 15
-    "Item B2": 25
-```
-
-```mermaid
----
-config:
-  treemap:
-    diagramPadding: 200
----
-treemap-beta
-"Category A"
-    "Item A1": 10
-    "Item A2": 20
-"Category B"
-    "Item B1": 15
-    "Item B2": 25
-```
-
-## Configuration Options
-
-The treemap diagram supports the following configuration options:
-
-| Option         | Description                                                                 | Default |
-| -------------- | --------------------------------------------------------------------------- | ------- |
-| useMaxWidth    | When true, the diagram width is set to 100% and scales with available space | true    |
-| padding        | Internal padding between nodes                                              | 10      |
-| diagramPadding | Padding around the entire diagram                                           | 8       |
-| showValues     | Whether to show values in the treemap                                       | true    |
-| nodeWidth      | Width of nodes                                                              | 100     |
-| nodeHeight     | Height of nodes                                                             | 40      |
-| borderWidth    | Width of borders                                                            | 1       |
-| valueFontSize  | Font size for values                                                        | 12      |
-| labelFontSize  | Font size for labels                                                        | 14      |
-| valueFormat    | Format for values (see Value Formatting section)                            | ','     |
-
-## Advanced Features
-
-### Value Formatting
-
-Values in treemap diagrams can be formatted to display in different ways using the `valueFormat` configuration option. This option primarily uses [D3's format specifiers](https://github.com/d3/d3-format#locale_format) to control how numbers are displayed, with some additional special cases for common formats.
-
-Some common format patterns:
-
-- `,` - Thousands separator (default)
-- `$` - Add dollar sign
-- `.1f` - Show one decimal place
-- `.1%` - Show as percentage with one decimal place
-- `$0,0` - Dollar sign with thousands separator
-- `$.2f` - Dollar sign with 2 decimal places
-- `$,.2f` - Dollar sign with thousands separator and 2 decimal places
-
-The treemap diagram supports both standard D3 format specifiers and some common currency formats that combine the dollar sign with other formatting options.
-
-Example with currency formatting:
-
-```mermaid-example
----
-config:
-  treemap:
-    valueFormat: '$0,0'
----
-treemap-beta
-"Budget"
-    "Operations"
-        "Salaries": 700000
-        "Equipment": 200000
-        "Supplies": 100000
-    "Marketing"
-        "Advertising": 400000
-        "Events": 100000
-```
-
-```mermaid
----
-config:
-  treemap:
-    valueFormat: '$0,0'
----
-treemap-beta
-"Budget"
-    "Operations"
-        "Salaries": 700000
-        "Equipment": 200000
-        "Supplies": 100000
-    "Marketing"
-        "Advertising": 400000
-        "Events": 100000
-```
-
-Example with percentage formatting:
-
-```mermaid-example
----
-config:
-  treemap:
-    valueFormat: '$.1%'
----
-treemap-beta
-"Market Share"
-    "Company A": 0.35
-    "Company B": 0.25
-    "Company C": 0.15
-    "Others": 0.25
-```
-
-```mermaid
----
-config:
-  treemap:
-    valueFormat: '$.1%'
----
-treemap-beta
-"Market Share"
-    "Company A": 0.35
-    "Company B": 0.25
-    "Company C": 0.15
-    "Others": 0.25
-```
-
-## Common Use Cases
-
-Treemap diagrams are commonly used for:
-
-1. **Financial Data**: Visualizing budget allocations, market shares, or portfolio compositions
-2. **File System Analysis**: Showing disk space usage by folders and files
-3. **Population Demographics**: Displaying population distribution across regions and subregions
-4. **Product Hierarchies**: Visualizing product categories and their sales volumes
-5. **Organizational Structures**: Representing departments and team sizes in a company
-
-## Limitations
-
-- Treemap diagrams work best when the data has a natural hierarchy
-- Very small values may be difficult to see or label in a treemap diagram
-- Deep hierarchies (many levels) can be challenging to represent clearly
-- Treemap diagrams are not well suited for representing data with negative values
-
-## Related Diagrams
-
-If treemap diagrams don't suit your needs, consider these alternatives:
-
-- [**Pie Charts**](./pie.md): For simple proportion comparisons without hierarchy
-- **Sunburst Diagrams**: For hierarchical data with a radial layout (yet to be released in Mermaid).
-- [**Sankey Diagrams**](./sankey.md): For flow-based hierarchical data
-
-## Notes
-
-The treemap diagram implementation in Mermaid is designed to be simple to use while providing powerful visualization capabilities. As this is a newer diagram type, feedback and feature requests are welcome through the Mermaid GitHub repository.

package.json

@@ -64,7 +64,7 @@
   },
   "devDependencies": {
     "@applitools/eyes-cypress": "^3.44.9",
-    "@argos-ci/cypress": "^5.0.2",
+    "@argos-ci/cypress": "^4.0.3",
     "@changesets/changelog-github": "^0.5.1",
     "@changesets/cli": "^2.27.12",
     "@cspell/eslint-plugin": "^8.19.3",
@@ -88,8 +88,8 @@
     "cors": "^2.8.5",
     "cpy-cli": "^5.0.0",
     "cross-env": "^7.0.3",
-    "cspell": "^9.1.3",
-    "cypress": "^14.5.1",
+    "cspell": "^8.6.1",
+    "cypress": "^14.0.3",
     "cypress-image-snapshot": "^4.0.1",
     "cypress-split": "^1.24.14",
     "esbuild": "^0.25.0",
@@ -109,25 +109,25 @@
     "globals": "^16.0.0",
     "globby": "^14.0.2",
     "husky": "^9.1.7",
-    "jest": "^30.0.4",
+    "jest": "^29.7.0",
     "jison": "^0.4.18",
     "js-yaml": "^4.1.0",
     "jsdom": "^26.0.0",
     "langium-cli": "3.3.0",
-    "lint-staged": "^16.1.2",
+    "lint-staged": "^15.2.11",
     "markdown-table": "^3.0.4",
     "nyc": "^17.1.0",
     "path-browserify": "^1.0.1",
     "prettier": "^3.5.2",
     "prettier-plugin-jsdoc": "^1.3.2",
     "rimraf": "^6.0.1",
-    "rollup-plugin-visualizer": "^6.0.3",
+    "rollup-plugin-visualizer": "^5.14.0",
     "start-server-and-test": "^2.0.10",
     "tslib": "^2.8.1",
     "tsx": "^4.7.3",
     "typescript": "~5.7.3",
     "typescript-eslint": "^8.32.0",
-    "vite": "^7.0.3",
+    "vite": "^6.1.1",
     "vite-plugin-istanbul": "^7.0.0",
     "vitest": "^3.0.6"
   },

packages/examples/package.json

@@ -1,32 +0,0 @@
-{
-  "name": "@mermaid-js/examples",
-  "version": "0.0.1-beta.1",
-  "description": "Mermaid examples package",
-  "author": "Sidharth Vinod",
-  "type": "module",
-  "module": "./dist/mermaid-examples.core.mjs",
-  "types": "./dist/mermaid.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/mermaid-examples.core.mjs",
-      "default": "./dist/mermaid-examples.core.mjs"
-    }
-  },
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "clean": "rimraf dist"
-  },
-  "dependencies": {},
-  "devDependencies": {
-    "mermaid": "workspace:*"
-  },
-  "peerDependencies": {
-    "mermaid": "workspace:~"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}

packages/examples/src/example.spec.ts

@@ -1,34 +0,0 @@
-import mermaid from 'mermaid';
-import { diagramData } from './index.js';
-
-describe('examples', () => {
-  beforeAll(async () => {
-    // To trigger the diagram registration
-    await mermaid.registerExternalDiagrams([]);
-  });
-
-  it('should have examples for each diagrams', () => {
-    const skippedDiagrams = [
-      // These diagrams have no examples
-      'error',
-      'info',
-      '---',
-      // These diagrams have v2 versions, with examples
-      'class',
-      'graph',
-      'flowchart-elk',
-      'flowchart',
-      'state',
-    ];
-    const diagrams = mermaid
-      .getRegisteredDiagramsMetadata()
-      .filter((d) => !skippedDiagrams.includes(d.id));
-    expect(diagrams.length).toBeGreaterThan(0);
-    for (const diagram of diagrams) {
-      const data = diagramData.find((d) => d.id === diagram.id)!;
-      expect(data, `Example for ${diagram.id} is not defined`).toBeDefined();
-      expect(data.examples.length).toBeGreaterThan(0);
-      expect(data.examples.filter((e) => e.isDefault).length).toBe(1);
-    }
-  });
-});

packages/examples/src/examples/architecture.ts

@@ -1,24 +0,0 @@
-import type { DiagramMetadata } from '../types.js';
-
-export default {
-  id: 'architecture',
-  name: 'Architecture Diagram',
-  description: 'Visualize system architecture and components',
-  examples: [
-    {
-      title: 'Basic System Architecture',
-      isDefault: true,
-      code: `architecture-beta
-    group api(cloud)[API]
-
-    service db(database)[Database] in api
-    service disk1(disk)[Storage] in api
-    service disk2(disk)[Storage] in api
-    service server(server)[Server] in api
-
-    db:L -- R:server
-    disk1:T -- B:server
-    disk2:T -- B:db`,
-    },
-  ],
-} satisfies DiagramMetadata;

packages/examples/src/examples/block.ts

@@ -1,27 +0,0 @@
-import type { DiagramMetadata } from '../types.js';
-
-export default {
-  id: 'block',
-  name: 'Block Diagram',
-  description: 'Create block-based visualizations with beta styling',
-  examples: [
-    {
-      title: 'Basic Block Layout',
-      isDefault: true,
-      code: `block-beta
-columns 1
-  db(("DB"))
-  blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
-  block:ID
-    A
-    B["A wide one in the middle"]
-    C
-  end
-  space
-  D
-  ID --> D
-  C --> D
-  style B fill:#969,stroke:#333,stroke-width:4px`,
-    },
-  ],
-} satisfies DiagramMetadata;

packages/examples/src/examples/c4.ts

@@ -1,47 +0,0 @@
-import type { DiagramMetadata } from '../types.js';
-
-export default {
-  id: 'c4',
-  name: 'C4 Diagram',
-  description:
-    'Visualize software architecture using the C4 model (Context, Container, Component, Code)',
-  examples: [
-    {
-      title: 'Internet Banking System Context',
-      isDefault: true,
-      code: `C4Context
-    title System Context diagram for Internet Banking System
-    Enterprise_Boundary(b0, "BankBoundary0") {
-        Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
-        Person(customerB, "Banking Customer B")
-        Person_Ext(customerC, "Banking Customer C", "desc")
-
-        Person(customerD, "Banking Customer D", "A customer of the bank, <br/> 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") {
-            SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
-
-            System_Boundary(b2, "BankBoundary2") {
-                System(SystemA, "Banking System A")
-                System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
-            }
-
-            System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
-            SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
-
-            Boundary(b3, "BankBoundary3", "boundary") {
-                SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
-                SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
-            }
-        }
-    }
-
-    BiRel(customerA, SystemAA, "Uses")
-    BiRel(SystemAA, SystemE, "Uses")
-    Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
-    Rel(SystemC, customerA, "Sends e-mails to")`,
-    },
-  ],
-} satisfies DiagramMetadata;

packages/examples/src/examples/class.ts

@@ -1,34 +0,0 @@
-import type { DiagramMetadata } from '../types.js';
-
-export default {
-  id: 'classDiagram',
-  name: 'Class Diagram',
-  description: 'Visualize class structures and relationships in object-oriented programming',
-  examples: [
-    {
-      title: 'Basic Class Inheritance',
-      isDefault: true,
-      code: `classDiagram
-    Animal <|-- Duck
-    Animal <|-- Fish
-    Animal <|-- Zebra
-    Animal : +int age
-    Animal : +String gender
-    Animal: +isMammal()
-    Animal: +mate()
-    class Duck{
-      +String beakColor
-      +swim()
-      +quack()
-    }
-    class Fish{
-      -int sizeInFeet
-      -canEat()
-    }
-    class Zebra{
-      +bool is_wild
-      +run()
-    }`,
-    },
-  ],
-} satisfies DiagramMetadata;

packages/examples/src/examples/er.ts

@@ -1,36 +0,0 @@
-import type { DiagramMetadata } from '../types.js';
-
-export default {
-  id: 'er',
-  name: 'Entity Relationship Diagram',
-  description: 'Visualize database schemas and relationships between entities',
-  examples: [
-    {
-      title: 'Basic ER Schema',
-      isDefault: true,
-      code: `erDiagram
-    CUSTOMER ||--o{ ORDER : places
-    ORDER ||--|{ ORDER_ITEM : contains
-    PRODUCT ||--o{ ORDER_ITEM : includes
-    CUSTOMER {
-        string id
-        string name
-        string email
-    }
-    ORDER {
-        string id
-        date orderDate
-        string status
-    }
-    PRODUCT {
-        string id
-        string name
-        float price
-    }
-    ORDER_ITEM {
-        int quantity
-        float price
-    }`,
-    },
-  ],
-} satisfies DiagramMetadata;

packages/examples/src/examples/flowchart.ts

@@ -1,19 +0,0 @@
-import type { DiagramMetadata } from '../types.js';
-
-export default {
-  id: 'flowchart-v2',
-  name: 'Flowchart',
-  description: 'Visualize flowcharts and directed graphs',
-  examples: [
-    {
-      title: 'Basic Flowchart',
-      isDefault: true,
-      code: `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]`,
-    },
-  ],
-} satisfies DiagramMetadata;

packages/examples/src/examples/gantt.ts

@@ -1,22 +0,0 @@
-import type { DiagramMetadata } from '../types.js';
-
-export default {
-  id: 'gantt',
-  name: 'Gantt Chart',
-  description: 'Visualize project schedules and timelines',
-  examples: [
-    {
-      title: 'Basic Project Timeline',
-      isDefault: true,
-      code: `gantt
-    title A Gantt Diagram
-    dateFormat  YYYY-MM-DD
-    section Section
-    A task           :a1, 2014-01-01, 30d
-    Another task     :after a1  , 20d
-    section Another
-    Task in sec      :2014-01-12  , 12d
-    another task      : 24d`,
-    },
-  ],
-} satisfies DiagramMetadata;

packages/examples/src/examples/git.ts

@@ -1,28 +0,0 @@
-import type { DiagramMetadata } from '../types.js';
-
-export default {
-  id: 'gitGraph',
-  name: 'Git Graph',
-  description: 'Visualize Git repository history and branch relationships',
-  examples: [
-    {
-      title: 'Basic Git Flow',
-      isDefault: true,
-      code: `gitGraph
-    commit
-    branch develop
-    checkout develop
-    commit
-    commit
-    checkout main
-    merge develop
-    commit
-    branch feature
-    checkout feature
-    commit
-    commit
-    checkout main
-    merge feature`,
-    },
-  ],
-} satisfies DiagramMetadata;

packages/examples/src/examples/kanban.ts

@@ -1,37 +0,0 @@
-import type { DiagramMetadata } from '../types.js';
-
-export default {
-  id: 'kanban',
-  name: 'Kanban Diagram',
-  description: 'Visualize work items in a Kanban board',
-  examples: [
-    {
-      title: 'Kanban Diagram',
-      isDefault: true,
-      code: `---
-config:
-  kanban:
-    ticketBaseUrl: 'https://github.com/mermaid-js/mermaid/issues/#TICKET#'
----
-kanban
-  Todo
-    [Create Documentation]
-    docs[Create Blog about the new diagram]
-  [In progress]
-    id6[Create renderer so that it works in all cases. We also add some extra text here for testing purposes. And some more just for the extra flare.]
-  id9[Ready for deploy]
-    id8[Design grammar]@{ assigned: 'knsv' }
-  id10[Ready for test]
-    id4[Create parsing tests]@{ ticket: 2038, assigned: 'K.Sveidqvist', priority: 'High' }
-    id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
-  id11[Done]
-    id5[define getData]
-    id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: 2036, priority: 'Very High'}
-    id3[Update DB function]@{ ticket: 2037, assigned: knsv, priority: 'High' }
-
-  id12[Can't reproduce]
-    id3[Weird flickering in Firefox]
-`,
-    },
-  ],
-} satisfies DiagramMetadata;

packages/examples/src/examples/mindmap.ts

@@ -1,32 +0,0 @@
-import type { DiagramMetadata } from '../types.js';
-
-export default {
-  id: 'mindmap',
-  name: 'Mindmap',
-  description: 'Visualize ideas and concepts in a tree-like structure',
-  examples: [
-    {
-      title: 'Basic Mindmap',
-      isDefault: true,
-      code: `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
-      Pen and paper
-      Mermaid`,
-    },
-  ],
-} satisfies DiagramMetadata;
-
-// cspell:ignore Buzan

packages/examples/src/examples/packet.ts

@@ -1,34 +0,0 @@
-import type { DiagramMetadata } from '../types.js';
-
-export default {
-  id: 'packet',
-  name: 'Packet Diagram',
-  description: 'Visualize packet data and network traffic',
-  examples: [
-    {
-      title: 'TCP Packet',
-      isDefault: true,
-      code: `---
-title: "TCP Packet"
----
-packet
-0-15: "Source Port"
-16-31: "Destination Port"
-32-63: "Sequence Number"
-64-95: "Acknowledgment Number"
-96-99: "Data Offset"
-100-105: "Reserved"
-106: "URG"
-107: "ACK"
-108: "PSH"
-109: "RST"
-110: "SYN"
-111: "FIN"
-112-127: "Window"
-128-143: "Checksum"
-144-159: "Urgent Pointer"
-160-191: "(Options and Padding)"
-192-255: "Data (variable length)"`,
-    },
-  ],
-} satisfies DiagramMetadata;

packages/examples/src/examples/pie.ts

@@ -1,17 +0,0 @@
-import type { DiagramMetadata } from '../types.js';
-
-export default {
-  id: 'pie',
-  name: 'Pie Chart',
-  description: 'Visualize data as proportional segments of a circle',
-  examples: [
-    {
-      title: 'Basic Pie Chart',
-      isDefault: true,
-      code: `pie title Pets adopted by volunteers
-    "Dogs" : 386
-    "Cats" : 85
-    "Rats" : 15`,
-    },
-  ],
-} satisfies DiagramMetadata;

packages/examples/src/examples/quadrant-chart.ts

@@ -1,27 +0,0 @@
-import type { DiagramMetadata } from '../types.js';
-
-export default {
-  id: 'quadrantChart',
-  name: 'Quadrant Chart',
-  description: 'Visualize items in a 2x2 matrix based on two variables',
-  examples: [
-    {
-      title: 'Product Positioning',
-      isDefault: true,
-      code: `quadrantChart
-    title Reach and engagement of campaigns
-    x-axis Low Reach --> High Reach
-    y-axis Low Engagement --> High Engagement
-    quadrant-1 We should expand
-    quadrant-2 Need to promote
-    quadrant-3 Re-evaluate
-    quadrant-4 May be improved
-    Campaign A: [0.3, 0.6]
-    Campaign B: [0.45, 0.23]
-    Campaign C: [0.57, 0.69]
-    Campaign D: [0.78, 0.34]
-    Campaign E: [0.40, 0.34]
-    Campaign F: [0.35, 0.78]`,
-    },
-  ],
-} satisfies DiagramMetadata;

packages/examples/src/examples/radar.ts

@@ -1,25 +0,0 @@
-import type { DiagramMetadata } from '../types.js';
-
-export default {
-  id: 'radar',
-  name: 'Radar Diagram',
-  description: 'Visualize data in a radial format',
-  examples: [
-    {
-      title: 'Student Grades',
-      isDefault: true,
-      code: `---
-title: "Grades"
----
-radar-beta
-  axis m["Math"], s["Science"], e["English"]
-  axis h["History"], g["Geography"], a["Art"]
-  curve a["Alice"]{85, 90, 80, 70, 75, 90}
-  curve b["Bob"]{70, 75, 85, 80, 90, 85}
-
-  max 100
-  min 0
-`,
-    },
-  ],
-} satisfies DiagramMetadata;

packages/examples/src/examples/requirement.ts

@@ -1,27 +0,0 @@
-import type { DiagramMetadata } from '../types.js';
-
-export default {
-  id: 'requirement',
-  name: 'Requirement Diagram',
-  description: 'Visualize system requirements and their relationships',
-  examples: [
-    {
-      title: 'Basic Requirements',
-      code: `requirementDiagram
-
-    requirement test_req {
-    id: 1
-    text: the test text.
-    risk: high
-    verifymethod: test
-    }
-
-    element test_entity {
-    type: simulation
-    }
-
-    test_entity - satisfies -> test_req`,
-      isDefault: true,
-    },
-  ],
-} satisfies DiagramMetadata;

packages/examples/src/examples/sankey.ts

@@ -1,88 +0,0 @@
-import type { DiagramMetadata } from '../types.js';
-
-export default {
-  id: 'sankey',
-  name: 'Sankey Diagram',
-  description: 'Visualize flow quantities between different stages or processes',
-  examples: [
-    {
-      title: 'Energy Flow',
-      isDefault: true,
-      code: `---
-config:
-  sankey:
-    showValues: false
----
-sankey-beta
-
-Agricultural 'waste',Bio-conversion,124.729
-Bio-conversion,Liquid,0.597
-Bio-conversion,Losses,26.862
-Bio-conversion,Solid,280.322
-Bio-conversion,Gas,81.144
-Biofuel imports,Liquid,35
-Biomass imports,Solid,35
-Coal imports,Coal,11.606
-Coal reserves,Coal,63.965
-Coal,Solid,75.571
-District heating,Industry,10.639
-District heating,Heating and cooling - commercial,22.505
-District heating,Heating and cooling - homes,46.184
-Electricity grid,Over generation / exports,104.453
-Electricity grid,Heating and cooling - homes,113.726
-Electricity grid,H2 conversion,27.14
-Electricity grid,Industry,342.165
-Electricity grid,Road transport,37.797
-Electricity grid,Agriculture,4.412
-Electricity grid,Heating and cooling - commercial,40.858
-Electricity grid,Losses,56.691
-Electricity grid,Rail transport,7.863
-Electricity grid,Lighting & appliances - commercial,90.008
-Electricity grid,Lighting & appliances - homes,93.494
-Gas imports,NGas,40.719
-Gas reserves,NGas,82.233
-Gas,Heating and cooling - commercial,0.129
-Gas,Losses,1.401
-Gas,Thermal generation,151.891
-Gas,Agriculture,2.096
-Gas,Industry,48.58
-Geothermal,Electricity grid,7.013
-H2 conversion,H2,20.897
-H2 conversion,Losses,6.242
-H2,Road transport,20.897
-Hydro,Electricity grid,6.995
-Liquid,Industry,121.066
-Liquid,International shipping,128.69
-Liquid,Road transport,135.835
-Liquid,Domestic aviation,14.458
-Liquid,International aviation,206.267
-Liquid,Agriculture,3.64
-Liquid,National navigation,33.218
-Liquid,Rail transport,4.413
-Marine algae,Bio-conversion,4.375
-NGas,Gas,122.952
-Nuclear,Thermal generation,839.978
-Oil imports,Oil,504.287
-Oil reserves,Oil,107.703
-Oil,Liquid,611.99
-Other waste,Solid,56.587
-Other waste,Bio-conversion,77.81
-Pumped heat,Heating and cooling - homes,193.026
-Pumped heat,Heating and cooling - commercial,70.672
-Solar PV,Electricity grid,59.901
-Solar Thermal,Heating and cooling - homes,19.263
-Solar,Solar Thermal,19.263
-Solar,Solar PV,59.901
-Solid,Agriculture,0.882
-Solid,Thermal generation,400.12
-Solid,Industry,46.477
-Thermal generation,Electricity grid,525.531
-Thermal generation,Losses,787.129
-Thermal generation,District heating,79.329
-Tidal,Electricity grid,9.452
-UK land based bioenergy,Bio-conversion,182.01
-Wave,Electricity grid,19.013
-Wind,Electricity grid,289.366`,
-    },
-  ],
-} satisfies DiagramMetadata;

packages/examples/src/examples/sequence.ts

@@ -1,18 +0,0 @@
-import type { DiagramMetadata } from '../types.js';
-
-export default {
-  id: 'sequence',
-  name: 'Sequence Diagram',
-  description: 'Visualize interactions between objects over time',
-  examples: [
-    {
-      title: 'Basic Sequence',
-      isDefault: true,
-      code: `sequenceDiagram
-    Alice->>+John: Hello John, how are you?
-    Alice->>+John: John, can you hear me?
-    John-->>-Alice: Hi Alice, I can hear you!
-    John-->>-Alice: I feel great!`,
-    },
-  ],
-} satisfies DiagramMetadata;

packages/examples/src/examples/state.ts

@@ -1,20 +0,0 @@
-import type { DiagramMetadata } from '../types.js';
-
-export default {
-  id: 'stateDiagram',
-  name: 'State Diagram',
-  description: 'Visualize the states and transitions of a system',
-  examples: [
-    {
-      title: 'Basic State Diagram',
-      code: `stateDiagram-v2
-    [*] --> Still
-    Still --> [*]
-    Still --> Moving
-    Moving --> Still
-    Moving --> Crash
-    Crash --> [*]`,
-      isDefault: true,
-    },
-  ],
-} satisfies DiagramMetadata;

packages/examples/src/examples/timeline.ts

@@ -1,20 +0,0 @@
-import type { DiagramMetadata } from '../types.js';
-
-export default {
-  id: 'timeline',
-  name: 'Timeline Diagram',
-  description: 'Visualize events and milestones in chronological order',
-  examples: [
-    {
-      title: 'Project Timeline',
-      isDefault: true,
-      code: `timeline
-    title History of Social Media Platform
-    2002 : LinkedIn
-    2004 : Facebook
-         : Google
-    2005 : YouTube
-    2006 : Twitter`,
-    },
-  ],
-} satisfies DiagramMetadata;

packages/examples/src/examples/treemap.ts

@@ -1,21 +0,0 @@
-import type { DiagramMetadata } from '../types.js';
-
-export default {
-  id: 'treemap',
-  name: 'Treemap',
-  description: 'Visualize hierarchical data as nested rectangles',
-  examples: [
-    {
-      title: 'Treemap',
-      isDefault: true,
-      code: `treemap-beta
-"Section 1"
-    "Leaf 1.1": 12
-    "Section 1.2"
-      "Leaf 1.2.1": 12
-"Section 2"
-    "Leaf 2.1": 20
-    "Leaf 2.2": 25`,
-    },
-  ],
-} satisfies DiagramMetadata;

packages/examples/src/examples/user-journey.ts

@@ -1,22 +0,0 @@
-import type { DiagramMetadata } from '../types.js';
-
-export default {
-  id: 'journey',
-  name: 'User Journey Diagram',
-  description: 'Visualize user interactions and experiences with a system',
-  examples: [
-    {
-      title: 'My Working Day',
-      isDefault: true,
-      code: `journey
-    title My working day
-    section Go to work
-      Make tea: 5: Me
-      Go upstairs: 3: Me
-      Do work: 1: Me, Cat
-    section Go home
-      Go downstairs: 5: Me
-      Sit down: 5: Me`,
-    },
-  ],
-} satisfies DiagramMetadata;

packages/examples/src/examples/xychart.ts

@@ -1,19 +0,0 @@
-import type { DiagramMetadata } from '../types.js';
-
-export default {
-  id: 'xychart',
-  name: 'XY Chart',
-  description: 'Create scatter plots and line charts with customizable axes',
-  examples: [
-    {
-      title: 'Sales Revenue',
-      isDefault: true,
-      code: `xychart-beta
-    title "Sales Revenue"
-    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
-    y-axis "Revenue (in $)" 4000 --> 11000
-    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
-    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]`,
-    },
-  ],
-} satisfies DiagramMetadata;

packages/examples/src/index.ts

@@ -1,48 +0,0 @@
-import type { DiagramMetadata } from './types.js';
-import flowChart from './examples/flowchart.js';
-import c4 from './examples/c4.js';
-import kanban from './examples/kanban.js';
-import classDiagram from './examples/class.js';
-import sequenceDiagram from './examples/sequence.js';
-import pieDiagram from './examples/pie.js';
-import userJourneyDiagram from './examples/user-journey.js';
-import mindmapDiagram from './examples/mindmap.js';
-import requirementDiagram from './examples/requirement.js';
-import radarDiagram from './examples/radar.js';
-import stateDiagram from './examples/state.js';
-import erDiagram from './examples/er.js';
-import gitDiagram from './examples/git.js';
-import architectureDiagram from './examples/architecture.js';
-import xychartDiagram from './examples/xychart.js';
-import sankeyDiagram from './examples/sankey.js';
-import ganttDiagram from './examples/gantt.js';
-import timelineDiagram from './examples/timeline.js';
-import quadrantChart from './examples/quadrant-chart.js';
-import packetDiagram from './examples/packet.js';
-import blockDiagram from './examples/block.js';
-import treemapDiagram from './examples/treemap.js';
-
-export const diagramData: DiagramMetadata[] = [
-  flowChart,
-  c4,
-  kanban,
-  classDiagram,
-  sequenceDiagram,
-  pieDiagram,
-  userJourneyDiagram,
-  mindmapDiagram,
-  requirementDiagram,
-  radarDiagram,
-  stateDiagram,
-  erDiagram,
-  gitDiagram,
-  architectureDiagram,
-  xychartDiagram,
-  sankeyDiagram,
-  ganttDiagram,
-  timelineDiagram,
-  quadrantChart,
-  packetDiagram,
-  blockDiagram,
-  treemapDiagram,
-];

packages/examples/src/types.ts

@@ -1,12 +0,0 @@
-export interface Example {
-  title: string;
-  code: string;
-  isDefault?: boolean;
-}
-
-export interface DiagramMetadata {
-  id: string;
-  name: string;
-  description: string;
-  examples: Example[];
-}

packages/examples/tsconfig.json

@@ -1,11 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./dist",
-    "rootDir": "./src",
-    "module": "Node16",
-    "moduleResolution": "Node16"
-  },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist"]
-}

packages/mermaid-layout-elk/README.md

@@ -2,7 +2,7 @@
 
 This package provides a layout engine for Mermaid based on the [ELK](https://www.eclipse.org/elk/) layout engine.
 
-> [!NOTE]  
+> [!NOTE]
 > The ELK Layout engine will not be available in all providers that support mermaid by default.
 > The websites will have to install the `@mermaid-js/layout-elk` package to use the ELK layout engine.
 
@@ -69,4 +69,4 @@ mermaid.registerLayoutLoaders(elkLayouts);
 - `elk.mrtree`: Multi-root tree layout
 - `elk.sporeOverlap`: Spore overlap layout
 
-<!-- TODO: Add images for these layouts, as GitHub doesn't support natively -->
+<!-- TODO: Add images for these layouts, as GitHub doesn't support natively. -->

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

@@ -1,6 +1,13 @@
+import type {
+  InternalHelpers,
+  LayoutData,
+  RenderOptions,
+  SVG,
+  SVGGroup,
+} from '@mermaid-chart/mermaid';
+// @ts-ignore TODO: Investigate D3 issue
 import { curveLinear } from 'd3';
 import ELK from 'elkjs/lib/elk.bundled.js';
-import type { InternalHelpers, LayoutData, RenderOptions, SVG, SVGGroup } from 'mermaid';
 import { type TreeData, findCommonAncestor } from './find-common-ancestor.js';
 
 type Node = LayoutData['nodes'][number];
@@ -51,11 +58,9 @@ export const render = async (
 
     // Add the element to the DOM
     if (!node.isGroup) {
-      const child: NodeWithVertex = {
-        ...node,
-      };
+      const child = node as NodeWithVertex;
       graph.children.push(child);
-      nodeDb[node.id] = child;
+      nodeDb[node.id] = node;
 
       const childNodeEl = await insertNode(nodeEl, node, { config, dir: node.dir });
       const boundingBox = childNodeEl.node()!.getBBox();
@@ -68,7 +73,9 @@ export const render = async (
         ...node,
         children: [],
       };
+      // Let elk render with the copy
       graph.children.push(child);
+      // Save the original containing the intersection function
       nodeDb[node.id] = child;
       await addVertices(nodeEl, nodeArr, child, node.id);
 
@@ -143,7 +150,7 @@ export const render = async (
             height: node.height,
           };
           if (node.isGroup) {
-            log.debug('id abc88 subgraph = ', node.id, node.x, node.y, node.labelData);
+            log.debug('Id abc88 subgraph = ', node.id, node.x, node.y, node.labelData);
             const subgraphEl = subgraphsEl.insert('g').attr('class', 'subgraph');
             // TODO use faster way of cloning
             const clusterNode = JSON.parse(JSON.stringify(node));
@@ -152,10 +159,10 @@ export const render = async (
             clusterNode.width = Math.max(clusterNode.width, node.labelData.width);
             await insertCluster(subgraphEl, clusterNode);
 
-            log.debug('id (UIO)= ', node.id, node.width, node.shape, node.labels);
+            log.debug('Id (UIO)= ', node.id, node.width, node.shape, node.labels);
           } else {
             log.info(
-              'id NODE = ',
+              'Id NODE = ',
               node.id,
               node.x,
               node.y,
@@ -259,7 +266,6 @@ export const render = async (
     const edges = dataForLayout.edges;
     const labelsEl = svg.insert('g').attr('class', 'edgeLabels');
     const linkIdCnt: any = {};
-    const dir = dataForLayout.direction || 'DOWN';
     let defaultStyle: string | undefined;
     let defaultLabelStyle: string | undefined;
 
@@ -289,7 +295,7 @@ export const render = async (
           linkIdCnt[linkIdBase]++;
           log.info('abc78 new entry', linkIdBase, linkIdCnt[linkIdBase]);
         }
-        const linkId = linkIdBase + '_' + linkIdCnt[linkIdBase];
+        const linkId = linkIdBase; // + '_' + linkIdCnt[linkIdBase];
         edge.id = linkId;
         log.info('abc78 new link id to be used is', linkIdBase, linkId, linkIdCnt[linkIdBase]);
         const linkNameStart = 'LS_' + edge.start;
@@ -396,13 +402,11 @@ export const render = async (
 
         // calculate start and end points of the edge, note that the source and target
         // can be modified for shapes that have ports
-        // @ts-ignore TODO: fix this
-        const { source, target, sourceId, targetId } = getEdgeStartEndPoint(edge, dir);
+
+        const { source, target, sourceId, targetId } = getEdgeStartEndPoint(edge);
         log.debug('abc78 source and target', source, target);
         // Add the edge to the graph
         graph.edges.push({
-          // @ts-ignore TODO: fix this
-          id: 'e' + edge.start + edge.end,
           ...edge,
           sources: [source],
           targets: [target],
@@ -459,155 +463,6 @@ export const render = async (
     }
   }
 
-  function intersectLine(
-    p1: { y: number; x: number },
-    p2: { y: number; x: number },
-    q1: { x: any; y: any },
-    q2: { x: any; y: any }
-  ) {
-    log.debug('UIO intersectLine', p1, p2, q1, q2);
-    // Algorithm from J. Avro, (ed.) Graphics Gems, No 2, Morgan Kaufmann, 1994,
-    // p7 and p473.
-
-    // let a1, a2, b1, b2, c1, c2;
-    // let r1, r2, r3, r4;
-    // let denom, offset, num;
-    // let x, y;
-
-    // Compute a1, b1, c1, where line joining points 1 and 2 is F(x,y) = a1 x +
-    // b1 y + c1 = 0.
-    const a1 = p2.y - p1.y;
-    const b1 = p1.x - p2.x;
-    const c1 = p2.x * p1.y - p1.x * p2.y;
-
-    // Compute r3 and r4.
-    const r3 = a1 * q1.x + b1 * q1.y + c1;
-    const r4 = a1 * q2.x + b1 * q2.y + c1;
-
-    const epsilon = 1e-6;
-
-    // Check signs of r3 and r4. If both point 3 and point 4 lie on
-    // same side of line 1, the line segments do not intersect.
-    if (r3 !== 0 && r4 !== 0 && sameSign(r3, r4)) {
-      return /*DON'T_INTERSECT*/;
-    }
-
-    // Compute a2, b2, c2 where line joining points 3 and 4 is G(x,y) = a2 x + b2 y + c2 = 0
-    const a2 = q2.y - q1.y;
-    const b2 = q1.x - q2.x;
-    const c2 = q2.x * q1.y - q1.x * q2.y;
-
-    // Compute r1 and r2
-    const r1 = a2 * p1.x + b2 * p1.y + c2;
-    const r2 = a2 * p2.x + b2 * p2.y + c2;
-
-    // Check signs of r1 and r2. If both point 1 and point 2 lie
-    // on same side of second line segment, the line segments do
-    // not intersect.
-    if (Math.abs(r1) < epsilon && Math.abs(r2) < epsilon && sameSign(r1, r2)) {
-      return /*DON'T_INTERSECT*/;
-    }
-
-    // Line segments intersect: compute intersection point.
-    const denom = a1 * b2 - a2 * b1;
-    if (denom === 0) {
-      return /*COLLINEAR*/;
-    }
-
-    const offset = Math.abs(denom / 2);
-
-    // The denom/2 is to get rounding instead of truncating. It
-    // is added or subtracted to the numerator, depending upon the
-    // sign of the numerator.
-    let num = b1 * c2 - b2 * c1;
-    const x = num < 0 ? (num - offset) / denom : (num + offset) / denom;
-
-    num = a2 * c1 - a1 * c2;
-    const y = num < 0 ? (num - offset) / denom : (num + offset) / denom;
-
-    return { x: x, y: y };
-  }
-
-  function sameSign(r1: number, r2: number) {
-    return r1 * r2 > 0;
-  }
-  const diamondIntersection = (
-    bounds: { x: any; y: any; width: any; height: any },
-    outsidePoint: { x: number; y: number },
-    insidePoint: any
-  ) => {
-    const x1 = bounds.x;
-    const y1 = bounds.y;
-
-    const w = bounds.width; //+ bounds.padding;
-    const h = bounds.height; // + bounds.padding;
-
-    const polyPoints = [
-      { x: x1, y: y1 - h / 2 },
-      { x: x1 + w / 2, y: y1 },
-      { x: x1, y: y1 + h / 2 },
-      { x: x1 - w / 2, y: y1 },
-    ];
-    log.debug(
-      `APA16 diamondIntersection calc abc89:
-  outsidePoint: ${JSON.stringify(outsidePoint)}
-  insidePoint : ${JSON.stringify(insidePoint)}
-  node-bounds       : x:${bounds.x} y:${bounds.y} w:${bounds.width} h:${bounds.height}`,
-      JSON.stringify(polyPoints)
-    );
-
-    const intersections = [];
-
-    let minX = Number.POSITIVE_INFINITY;
-    let minY = Number.POSITIVE_INFINITY;
-
-    polyPoints.forEach(function (entry) {
-      minX = Math.min(minX, entry.x);
-      minY = Math.min(minY, entry.y);
-    });
-
-    const left = x1 - w / 2 - minX;
-    const top = y1 - h / 2 - minY;
-
-    for (let i = 0; i < polyPoints.length; i++) {
-      const p1 = polyPoints[i];
-      const p2 = polyPoints[i < polyPoints.length - 1 ? i + 1 : 0];
-      const intersect = intersectLine(
-        bounds,
-        outsidePoint,
-        { x: left + p1.x, y: top + p1.y },
-        { x: left + p2.x, y: top + p2.y }
-      );
-
-      if (intersect) {
-        intersections.push(intersect);
-      }
-    }
-
-    if (!intersections.length) {
-      return bounds;
-    }
-
-    log.debug('UIO intersections', intersections);
-
-    if (intersections.length > 1) {
-      // More intersections, find the one nearest to edge end point
-      intersections.sort(function (p, q) {
-        const pdx = p.x - outsidePoint.x;
-        const pdy = p.y - outsidePoint.y;
-        const distp = Math.sqrt(pdx * pdx + pdy * pdy);
-
-        const qdx = q.x - outsidePoint.x;
-        const qdy = q.y - outsidePoint.y;
-        const distq = Math.sqrt(qdx * qdx + qdy * qdy);
-
-        return distp < distq ? -1 : distp === distq ? 0 : 1;
-      });
-    }
-
-    return intersections[0];
-  };
-
   const intersection = (
     node: { x: any; y: any; width: number; height: number },
     outsidePoint: { x: number; y: number },
@@ -653,7 +508,7 @@ export const render = async (
 
       return res;
     } else {
-      // Intersection on sides of rect
+      // Intersection onn sides of rect
       if (insidePoint.x < outsidePoint.x) {
         r = outsidePoint.x - w - x;
       } else {
@@ -696,62 +551,300 @@ export const render = async (
     }
     return false;
   };
-  /**
-   * This function will page a path and node where the last point(s) in the path is inside the node
-   * and return an update path ending by the border of the node.
-   */
-  const cutPathAtIntersect = (
-    _points: any[],
-    bounds: { x: any; y: any; width: any; height: any; padding: any },
-    isDiamond: boolean
-  ) => {
-    log.debug('APA18 cutPathAtIntersect Points:', _points, 'node:', bounds, 'isDiamond', isDiamond);
-    const points: any[] = [];
-    let lastPointOutside = _points[0];
-    let isInside = false;
-    _points.forEach((point: any) => {
-      // check if point is inside the boundary rect
-      if (!outsideNode(bounds, point) && !isInside) {
-        // First point inside the rect found
-        // Calc the intersection coord between the point and the last point outside the rect
-        let inter;
 
-        if (isDiamond) {
-          const inter2 = diamondIntersection(bounds, lastPointOutside, point);
-          const distance = Math.sqrt(
-            (lastPointOutside.x - inter2.x) ** 2 + (lastPointOutside.y - inter2.y) ** 2
-          );
-          if (distance > 1) {
-            inter = inter2;
-          }
-        }
-        if (!inter) {
-          inter = intersection(bounds, lastPointOutside, point);
-        }
+  const cutter2 = (startNode: any, endNode: any, _points: any[]) => {
+    const startBounds = {
+      x: startNode.offset.posX + startNode.width / 2,
+      y: startNode.offset.posY + startNode.height / 2,
+      width: startNode.width,
+      height: startNode.height,
+      padding: startNode.padding,
+    };
+    const endBounds = {
+      x: endNode.offset.posX + endNode.width / 2,
+      y: endNode.offset.posY + endNode.height / 2,
+      width: endNode.width,
+      height: endNode.height,
+      padding: endNode.padding,
+    };
 
-        // Check case where the intersection is the same as the last point
-        let pointPresent = false;
-        points.forEach((p) => {
-          pointPresent = pointPresent || (p.x === inter.x && p.y === inter.y);
-        });
-        // if (!pointPresent) {
-        if (!points.some((e) => e.x === inter.x && e.y === inter.y)) {
-          points.push(inter);
-        } else {
-          log.debug('abc88 no intersect', inter, points);
-        }
-        // points.push(inter);
-        isInside = true;
-      } else {
-        // Outside
-        log.debug('abc88 outside', point, lastPointOutside, points);
-        lastPointOutside = point;
-        // points.push(point);
-        if (!isInside) {
-          points.push(point);
+    if (_points.length === 0) {
+      return [];
+    }
+
+    // Copy the original points array
+    const points = [..._points];
+
+    // The first point is the center of sNode, the last point is the center of eNode
+    const startCenter = points[0];
+    const endCenter = points[points.length - 1];
+
+    log.debug('UIO cutter2: startCenter:', startCenter);
+    log.debug('UIO cutter2: endCenter:', endCenter);
+
+    let firstOutsideStartIndex = -1;
+    let lastOutsideEndIndex = -1;
+
+    // Single iteration through the array
+    for (let i = 0; i < points.length; i++) {
+      const point = points[i];
+
+      // Check if this is the first point outside the start node
+      if (firstOutsideStartIndex === -1 && outsideNode(startBounds, point)) {
+        firstOutsideStartIndex = i;
+        log.debug('UIO cutter2: First point outside start node at index', i, point);
+      }
+
+      // Check if this point is outside the end node (keep updating to find the last one)
+      if (outsideNode(endBounds, point)) {
+        lastOutsideEndIndex = i;
+        log.debug('UIO cutter2: Point outside end node at index', i, point);
+      }
+    }
+
+    log.debug(
+      'UIO cutter2: firstOutsideStartIndex:',
+      firstOutsideStartIndex,
+      'lastOutsideEndIndex:',
+      lastOutsideEndIndex
+    );
+    log.debug('UIO cutter2: startBounds:', startBounds);
+    log.debug('UIO cutter2: endBounds:', endBounds);
+    log.debug('UIO cutter2: original points:', _points);
+
+    // Calculate intersection with start node if we found a point outside it
+    if (firstOutsideStartIndex !== -1) {
+      const outsidePoint = points[firstOutsideStartIndex];
+      let startIntersection;
+
+      // Try using the node's intersect method first
+      if (startNode.intersect) {
+        startIntersection = startNode.intersect(outsidePoint);
+
+        // Check if the intersection is valid (distance > 1)
+        const distance = Math.sqrt(
+          (startCenter.x - startIntersection.x) ** 2 + (startCenter.y - startIntersection.y) ** 2
+        );
+        if (distance <= 1) {
+          startIntersection = null;
         }
       }
-    });
+
+      // Fallback to intersection function
+      if (!startIntersection) {
+        startIntersection = intersection(startBounds, startCenter, outsidePoint);
+      }
+
+      // Replace the first point with the intersection
+      if (startIntersection) {
+        // Check if the intersection is the same as any existing point
+        const isDuplicate = points.some(
+          (p, index) =>
+            index > 0 &&
+            Math.abs(p.x - startIntersection.x) < 0.1 &&
+            Math.abs(p.y - startIntersection.y) < 0.1
+        );
+
+        if (isDuplicate) {
+          log.debug(
+            'UIO cutter2: Start intersection is duplicate of existing point, removing first point instead'
+          );
+          points.shift(); // Remove the first point instead of replacing it
+        } else {
+          log.debug(
+            'UIO cutter2: Replacing first point',
+            points[0],
+            'with intersection',
+            startIntersection
+          );
+          points[0] = startIntersection;
+        }
+      }
+    }
+
+    // Calculate intersection with end node
+    // Need to recalculate indices since we may have removed the first point
+    let outsidePointForEnd = null;
+    let outsideIndexForEnd = -1;
+
+    // Find the last point that's outside the end node in the current points array
+    for (let i = points.length - 1; i >= 0; i--) {
+      if (outsideNode(endBounds, points[i])) {
+        outsidePointForEnd = points[i];
+        outsideIndexForEnd = i;
+        log.debug('UIO cutter2: Found point outside end node at current index:', i, points[i]);
+        break;
+      }
+    }
+
+    if (!outsidePointForEnd && points.length > 1) {
+      // No points outside end node, try using the second-to-last point
+      log.debug('UIO cutter2: No points outside end node, trying second-to-last point');
+      outsidePointForEnd = points[points.length - 2];
+      outsideIndexForEnd = points.length - 2;
+    }
+
+    if (outsidePointForEnd) {
+      // Check if the outside point is actually on the boundary (distance = 0 from intersection)
+      // If so, we need to create a truly outside point
+      let actualOutsidePoint = outsidePointForEnd;
+
+      // Quick check: if the point is very close to the node boundary, move it further out
+      const dx = Math.abs(outsidePointForEnd.x - endBounds.x);
+      const dy = Math.abs(outsidePointForEnd.y - endBounds.y);
+      const w = endBounds.width / 2;
+      const h = endBounds.height / 2;
+
+      log.debug('UIO cutter2: Checking if outside point is truly outside:', {
+        outsidePoint: outsidePointForEnd,
+        dx,
+        dy,
+        w,
+        h,
+        isOnBoundary: Math.abs(dx - w) < 1 || Math.abs(dy - h) < 1,
+      });
+
+      // If the point is on or very close to the boundary, move it further out
+      if (Math.abs(dx - w) < 1 || Math.abs(dy - h) < 1) {
+        log.debug('UIO cutter2: Outside point is on boundary, creating truly outside point');
+        // Move the point further away from the node center
+        const directionX = outsidePointForEnd.x - endBounds.x;
+        const directionY = outsidePointForEnd.y - endBounds.y;
+        const length = Math.sqrt(directionX * directionX + directionY * directionY);
+
+        if (length > 0) {
+          // Move the point 10 pixels further out in the same direction
+          actualOutsidePoint = {
+            x: endBounds.x + (directionX / length) * (length + 10),
+            y: endBounds.y + (directionY / length) * (length + 10),
+          };
+          log.debug('UIO cutter2: Created truly outside point:', actualOutsidePoint);
+        }
+      }
+
+      let endIntersection;
+
+      // Try using the node's intersect method first
+      if (endNode.intersect) {
+        endIntersection = endNode.intersect(actualOutsidePoint);
+        log.debug('UIO cutter2: endNode.intersect result:', endIntersection);
+
+        // Check if the intersection is on the wrong side of the node
+        const isWrongSide =
+          (actualOutsidePoint.x < endBounds.x && endIntersection.x > endBounds.x) ||
+          (actualOutsidePoint.x > endBounds.x && endIntersection.x < endBounds.x);
+
+        if (isWrongSide) {
+          log.debug('UIO cutter2: endNode.intersect returned wrong side, setting to null');
+          endIntersection = null;
+        } else {
+          // Check if the intersection is valid (distance > 1)
+          const distance = Math.sqrt(
+            (actualOutsidePoint.x - endIntersection.x) ** 2 +
+              (actualOutsidePoint.y - endIntersection.y) ** 2
+          );
+          log.debug('UIO cutter2: Distance from outside point to intersection:', distance);
+          if (distance <= 1) {
+            log.debug('UIO cutter2: endNode.intersect distance too small, setting to null');
+            endIntersection = null;
+          }
+        }
+      } else {
+        log.debug('UIO cutter2: endNode.intersect method not available');
+      }
+
+      // Fallback to intersection function
+      if (!endIntersection) {
+        // Create a proper inside point that's on the correct side of the node
+        // The inside point should be between the outside point and the far edge
+        const insidePoint = {
+          x:
+            actualOutsidePoint.x < endBounds.x
+              ? endBounds.x - endBounds.width / 4
+              : endBounds.x + endBounds.width / 4,
+          y: endCenter.y,
+        };
+
+        log.debug('UIO cutter2: Using fallback intersection function with:', {
+          endBounds,
+          actualOutsidePoint,
+          insidePoint,
+          endCenter,
+        });
+        endIntersection = intersection(endBounds, actualOutsidePoint, insidePoint);
+        log.debug('UIO cutter2: Fallback intersection result:', endIntersection);
+      }
+
+      // Replace the last point with the intersection
+      if (endIntersection) {
+        // Check if the intersection is the same as any existing point
+        const isDuplicate = points.some(
+          (p, index) =>
+            index < points.length - 1 &&
+            Math.abs(p.x - endIntersection.x) < 0.1 &&
+            Math.abs(p.y - endIntersection.y) < 0.1
+        );
+
+        if (isDuplicate) {
+          log.debug(
+            'UIO cutter2: End intersection is duplicate of existing point, removing last point instead'
+          );
+          points.pop(); // Remove the last point instead of replacing it
+        } else {
+          log.debug(
+            'UIO cutter2: Replacing last point',
+            points[points.length - 1],
+            'with intersection',
+            endIntersection,
+            'using outside point at index',
+            outsideIndexForEnd
+          );
+          points[points.length - 1] = endIntersection;
+        }
+      }
+    } else {
+      log.debug('UIO cutter2: No suitable outside point found for end node intersection');
+    }
+
+    // Final cleanup: Check if the last point is too close to the previous point
+    if (points.length > 1) {
+      const lastPoint = points[points.length - 1];
+      const secondLastPoint = points[points.length - 2];
+      const distance = Math.sqrt(
+        (lastPoint.x - secondLastPoint.x) ** 2 + (lastPoint.y - secondLastPoint.y) ** 2
+      );
+
+      // If the distance is very small (less than 2 pixels), remove the last point
+      if (distance < 2) {
+        log.debug(
+          'UIO cutter2: Last point too close to previous point, removing it. Distance:',
+          distance
+        );
+        log.debug('UIO cutter2: Removing last point:', lastPoint, 'keeping:', secondLastPoint);
+        points.pop();
+      }
+    }
+
+    log.debug('UIO cutter2: Final points:', points);
+
+    // Debug: Check which side of the end node we're ending at
+    if (points.length > 0) {
+      const finalPoint = points[points.length - 1];
+      const endNodeCenter = endBounds.x;
+      const endNodeLeftEdge = endNodeCenter - endBounds.width / 2;
+      const endNodeRightEdge = endNodeCenter + endBounds.width / 2;
+
+      log.debug('UIO cutter2: End node analysis:', {
+        finalPoint,
+        endNodeCenter,
+        endNodeLeftEdge,
+        endNodeRightEdge,
+        endingSide: finalPoint.x < endNodeCenter ? 'LEFT' : 'RIGHT',
+        distanceFromLeftEdge: Math.abs(finalPoint.x - endNodeLeftEdge),
+        distanceFromRightEdge: Math.abs(finalPoint.x - endNodeRightEdge),
+      });
+    }
+
     return points;
   };
 
@@ -766,7 +859,6 @@ export const render = async (
     id: 'root',
     layoutOptions: {
       'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
-      'elk.layered.crossingMinimization.forceNodeModelOrder': true,
       'elk.algorithm': algorithm,
       'nodePlacement.strategy': data4Layout.config.elk?.nodePlacementStrategy,
       'elk.layered.mergeEdges': data4Layout.config.elk?.mergeEdges,
@@ -781,6 +873,7 @@ export const render = async (
       // 'spacing.edgeEdge': 10,
       // 'spacing.edgeEdgeBetweenLayers': 20,
       // 'spacing.nodeSelfLoop': 20,
+
       // Tweaking options
       // 'elk.layered.nodePlacement.favorStraightEdges': true,
       // 'nodePlacement.feedbackEdges': true,
@@ -966,43 +1059,26 @@ export const render = async (
             startNode.innerHTML
           );
         }
-        if (startNode.shape === 'diamond' || startNode.shape === 'diam') {
+        startNode.x = startNode.offset.posX + startNode.width / 2;
+        startNode.y = startNode.offset.posY + startNode.height / 2;
+        endNode.x = endNode.offset.posX + endNode.width / 2;
+        endNode.y = endNode.offset.posY + endNode.height / 2;
+        if (startNode.shape !== 'rect33') {
           edge.points.unshift({
-            x: startNode.offset.posX + startNode.width / 2,
-            y: startNode.offset.posY + startNode.height / 2,
+            x: startNode.x,
+            y: startNode.y,
           });
         }
-        if (endNode.shape === 'diamond' || endNode.shape === 'diam') {
+        if (endNode.shape !== 'rect33') {
           edge.points.push({
-            x: endNode.offset.posX + endNode.width / 2,
-            y: endNode.offset.posY + endNode.height / 2,
+            x: endNode.x,
+            y: endNode.y,
           });
         }
 
-        edge.points = cutPathAtIntersect(
-          edge.points.reverse(),
-          {
-            x: startNode.offset.posX + startNode.width / 2,
-            y: startNode.offset.posY + startNode.height / 2,
-            width: sw,
-            height: startNode.height,
-            padding: startNode.padding,
-          },
-          startNode.shape === 'diamond' || startNode.shape === 'diam'
-        ).reverse();
-
-        edge.points = cutPathAtIntersect(
-          edge.points,
-          {
-            x: endNode.offset.posX + endNode.width / 2,
-            y: endNode.offset.posY + endNode.height / 2,
-            width: ew,
-            height: endNode.height,
-            padding: endNode.padding,
-          },
-          endNode.shape === 'diamond' || endNode.shape === 'diam'
-        );
-
+        log.debug('UIO cutter2: Points before cutter2:', edge.points);
+        edge.points = cutter2(startNode, endNode, edge.points);
+        log.debug('UIO cutter2: Points after cutter2:', edge.points);
         const paths = insertEdge(
           edgesEl,
           edge,
@@ -1010,7 +1086,8 @@ export const render = async (
           data4Layout.type,
           startNode,
           endNode,
-          data4Layout.diagramId
+          data4Layout.diagramId,
+          true
         );
         log.info('APA12 edge points after insert', JSON.stringify(edge.points));
 

packages/mermaid/CHANGELOG.md

@@ -1,25 +1,5 @@
 # mermaid
 
-## 11.8.1
-
-### Patch Changes
-
-- Updated dependencies [[`0da2922`](https://github.com/mermaid-js/mermaid/commit/0da2922ee7f47959e324ec10d3d21ee70594f557)]:
-  - @mermaid-js/parser@0.6.1
-
-## 11.8.0
-
-### Minor Changes
-
-- [#6590](https://github.com/mermaid-js/mermaid/pull/6590) [`f338802`](https://github.com/mermaid-js/mermaid/commit/f338802642cdecf5b7ed6c19a20cf2a81effbbee) Thanks [@knsv](https://github.com/knsv)! - Adding support for the new diagram type nested treemap
-
-### Patch Changes
-
-- [#6707](https://github.com/mermaid-js/mermaid/pull/6707) [`592c5bb`](https://github.com/mermaid-js/mermaid/commit/592c5bb880c3b942710a2878d386bcb3eb35c137) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: Log a warning when duplicate commit IDs are encountered in gitGraph to help identify and debug rendering issues caused by non-unique IDs.
-
-- Updated dependencies [[`f338802`](https://github.com/mermaid-js/mermaid/commit/f338802642cdecf5b7ed6c19a20cf2a81effbbee)]:
-  - @mermaid-js/parser@0.6.0
-
 ## 11.7.0
 
 ### Minor Changes

packages/mermaid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "11.8.1",
+  "version": "11.7.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",
@@ -82,7 +82,7 @@
     "katex": "^0.16.9",
     "khroma": "^2.1.0",
     "lodash-es": "^4.17.21",
-    "marked": "^16.0.0",
+    "marked": "^15.0.7",
     "roughjs": "^4.6.6",
     "stylis": "^4.3.6",
     "ts-dedent": "^2.2.0",
@@ -105,7 +105,7 @@
     "@types/stylis": "^4.2.7",
     "@types/uuid": "^10.0.0",
     "ajv": "^8.17.1",
-    "chokidar": "^3.6.0",
+    "chokidar": "3.6.0",
     "concurrently": "^9.1.2",
     "csstree-validator": "^4.0.1",
     "globby": "^14.0.2",

packages/mermaid/src/defaultConfig.ts

@@ -262,18 +262,6 @@ const config: RequiredDeep<MermaidConfig> = {
   radar: {
     ...defaultConfigJson.radar,
   },
-  treemap: {
-    useMaxWidth: true,
-    padding: 10,
-    diagramPadding: 8,
-    showValues: true,
-    nodeWidth: 100,
-    nodeHeight: 40,
-    borderWidth: 1,
-    valueFontSize: 12,
-    labelFontSize: 14,
-    valueFormat: ',',
-  },
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any

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

@@ -27,7 +27,6 @@ import block from '../diagrams/block/blockDetector.js';
 import architecture from '../diagrams/architecture/architectureDetector.js';
 import { registerLazyLoadedDiagrams } from './detectType.js';
 import { registerDiagram } from './diagramAPI.js';
-import { treemap } from '../diagrams/treemap/detector.js';
 import '../type.d.ts';
 
 let hasLoadedDiagrams = false;
@@ -100,7 +99,6 @@ export const addDiagrams = () => {
     packet,
     xychart,
     block,
-    radar,
-    treemap
+    radar
   );
 };

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

@@ -7,21 +7,20 @@ export const loadRegisteredDiagrams = async () => {
   // Load all lazy loaded diagrams in parallel
   const results = await Promise.allSettled(
     Object.entries(detectors).map(async ([key, { detector, loader }]) => {
-      if (!loader) {
-        return;
-      }
-      try {
-        getDiagram(key);
-      } catch {
+      if (loader) {
         try {
-          // Register diagram if it is not already registered
-          const { diagram, id } = await loader();
-          registerDiagram(id, diagram, detector);
-        } catch (err) {
-          // Remove failed diagram from detectors
-          log.error(`Failed to load external diagram with key ${key}. Removing from detectors.`);
-          delete detectors[key];
-          throw err;
+          getDiagram(key);
+        } catch {
+          try {
+            // Register diagram if it is not already registered
+            const { diagram, id } = await loader();
+            registerDiagram(id, diagram, detector);
+          } catch (err) {
+            // Remove failed diagram from detectors
+            log.error(`Failed to load external diagram with key ${key}. Removing from detectors.`);
+            delete detectors[key];
+            throw err;
+          }
         }
       }
     })

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

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type * as d3 from 'd3';
-import type { SetOptional, SetRequired } from 'type-fest';
+import type { SetRequired } from 'type-fest';
 import type { Diagram } from '../Diagram.js';
 import type { BaseDiagramConfig, MermaidConfig } from '../config.type.js';
 
@@ -91,13 +91,17 @@ export interface DiagramDefinition {
   ) => void;
 }
 
+export interface DetectorRecord {
+  detector: DiagramDetector;
+  loader?: DiagramLoader;
+}
+
 export interface ExternalDiagramDefinition {
   id: string;
   detector: DiagramDetector;
   loader: DiagramLoader;
 }
 
-export type DetectorRecord = SetOptional<Omit<ExternalDiagramDefinition, 'id'>, 'loader'>;
 export type DiagramDetector = (text: string, config?: MermaidConfig) => boolean;
 export type DiagramLoader = () => Promise<{ id: string; diagram: DiagramDefinition }>;
 

packages/mermaid/src/diagrams/block/blockDB.ts

@@ -287,7 +287,7 @@ const setBlock = (block: Block) => {
   blockDatabase.set(block.id, block);
 };
 
-const getLogger = () => log;
+const getLogger = () => console;
 
 /**
  * Return all of the style classes

packages/mermaid/src/diagrams/git/gitGraph.spec.ts

@@ -1,4 +1,4 @@
-import { log } from '../../logger.js';
+import { rejects } from 'assert';
 import { db } from './gitGraphAst.js';
 import { parser } from './gitGraphParser.js';
 
@@ -1319,42 +1319,4 @@ describe('when parsing a gitGraph', function () {
       }
     });
   });
-  it('should log a warning when two commits have the same ID', async () => {
-    const str = `gitGraph
-     commit id:"initial commit"
-     commit id:"work on first release"
-     commit id:"design freeze from here"
-     branch v1-rc
-     checkout v1-rc
-     commit id:"bugfix 1"
-     commit id:"bigfix 2" tag:"v1.0.1"
-     branch FORK-v1.0-MDR
-     checkout FORK-v1.0-MDR
-     commit id:"working on MDR"
-     checkout v1-rc
-     commit id:"minor design changes for MDR" tag:"v1.0.2"
-     checkout FORK-v1.0-MDR
-     merge v1-rc
-     checkout main
-     commit id:"new feature for v1.1…"
-     checkout FORK-v1.0-MDR
-     commit id:"working on MDR"
-     commit id:"finishing MDR"
-     branch v1.0-MDR
-     checkout v1.0-MDR
-     commit id:"brush up release" tag:"v1.0.2-MDR"
-     checkout v1-rc
-     commit id:"bugfix without MDR"
-     checkout main
-     commit id:"work on v1.1"
-  `;
-
-    const logWarnSpy = vi.spyOn(log, 'warn').mockImplementation(() => undefined);
-
-    await parser.parse(str);
-
-    expect(logWarnSpy).toHaveBeenCalledWith('Commit ID working on MDR already exists');
-
-    logWarnSpy.mockRestore();
-  });
 });

packages/mermaid/src/diagrams/git/gitGraphAst.ts

@@ -125,9 +125,6 @@ export const commit = function (commitDB: CommitDB) {
   };
   state.records.head = newCommit;
   log.info('main branch', config.mainBranchName);
-  if (state.records.commits.has(newCommit.id)) {
-    log.warn(`Commit ID ${newCommit.id} already exists`);
-  }
   state.records.commits.set(newCommit.id, newCommit);
   state.records.branches.set(state.records.currBranch, newCommit.id);
   log.debug('in pushCommit ' + newCommit.id);

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

@@ -7,7 +7,7 @@ import type {
 const id = 'packet';
 
 const detector: DiagramDetector = (txt) => {
-  return /^\s*packet(-beta)?/.test(txt);
+  return /^\s*packet-beta/.test(txt);
 };
 
 const loader: DiagramLoader = async () => {

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

@@ -15,14 +15,8 @@ describe('packet diagrams', () => {
     expect(getPacket()).toMatchInlineSnapshot('[]');
   });
 
-  it('should handle a packet definition', async () => {
-    const str = `packet`;
-    await expect(parser.parse(str)).resolves.not.toThrow();
-    expect(getPacket()).toMatchInlineSnapshot('[]');
-  });
-
   it('should handle diagram with data and title', async () => {
-    const str = `packet
+    const str = `packet-beta
     title Packet diagram
     accTitle: Packet accTitle
     accDescr: Packet accDescription
@@ -47,7 +41,7 @@ describe('packet diagrams', () => {
   });
 
   it('should handle single bits', async () => {
-    const str = `packet
+    const str = `packet-beta
     0-10: "test"
     11: "single"
     `;
@@ -73,7 +67,7 @@ describe('packet diagrams', () => {
   });
 
   it('should handle bit counts', async () => {
-    const str = `packet
+    const str = `packet-beta
     +8: "byte"
     +16: "word"
     `;
@@ -99,7 +93,7 @@ describe('packet diagrams', () => {
   });
 
   it('should handle bit counts with bit or bits', async () => {
-    const str = `packet
+    const str = `packet-beta
     +8: "byte"
     +16: "word"
     `;
@@ -125,7 +119,7 @@ describe('packet diagrams', () => {
   });
 
   it('should split into multiple rows', async () => {
-    const str = `packet
+    const str = `packet-beta
     0-10: "test"
     11-90: "multiple"
     `;
@@ -167,7 +161,7 @@ describe('packet diagrams', () => {
   });
 
   it('should split into multiple rows when cut at exact length', async () => {
-    const str = `packet
+    const str = `packet-beta
     0-16: "test"
     17-63: "multiple"
     `;
@@ -201,7 +195,7 @@ describe('packet diagrams', () => {
   });
 
   it('should throw error if numbers are not continuous', async () => {
-    const str = `packet
+    const str = `packet-beta
     0-16: "test"
     18-20: "error"
     `;
@@ -211,7 +205,7 @@ describe('packet diagrams', () => {
   });
 
   it('should throw error if numbers are not continuous with bit counts', async () => {
-    const str = `packet
+    const str = `packet-beta
     +16: "test"
     18-20: "error"
     `;
@@ -221,7 +215,7 @@ describe('packet diagrams', () => {
   });
 
   it('should throw error if numbers are not continuous for single packets', async () => {
-    const str = `packet
+    const str = `packet-beta
     0-16: "test"
     18: "error"
     `;
@@ -231,7 +225,7 @@ describe('packet diagrams', () => {
   });
 
   it('should throw error if numbers are not continuous for single packets with bit counts', async () => {
-    const str = `packet
+    const str = `packet-beta
     +16: "test"
     18: "error"
     `;
@@ -241,7 +235,7 @@ describe('packet diagrams', () => {
   });
 
   it('should throw error if numbers are not continuous for single packets - 2', async () => {
-    const str = `packet
+    const str = `packet-beta
     0-16: "test"
     17: "good"
     19: "error"
@@ -252,7 +246,7 @@ describe('packet diagrams', () => {
   });
 
   it('should throw error if end is less than start', async () => {
-    const str = `packet
+    const str = `packet-beta
     0-16: "test"
     25-20: "error"
     `;
@@ -262,7 +256,7 @@ describe('packet diagrams', () => {
   });
 
   it('should throw error if bit count is 0', async () => {
-    const str = `packet
+    const str = `packet-beta
     +0: "test"
     `;
     await expect(parser.parse(str)).rejects.toThrowErrorMatchingInlineSnapshot(

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

@@ -524,7 +524,7 @@ export const drawBox = function (elem, box, conf) {
       box.name,
       g,
       box.x,
-      box.y + conf.boxTextMargin + (box.textMaxHeight || 0) / 2,
+      box.y + (box.textMaxHeight || 0) / 2,
       box.width,
       0,
       { class: 'text' },

packages/mermaid/src/diagrams/timeline/timelineRenderer.ts

@@ -28,7 +28,8 @@ interface TimelineTask {
 export const draw = function (text: string, id: string, version: string, diagObj: Diagram) {
   //1. Fetch the configuration
   const conf = getConfig();
-  const LEFT_MARGIN = conf.timeline?.leftMargin ?? 50;
+  // @ts-expect-error - wrong config?
+  const LEFT_MARGIN = conf.leftMargin ?? 50;
 
   log.debug('timeline', diagObj.db);
 

packages/mermaid/src/diagrams/treemap/db.ts

@@ -1,112 +0,0 @@
-import { getConfig as commonGetConfig } from '../../config.js';
-import DEFAULT_CONFIG from '../../defaultConfig.js';
-import type { DiagramStyleClassDef } from '../../diagram-api/types.js';
-import { isLabelStyle } from '../../rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
-
-import { cleanAndMerge } from '../../utils.js';
-import { ImperativeState } from '../../utils/imperativeState.js';
-import {
-  clear as commonClear,
-  getAccDescription,
-  getAccTitle,
-  getDiagramTitle,
-  setAccDescription,
-  setAccTitle,
-  setDiagramTitle,
-} from '../common/commonDb.js';
-import type { TreemapDB, TreemapData, TreemapDiagramConfig, TreemapNode } from './types.js';
-
-const defaultTreemapData: TreemapData = {
-  nodes: [],
-  levels: new Map(),
-  outerNodes: [],
-  classes: new Map(),
-};
-
-const state = new ImperativeState<TreemapData>(() => structuredClone(defaultTreemapData));
-
-const getConfig = (): Required<TreemapDiagramConfig> => {
-  // Use type assertion with unknown as intermediate step
-  const defaultConfig = DEFAULT_CONFIG as unknown as { treemap: Required<TreemapDiagramConfig> };
-  const userConfig = commonGetConfig() as unknown as { treemap?: Partial<TreemapDiagramConfig> };
-
-  return cleanAndMerge({
-    ...defaultConfig.treemap,
-    ...(userConfig.treemap ?? {}),
-  }) as Required<TreemapDiagramConfig>;
-};
-
-const getNodes = (): TreemapNode[] => state.records.nodes;
-
-const addNode = (node: TreemapNode, level: number) => {
-  const data = state.records;
-  data.nodes.push(node);
-  data.levels.set(node, level);
-
-  if (level === 0) {
-    data.outerNodes.push(node);
-  }
-
-  // Set the root node if this is a level 0 node and we don't have a root yet
-  if (level === 0 && !data.root) {
-    data.root = node;
-  }
-};
-
-const getRoot = (): TreemapNode | undefined => ({ name: '', children: state.records.outerNodes });
-
-const addClass = (id: string, _style: string) => {
-  const classes = state.records.classes;
-  const styleClass = classes.get(id) ?? { id, styles: [], textStyles: [] };
-  classes.set(id, styleClass);
-
-  const styles = _style.replace(/\\,/g, '§§§').replace(/,/g, ';').replace(/§§§/g, ',').split(';');
-
-  if (styles) {
-    styles.forEach((s) => {
-      if (isLabelStyle(s)) {
-        if (styleClass?.textStyles) {
-          styleClass.textStyles.push(s);
-        } else {
-          styleClass.textStyles = [s];
-        }
-      }
-      if (styleClass?.styles) {
-        styleClass.styles.push(s);
-      } else {
-        styleClass.styles = [s];
-      }
-    });
-  }
-
-  classes.set(id, styleClass);
-};
-const getClasses = (): Map<string, DiagramStyleClassDef> => {
-  return state.records.classes;
-};
-
-const getStylesForClass = (classSelector: string): string[] => {
-  return state.records.classes.get(classSelector)?.styles ?? [];
-};
-
-const clear = () => {
-  commonClear();
-  state.reset();
-};
-
-export const db: TreemapDB = {
-  getNodes,
-  addNode,
-  getRoot,
-  getConfig,
-  clear,
-  setAccTitle,
-  getAccTitle,
-  setDiagramTitle,
-  getDiagramTitle,
-  getAccDescription,
-  setAccDescription,
-  addClass,
-  getClasses,
-  getStylesForClass,
-};

packages/mermaid/src/diagrams/treemap/detector.ts

@@ -1,22 +0,0 @@
-import type {
-  DiagramDetector,
-  DiagramLoader,
-  ExternalDiagramDefinition,
-} from '../../diagram-api/types.js';
-
-const id = 'treemap';
-
-const detector: DiagramDetector = (txt) => {
-  return /^\s*treemap/.test(txt);
-};
-
-const loader: DiagramLoader = async () => {
-  const { diagram } = await import('./diagram.js');
-  return { id, diagram };
-};
-
-export const treemap: ExternalDiagramDefinition = {
-  id,
-  detector,
-  loader,
-};

packages/mermaid/src/diagrams/treemap/diagram.ts

@@ -1,12 +0,0 @@
-import type { DiagramDefinition } from '../../diagram-api/types.js';
-import { db } from './db.js';
-import { parser } from './parser.js';
-import { renderer } from './renderer.js';
-import styles from './styles.js';
-
-export const diagram: DiagramDefinition = {
-  parser,
-  db,
-  renderer,
-  styles,
-};

packages/mermaid/src/diagrams/treemap/parser.ts

@@ -1,100 +0,0 @@
-import { parse } from '@mermaid-js/parser';
-import type { ParserDefinition } from '../../diagram-api/types.js';
-import { log } from '../../logger.js';
-import { populateCommonDb } from '../common/populateCommonDb.js';
-import { db } from './db.js';
-import type { TreemapNode, TreemapAst } from './types.js';
-import { buildHierarchy } from './utils.js';
-
-/**
- * Populates the database with data from the Treemap AST
- * @param ast - The Treemap AST
- */
-const populate = (ast: TreemapAst) => {
-  // We need to bypass the type checking for populateCommonDb
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  populateCommonDb(ast as any, db);
-
-  const items: {
-    level: number;
-    name: string;
-    type: string;
-    value?: number;
-    classSelector?: string;
-    cssCompiledStyles?: string;
-  }[] = [];
-
-  // Extract classes and styles from the treemap
-  for (const row of ast.TreemapRows ?? []) {
-    if (row.$type === 'ClassDefStatement') {
-      db.addClass(row.className ?? '', row.styleText ?? '');
-    }
-  }
-
-  // Extract data from each row in the treemap
-  for (const row of ast.TreemapRows ?? []) {
-    const item = row.item;
-
-    if (!item) {
-      continue;
-    }
-
-    const level = row.indent ? parseInt(row.indent) : 0;
-    const name = getItemName(item);
-
-    // Get styles as a string if they exist
-    const styles = item.classSelector ? db.getStylesForClass(item.classSelector) : [];
-    const cssCompiledStyles = styles.length > 0 ? styles.join(';') : undefined;
-
-    const itemData = {
-      level,
-      name,
-      type: item.$type,
-      value: item.value,
-      classSelector: item.classSelector,
-      cssCompiledStyles,
-    };
-
-    items.push(itemData);
-  }
-
-  // Convert flat structure to hierarchical
-  const hierarchyNodes = buildHierarchy(items);
-
-  // Add all nodes to the database
-  const addNodesRecursively = (nodes: TreemapNode[], level: number) => {
-    for (const node of nodes) {
-      db.addNode(node, level);
-      if (node.children && node.children.length > 0) {
-        addNodesRecursively(node.children, level + 1);
-      }
-    }
-  };
-
-  addNodesRecursively(hierarchyNodes, 0);
-};
-
-/**
- * Gets the name of a treemap item
- * @param item - The treemap item
- * @returns The name of the item
- */
-const getItemName = (item: { name?: string | number }): string => {
-  return item.name ? String(item.name) : '';
-};
-
-export const parser: ParserDefinition = {
-  parse: async (text: string): Promise<void> => {
-    try {
-      // Use a generic parse that accepts any diagram type
-
-      const parseFunc = parse as (diagramType: string, text: string) => Promise<TreemapAst>;
-      const ast = await parseFunc('treemap', text);
-      log.debug('Treemap AST:', ast);
-      populate(ast);
-    } catch (error) {
-      log.error('Error parsing treemap:', error);
-      throw error;
-    }
-  },
-};

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

@@ -1,526 +0,0 @@
-import type { Diagram } from '../../Diagram.js';
-import type {
-  DiagramRenderer,
-  DiagramStyleClassDef,
-  DrawDefinition,
-} from '../../diagram-api/types.js';
-import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
-import { setupViewPortForSVG } from '../../rendering-util/setupViewPortForSVG.js';
-import { configureSvgSize } from '../../setupGraphViewbox.js';
-import type { TreemapDB, TreemapNode } from './types.js';
-import { scaleOrdinal, treemap, hierarchy, format, select } from 'd3';
-import { styles2String } from '../../rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
-import { getConfig } from '../../config.js';
-import { log } from '../../logger.js';
-import type { Node } from '../../rendering-util/types.js';
-
-const DEFAULT_INNER_PADDING = 10; // Default for inner padding between cells/sections
-const SECTION_INNER_PADDING = 10; // Default for inner padding between cells/sections
-const SECTION_HEADER_HEIGHT = 25;
-
-/**
- * Draws the treemap diagram
- */
-const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => {
-  const treemapDb = diagram.db as TreemapDB;
-  const config = treemapDb.getConfig();
-  const treemapInnerPadding = config.padding ?? DEFAULT_INNER_PADDING;
-  const title = treemapDb.getDiagramTitle();
-  const root = treemapDb.getRoot();
-  const { themeVariables } = getConfig();
-  if (!root) {
-    return;
-  }
-
-  // Define dimensions
-  const titleHeight = title ? 30 : 0;
-
-  const svg = selectSvgElement(id);
-  // Use config dimensions or defaults
-  const width = config.nodeWidth ? config.nodeWidth * SECTION_INNER_PADDING : 960;
-  const height = config.nodeHeight ? config.nodeHeight * SECTION_INNER_PADDING : 500;
-
-  const svgWidth = width;
-  const svgHeight = height + titleHeight;
-
-  // Set the SVG size
-  svg.attr('viewBox', `0 0 ${svgWidth} ${svgHeight}`);
-  configureSvgSize(svg, svgHeight, svgWidth, config.useMaxWidth);
-
-  // Format for displaying values
-  let valueFormat;
-  try {
-    // Handle special format patterns
-    const formatStr = config.valueFormat || ',';
-
-    // Handle special cases that aren't directly supported by D3 format
-    if (formatStr === '$0,0') {
-      // Currency with thousands separator
-      valueFormat = (value: number) => '$' + format(',')(value);
-    } else if (formatStr.startsWith('$') && formatStr.includes(',')) {
-      // Other dollar formats with commas
-      const precision = /\.\d+/.exec(formatStr);
-      const precisionStr = precision ? precision[0] : '';
-      valueFormat = (value: number) => '$' + format(',' + precisionStr)(value);
-    } else if (formatStr.startsWith('$')) {
-      // Simple dollar sign prefix
-      const restOfFormat = formatStr.substring(1);
-      valueFormat = (value: number) => '$' + format(restOfFormat || '')(value);
-    } else {
-      // Standard D3 format
-      valueFormat = format(formatStr);
-    }
-  } catch (error) {
-    log.error('Error creating format function:', error);
-    // Fallback to default format
-    valueFormat = format(',');
-  }
-
-  // Create color scale
-  const colorScale = scaleOrdinal<string>().range([
-    'transparent',
-    themeVariables.cScale0,
-    themeVariables.cScale1,
-    themeVariables.cScale2,
-    themeVariables.cScale3,
-    themeVariables.cScale4,
-    themeVariables.cScale5,
-    themeVariables.cScale6,
-    themeVariables.cScale7,
-    themeVariables.cScale8,
-    themeVariables.cScale9,
-    themeVariables.cScale10,
-    themeVariables.cScale11,
-  ]);
-  const colorScalePeer = scaleOrdinal<string>().range([
-    'transparent',
-    themeVariables.cScalePeer0,
-    themeVariables.cScalePeer1,
-    themeVariables.cScalePeer2,
-    themeVariables.cScalePeer3,
-    themeVariables.cScalePeer4,
-    themeVariables.cScalePeer5,
-    themeVariables.cScalePeer6,
-    themeVariables.cScalePeer7,
-    themeVariables.cScalePeer8,
-    themeVariables.cScalePeer9,
-    themeVariables.cScalePeer10,
-    themeVariables.cScalePeer11,
-  ]);
-  const colorScaleLabel = scaleOrdinal<string>().range([
-    themeVariables.cScaleLabel0,
-    themeVariables.cScaleLabel1,
-    themeVariables.cScaleLabel2,
-    themeVariables.cScaleLabel3,
-    themeVariables.cScaleLabel4,
-    themeVariables.cScaleLabel5,
-    themeVariables.cScaleLabel6,
-    themeVariables.cScaleLabel7,
-    themeVariables.cScaleLabel8,
-    themeVariables.cScaleLabel9,
-    themeVariables.cScaleLabel10,
-    themeVariables.cScaleLabel11,
-  ]);
-
-  // Draw the title if it exists
-  if (title) {
-    svg
-      .append('text')
-      .attr('x', svgWidth / 2)
-      .attr('y', titleHeight / 2)
-      .attr('class', 'treemapTitle')
-      .attr('text-anchor', 'middle')
-      .attr('dominant-baseline', 'middle')
-      .text(title);
-  }
-
-  // Create a main container for the treemap, translated below the title
-  const g = svg
-    .append('g')
-    .attr('transform', `translate(0, ${titleHeight})`)
-    .attr('class', 'treemapContainer');
-
-  // Create the hierarchical structure
-  const hierarchyRoot = hierarchy<TreemapNode>(root)
-    .sum((d) => d.value ?? 0)
-    .sort((a, b) => (b.value ?? 0) - (a.value ?? 0));
-
-  // Create treemap layout
-  const treemapLayout = treemap<TreemapNode>()
-    .size([width, height])
-    .paddingTop((d) =>
-      d.children && d.children.length > 0 ? SECTION_HEADER_HEIGHT + SECTION_INNER_PADDING : 0
-    )
-    .paddingInner(treemapInnerPadding)
-    .paddingLeft((d) => (d.children && d.children.length > 0 ? SECTION_INNER_PADDING : 0))
-    .paddingRight((d) => (d.children && d.children.length > 0 ? SECTION_INNER_PADDING : 0))
-    .paddingBottom((d) => (d.children && d.children.length > 0 ? SECTION_INNER_PADDING : 0))
-    .round(true);
-
-  // Apply the treemap layout to the hierarchy
-  const treemapData = treemapLayout(hierarchyRoot);
-
-  // Draw section nodes (branches - nodes with children)
-  const branchNodes = treemapData.descendants().filter((d) => d.children && d.children.length > 0);
-  const sections = g
-    .selectAll('.treemapSection')
-    .data(branchNodes)
-    .enter()
-    .append('g')
-    .attr('class', 'treemapSection')
-    .attr('transform', (d) => `translate(${d.x0},${d.y0})`);
-
-  // Add section header background
-  sections
-    .append('rect')
-    .attr('width', (d) => d.x1 - d.x0)
-    .attr('height', SECTION_HEADER_HEIGHT)
-    .attr('class', 'treemapSectionHeader')
-    .attr('fill', 'none')
-    .attr('fill-opacity', 0.6)
-    .attr('stroke-width', 0.6)
-    .attr('style', (d) => {
-      // Hide the label for the root section
-      if (d.depth === 0) {
-        return 'display: none;';
-      }
-      return '';
-    });
-
-  // Add clip paths for section headers to prevent text overflow
-  sections
-    .append('clipPath')
-    .attr('id', (_d, i) => `clip-section-${id}-${i}`)
-    .append('rect')
-    .attr('width', (d) => Math.max(0, d.x1 - d.x0 - 12)) // 6px padding on each side
-    .attr('height', SECTION_HEADER_HEIGHT);
-
-  sections
-    .append('rect')
-    .attr('width', (d) => d.x1 - d.x0)
-    .attr('height', (d) => d.y1 - d.y0)
-    .attr('class', (_d, i) => {
-      return `treemapSection section${i}`;
-    })
-    .attr('fill', (d) => colorScale(d.data.name))
-    .attr('fill-opacity', 0.6)
-    .attr('stroke', (d) => colorScalePeer(d.data.name))
-    .attr('stroke-width', 2.0)
-    .attr('stroke-opacity', 0.4)
-    .attr('style', (d) => {
-      // Hide the label for the root section
-      if (d.depth === 0) {
-        return 'display: none;';
-      }
-      const styles = styles2String({ cssCompiledStyles: d.data.cssCompiledStyles } as Node);
-      return styles.nodeStyles + ';' + styles.borderStyles.join(';');
-    });
-  // Add section labels
-  sections
-    .append('text')
-    .attr('class', 'treemapSectionLabel')
-    .attr('x', 6) // Keep original left padding
-    .attr('y', SECTION_HEADER_HEIGHT / 2)
-    .attr('dominant-baseline', 'middle')
-    .text((d) => (d.depth === 0 ? '' : d.data.name)) // Skip label for root section
-    .attr('font-weight', 'bold')
-    .attr('style', (d) => {
-      // Hide the label for the root section
-      if (d.depth === 0) {
-        return 'display: none;';
-      }
-      const labelStyles =
-        'dominant-baseline: middle; font-size: 12px; fill:' +
-        colorScaleLabel(d.data.name) +
-        '; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;';
-      const styles = styles2String({ cssCompiledStyles: d.data.cssCompiledStyles } as Node);
-      return labelStyles + styles.labelStyles.replace('color:', 'fill:');
-    })
-    .each(function (d) {
-      // Skip processing for root section
-      if (d.depth === 0) {
-        return;
-      }
-      const self = select(this);
-      const originalText = d.data.name;
-      self.text(originalText);
-      const totalHeaderWidth = d.x1 - d.x0;
-      const labelXPosition = 6;
-      let spaceForTextContent;
-      if (config.showValues !== false && d.value) {
-        const valueEndsAtXRelative = totalHeaderWidth - 10;
-        const estimatedValueTextActualWidth = 30;
-        const gapBetweenLabelAndValue = 10;
-        const labelMustEndBeforeX =
-          valueEndsAtXRelative - estimatedValueTextActualWidth - gapBetweenLabelAndValue;
-        spaceForTextContent = labelMustEndBeforeX - labelXPosition;
-      } else {
-        const labelOwnRightPadding = 6;
-        spaceForTextContent = totalHeaderWidth - labelXPosition - labelOwnRightPadding;
-      }
-      const minimumWidthToDisplay = 15;
-      const actualAvailableWidth = Math.max(minimumWidthToDisplay, spaceForTextContent);
-      const textNode = self.node()!;
-      const currentTextContentLength = textNode.getComputedTextLength();
-      if (currentTextContentLength > actualAvailableWidth) {
-        const ellipsis = '...';
-        let currentTruncatedText = originalText;
-        while (currentTruncatedText.length > 0) {
-          currentTruncatedText = originalText.substring(0, currentTruncatedText.length - 1);
-          if (currentTruncatedText.length === 0) {
-            self.text(ellipsis);
-            if (textNode.getComputedTextLength() > actualAvailableWidth) {
-              self.text('');
-            }
-            break;
-          }
-          self.text(currentTruncatedText + ellipsis);
-          if (textNode.getComputedTextLength() <= actualAvailableWidth) {
-            break;
-          }
-        }
-      }
-    });
-
-  // Add section values if enabled
-  if (config.showValues !== false) {
-    sections
-      .append('text')
-      .attr('class', 'treemapSectionValue')
-      .attr('x', (d) => d.x1 - d.x0 - 10)
-      .attr('y', SECTION_HEADER_HEIGHT / 2)
-      .attr('text-anchor', 'end')
-      .attr('dominant-baseline', 'middle')
-      .text((d) => (d.value ? valueFormat(d.value) : ''))
-      .attr('font-style', 'italic')
-      .attr('style', (d) => {
-        // Hide the value for the root section
-        if (d.depth === 0) {
-          return 'display: none;';
-        }
-        const labelStyles =
-          'text-anchor: end; dominant-baseline: middle; font-size: 10px; fill:' +
-          colorScaleLabel(d.data.name) +
-          '; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;';
-        const styles = styles2String({ cssCompiledStyles: d.data.cssCompiledStyles } as Node);
-        return labelStyles + styles.labelStyles.replace('color:', 'fill:');
-      });
-  }
-
-  // Draw the leaf nodes
-  const leafNodes = treemapData.leaves();
-  const cell = g
-    .selectAll('.treemapLeafGroup')
-    .data(leafNodes)
-    .enter()
-    .append('g')
-    .attr('class', (d, i) => {
-      return `treemapNode treemapLeafGroup leaf${i}${d.data.classSelector ? ` ${d.data.classSelector}` : ''}x`;
-    })
-    .attr('transform', (d) => `translate(${d.x0},${d.y0})`);
-
-  // Add rectangle for each leaf node
-  cell
-    .append('rect')
-    .attr('width', (d) => d.x1 - d.x0)
-    .attr('height', (d) => d.y1 - d.y0)
-    .attr('class', 'treemapLeaf')
-    .attr('fill', (d) => {
-      // Leaves inherit color from their immediate parent section's name.
-      // If a leaf is the root itself (no parent), it uses its own name.
-      return d.parent ? colorScale(d.parent.data.name) : colorScale(d.data.name);
-    })
-    .attr('style', (d) => {
-      const styles = styles2String({ cssCompiledStyles: d.data.cssCompiledStyles } as Node);
-      return styles.nodeStyles;
-    })
-    .attr('fill-opacity', 0.3)
-    .attr('stroke', (d) => {
-      // Leaves inherit color from their immediate parent section's name.
-      // If a leaf is the root itself (no parent), it uses its own name.
-      return d.parent ? colorScale(d.parent.data.name) : colorScale(d.data.name);
-    })
-    .attr('stroke-width', 3.0);
-
-  // Add clip paths to prevent text from extending outside nodes
-  cell
-    .append('clipPath')
-    .attr('id', (_d, i) => `clip-${id}-${i}`)
-    .append('rect')
-    .attr('width', (d) => Math.max(0, d.x1 - d.x0 - 4))
-    .attr('height', (d) => Math.max(0, d.y1 - d.y0 - 4));
-
-  // Add node labels with clipping
-  const leafLabels = cell
-    .append('text')
-    .attr('class', 'treemapLabel')
-    .attr('x', (d) => (d.x1 - d.x0) / 2)
-    .attr('y', (d) => (d.y1 - d.y0) / 2)
-    // .style('fill', (d) => colorScaleLabel(d.data.name))
-    .attr('style', (d) => {
-      const labelStyles =
-        'text-anchor: middle; dominant-baseline: middle; font-size: 38px;fill:' +
-        colorScaleLabel(d.data.name) +
-        ';';
-      const styles = styles2String({ cssCompiledStyles: d.data.cssCompiledStyles } as Node);
-      return labelStyles + styles.labelStyles.replace('color:', 'fill:');
-    })
-    .attr('clip-path', (_d, i) => `url(#clip-${id}-${i})`)
-    .text((d) => d.data.name);
-
-  leafLabels.each(function (d) {
-    const self = select(this);
-    const nodeWidth = d.x1 - d.x0;
-    const nodeHeight = d.y1 - d.y0;
-    const textNode = self.node()!;
-
-    const padding = 4;
-    const availableWidth = nodeWidth - 2 * padding;
-    const availableHeight = nodeHeight - 2 * padding;
-
-    if (availableWidth < 10 || availableHeight < 10) {
-      self.style('display', 'none');
-      return;
-    }
-
-    let currentLabelFontSize = parseInt(self.style('font-size'), 10);
-    const minLabelFontSize = 8;
-    const originalValueRelFontSize = 28; // Original font size of value, for max cap
-    const valueScaleFactor = 0.6; // Value font size as a factor of label font size
-    const minValueFontSize = 6;
-    const spacingBetweenLabelAndValue = 2;
-
-    // 1. Adjust label font size to fit width
-    while (
-      textNode.getComputedTextLength() > availableWidth &&
-      currentLabelFontSize > minLabelFontSize
-    ) {
-      currentLabelFontSize--;
-      self.style('font-size', `${currentLabelFontSize}px`);
-    }
-
-    // 2. Adjust both label and prospective value font size to fit combined height
-    let prospectiveValueFontSize = Math.max(
-      minValueFontSize,
-      Math.min(originalValueRelFontSize, Math.round(currentLabelFontSize * valueScaleFactor))
-    );
-    let combinedHeight =
-      currentLabelFontSize + spacingBetweenLabelAndValue + prospectiveValueFontSize;
-
-    while (combinedHeight > availableHeight && currentLabelFontSize > minLabelFontSize) {
-      currentLabelFontSize--;
-      prospectiveValueFontSize = Math.max(
-        minValueFontSize,
-        Math.min(originalValueRelFontSize, Math.round(currentLabelFontSize * valueScaleFactor))
-      );
-      if (
-        prospectiveValueFontSize < minValueFontSize &&
-        currentLabelFontSize === minLabelFontSize
-      ) {
-        break;
-      } // Avoid shrinking label if value is already at min
-      self.style('font-size', `${currentLabelFontSize}px`);
-      combinedHeight =
-        currentLabelFontSize + spacingBetweenLabelAndValue + prospectiveValueFontSize;
-      if (prospectiveValueFontSize <= minValueFontSize && combinedHeight > availableHeight) {
-        // If value is at min and still doesn't fit, label might need to shrink more alone
-        // This might lead to label being too small for its own text, checked next
-      }
-    }
-
-    // Update label font size based on height adjustment
-    self.style('font-size', `${currentLabelFontSize}px`);
-
-    // 3. Final visibility check for the label
-    if (
-      textNode.getComputedTextLength() > availableWidth ||
-      currentLabelFontSize < minLabelFontSize ||
-      availableHeight < currentLabelFontSize
-    ) {
-      self.style('display', 'none');
-      // If label is hidden, value will be hidden by its own .each() loop
-    }
-  });
-
-  // Add node values with clipping
-  if (config.showValues !== false) {
-    const leafValues = cell
-      .append('text')
-      .attr('class', 'treemapValue')
-      .attr('x', (d) => (d.x1 - d.x0) / 2)
-      .attr('y', function (d) {
-        // Y position calculated dynamically in leafValues.each based on final label metrics
-        return (d.y1 - d.y0) / 2; // Placeholder, will be overwritten
-      })
-      .attr('style', (d) => {
-        const labelStyles =
-          'text-anchor: middle; dominant-baseline: hanging; font-size: 28px;fill:' +
-          colorScaleLabel(d.data.name) +
-          ';';
-        const styles = styles2String({ cssCompiledStyles: d.data.cssCompiledStyles } as Node);
-        return labelStyles + styles.labelStyles.replace('color:', 'fill:');
-      })
-
-      .attr('clip-path', (_d, i) => `url(#clip-${id}-${i})`)
-      .text((d) => (d.value ? valueFormat(d.value) : ''));
-
-    leafValues.each(function (d) {
-      const valueTextElement = select(this);
-      const parentCellNode = this.parentNode as SVGGElement | null;
-
-      if (!parentCellNode) {
-        valueTextElement.style('display', 'none');
-        return;
-      }
-
-      const labelElement = select(parentCellNode).select<SVGTextElement>('.treemapLabel');
-
-      if (labelElement.empty() || labelElement.style('display') === 'none') {
-        valueTextElement.style('display', 'none');
-        return;
-      }
-
-      const finalLabelFontSize = parseFloat(labelElement.style('font-size'));
-      const originalValueFontSize = 28; // From initial style setting
-      const valueScaleFactor = 0.6;
-      const minValueFontSize = 6;
-      const spacingBetweenLabelAndValue = 2;
-
-      const actualValueFontSize = Math.max(
-        minValueFontSize,
-        Math.min(originalValueFontSize, Math.round(finalLabelFontSize * valueScaleFactor))
-      );
-      valueTextElement.style('font-size', `${actualValueFontSize}px`);
-
-      const labelCenterY = (d.y1 - d.y0) / 2;
-      const valueTopActualY = labelCenterY + finalLabelFontSize / 2 + spacingBetweenLabelAndValue;
-      valueTextElement.attr('y', valueTopActualY);
-
-      const nodeWidth = d.x1 - d.x0;
-      const nodeTotalHeight = d.y1 - d.y0;
-      const cellBottomPadding = 4;
-      const maxValueBottomY = nodeTotalHeight - cellBottomPadding;
-      const availableWidthForValue = nodeWidth - 2 * 4; // padding for value text
-
-      if (
-        valueTextElement.node()!.getComputedTextLength() > availableWidthForValue ||
-        valueTopActualY + actualValueFontSize > maxValueBottomY ||
-        actualValueFontSize < minValueFontSize
-      ) {
-        valueTextElement.style('display', 'none');
-      } else {
-        valueTextElement.style('display', null);
-      }
-    });
-  }
-  const diagramPadding = config.diagramPadding ?? 8;
-  setupViewPortForSVG(svg, diagramPadding, 'flowchart', config?.useMaxWidth || false);
-};
-
-const getClasses = function (
-  _text: string,
-  diagramObj: Pick<Diagram, 'db'>
-): Map<string, DiagramStyleClassDef> {
-  return (diagramObj.db as TreemapDB).getClasses();
-};
-export const renderer: DiagramRenderer = { draw, getClasses };

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

@@ -1,51 +0,0 @@
-import type { DiagramStylesProvider } from '../../diagram-api/types.js';
-import { cleanAndMerge } from '../../utils.js';
-import type { TreemapStyleOptions } from './types.js';
-
-const defaultTreemapStyleOptions: TreemapStyleOptions = {
-  sectionStrokeColor: 'black',
-  sectionStrokeWidth: '1',
-  sectionFillColor: '#efefef',
-  leafStrokeColor: 'black',
-  leafStrokeWidth: '1',
-  leafFillColor: '#efefef',
-  labelColor: 'black',
-  labelFontSize: '12px',
-  valueFontSize: '10px',
-  valueColor: 'black',
-  titleColor: 'black',
-  titleFontSize: '14px',
-};
-
-export const getStyles: DiagramStylesProvider = ({
-  treemap,
-}: { treemap?: TreemapStyleOptions } = {}) => {
-  const options = cleanAndMerge(defaultTreemapStyleOptions, treemap);
-
-  return `
-  .treemapNode.section {
-    stroke: ${options.sectionStrokeColor};
-    stroke-width: ${options.sectionStrokeWidth};
-    fill: ${options.sectionFillColor};
-  }
-  .treemapNode.leaf {
-    stroke: ${options.leafStrokeColor};
-    stroke-width: ${options.leafStrokeWidth};
-    fill: ${options.leafFillColor};
-  }
-  .treemapLabel {
-    fill: ${options.labelColor};
-    font-size: ${options.labelFontSize};
-  }
-  .treemapValue {
-    fill: ${options.valueColor};
-    font-size: ${options.valueFontSize};
-  }
-  .treemapTitle {
-    fill: ${options.titleColor};
-    font-size: ${options.titleFontSize};
-  }
-  `;
-};
-
-export default getStyles;

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

@@ -1,80 +0,0 @@
-import type { DiagramDBBase, DiagramStyleClassDef } from '../../diagram-api/types.js';
-import type { BaseDiagramConfig } from '../../config.type.js';
-
-export interface TreemapNode {
-  name: string;
-  children?: TreemapNode[];
-  value?: number;
-  parent?: TreemapNode;
-  classSelector?: string;
-  cssCompiledStyles?: string[];
-}
-
-export interface TreemapDB extends DiagramDBBase<TreemapDiagramConfig> {
-  getNodes: () => TreemapNode[];
-  addNode: (node: TreemapNode, level: number) => void;
-  getRoot: () => TreemapNode | undefined;
-  getClasses: () => Map<string, DiagramStyleClassDef>;
-  addClass: (className: string, style: string) => void;
-  getStylesForClass: (classSelector: string) => string[];
-}
-
-export interface TreemapStyleOptions {
-  sectionStrokeColor?: string;
-  sectionStrokeWidth?: string;
-  sectionFillColor?: string;
-  leafStrokeColor?: string;
-  leafStrokeWidth?: string;
-  leafFillColor?: string;
-  labelColor?: string;
-  labelFontSize?: string;
-  valueFontSize?: string;
-  valueColor?: string;
-  titleColor?: string;
-  titleFontSize?: string;
-}
-
-export interface TreemapData {
-  nodes: TreemapNode[];
-  levels: Map<TreemapNode, number>;
-  root?: TreemapNode;
-  outerNodes: TreemapNode[];
-  classes: Map<string, DiagramStyleClassDef>;
-}
-
-export interface TreemapItem {
-  $type: string;
-  name: string;
-  value?: number;
-  classSelector?: string;
-}
-
-export interface TreemapRow {
-  $type: string;
-  indent?: string;
-  item?: TreemapItem;
-  className?: string;
-  styleText?: string;
-}
-
-export interface TreemapAst {
-  TreemapRows?: TreemapRow[];
-  title?: string;
-  description?: string;
-  accDescription?: string;
-  accTitle?: string;
-  diagramTitle?: string;
-}
-
-// Define the TreemapDiagramConfig interface
-export interface TreemapDiagramConfig extends BaseDiagramConfig {
-  padding?: number;
-  diagramPadding?: number;
-  showValues?: boolean;
-  nodeWidth?: number;
-  nodeHeight?: number;
-  borderWidth?: number;
-  valueFontSize?: number;
-  labelFontSize?: number;
-  valueFormat?: string;
-}

packages/mermaid/src/diagrams/treemap/utils.test.ts

@@ -1,100 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { buildHierarchy } from './utils.js';
-import type { TreemapNode } from './types.js';
-
-describe('treemap utilities', () => {
-  describe('buildHierarchy', () => {
-    it('should convert a flat array into a hierarchical structure', () => {
-      // Input flat structure
-      const flatItems = [
-        { level: 0, name: 'Root', type: 'Section' },
-        { level: 4, name: 'Branch 1', type: 'Section' },
-        { level: 8, name: 'Leaf 1.1', type: 'Leaf', value: 10 },
-        { level: 8, name: 'Leaf 1.2', type: 'Leaf', value: 15 },
-        { level: 4, name: 'Branch 2', type: 'Section' },
-        { level: 8, name: 'Leaf 2.1', type: 'Leaf', value: 20 },
-        { level: 8, name: 'Leaf 2.2', type: 'Leaf', value: 25 },
-        { level: 8, name: 'Leaf 2.3', type: 'Leaf', value: 30 },
-      ];
-
-      // Expected hierarchical structure
-      const expectedHierarchy: TreemapNode[] = [
-        {
-          name: 'Root',
-          children: [
-            {
-              name: 'Branch 1',
-              children: [
-                { name: 'Leaf 1.1', value: 10 },
-                { name: 'Leaf 1.2', value: 15 },
-              ],
-            },
-            {
-              name: 'Branch 2',
-              children: [
-                { name: 'Leaf 2.1', value: 20 },
-                { name: 'Leaf 2.2', value: 25 },
-                { name: 'Leaf 2.3', value: 30 },
-              ],
-            },
-          ],
-        },
-      ];
-
-      const result = buildHierarchy(flatItems);
-      expect(result).toEqual(expectedHierarchy);
-    });
-
-    it('should handle empty input', () => {
-      expect(buildHierarchy([])).toEqual([]);
-    });
-
-    it('should handle only root nodes', () => {
-      const flatItems = [
-        { level: 0, name: 'Root 1', type: 'Section' },
-        { level: 0, name: 'Root 2', type: 'Section' },
-      ];
-
-      const expected = [
-        { name: 'Root 1', children: [] },
-        { name: 'Root 2', children: [] },
-      ];
-
-      expect(buildHierarchy(flatItems)).toEqual(expected);
-    });
-
-    it('should handle complex nesting levels', () => {
-      const flatItems = [
-        { level: 0, name: 'Root', type: 'Section' },
-        { level: 2, name: 'Level 1', type: 'Section' },
-        { level: 4, name: 'Level 2', type: 'Section' },
-        { level: 6, name: 'Leaf 1', type: 'Leaf', value: 10 },
-        { level: 4, name: 'Level 2 again', type: 'Section' },
-        { level: 6, name: 'Leaf 2', type: 'Leaf', value: 20 },
-      ];
-
-      const expected = [
-        {
-          name: 'Root',
-          children: [
-            {
-              name: 'Level 1',
-              children: [
-                {
-                  name: 'Level 2',
-                  children: [{ name: 'Leaf 1', value: 10 }],
-                },
-                {
-                  name: 'Level 2 again',
-                  children: [{ name: 'Leaf 2', value: 20 }],
-                },
-              ],
-            },
-          ],
-        },
-      ];
-
-      expect(buildHierarchy(flatItems)).toEqual(expected);
-    });
-  });
-});

packages/mermaid/src/diagrams/treemap/utils.ts

@@ -1,64 +0,0 @@
-import type { TreemapNode } from './types.js';
-
-/**
- * Converts a flat array of treemap items into a hierarchical structure
- * @param items - Array of flat treemap items with level, name, type, and optional value
- * @returns A hierarchical tree structure
- */
-export function buildHierarchy(
-  items: {
-    level: number;
-    name: string;
-    type: string;
-    value?: number;
-    classSelector?: string;
-    cssCompiledStyles?: string;
-  }[]
-): TreemapNode[] {
-  if (!items.length) {
-    return [];
-  }
-
-  const root: TreemapNode[] = [];
-  const stack: { node: TreemapNode; level: number }[] = [];
-
-  items.forEach((item) => {
-    const node: TreemapNode = {
-      name: item.name,
-      children: item.type === 'Leaf' ? undefined : [],
-    };
-    node.classSelector = item?.classSelector;
-    if (item?.cssCompiledStyles) {
-      node.cssCompiledStyles = [item.cssCompiledStyles];
-    }
-
-    if (item.type === 'Leaf' && item.value !== undefined) {
-      node.value = item.value;
-    }
-
-    // Find the right parent for this node
-    while (stack.length > 0 && stack[stack.length - 1].level >= item.level) {
-      stack.pop();
-    }
-
-    if (stack.length === 0) {
-      // This is a root node
-      root.push(node);
-    } else {
-      // Add as child to the parent
-      const parent = stack[stack.length - 1].node;
-      if (parent.children) {
-        parent.children.push(node);
-      } else {
-        parent.children = [node];
-      }
-    }
-
-    // Only add to stack if it can have children
-    if (item.type !== 'Leaf') {
-      stack.push({ node, level: item.level });
-    }
-  });
-
-  return root;
-}

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

@@ -179,7 +179,6 @@ function sidebarSyntax() {
         { text: 'Kanban 🔥', link: '/syntax/kanban' },
         { text: 'Architecture 🔥', link: '/syntax/architecture' },
         { text: 'Radar 🔥', link: '/syntax/radar' },
-        { text: 'Treemap 🔥', link: '/syntax/treemap' },
         { text: 'Other Examples', link: '/syntax/examples' },
       ],
     },

packages/mermaid/src/docs/community/new-diagram.md

@@ -106,13 +106,3 @@ const themes = {
 ```
 
 The actual options and values for the colors are defined in **src/theme/theme-[xyz].js**. If you provide the options your diagram needs in the existing theme files then the theming will work smoothly without hiccups.
-
-## Examples
-
-The `@mermaid-js/examples` package contains a collection of examples that are used by tools like mermaid.live to help users get started with the new diagram.
-
-You can duplicate an existing diagram example file, eg: `packages/examples/src/examples/flowchart.ts`, and modify it with details specific to your diagram.
-
-Then you can import the example in the `packages/examples/src/index.ts` file and add it to the `examples` array.
-
-Each diagram should have at least one example, and that should be marked as default. It is good to add more examples to showcase different features of the diagram.

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

@@ -240,7 +240,7 @@ Communication tools and platforms
 | GitHub + Mermaid         | -                                                                                                           | [🦊🔗](https://addons.mozilla.org/firefox/addon/github-mermaid/)               | -                                                                              | -                                                                                                                            | [🐙🔗](https://github.com/BackMarket/github-mermaid-extension)                                       |
 | Asciidoctor Live Preview | [🎡🔗](https://chromewebstore.google.com/detail/asciidoctorjs-live-previe/iaalpfgpbocpdfblpnhhgllgbdbchmia) | -                                                                              | -                                                                              | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/asciidoctorjs-live-previ/pefkelkanablhjdekgdahplkccnbdggd?hl=en-US) | -                                                                                                    |
 | Diagram Tab              | -                                                                                                           | -                                                                              | -                                                                              | -                                                                                                                            | [🐙🔗](https://github.com/khafast/diagramtab)                                                        |
-| Markdown Diagrams        | [🎡🔗](https://chromewebstore.google.com/detail/markdown-diagrams/pmoglnmodacnbbofbgcagndelmgaclel)         | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-diagrams/)      | -                                                                              | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/markdown-diagrams/hceenoomhhdkjjijnmlclkpenkapfihe)                 | [🐙🔗](https://github.com/marcozaccari/markdown-diagrams-browser-extension/tree/master/doc/examples) |
+| Markdown Diagrams        | [🎡🔗](https://chromewebstore.google.com/detail/markdown-diagrams/pmoglnmodacnbbofbgcagndelmgaclel)         | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-diagrams/)      | [🔴🔗](https://addons.opera.com/en/extensions/details/markdown-diagrams/)      | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/markdown-diagrams/hceenoomhhdkjjijnmlclkpenkapfihe)                 | [🐙🔗](https://github.com/marcozaccari/markdown-diagrams-browser-extension/tree/master/doc/examples) |
 | Markdown Viewer          | -                                                                                                           | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | -                                                                              | -                                                                                                                            | [🐙🔗](https://github.com/simov/markdown-viewer)                                                     |
 | Extensions for Mermaid   | -                                                                                                           | -                                                                              | [🔴🔗](https://addons.opera.com/en/extensions/details/extensions-for-mermaid/) | -                                                                                                                            | [🐙🔗](https://github.com/Stefan-S/mermaid-extension)                                                |
 | Chrome Diagrammer        | [🎡🔗](https://chromewebstore.google.com/detail/chrome-diagrammer/bkpbgjmkomfoakfklcjeoegkklgjnnpk)         | -                                                                              | -                                                                              | -                                                                                                                            | -                                                                                                    |

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

@@ -24,7 +24,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun
 
   Official Mermaid Chart plugins:
 
-  - [Mermaid Chart GPT](https://chatgpt.com/g/g-684cc36f30208191b21383b88650a45d-mermaid-chart-diagrams-and-charts)
+  - [Mermaid Chart GPT](https://chat.openai.com/g/g-1IRFKwq4G-mermaid-chart)
   - [Confluence](https://marketplace.atlassian.com/apps/1234056/mermaid-chart-for-confluence?hosting=cloud&tab=overview)
   - [Jira](https://marketplace.atlassian.com/apps/1234810/mermaid-chart-for-jira?tab=overview&hosting=cloud)
   - [Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MermaidChart.vscode-mermaid-chart)

packages/mermaid/src/docs/package.json

@@ -27,7 +27,7 @@
     "@iconify-json/carbon": "^1.1.37",
     "@unocss/reset": "^66.0.0",
     "@vite-pwa/vitepress": "^1.0.0",
-    "@vitejs/plugin-vue": "^6.0.0",
+    "@vitejs/plugin-vue": "^5.0.5",
     "fast-glob": "^3.3.3",
     "https-localhost": "^4.7.1",
     "pathe": "^2.0.3",

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

@@ -11,7 +11,7 @@ This diagram type is particularly useful for developers, network engineers, educ
 ## Syntax
 
 ```
-packet
+packet-beta
 start: "Block name" %% Single-bit block
 start-end: "Block name" %% Multi-bit blocks
 ... More Fields ...
@@ -22,7 +22,7 @@ start-end: "Block name" %% Multi-bit blocks
 Using start and end bit counts can be difficult, especially when modifying a design. For this we add a bit count field, which starts from the end of the previous field automagically. Use `+<count>` to set the number of bits, thus:
 
 ```
-packet
+packet-beta
 +1: "Block name" %% Single-bit block
 +8: "Block name" %% 8-bit block
 9-15: "Manually set start and end, it's fine to mix and match"
@@ -35,7 +35,7 @@ packet
 ---
 title: "TCP Packet"
 ---
-packet
+packet-beta
 0-15: "Source Port"
 16-31: "Destination Port"
 32-63: "Sequence Number"
@@ -56,7 +56,7 @@ packet
 ```
 
 ```mermaid-example
-packet
+packet-beta
 title UDP Packet
 +16: "Source Port"
 +16: "Destination Port"
@@ -104,7 +104,7 @@ config:
     packet:
       startByteColor: red
 ---
-packet
+packet-beta
 0-15: "Source Port"
 16-31: "Destination Port"
 32-63: "Sequence Number"

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

@@ -1,245 +0,0 @@
----
-title: Treemap Diagram Syntax
-outline: 'deep' # shows all h3 headings in outline in Vitepress
----
-
-# Treemap Diagram
-
-> A treemap diagram displays hierarchical data as a set of nested rectangles. Each branch of the tree is represented by a rectangle, which is then tiled with smaller rectangles representing sub-branches.
-
-```warning
-This is a new diagram type in Mermaid. Its syntax may evolve in future versions.
-```
-
-## Introduction
-
-Treemap diagrams are an effective way to visualize hierarchical data and show proportions between categories and subcategories. The size of each rectangle is proportional to the value it represents, making it easy to compare different parts of a hierarchy.
-
-Treemap diagrams are particularly useful for:
-
-- Visualizing hierarchical data structures
-- Comparing proportions between categories
-- Displaying large amounts of hierarchical data in a limited space
-- Identifying patterns and outliers in hierarchical data
-
-## Syntax
-
-```
-treemap-beta
-"Section 1"
-    "Leaf 1.1": 12
-    "Section 1.2"
-      "Leaf 1.2.1": 12
-"Section 2"
-    "Leaf 2.1": 20
-    "Leaf 2.2": 25
-```
-
-### Node Definition
-
-Nodes in a treemap are defined using the following syntax:
-
-- **Section/Parent nodes**: Defined with quoted text `"Section Name"`
-- **Leaf nodes with values**: Defined with quoted text followed by a colon and value `"Leaf Name": value`
-- **Hierarchy**: Created using indentation (spaces or tabs)
-- **Styling**: Nodes can be styled using the `:::class` syntax
-
-## Examples
-
-### Basic Treemap
-
-```mermaid-example
-treemap-beta
-"Category A"
-    "Item A1": 10
-    "Item A2": 20
-"Category B"
-    "Item B1": 15
-    "Item B2": 25
-```
-
-### Hierarchical Treemap
-
-```mermaid-example
-treemap-beta
-"Products"
-    "Electronics"
-        "Phones": 50
-        "Computers": 30
-        "Accessories": 20
-    "Clothing"
-        "Men's": 40
-        "Women's": 40
-```
-
-### Treemap with Styling
-
-```mermaid-example
-treemap-beta
-"Section 1"
-    "Leaf 1.1": 12
-    "Section 1.2":::class1
-      "Leaf 1.2.1": 12
-"Section 2"
-    "Leaf 2.1": 20:::class1
-    "Leaf 2.2": 25
-    "Leaf 2.3": 12
-
-classDef class1 fill:red,color:blue,stroke:#FFD600;
-```
-
-## Styling and Configuration
-
-Treemap diagrams can be customized using Mermaid's styling and configuration options.
-
-### Using classDef for Styling
-
-You can define custom styles for nodes using the `classDef` syntax, which is a standard feature across many Mermaid diagram types:
-
-```mermaid-example
-treemap-beta
-"Main"
-    "A": 20
-    "B":::important
-        "B1": 10
-        "B2": 15
-    "C": 5
-
-classDef important fill:#f96,stroke:#333,stroke-width:2px;
-```
-
-### Theme Configuration
-
-You can customize the colors of your treemap using the theme configuration:
-
-```mermaid-example
----
-config:
-    theme: 'forest'
----
-treemap-beta
-"Category A"
-    "Item A1": 10
-    "Item A2": 20
-"Category B"
-    "Item B1": 15
-    "Item B2": 25
-```
-
-### Diagram Padding
-
-You can adjust the padding around the treemap diagram using the `diagramPadding` configuration option:
-
-```mermaid-example
----
-config:
-  treemap:
-    diagramPadding: 200
----
-treemap-beta
-"Category A"
-    "Item A1": 10
-    "Item A2": 20
-"Category B"
-    "Item B1": 15
-    "Item B2": 25
-```
-
-## Configuration Options
-
-The treemap diagram supports the following configuration options:
-
-| Option         | Description                                                                 | Default |
-| -------------- | --------------------------------------------------------------------------- | ------- |
-| useMaxWidth    | When true, the diagram width is set to 100% and scales with available space | true    |
-| padding        | Internal padding between nodes                                              | 10      |
-| diagramPadding | Padding around the entire diagram                                           | 8       |
-| showValues     | Whether to show values in the treemap                                       | true    |
-| nodeWidth      | Width of nodes                                                              | 100     |
-| nodeHeight     | Height of nodes                                                             | 40      |
-| borderWidth    | Width of borders                                                            | 1       |
-| valueFontSize  | Font size for values                                                        | 12      |
-| labelFontSize  | Font size for labels                                                        | 14      |
-| valueFormat    | Format for values (see Value Formatting section)                            | ','     |
-
-## Advanced Features
-
-### Value Formatting
-
-Values in treemap diagrams can be formatted to display in different ways using the `valueFormat` configuration option. This option primarily uses [D3's format specifiers](https://github.com/d3/d3-format#locale_format) to control how numbers are displayed, with some additional special cases for common formats.
-
-Some common format patterns:
-
-- `,` - Thousands separator (default)
-- `$` - Add dollar sign
-- `.1f` - Show one decimal place
-- `.1%` - Show as percentage with one decimal place
-- `$0,0` - Dollar sign with thousands separator
-- `$.2f` - Dollar sign with 2 decimal places
-- `$,.2f` - Dollar sign with thousands separator and 2 decimal places
-
-The treemap diagram supports both standard D3 format specifiers and some common currency formats that combine the dollar sign with other formatting options.
-
-Example with currency formatting:
-
-```mermaid-example
----
-config:
-  treemap:
-    valueFormat: '$0,0'
----
-treemap-beta
-"Budget"
-    "Operations"
-        "Salaries": 700000
-        "Equipment": 200000
-        "Supplies": 100000
-    "Marketing"
-        "Advertising": 400000
-        "Events": 100000
-```
-
-Example with percentage formatting:
-
-```mermaid-example
----
-config:
-  treemap:
-    valueFormat: '$.1%'
----
-treemap-beta
-"Market Share"
-    "Company A": 0.35
-    "Company B": 0.25
-    "Company C": 0.15
-    "Others": 0.25
-```
-
-## Common Use Cases
-
-Treemap diagrams are commonly used for:
-
-1. **Financial Data**: Visualizing budget allocations, market shares, or portfolio compositions
-2. **File System Analysis**: Showing disk space usage by folders and files
-3. **Population Demographics**: Displaying population distribution across regions and subregions
-4. **Product Hierarchies**: Visualizing product categories and their sales volumes
-5. **Organizational Structures**: Representing departments and team sizes in a company
-
-## Limitations
-
-- Treemap diagrams work best when the data has a natural hierarchy
-- Very small values may be difficult to see or label in a treemap diagram
-- Deep hierarchies (many levels) can be challenging to represent clearly
-- Treemap diagrams are not well suited for representing data with negative values
-
-## Related Diagrams
-
-If treemap diagrams don't suit your needs, consider these alternatives:
-
-- [**Pie Charts**](./pie.md): For simple proportion comparisons without hierarchy
-- **Sunburst Diagrams**: For hierarchical data with a radial layout (yet to be released in Mermaid).
-- [**Sankey Diagrams**](./sankey.md): For flow-based hierarchical data
-
-## Notes
-
-The treemap diagram implementation in Mermaid is designed to be simple to use while providing powerful visualization capabilities. As this is a newer diagram type, feedback and feature requests are welcome through the Mermaid GitHub repository.

packages/mermaid/src/mermaid.ts

@@ -5,7 +5,7 @@
 import { registerIconPacks } from './rendering-util/icons.js';
 import { dedent } from 'ts-dedent';
 import type { MermaidConfig } from './config.type.js';
-import { detectType, detectors, registerLazyLoadedDiagrams } from './diagram-api/detectType.js';
+import { detectType, registerLazyLoadedDiagrams } from './diagram-api/detectType.js';
 import { addDiagrams } from './diagram-api/diagram-orchestration.js';
 import { loadRegisteredDiagrams } from './diagram-api/loadDiagram.js';
 import type { ExternalDiagramDefinition, SVG, SVGGroup } from './diagram-api/types.js';
@@ -415,17 +415,6 @@ const render: typeof mermaidAPI.render = (id, text, container) => {
   });
 };
 
-/**
- * Gets the metadata for all registered diagrams.
- * Currently only the id is returned.
- * @returns An array of objects with the id of the diagram.
- */
-const getRegisteredDiagramsMetadata = (): Pick<ExternalDiagramDefinition, 'id'>[] => {
-  return Object.keys(detectors).map((id) => ({
-    id,
-  }));
-};
-
 export interface Mermaid {
   startOnLoad: boolean;
   parseError?: ParseErrorFunction;
@@ -448,7 +437,6 @@ export interface Mermaid {
   setParseErrorHandler: typeof setParseErrorHandler;
   detectType: typeof detectType;
   registerIconPacks: typeof registerIconPacks;
-  getRegisteredDiagramsMetadata: typeof getRegisteredDiagramsMetadata;
 }
 
 const mermaid: Mermaid = {
@@ -466,7 +454,6 @@ const mermaid: Mermaid = {
   setParseErrorHandler,
   detectType,
   registerIconPacks,
-  getRegisteredDiagramsMetadata,
 };
 
 export default mermaid;

packages/mermaid/src/mermaidAPI.spec.ts

@@ -794,7 +794,6 @@ graph TD;A--x|text including URL space|B;`)
       { textDiagramType: 'gantt', expectedType: 'gantt' },
       { textDiagramType: 'journey', expectedType: 'journey' },
       { textDiagramType: 'pie', expectedType: 'pie' },
-      { textDiagramType: 'packet', expectedType: 'packet' },
       { textDiagramType: 'packet-beta', expectedType: 'packet' },
       { textDiagramType: 'xychart-beta', expectedType: 'xychart' },
       { textDiagramType: 'requirementDiagram', expectedType: 'requirement' },

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

@@ -1,9 +1,13 @@
 import { getConfig } from '../../diagram-api/diagramAPI.js';
-import { evaluate, getUrl } from '../../diagrams/common/common.js';
+import { evaluate } from '../../diagrams/common/common.js';
 import { log } from '../../logger.js';
 import { createText } from '../createText.js';
 import utils from '../../utils.js';
-import { getLineFunctionsWithOffset } from '../../utils/lineWithOffset.js';
+import {
+  getLineFunctionsWithOffset,
+  markerOffsets,
+  markerOffsets2,
+} from '../../utils/lineWithOffset.js';
 import { getSubGraphTitleMargins } from '../../utils/subGraphTitleMargins.js';
 
 import {
@@ -27,8 +31,8 @@ import createLabel from './createLabel.js';
 import { addEdgeMarkers } from './edgeMarker.ts';
 import { isLabelStyle } from './shapes/handDrawnShapeStyles.js';
 
-const edgeLabels = new Map();
-const terminalLabels = new Map();
+export const edgeLabels = new Map();
+export const terminalLabels = new Map();
 
 export const clear = () => {
   edgeLabels.clear();
@@ -55,7 +59,7 @@ export const insertEdgeLabel = async (elem, edge) => {
   const edgeLabel = elem.insert('g').attr('class', 'edgeLabel');
 
   // Create inner g, label, this will be positioned now for centering the text
-  const label = edgeLabel.insert('g').attr('class', 'label');
+  const label = edgeLabel.insert('g').attr('class', 'label').attr('data-id', edge.id);
   label.node().appendChild(labelElement);
 
   // Center the label
@@ -352,94 +356,33 @@ const cutPathAtIntersect = (_points, boundaryNode) => {
   return points;
 };
 
-function extractCornerPoints(points) {
-  const cornerPoints = [];
-  const cornerPointPositions = [];
-  for (let i = 1; i < points.length - 1; i++) {
-    const prev = points[i - 1];
-    const curr = points[i];
-    const next = points[i + 1];
-    if (
-      prev.x === curr.x &&
-      curr.y === next.y &&
-      Math.abs(curr.x - next.x) > 5 &&
-      Math.abs(curr.y - prev.y) > 5
-    ) {
-      cornerPoints.push(curr);
-      cornerPointPositions.push(i);
-    } else if (
-      prev.y === curr.y &&
-      curr.x === next.x &&
-      Math.abs(curr.x - prev.x) > 5 &&
-      Math.abs(curr.y - next.y) > 5
-    ) {
-      cornerPoints.push(curr);
-      cornerPointPositions.push(i);
-    }
-  }
-  return { cornerPoints, cornerPointPositions };
-}
+const generateDashArray = (len, oValueS, oValueE) => {
+  const middleLength = len - oValueS - oValueE;
+  const dashLength = 2; // Length of each dash
+  const gapLength = 2; // Length of each gap
+  const dashGapPairLength = dashLength + gapLength;
 
-const findAdjacentPoint = function (pointA, pointB, distance) {
-  const xDiff = pointB.x - pointA.x;
-  const yDiff = pointB.y - pointA.y;
-  const length = Math.sqrt(xDiff * xDiff + yDiff * yDiff);
-  const ratio = distance / length;
-  return { x: pointB.x - ratio * xDiff, y: pointB.y - ratio * yDiff };
+  // Calculate number of complete dash-gap pairs that can fit
+  const numberOfPairs = Math.floor(middleLength / dashGapPairLength);
+
+  // Generate the middle pattern array
+  const middlePattern = Array(numberOfPairs).fill(`${dashLength} ${gapLength}`).join(' ');
+
+  // Combine all parts
+  const dashArray = `0 ${oValueS} ${middlePattern} ${oValueE}`;
+
+  return dashArray;
 };
-
-const fixCorners = function (lineData) {
-  const { cornerPointPositions } = extractCornerPoints(lineData);
-  const newLineData = [];
-  for (let i = 0; i < lineData.length; i++) {
-    if (cornerPointPositions.includes(i)) {
-      const prevPoint = lineData[i - 1];
-      const nextPoint = lineData[i + 1];
-      const cornerPoint = lineData[i];
-
-      const newPrevPoint = findAdjacentPoint(prevPoint, cornerPoint, 5);
-      const newNextPoint = findAdjacentPoint(nextPoint, cornerPoint, 5);
-
-      const xDiff = newNextPoint.x - newPrevPoint.x;
-      const yDiff = newNextPoint.y - newPrevPoint.y;
-      newLineData.push(newPrevPoint);
-
-      const a = Math.sqrt(2) * 2;
-      let newCornerPoint = { x: cornerPoint.x, y: cornerPoint.y };
-      if (Math.abs(nextPoint.x - prevPoint.x) > 10 && Math.abs(nextPoint.y - prevPoint.y) >= 10) {
-        log.debug(
-          'Corner point fixing',
-          Math.abs(nextPoint.x - prevPoint.x),
-          Math.abs(nextPoint.y - prevPoint.y)
-        );
-        const r = 5;
-        if (cornerPoint.x === newPrevPoint.x) {
-          newCornerPoint = {
-            x: xDiff < 0 ? newPrevPoint.x - r + a : newPrevPoint.x + r - a,
-            y: yDiff < 0 ? newPrevPoint.y - a : newPrevPoint.y + a,
-          };
-        } else {
-          newCornerPoint = {
-            x: xDiff < 0 ? newPrevPoint.x - a : newPrevPoint.x + a,
-            y: yDiff < 0 ? newPrevPoint.y - r + a : newPrevPoint.y + r - a,
-          };
-        }
-      } else {
-        log.debug(
-          'Corner point skipping fixing',
-          Math.abs(nextPoint.x - prevPoint.x),
-          Math.abs(nextPoint.y - prevPoint.y)
-        );
-      }
-      newLineData.push(newCornerPoint, newNextPoint);
-    } else {
-      newLineData.push(lineData[i]);
-    }
-  }
-  return newLineData;
-};
-
-export const insertEdge = function (elem, edge, clusterDb, diagramType, startNode, endNode, id) {
+export const insertEdge = function (
+  elem,
+  edge,
+  clusterDb,
+  diagramType,
+  startNode,
+  endNode,
+  id,
+  skipIntersect = false
+) {
   const { handDrawnSeed } = getConfig();
   let points = edge.points;
   let pointsHasChanged = false;
@@ -453,11 +396,12 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
     edgeClassStyles.push(edge.cssCompiledStyles[key]);
   }
 
-  if (head.intersect && tail.intersect) {
+  log.debug('UIO intersect check', edge.points, head.x, tail.x);
+  if (head.intersect && tail.intersect && !skipIntersect) {
     points = points.slice(1, edge.points.length - 1);
     points.unshift(tail.intersect(points[0]));
     log.debug(
-      'Last point APA12',
+      'Last point UIO',
       edge.start,
       '-->',
       edge.end,
@@ -467,6 +411,7 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
     );
     points.push(head.intersect(points[points.length - 1]));
   }
+  const pointsStr = btoa(JSON.stringify(points));
   if (edge.toCluster) {
     log.info('to cluster abc88', clusterDb.get(edge.toCluster));
     points = cutPathAtIntersect(edge.points, clusterDb.get(edge.toCluster).node);
@@ -486,7 +431,7 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
   }
 
   let lineData = points.filter((p) => !Number.isNaN(p.y));
-  lineData = fixCorners(lineData);
+  //lineData = fixCorners(lineData);
   let curve = curveBasis;
   curve = curveLinear;
   switch (edge.curve) {
@@ -530,6 +475,10 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
       curve = curveBasis;
   }
 
+  // if (edge.curve) {
+  //   curve = edge.curve;
+  // }
+
   const { x, y } = getLineFunctionsWithOffset(edge);
   const lineFunction = line().x(x).y(y).curve(curve);
 
@@ -561,10 +510,14 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
       strokeClasses += ' edge-pattern-solid';
   }
   let svgPath;
-  let linePath = lineFunction(lineData);
-  const edgeStyles = Array.isArray(edge.style) ? edge.style : edge.style ? [edge.style] : [];
+  let linePath =
+    edge.curve === 'rounded'
+      ? generateRoundedPath(applyMarkerOffsetsToPoints(lineData, edge), 5)
+      : lineFunction(lineData);
+  const edgeStyles = Array.isArray(edge.style) ? edge.style : [edge.style];
   let strokeColor = edgeStyles.find((style) => style?.startsWith('stroke:'));
 
+  let animatedEdge = false;
   if (edge.look === 'handDrawn') {
     const rc = rough.svg(elem);
     Object.assign([], lineData);
@@ -595,7 +548,10 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
       animationClass = ' edge-animation-' + edge.animation;
     }
 
-    const pathStyle = stylesFromClasses ? stylesFromClasses + ';' + styles + ';' : styles;
+    const pathStyle =
+      (stylesFromClasses ? stylesFromClasses + ';' + styles + ';' : styles) +
+      ';' +
+      (edgeStyles ? edgeStyles.reduce((acc, style) => acc + ';' + style, '') : '');
     svgPath = elem
       .append('path')
       .attr('d', linePath)
@@ -605,11 +561,38 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
         ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : '') + (animationClass ?? '')
       )
       .attr('style', pathStyle);
+
+    //eslint-disable-next-line @typescript-eslint/prefer-regexp-exec
     strokeColor = pathStyle.match(/stroke:([^;]+)/)?.[1];
+
+    // Possible fix to remove eslint-disable-next-line
+    //strokeColor = /stroke:([^;]+)/.exec(pathStyle)?.[1];
+
+    animatedEdge =
+      edge.animate === true || !!edge.animation || stylesFromClasses.includes('animation');
+    const len = svgPath.node().getTotalLength();
+    const oValueS = markerOffsets2[edge.arrowTypeStart] || 0;
+    const oValueE = markerOffsets2[edge.arrowTypeEnd] || 0;
+
+    if (edge.look === 'neo' && !animatedEdge) {
+      const dashArray =
+        edge.pattern === 'dotted' || edge.pattern === 'dashed'
+          ? generateDashArray(len, oValueS, oValueE)
+          : `0 ${oValueS} ${len - oValueS - oValueE} ${oValueE}`;
+
+      // No offset needed because we already start with a zero-length dash that effectively sets us up for a gap at the start.
+      const mOffset = `stroke-dasharray: ${dashArray}; stroke-dashoffset: 0;`;
+      svgPath.attr('style', mOffset + svgPath.attr('style'));
+    }
   }
 
-  // DEBUG code, DO NOT REMOVE
-  // adds a red circle at each edge coordinate
+  // MC Special
+  svgPath.attr('data-edge', true);
+  svgPath.attr('data-et', 'edge');
+  svgPath.attr('data-id', edge.id);
+  svgPath.attr('data-points', pointsStr);
+
+  // DEBUG code, adds a red circle at each edge coordinate
   // cornerPoints.forEach((point) => {
   //   elem
   //     .append('circle')
@@ -619,24 +602,33 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
   //     .attr('cx', point.x)
   //     .attr('cy', point.y);
   // });
-  // lineData.forEach((point) => {
-  //   elem
-  //     .append('circle')
-  //     .style('stroke', 'blue')
-  //     .style('fill', 'blue')
-  //     .attr('r', 3)
-  //     .attr('cx', point.x)
-  //     .attr('cy', point.y);
-  // });
+  if (edge.showPoints) {
+    lineData.forEach((point) => {
+      elem
+        .append('circle')
+        .style('stroke', 'red')
+        .style('fill', 'red')
+        .attr('r', 1)
+        .attr('cx', point.x)
+        .attr('cy', point.y);
+    });
+  }
 
   let url = '';
   if (getConfig().flowchart.arrowMarkerAbsolute || getConfig().state.arrowMarkerAbsolute) {
-    url = getUrl(true);
+    url =
+      window.location.protocol +
+      '//' +
+      window.location.host +
+      window.location.pathname +
+      window.location.search;
+    url = url.replace(/\(/g, '\\(').replace(/\)/g, '\\)');
   }
   log.info('arrowTypeStart', edge.arrowTypeStart);
   log.info('arrowTypeEnd', edge.arrowTypeEnd);
 
-  addEdgeMarkers(svgPath, edge, url, id, diagramType, strokeColor);
+  const useMargin = !animatedEdge && edge?.look === 'neo';
+  addEdgeMarkers(svgPath, edge, url, id, diagramType, useMargin, strokeColor);
 
   let paths = {};
   if (pointsHasChanged) {
@@ -645,3 +637,134 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
   paths.originalPath = edge.points;
   return paths;
 };
+
+/**
+ * Generates SVG path data with rounded corners from an array of points.
+ * @param {Array} points - Array of points in the format [{x: Number, y: Number}, ...]
+ * @param {Number} radius - The radius of the rounded corners
+ * @returns {String} - SVG path data string
+ */
+function generateRoundedPath(points, radius) {
+  if (points.length < 2) {
+    return '';
+  }
+
+  let path = '';
+  const size = points.length;
+  const epsilon = 1e-5;
+
+  for (let i = 0; i < size; i++) {
+    const currPoint = points[i];
+    const prevPoint = points[i - 1];
+    const nextPoint = points[i + 1];
+
+    if (i === 0) {
+      // Move to the first point
+      path += `M${currPoint.x},${currPoint.y}`;
+    } else if (i === size - 1) {
+      // Last point, draw a straight line to the final point
+      path += `L${currPoint.x},${currPoint.y}`;
+    } else {
+      // Calculate vectors for incoming and outgoing segments
+      const dx1 = currPoint.x - prevPoint.x;
+      const dy1 = currPoint.y - prevPoint.y;
+      const dx2 = nextPoint.x - currPoint.x;
+      const dy2 = nextPoint.y - currPoint.y;
+
+      const len1 = Math.hypot(dx1, dy1);
+      const len2 = Math.hypot(dx2, dy2);
+
+      // Prevent division by zero
+      if (len1 < epsilon || len2 < epsilon) {
+        path += `L${currPoint.x},${currPoint.y}`;
+        continue;
+      }
+
+      // Normalize the vectors
+      const nx1 = dx1 / len1;
+      const ny1 = dy1 / len1;
+      const nx2 = dx2 / len2;
+      const ny2 = dy2 / len2;
+
+      // Calculate the angle between the vectors
+      const dot = nx1 * nx2 + ny1 * ny2;
+      // Clamp the dot product to avoid numerical issues with acos
+      const clampedDot = Math.max(-1, Math.min(1, dot));
+      const angle = Math.acos(clampedDot);
+
+      // Skip rounding if the angle is too small or too close to 180 degrees
+      if (angle < epsilon || Math.abs(Math.PI - angle) < epsilon) {
+        path += `L${currPoint.x},${currPoint.y}`;
+        continue;
+      }
+
+      // Calculate the distance to offset the control point
+      const cutLen = Math.min(radius / Math.sin(angle / 2), len1 / 2, len2 / 2);
+
+      // Calculate the start and end points of the curve
+      const startX = currPoint.x - nx1 * cutLen;
+      const startY = currPoint.y - ny1 * cutLen;
+      const endX = currPoint.x + nx2 * cutLen;
+      const endY = currPoint.y + ny2 * cutLen;
+
+      // Draw the line to the start of the curve
+      path += `L${startX},${startY}`;
+
+      // Draw the quadratic Bezier curve
+      path += `Q${currPoint.x},${currPoint.y} ${endX},${endY}`;
+    }
+  }
+
+  return path;
+}
+// Helper function to calculate delta and angle between two points
+function calculateDeltaAndAngle(point1, point2) {
+  if (!point1 || !point2) {
+    return { angle: 0, deltaX: 0, deltaY: 0 };
+  }
+  const deltaX = point2.x - point1.x;
+  const deltaY = point2.y - point1.y;
+  const angle = Math.atan2(deltaY, deltaX);
+  return { angle, deltaX, deltaY };
+}
+
+// Function to adjust the first and last points of the points array
+function applyMarkerOffsetsToPoints(points, edge) {
+  // Copy the points array to avoid mutating the original data
+  const newPoints = points.map((point) => ({ ...point }));
+
+  // Handle the first point (start of the edge)
+  if (points.length >= 2 && markerOffsets[edge.arrowTypeStart]) {
+    const offsetValue = markerOffsets[edge.arrowTypeStart];
+
+    const point1 = points[0];
+    const point2 = points[1];
+
+    const { angle } = calculateDeltaAndAngle(point1, point2);
+
+    const offsetX = offsetValue * Math.cos(angle);
+    const offsetY = offsetValue * Math.sin(angle);
+
+    newPoints[0].x = point1.x + offsetX;
+    newPoints[0].y = point1.y + offsetY;
+  }
+
+  // Handle the last point (end of the edge)
+  const n = points.length;
+  if (n >= 2 && markerOffsets[edge.arrowTypeEnd]) {
+    const offsetValue = markerOffsets[edge.arrowTypeEnd];
+
+    const point1 = points[n - 1];
+    const point2 = points[n - 2];
+
+    const { angle } = calculateDeltaAndAngle(point2, point1);
+
+    const offsetX = offsetValue * Math.cos(angle);
+    const offsetY = offsetValue * Math.sin(angle);
+
+    newPoints[n - 1].x = point1.x - offsetX;
+    newPoints[n - 1].y = point1.y - offsetY;
+  }
+
+  return newPoints;
+}

packages/mermaid/src/rendering-util/rendering-elements/intersect/intersect-line.js

@@ -2,64 +2,87 @@
  * Returns the point at which two lines, p and q, intersect or returns undefined if they do not intersect.
  */
 function intersectLine(p1, p2, q1, q2) {
-  // Algorithm from J. Avro, (ed.) Graphics Gems, No 2, Morgan Kaufmann, 1994,
-  // p7 and p473.
+  {
+    // Algorithm from J. Avro, (ed.) Graphics Gems, No 2, Morgan Kaufmann, 1994,
+    // p7 and p473.
 
-  var a1, a2, b1, b2, c1, c2;
-  var r1, r2, r3, r4;
-  var denom, offset, num;
-  var x, y;
+    // Compute a1, b1, c1, where line joining points 1 and 2 is F(x,y) = a1 x +
+    // b1 y + c1 = 0.
+    const a1 = p2.y - p1.y;
+    const b1 = p1.x - p2.x;
+    const c1 = p2.x * p1.y - p1.x * p2.y;
 
-  // Compute a1, b1, c1, where line joining points 1 and 2 is F(x,y) = a1 x +
-  // b1 y + c1 = 0.
-  a1 = p2.y - p1.y;
-  b1 = p1.x - p2.x;
-  c1 = p2.x * p1.y - p1.x * p2.y;
+    // Compute r3 and r4.
+    const r3 = a1 * q1.x + b1 * q1.y + c1;
+    const r4 = a1 * q2.x + b1 * q2.y + c1;
 
-  // Compute r3 and r4.
-  r3 = a1 * q1.x + b1 * q1.y + c1;
-  r4 = a1 * q2.x + b1 * q2.y + c1;
+    const epsilon = 1e-6;
 
-  // Check signs of r3 and r4. If both point 3 and point 4 lie on
-  // same side of line 1, the line segments do not intersect.
-  if (r3 !== 0 && r4 !== 0 && sameSign(r3, r4)) {
-    return /*DON'T_INTERSECT*/;
+    // Check signs of r3 and r4. If both point 3 and point 4 lie on
+    // same side of line 1, the line segments do not intersect.
+    if (r3 !== 0 && r4 !== 0 && sameSign(r3, r4)) {
+      return /*DON'T_INTERSECT*/;
+    }
+
+    // Compute a2, b2, c2 where line joining points 3 and 4 is G(x,y) = a2 x + b2 y + c2 = 0
+    const a2 = q2.y - q1.y;
+    const b2 = q1.x - q2.x;
+    const c2 = q2.x * q1.y - q1.x * q2.y;
+
+    // Compute r1 and r2
+    const r1 = a2 * p1.x + b2 * p1.y + c2;
+    const r2 = a2 * p2.x + b2 * p2.y + c2;
+
+    // Check signs of r1 and r2. If both point 1 and point 2 lie
+    // on same side of second line segment, the line segments do
+    // not intersect.
+    if (Math.abs(r1) < epsilon && Math.abs(r2) < epsilon && sameSign(r1, r2)) {
+      return /*DON'T_INTERSECT*/;
+    }
+
+    // Line segments intersect: compute intersection point.
+    const denom = a1 * b2 - a2 * b1;
+    if (denom === 0) {
+      return /*COLLINEAR*/;
+    }
+
+    const offset = Math.abs(denom / 2);
+
+    // The denom/2 is to get rounding instead of truncating. It
+    // is added or subtracted to the numerator, depending upon the
+    // sign of the numerator.
+    let num = b1 * c2 - b2 * c1;
+    const x = num < 0 ? (num - offset) / denom : (num + offset) / denom;
+
+    num = a2 * c1 - a1 * c2;
+    const y = num < 0 ? (num - offset) / denom : (num + offset) / denom;
+    // console.log(
+    //   'APA30 intersectLine intersection',
+    //   '\np1: (',
+    //   p1.x,
+    //   p1.y,
+    //   ')',
+    //   '\np2: (',
+    //   p2.x,
+    //   p2.y,
+    //   ')',
+    //   '\nq1: (',
+    //   q1.x,
+    //   q1.y,
+    //   ')',
+    //   '\np1: (',
+    //   q2.x,
+    //   q2.y,
+    //   ')',
+    //   'offset:',
+    //   offset,
+    //   '\nintersection: (',
+    //   x,
+    //   y,
+    //   ')'
+    // );
+    return { x: x, y: y };
   }
-
-  // Compute a2, b2, c2 where line joining points 3 and 4 is G(x,y) = a2 x + b2 y + c2 = 0
-  a2 = q2.y - q1.y;
-  b2 = q1.x - q2.x;
-  c2 = q2.x * q1.y - q1.x * q2.y;
-
-  // Compute r1 and r2
-  r1 = a2 * p1.x + b2 * p1.y + c2;
-  r2 = a2 * p2.x + b2 * p2.y + c2;
-
-  // Check signs of r1 and r2. If both point 1 and point 2 lie
-  // on same side of second line segment, the line segments do
-  // not intersect.
-  if (r1 !== 0 && r2 !== 0 && sameSign(r1, r2)) {
-    return /*DON'T_INTERSECT*/;
-  }
-
-  // Line segments intersect: compute intersection point.
-  denom = a1 * b2 - a2 * b1;
-  if (denom === 0) {
-    return /*COLLINEAR*/;
-  }
-
-  offset = Math.abs(denom / 2);
-
-  // The denom/2 is to get rounding instead of truncating. It
-  // is added or subtracted to the numerator, depending upon the
-  // sign of the numerator.
-  num = b1 * c2 - b2 * c1;
-  x = num < 0 ? (num - offset) / denom : (num + offset) / denom;
-
-  num = a2 * c1 - a1 * c2;
-  y = num < 0 ? (num - offset) / denom : (num + offset) / denom;
-
-  return { x: x, y: y };
 }
 
 function sameSign(r1, r2) {

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

@@ -6,6 +6,7 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import type { D3Selection } from '../../../types.js';
 import { handleUndefinedAttr } from '../../../utils.js';
+import type { Bounds, Point } from '../../../types.js';
 
 export async function circle<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
   const { labelStyles, nodeStyles } = styles2String(node);
@@ -35,7 +36,10 @@ export async function circle<T extends SVGGraphicsElement>(parent: D3Selection<T
   }
 
   updateNodeBounds(node, circleElem);
-
+  node.calcIntersect = function (bounds: Bounds, point: Point) {
+    const radius = bounds.width / 2;
+    return intersect.circle(bounds, radius, point);
+  };
   node.intersect = function (point) {
     log.info('Circle intersect', node, radius, point);
     return intersect.circle(node, radius, point);

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

@@ -6,6 +6,7 @@ import { userNodeOverrides, styles2String } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import type { D3Selection } from '../../../types.js';
 import { handleUndefinedAttr } from '../../../utils.js';
+import type { Bounds, Point } from '../../../types.js';
 
 export async function drawRect<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
@@ -62,6 +63,10 @@ export async function drawRect<T extends SVGGraphicsElement>(
 
   updateNodeBounds(node, rect);
 
+  node.calcIntersect = function (bounds: Bounds, point: Point) {
+    return intersect.rect(bounds, point);
+  };
+
   node.intersect = function (point) {
     return intersect.rect(node, point);
   };

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

@@ -17,7 +17,7 @@ export async function note<T extends SVGGraphicsElement>(
   if (!useHtmlLabels) {
     node.centerLabel = true;
   }
-  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
+  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
   const totalWidth = Math.max(bbox.width + (node.padding ?? 0) * 2, node?.width ?? 0);
   const totalHeight = Math.max(bbox.height + (node.padding ?? 0) * 2, node?.height ?? 0);
   const x = -totalWidth / 2;
@@ -50,11 +50,6 @@ export async function note<T extends SVGGraphicsElement>(
     rect.selectAll('path').attr('style', nodeStyles);
   }
 
-  label.attr(
-    'transform',
-    `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) - (bbox.y - (bbox.top ?? 0))})`
-  );
-
   updateNodeBounds(node, rect);
 
   node.intersect = function (point) {

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

@@ -1,4 +1,3 @@
-import { log } from '../../../logger.js';
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
 import type { Node } from '../../types.js';
@@ -6,6 +5,7 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 import type { D3Selection } from '../../../types.js';
+import type { Bounds, Point } from '../../../types.js';
 
 export const createDecisionBoxPathD = (x: number, y: number, size: number): string => {
   return [
@@ -59,17 +59,42 @@ export async function question<T extends SVGGraphicsElement>(parent: D3Selection
   }
 
   updateNodeBounds(node, polygon);
+  node.calcIntersect = function (bounds: Bounds, point: Point) {
+    const s = bounds.width;
+
+    // console.log(
+    //   'APA10\nbounds width:',
+    //   bounds.width,
+    //   '\nbounds height:',
+    //   bounds.height,
+    //   'point:',
+    //   point.x,
+    //   point.y,
+    //   '\nw:',
+    //   w,
+    //   '\nh',
+    //   h,
+    //   '\ns',
+    //   s
+    // );
+
+    // Define polygon points
+    const points = [
+      { x: s / 2, y: 0 },
+      { x: s, y: -s / 2 },
+      { x: s / 2, y: -s },
+      { x: 0, y: -s / 2 },
+    ];
+
+    // Calculate the intersection point
+    const res = intersect.polygon(bounds, points, point);
+
+    return { x: res.x - 0.5, y: res.y - 0.5 }; // Adjusted result
+  };
 
   node.intersect = function (point) {
-    log.debug(
-      'APA12 Intersect called SPLIT\npoint:',
-      point,
-      '\nnode:\n',
-      node,
-      '\nres:',
-      intersect.polygon(node, points, point)
-    );
-    return intersect.polygon(node, points, point);
+    // @ts-ignore TODO fix this (KNSV)
+    return this.calcIntersect(node as Bounds, point);
   };
 
   return shapeSvg;