Use tokens from secrets.

This reverts commit 42a6eeeef7.

.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/cute-crews-shake.md

@@ -0,0 +1,5 @@
+---
+'mermaid': minor
+---
+
+feat: Added IpSepCoLa algorithm for layout

.cspell/code-terms.txt

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

.cspell/mermaid-terms.txt

@@ -12,6 +12,7 @@ gantt
 gitgraph
 gzipped
 handDrawn
+ipsepcola
 kanban
 marginx
 marginy

.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/e2e.yml

@@ -148,4 +148,4 @@ jobs:
           name: mermaid-codecov
           fail_ci_if_error: false
           verbose: true
-          token: 6845cc80-77ee-4e17-85a1-026cd95e0766
+          token: ${{ secrets.CODECOV_TOKEN }}

.github/workflows/test.yml

@@ -52,4 +52,4 @@ jobs:
           name: mermaid-codecov
           fail_ci_if_error: false
           verbose: true
-          token: 6845cc80-77ee-4e17-85a1-026cd95e0766
+          token: ${{ secrets.CODECOV_TOKEN }}

.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: |

cypress/integration/rendering/ipsepCola.spec.ts

@@ -0,0 +1,153 @@
+import { imgSnapshotTest } from '../../helpers/util.ts';
+
+describe('Flowchart IPSepCoLa', () => {
+  it('1-ipsepCola: should render a simple flowchart', () => {
+    imgSnapshotTest(
+      `---
+        config:
+          layout: ipsepCola
+    ---
+    flowchart
+        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]
+      `
+    );
+  });
+  it('2-ipsepCola: handle bidirectional edges', () => {
+    imgSnapshotTest(
+      `---
+        config:
+          layout: ipsepCola
+    ---
+    flowchart TD
+        subgraph D
+          A --> B
+          A --> B
+          B --> A
+          B --> A
+        end
+      `
+    );
+  });
+  it('3-ipsepCola: handle multiple self loops', () => {
+    imgSnapshotTest(
+      `---
+        config:
+          layout: ipsepCola
+    ---
+    flowchart
+        a --> a
+        a --> a
+        a --> a
+        a --> a
+      `
+    );
+  });
+  it('4-ipsepCola: handle state diagram example', () => {
+    imgSnapshotTest(
+      `---
+        config:
+          layout: ipsepCola
+    ---
+    stateDiagram-v2
+        [*] --> Still
+        Still --> [*]
+        Still --> Moving
+        Moving --> Still
+        Moving --> Crash
+        Crash --> [*]
+      `
+    );
+  });
+  it('5-ipsepCola: handle multiple subgraphs with edges between them', () => {
+    imgSnapshotTest(
+      `---
+        config:
+          layout: ipsepCola
+    ---
+    flowchart LR
+        c1-->a2
+        subgraph one
+        a1-->a2
+        end
+        subgraph two
+        b1-->b2
+        end
+        subgraph three
+        c1-->c2
+        end
+        one --> two
+        three --> two
+        two --> c2
+      `
+    );
+  });
+  it('6-ipsepCola: handle class diagram example', () => {
+    imgSnapshotTest(
+      `---
+        config:
+          layout: ipsepCola
+    ---
+    classDiagram
+        class AuthService {
+          +login(username: string, password: string): boolean
+          +logout(): void
+          +register(): void
+        }
+
+        class User {
+          -username: string
+          -password: string
+          -role: Role
+          +changePassword(): void
+        }
+
+        class Role {
+          -name: string
+          -permissions: string[]
+          +hasPermission(): boolean
+        }
+
+        AuthService --> User
+        User --> Role
+      `
+    );
+  });
+  it('7-ipsepCola: should render a decision flowchart', () => {
+    imgSnapshotTest(
+      `---
+        config:
+          layout: ipsepCola
+    ---
+      flowchart TD
+        Start([Start]) --> Prep[Preparation Step]
+        Prep --> Split{Ready to Process?}
+        Split -->|Yes| T1[Task A]
+        Split -->|Yes| T2[Task B]
+        T1 --> Merge
+        T2 --> Merge
+        Merge((Join Results)) --> Finalize[Finalize Process]
+        Finalize --> End([End])
+      `
+    );
+  });
+  it('8-ipsepCola: handle nested subgraphs', () => {
+    imgSnapshotTest(
+      `---
+        config:
+          layout: ipsepCola
+    ---
+    flowchart LR
+        subgraph  main
+          subgraph subcontainer
+            subcontainer-child
+          end
+           subcontainer-child--> subcontainer-sibling
+        end
+      `
+    );
+  });
+});

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/ipsepcola_sample.html

@@ -0,0 +1,601 @@
+<html>
+  <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <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"
+    />
+    <link
+      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
+      rel="stylesheet"
+    />
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&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=Kalam:wght@300;400;700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
+      rel="stylesheet"
+    />
+
+    <style>
+      body {
+        /* background: #333; */
+        font-family: 'Arial';
+      }
+
+      h1 {
+        color: grey;
+      }
+
+      .mermaid2 {
+        display: none;
+      }
+
+      svg {
+        border: 3px solid #300;
+        margin: 10px;
+      }
+
+      pre {
+        width: 100%;
+      }
+    </style>
+  </head>
+
+  <body>
+    <pre id="diagram4" class="mermaid">
+      flowchart
+          A --> B
+      subgraph hello
+          C --> D
+        end
+      </pre
+    >
+
+    <pre id="diagram4" class="mermaid">
+      flowchart
+      A --> B
+      A --> B
+      </pre
+    >
+    <pre id="diagram4" class="mermaid">
+        flowchart
+          A[hello] --> A
+        </pre
+    >
+
+    <pre id="diagram4" class="mermaid">
+        flowchart
+          subgraph C
+          c
+        end
+        A --> C
+        </pre
+    >
+    <pre id="diagram4" class="mermaid">
+        flowchart
+          subgraph C
+            c
+          end
+        A --> c
+        </pre
+    >
+
+    <pre id="diagram4" class="mermaid">
+      flowchart TD
+      subgraph D
+        A --> B
+        A --> B
+        B --> A
+        B --> A
+      end
+      </pre
+    >
+    <pre id="diagram4" class="mermaid">
+flowchart
+subgraph B2
+A --> B --> C
+B --> D
+end
+
+B2 --> X
+</pre
+    >
+    <pre id="diagram4" class="mermaid">
+      stateDiagram-v2
+      [*] --> Still
+      Still --> [*]
+      Still --> Moving
+      Moving --> Still
+      Moving --> Crash
+      Crash --> [*]
+      </pre
+    >
+
+    <pre id="diagram4" class="mermaid">
+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()
+    }
+      </pre
+    >
+    <pre id="diagram4" class="mermaid">
+flowchart TD
+        P1
+        P1 -->P1.5
+        subgraph P1.5
+          P2
+          P2.5(( A ))
+          P3
+        end
+        P2 --> P4
+        P3 --> P6
+        P1.5 --> P5
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      %% Length of edges
+flowchart TD
+      L1 --- L2
+      L2 --- C
+      M1 ---> C
+      R1 .-> R2
+      R2 <.-> C
+      C -->|Label 1| E1
+      C <-- Label 2 ---> E2
+      C ----> E3
+      C <-...-> E4
+      C ======> E5
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      %% Stadium shape
+flowchart TD
+      A([stadium shape test])
+      A -->|Get money| B([Go shopping])
+      B --> C([Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?])
+      C -->|One| D([Laptop])
+      C -->|Two| E([iPhone])
+      C -->|Three| F([Car<br/>wroom wroom])
+      click A "index.html#link-clicked" "link test"
+      click B testClick "click test"
+      classDef someclass fill:#f96;
+      class A someclass;
+      class C someclass;
+    </pre>
+
+    <pre id="diagram4" class="mermaid">
+      %% should render escaped without html labels
+flowchart TD
+        a["<strong>Haiya</strong>"]---->b
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      %% nested subgraphs in reverse order
+flowchart LR
+        a -->b
+        subgraph A
+        B
+        end
+        subgraph B
+        b
+        end
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      %% nested subgraphs in several levels
+flowchart LR
+    b-->B
+    a-->c
+    subgraph O
+      A
+    end
+    subgraph B
+      c
+    end
+    subgraph A
+        a
+        b
+        B
+    end
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      %% nested subgraphs with edges in and out
+flowchart LR
+  internet
+  nat
+  routeur
+  lb1
+  lb2
+  compute1
+  compute2
+  subgraph project
+  routeur
+  nat
+    subgraph subnet1
+      compute1
+      lb1
+    end
+    subgraph subnet2
+      compute2
+      lb2
+    end
+  end
+  internet --> routeur
+  routeur --> subnet1 & subnet2
+  subnet1 & subnet2 --> nat --> internet
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      %% nested subgraphs with outgoing links
+flowchart LR
+  subgraph  main
+    subgraph subcontainer
+      subcontainer-child
+    end
+     subcontainer-child--> subcontainer-sibling
+  end
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      %% nested subgraphs with ingoing links
+flowchart LR
+subgraph one[One]
+    subgraph sub_one[Sub One]
+        _sub_one
+    end
+    subgraph sub_two[Sub Two]
+        _sub_two
+    end
+    _one
+end
+
+%% here, either the first or the second one
+sub_one --> sub_two
+_one --> b
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      %% nested subgraphs with outgoing links 3
+flowchart LR
+  subgraph container_Beta
+    process_C-->Process_D
+  end
+  subgraph container_Alpha
+    process_A-->process_B
+    process_A-->|messages|process_C
+    end
+    process_B-->|via_AWSBatch|container_Beta
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      %% nested subgraphs with outgoing links 4
+flowchart LR
+subgraph A
+a -->b
+end
+subgraph B
+b
+end
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      %% nested subgraphs with outgoing links 2
+flowchart LR
+    c1-->a2
+    subgraph one
+    a1-->a2
+    end
+    subgraph two
+    b1-->b2
+    end
+    subgraph three
+    c1-->c2
+    end
+    one --> two
+    three --> two
+    two --> c2
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      %% nested subgraphs with outgoing links 5
+flowchart LR
+  subgraph container_Beta
+    process_C-->Process_D
+  end
+  subgraph container_Alpha
+    process_A-->process_B
+    process_B-->|via_AWSBatch|container_Beta
+    process_A-->|messages|process_C
+  end
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      %% More subgraphs
+      flowchart LR
+    subgraph two
+    b1
+    end
+    subgraph three
+    c2
+    end
+
+    three --> two
+    two --> c2
+    note[There are two links in this diagram]
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      %% nested subgraphs with outgoing links 5
+flowchart LR
+      A[red text] -->|default style| B(blue text)
+      C([red text]) -->|default style| D[[blue text]]
+      E[(red text)] -->|default style| F((blue text))
+      G>red text] -->|default style| H{blue text}
+      I{{red text}} -->|default style| J[/blue text/]
+      K[\\ red text\\] -->|default style| L[/blue text\\]
+      M[\\ red text/] -->|default style| N[blue text];
+      O(((red text))) -->|default style| P(((blue text)));
+      linkStyle default color:Sienna;
+      style A stroke:#ff0000,fill:#ffcccc,color:#ff0000;
+      style B stroke:#0000ff,fill:#ccccff,color:#0000ff;
+      style C stroke:#ff0000,fill:#ffcccc,color:#ff0000;
+      style D stroke:#0000ff,fill:#ccccff,color:#0000ff;
+      style E stroke:#ff0000,fill:#ffcccc,color:#ff0000;
+      style F stroke:#0000ff,fill:#ccccff,color:#0000ff;
+      style G stroke:#ff0000,fill:#ffcccc,color:#ff0000;
+      style H stroke:#0000ff,fill:#ccccff,color:#0000ff;
+      style I stroke:#ff0000,fill:#ffcccc,color:#ff0000;
+      style J stroke:#0000ff,fill:#ccccff,color:#0000ff;
+      style K stroke:#ff0000,fill:#ffcccc,color:#ff0000;
+      style L stroke:#0000ff,fill:#ccccff,color:#0000ff;
+      style M stroke:#ff0000,fill:#ffcccc,color:#ff0000;
+      style N stroke:#0000ff,fill:#ccccff,color:#0000ff;
+      style O stroke:#ff0000,fill:#ffcccc,color:#ff0000;
+      style P stroke:#0000ff,fill:#ccccff,color:#0000ff;
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      %% labels on edges in a cluster
+flowchart RL
+    subgraph one
+      a1 -- I am a long label --> a2
+      a1 -- Another long label --> a2
+    end
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      %% labels on edges in a cluster
+flowchart RL
+    subgraph one
+      a1[Iam a node with a super long label] -- I am a long label --> a2[I am another node with a mega long label]
+      a1 -- Another long label --> a2
+      a3 --> a1 & a2 & a3 & a4
+      a1 --> a4
+    end
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      %% labels on edges in a cluster
+flowchart RL
+    subgraph one
+      a1[Iam a node with a super long label]
+      a2[I am another node with a mega long label]
+      a3[I am a node with a super long label]
+      a4[I am another node with a mega long label]
+      a1 -- Another long label --> a2
+      a3 --> a1 & a2 & a3 & a4
+      a1 --> a4
+    end
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      %% labels on edges in a cluster
+flowchart RL
+      a1[I am a node with a super long label. I am a node with a super long label. I am a node with a super long label. I am a node with a super long label. I am a node with a super long label. ]
+      a2[I am another node with a mega long label]
+      a3[I am a node with a super long label]
+      a4[I am another node with a mega long label]
+      a1 & a2 & a3 & a4 -->  a5 & a6 & a7 & a8 & a9 & a10
+
+    </pre>
+    <pre id="diagram4" class="mermaid">
+         flowchart
+        subgraph Z
+        subgraph X
+        a --> b
+        end
+        subgraph Y
+        c --> d
+        end
+        end
+        Y --> X
+        X --> P
+        P --> Y
+    
+        </pre
+    >
+    <pre id="diagram4" class="mermaid">
+            flowchart
+            
+            a --> b
+            b --> c
+            b --> d
+            c --> a
+            
+                    </pre
+    >
+
+    <pre id="diagram3" class="mermaid">
+flowchart TD
+  Start([Start]) --> Prep[Preparation Step]
+  Prep --> Split{Ready to Process?}
+  Split -->|Yes| T1[Task A]
+  Split -->|Yes| T2[Task B]
+  T1 --> Merge
+  T2 --> Merge
+  Merge((Join Results)) --> Finalize[Finalize Process]
+  Finalize --> End([End])
+</pre
+    >
+    <pre id="diagram4" class="mermaid">
+flowchart TD
+  A[Start Build] --> B[Compile Source]
+  B --> C[Test Suite]
+  C --> D{Tests Passed?}
+  D -->|No| E[Notify Developer]
+  E --> A
+  D -->|Yes| F[Build Docker Image]
+
+  subgraph Deploy Pipeline
+    F --> G[Deploy to Staging]
+    G --> H[Run Integration Tests]
+    H --> I{Tests Passed?}
+    I -->|No| J[Rollback & Alert]
+    I -->|Yes| K[Deploy to Production]
+  end
+
+  K --> L([Success])
+</pre
+    >
+
+    <pre class="mermaid">
+classDiagram
+class Controller {
+  +handleRequest(): void
+}
+
+class View {
+  +render(): void
+}
+
+class Model {
+  +getData(): any
+  +setData(data: any): void
+}
+
+Controller --> Model
+Controller --> View
+Model --> View : notifyChange()
+</pre
+    >
+
+    <pre class="mermaid">
+classDiagram
+class AuthService {
+  +login(username: string, password: string): boolean
+  +logout(): void
+  +register(): void
+}
+
+class User {
+  -username: string
+  -password: string
+  -role: Role
+  +changePassword(): void
+}
+
+class Role {
+  -name: string
+  -permissions: string[]
+  +hasPermission(): boolean
+}
+
+AuthService --> User
+User --> Role
+</pre
+    >
+
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      import layouts from './mermaid-layout-elk.esm.mjs';
+
+      const staticBellIconPack = {
+        prefix: 'fa6-regular',
+        icons: {
+          bell: {
+            body: '<path fill="currentColor" d="M224 0c-17.7 0-32 14.3-32 32v19.2C119 66 64 130.6 64 208v25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416h400c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6c-28.3-35.5-43.8-79.6-43.8-125V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32m0 96c61.9 0 112 50.1 112 112v25.4c0 47.9 13.9 94.6 39.7 134.6H72.3c25.8-40 39.7-86.7 39.7-134.6V208c0-61.9 50.1-112 112-112m64 352H160c0 17 6.7 33.3 18.7 45.3S207 512 224 512s33.3-6.7 45.3-18.7S288 465 288 448"/>',
+            width: 448,
+          },
+        },
+        width: 512,
+        height: 512,
+      };
+
+      mermaid.registerIconPacks([
+        {
+          name: 'logos',
+          loader: () =>
+            fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()),
+        },
+        {
+          name: 'fa',
+          loader: () => staticBellIconPack,
+        },
+      ]);
+      mermaid.registerLayoutLoaders(layouts);
+      mermaid.parseError = function (err, hash) {
+        console.error('Mermaid error: ', err);
+      };
+      window.callback = function () {
+        alert('A callback was triggered');
+      };
+      function callback() {
+        alert('It worked');
+      }
+      await mermaid.initialize({
+        theme: 'redux-dark',
+        // theme: 'default',
+        // theme: 'forest',
+        handDrawnSeed: 12,
+        look: 'classic  ',
+        // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
+        // layout: 'dagre',
+        layout: 'ipsepCola',
+        // layout: 'elk',
+        // layout: 'sugiyama',
+        // htmlLabels: false,
+        flowchart: { titleTopMargin: 10 },
+
+        // fontFamily: 'Caveat',
+        // fontFamily: 'Kalam',
+        // fontFamily: 'courier',
+        fontFamily: 'arial',
+        sequence: {
+          actorFontFamily: 'courier',
+          noteFontFamily: 'courier',
+          messageFontFamily: 'courier',
+        },
+        kanban: {
+          htmlLabels: false,
+        },
+        fontSize: 12,
+        logLevel: 0,
+        securityLevel: 'loose',
+        callback,
+      });
+
+      mermaid.parseError = function (err, hash) {
+        console.error('In parse error:');
+        console.error(err);
+      };
+    </script>
+  </body>
+</html>

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,63 +106,19 @@
 
   <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
-
-classDef class1   fill:red,color:blue,stroke:#FFD600;
-
-
-</pre
-    >
-    <pre id="diagram4" class="mermaid2">
----
-config:
-  treemap:
-    valueFormat: '$0,0'
----
-treemap
-"Budget"
-    "Operations"
-        "Salaries": 7000
-        "Equipment": 2000
-        "Supplies": 1000
-    "Marketing"
-        "Advertising": 4000
-        "Events": 1000
-
-</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">
+    <pre id="diagram4" class="mermaid">
       flowchart
         D(("for D"))
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
       flowchart LR
         A e1@==> B
         e1@{ animate: true}
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 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
@@ -507,7 +438,7 @@ kanban
         alert('It worked');
       }
       await mermaid.initialize({
-        // theme: 'forest',
+        // theme: 'base',
         // theme: 'default',
         // theme: 'forest',
         // handDrawnSeed: 12,
@@ -518,7 +449,11 @@ kanban
         // 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,219 +2,215 @@
   "durations": [
     {
       "spec": "cypress/integration/other/configuration.spec.js",
-      "duration": 5659
+      "duration": 6130
     },
     {
       "spec": "cypress/integration/other/external-diagrams.spec.js",
-      "duration": 2015
+      "duration": 1974
     },
     {
       "spec": "cypress/integration/other/ghsa.spec.js",
-      "duration": 3195
+      "duration": 3308
     },
     {
       "spec": "cypress/integration/other/iife.spec.js",
-      "duration": 1976
+      "duration": 1877
     },
     {
       "spec": "cypress/integration/other/interaction.spec.js",
-      "duration": 11149
+      "duration": 10902
     },
     {
       "spec": "cypress/integration/other/rerender.spec.js",
-      "duration": 1910
+      "duration": 1836
     },
     {
       "spec": "cypress/integration/other/xss.spec.js",
-      "duration": 26998
+      "duration": 26467
     },
     {
       "spec": "cypress/integration/rendering/appli.spec.js",
-      "duration": 3176
+      "duration": 3129
     },
     {
       "spec": "cypress/integration/rendering/architecture.spec.ts",
-      "duration": 110
+      "duration": 104
     },
     {
       "spec": "cypress/integration/rendering/block.spec.js",
-      "duration": 16265
+      "duration": 16230
     },
     {
       "spec": "cypress/integration/rendering/c4.spec.js",
-      "duration": 5431
+      "duration": 5231
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-elk-v3.spec.js",
-      "duration": 38025
+      "duration": 38113
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-handDrawn-v3.spec.js",
-      "duration": 36179
+      "duration": 36423
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-v2.spec.js",
-      "duration": 22386
+      "duration": 22509
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-v3.spec.js",
-      "duration": 35378
+      "duration": 34933
     },
     {
       "spec": "cypress/integration/rendering/classDiagram.spec.js",
-      "duration": 14967
+      "duration": 14681
     },
     {
       "spec": "cypress/integration/rendering/conf-and-directives.spec.js",
-      "duration": 9140
+      "duration": 8877
     },
     {
       "spec": "cypress/integration/rendering/current.spec.js",
-      "duration": 2652
+      "duration": 2517
     },
     {
       "spec": "cypress/integration/rendering/erDiagram-unified.spec.js",
-      "duration": 82257
+      "duration": 81226
     },
     {
       "spec": "cypress/integration/rendering/erDiagram.spec.js",
-      "duration": 14138
+      "duration": 14211
     },
     {
       "spec": "cypress/integration/rendering/errorDiagram.spec.js",
-      "duration": 3718
+      "duration": 3355
     },
     {
       "spec": "cypress/integration/rendering/flowchart-elk.spec.js",
-      "duration": 39683
+      "duration": 38857
     },
     {
       "spec": "cypress/integration/rendering/flowchart-handDrawn.spec.js",
-      "duration": 28676
+      "duration": 28570
     },
     {
       "spec": "cypress/integration/rendering/flowchart-icon.spec.js",
-      "duration": 7080
+      "duration": 6902
     },
     {
       "spec": "cypress/integration/rendering/flowchart-shape-alias.spec.ts",
-      "duration": 23175
+      "duration": 23075
     },
     {
       "spec": "cypress/integration/rendering/flowchart-v2.spec.js",
-      "duration": 40846
+      "duration": 40514
     },
     {
       "spec": "cypress/integration/rendering/flowchart.spec.js",
-      "duration": 29743
+      "duration": 28611
     },
     {
       "spec": "cypress/integration/rendering/gantt.spec.js",
-      "duration": 17352
+      "duration": 16605
     },
     {
       "spec": "cypress/integration/rendering/gitGraph.spec.js",
-      "duration": 48514
+      "duration": 47636
     },
     {
       "spec": "cypress/integration/rendering/iconShape.spec.ts",
-      "duration": 262422
+      "duration": 262219
     },
     {
       "spec": "cypress/integration/rendering/imageShape.spec.ts",
-      "duration": 54513
+      "duration": 54111
     },
     {
       "spec": "cypress/integration/rendering/info.spec.ts",
-      "duration": 3025
+      "duration": 3006
     },
     {
       "spec": "cypress/integration/rendering/journey.spec.js",
-      "duration": 6994
+      "duration": 6858
     },
     {
       "spec": "cypress/integration/rendering/kanban.spec.ts",
-      "duration": 7346
+      "duration": 7281
     },
     {
       "spec": "cypress/integration/rendering/katex.spec.js",
-      "duration": 3642
+      "duration": 3579
     },
     {
       "spec": "cypress/integration/rendering/marker_unique_id.spec.js",
-      "duration": 2464
+      "duration": 2448
     },
     {
       "spec": "cypress/integration/rendering/mindmap.spec.ts",
-      "duration": 10882
+      "duration": 10618
     },
     {
       "spec": "cypress/integration/rendering/newShapes.spec.ts",
-      "duration": 142092
+      "duration": 140874
     },
     {
       "spec": "cypress/integration/rendering/oldShapes.spec.ts",
-      "duration": 109340
+      "duration": 108015
     },
     {
       "spec": "cypress/integration/rendering/packet.spec.ts",
-      "duration": 4167
+      "duration": 4241
     },
     {
       "spec": "cypress/integration/rendering/pie.spec.ts",
-      "duration": 5736
+      "duration": 5645
     },
     {
       "spec": "cypress/integration/rendering/quadrantChart.spec.js",
-      "duration": 8628
+      "duration": 8524
     },
     {
       "spec": "cypress/integration/rendering/radar.spec.js",
-      "duration": 5311
+      "duration": 5203
     },
     {
       "spec": "cypress/integration/rendering/requirement.spec.js",
-      "duration": 2619
+      "duration": 2635
     },
     {
       "spec": "cypress/integration/rendering/requirementDiagram-unified.spec.js",
-      "duration": 50640
+      "duration": 50512
     },
     {
       "spec": "cypress/integration/rendering/sankey.spec.ts",
-      "duration": 6735
+      "duration": 6692
     },
     {
       "spec": "cypress/integration/rendering/sequencediagram.spec.js",
-      "duration": 34777
+      "duration": 34559
     },
     {
       "spec": "cypress/integration/rendering/stateDiagram-v2.spec.js",
-      "duration": 24440
+      "duration": 24421
     },
     {
       "spec": "cypress/integration/rendering/stateDiagram.spec.js",
-      "duration": 15476
+      "duration": 15316
     },
     {
       "spec": "cypress/integration/rendering/theme.spec.js",
-      "duration": 27932
+      "duration": 28240
     },
     {
       "spec": "cypress/integration/rendering/timeline.spec.ts",
-      "duration": 8162
-    },
-    {
-      "spec": "cypress/integration/rendering/treemap.spec.ts",
-      "duration": 11763
+      "duration": 6808
     },
     {
       "spec": "cypress/integration/rendering/xyChart.spec.js",
-      "duration": 19759
+      "duration": 19359
     },
     {
       "spec": "cypress/integration/rendering/zenuml.spec.js",
-      "duration": 3316
+      "duration": 3164
     }
   ]
 }

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/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/LayoutData.md

@@ -10,7 +10,7 @@
 
 # Interface: LayoutData
 
-Defined in: [packages/mermaid/src/rendering-util/types.ts:145](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L145)
+Defined in: [packages/mermaid/src/rendering-util/types.ts:159](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L159)
 
 ## Indexable
 
@@ -22,7 +22,7 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:145](https://github.co
 
 > **config**: [`MermaidConfig`](MermaidConfig.md)
 
-Defined in: [packages/mermaid/src/rendering-util/types.ts:148](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L148)
+Defined in: [packages/mermaid/src/rendering-util/types.ts:162](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L162)
 
 ---
 
@@ -30,7 +30,7 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:148](https://github.co
 
 > **edges**: `Edge`\[]
 
-Defined in: [packages/mermaid/src/rendering-util/types.ts:147](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L147)
+Defined in: [packages/mermaid/src/rendering-util/types.ts:161](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L161)
 
 ---
 
@@ -38,4 +38,4 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:147](https://github.co
 
 > **nodes**: `Node`\[]
 
-Defined in: [packages/mermaid/src/rendering-util/types.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L146)
+Defined in: [packages/mermaid/src/rendering-util/types.ts:160](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L160)

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/layouts/development.md

@@ -0,0 +1,177 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/layouts/development.md](../../packages/mermaid/src/docs/layouts/development.md).
+
+# 🛠️ How to Create a New Layout Algorithm in Mermaid
+
+Mermaid supports pluggable layout engines, and contributors can add custom layout algorithms to support specialized rendering needs such as clustered layouts, nested structures, or domain-specific visualizations.
+
+This guide outlines the steps required to **create and integrate a new layout algorithm** into the Mermaid codebase.
+
+---
+
+## 📦 Prerequisites
+
+Before starting, ensure the following:
+
+- You have [Node.js](https://nodejs.org/) installed.
+- You have [pnpm](https://pnpm.io/) installed globally:
+  ```bash
+  npm install -g pnpm
+  ```
+
+---
+
+## 🔄 Step-by-Step Integration
+
+### 1. Clone the Mermaid Repository
+
+```bash
+git clone https://github.com/mermaid-js/mermaid.git
+cd mermaid
+```
+
+### 2. Install Dependencies
+
+Mermaid uses `pnpm` for dependency management:
+
+```bash
+pnpm i
+```
+
+### 3. Start the Development Server
+
+This will spin up a local dev environment with hot reload:
+
+```bash
+pnpm dev
+```
+
+---
+
+## 🧠 Implementing Your Custom Layout Algorithm
+
+### 4. Create Your Layout Folder
+
+Navigate to the relevant source directory and create a folder for your new algorithm:
+
+```bash
+cd packages/mermaid/src/layout
+mkdir myCustomLayout
+touch myCustomLayout/index.ts
+```
+
+> 📁 You can organize supporting files, utils, and types inside this folder.
+
+### 5. Register the Layout Algorithm
+
+Open the file:
+
+```
+packages/mermaid/src/rendering-util/render.ts
+```
+
+Inside the function `registerDefaultLayoutLoaders`, find the `layoutLoaders` array. Add your layout here:
+
+```ts
+registerDefaultLayoutLoaders([
+  ...,
+  {
+    id: 'myCustomLayout',
+    loader: () => import('../layout/myCustomLayout'),
+  },
+]);
+```
+
+This tells Mermaid how to load your layout dynamically by name (`id`).
+
+---
+
+## 🧪 Testing Your Algorithm
+
+### 6. Create a Test File
+
+To visually test your layout implementation, create a test HTML file in:
+
+```
+cypress/platform/
+```
+
+Example:
+
+```bash
+touch cypress/platform/myCustomLayoutTest.html
+```
+
+Inside the file, load your diagram like this:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <script type="module">
+      import mermaid from '/dist/mermaid.esm.mjs';
+
+      mermaid.initialize({
+        startOnLoad: true,
+        theme: 'default',
+        layout: 'myCustomLayout', // Use your layout here
+      });
+    </script>
+  </head>
+  <body>
+    <div class="mermaid">graph TD A[Node A] --> B[Node B] B --> C[Node C]</div>
+  </body>
+</html>
+```
+
+### 7. Open in Browser
+
+After running `pnpm dev`, open your test in the browser:
+
+```
+http://localhost:9000/myCustomLayoutTest.html
+```
+
+You should see your diagram rendered using your new layout engine.
+
+---
+
+## 📝 Tips
+
+- Keep your layout algorithm modular and readable.
+- Use TypeScript types and helper functions for better structure.
+- Add comments and constraints where necessary.
+- If applicable, create a unit test and add a visual test for Cypress.
+
+---
+
+## 📚 Example File Structure
+
+```
+packages/
+└── mermaid/
+    └── src/
+        └── layout/
+            └── myCustomLayout/
+                ├── index.ts
+                ├── utils.ts
+                └── types.ts
+```
+
+---
+
+## ✅ Final Checklist
+
+- [ ] All dependencies installed via `pnpm i`
+- [ ] Layout folder and files created under `src/layout/`
+- [ ] Entry registered in `registerDefaultLayoutLoaders`
+- [ ] HTML test file added under `cypress/platform/`
+- [ ] Diagram renders as expected at `localhost:9000`
+- [ ] Code is linted and documented
+
+---
+
+> 💡 You’re now ready to build advanced layout algorithms and contribute to Mermaid's growing visualization capabilities!

docs/layouts/introduction.md

@@ -0,0 +1,138 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/layouts/introduction.md](../../packages/mermaid/src/docs/layouts/introduction.md).
+
+# 📊 Layout Algorithms in Mermaid
+
+Mermaid is a popular JavaScript-based diagramming tool that supports auto-layout for graphs using pluggable layout engines. Layout algorithms play a critical role in rendering nodes and edges in a clean, readable, and meaningful way. Mermaid currently uses engines like **Dagre** and **ELK**, and will soon introduce a powerful new layout engine: **IPSep-CoLa**.
+
+---
+
+## 🔹 Dagre Layout
+
+**Dagre** is a layout engine inspired by the **Sugiyama algorithm**, optimized for directed acyclic graphs (DAGs). It arranges nodes in layers and computes edge routing to minimize crossings and improve readability.
+
+### Key Features:
+
+- **Layered (Sugiyama-style) layout**: Ideal for top-down or left-to-right flow.
+- **Edge routing**: Attempts to reduce edge crossings and bends.
+- **Ranking**: Vertices are assigned ranks to group related elements into the same level.
+- **Lightweight and fast**: Suitable for small to medium-sized graphs.
+
+### Technical Overview:
+
+- Works in four stages:
+  1. **Cycle Removal**
+  2. **Layer Assignment**
+  3. **Node Ordering**
+  4. **Coordinate Assignment**
+- Outputs crisp layouts where edge direction is clear and logical.
+
+### Limitations:
+
+- No native support for **grouped or nested structures**.
+- Not ideal for graphs with **non-hierarchical** or **dense cyclic connections**.
+- Limited edge label placement capabilities.
+
+---
+
+## 🔸 ELK (Eclipse Layout Kernel)
+
+**ELK** is a modular, extensible layout framework developed as part of the Eclipse ecosystem. It supports a wide variety of graph types and layout strategies.
+
+### Key Features:
+
+- **Multiple layout styles**: Hierarchical, force-based, layered, orthogonal, etc.
+- **Support for ports**: Allows fine-grained edge anchoring on specific sides of nodes.
+- **Group and hierarchy awareness**: Ideal for nested and compartmentalized diagrams.
+- **Rich configuration**: Offers control over spacing, edge routing, direction, padding, and more.
+
+### Technical Overview:
+
+- Uses a **model-driven approach** with a well-defined intermediate representation (ELK Graph Model).
+- Different engines are plugged in depending on the chosen layout strategy.
+- Works well with large, complex, and deeply nested graphs.
+
+### Limitations:
+
+- Requires verbose configuration for best results.
+- Can be slower than Dagre for small or simple diagrams.
+- More complex to integrate and control dynamically.
+
+---
+
+## 🆕 IPSep-CoLa
+
+### 🌐 Introduction
+
+**IPSep-CoLa** stands for **Incremental Procedure for Separation Constraint Layout**, a next-generation layout algorithm tailored for **grouped, nested, and labeled graphs**. It is an enhancement over standard force-directed layouts, offering constraint enforcement and iterative refinement.
+
+It is particularly useful for diagrams where:
+
+- **Group integrity** is important (e.g., modules, clusters).
+- **Edge labels** need smart placement.
+- **Overlaps** must be prevented even under tight space constraints.
+
+---
+
+### ⚙️ How IPSep-CoLa Works
+
+#### 1. **Constraint-Based Force Simulation**:
+
+It builds on top of standard force-directed approaches (like CoLa), but adds **constraints** to influence the final positions of nodes:
+
+- **Separation constraints**: Minimum distances between nodes, edge labels, and groups.
+- **Containment constraints**: Child nodes must stay within the bounds of parent groups.
+- **Alignment constraints**: Nodes can be aligned in rows or columns if desired.
+
+#### 2. **Incremental Refinement**:
+
+Unlike one-pass algorithms, IPSep-CoLa works in **phases**:
+
+- Initial layout is produced using a base force simulation.
+- The layout is iteratively adjusted using **constraint solvers**.
+- Additional forces (spring, collision avoidance, containment) are incrementally added.
+
+#### 3. **Edge Label Handling**:
+
+One of the distinguishing features of IPSep-CoLa is its support for **multi-segment edge routing with mid-edge label positioning**, ensuring labels do not clutter or overlap.
+
+---
+
+### 📌 Use Cases
+
+IPSep-CoLa is ideal for:
+
+- **Hierarchical graphs** with complex nesting (e.g., software architecture, UML diagrams).
+- **Clustered views** (e.g., social network groupings).
+- **Diagrams with heavy labeling** where label placement affects readability.
+- **Diagrams with strict visual structure** needs — maintaining boundaries, margins, or padding.
+
+---
+
+## 🔍 Comparison Table
+
+| Feature                   | Dagre       | ELK                 | IPSep-CoLa (Upcoming)          |
+| ------------------------- | ----------- | ------------------- | ------------------------------ |
+| Layout Type               | Layered DAG | Modular (varied)    | Constraint-driven force layout |
+| Edge Labeling             | ⚠️ Basic    | ✅ Yes              | ✅ Smart Placement             |
+| Overlap Avoidance         | ⚠️ Partial  | ✅ Configurable     | ✅ Automatic                   |
+| Layout Performance        | ✅ Fast     | ⚠️ Medium           | ⚠️ Medium                      |
+| Customization Flexibility | ⚠️ Limited  | ✅ Extensive        | ✅ Moderate to High            |
+| Best For                  | Simple DAGs | Complex hierarchies | Grouped and labeled graphs     |
+
+---
+
+## 🧾 Summary
+
+Each layout engine in Mermaid serves a different purpose:
+
+- **Dagre** is best for fast, simple, and readable DAGs.
+- **ELK** is powerful for modular, layered, or port-based diagrams with a need for rich customization.
+- **IPSep-CoLa** will soon offer a flexible, constraint-respecting layout engine that excels at **visual clarity in grouped and complex diagrams**.
+
+The addition of IPSep-CoLa to Mermaid's layout stack represents a significant leap forward in layout control and quality — making it easier than ever to visualize rich, structured, and annotated graphs.
+
+---

docs/layouts/ipsepcola/implementation.md

@@ -0,0 +1,46 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/layouts/ipsepcola/implementation.md](../../../packages/mermaid/src/docs/layouts/ipsepcola/implementation.md).
+
+## IPSEPCOLA Documentation :
+
+IPSep-CoLa: An Incremental Procedure for Separation Constraint Layout of Graphs
+
+## How IPSep-CoLa built :
+
+IPSep-CoLa follows a multi-stage process to compute a well-structured layout:
+
+1. Layer Assignment :
+   The layer assignment algorithm organizes nodes into hierarchical layers to create a structured layout for directed graphs. It begins by detecting and temporarily removing cyclic edges using a depth-first search (DFS) approach, ensuring the graph becomes a Directed Acyclic Graph (DAG) for proper layering. The algorithm then performs a topological sort using Kahn's method, calculating node ranks (layers) based on in-degree counts. Each node's layer is determined by its position in the topological order, with parent nodes always appearing in higher layers than their children to maintain proper flow direction.
+
+   The implementation handles special cases like nested nodes by considering parent-child relationships when calculating layers. Nodes without dependencies are placed in layer 0, while subsequent nodes are assigned to layers one level below their nearest parent. The algorithm efficiently processes nodes using a queue system, decrementing in-degrees as it progresses, and ultimately stores the layer information directly in the node objects. Though cyclic edges are removed during processing, they could potentially be reintroduced after layer assignment if needed for visualization purposes.
+
+2. Node ordering:
+   After assigning layers to nodes, this step organizes nodes horizontally within each layer to minimize edge crossings and create a clean, readable layout. It uses the barycenter method—a technique that positions each node based on the average position of its connected neighbors (either incoming or outgoing). Nodes with no connections are pushed to the end of their layer.
+
+   The algorithm works in multiple passes (iterations) to refine the order: first adjusting nodes based on their incoming connections (from the layer above), then outgoing connections (to the layer below). Group nodes (like containers) are handled separately—their position is determined by averaging the positions of their children, ensuring they stay properly aligned with their contents. This approach keeps the layout structured while reducing visual clutter.
+
+3. AssignInitial positions to node :
+   This step calculates the starting (x, y) positions for each node based on its assigned layer (vertical level) and order (horizontal position). Nodes are spaced evenly—horizontally using nodeSpacing and vertically using layerHeight. For example, a node in layer 2 with order 3 will be placed at (3 \_ nodeSpacing, 2 \_ layerHeight). This creates a grid-like structure where nodes align neatly in rows (layers) and columns (orders).
+
+   The initial positioning is simple but crucial—it provides a structured starting point before more advanced adjustments (like reducing edge crossings or compacting the layout) are applied. Group nodes follow the same logic, ensuring they align with their children. This method ensures a readable, organized foundation for further refinement.
+
+4. Force-Directed Simulation with Constraints :
+
+   - Spring Forces: Attracts connected nodes to maintain desired edge lengths.
+   - Repulsion Forces: Pushes nodes apart to prevent overlaps.
+   - Group Constraints: Ensures child nodes stay near their parent groups.
+   - Cooling Factor: Gradually reduces movement to stabilize the layout.
+
+5. Incremental Refinement :
+
+   - Overlap Resolution: Iteratively adjusts node positions to eliminate overlaps.
+   - Edge Routing: Computes smooth paths for edges, including curved paths for parallel edges and self-loops.
+   - Group Boundary Adjustment: Dynamically resizes group containers to fit nested elements.
+
+6. Adjusting the Final Layout :
+   This step takes the calculated node positions and applies them to the visual elements of the graph. Nodes are placed at their assigned (x, y) coordinates—regular nodes are positioned directly, while group nodes (clusters) are rendered as containers that may include other nodes. Edges (connections between nodes) are drawn based on their start and end points, ensuring they follow the structured layout.
+
+   The adjustment phase bridges the mathematical layout with the actual rendering, updating the SVG or canvas elements to reflect the computed positions. This ensures that the graph is not only logically organized but also visually coherent, with proper spacing, alignment, and connections. The result is a clean, readable diagram ready for display.

docs/layouts/ipsepcola/overview.md

@@ -0,0 +1,186 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/layouts/ipsepcola/overview.md](../../../packages/mermaid/src/docs/layouts/ipsepcola/overview.md).
+
+## IPSEPCOLA Documentation :
+
+IPSep-CoLa: An Incremental Procedure for Separation Constraint Layout of Graphs
+
+## Introduction :
+
+IPSep-CoLa (Incremental Procedure for Separation Constraint Layout) is an advanced graph layout algorithm designed to handle complex diagrams with separation constraints, such as grouped nodes, edge labels, and hierarchical structures. Unlike traditional force-directed algorithms, IPSep-CoLa incrementally refines node positions while enforcing geometric constraints to prevent overlaps, maintain group cohesion, and optimize edge routing.
+
+The algorithm is particularly effective for visualizing nested and clustered graphs, where maintaining clear separation between elements is crucial. It combines techniques from force-directed layout, constraint satisfaction, and incremental refinement to produce readable and aesthetically pleasing diagrams.
+
+## How IPSep-CoLa Works :
+
+IPSep-CoLa follows a multi-stage process to compute a well-structured layout:
+
+1. Graph Preprocessing :
+   Cycle Removal: Detects and temporarily removes cyclic dependencies to enable proper layering.
+   Layer Assignment: Assigns nodes to hierarchical layers using topological sorting.
+   Node Ordering: Uses the barycenter heuristic to minimize edge crossings within layers.
+
+2. Force-Directed Simulation with Constraints :
+   Spring Forces: Attracts connected nodes to maintain desired edge lengths.
+   Repulsion Forces: Pushes nodes apart to prevent overlaps.
+   Group Constraints: Ensures child nodes stay near their parent groups.
+   Cooling Factor: Gradually reduces movement to stabilize the layout.
+
+3. Incremental Refinement :
+   Overlap Resolution: Iteratively adjusts node positions to eliminate overlaps.
+   Edge Routing: Computes smooth paths for edges, including curved paths for parallel edges and self-loops.
+   Group Boundary Adjustment: Dynamically resizes group containers to fit nested elements.
+
+## Key Features :
+
+1. Group-Aware Layout: Maintains separation between nested structures.
+2. Edge Label Placement: Uses edge labels as virtual nodes and automatically positions labels inside their parent groups.
+3. Stable Convergence: Uses cooling factors and incremental updates for smooth refinement.
+4. Support for Self-Loops & Parallel Edges: Avoids visual clutter with intelligent edge routing.
+
+## Use Cases :
+
+1. Hierarchical Diagrams (org charts, flowcharts, decision trees)
+2. Network Visualization (dependency graphs, data pipelines)
+3. Interactive Graph Editors (real-time layout adjustments)
+4. Clustered Data Visualization (UML diagrams, biological networks)
+
+## **Examples**
+
+### **Example 1**
+
+```
+---
+config:
+   layout: ipsepCola
+---
+
+flowchart TD
+CEO --> MKT["Marketing Head"]
+CEO --> ENG["Engineering Head"]
+ENG --> DEV["Developer"]
+ENG --> QA["QA Tester"]
+```
+
+### **Example 2**
+
+```
+---
+config:
+   layout: ipsepCola
+---
+
+flowchart TD
+  Start["Start"] --> Red{"Is it red?"}
+  Red -- Yes --> Round{"Is it round?"}
+  Red -- No --> NotApple["❌ Not an Apple"]
+  Round -- Yes --> Apple["✅ It's an Apple"]
+  Round -- No --> NotApple2["❌ Not an Apple"]
+```
+
+### **Example 3**
+
+```
+---
+config:
+   layout: ipsepCola
+---
+
+flowchart TD
+A[Module A] --> B[Module B]
+A --> C[Module C]
+B --> D[Module D]
+C --> D
+D --> E[Module E]
+```
+
+### **Example 4**
+
+```
+---
+config:
+   layout: ipsepCola
+---
+
+flowchart TD
+Source1["📦 Raw Data (CSV)"]
+Source2["🌐 API Data"]
+
+Source1 --> Clean["🧹 Clean & Format"]
+Source2 --> Clean
+
+Clean --> Transform["🔄 Transform Data"]
+Transform --> Load["📥 Load into Data Warehouse"]
+Load --> BI["📊 BI Dashboard"]
+```
+
+### **Example 5**
+
+```
+---
+config:
+   layout: ipsepCola
+---
+classDiagram
+  class Person {
+    -String name
+    -int age
+    +greet(): void
+  }
+
+  class Employee {
+    -int employeeId
+    +calculateSalary(): float
+  }
+
+  class Manager {
+    -String department
+    +assignTask(): void
+  }
+
+  Person <|-- Employee
+  Employee <|-- Manager
+```
+
+### **Example 6**
+
+```
+---
+config:
+   layout: ipsepCola
+---
+flowchart TD
+  Sunlight["☀️ Sunlight"] --> Leaf["🌿 Leaf"]
+  Leaf --> Glucose["🍬 Glucose"]
+  Leaf --> Oxygen["💨 Oxygen"]
+```
+
+### **Example 7**
+
+```
+---
+config:
+   layout: ipsepCola
+---
+flowchart TD
+  Internet["🌐 Internet"] --> Router["📡 Router"]
+  Router --> Server1["🖥️ Server A"]
+  Router --> Server2["🖥️ Server B"]
+  Router --> Laptop["💻 Laptop"]
+
+  %% New device joins
+  Router --> Mobile["📱 Mobile"]
+```
+
+## Limitations :
+
+1. Computational Cost: More iterations may be needed for large graphs (>1000 nodes).
+2. Parameter Tuning: Requires adjustments for different graph types.
+3. Non-Determinism: Small variations may occur between runs due to force simulation.
+
+## Conclusion :
+
+IPSep-CoLa provides a robust solution for constraint-based graph layout, particularly for structured and clustered diagrams. By combining incremental refinement with separation constraints, it achieves readable and well-organized visualizations. Future improvements could include GPU acceleration and adaptive parameter tuning for large-scale graphs.

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

@@ -37,7 +37,7 @@
     "e2e:coverage": "start-server-and-test dev:coverage http://localhost:9000/ cypress",
     "coverage:cypress:clean": "rimraf .nyc_output coverage/cypress",
     "coverage:merge": "tsx scripts/coverage.ts",
-    "coverage": "pnpm test:coverage --run && pnpm e2e:coverage && pnpm coverage:merge",
+    "coverage": "pnpm test:coverage --run && pnpm coverage:merge",
     "ci": "vitest run",
     "test": "pnpm lint && vitest run",
     "test:watch": "vitest --watch",
@@ -83,7 +83,7 @@
     "@vitest/spy": "^3.0.6",
     "@vitest/ui": "^3.0.6",
     "ajv": "^8.17.1",
-    "chokidar": "3.6.0",
+    "chokidar": "^4.0.3",
     "concurrently": "^9.1.2",
     "cors": "^2.8.5",
     "cpy-cli": "^5.0.0",

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",
@@ -105,7 +105,7 @@
     "@types/stylis": "^4.2.7",
     "@types/uuid": "^10.0.0",
     "ajv": "^8.17.1",
-    "chokidar": "3.6.0",
+    "chokidar": "^4.0.3",
     "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/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/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

@@ -141,6 +141,7 @@ function sidebarAll() {
       ],
     },
     ...sidebarSyntax(),
+    ...sidebarAlgorithms(),
     ...sidebarEcosystem(),
     ...sidebarConfig(),
     ...sidebarCommunity(),
@@ -179,7 +180,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' },
       ],
     },
@@ -223,6 +223,27 @@ function sidebarEcosystem() {
   ];
 }
 
+function sidebarAlgorithms() {
+  return [
+    {
+      text: '🧠 Diagram Algorithms',
+      collapsed: false,
+      items: [
+        { text: 'Introduction', link: '/layouts/introduction' },
+        { text: 'Layout Algorithm Development', link: '/layouts/development' },
+        {
+          text: 'IPSep-Cola',
+          collapsed: false,
+          items: [
+            { text: 'Overview', link: '/layouts/ipsepcola/overview' },
+            { text: 'Implementation', link: '/layouts/ipsepcola/implementation' },
+          ],
+        },
+      ],
+    },
+  ];
+}
+
 function sidebarCommunity() {
   return [
     {

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/layouts/development.md

@@ -0,0 +1,171 @@
+# 🛠️ How to Create a New Layout Algorithm in Mermaid
+
+Mermaid supports pluggable layout engines, and contributors can add custom layout algorithms to support specialized rendering needs such as clustered layouts, nested structures, or domain-specific visualizations.
+
+This guide outlines the steps required to **create and integrate a new layout algorithm** into the Mermaid codebase.
+
+---
+
+## 📦 Prerequisites
+
+Before starting, ensure the following:
+
+- You have [Node.js](https://nodejs.org/) installed.
+- You have [pnpm](https://pnpm.io/) installed globally:
+  ```bash
+  npm install -g pnpm
+  ```
+
+---
+
+## 🔄 Step-by-Step Integration
+
+### 1. Clone the Mermaid Repository
+
+```bash
+git clone https://github.com/mermaid-js/mermaid.git
+cd mermaid
+```
+
+### 2. Install Dependencies
+
+Mermaid uses `pnpm` for dependency management:
+
+```bash
+pnpm i
+```
+
+### 3. Start the Development Server
+
+This will spin up a local dev environment with hot reload:
+
+```bash
+pnpm dev
+```
+
+---
+
+## 🧠 Implementing Your Custom Layout Algorithm
+
+### 4. Create Your Layout Folder
+
+Navigate to the relevant source directory and create a folder for your new algorithm:
+
+```bash
+cd packages/mermaid/src/layout
+mkdir myCustomLayout
+touch myCustomLayout/index.ts
+```
+
+> 📁 You can organize supporting files, utils, and types inside this folder.
+
+### 5. Register the Layout Algorithm
+
+Open the file:
+
+```
+packages/mermaid/src/rendering-util/render.ts
+```
+
+Inside the function `registerDefaultLayoutLoaders`, find the `layoutLoaders` array. Add your layout here:
+
+```ts
+registerDefaultLayoutLoaders([
+  ...,
+  {
+    id: 'myCustomLayout',
+    loader: () => import('../layout/myCustomLayout'),
+  },
+]);
+```
+
+This tells Mermaid how to load your layout dynamically by name (`id`).
+
+---
+
+## 🧪 Testing Your Algorithm
+
+### 6. Create a Test File
+
+To visually test your layout implementation, create a test HTML file in:
+
+```
+cypress/platform/
+```
+
+Example:
+
+```bash
+touch cypress/platform/myCustomLayoutTest.html
+```
+
+Inside the file, load your diagram like this:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <script type="module">
+      import mermaid from '/dist/mermaid.esm.mjs';
+
+      mermaid.initialize({
+        startOnLoad: true,
+        theme: 'default',
+        layout: 'myCustomLayout', // Use your layout here
+      });
+    </script>
+  </head>
+  <body>
+    <div class="mermaid">graph TD A[Node A] --> B[Node B] B --> C[Node C]</div>
+  </body>
+</html>
+```
+
+### 7. Open in Browser
+
+After running `pnpm dev`, open your test in the browser:
+
+```
+http://localhost:9000/myCustomLayoutTest.html
+```
+
+You should see your diagram rendered using your new layout engine.
+
+---
+
+## 📝 Tips
+
+- Keep your layout algorithm modular and readable.
+- Use TypeScript types and helper functions for better structure.
+- Add comments and constraints where necessary.
+- If applicable, create a unit test and add a visual test for Cypress.
+
+---
+
+## 📚 Example File Structure
+
+```
+packages/
+└── mermaid/
+    └── src/
+        └── layout/
+            └── myCustomLayout/
+                ├── index.ts
+                ├── utils.ts
+                └── types.ts
+```
+
+---
+
+## ✅ Final Checklist
+
+- [ ] All dependencies installed via `pnpm i`
+- [ ] Layout folder and files created under `src/layout/`
+- [ ] Entry registered in `registerDefaultLayoutLoaders`
+- [ ] HTML test file added under `cypress/platform/`
+- [ ] Diagram renders as expected at `localhost:9000`
+- [ ] Code is linted and documented
+
+---
+
+> 💡 You’re now ready to build advanced layout algorithms and contribute to Mermaid's growing visualization capabilities!

packages/mermaid/src/docs/layouts/introduction.md

@@ -0,0 +1,132 @@
+# 📊 Layout Algorithms in Mermaid
+
+Mermaid is a popular JavaScript-based diagramming tool that supports auto-layout for graphs using pluggable layout engines. Layout algorithms play a critical role in rendering nodes and edges in a clean, readable, and meaningful way. Mermaid currently uses engines like **Dagre** and **ELK**, and will soon introduce a powerful new layout engine: **IPSep-CoLa**.
+
+---
+
+## 🔹 Dagre Layout
+
+**Dagre** is a layout engine inspired by the **Sugiyama algorithm**, optimized for directed acyclic graphs (DAGs). It arranges nodes in layers and computes edge routing to minimize crossings and improve readability.
+
+### Key Features:
+
+- **Layered (Sugiyama-style) layout**: Ideal for top-down or left-to-right flow.
+- **Edge routing**: Attempts to reduce edge crossings and bends.
+- **Ranking**: Vertices are assigned ranks to group related elements into the same level.
+- **Lightweight and fast**: Suitable for small to medium-sized graphs.
+
+### Technical Overview:
+
+- Works in four stages:
+  1. **Cycle Removal**
+  2. **Layer Assignment**
+  3. **Node Ordering**
+  4. **Coordinate Assignment**
+- Outputs crisp layouts where edge direction is clear and logical.
+
+### Limitations:
+
+- No native support for **grouped or nested structures**.
+- Not ideal for graphs with **non-hierarchical** or **dense cyclic connections**.
+- Limited edge label placement capabilities.
+
+---
+
+## 🔸 ELK (Eclipse Layout Kernel)
+
+**ELK** is a modular, extensible layout framework developed as part of the Eclipse ecosystem. It supports a wide variety of graph types and layout strategies.
+
+### Key Features:
+
+- **Multiple layout styles**: Hierarchical, force-based, layered, orthogonal, etc.
+- **Support for ports**: Allows fine-grained edge anchoring on specific sides of nodes.
+- **Group and hierarchy awareness**: Ideal for nested and compartmentalized diagrams.
+- **Rich configuration**: Offers control over spacing, edge routing, direction, padding, and more.
+
+### Technical Overview:
+
+- Uses a **model-driven approach** with a well-defined intermediate representation (ELK Graph Model).
+- Different engines are plugged in depending on the chosen layout strategy.
+- Works well with large, complex, and deeply nested graphs.
+
+### Limitations:
+
+- Requires verbose configuration for best results.
+- Can be slower than Dagre for small or simple diagrams.
+- More complex to integrate and control dynamically.
+
+---
+
+## 🆕 IPSep-CoLa
+
+### 🌐 Introduction
+
+**IPSep-CoLa** stands for **Incremental Procedure for Separation Constraint Layout**, a next-generation layout algorithm tailored for **grouped, nested, and labeled graphs**. It is an enhancement over standard force-directed layouts, offering constraint enforcement and iterative refinement.
+
+It is particularly useful for diagrams where:
+
+- **Group integrity** is important (e.g., modules, clusters).
+- **Edge labels** need smart placement.
+- **Overlaps** must be prevented even under tight space constraints.
+
+---
+
+### ⚙️ How IPSep-CoLa Works
+
+#### 1. **Constraint-Based Force Simulation**:
+
+It builds on top of standard force-directed approaches (like CoLa), but adds **constraints** to influence the final positions of nodes:
+
+- **Separation constraints**: Minimum distances between nodes, edge labels, and groups.
+- **Containment constraints**: Child nodes must stay within the bounds of parent groups.
+- **Alignment constraints**: Nodes can be aligned in rows or columns if desired.
+
+#### 2. **Incremental Refinement**:
+
+Unlike one-pass algorithms, IPSep-CoLa works in **phases**:
+
+- Initial layout is produced using a base force simulation.
+- The layout is iteratively adjusted using **constraint solvers**.
+- Additional forces (spring, collision avoidance, containment) are incrementally added.
+
+#### 3. **Edge Label Handling**:
+
+One of the distinguishing features of IPSep-CoLa is its support for **multi-segment edge routing with mid-edge label positioning**, ensuring labels do not clutter or overlap.
+
+---
+
+### 📌 Use Cases
+
+IPSep-CoLa is ideal for:
+
+- **Hierarchical graphs** with complex nesting (e.g., software architecture, UML diagrams).
+- **Clustered views** (e.g., social network groupings).
+- **Diagrams with heavy labeling** where label placement affects readability.
+- **Diagrams with strict visual structure** needs — maintaining boundaries, margins, or padding.
+
+---
+
+## 🔍 Comparison Table
+
+| Feature                   | Dagre       | ELK                 | IPSep-CoLa (Upcoming)          |
+| ------------------------- | ----------- | ------------------- | ------------------------------ |
+| Layout Type               | Layered DAG | Modular (varied)    | Constraint-driven force layout |
+| Edge Labeling             | ⚠️ Basic    | ✅ Yes              | ✅ Smart Placement             |
+| Overlap Avoidance         | ⚠️ Partial  | ✅ Configurable     | ✅ Automatic                   |
+| Layout Performance        | ✅ Fast     | ⚠️ Medium           | ⚠️ Medium                      |
+| Customization Flexibility | ⚠️ Limited  | ✅ Extensive        | ✅ Moderate to High            |
+| Best For                  | Simple DAGs | Complex hierarchies | Grouped and labeled graphs     |
+
+---
+
+## 🧾 Summary
+
+Each layout engine in Mermaid serves a different purpose:
+
+- **Dagre** is best for fast, simple, and readable DAGs.
+- **ELK** is powerful for modular, layered, or port-based diagrams with a need for rich customization.
+- **IPSep-CoLa** will soon offer a flexible, constraint-respecting layout engine that excels at **visual clarity in grouped and complex diagrams**.
+
+The addition of IPSep-CoLa to Mermaid's layout stack represents a significant leap forward in layout control and quality — making it easier than ever to visualize rich, structured, and annotated graphs.
+
+---

packages/mermaid/src/docs/layouts/ipsepcola/implementation.md

@@ -0,0 +1,40 @@
+## IPSEPCOLA Documentation :
+
+IPSep-CoLa: An Incremental Procedure for Separation Constraint Layout of Graphs
+
+## How IPSep-CoLa built :
+
+IPSep-CoLa follows a multi-stage process to compute a well-structured layout:
+
+1. Layer Assignment :
+   The layer assignment algorithm organizes nodes into hierarchical layers to create a structured layout for directed graphs. It begins by detecting and temporarily removing cyclic edges using a depth-first search (DFS) approach, ensuring the graph becomes a Directed Acyclic Graph (DAG) for proper layering. The algorithm then performs a topological sort using Kahn's method, calculating node ranks (layers) based on in-degree counts. Each node's layer is determined by its position in the topological order, with parent nodes always appearing in higher layers than their children to maintain proper flow direction.
+
+   The implementation handles special cases like nested nodes by considering parent-child relationships when calculating layers. Nodes without dependencies are placed in layer 0, while subsequent nodes are assigned to layers one level below their nearest parent. The algorithm efficiently processes nodes using a queue system, decrementing in-degrees as it progresses, and ultimately stores the layer information directly in the node objects. Though cyclic edges are removed during processing, they could potentially be reintroduced after layer assignment if needed for visualization purposes.
+
+2. Node ordering:
+   After assigning layers to nodes, this step organizes nodes horizontally within each layer to minimize edge crossings and create a clean, readable layout. It uses the barycenter method—a technique that positions each node based on the average position of its connected neighbors (either incoming or outgoing). Nodes with no connections are pushed to the end of their layer.
+
+   The algorithm works in multiple passes (iterations) to refine the order: first adjusting nodes based on their incoming connections (from the layer above), then outgoing connections (to the layer below). Group nodes (like containers) are handled separately—their position is determined by averaging the positions of their children, ensuring they stay properly aligned with their contents. This approach keeps the layout structured while reducing visual clutter.
+
+3. AssignInitial positions to node :
+   This step calculates the starting (x, y) positions for each node based on its assigned layer (vertical level) and order (horizontal position). Nodes are spaced evenly—horizontally using nodeSpacing and vertically using layerHeight. For example, a node in layer 2 with order 3 will be placed at (3 _ nodeSpacing, 2 _ layerHeight). This creates a grid-like structure where nodes align neatly in rows (layers) and columns (orders).
+
+   The initial positioning is simple but crucial—it provides a structured starting point before more advanced adjustments (like reducing edge crossings or compacting the layout) are applied. Group nodes follow the same logic, ensuring they align with their children. This method ensures a readable, organized foundation for further refinement.
+
+4. Force-Directed Simulation with Constraints :
+
+   - Spring Forces: Attracts connected nodes to maintain desired edge lengths.
+   - Repulsion Forces: Pushes nodes apart to prevent overlaps.
+   - Group Constraints: Ensures child nodes stay near their parent groups.
+   - Cooling Factor: Gradually reduces movement to stabilize the layout.
+
+5. Incremental Refinement :
+
+   - Overlap Resolution: Iteratively adjusts node positions to eliminate overlaps.
+   - Edge Routing: Computes smooth paths for edges, including curved paths for parallel edges and self-loops.
+   - Group Boundary Adjustment: Dynamically resizes group containers to fit nested elements.
+
+6. Adjusting the Final Layout :
+   This step takes the calculated node positions and applies them to the visual elements of the graph. Nodes are placed at their assigned (x, y) coordinates—regular nodes are positioned directly, while group nodes (clusters) are rendered as containers that may include other nodes. Edges (connections between nodes) are drawn based on their start and end points, ensuring they follow the structured layout.
+
+   The adjustment phase bridges the mathematical layout with the actual rendering, updating the SVG or canvas elements to reflect the computed positions. This ensures that the graph is not only logically organized but also visually coherent, with proper spacing, alignment, and connections. The result is a clean, readable diagram ready for display.

packages/mermaid/src/docs/layouts/ipsepcola/overview.md

@@ -0,0 +1,180 @@
+## IPSEPCOLA Documentation :
+
+IPSep-CoLa: An Incremental Procedure for Separation Constraint Layout of Graphs
+
+## Introduction :
+
+IPSep-CoLa (Incremental Procedure for Separation Constraint Layout) is an advanced graph layout algorithm designed to handle complex diagrams with separation constraints, such as grouped nodes, edge labels, and hierarchical structures. Unlike traditional force-directed algorithms, IPSep-CoLa incrementally refines node positions while enforcing geometric constraints to prevent overlaps, maintain group cohesion, and optimize edge routing.
+
+The algorithm is particularly effective for visualizing nested and clustered graphs, where maintaining clear separation between elements is crucial. It combines techniques from force-directed layout, constraint satisfaction, and incremental refinement to produce readable and aesthetically pleasing diagrams.
+
+## How IPSep-CoLa Works :
+
+IPSep-CoLa follows a multi-stage process to compute a well-structured layout:
+
+1. Graph Preprocessing :
+   Cycle Removal: Detects and temporarily removes cyclic dependencies to enable proper layering.
+   Layer Assignment: Assigns nodes to hierarchical layers using topological sorting.
+   Node Ordering: Uses the barycenter heuristic to minimize edge crossings within layers.
+
+2. Force-Directed Simulation with Constraints :
+   Spring Forces: Attracts connected nodes to maintain desired edge lengths.
+   Repulsion Forces: Pushes nodes apart to prevent overlaps.
+   Group Constraints: Ensures child nodes stay near their parent groups.
+   Cooling Factor: Gradually reduces movement to stabilize the layout.
+
+3. Incremental Refinement :
+   Overlap Resolution: Iteratively adjusts node positions to eliminate overlaps.
+   Edge Routing: Computes smooth paths for edges, including curved paths for parallel edges and self-loops.
+   Group Boundary Adjustment: Dynamically resizes group containers to fit nested elements.
+
+## Key Features :
+
+1. Group-Aware Layout: Maintains separation between nested structures.
+2. Edge Label Placement: Uses edge labels as virtual nodes and automatically positions labels inside their parent groups.
+3. Stable Convergence: Uses cooling factors and incremental updates for smooth refinement.
+4. Support for Self-Loops & Parallel Edges: Avoids visual clutter with intelligent edge routing.
+
+## Use Cases :
+
+1. Hierarchical Diagrams (org charts, flowcharts, decision trees)
+2. Network Visualization (dependency graphs, data pipelines)
+3. Interactive Graph Editors (real-time layout adjustments)
+4. Clustered Data Visualization (UML diagrams, biological networks)
+
+## **Examples**
+
+### **Example 1**
+
+```
+---
+config:
+   layout: ipsepCola
+---
+
+flowchart TD
+CEO --> MKT["Marketing Head"]
+CEO --> ENG["Engineering Head"]
+ENG --> DEV["Developer"]
+ENG --> QA["QA Tester"]
+```
+
+### **Example 2**
+
+```
+---
+config:
+   layout: ipsepCola
+---
+
+flowchart TD
+  Start["Start"] --> Red{"Is it red?"}
+  Red -- Yes --> Round{"Is it round?"}
+  Red -- No --> NotApple["❌ Not an Apple"]
+  Round -- Yes --> Apple["✅ It's an Apple"]
+  Round -- No --> NotApple2["❌ Not an Apple"]
+```
+
+### **Example 3**
+
+```
+---
+config:
+   layout: ipsepCola
+---
+
+flowchart TD
+A[Module A] --> B[Module B]
+A --> C[Module C]
+B --> D[Module D]
+C --> D
+D --> E[Module E]
+```
+
+### **Example 4**
+
+```
+---
+config:
+   layout: ipsepCola
+---
+
+flowchart TD
+Source1["📦 Raw Data (CSV)"]
+Source2["🌐 API Data"]
+
+Source1 --> Clean["🧹 Clean & Format"]
+Source2 --> Clean
+
+Clean --> Transform["🔄 Transform Data"]
+Transform --> Load["📥 Load into Data Warehouse"]
+Load --> BI["📊 BI Dashboard"]
+```
+
+### **Example 5**
+
+```
+---
+config:
+   layout: ipsepCola
+---
+classDiagram
+  class Person {
+    -String name
+    -int age
+    +greet(): void
+  }
+
+  class Employee {
+    -int employeeId
+    +calculateSalary(): float
+  }
+
+  class Manager {
+    -String department
+    +assignTask(): void
+  }
+
+  Person <|-- Employee
+  Employee <|-- Manager
+```
+
+### **Example 6**
+
+```
+---
+config:
+   layout: ipsepCola
+---
+flowchart TD
+  Sunlight["☀️ Sunlight"] --> Leaf["🌿 Leaf"]
+  Leaf --> Glucose["🍬 Glucose"]
+  Leaf --> Oxygen["💨 Oxygen"]
+```
+
+### **Example 7**
+
+```
+---
+config:
+   layout: ipsepCola
+---
+flowchart TD
+  Internet["🌐 Internet"] --> Router["📡 Router"]
+  Router --> Server1["🖥️ Server A"]
+  Router --> Server2["🖥️ Server B"]
+  Router --> Laptop["💻 Laptop"]
+
+  %% New device joins
+  Router --> Mobile["📱 Mobile"]
+```
+
+## Limitations :
+
+1. Computational Cost: More iterations may be needed for large graphs (>1000 nodes).
+2. Parameter Tuning: Requires adjustments for different graph types.
+3. Non-Determinism: Small variations may occur between runs due to force simulation.
+
+## Conclusion :
+
+IPSep-CoLa provides a robust solution for constraint-based graph layout, particularly for structured and clustered diagrams. By combining incremental refinement with separation constraints, it achieves readable and well-organized visualizations. Future improvements could include GPU acceleration and adaptive parameter tuning for large-scale graphs.

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/rendering-util/createGraph.ts

@@ -0,0 +1,148 @@
+import type { Selection } from 'd3';
+import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
+import type { LayoutData, NonClusterNode } from './types.js';
+import { getConfig } from '../diagram-api/diagramAPI.js';
+import { insertNode } from './rendering-elements/nodes.js';
+
+type D3Selection<T extends SVGElement = SVGElement> = Selection<
+  T,
+  unknown,
+  Element | null,
+  unknown
+>;
+
+/**
+ * Creates a graph by merging the graph construction and DOM element insertion.
+ *
+ * This function creates the graph, inserts the SVG groups (clusters, edgePaths, edgeLabels, nodes)
+ * into the provided element, and uses `insertNode` to add nodes to the diagram. Node dimensions
+ * are computed using each node's bounding box.
+ *
+ * @param element - The D3 selection in which the SVG groups are inserted.
+ * @param data4Layout - The layout data containing nodes and edges.
+ * @returns A promise resolving to an object containing the graph and the inserted groups.
+ */
+export async function createGraphWithElements(
+  element: D3Selection,
+  data4Layout: LayoutData
+): Promise<{
+  graph: graphlib.Graph;
+  groups: {
+    clusters: D3Selection<SVGGElement>;
+    edgePaths: D3Selection<SVGGElement>;
+    edgeLabels: D3Selection<SVGGElement>;
+    nodes: D3Selection<SVGGElement>;
+    rootGroups: D3Selection<SVGGElement>;
+  };
+  nodeElements: Map<string, D3Selection<SVGElement | SVGGElement>>;
+}> {
+  const graph = new graphlib.Graph({
+    multigraph: true,
+    compound: true,
+  });
+  const edgesToProcess = [...data4Layout.edges];
+  const config = getConfig();
+  // Create groups for clusters, edge paths, edge labels, and nodes.
+  const rootGroups = element.insert('g').attr('class', 'root');
+  const clusters = rootGroups.insert('g').attr('class', 'clusters');
+  const edgePaths = rootGroups.insert('g').attr('class', 'edges edgePath');
+  const edgeLabels = rootGroups.insert('g').attr('class', 'edgeLabels');
+  const nodesGroup = rootGroups.insert('g').attr('class', 'nodes');
+
+  const nodeElements = new Map<string, D3Selection<SVGElement | SVGGElement>>();
+
+  // Insert nodes into the DOM and add them to the graph.
+  for (const node of data4Layout.nodes) {
+    if (node.isGroup) {
+      graph.setNode(node.id, { ...node });
+    } else {
+      const childNodeEl = await insertNode(nodesGroup, node, { config, dir: node.dir });
+      const boundingBox = childNodeEl.node()?.getBBox() ?? { width: 0, height: 0 };
+      nodeElements.set(node.id, childNodeEl as D3Selection<SVGElement | SVGGElement>);
+      node.width = boundingBox.width;
+      node.height = boundingBox.height;
+      graph.setNode(node.id, { ...node });
+    }
+  }
+
+  // Add edges to the graph.
+  for (const edge of edgesToProcess) {
+    if (edge.label && edge.label?.length > 0) {
+      // Create a label node for the edge
+      const startNode = data4Layout.nodes.find((n) => n.id == edge.start);
+      const labelNodeId = `edge-label-${edge.start}-${edge.end}-${edge.id}`;
+      const labelNode: NonClusterNode = {
+        id: labelNodeId,
+        label: edge.label,
+        edgeStart: edge.start ?? '',
+        edgeEnd: edge.end ?? '',
+        shape: 'labelRect',
+        width: 0,
+        height: 0,
+        isEdgeLabel: true,
+        isDummy: true,
+        parentId: undefined,
+        isGroup: false,
+        layer: 0,
+        order: 0,
+        ...(startNode?.dir ? { dir: startNode.dir } : {}),
+      };
+
+      // Insert the label node into the DOM
+      const labelNodeEl = await insertNode(nodesGroup, labelNode, { config, dir: startNode?.dir });
+      const boundingBox = labelNodeEl.node()?.getBBox() ?? { width: 0, height: 0 };
+
+      // Update node dimensions
+      labelNode.width = boundingBox.width;
+      labelNode.height = boundingBox.height;
+
+      // Add to graph and tracking maps
+      graph.setNode(labelNodeId, { ...labelNode });
+      nodeElements.set(labelNodeId, labelNodeEl as D3Selection<SVGElement | SVGGElement>);
+      data4Layout.nodes.push(labelNode);
+
+      // Create two edges to replace the original one
+      const edgeToLabel = {
+        ...edge,
+        id: `${edge.id}-to-label`,
+        end: labelNodeId,
+        label: undefined,
+        isLabelEdge: true,
+        arrowTypeEnd: 'none',
+        arrowTypeStart: 'none',
+      };
+      const edgeFromLabel = {
+        ...edge,
+        id: `${edge.id}-from-label`,
+        start: labelNodeId,
+        end: edge.end,
+        label: undefined,
+        isLabelEdge: true,
+        arrowTypeStart: 'none',
+        arrowTypeEnd: 'arrow_point',
+      };
+      graph.setEdge(edgeToLabel.id, edgeToLabel.start, edgeToLabel.end, { ...edgeToLabel });
+      graph.setEdge(edgeFromLabel.id, edgeFromLabel.start, edgeFromLabel.end, { ...edgeFromLabel });
+      data4Layout.edges.push(edgeToLabel, edgeFromLabel);
+      const edgeIdToRemove = edge.id;
+      data4Layout.edges = data4Layout.edges.filter((edge) => edge.id !== edgeIdToRemove);
+      const indexInOriginal = data4Layout.edges.findIndex((e) => e.id === edge.id);
+      if (indexInOriginal !== -1) {
+        data4Layout.edges.splice(indexInOriginal, 1);
+      }
+    } else {
+      // Regular edge without label
+      graph.setEdge(edge.id, edge.start, edge.end, { ...edge });
+      const edgeExists = data4Layout.edges.some((existingEdge) => existingEdge.id === edge.id);
+      if (!edgeExists) {
+        data4Layout.edges.push(edge);
+      }
+    }
+  }
+
+  return {
+    graph,
+    groups: { clusters, edgePaths, edgeLabels, nodes: nodesGroup, rootGroups },
+    nodeElements,
+  };
+}

packages/mermaid/src/rendering-util/layout-algorithms/ipsepCola/adjustLayout.ts

@@ -0,0 +1,34 @@
+import type { LayoutData } from '../../types.ts';
+import type { D3Selection } from '../../../types.ts';
+import { insertCluster } from '../../rendering-elements/clusters.js';
+import { insertEdge } from '../../rendering-elements/edges.js';
+import { positionNode } from '../../rendering-elements/nodes.js';
+
+export async function adjustLayout(
+  data4Layout: LayoutData,
+  groups: {
+    edgePaths: D3Selection<SVGGElement>;
+    rootGroups: D3Selection<SVGGElement>;
+    [key: string]: D3Selection<SVGGElement>;
+  }
+): Promise<void> {
+  for (const node of data4Layout.nodes) {
+    if (node.isGroup) {
+      await insertCluster(groups.clusters, node);
+    } else {
+      positionNode(node);
+    }
+  }
+
+  data4Layout.edges.forEach((edge) => {
+    insertEdge(
+      groups.edgePaths,
+      { ...edge },
+      {},
+      data4Layout.type,
+      edge.start,
+      edge.end,
+      data4Layout.diagramId
+    );
+  });
+}

packages/mermaid/src/rendering-util/layout-algorithms/ipsepCola/assignInitialPositioning.spec.ts

@@ -0,0 +1,238 @@
+import { FlowDB } from '../../../diagrams/flowchart/flowDb.js';
+import flow from '../../../diagrams/flowchart/parser/flowParser.js';
+import type { Node } from '../../types.ts';
+import { assignInitialPositions } from './assignInitialPositions.js';
+import { layerAssignment } from './layerAssignment.js';
+import { assignNodeOrder } from './nodeOrdering.js';
+
+describe('assignInitialPositioning', () => {
+  beforeEach(function () {
+    flow.parser.yy = new FlowDB();
+    flow.parser.yy.clear();
+  });
+
+  it('should correctly assign initial positioning to node', async () => {
+    const flowchart = `
+          flowchart LR
+            A --> B --> C
+        `;
+
+    // Get layout data from flowDb
+    await flow.parse(flowchart);
+    const layoutData = flow.parser.yy.getData();
+
+    // Call Layer Assignment for the graph
+    layerAssignment(layoutData);
+
+    // Call Node order Assignment for the graph
+    assignNodeOrder(50, layoutData);
+
+    const firstNode = layoutData.nodes.find((node: Node) => node.id === 'A');
+    const secondNode = layoutData.nodes.find((node: Node) => node.id === 'B');
+    const thirdNode = layoutData.nodes.find((node: Node) => node.id === 'C');
+    // Call Initial Position Assignment for the graph
+    assignInitialPositions(100, 130, layoutData);
+
+    const node1 = layoutData.nodes.find((node: Node) => node.id === 'A');
+    const node2 = layoutData.nodes.find((node: Node) => node.id === 'B');
+    const node3 = layoutData.nodes.find((node: Node) => node.id === 'C');
+    expect(node1.x).toEqual(firstNode.order * 100);
+    expect(node1.y).toEqual(firstNode.layer * 130);
+    expect(node2.x).toEqual(secondNode.order * 100);
+    expect(node2.y).toEqual(secondNode.layer * 130);
+    expect(node3.x).toEqual(thirdNode.order * 100);
+    expect(node3.y).toEqual(thirdNode.layer * 130);
+  });
+  it('should correctly assign initial positioning to nodes in subgraphs', async () => {
+    const flowchart = `
+          flowchart LR
+            subgraph two
+              b1
+            end
+            subgraph three
+              c2
+            end
+            three --> two
+            two --> c2
+        `;
+
+    // Get layout data from flowDb
+    await flow.parse(flowchart);
+    const layoutData = flow.parser.yy.getData();
+
+    // Call Layer Assignment for the graph
+    layerAssignment(layoutData);
+
+    // Call Node order Assignment for the graph
+    assignNodeOrder(50, layoutData);
+
+    const twoNode = layoutData.nodes.find((node: Node) => node.id === 'two');
+    const b1Node = layoutData.nodes.find((node: Node) => node.id === 'b1');
+    const threeNode = layoutData.nodes.find((node: Node) => node.id === 'three');
+    const c2Node = layoutData.nodes.find((node: Node) => node.id === 'c2');
+
+    // Call Initial Position Assignment for the graph
+    assignInitialPositions(100, 130, layoutData);
+
+    expect(twoNode.x).toEqual(twoNode.order * 100);
+    expect(twoNode.y).toEqual(twoNode.layer * 130);
+    expect(b1Node.x).toEqual(b1Node.order * 100);
+    expect(b1Node.y).toEqual(b1Node.layer * 130);
+    expect(threeNode.x).toEqual(threeNode.order * 100);
+    expect(threeNode.y).toEqual(threeNode.layer * 130);
+    expect(c2Node.x).toEqual(c2Node.order * 100);
+    expect(c2Node.y).toEqual(c2Node.layer * 130);
+  });
+
+  it('should correctly assign initial positioning to nodes in complex subgraph', async () => {
+    const flowchart = `
+          flowchart LR
+            subgraph one
+              a1[Iam a node with a super long label] -- I am a long label --> a2[I am another node with a mega long label]
+              a1 -- Another long label --> a2
+              a3 --> a1 & a2 & a3 & a4
+              a1 --> a4
+            end
+        `;
+
+    // Get layout data from flowDb
+    await flow.parse(flowchart);
+    const layoutData = flow.parser.yy.getData();
+
+    // Call Layer Assignment for the graph
+    layerAssignment(layoutData);
+
+    // Call Node order Assignment for the graph
+    assignNodeOrder(50, layoutData);
+
+    const oneNode = layoutData.nodes.find((node: Node) => node.id === 'one');
+    const a1Node = layoutData.nodes.find((node: Node) => node.id === 'a1');
+    const a2Node = layoutData.nodes.find((node: Node) => node.id === 'a2');
+    const a3Node = layoutData.nodes.find((node: Node) => node.id === 'a3');
+    const a4Node = layoutData.nodes.find((node: Node) => node.id === 'a4');
+
+    // Call Initial Position Assignment for the graph
+    assignInitialPositions(100, 130, layoutData);
+
+    expect(oneNode.x).toEqual(oneNode.order * 100);
+    expect(oneNode.y).toEqual(oneNode.layer * 130);
+    expect(a1Node.x).toEqual(a1Node.order * 100);
+    expect(a1Node.y).toEqual(a1Node.layer * 130);
+    expect(a2Node.x).toEqual(a2Node.order * 100);
+    expect(a2Node.y).toEqual(a2Node.layer * 130);
+    expect(a3Node.x).toEqual(a3Node.order * 100);
+    expect(a3Node.y).toEqual(a3Node.layer * 130);
+    expect(a4Node.x).toEqual(a4Node.order * 100);
+    expect(a4Node.y).toEqual(a4Node.layer * 130);
+  });
+
+  it('should correctly assign initial positioning to nodes in TD subgraphs', async () => {
+    const flowchart = `
+          flowchart TD
+        P1
+        P1 -->P1.5
+        subgraph P1.5
+          P2
+          P2.5(( A ))
+          P3
+        end
+        P2 --> P4
+        P3 --> P6
+        P1.5 --> P5
+        `;
+
+    // Get layout data from flowDb
+    await flow.parse(flowchart);
+    const layoutData = flow.parser.yy.getData();
+
+    // Call Layer Assignment for the graph
+    layerAssignment(layoutData);
+
+    // Call Node order Assignment for the graph
+    assignNodeOrder(50, layoutData);
+
+    const p1Node = layoutData.nodes.find((node: Node) => node.id === 'P1');
+    const p15Node = layoutData.nodes.find((node: Node) => node.id === 'P1.5');
+    const p2Node = layoutData.nodes.find((node: Node) => node.id === 'P2');
+    const p25Node = layoutData.nodes.find((node: Node) => node.id === 'P2.5');
+    const p3Node = layoutData.nodes.find((node: Node) => node.id === 'P3');
+    const p4Node = layoutData.nodes.find((node: Node) => node.id === 'P4');
+    const p5Node = layoutData.nodes.find((node: Node) => node.id === 'P5');
+    const p6Node = layoutData.nodes.find((node: Node) => node.id === 'P6');
+
+    // Call Initial Position Assignment for the graph
+    assignInitialPositions(100, 130, layoutData);
+
+    expect(p1Node.x).toEqual(p1Node.order * 100);
+    expect(p1Node.y).toEqual(p1Node.layer * 130);
+    expect(p15Node.x).toEqual(p15Node.order * 100);
+    expect(p15Node.y).toEqual(p15Node.layer * 130);
+    expect(p2Node.x).toEqual(p2Node.order * 100);
+    expect(p2Node.y).toEqual(p2Node.layer * 130);
+    expect(p25Node.x).toEqual(p25Node.order * 100);
+    expect(p25Node.y).toEqual(p25Node.layer * 130);
+    expect(p3Node.x).toEqual(p3Node.order * 100);
+    expect(p3Node.y).toEqual(p3Node.layer * 130);
+    expect(p4Node.x).toEqual(p4Node.order * 100);
+    expect(p4Node.y).toEqual(p4Node.layer * 130);
+    expect(p5Node.x).toEqual(p5Node.order * 100);
+    expect(p5Node.y).toEqual(p5Node.layer * 130);
+    expect(p6Node.x).toEqual(p6Node.order * 100);
+    expect(p6Node.y).toEqual(p6Node.layer * 130);
+  });
+  it('should correctly assign initial positioning to nodes in TD subgraphs', async () => {
+    const flowchart = `
+        flowchart
+        subgraph Z
+        subgraph X
+        a --> b
+        end
+        subgraph Y
+        c --> d
+        end
+        end
+        Y --> X
+        X --> P
+        P --> Y
+        `;
+
+    // Get layout data from flowDb
+    await flow.parse(flowchart);
+    const layoutData = flow.parser.yy.getData();
+
+    // Call Layer Assignment for the graph
+    layerAssignment(layoutData);
+
+    // Call Node order Assignment for the graph
+    assignNodeOrder(50, layoutData);
+
+    const zNode = layoutData.nodes.find((node: Node) => node.id === 'Z');
+    const yNode = layoutData.nodes.find((node: Node) => node.id === 'Y');
+    const xNode = layoutData.nodes.find((node: Node) => node.id === 'X');
+    const aNode = layoutData.nodes.find((node: Node) => node.id === 'a');
+    const bNode = layoutData.nodes.find((node: Node) => node.id === 'b');
+    const cNode = layoutData.nodes.find((node: Node) => node.id === 'c');
+    const dNode = layoutData.nodes.find((node: Node) => node.id === 'd');
+    const pNode = layoutData.nodes.find((node: Node) => node.id === 'P');
+
+    // Call Initial Position Assignment for the graph
+    assignInitialPositions(100, 130, layoutData);
+
+    expect(zNode.x).toEqual(zNode.order * 100);
+    expect(zNode.y).toEqual(zNode.layer * 130);
+    expect(yNode.x).toEqual(yNode.order * 100);
+    expect(yNode.y).toEqual(yNode.layer * 130);
+    expect(xNode.x).toEqual(xNode.order * 100);
+    expect(xNode.y).toEqual(xNode.layer * 130);
+    expect(aNode.x).toEqual(aNode.order * 100);
+    expect(aNode.y).toEqual(aNode.layer * 130);
+    expect(bNode.x).toEqual(bNode.order * 100);
+    expect(bNode.y).toEqual(bNode.layer * 130);
+    expect(cNode.x).toEqual(cNode.order * 100);
+    expect(cNode.y).toEqual(cNode.layer * 130);
+    expect(dNode.x).toEqual(dNode.order * 100);
+    expect(dNode.y).toEqual(dNode.layer * 130);
+    expect(pNode.x).toEqual(pNode.order * 100);
+    expect(pNode.y).toEqual(pNode.layer * 130);
+  });
+});

packages/mermaid/src/rendering-util/layout-algorithms/ipsepCola/assignInitialPositions.ts

@@ -0,0 +1,27 @@
+import type { LayoutData, Node } from '../../types.ts';
+
+/**
+ * Assigns initial x and y positions to each node
+ * based on its rank and order.
+ *
+ * @param nodeSpacing - Horizontal spacing between nodes
+ * @param layerHeight - Vertical spacing between layers
+ * @param data4Layout - Layout data used to update node positions
+ */
+
+export function assignInitialPositions(
+  nodeSpacing: number,
+  layerHeight: number,
+  data4Layout: LayoutData
+): void {
+  data4Layout.nodes.forEach((node: Node) => {
+    const layer = node.layer ?? 0;
+    const order = node.order ?? 0;
+
+    const x = order * nodeSpacing;
+    const y = layer * layerHeight;
+
+    node.x = x;
+    node.y = y;
+  });
+}

packages/mermaid/src/rendering-util/layout-algorithms/ipsepCola/index.ts

@@ -0,0 +1,89 @@
+import insertMarkers from '../../rendering-elements/markers.js';
+import { clear as clearGraphlib } from '../dagre/mermaid-graphlib.js';
+import { clear as clearNodes } from '../../rendering-elements/nodes.js';
+import { clear as clearClusters } from '../../rendering-elements/clusters.js';
+import { clear as clearEdges } from '../../rendering-elements/edges.js';
+import type { LayoutData, Node } from '../../types.ts';
+import type { D3Selection } from '../../../types.ts';
+import type { SVG } from '../../../mermaid.ts';
+import { adjustLayout } from './adjustLayout.js';
+import { createGraphWithElements } from '../../createGraph.js';
+import { layerAssignment } from './layerAssignment.js';
+import { assignNodeOrder } from './nodeOrdering.js';
+import { assignInitialPositions } from './assignInitialPositions.js';
+import { applyCola } from './applyCola.js';
+
+export async function render(data4Layout: LayoutData, svg: SVG): Promise<void> {
+  const element = svg.select('g') as unknown as D3Selection<SVGElement>;
+  // Insert markers and clear previous elements
+  insertMarkers(element, data4Layout.markers, data4Layout.type, data4Layout.diagramId);
+  clearNodes();
+  clearEdges();
+  clearClusters();
+  clearGraphlib();
+  // Create the graph and insert the SVG groups and nodes
+  const { groups } = await createGraphWithElements(element, data4Layout);
+
+  // layer assignment
+  layerAssignment(data4Layout);
+
+  // assign node order using barycenter heuristic method
+  assignNodeOrder(1, data4Layout);
+
+  // assign initial coordinates
+  assignInitialPositions(100, 130, data4Layout);
+
+  const iteration = calculateIterations(data4Layout);
+
+  applyCola(
+    {
+      iterations: iteration * 4,
+      springLength: 80,
+      springStrength: 0.1,
+      repulsionStrength: 70000,
+    },
+    data4Layout
+  );
+  data4Layout.nodes = sortGroupNodesToEnd(data4Layout.nodes);
+  await adjustLayout(data4Layout, groups);
+}
+
+function sortGroupNodesToEnd(nodes: Node[]): Node[] {
+  const nonGroupNodes = nodes.filter((n) => !n.isGroup);
+  const groupNodes = nodes
+    .filter((n) => n.isGroup)
+    .map((n) => {
+      const width = typeof n.width === 'number' ? n.width : 0;
+      const height = typeof n.height === 'number' ? n.height : 0;
+      return {
+        ...n,
+        _area: width * height,
+      };
+    })
+    .sort((a, b) => b._area - a._area)
+    .map((n, idx) => {
+      const { _area, ...cleanNode } = n;
+      cleanNode.order = nonGroupNodes.length + idx;
+      return cleanNode;
+    });
+
+  return [...nonGroupNodes, ...groupNodes];
+}
+
+function calculateIterations(data4Layout: LayoutData) {
+  const nodesCount = data4Layout.nodes.length;
+  const edgesCount = data4Layout.edges.length;
+
+  const groupNodes = data4Layout.nodes.filter((node) => {
+    if (node.isGroup) {
+      return node;
+    }
+  });
+
+  let iteration = nodesCount + edgesCount;
+  if (groupNodes.length > 0) {
+    iteration = iteration * 5;
+  }
+
+  return iteration;
+}

packages/mermaid/src/rendering-util/layout-algorithms/ipsepCola/layerAssignment.spec.ts

@@ -0,0 +1,161 @@
+import { FlowDB } from '../../../diagrams/flowchart/flowDb.js';
+import flow from '../../../diagrams/flowchart/parser/flowParser.js';
+import type { Node } from '../../types.ts';
+import { layerAssignment } from './layerAssignment.js';
+
+describe('layerAssignment', () => {
+  beforeEach(function () {
+    flow.parser.yy = new FlowDB();
+    flow.parser.yy.clear();
+  });
+
+  it('should correctly assign the layers to node', async () => {
+    const flowchart = `
+          flowchart LR
+            A --> B --> C
+        `;
+
+    // Get layout data from flowDb
+    await flow.parse(flowchart);
+    const layoutData = flow.parser.yy.getData();
+
+    // Call Layer Assignment for the graph
+    layerAssignment(layoutData);
+
+    expect(layoutData.nodes.find((node: Node) => node.id === 'A').layer).toEqual(1);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'B').layer).toEqual(2);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'C').layer).toEqual(3);
+  });
+  it('should correctly assign the layers to node', async () => {
+    const flowchart = `
+          flowchart LR
+            subgraph two
+              b1
+            end
+            subgraph three
+              c2
+            end
+            three --> two
+            two --> c2
+        `;
+
+    // Get layout data from flowDb
+    await flow.parse(flowchart);
+    const layoutData = flow.parser.yy.getData();
+
+    // Call Layer Assignment for the graph
+    layerAssignment(layoutData);
+
+    expect(layoutData.nodes.find((node: Node) => node.id === 'two').layer).toEqual(2);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'b1').layer).toEqual(2);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'three').layer).toEqual(1);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'c2').layer).toEqual(3);
+
+    // expect(graph.getNodeAttributes('B').layer).toEqual(2);
+    // expect(graph.getNodeAttributes('C').layer).toEqual(3);
+  });
+  it('should correctly assign the layers to node', async () => {
+    const flowchart = `
+          flowchart LR
+            subgraph one
+              a1[Iam a node with a super long label] -- I am a long label --> a2[I am another node with a mega long label]
+              a1 -- Another long label --> a2
+              a3 --> a1 & a2 & a3 & a4
+              a1 --> a4
+            end
+        `;
+
+    // Get layout data from flowDb
+    await flow.parse(flowchart);
+    const layoutData = flow.parser.yy.getData();
+
+    // Call Layer Assignment for the graph
+    layerAssignment(layoutData);
+
+    expect(layoutData.nodes.find((node: Node) => node.id === 'one').layer).toEqual(1);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'a1').layer).toEqual(2);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'a2').layer).toEqual(2);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'a3').layer).toEqual(1);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'a4').layer).toEqual(2);
+  });
+  it('should correctly assign the layers to node', async () => {
+    const flowchart = `
+          flowchart TD
+        P1
+        P1 -->P1.5
+        subgraph P1.5
+          P2
+          P2.5(( A ))
+          P3
+        end
+        P2 --> P4
+        P3 --> P6
+        P1.5 --> P5
+        `;
+
+    // Get layout data from flowDb
+    await flow.parse(flowchart);
+    const layoutData = flow.parser.yy.getData();
+
+    // Call Layer Assignment for the graph
+    layerAssignment(layoutData);
+
+    expect(layoutData.nodes.find((node: Node) => node.id === 'P1').layer).toEqual(1);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'P1.5').layer).toEqual(2);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'P2').layer).toEqual(2);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'P2.5').layer).toEqual(2);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'P3').layer).toEqual(2);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'P4').layer).toEqual(3);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'P5').layer).toEqual(3);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'P6').layer).toEqual(3);
+  });
+  it('should correctly assign the layers to node', async () => {
+    const flowchart = `
+          flowchart
+        subgraph Z
+        subgraph X
+        a --> b
+        end
+        subgraph Y
+        c --> d
+        end
+        end
+        Y --> X
+        X --> P
+        P --> Y
+        `;
+
+    // Get layout data from flowDb
+    await flow.parse(flowchart);
+    const layoutData = flow.parser.yy.getData();
+
+    // Call Layer Assignment for the graph
+    layerAssignment(layoutData);
+
+    expect(layoutData.nodes.find((node: Node) => node.id === 'Z').layer).toEqual(1);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'Y').layer).toEqual(1);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'X').layer).toEqual(2);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'a').layer).toEqual(2);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'b').layer).toEqual(3);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'c').layer).toEqual(1);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'd').layer).toEqual(2);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'P').layer).toEqual(3);
+  });
+  it('should correctly assign the layers to node', async () => {
+    const flowchart = `
+          flowchart LR
+            A --|Test Label|--> B --> C
+        `;
+
+    // Get layout data from flowDb
+    await flow.parse(flowchart);
+    const layoutData = flow.parser.yy.getData();
+
+    // Call Layer Assignment for the graph
+    layerAssignment(layoutData);
+
+    expect(layoutData.nodes.find((node: Node) => node.id === 'A').layer).toEqual(1);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'B').layer).toEqual(2);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'C').layer).toEqual(3);
+  });
+});

packages/mermaid/src/rendering-util/layout-algorithms/ipsepCola/layerAssignment.ts

@@ -0,0 +1,90 @@
+import type { Edge, LayoutData } from '../../types.ts';
+
+export function layerAssignment(data4Layout: LayoutData): void {
+  const removedEdges: Edge[] = [];
+
+  const visited = new Set<string>();
+  const visiting = new Set<string>();
+
+  function dfs(nodeId: string): void {
+    visited.add(nodeId);
+    visiting.add(nodeId);
+
+    const outbound = data4Layout.edges.filter((e) => e.start === nodeId);
+
+    for (const edge of outbound) {
+      const neighbor = edge.end!;
+      if (!visited.has(neighbor)) {
+        dfs(neighbor);
+      } else if (visiting.has(neighbor)) {
+        // Cycle detected: temporarily remove this edge
+        removedEdges.push(edge);
+      }
+    }
+
+    visiting.delete(nodeId);
+  }
+
+  // Remove cycles using DFS
+  for (const node of data4Layout.nodes) {
+    if (!visited.has(node.id)) {
+      dfs(node.id);
+    }
+  }
+
+  // Filter out removed edges temporarily
+  const workingEdges = data4Layout.edges.filter((e) => !removedEdges.includes(e));
+
+  // Build in-degree map
+  const inDegree: Record<string, number> = {};
+  for (const node of data4Layout.nodes) {
+    inDegree[node.id] = 0;
+  }
+  for (const edge of workingEdges) {
+    if (edge.end) {
+      inDegree[edge.end]++;
+    }
+  }
+
+  // Queue of nodes with in-degree 0
+  const queue: string[] = [];
+  for (const nodeId in inDegree) {
+    if (inDegree[nodeId] === 0) {
+      queue.push(nodeId);
+    }
+  }
+
+  // Map to store calculated ranks/layers
+  const ranks: Record<string, number> = {};
+  while (queue.length > 0) {
+    const nodeId = queue.shift()!;
+    const parents = workingEdges.filter((e) => e.end === nodeId).map((e) => e.start!);
+    const layoutNode = data4Layout.nodes.find((n) => n.id === nodeId);
+    if (layoutNode?.parentId && parents.length == 0) {
+      const parentNode = data4Layout.nodes.find((n) => n.id === layoutNode.parentId);
+      if (!parentNode?.layer) {
+        parents.push(parentNode?.id ?? '');
+      }
+    }
+    const parentRanks = parents.map((p) => ranks[p] ?? 0);
+    const rank = parentRanks.length ? Math.min(...parentRanks) + 1 : 0;
+
+    ranks[nodeId] = rank;
+
+    // Update layer in data4Layout.nodes
+
+    if (layoutNode) {
+      layoutNode.layer = rank + 1;
+    }
+
+    // Decrement in-degree of children
+    for (const edge of workingEdges) {
+      if (edge.start === nodeId && edge.end) {
+        inDegree[edge.end]--;
+        if (inDegree[edge.end] === 0) {
+          queue.push(edge.end);
+        }
+      }
+    }
+  }
+}

packages/mermaid/src/rendering-util/layout-algorithms/ipsepCola/nodeOrdering.spec.ts

@@ -0,0 +1,155 @@
+import { FlowDB } from '../../../diagrams/flowchart/flowDb.js';
+import flow from '../../../diagrams/flowchart/parser/flowParser.js';
+import type { Node } from '../../types.ts';
+import { layerAssignment } from './layerAssignment.js';
+import { assignNodeOrder } from './nodeOrdering.js';
+
+describe('nodeOrdering', () => {
+  beforeEach(function () {
+    flow.parser.yy = new FlowDB();
+    flow.parser.yy.clear();
+  });
+
+  it('should correctly assign the orders to node', async () => {
+    const flowchart = `
+          flowchart LR
+            A --> B --> C
+        `;
+
+    // Get layout data from flowDb
+    await flow.parse(flowchart);
+    const layoutData = flow.parser.yy.getData();
+
+    // Call Layer Assignment for the graph
+    layerAssignment(layoutData);
+
+    // Call Node order Assignment for the graph
+    assignNodeOrder(1, layoutData);
+
+    expect(layoutData.nodes.find((node: Node) => node.id === 'A').order).toEqual(0);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'B').order).toEqual(0);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'C').order).toEqual(0);
+  });
+  it('should correctly assign the orders to node', async () => {
+    const flowchart = `
+          flowchart LR
+            subgraph two
+              b1
+            end
+            subgraph three
+              c2
+            end
+            three --> two
+            two --> c2
+        `;
+
+    // Get layout data from flowDb
+    await flow.parse(flowchart);
+    const layoutData = flow.parser.yy.getData();
+
+    // Call Layer Assignment for the graph
+    layerAssignment(layoutData);
+
+    // Call Node order Assignment for the graph
+    assignNodeOrder(1, layoutData);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'two').order).toEqual(0);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'b1').order).toEqual(0);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'three').order).toEqual(0);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'c2').order).toEqual(0);
+  });
+
+  it('should correctly assign the orders to node', async () => {
+    const flowchart = `
+          flowchart LR
+            subgraph one
+              a1[Iam a node with a super long label] -- I am a long label --> a2[I am another node with a mega long label]
+              a1 -- Another long label --> a2
+              a3 --> a1 & a2 & a3 & a4
+              a1 --> a4
+            end
+        `;
+
+    // Get layout data from flowDb
+    await flow.parse(flowchart);
+    const layoutData = flow.parser.yy.getData();
+
+    // Call Layer Assignment for the graph
+    layerAssignment(layoutData);
+
+    // Call Node order Assignment for the graph
+    assignNodeOrder(1, layoutData);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'one').order).toEqual(0.75);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'a1').order).toEqual(0);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'a2').order).toEqual(1);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'a3').order).toEqual(0);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'a4').order).toEqual(2);
+  });
+  it('should correctly assign the orders to node', async () => {
+    const flowchart = `
+          flowchart TD
+        P1
+        P1 -->P1.5
+        subgraph P1.5
+          P2
+          P2.5(( A ))
+          P3
+        end
+        P2 --> P4
+        P3 --> P6
+        P1.5 --> P5
+        `;
+
+    // Get layout data from flowDb
+    await flow.parse(flowchart);
+    const layoutData = flow.parser.yy.getData();
+
+    // Call Layer Assignment for the graph
+    layerAssignment(layoutData);
+
+    // Call Node order Assignment for the graph
+    assignNodeOrder(1, layoutData);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'P1').order).toEqual(0);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'P1.5').order).toEqual(1);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'P2').order).toEqual(0);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'P2.5').order).toEqual(2);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'P3').order).toEqual(1);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'P4').order).toEqual(0);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'P5').order).toEqual(2);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'P6').order).toEqual(1);
+  });
+
+  it('should correctly assign the orders to node', async () => {
+    const flowchart = `
+      flowchart
+        subgraph Z
+        subgraph X
+        a --> b
+        end
+        subgraph Y
+        c --> d
+        end
+        end
+        Y --> X
+        X --> P
+        P --> Y
+        `;
+
+    // Get layout data from flowDb
+    await flow.parse(flowchart);
+    const layoutData = flow.parser.yy.getData();
+
+    // Call Layer Assignment for the graph
+    layerAssignment(layoutData);
+
+    // Call Node order Assignment for the graph
+    assignNodeOrder(1, layoutData);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'Z').order).toEqual(8);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'Y').order).toEqual(0.5);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'X').order).toEqual(0);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'a').order).toEqual(0);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'b').order).toEqual(0);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'c').order).toEqual(0);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'd').order).toEqual(1);
+    expect(layoutData.nodes.find((node: Node) => node.id === 'P').order).toEqual(1);
+  });
+});

packages/mermaid/src/rendering-util/layout-algorithms/ipsepCola/nodeOrdering.ts

@@ -0,0 +1,129 @@
+import type { Edge, LayoutData, Node } from '../../types.ts';
+
+type LayerMap = Record<number, Node[]>;
+
+function groupNodesByLayer(nodes: Node[]): LayerMap {
+  const layers: LayerMap = {};
+  nodes.forEach((node: Node) => {
+    if (node.isGroup) {
+      return;
+    }
+
+    const layer = node.layer ?? 0;
+    if (!layers[layer]) {
+      layers[layer] = [];
+    }
+    layers[layer].push(node);
+  });
+  return layers;
+}
+
+/**
+ * Assign horizontal ordering to nodes, excluding group nodes from ordering.
+ * Groups are assigned `order` after real nodes are sorted.
+ */
+export function assignNodeOrder(iterations: number, data4Layout: LayoutData): void {
+  const nodes = data4Layout.nodes;
+  const edges = data4Layout.edges;
+  const nodeMap = new Map<string, Node>(nodes.map((n) => [n.id, n]));
+
+  const isLayered = nodes.some((n) => n.layer !== undefined);
+  if (isLayered) {
+    const layers = groupNodesByLayer(nodes);
+    const sortedLayers = Object.keys(layers)
+      .map(Number)
+      .sort((a, b) => a - b);
+
+    // Initial order
+    for (const layer of sortedLayers) {
+      layers[layer].forEach((node, index) => {
+        node.order = index;
+      });
+    }
+
+    // Barycenter iterations
+    for (let i = 0; i < iterations; i++) {
+      for (let l = 1; l < sortedLayers.length; l++) {
+        sortLayerByBarycenter(layers[sortedLayers[l]], 'inbound', edges, nodeMap);
+      }
+      for (let l = sortedLayers.length - 2; l >= 0; l--) {
+        sortLayerByBarycenter(layers[sortedLayers[l]], 'outbound', edges, nodeMap);
+      }
+    }
+
+    // Assign order to group nodes at the end
+    for (const node of nodes) {
+      if (node.isGroup) {
+        const childOrders = nodes
+          .filter((n) => n.parentId === node.id)
+          .map((n) => nodeMap.get(n.id)?.order)
+          .filter((o): o is number => typeof o === 'number');
+
+        node.order = childOrders.length
+          ? childOrders.reduce((a, b) => a + b, 0) / childOrders.length
+          : nodes.length;
+      }
+    }
+  }
+}
+
+function sortLayerByBarycenter(
+  layerNodes: Node[],
+  direction: 'inbound' | 'outbound' | 'both',
+  edges: Edge[],
+  nodeMap: Map<string, Node>
+): void {
+  const edgeMap = new Map<string, Set<string>>();
+  edges.forEach((e: Edge) => {
+    if (e.start && e.end) {
+      if (!edgeMap.has(e.start)) {
+        edgeMap.set(e.start, new Set());
+      }
+      edgeMap.get(e.start)?.add(e.end);
+    }
+  });
+
+  const baryCenters = layerNodes.map((node, originalIndex) => {
+    const neighborOrders: number[] = [];
+
+    edges.forEach((edge) => {
+      if (direction === 'inbound' && edge.end === node.id) {
+        const source = nodeMap.get(edge.start ?? '');
+        if (source?.order !== undefined) {
+          neighborOrders.push(source.order);
+        }
+      } else if (direction === 'outbound' && edge.start === node.id) {
+        const target = nodeMap.get(edge.end ?? '');
+        if (target?.order !== undefined) {
+          neighborOrders.push(target.order);
+        }
+      } else if (direction === 'both' && (edge.start === node.id || edge.end === node.id)) {
+        const neighborId = edge.start === node.id ? edge.end : edge.start;
+        const neighbor = nodeMap.get(neighborId ?? '');
+        if (neighbor?.order !== undefined) {
+          neighborOrders.push(neighbor.order);
+        }
+      }
+    });
+
+    const barycenter =
+      neighborOrders.length === 0
+        ? Infinity // Push unconnected nodes to the end
+        : neighborOrders.reduce((sum, o) => sum + o, 0) / neighborOrders.length;
+
+    return { node, barycenter, originalIndex };
+  });
+
+  baryCenters.sort((a, b) => {
+    if (a.barycenter !== b.barycenter) {
+      return a.barycenter - b.barycenter;
+    }
+
+    // Stable tie-breaker based on original index
+    return a.originalIndex - b.originalIndex;
+  });
+
+  baryCenters.forEach((entry, index) => {
+    entry.node.order = index;
+  });
+}

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

@@ -39,6 +39,10 @@ const registerDefaultLayoutLoaders = () => {
       name: 'dagre',
       loader: async () => await import('./layout-algorithms/dagre/index.js'),
     },
+    {
+      name: 'ipsepCola',
+      loader: async () => await import('./layout-algorithms/ipsepCola/index.js'),
+    },
   ]);
 };
 

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

@@ -80,11 +80,23 @@ interface BaseNode {
 export interface ClusterNode extends BaseNode {
   shape?: ClusterShapeID;
   isGroup: true;
+  isEdgeLabel?: boolean;
+  edgeStart?: string;
+  edgeEnd?: string;
+  layer?: number;
+  order?: number;
+  isDummy?: boolean;
 }
 
 export interface NonClusterNode extends BaseNode {
   shape?: ShapeID;
   isGroup: false;
+  isEdgeLabel?: boolean;
+  edgeStart?: string;
+  edgeEnd?: string;
+  layer?: number;
+  order?: number;
+  isDummy?: boolean;
 }
 
 // Common properties for any node in the system
@@ -126,6 +138,8 @@ export interface Edge {
   thickness?: 'normal' | 'thick' | 'invisible' | 'dotted';
   look?: string;
   isUserDefinedId?: boolean;
+  isLabelEdge?: boolean;
+  points?: { x: number; y: number }[];
 }
 
 export interface RectOptions {

packages/parser/CHANGELOG.md

@@ -1,17 +1,5 @@
 # @mermaid-js/parser
 
-## 0.6.1
-
-### Patch Changes
-
-- [#6725](https://github.com/mermaid-js/mermaid/pull/6725) [`0da2922`](https://github.com/mermaid-js/mermaid/commit/0da2922ee7f47959e324ec10d3d21ee70594f557) Thanks [@shubham-mermaid](https://github.com/shubham-mermaid)! - chore: use Treemap instead of TreemapDoc in parser.
-
-## 0.6.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
-
 ## 0.5.0
 
 ### Minor Changes

packages/parser/langium-config.json

@@ -30,11 +30,6 @@
       "id": "radar",
       "grammar": "src/language/radar/radar.langium",
       "fileExtensions": [".mmd", ".mermaid"]
-    },
-    {
-      "id": "treemap",
-      "grammar": "src/language/treemap/treemap.langium",
-      "fileExtensions": [".mmd", ".mermaid"]
     }
   ],
   "mode": "production",

packages/parser/package.json

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

packages/parser/src/language/index.ts

@@ -8,7 +8,6 @@ export {
   Architecture,
   GitGraph,
   Radar,
-  Treemap,
   Branch,
   Commit,
   Merge,
@@ -20,7 +19,6 @@ export {
   isPieSection,
   isArchitecture,
   isGitGraph,
-  isTreemap,
   isBranch,
   isCommit,
   isMerge,
@@ -34,7 +32,6 @@ export {
   ArchitectureGeneratedModule,
   GitGraphGeneratedModule,
   RadarGeneratedModule,
-  TreemapGeneratedModule,
 } from './generated/module.js';
 
 export * from './gitGraph/index.js';
@@ -44,4 +41,3 @@ export * from './packet/index.js';
 export * from './pie/index.js';
 export * from './architecture/index.js';
 export * from './radar/index.js';
-export * from './treemap/index.js';

packages/parser/src/language/treemap/index.ts

@@ -1 +0,0 @@
-export * from './module.js';

packages/parser/src/language/treemap/module.ts

@@ -1,88 +0,0 @@
-import type {
-  DefaultSharedCoreModuleContext,
-  LangiumCoreServices,
-  LangiumSharedCoreServices,
-  Module,
-  PartialLangiumCoreServices,
-} from 'langium';
-import {
-  EmptyFileSystem,
-  createDefaultCoreModule,
-  createDefaultSharedCoreModule,
-  inject,
-} from 'langium';
-
-import { MermaidGeneratedSharedModule, TreemapGeneratedModule } from '../generated/module.js';
-import { TreemapTokenBuilder } from './tokenBuilder.js';
-import { TreemapValueConverter } from './valueConverter.js';
-import { TreemapValidator, registerValidationChecks } from './treemap-validator.js';
-
-/**
- * Declaration of `Treemap` services.
- */
-interface TreemapAddedServices {
-  parser: {
-    TokenBuilder: TreemapTokenBuilder;
-    ValueConverter: TreemapValueConverter;
-  };
-  validation: {
-    TreemapValidator: TreemapValidator;
-  };
-}
-
-/**
- * Union of Langium default services and `Treemap` services.
- */
-export type TreemapServices = LangiumCoreServices & TreemapAddedServices;
-
-/**
- * Dependency injection module that overrides Langium default services and
- * contributes the declared `Treemap` services.
- */
-export const TreemapModule: Module<
-  TreemapServices,
-  PartialLangiumCoreServices & TreemapAddedServices
-> = {
-  parser: {
-    TokenBuilder: () => new TreemapTokenBuilder(),
-    ValueConverter: () => new TreemapValueConverter(),
-  },
-  validation: {
-    TreemapValidator: () => new TreemapValidator(),
-  },
-};
-
-/**
- * Create the full set of services required by Langium.
- *
- * First inject the shared services by merging two modules:
- *  - Langium default shared services
- *  - Services generated by langium-cli
- *
- * Then inject the language-specific services by merging three modules:
- *  - Langium default language-specific services
- *  - Services generated by langium-cli
- *  - Services specified in this file
- * @param context - Optional module context with the LSP connection
- * @returns An object wrapping the shared services and the language-specific services
- */
-export function createTreemapServices(context: DefaultSharedCoreModuleContext = EmptyFileSystem): {
-  shared: LangiumSharedCoreServices;
-  Treemap: TreemapServices;
-} {
-  const shared: LangiumSharedCoreServices = inject(
-    createDefaultSharedCoreModule(context),
-    MermaidGeneratedSharedModule
-  );
-  const Treemap: TreemapServices = inject(
-    createDefaultCoreModule({ shared }),
-    TreemapGeneratedModule,
-    TreemapModule
-  );
-  shared.ServiceRegistry.register(Treemap);
-
-  // Register validation checks
-  registerValidationChecks(Treemap);
-
-  return { shared, Treemap };
-}

packages/parser/src/language/treemap/tokenBuilder.ts

@@ -1,7 +0,0 @@
-import { AbstractMermaidTokenBuilder } from '../common/index.js';
-
-export class TreemapTokenBuilder extends AbstractMermaidTokenBuilder {
-  public constructor() {
-    super(['treemap']);
-  }
-}

packages/parser/src/language/treemap/treemap-validator.ts

@@ -1,61 +0,0 @@
-import type { ValidationAcceptor, ValidationChecks } from 'langium';
-import type { MermaidAstType, Treemap } from '../generated/ast.js';
-import type { TreemapServices } from './module.js';
-
-/**
- * Register custom validation checks.
- */
-export function registerValidationChecks(services: TreemapServices) {
-  const validator = services.validation.TreemapValidator;
-  const registry = services.validation.ValidationRegistry;
-  if (registry) {
-    // Use any to bypass type checking since we know Treemap is part of the AST
-    // but the type system is having trouble with it
-    const checks: ValidationChecks<MermaidAstType> = {
-      Treemap: validator.checkSingleRoot.bind(validator),
-      // Remove unused validation for TreemapRow
-    };
-    registry.register(checks, validator);
-  }
-}
-
-/**
- * Implementation of custom validations.
- */
-export class TreemapValidator {
-  /**
-   * Validates that a treemap has only one root node.
-   * A root node is defined as a node that has no indentation.
-   */
-  checkSingleRoot(doc: Treemap, accept: ValidationAcceptor): void {
-    let rootNodeIndentation;
-
-    for (const row of doc.TreemapRows) {
-      // Skip non-node items or items without a type
-      if (!row.item) {
-        continue;
-      }
-
-      if (
-        rootNodeIndentation === undefined && // Check if this is a root node (no indentation)
-        row.indent === undefined
-      ) {
-        rootNodeIndentation = 0;
-      } else if (row.indent === undefined) {
-        // If we've already found a root node, report an error
-        accept('error', 'Multiple root nodes are not allowed in a treemap.', {
-          node: row,
-          property: 'item',
-        });
-      } else if (
-        rootNodeIndentation !== undefined &&
-        rootNodeIndentation >= parseInt(row.indent, 10)
-      ) {
-        accept('error', 'Multiple root nodes are not allowed in a treemap.', {
-          node: row,
-          property: 'item',
-        });
-      }
-    }
-  }
-}

packages/parser/src/language/treemap/treemap.langium

@@ -1,90 +0,0 @@
-/**
- * Treemap grammar for Langium
- * Converted from mindmap grammar
- *
- * The ML_COMMENT and NL hidden terminals handle whitespace, comments, and newlines
- * before the treemap keyword, allowing for empty lines and comments before the
- * treemap declaration.
- */
-grammar Treemap
-
-
-
-fragment TitleAndAccessibilities:
-  ((accDescr=ACC_DESCR | accTitle=ACC_TITLE | title=TITLE))+
-;
-
-terminal BOOLEAN returns boolean: 'true' | 'false';
-
-terminal ACC_DESCR: /[\t ]*accDescr(?:[\t ]*:([^\n\r]*?(?=%%)|[^\n\r]*)|\s*{([^}]*)})/;
-terminal ACC_TITLE: /[\t ]*accTitle[\t ]*:(?:[^\n\r]*?(?=%%)|[^\n\r]*)/;
-terminal TITLE: /[\t ]*title(?:[\t ][^\n\r]*?(?=%%)|[\t ][^\n\r]*|)/;
-
-// Interface declarations for data types
-interface Item {
-    name: string
-    classSelector?: string // For ::: class
-}
-interface Section extends Item {
-}
-interface Leaf extends Item {
-    value: number
-}
-interface ClassDefStatement {
-    className: string
-    styleText: string // Optional style text
-}
-interface Treemap {
-    TreemapRows: TreemapRow[]
-    title?: string
-    accTitle?: string
-    accDescr?: string
-}
-
-entry Treemap returns Treemap:
-    TREEMAP_KEYWORD
-    (
-        TitleAndAccessibilities
-        | TreemapRows+=TreemapRow
-    )*;
-terminal TREEMAP_KEYWORD:  'treemap-beta' | 'treemap';
-
-terminal CLASS_DEF: /classDef\s+([a-zA-Z_][a-zA-Z0-9_]+)(?:\s+([^;\r\n]*))?(?:;)?/;
-terminal STYLE_SEPARATOR: ':::';
-terminal SEPARATOR: ':';
-terminal COMMA: ',';
-
-hidden terminal WS: /[ \t]+/;  // One or more spaces or tabs for hidden whitespace
-hidden terminal ML_COMMENT: /\%\%[^\n]*/;
-hidden terminal NL: /\r?\n/;
-
-TreemapRow:
-    indent=INDENTATION? (item=Item | ClassDef);
-
-// Class definition statement handled by the value converter
-ClassDef returns string:
-    CLASS_DEF;
-
-Item returns Item:
-    Leaf | Section;
-
-// Use a special rule order to handle the parsing precedence
-Section returns Section:
-    name=STRING2 (STYLE_SEPARATOR classSelector=ID2)?;
-
-Leaf returns Leaf:
-    name=STRING2 INDENTATION? (SEPARATOR | COMMA) INDENTATION? value=MyNumber (STYLE_SEPARATOR classSelector=ID2)?;
-
-// This should be processed before whitespace is ignored
-terminal INDENTATION: /[ \t]{1,}/;  // One or more spaces/tabs for indentation
-
-// Keywords with fixed text patterns
-terminal ID2: /[a-zA-Z_][a-zA-Z0-9_]*/;
-// Define as a terminal rule
-terminal NUMBER2: /[0-9_\.\,]+/;
-
-// Then create a data type rule that uses it
-MyNumber returns number: NUMBER2;
-
-terminal STRING2: /"[^"]*"|'[^']*'/;
-// Modified indentation rule to have higher priority than WS

packages/parser/src/language/treemap/valueConverter.ts

@@ -1,44 +0,0 @@
-import type { CstNode, GrammarAST, ValueType } from 'langium';
-import { AbstractMermaidValueConverter } from '../common/index.js';
-
-// Regular expression to extract className and styleText from a classDef terminal
-const classDefRegex = /classDef\s+([A-Z_a-z]\w+)(?:\s+([^\n\r;]*))?;?/;
-
-export class TreemapValueConverter extends AbstractMermaidValueConverter {
-  protected runCustomConverter(
-    rule: GrammarAST.AbstractRule,
-    input: string,
-    _cstNode: CstNode
-  ): ValueType | undefined {
-    if (rule.name === 'NUMBER2') {
-      // Convert to a number by removing any commas and converting to float
-      return parseFloat(input.replace(/,/g, ''));
-    } else if (rule.name === 'SEPARATOR') {
-      // Remove quotes
-      return input.substring(1, input.length - 1);
-    } else if (rule.name === 'STRING2') {
-      // Remove quotes
-      return input.substring(1, input.length - 1);
-    } else if (rule.name === 'INDENTATION') {
-      return input.length;
-    } else if (rule.name === 'ClassDef') {
-      // Handle both CLASS_DEF terminal and ClassDef rule
-      if (typeof input !== 'string') {
-        // If we're dealing with an already processed object, return it as is
-        return input;
-      }
-
-      // Extract className and styleText from classDef statement
-      const match = classDefRegex.exec(input);
-      if (match) {
-        // Use any type to avoid type issues
-        return {
-          $type: 'ClassDefStatement',
-          className: match[1],
-          styleText: match[2] || undefined,
-        } as any;
-      }
-    }
-    return undefined;
-  }
-}

packages/parser/src/parse.ts

@@ -1,6 +1,6 @@
 import type { LangiumParser, ParseResult } from 'langium';
 
-import type { Info, Packet, Pie, Architecture, GitGraph, Radar, Treemap } from './index.js';
+import type { Info, Packet, Pie, Architecture, GitGraph, Radar } from './index.js';
 
 export type DiagramAST = Info | Packet | Pie | Architecture | GitGraph | Radar;
 
@@ -36,11 +36,6 @@ const initializers = {
     const parser = createRadarServices().Radar.parser.LangiumParser;
     parsers.radar = parser;
   },
-  treemap: async () => {
-    const { createTreemapServices } = await import('./language/treemap/index.js');
-    const parser = createTreemapServices().Treemap.parser.LangiumParser;
-    parsers.treemap = parser;
-  },
 } as const;
 
 export async function parse(diagramType: 'info', text: string): Promise<Info>;
@@ -49,7 +44,6 @@ export async function parse(diagramType: 'pie', text: string): Promise<Pie>;
 export async function parse(diagramType: 'architecture', text: string): Promise<Architecture>;
 export async function parse(diagramType: 'gitGraph', text: string): Promise<GitGraph>;
 export async function parse(diagramType: 'radar', text: string): Promise<Radar>;
-export async function parse(diagramType: 'treemap', text: string): Promise<Treemap>;
 
 export async function parse<T extends DiagramAST>(
   diagramType: keyof typeof initializers,

packages/parser/tests/test-util.ts

@@ -32,12 +32,6 @@ const consoleMock = vi.spyOn(console, 'log').mockImplementation(() => undefined)
  * @param result - the result `parse` function.
  */
 export function expectNoErrorsOrAlternatives(result: ParseResult) {
-  if (result.lexerErrors.length > 0) {
-    // console.debug(result.lexerErrors);
-  }
-  if (result.parserErrors.length > 0) {
-    // console.debug(result.parserErrors);
-  }
   expect(result.lexerErrors).toHaveLength(0);
   expect(result.parserErrors).toHaveLength(0);
 

packages/parser/tests/treemap.test.ts

@@ -1,238 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { expectNoErrorsOrAlternatives } from './test-util.js';
-import type { Treemap, Section, Leaf, TreemapRow } from '../src/language/generated/ast.js';
-import type { LangiumParser } from 'langium';
-import { createTreemapServices } from '../src/language/treemap/module.js';
-
-describe('Treemap Parser', () => {
-  const services = createTreemapServices().Treemap;
-  const parser: LangiumParser = services.parser.LangiumParser;
-
-  const parse = (input: string) => {
-    return parser.parse<Treemap>(input);
-  };
-
-  describe('Basic Parsing', () => {
-    it('should parse empty treemap', () => {
-      const result = parse('treemap');
-      expectNoErrorsOrAlternatives(result);
-      expect(result.value.$type).toBe('Treemap');
-      expect(result.value.TreemapRows).toHaveLength(0);
-    });
-
-    it('should parse a section node', () => {
-      const result = parse('treemap\n"Root"');
-      expectNoErrorsOrAlternatives(result);
-      expect(result.value.$type).toBe('Treemap');
-      expect(result.value.TreemapRows).toHaveLength(1);
-      if (result.value.TreemapRows[0].item) {
-        expect(result.value.TreemapRows[0].item.$type).toBe('Section');
-        const section = result.value.TreemapRows[0].item as Section;
-        expect(section.name).toBe('Root');
-      }
-    });
-
-    it('should parse a section with leaf nodes', () => {
-      const result = parse(`treemap
-"Root"
-  "Child1" , 100
-  "Child2" : 200
-`);
-      expectNoErrorsOrAlternatives(result);
-      expect(result.value.$type).toBe('Treemap');
-      expect(result.value.TreemapRows).toHaveLength(3);
-
-      if (result.value.TreemapRows[0].item) {
-        expect(result.value.TreemapRows[0].item.$type).toBe('Section');
-        const section = result.value.TreemapRows[0].item as Section;
-        expect(section.name).toBe('Root');
-      }
-
-      if (result.value.TreemapRows[1].item) {
-        expect(result.value.TreemapRows[1].item.$type).toBe('Leaf');
-        const leaf = result.value.TreemapRows[1].item as Leaf;
-        expect(leaf.name).toBe('Child1');
-        expect(leaf.value).toBe(100);
-      }
-
-      if (result.value.TreemapRows[2].item) {
-        expect(result.value.TreemapRows[2].item.$type).toBe('Leaf');
-        const leaf = result.value.TreemapRows[2].item as Leaf;
-        expect(leaf.name).toBe('Child2');
-        expect(leaf.value).toBe(200);
-      }
-    });
-  });
-
-  describe('Data Types', () => {
-    it('should correctly parse string values', () => {
-      const result = parse('treemap\n"My Section"');
-      expectNoErrorsOrAlternatives(result);
-      if (result.value.TreemapRows[0].item) {
-        expect(result.value.TreemapRows[0].item.$type).toBe('Section');
-        const section = result.value.TreemapRows[0].item as Section;
-        expect(section.name).toBe('My Section');
-      }
-    });
-
-    it('should correctly parse number values', () => {
-      const result = parse('treemap\n"Item" : 123.45');
-      expectNoErrorsOrAlternatives(result);
-      if (result.value.TreemapRows[0].item) {
-        expect(result.value.TreemapRows[0].item.$type).toBe('Leaf');
-        const leaf = result.value.TreemapRows[0].item as Leaf;
-        expect(leaf.name).toBe('Item');
-        expect(typeof leaf.value).toBe('number');
-        expect(leaf.value).toBe(123.45);
-      }
-    });
-  });
-
-  describe('Validation', () => {
-    it('should parse multiple root nodes', () => {
-      const result = parse('treemap\n"Root1"\n"Root2"');
-      expect(result.parserErrors).toHaveLength(0);
-
-      // We're only checking that the multiple root nodes parse successfully
-      // The validation errors would be reported by the validator during validation
-      expect(result.value.$type).toBe('Treemap');
-      expect(result.value.TreemapRows).toHaveLength(2);
-    });
-  });
-
-  describe('Title and Accessibilities', () => {
-    it('should parse a treemap with title', () => {
-      const result = parse('treemap\ntitle My Treemap Diagram\n"Root"\n  "Child": 100');
-      expectNoErrorsOrAlternatives(result);
-      expect(result.value.$type).toBe('Treemap');
-      // We can't directly test the title property due to how Langium processes TitleAndAccessibilities
-      // but we can verify the TreemapRows are parsed correctly
-      expect(result.value.TreemapRows).toHaveLength(2);
-    });
-
-    it('should parse a treemap with accTitle', () => {
-      const result = parse('treemap\naccTitle: Accessible Title\n"Root"\n  "Child": 100');
-      expectNoErrorsOrAlternatives(result);
-      expect(result.value.$type).toBe('Treemap');
-      // We can't directly test the accTitle property due to how Langium processes TitleAndAccessibilities
-      expect(result.value.TreemapRows).toHaveLength(2);
-    });
-
-    it('should parse a treemap with accDescr', () => {
-      const result = parse(
-        'treemap\naccDescr: This is an accessible description\n"Root"\n  "Child": 100'
-      );
-      expectNoErrorsOrAlternatives(result);
-      expect(result.value.$type).toBe('Treemap');
-      // We can't directly test the accDescr property due to how Langium processes TitleAndAccessibilities
-      expect(result.value.TreemapRows).toHaveLength(2);
-    });
-
-    it('should parse a treemap with multiple accessibility attributes', () => {
-      const result = parse(`treemap
-title My Treemap Diagram
-accTitle: Accessible Title
-accDescr: This is an accessible description
-"Root"
-  "Child": 100`);
-      expectNoErrorsOrAlternatives(result);
-      expect(result.value.$type).toBe('Treemap');
-      // We can't directly test these properties due to how Langium processes TitleAndAccessibilities
-      expect(result.value.TreemapRows).toHaveLength(2);
-    });
-  });
-
-  describe('ClassDef and Class Statements', () => {
-    it('should parse a classDef statement', () => {
-      const result = parse('treemap\nclassDef myClass fill:red;');
-
-      // We know there are parser errors with styleText as the Langium grammar can't handle it perfectly
-      // Check that we at least got the right type and className
-      expect(result.value.TreemapRows).toHaveLength(1);
-      const classDefElement = result.value.TreemapRows[0];
-
-      expect(classDefElement.$type).toBe('ClassDefStatement');
-      // We can't directly test the ClassDefStatement properties due to type issues
-      // but we can verify the basic structure is correct
-    });
-
-    it('should parse a classDef statement without semicolon', () => {
-      const result = parse('treemap\nclassDef myClass fill:red');
-
-      // Skip error assertion
-
-      const classDefElement = result.value.TreemapRows[0];
-      expect(classDefElement.$type).toBe('ClassDefStatement');
-      // We can't directly test the ClassDefStatement properties due to type issues
-      // but we can verify the basic structure is correct
-    });
-
-    it('should parse a classDef statement with multiple style properties', () => {
-      const result = parse(
-        'treemap\nclassDef complexClass fill:blue stroke:#ff0000 stroke-width:2px'
-      );
-
-      // Skip error assertion
-
-      const classDefElement = result.value.TreemapRows[0];
-      expect(classDefElement.$type).toBe('ClassDefStatement');
-      // We can't directly test the ClassDefStatement properties due to type issues
-      // but we can verify the basic structure is correct
-    });
-
-    it('should parse a class assignment statement', () => {
-      const result = parse('treemap\nclass myNode myClass');
-
-      // Skip error check since parsing is not fully implemented yet
-      // expectNoErrorsOrAlternatives(result);
-
-      // For now, just expect that something is returned, even if it's empty
-      expect(result.value).toBeDefined();
-    });
-
-    it('should parse a class assignment statement with semicolon', () => {
-      const result = parse('treemap\nclass myNode myClass;');
-
-      // Skip error check since parsing is not fully implemented yet
-      // expectNoErrorsOrAlternatives(result);
-
-      // For now, just expect that something is returned, even if it's empty
-      expect(result.value).toBeDefined();
-    });
-
-    it('should parse a section with inline class style using :::', () => {
-      const result = parse('treemap\n"My Section":::sectionClass');
-      expectNoErrorsOrAlternatives(result);
-
-      const row = result.value.TreemapRows.find(
-        (element): element is TreemapRow => element.$type === 'TreemapRow'
-      );
-
-      expect(row).toBeDefined();
-      if (row?.item) {
-        expect(row.item.$type).toBe('Section');
-        const section = row.item as Section;
-        expect(section.name).toBe('My Section');
-        expect(section.classSelector).toBe('sectionClass');
-      }
-    });
-
-    it('should parse a leaf with inline class style using :::', () => {
-      const result = parse('treemap\n"My Leaf" : 100:::leafClass');
-      expectNoErrorsOrAlternatives(result);
-
-      const row = result.value.TreemapRows.find(
-        (element): element is TreemapRow => element.$type === 'TreemapRow'
-      );
-
-      expect(row).toBeDefined();
-      if (row?.item) {
-        expect(row.item.$type).toBe('Leaf');
-        const leaf = row.item as Leaf;
-        expect(leaf.name).toBe('My Leaf');
-        expect(leaf.value).toBe(100);
-        expect(leaf.classSelector).toBe('leafClass');
-      }
-    });
-  });
-});

packages/tiny/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/tiny/package.json

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

scripts/coverage.ts

@@ -3,9 +3,7 @@ import { cp } from 'fs/promises';
 
 const main = async () => {
   const coverageDir = 'coverage';
-  const coverageFiles = ['vitest', 'cypress'].map(
-    (dir) => `${coverageDir}/${dir}/coverage-final.json`
-  );
+  const coverageFiles = ['vitest'].map((dir) => `${coverageDir}/${dir}/coverage-final.json`);
 
   //copy coverage files from vitest and cypress to coverage folder
   await Promise.all(