fix(layout-elk): prevent NaN paths from duplicate points

Merge branch 'mindmaps-and-elk-updates' of github.com:mermaid-js/mermaid into mindmaps-and-elk-updates
Adjusted elk-config
2025-09-06 17:16:43 +02:00 · 2025-09-05 16:24:32 +02:00 · 2025-09-05 15:51:40 +02:00 · 2025-09-05 15:50:58 +02:00 · 2025-09-05 19:16:43 +05:30 · 2025-09-05 15:21:45 +02:00
23 changed files with 1072 additions and 607 deletions
--- a/.changeset/clean-wolves-turn.md
+++ b/.changeset/clean-wolves-turn.md
@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Render newlines as spaces in class diagrams
--- a/.changeset/crazy-loops-matter.md
+++ b/.changeset/crazy-loops-matter.md
@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Handle arrows correctly when auto number is enabled
--- a/.changeset/hungry-baths-glow.md
+++ b/.changeset/hungry-baths-glow.md
@@ -0,0 +1,5 @@
+---
+'mermaid': minor
+---
+
+feat: Added support for new participant types (`actor`, `boundary`, `control`, `entity`, `database`, `collections`, `queue`) in `sequenceDiagram`.
--- a/.changeset/hungry-guests-drive.md
+++ b/.changeset/hungry-guests-drive.md
@@ -0,0 +1,7 @@
+---
+'mermaid': minor
+'@mermaid-js/layout-tidy-tree': minor
+'@mermaid-js/layout-elk': minor
+---
+
+feat: Update mindmap rendering to support multiple layouts, improved edge intersections, and new shapes
--- a/.cspell/mermaid-terms.txt
+++ b/.cspell/mermaid-terms.txt
@@ -8,6 +8,7 @@ compositTitleSize
 cose
 curv
 doublecircle
+elem
 elems
 gantt
 gitgraph
--- a/cypress/integration/rendering/mindmap.spec.ts
+++ b/cypress/integration/rendering/mindmap.spec.ts
@@ -228,21 +228,25 @@ root
        `mindmap
    id1[\`**Start** with
    a second line 😎\`]
-      id2[\`The dog in **the** hog... a *very long text* about it Word!\`]`
+      id2[\`The dog in **the** hog... a *very long text* about it
+Word!\`]
+`
      );
    });
  });
  describe('Include char sequence "graph" in text (#6795)', () => {
    it('has a label with char sequence "graph"', () => {
      imgSnapshotTest(
-        ` mindmap
+        `
+        mindmap
          root
            Photograph
              Waterfall
              Landscape
            Geography
              Mountains
-              Rocks`,
+              Rocks
+        `,
        { flowchart: { defaultRenderer: 'elk' } }
      );
    });
--- a/cypress/platform/knsv2.html
+++ b/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;
            } */
@@ -130,77 +105,61 @@
  </head>

  <body>
-    <pre id="diagram4" class="mermaid2">
-      ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap))
-        Origins
-          Long history
-          ::icon(fa fa-book)
-          Popularisation
-            British popular psychology author Tony Buzan
-        Research
-          On effectiveness<br/>and features
-          On Automatic creation
-            Uses
-                Creative techniques
-                Strategic planning
-                Argument mapping
-        Tools
-          Pen and paper
-          Mermaid
-
-    </pre>
    <pre id="diagram4" class="mermaid">
      ---
      config:
-        layout: tidy-tree
+        layout: elk
      ---
-      mindmap
-      root((mindmap is a long thing))
-        A
-        B
-        C
-        D
-      </pre
+      flowchart-elk TB
+      internet
+      nat
+      router
+      compute1
+
+      subgraph project
+      router
+      nat
+        subgraph subnet1
+          compute1
+        end
+      end
+
+      %% router --> subnet1
+      subnet1  --> nat
+      %% nat --> internet
+</pre
    >
    <pre id="diagram4" class="mermaid">
      ---
      config:
-        layout: tidy-tree
+        layout: elk
      ---
-      mindmap
-      root((mindmap))
-        A
-        B
-      </pre
+      flowchart-elk TB
+      internet
+      nat
+      router
+      lb1
+      lb2
+      compute1
+      compute2
+      subgraph project
+      router
+      nat
+        subgraph subnet1
+          compute1
+          lb1
+        end
+        subgraph subnet2
+          compute2
+          lb2
+        end
+      end
+      internet --> router
+      router --> subnet1 & subnet2
+      subnet1 & subnet2 --> nat --> internet
+</pre
    >
    <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap))
-        A
-          a
-            apa[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-            apa2[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          b
-          c
-          d
-        B
-            apa3[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-        D
-          apa5[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          apa4[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-
-    </pre>
-
-    <pre id="diagram4" class="mermaid">
 ---
 config:
  layout: elk
@@ -227,91 +186,35 @@ treemap
    "Leaf 2.2": 25
    "Leaf 2.3": 12

-classDef class1   fill:red,color:blue,stroke:#FFD600;
+    </pre>
+    <pre id="diagram5" class="mermaid">
+      ---
+      config:
+        layout: elk
+        flowchart:
+          curve: rounded
+      ---
+      flowchart LR
+          I["fa:fa-code Text"] -- Mermaid js --> D["Use<br/>the<br/>editor!"]
+          I --> D & D
+          D@{ shape: question}
+          I@{ shape: question}

-
-</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>
    <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">
      ---
      config:
        layout: tidy-tree
      ---
      mindmap
      root((mindmap))
-        a
-          apa[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          apa2[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-        b
-          apa3[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          apa4[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-
-
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-      ---
-      config:
-        layout: tidy-tree
-      ---
-      flowchart TB
-          A --> n0["1"]
-          A --> n1["2"]
-          A --> n2["3"]
-          A --> n3["4"] --> Q & R & S & T
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-      ---
-      config:
-        layout: elk
-      ---
-      flowchart TB
-          A --> n0["1"]
-          A --> n1["2"]
-          A --> n2["3"]
-          A --> n3["4"] --> Q & R & S & T
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-      ---
-      config:
-        layout: dagre
-      ---
-      mindmap
-      root((mindmap is a long thing))
        Origins
          Long history
          ::icon(fa fa-book)
          Popularisation
            British popular psychology author Tony Buzan
        Research
-          On effectiveness&lt;br/>and features
+          On effectiveness<br/>and features
          On Automatic creation
            Uses
                Creative techniques
@@ -320,128 +223,112 @@ treemap
        Tools
          Pen and paper
          Mermaid
+
    </pre>
-    <pre id="diagram4" class="mermaid2">
-      ---
-      config:
-        layout: cose-bilkent
-      ---
-      mindmap
-      root((mindmap))
-        Origins
-          Long history
-          ::icon(fa fa-book)
-          Popularisation
-            British popular psychology author Tony Buzan
-        Research
-          On effectiveness&lt;br/>and features
-          On Automatic creation
-            Uses
-                Creative techniques
-                Strategic planning
-                Argument mapping
-        Tools
-          Pen and paper
-          Mermaid
-    </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
      ---
      config:
        layout: elk
-      ---
-      mindmap
-      root((mindmap))
-        Origins
-          Long history
-          ::icon(fa fa-book)
-          Popularisation
-            British popular psychology author Tony Buzan
-        Research
-          On effectiveness&lt;br/>and features
-          On Automatic creation
-            Uses
-                Creative techniques
-                Strategic planning
-                Argument mapping
-        Tools
-          Pen and paper
-          Mermaid
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-      ---
-      config:
-        layout: cose-bilkent
+        flowchart:
+          curve: linear
      ---
      flowchart LR
-      root{mindmap} --- Origins --- Europe
-      Origins --> Asia
-      root --- Background --- Rich
-      Background --- Poor
-      subgraph apa
-        Background
-        Poor
-      end
-
-
-
+          A[A] --> B[B]
+          A[A] --- B([C])
+          A@{ shape: diamond}
+          %%B@{ shape: diamond}

    </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
      ---
      config:
        layout: elk
+        flowchart:
+          curve: linear
      ---
      flowchart LR
-      root{mindmap} --- Origins --- Europe
-      Origins --> Asia
-      root --- Background --- Rich
-      Background --- Poor
-
-
-
+          A[A] -- Mermaid js --> B[B]
+          A[A] -- Mermaid js --- B[B]
+          A@{ shape: diamond}
+          B@{ shape: diamond}

    </pre>
-    <pre id="diagram4" class="mermaid2">
-      flowchart
-        D(("for D"))
-    </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
+      ---
+      config:
+        layout: elk
+        flowchart:
+          curve: rounded
+      ---
      flowchart LR
-        A e1@==> B
-        e1@{ animate: true}
+          D["Use the editor"] -- Mermaid js --> I["fa:fa-code Text"]
+          I --> D & D
+          D@{ shape: question}
+          I@{ shape: question}
    </pre>
-    <pre id="diagram4" class="mermaid2">
-flowchart LR
-  A e1@--> B
-  classDef animate stroke-width:2,stroke-dasharray:10\,8,stroke-dashoffset:-180,animation: edge-animation-frame 6s linear infinite, stroke-linecap: round
-  class e1 animate
-    </pre>
-    <h2>infinite</h2>
-    <pre id="diagram4" class="mermaid2">
-flowchart LR
-  A e1@--> B
-  classDef animate stroke-dasharray: 9\,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
-  class e1 animate
-    </pre>
-    <h2>Mermaid - edge-animation-slow</h2>
-    <pre id="diagram4" class="mermaid2">
-flowchart LR
-  A e1@--> B
-e1@{ animation: fast}
-    </pre>
-    <h2>Mermaid - edge-animation-fast</h2>
-    <pre id="diagram4" class="mermaid2">
-flowchart LR
-  A e1@--> B
-  classDef animate stroke-dasharray: 1000,stroke-dashoffset: 1000,animation: dash 10s linear;
-  class e1 edge-animation-fast
+    <pre id="diagram4" class="mermaid">
+      ---
+      config:
+        layout: elk
+        flowchart:
+          curve: rounded
+        elk:
+          nodePlacementStrategy: NETWORK_SIMPLEX
+      ---
+      flowchart LR
+          D["Use the editor"] -- Mermaid js --> I["fa:fa-code Text"]
+          D --> I & I
+          a["a"]
+          D@{ shape: trap-b}
+          I@{ shape: lean-l}
    </pre>
+    <pre id="diagram4" class="mermaid">
+---
+config:
+  layout: elk

-    <pre id="diagram4" class="mermaid2">
+---
+flowchart LR
+ %% subgraph s1["Untitled subgraph"]
+        C["Evaluate"]
+ %% end

-info    </pre
-    >
-    <pre id="diagram4" class="mermaid2">
+    B --> C
+    </pre>
+    <pre id="diagram4" class="mermaid">
+---
+config:
+  layout: elk
+  flowchart:
+    //curve: linear
+---
+flowchart LR
+%% A ==> B
+%% A2 --> B2
+A{A} --> B((Bo boo)) & B & B & B
+
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      ---
+      config:
+        layout: elk
+        theme: default
+        look: classic
+      ---
+      flowchart LR
+       subgraph s1["APA"]
+              D{"Use the editor"}
+        end
+       subgraph S2["S2"]
+              s1
+              I>"fa:fa-code Text"]
+              E["E"]
+        end
+          D -- Mermaid js --> I
+          D --> I & E
+          E --> I
+    </pre>
+    <pre id="diagram4" class="mermaid">
 ---
 config:
  layout: elk
@@ -466,7 +353,7 @@ config:
      end
      end
    </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 ---
 config:
  layout: elk
@@ -479,45 +366,7 @@ config:
      D-->I
      D-->I
    </pre>
-    <pre id="diagram4" class="mermaid2">
---
-config:
-  layout: elk
---
-      flowchart LR
-      a
-      subgraph s0["APA"]
-      subgraph s8["APA"]
-      subgraph s1["APA"]
-        D{"X"}
-        E[Q]
-      end
-      subgraph s3["BAPA"]
-        F[Q]
-        I
-      end
-            D --> I
-            D --> I
-            D --> I
-
-      I{"X"}
-      end
-      end
-    </pre>
-    <pre id="diagram4" class="mermaid2">
---
-config:
-  layout: elk
---
-      flowchart LR
-      a
-        D{"Use the editor"}
-
-      D -- Mermaid js --> I{"fa:fa-code Text"}
-      D-->I
-      D-->I
-    </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 ---
 config:
  layout: elk
@@ -556,7 +405,7 @@ flowchart LR
    n8@{ shape: rect}

    </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 ---
 config:
  layout: elk
@@ -572,7 +421,7 @@ flowchart LR


    </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 ---
 config:
  layout: elk
@@ -581,7 +430,7 @@ flowchart LR
    A{A} --> B & C
 </pre
    >
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 ---
 config:
  layout: elk
@@ -593,7 +442,7 @@ flowchart LR
    end
 </pre
    >
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 ---
 config:
  layout: elk
@@ -611,7 +460,7 @@ flowchart LR


    </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 ---
 config:
  kanban:
@@ -630,81 +479,81 @@ kanban
    task3[💻 Develop login feature]@{ ticket: 103 }

    </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 flowchart LR
 nA[Default] --> A@{ icon: 'fa:bell', form: 'rounded' }

    </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 flowchart LR
 nA[Style] --> A@{ icon: 'fa:bell', form: 'rounded' }
 style A fill:#f9f,stroke:#333,stroke-width:4px
    </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 flowchart LR
 nA[Class] --> A@{ icon: 'fa:bell', form: 'rounded' }
 A:::AClass
 classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
    </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 flowchart LR
  nA[Class] --> A@{ icon: 'logos:aws', form: 'rounded' }

    </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 flowchart LR
 nA[Default] --> A@{ icon: 'fa:bell', form: 'square' }

    </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 flowchart LR
 nA[Style] --> A@{ icon: 'fa:bell', form: 'square' }
 style A fill:#f9f,stroke:#333,stroke-width:4px
    </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 flowchart LR
 nA[Class] --> A@{ icon: 'fa:bell', form: 'square' }
 A:::AClass
 classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
    </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 flowchart LR
  nA[Class] --> A@{ icon: 'logos:aws', form: 'square' }

    </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 flowchart LR
 nA[Default] --> A@{ icon: 'fa:bell', form: 'circle' }

    </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 flowchart LR
 nA[Style] --> A@{ icon: 'fa:bell', form: 'circle' }
 style A fill:#f9f,stroke:#333,stroke-width:4px
    </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 flowchart LR
 nA[Class] --> A@{ icon: 'fa:bell', form: 'circle' }
 A:::AClass
 classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
    </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 flowchart LR
  nA[Class] --> A@{ icon: 'logos:aws', form: 'circle' }
  A:::AClass
  classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
    </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 flowchart LR
  nA[Style] --> A@{ icon: 'logos:aws', form: 'circle' }
  style A fill:#f9f,stroke:#333,stroke-width:4px
    </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 kanban
  id2[In progress]
    docs[Create Blog about the new diagram]@{ priority: 'Very Low', ticket: MC-2037, assigned: 'knsv' }
    </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 ---
 config:
  kanban:
@@ -768,18 +617,22 @@ kanban
        alert('It worked');
      }
      await mermaid.initialize({
-        // theme: 'forest',
+        // theme: 'base',
        // theme: 'default',
        // theme: 'forest',
        // handDrawnSeed: 12,
        // look: 'handDrawn',
        // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
        // layout: 'dagre',
-        // layout: 'elk',
+        layout: 'elk',
        // layout: 'fixed',
        // htmlLabels: false,
        flowchart: { titleTopMargin: 10 },
-        fontFamily: "'Recursive', sans-serif",
+
+        // fontFamily: 'Caveat',
+        // fontFamily: 'Kalam',
+        // fontFamily: 'courier',
+        fontFamily: 'arial',
        sequence: {
          actorFontFamily: 'courier',
          noteFontFamily: 'courier',
--- a/docs/config/setup/mermaid/interfaces/LayoutLoaderDefinition.md
+++ b/docs/config/setup/mermaid/interfaces/LayoutLoaderDefinition.md
@@ -10,7 +10,7 @@

 # Interface: LayoutLoaderDefinition

-Defined in: [packages/mermaid/src/rendering-util/render.ts:21](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L21)
+Defined in: [packages/mermaid/src/rendering-util/render.ts:24](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L24)

 ## Properties

@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/rendering-util/render.ts:21](https://github.co

 > `optional` **algorithm**: `string`

-Defined in: [packages/mermaid/src/rendering-util/render.ts:24](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L24)
+Defined in: [packages/mermaid/src/rendering-util/render.ts:27](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L27)

 ---

@@ -26,7 +26,7 @@ Defined in: [packages/mermaid/src/rendering-util/render.ts:24](https://github.co

 > **loader**: `LayoutLoader`

-Defined in: [packages/mermaid/src/rendering-util/render.ts:23](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L23)
+Defined in: [packages/mermaid/src/rendering-util/render.ts:26](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L26)

 ---

@@ -34,4 +34,4 @@ Defined in: [packages/mermaid/src/rendering-util/render.ts:23](https://github.co

 > **name**: `string`

-Defined in: [packages/mermaid/src/rendering-util/render.ts:22](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L22)
+Defined in: [packages/mermaid/src/rendering-util/render.ts:25](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L25)
--- a/docs/config/setup/mermaid/interfaces/RenderOptions.md
+++ b/docs/config/setup/mermaid/interfaces/RenderOptions.md
@@ -10,7 +10,7 @@

 # Interface: RenderOptions

-Defined in: [packages/mermaid/src/rendering-util/render.ts:7](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L7)
+Defined in: [packages/mermaid/src/rendering-util/render.ts:10](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L10)

 ## Properties

@@ -18,4 +18,4 @@ Defined in: [packages/mermaid/src/rendering-util/render.ts:7](https://github.com

 > `optional` **algorithm**: `string`

-Defined in: [packages/mermaid/src/rendering-util/render.ts:8](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L8)
+Defined in: [packages/mermaid/src/rendering-util/render.ts:11](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L11)
--- a/packages/mermaid-layout-elk/CHANGELOG.md
+++ b/packages/mermaid-layout-elk/CHANGELOG.md
@@ -1,16 +1,5 @@
 # @mermaid-js/layout-elk

-## 0.2.0
-
-### Minor Changes
-
- [#6802](https://github.com/mermaid-js/mermaid/pull/6802) [`c8e5027`](https://github.com/mermaid-js/mermaid/commit/c8e50276e877c4de7593a09ec458c99353e65af8) Thanks [@darshanr0107](https://github.com/darshanr0107)! - feat: Update mindmap rendering to support multiple layouts, improved edge intersections, and new shapes
-
-### Patch Changes
-
- Updated dependencies [[`33bc4a0`](https://github.com/mermaid-js/mermaid/commit/33bc4a0b4e2ca6d937bb0a8c4e2081b1362b2800), [`e0b45c2`](https://github.com/mermaid-js/mermaid/commit/e0b45c2d2b41c2a9038bf87646fa3ccd7560eb20), [`012530e`](https://github.com/mermaid-js/mermaid/commit/012530e98e9b8b80962ab270b6bb3b6d9f6ada05), [`c8e5027`](https://github.com/mermaid-js/mermaid/commit/c8e50276e877c4de7593a09ec458c99353e65af8)]:
-  - mermaid@11.11.0
-
 ## 0.1.9

 ### Patch Changes
--- a/packages/mermaid-layout-elk/package.json
+++ b/packages/mermaid-layout-elk/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@mermaid-js/layout-elk",
-  "version": "0.2.0",
+  "version": "0.1.9",
  "description": "ELK layout engine for mermaid",
  "module": "dist/mermaid-layout-elk.core.mjs",
  "types": "dist/layouts.d.ts",
--- a/packages/mermaid-layout-elk/src/tests/geometry.spec.ts
+++ b/packages/mermaid-layout-elk/src/tests/geometry.spec.ts
@@ -0,0 +1,67 @@
+import { describe, it, expect } from 'vitest';
+import {
+  intersection,
+  ensureTrulyOutside,
+  makeInsidePoint,
+  tryNodeIntersect,
+  replaceEndpoint,
+  type RectLike,
+  type P,
+} from '../geometry.js';
+
+const approx = (a: number, b: number, eps = 1e-6) => Math.abs(a - b) < eps;
+
+describe('geometry helpers', () => {
+  it('intersection: vertical approach hits bottom border', () => {
+    const rect: RectLike = { x: 0, y: 0, width: 100, height: 50 };
+    const h = rect.height / 2; // 25
+    const outside: P = { x: 0, y: 100 };
+    const inside: P = { x: 0, y: 0 };
+    const res = intersection(rect, outside, inside);
+    expect(approx(res.x, 0)).toBe(true);
+    expect(approx(res.y, h)).toBe(true);
+  });
+
+  it('ensureTrulyOutside nudges near-boundary point outward', () => {
+    const rect: RectLike = { x: 0, y: 0, width: 100, height: 50 };
+    // near bottom boundary (y ~ h)
+    const near: P = { x: 0, y: rect.height / 2 - 0.2 };
+    const out = ensureTrulyOutside(rect, near, 10);
+    expect(out.y).toBeGreaterThan(rect.height / 2);
+  });
+
+  it('makeInsidePoint keeps x for vertical and y from center', () => {
+    const rect: RectLike = { x: 10, y: 5, width: 100, height: 50 };
+    const outside: P = { x: 10, y: 40 };
+    const center: P = { x: 99, y: -123 }; // center y should be used
+    const inside = makeInsidePoint(rect, outside, center);
+    expect(inside.x).toBe(outside.x);
+    expect(inside.y).toBe(center.y);
+  });
+
+  it('tryNodeIntersect returns null for wrong-side intersections', () => {
+    const rect: RectLike = { x: 0, y: 0, width: 100, height: 50 };
+    const outside: P = { x: -50, y: 0 };
+    const node = { intersect: () => ({ x: 10, y: 0 }) } as any; // right side of center
+    const res = tryNodeIntersect(node, rect, outside);
+    expect(res).toBeNull();
+  });
+
+  it('replaceEndpoint dedup removes end/start appropriately', () => {
+    const pts: P[] = [
+      { x: 0, y: 0 },
+      { x: 1, y: 1 },
+    ];
+    // remove duplicate end
+    replaceEndpoint(pts, 'end', { x: 1, y: 1 });
+    expect(pts.length).toBe(1);
+
+    const pts2: P[] = [
+      { x: 0, y: 0 },
+      { x: 1, y: 1 },
+    ];
+    // remove duplicate start
+    replaceEndpoint(pts2, 'start', { x: 0, y: 0 });
+    expect(pts2.length).toBe(1);
+  });
+});
--- a/packages/mermaid-layout-elk/src/geometry.ts
+++ b/packages/mermaid-layout-elk/src/geometry.ts
@@ -0,0 +1,194 @@
+/* Geometry utilities extracted from render.ts for reuse and testing */
+
+export interface P {
+  x: number;
+  y: number;
+}
+
+export interface RectLike {
+  x: number; // center x
+  y: number; // center y
+  width: number;
+  height: number;
+  padding?: number;
+}
+
+export interface NodeLike {
+  intersect?: (p: P) => P | null;
+}
+
+export const EPS = 1;
+export const PUSH_OUT = 10;
+
+/**
+ * Compute intersection between a rectangle (center x/y, width/height) and the line
+ * segment from insidePoint -\> outsidePoint. Returns the point on the rectangle border.
+ *
+ * This version avoids snapping to outsidePoint when certain variables evaluate to 0
+ * (previously caused vertical top/bottom cases to miss the border). It only enforces
+ * axis-constant behavior for purely vertical/horizontal approaches.
+ */
+export const intersection = (node: RectLike, outsidePoint: P, insidePoint: P): P => {
+  const x = node.x;
+  const y = node.y;
+
+  const dx = Math.abs(x - insidePoint.x);
+  const w = node.width / 2;
+  let r = insidePoint.x < outsidePoint.x ? w - dx : w + dx;
+  const h = node.height / 2;
+
+  const Q = Math.abs(outsidePoint.y - insidePoint.y);
+  const R = Math.abs(outsidePoint.x - insidePoint.x);
+
+  if (Math.abs(y - outsidePoint.y) * w > Math.abs(x - outsidePoint.x) * h) {
+    // Intersection is top or bottom of rect.
+    const q = insidePoint.y < outsidePoint.y ? outsidePoint.y - h - y : y - h - outsidePoint.y;
+    r = (R * q) / Q;
+    const res = {
+      x: insidePoint.x < outsidePoint.x ? insidePoint.x + r : insidePoint.x - R + r,
+      y: insidePoint.y < outsidePoint.y ? insidePoint.y + Q - q : insidePoint.y - Q + q,
+    };
+
+    // Keep axis-constant special-cases only
+    if (R === 0) {
+      res.x = outsidePoint.x;
+    }
+    if (Q === 0) {
+      res.y = outsidePoint.y;
+    }
+    return res;
+  } else {
+    // Intersection on sides of rect
+    if (insidePoint.x < outsidePoint.x) {
+      r = outsidePoint.x - w - x;
+    } else {
+      r = x - w - outsidePoint.x;
+    }
+    const q = (Q * r) / R;
+    let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : insidePoint.x - R + r;
+    let _y = insidePoint.y < outsidePoint.y ? insidePoint.y + q : insidePoint.y - q;
+
+    // Only handle axis-constant cases
+    if (R === 0) {
+      _x = outsidePoint.x;
+    }
+    if (Q === 0) {
+      _y = outsidePoint.y;
+    }
+
+    return { x: _x, y: _y };
+  }
+};
+
+export const outsideNode = (node: RectLike, point: P): boolean => {
+  const x = node.x;
+  const y = node.y;
+  const dx = Math.abs(point.x - x);
+  const dy = Math.abs(point.y - y);
+  const w = node.width / 2;
+  const h = node.height / 2;
+  return dx >= w || dy >= h;
+};
+
+export const ensureTrulyOutside = (bounds: RectLike, p: P, push = PUSH_OUT): P => {
+  const dx = Math.abs(p.x - bounds.x);
+  const dy = Math.abs(p.y - bounds.y);
+  const w = bounds.width / 2;
+  const h = bounds.height / 2;
+  if (Math.abs(dx - w) < EPS || Math.abs(dy - h) < EPS) {
+    const dirX = p.x - bounds.x;
+    const dirY = p.y - bounds.y;
+    const len = Math.sqrt(dirX * dirX + dirY * dirY);
+    if (len > 0) {
+      return {
+        x: bounds.x + (dirX / len) * (len + push),
+        y: bounds.y + (dirY / len) * (len + push),
+      };
+    }
+  }
+  return p;
+};
+
+export const makeInsidePoint = (bounds: RectLike, outside: P, center: P): P => {
+  const isVertical = Math.abs(outside.x - bounds.x) < EPS;
+  const isHorizontal = Math.abs(outside.y - bounds.y) < EPS;
+  return {
+    x: isVertical
+      ? outside.x
+      : outside.x < bounds.x
+        ? bounds.x - bounds.width / 4
+        : bounds.x + bounds.width / 4,
+    y: isHorizontal ? outside.y : center.y,
+  };
+};
+
+export const tryNodeIntersect = (node: NodeLike, bounds: RectLike, outside: P): P | null => {
+  if (!node?.intersect) {
+    return null;
+  }
+  const res = node.intersect(outside);
+  if (!res) {
+    return null;
+  }
+  const wrongSide =
+    (outside.x < bounds.x && res.x > bounds.x) || (outside.x > bounds.x && res.x < bounds.x);
+  if (wrongSide) {
+    return null;
+  }
+  const dist = Math.hypot(outside.x - res.x, outside.y - res.y);
+  if (dist <= EPS) {
+    return null;
+  }
+  return res;
+};
+
+export const fallbackIntersection = (bounds: RectLike, outside: P, center: P): P => {
+  const inside = makeInsidePoint(bounds, outside, center);
+  return intersection(bounds, outside, inside);
+};
+
+export const computeNodeIntersection = (
+  node: NodeLike,
+  bounds: RectLike,
+  outside: P,
+  center: P
+): P => {
+  const outside2 = ensureTrulyOutside(bounds, outside);
+  return tryNodeIntersect(node, bounds, outside2) ?? fallbackIntersection(bounds, outside2, center);
+};
+
+export const replaceEndpoint = (
+  points: P[],
+  which: 'start' | 'end',
+  value: P | null | undefined,
+  tol = 0.1
+) => {
+  if (!value || points.length === 0) {
+    return;
+  }
+
+  if (which === 'start') {
+    if (
+      points.length > 0 &&
+      Math.abs(points[0].x - value.x) < tol &&
+      Math.abs(points[0].y - value.y) < tol
+    ) {
+      // duplicate start remove it
+      points.shift();
+    } else {
+      points[0] = value;
+    }
+  } else {
+    const last = points.length - 1;
+    if (
+      points.length > 0 &&
+      Math.abs(points[last].x - value.x) < tol &&
+      Math.abs(points[last].y - value.y) < tol
+    ) {
+      // duplicate end remove it
+      points.pop();
+    } else {
+      points[last] = value;
+    }
+  }
+};
--- a/packages/mermaid-layout-elk/src/render.ts
+++ b/packages/mermaid-layout-elk/src/render.ts
@@ -1,11 +1,25 @@
+import type { InternalHelpers, LayoutData, RenderOptions, SVG, SVGGroup } from 'mermaid';
+// @ts-ignore TODO: Investigate D3 issue
 import { curveLinear } from 'd3';
 import ELK from 'elkjs/lib/elk.bundled.js';
-import type { InternalHelpers, LayoutData, RenderOptions, SVG, SVGGroup } from 'mermaid';
 import { type TreeData, findCommonAncestor } from './find-common-ancestor.js';

+import {
+  type P,
+  type RectLike,
+  outsideNode,
+  computeNodeIntersection,
+  replaceEndpoint,
+} from './geometry.js';
+
 type Node = LayoutData['nodes'][number];
-// Used to calculate distances in order to avoid floating number rounding issues when comparing floating numbers
-const epsilon = 0.0001;
+
+// Minimal structural type to avoid depending on d3 Selection typings
+interface D3Selection<T extends Element> {
+  node(): T | null;
+  attr(name: string, value: string): D3Selection<T>;
+}
+
 interface LabelData {
  width: number;
  height: number;
@@ -16,18 +30,9 @@ interface LabelData {
 interface NodeWithVertex extends Omit<Node, 'domId'> {
  children?: LayoutData['nodes'];
  labelData?: LabelData;
-  domId?: Node['domId'] | SVGGroup | d3.Selection<SVGAElement, unknown, Element | null, unknown>;
-}
-interface Point {
-  x: number;
-  y: number;
-}
-function distance(p1?: Point, p2?: Point): number {
-  if (!p1 || !p2) {
-    return 0;
-  }
-  return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
+  domId?: D3Selection<SVGAElement | SVGGElement>;
 }
+
 export const render = async (
  data4Layout: LayoutData,
  svg: SVG,
@@ -61,39 +66,26 @@ export const render = async (

    // Add the element to the DOM
    if (!node.isGroup) {
-      // Create a clean node object for ELK with only the properties it expects
-      const child: NodeWithVertex = {
-        id: node.id,
-        width: node.width,
-        height: node.height,
-        // Store the original node data for later use
-        label: node.label,
-        isGroup: node.isGroup,
-        shape: node.shape,
-        padding: node.padding,
-        cssClasses: node.cssClasses,
-        cssStyles: node.cssStyles,
-        look: node.look,
-        // Include parentId for subgraph processing
-        parentId: node.parentId,
-      };
+      const child = node as NodeWithVertex;
      graph.children.push(child);
-      nodeDb[node.id] = child;
+      nodeDb[node.id] = node;

      const childNodeEl = await insertNode(nodeEl, node, { config, dir: node.dir });
      const boundingBox = childNodeEl.node()!.getBBox();
      // Store the domId separately for rendering, not in the ELK graph
      child.domId = childNodeEl;
-      child.calcIntersect = node.calcIntersect;
      child.width = boundingBox.width;
      child.height = boundingBox.height;
    } else {
      // A subgraph
      const child: NodeWithVertex & { children: NodeWithVertex[] } = {
        ...node,
+        domId: undefined,
        children: [],
      };
+      // Let elk render with the copy
      graph.children.push(child);
+      // Save the original containing the intersection function
      nodeDb[node.id] = child;
      await addVertices(nodeEl, nodeArr, child, node.id);

@@ -168,7 +160,7 @@ export const render = async (
            height: node.height,
          };
          if (node.isGroup) {
-            log.debug('id abc88 subgraph = ', node.id, node.x, node.y, node.labelData);
+            log.debug('Id abc88 subgraph = ', node.id, node.x, node.y, node.labelData);
            const subgraphEl = subgraphsEl.insert('g').attr('class', 'subgraph');
            // TODO use faster way of cloning
            const clusterNode = JSON.parse(JSON.stringify(node));
@@ -177,10 +169,10 @@ export const render = async (
            clusterNode.width = Math.max(clusterNode.width, node.labelData.width);
            await insertCluster(subgraphEl, clusterNode);

-            log.debug('id (UIO)= ', node.id, node.width, node.shape, node.labels);
+            log.debug('Id (UIO)= ', node.id, node.width, node.shape, node.labels);
          } else {
            log.info(
-              'id NODE = ',
+              'Id NODE = ',
              node.id,
              node.x,
              node.y,
@@ -222,25 +214,19 @@ export const render = async (
      });
    });

-    subgraphs.forEach(function (subgraph: { id: string | number }) {
-      const data: any = { id: subgraph.id };
-      if (parentLookupDb.parentById[subgraph.id] !== undefined) {
-        data.parent = parentLookupDb.parentById[subgraph.id];
-      }
-    });
    return parentLookupDb;
  };

  const getEdgeStartEndPoint = (edge: any) => {
-    const source: any = edge.start;
-    const target: any = edge.end;
+    // edge.start and edge.end are IDs (string/number) in our layout data
+    const sourceId: string | number = edge.start;
+    const targetId: string | number = edge.end;

-    // Save the original source and target
-    const sourceId = source;
-    const targetId = target;
+    const source = sourceId;
+    const target = targetId;

-    const startNode = nodeDb[edge.start.id];
-    const endNode = nodeDb[edge.end.id];
+    const startNode = nodeDb[sourceId];
+    const endNode = nodeDb[targetId];

    if (!startNode || !endNode) {
      return { source, target };
@@ -263,6 +249,112 @@ export const render = async (
  /**
   * Add edges to graph based on parsed graph definition
   */
+  // Edge helper maps and utilities (de-duplicated)
+  const ARROW_MAP: Record<string, [string, string]> = {
+    arrow_open: ['arrow_open', 'arrow_open'],
+    arrow_cross: ['arrow_open', 'arrow_cross'],
+    double_arrow_cross: ['arrow_cross', 'arrow_cross'],
+    arrow_point: ['arrow_open', 'arrow_point'],
+    double_arrow_point: ['arrow_point', 'arrow_point'],
+    arrow_circle: ['arrow_open', 'arrow_circle'],
+    double_arrow_circle: ['arrow_circle', 'arrow_circle'],
+  };
+
+  const computeStroke = (
+    stroke: string | undefined,
+    defaultStyle?: string,
+    defaultLabelStyle?: string
+  ) => {
+    // Defaults correspond to 'normal'
+    let thickness = 'normal';
+    let pattern = 'solid';
+    let style = '';
+    let labelStyle = '';
+
+    if (stroke === 'dotted') {
+      pattern = 'dotted';
+      style = 'fill:none;stroke-width:2px;stroke-dasharray:3;';
+    } else if (stroke === 'thick') {
+      thickness = 'thick';
+      style = 'stroke-width: 3.5px;fill:none;';
+    } else {
+      // normal
+      style = defaultStyle ?? 'fill:none;';
+      if (defaultLabelStyle !== undefined) {
+        labelStyle = defaultLabelStyle;
+      }
+    }
+    return { thickness, pattern, style, labelStyle };
+  };
+
+  const getCurve = (edgeInterpolate: any, edgesDefaultInterpolate: any, confCurve: any) => {
+    if (edgeInterpolate !== undefined) {
+      return interpolateToCurve(edgeInterpolate, curveLinear);
+    }
+    if (edgesDefaultInterpolate !== undefined) {
+      return interpolateToCurve(edgesDefaultInterpolate, curveLinear);
+    }
+    // @ts-ignore TODO: fix this
+    return interpolateToCurve(confCurve, curveLinear);
+  };
+  const buildEdgeData = (
+    edge: any,
+    defaults: {
+      defaultStyle?: string;
+      defaultLabelStyle?: string;
+      defaultInterpolate?: any;
+      confCurve: any;
+    },
+    common: any
+  ) => {
+    const edgeData: any = { style: '', labelStyle: '' };
+    edgeData.minlen = edge.length || 1;
+    // maintain legacy behavior
+    edge.text = edge.label;
+
+    // Arrowhead fill vs none
+    edgeData.arrowhead = edge.type === 'arrow_open' ? 'none' : 'normal';
+
+    // Arrow types
+    const arrowMap = ARROW_MAP[edge.type] ?? ARROW_MAP.arrow_open;
+    edgeData.arrowTypeStart = arrowMap[0];
+    edgeData.arrowTypeEnd = arrowMap[1];
+
+    // Optional edge label positioning flags
+    edgeData.startLabelRight = edge.startLabelRight;
+    edgeData.endLabelLeft = edge.endLabelLeft;
+
+    // Stroke
+    const strokeRes = computeStroke(edge.stroke, defaults.defaultStyle, defaults.defaultLabelStyle);
+    edgeData.thickness = strokeRes.thickness;
+    edgeData.pattern = strokeRes.pattern;
+    edgeData.style = (edgeData.style || '') + (strokeRes.style || '');
+    edgeData.labelStyle = (edgeData.labelStyle || '') + (strokeRes.labelStyle || '');
+
+    // Curve
+    // @ts-ignore - defaults.confCurve is present at runtime but missing in type
+    edgeData.curve = getCurve(edge.interpolate, defaults.defaultInterpolate, defaults.confCurve);
+
+    // Arrowhead style + labelpos when we have label text
+    const hasText = (edge?.text ?? '') !== '';
+    if (hasText) {
+      edgeData.arrowheadStyle = 'fill: #333';
+      edgeData.labelpos = 'c';
+    } else if (edge.style !== undefined) {
+      edgeData.arrowheadStyle = 'fill: #333';
+    }
+
+    edgeData.labelType = edge.labelType;
+    edgeData.label = (edge?.text ?? '').replace(common.lineBreakRegex, '\n');
+
+    if (edge.style === undefined) {
+      edgeData.style = edgeData.style ?? 'stroke: #333; stroke-width: 1.5px;fill:none;';
+    }
+
+    edgeData.labelStyle = edgeData.labelStyle.replace('color:', 'fill:');
+    return edgeData;
+  };
+
  const addEdges = async function (
    dataForLayout: { edges: any; direction?: string },
    graph: {
@@ -284,7 +376,6 @@ export const render = async (
    const edges = dataForLayout.edges;
    const labelsEl = svg.insert('g').attr('class', 'edgeLabels');
    const linkIdCnt: any = {};
-    const dir = dataForLayout.direction || 'DOWN';
    let defaultStyle: string | undefined;
    let defaultLabelStyle: string | undefined;

@@ -314,105 +405,24 @@ export const render = async (
          linkIdCnt[linkIdBase]++;
          log.info('abc78 new entry', linkIdBase, linkIdCnt[linkIdBase]);
        }
-        const linkId = linkIdBase + '_' + linkIdCnt[linkIdBase];
+        const linkId = linkIdBase; // + '_' + linkIdCnt[linkIdBase];
        edge.id = linkId;
        log.info('abc78 new link id to be used is', linkIdBase, linkId, linkIdCnt[linkIdBase]);
        const linkNameStart = 'LS_' + edge.start;
        const linkNameEnd = 'LE_' + edge.end;

-        const edgeData: any = { style: '', labelStyle: '' };
-        edgeData.minlen = edge.length || 1;
-        edge.text = edge.label;
-        // Set link type for rendering
-        if (edge.type === 'arrow_open') {
-          edgeData.arrowhead = 'none';
-        } else {
-          edgeData.arrowhead = 'normal';
-        }
-
-        // Check of arrow types, placed here in order not to break old rendering
-        edgeData.arrowTypeStart = 'arrow_open';
-        edgeData.arrowTypeEnd = 'arrow_open';
-
-        /* eslint-disable no-fallthrough */
-        switch (edge.type) {
-          case 'double_arrow_cross':
-            edgeData.arrowTypeStart = 'arrow_cross';
-          case 'arrow_cross':
-            edgeData.arrowTypeEnd = 'arrow_cross';
-            break;
-          case 'double_arrow_point':
-            edgeData.arrowTypeStart = 'arrow_point';
-          case 'arrow_point':
-            edgeData.arrowTypeEnd = 'arrow_point';
-            break;
-          case 'double_arrow_circle':
-            edgeData.arrowTypeStart = 'arrow_circle';
-          case 'arrow_circle':
-            edgeData.arrowTypeEnd = 'arrow_circle';
-            break;
-        }
-
-        let style = '';
-        let labelStyle = '';
-
-        edgeData.startLabelRight = edge.startLabelRight;
-        edgeData.endLabelLeft = edge.endLabelLeft;
-
-        switch (edge.stroke) {
-          case 'normal':
-            style = 'fill:none;';
-            if (defaultStyle !== undefined) {
-              style = defaultStyle;
-            }
-            if (defaultLabelStyle !== undefined) {
-              labelStyle = defaultLabelStyle;
-            }
-            edgeData.thickness = 'normal';
-            edgeData.pattern = 'solid';
-            break;
-          case 'dotted':
-            edgeData.thickness = 'normal';
-            edgeData.pattern = 'dotted';
-            edgeData.style = 'fill:none;stroke-width:2px;stroke-dasharray:3;';
-            break;
-          case 'thick':
-            edgeData.thickness = 'thick';
-            edgeData.pattern = 'solid';
-            edgeData.style = 'stroke-width: 3.5px;fill:none;';
-            break;
-        }
-
-        edgeData.style = edgeData.style += style;
-        edgeData.labelStyle = edgeData.labelStyle += labelStyle;
-
        const conf = getConfig();
-        if (edge.interpolate !== undefined) {
-          edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear);
-        } else if (edges.defaultInterpolate !== undefined) {
-          edgeData.curve = interpolateToCurve(edges.defaultInterpolate, curveLinear);
-        } else {
-          // @ts-ignore TODO: fix this
-          edgeData.curve = interpolateToCurve(conf.curve, curveLinear);
-        }
-
-        if (edge.text === undefined) {
-          if (edge.style !== undefined) {
-            edgeData.arrowheadStyle = 'fill: #333';
-          }
-        } else {
-          edgeData.arrowheadStyle = 'fill: #333';
-          edgeData.labelpos = 'c';
-        }
-
-        edgeData.labelType = edge.labelType;
-        edgeData.label = (edge?.text || '').replace(common.lineBreakRegex, '\n');
-
-        if (edge.style === undefined) {
-          edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none;';
-        }
-
-        edgeData.labelStyle = edgeData.labelStyle.replace('color:', 'fill:');
+        const edgeData = buildEdgeData(
+          edge,
+          {
+            defaultStyle,
+            defaultLabelStyle,
+            defaultInterpolate: edges.defaultInterpolate,
+            // @ts-ignore - conf.curve exists at runtime but is missing from typing
+            confCurve: conf.curve,
+          },
+          common
+        );

        edgeData.id = linkId;
        edgeData.classes = 'flowchart-link ' + linkNameStart + ' ' + linkNameEnd;
@@ -421,13 +431,11 @@ export const render = async (

        // calculate start and end points of the edge, note that the source and target
        // can be modified for shapes that have ports
-        // @ts-ignore TODO: fix this
-        const { source, target, sourceId, targetId } = getEdgeStartEndPoint(edge, dir);
+
+        const { source, target, sourceId, targetId } = getEdgeStartEndPoint(edge);
        log.debug('abc78 source and target', source, target);
        // Add the edge to the graph
        graph.edges.push({
-          // @ts-ignore TODO: fix this
-          id: 'e' + edge.start + edge.end,
          ...edge,
          sources: [source],
          targets: [target],
@@ -461,6 +469,7 @@ export const render = async (
      case 'RL':
        return 'LEFT';
      case 'TB':
+      case 'TD': // TD is an alias for TB in Mermaid
        return 'DOWN';
      case 'BT':
        return 'UP';
@@ -484,6 +493,118 @@ export const render = async (
    }
  }

+  // Node bounds helpers (global)
+  const getEffectiveGroupWidth = (node: any): number => {
+    const labelW = node?.labels?.[0]?.width ?? 0;
+    const padding = node?.padding ?? 0;
+    return Math.max(node.width ?? 0, labelW + padding);
+  };
+
+  const boundsFor = (node: any): RectLike => {
+    const width = node?.isGroup ? getEffectiveGroupWidth(node) : node.width;
+    return {
+      x: node.offset.posX + node.width / 2,
+      y: node.offset.posY + node.height / 2,
+      width,
+      height: node.height,
+      padding: node.padding,
+    };
+  };
+
+  const cutter2 = (startNode: any, endNode: any, _points: any[]) => {
+    const startBounds = boundsFor(startNode);
+    const endBounds = boundsFor(endNode);
+
+    if (_points.length === 0) {
+      return [];
+    }
+
+    // Copy the original points array
+    const points: P[] = [..._points] as P[];
+
+    // The first point is the center of sNode, the last point is the center of eNode
+    const startCenter = points[0];
+    const endCenter = points[points.length - 1];
+
+    // Minimal, structured logging for diagnostics
+    log.debug('UIO cutter2: bounds', { startBounds, endBounds });
+    log.debug('UIO cutter2: original points', _points);
+
+    let firstOutsideStartIndex = -1;
+
+    // Single iteration through the array
+    for (const [i, point] of points.entries()) {
+      if (firstOutsideStartIndex === -1 && outsideNode(startBounds, point)) {
+        firstOutsideStartIndex = i;
+      }
+      if (outsideNode(endBounds, point)) {
+        // keep scanning; we'll also scan from the end for the last outside point
+      }
+    }
+
+    // Calculate intersection with start node if we found a point outside it
+    if (firstOutsideStartIndex !== -1) {
+      const outsidePointForStart = points[firstOutsideStartIndex];
+      const startIntersection = computeNodeIntersection(
+        startNode,
+        startBounds,
+        outsidePointForStart,
+        startCenter
+      );
+      log.debug('UIO cutter2: start intersection', startIntersection);
+      replaceEndpoint(points, 'start', startIntersection);
+    }
+
+    // Calculate intersection with end node
+    let outsidePointForEnd = null;
+    let outsideIndexForEnd = -1;
+
+    for (let i = points.length - 1; i >= 0; i--) {
+      if (outsideNode(endBounds, points[i])) {
+        outsidePointForEnd = points[i];
+        outsideIndexForEnd = i;
+        break;
+      }
+    }
+
+    if (!outsidePointForEnd && points.length > 1) {
+      outsidePointForEnd = points[points.length - 2];
+      outsideIndexForEnd = points.length - 2;
+    }
+
+    if (outsidePointForEnd) {
+      const endIntersection = computeNodeIntersection(
+        endNode,
+        endBounds,
+        outsidePointForEnd,
+        endCenter
+      );
+      log.debug('UIO cutter2: end intersection', { endIntersection, outsideIndexForEnd });
+      replaceEndpoint(points, 'end', endIntersection);
+    }
+
+    // Final cleanup: Check if the last point is too close to the previous point
+    if (points.length > 1) {
+      const lastPoint = points[points.length - 1];
+      const secondLastPoint = points[points.length - 2];
+      const distance = Math.sqrt(
+        (lastPoint.x - secondLastPoint.x) ** 2 + (lastPoint.y - secondLastPoint.y) ** 2
+      );
+      if (distance < 2) {
+        log.debug('UIO cutter2: trimming tail point (too close)', {
+          distance,
+          lastPoint,
+          secondLastPoint,
+        });
+        points.pop();
+      }
+    }
+
+    log.debug('UIO cutter2: final points', points);
+
+    return points;
+  };
+
  // @ts-ignore - ELK is not typed
  const elk = new ELK();
  const element = svg.select('g');
@@ -495,17 +616,19 @@ export const render = async (
    id: 'root',
    layoutOptions: {
      'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
-      'elk.layered.crossingMinimization.forceNodeModelOrder':
-        data4Layout.config.elk?.forceNodeModelOrder,
-      'elk.layered.considerModelOrder.strategy': data4Layout.config.elk?.considerModelOrder,
-
      'elk.algorithm': algorithm,
      'nodePlacement.strategy': data4Layout.config.elk?.nodePlacementStrategy,
      'elk.layered.mergeEdges': data4Layout.config.elk?.mergeEdges,
      'elk.direction': 'DOWN',
-      'spacing.baseValue': 35,
+      'spacing.baseValue': 40,
+      'elk.layered.crossingMinimization.forceNodeModelOrder':
+        data4Layout.config.elk?.forceNodeModelOrder,
+      'elk.layered.considerModelOrder.strategy': data4Layout.config.elk?.considerModelOrder,
      'elk.layered.unnecessaryBendpoints': true,
      'elk.layered.cycleBreaking.strategy': data4Layout.config.elk?.cycleBreakingStrategy,
+
+      // 'elk.layered.cycleBreaking.strategy': 'GREEDY_MODEL_ORDER',
+      // 'elk.layered.cycleBreaking.strategy': 'MODEL_ORDER',
      // 'spacing.nodeNode': 20,
      // 'spacing.nodeNodeBetweenLayers': 25,
      // 'spacing.edgeNode': 20,
@@ -513,22 +636,28 @@ export const render = async (
      // 'spacing.edgeEdge': 10,
      // 'spacing.edgeEdgeBetweenLayers': 20,
      // 'spacing.nodeSelfLoop': 20,
+
      // Tweaking options
+      // 'nodePlacement.favorStraightEdges': true,
      // 'elk.layered.nodePlacement.favorStraightEdges': true,
      // 'nodePlacement.feedbackEdges': true,
-      // 'elk.layered.wrapping.multiEdge.improveCuts': true,
-      // 'elk.layered.wrapping.multiEdge.improveWrappedEdges': true,
+      'elk.layered.wrapping.multiEdge.improveCuts': true,
+      'elk.layered.wrapping.multiEdge.improveWrappedEdges': true,
      // 'elk.layered.wrapping.strategy': 'MULTI_EDGE',
-      // 'elk.layered.edgeRouting.selfLoopDistribution': 'EQUALLY',
-      // 'elk.layered.mergeHierarchyEdges': true,
+      // 'elk.layered.wrapping.strategy': 'SINGLE_EDGE',
+      'elk.layered.edgeRouting.selfLoopDistribution': 'EQUALLY',
+      'elk.layered.mergeHierarchyEdges': true,
+
      // 'elk.layered.feedbackEdges': true,
      // 'elk.layered.crossingMinimization.semiInteractive': true,
      // 'elk.layered.edgeRouting.splines.sloppy.layerSpacingFactor': 1,
      // 'elk.layered.edgeRouting.polyline.slopedEdgeZoneWidth': 4.0,
      // 'elk.layered.wrapping.validify.strategy': 'LOOK_BACK',
      // 'elk.insideSelfLoops.activate': true,
+      // 'elk.separateConnectedComponents': true,
      // 'elk.alg.layered.options.EdgeStraighteningStrategy': 'NONE',
      // 'elk.layered.considerModelOrder.strategy': 'NODES_AND_EDGES', // NODES_AND_EDGES
+      // 'elk.layered.considerModelOrder.strategy': 'EDGES', // NODES_AND_EDGES
      // 'elk.layered.wrapping.cutting.strategy': 'ARD', // NODES_AND_EDGES
    },
    children: [],
@@ -538,7 +667,7 @@ export const render = async (
  log.info('Drawing flowchart using v4 renderer', elk);

  // Set the direction of the graph based on the parsed information
-  const dir = data4Layout.direction || 'DOWN';
+  const dir = data4Layout.direction ?? 'DOWN';
  elkGraph.layoutOptions['elk.direction'] = dir2ElkDirection(dir);

  // Create the lookup db for the subgraphs and their children to used when creating
@@ -569,15 +698,16 @@ export const render = async (

    // Subgraph
    if (parentLookupDb.childrenById[node.id] !== undefined) {
+      // Set label and adjust node width separately (avoid side effects in labels array)
      node.labels = [
        {
          text: node.label,
-          width: node?.labelData?.width || 50,
-          height: node?.labelData?.height || 50,
+          width: node?.labelData?.width ?? 50,
+          height: node?.labelData?.height ?? 50,
        },
-        (node.width = node.width + 2 * node.padding),
-        log.debug('UIO node label', node?.labelData?.width, node.padding),
      ];
+      node.width = node.width + 2 * node.padding;
+      log.debug('UIO node label', node?.labelData?.width, node.padding);
      node.layoutOptions = {
        'spacing.baseValue': 30,
        'nodeLabels.placement': '[H_CENTER V_TOP, INSIDE]',
@@ -641,7 +771,7 @@ export const render = async (
  try {
    g = await elk.layout(elkGraph);
    log.debug('APA01 after - success');
-    log.debug('APA01 layout result:', JSON.stringify(g, null, 2));
+    log.info('APA01 layout result:', JSON.stringify(g, null, 2));
  } catch (error) {
    log.error('APA01 ELK layout error:', error);
    throw error;
@@ -702,10 +832,10 @@ export const render = async (
          // sw = Math.max(bbox.width, startNode.width, startNode.labels[0].width);
          sw = Math.max(startNode.width, startNode.labels[0].width + startNode.padding);
          // sw = startNode.width;
-          log.debug(
+          log.info(
            'UIO width',
            startNode.id,
-            startNode.with,
+            startNode.width,
            'bbox.width=',
            bbox.width,
            'lw=',
@@ -725,7 +855,7 @@ export const render = async (
          log.debug(
            'UIO width',
            startNode.id,
-            startNode.with,
+            startNode.width,
            bbox.width,
            'EW = ',
            ew,
@@ -733,38 +863,56 @@ export const render = async (
            startNode.innerHTML
          );
        }
-
-        if (startNode.calcIntersect) {
-          const intersection = startNode.calcIntersect(
-            {
-              x: startNode.offset.posX + startNode.width / 2,
-              y: startNode.offset.posY + startNode.height / 2,
-              width: startNode.width,
-              height: startNode.height,
-            },
-            edge.points[0]
-          );
-
-          if (distance(intersection, edge.points[0]) > epsilon) {
-            edge.points.unshift(intersection);
-          }
+        startNode.x = startNode.offset.posX + startNode.width / 2;
+        startNode.y = startNode.offset.posY + startNode.height / 2;
+        endNode.x = endNode.offset.posX + endNode.width / 2;
+        endNode.y = endNode.offset.posY + endNode.height / 2;
+        if (startNode.shape !== 'rect33') {
+          edge.points.unshift({
+            x: startNode.x,
+            y: startNode.y,
+          });
        }
-        if (endNode.calcIntersect) {
-          const intersection = endNode.calcIntersect(
-            {
-              x: endNode.offset.posX + endNode.width / 2,
-              y: endNode.offset.posY + endNode.height / 2,
-              width: endNode.width,
-              height: endNode.height,
-            },
-            edge.points[edge.points.length - 1]
-          );
-
-          if (distance(intersection, edge.points[edge.points.length - 1]) > epsilon) {
-            edge.points.push(intersection);
-          }
+        if (endNode.shape !== 'rect33') {
+          edge.points.push({
+            x: endNode.x,
+            y: endNode.y,
+          });
        }

+        // Debug and sanitize points around cutter2
+        const prevPoints = Array.isArray(edge.points) ? [...edge.points] : [];
+        log.debug('UIO cutter2: Points before cutter2:', prevPoints);
+        edge.points = cutter2(startNode, endNode, prevPoints);
+        const hasNaN = (pts: { x: number; y: number }[]) =>
+          pts?.some((p) => !Number.isFinite(p?.x) || !Number.isFinite(p?.y));
+        if (!Array.isArray(edge.points) || edge.points.length < 2 || hasNaN(edge.points)) {
+          log.warn(
+            'UIO cutter2: Invalid points from cutter2, falling back to prevPoints',
+            edge.points
+          );
+          // Fallback to previous points and strip any invalid ones just in case
+          const cleaned = prevPoints.filter((p) => Number.isFinite(p?.x) && Number.isFinite(p?.y));
+          edge.points = cleaned.length >= 2 ? cleaned : prevPoints;
+        }
+        log.debug('UIO cutter2: Points after cutter2 (sanitized):', edge.points);
+        // Remove consecutive duplicate points to avoid zero-length segments in path builders
+        const deduped = edge.points.filter(
+          (p: { x: number; y: number }, i: number, arr: { x: number; y: number }[]) => {
+            if (i === 0) {
+              return true;
+            }
+            const prev = arr[i - 1];
+            return Math.abs(p.x - prev.x) > 1e-6 || Math.abs(p.y - prev.y) > 1e-6;
+          }
+        );
+        if (deduped.length !== edge.points.length) {
+          log.debug('UIO cutter2: removed consecutive duplicate points', {
+            before: edge.points,
+            after: deduped,
+          });
+        }
+        edge.points = deduped;
        const paths = insertEdge(
          edgesEl,
          edge,
@@ -772,8 +920,10 @@ export const render = async (
          data4Layout.type,
          startNode,
          endNode,
-          data4Layout.diagramId
+          data4Layout.diagramId,
+          true
        );
+        log.info('APA12 edge points after insert', JSON.stringify(edge.points));

        edge.x = edge.labels[0].x + offset.x + edge.labels[0].width / 2;
        edge.y = edge.labels[0].y + offset.y + edge.labels[0].height / 2;
--- a/packages/mermaid-layout-tidy-tree/CHANGELOG.md
+++ b/packages/mermaid-layout-tidy-tree/CHANGELOG.md
@@ -1,12 +0,0 @@
-# @mermaid-js/layout-tidy-tree
-
-## 0.2.0
-
-### Minor Changes
-
- [#6802](https://github.com/mermaid-js/mermaid/pull/6802) [`c8e5027`](https://github.com/mermaid-js/mermaid/commit/c8e50276e877c4de7593a09ec458c99353e65af8) Thanks [@darshanr0107](https://github.com/darshanr0107)! - feat: Update mindmap rendering to support multiple layouts, improved edge intersections, and new shapes
-
-### Patch Changes
-
- Updated dependencies [[`33bc4a0`](https://github.com/mermaid-js/mermaid/commit/33bc4a0b4e2ca6d937bb0a8c4e2081b1362b2800), [`e0b45c2`](https://github.com/mermaid-js/mermaid/commit/e0b45c2d2b41c2a9038bf87646fa3ccd7560eb20), [`012530e`](https://github.com/mermaid-js/mermaid/commit/012530e98e9b8b80962ab270b6bb3b6d9f6ada05), [`c8e5027`](https://github.com/mermaid-js/mermaid/commit/c8e50276e877c4de7593a09ec458c99353e65af8)]:
-  - mermaid@11.11.0
--- a/packages/mermaid-layout-tidy-tree/package.json
+++ b/packages/mermaid-layout-tidy-tree/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@mermaid-js/layout-tidy-tree",
-  "version": "0.2.0",
+  "version": "0.1.0",
  "description": "Tidy-tree layout engine for mermaid",
  "module": "dist/mermaid-layout-tidy-tree.core.mjs",
  "types": "dist/layouts.d.ts",
--- a/packages/mermaid/CHANGELOG.md
+++ b/packages/mermaid/CHANGELOG.md
@@ -1,19 +1,5 @@
 # mermaid

-## 11.11.0
-
-### Minor Changes
-
- [#6704](https://github.com/mermaid-js/mermaid/pull/6704) [`012530e`](https://github.com/mermaid-js/mermaid/commit/012530e98e9b8b80962ab270b6bb3b6d9f6ada05) Thanks [@omkarht](https://github.com/omkarht)! - feat: Added support for new participant types (`actor`, `boundary`, `control`, `entity`, `database`, `collections`, `queue`) in `sequenceDiagram`.
-
- [#6802](https://github.com/mermaid-js/mermaid/pull/6802) [`c8e5027`](https://github.com/mermaid-js/mermaid/commit/c8e50276e877c4de7593a09ec458c99353e65af8) Thanks [@darshanr0107](https://github.com/darshanr0107)! - feat: Update mindmap rendering to support multiple layouts, improved edge intersections, and new shapes
-
-### Patch Changes
-
- [#6905](https://github.com/mermaid-js/mermaid/pull/6905) [`33bc4a0`](https://github.com/mermaid-js/mermaid/commit/33bc4a0b4e2ca6d937bb0a8c4e2081b1362b2800) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: Render newlines as spaces in class diagrams
-
- [#6886](https://github.com/mermaid-js/mermaid/pull/6886) [`e0b45c2`](https://github.com/mermaid-js/mermaid/commit/e0b45c2d2b41c2a9038bf87646fa3ccd7560eb20) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: Handle arrows correctly when auto number is enabled
-
 ## 11.10.0

 ### Minor Changes
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -1,6 +1,6 @@
 {
  "name": "mermaid",
-  "version": "11.11.0",
+  "version": "11.10.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",
--- a/packages/mermaid/src/rendering-util/render.ts
+++ b/packages/mermaid/src/rendering-util/render.ts
@@ -4,6 +4,9 @@ import { internalHelpers } from '../internals.js';
 import { log } from '../logger.js';
 import type { LayoutData } from './types.js';

+// console.log('MUST be removed, this only for keeping dev server working');
+// import tmp from './layout-algorithms/dagre/index.js';
+
 export interface RenderOptions {
  algorithm?: string;
 }
--- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
@@ -1,9 +1,13 @@
 import { getConfig } from '../../diagram-api/diagramAPI.js';
-import { evaluate, getUrl } from '../../diagrams/common/common.js';
+import { evaluate } from '../../diagrams/common/common.js';
 import { log } from '../../logger.js';
 import { createText } from '../createText.js';
 import utils from '../../utils.js';
-import { getLineFunctionsWithOffset } from '../../utils/lineWithOffset.js';
+import {
+  getLineFunctionsWithOffset,
+  markerOffsets,
+  markerOffsets2,
+} from '../../utils/lineWithOffset.js';
 import { getSubGraphTitleMargins } from '../../utils/subGraphTitleMargins.js';

 import {
@@ -27,8 +31,8 @@ import createLabel from './createLabel.js';
 import { addEdgeMarkers } from './edgeMarker.ts';
 import { isLabelStyle } from './shapes/handDrawnShapeStyles.js';

-const edgeLabels = new Map();
-const terminalLabels = new Map();
+export const edgeLabels = new Map();
+export const terminalLabels = new Map();

 export const clear = () => {
  edgeLabels.clear();
@@ -55,7 +59,7 @@ export const insertEdgeLabel = async (elem, edge) => {
  const edgeLabel = elem.insert('g').attr('class', 'edgeLabel');

  // Create inner g, label, this will be positioned now for centering the text
-  const label = edgeLabel.insert('g').attr('class', 'label');
+  const label = edgeLabel.insert('g').attr('class', 'label').attr('data-id', edge.id);
  label.node().appendChild(labelElement);

  // Center the label
@@ -438,7 +442,33 @@ const fixCorners = function (lineData) {
  }
  return newLineData;
 };
-export const insertEdge = function (elem, edge, clusterDb, diagramType, startNode, endNode, id) {
+const generateDashArray = (len, oValueS, oValueE) => {
+  const middleLength = len - oValueS - oValueE;
+  const dashLength = 2; // Length of each dash
+  const gapLength = 2; // Length of each gap
+  const dashGapPairLength = dashLength + gapLength;
+
+  // Calculate number of complete dash-gap pairs that can fit
+  const numberOfPairs = Math.floor(middleLength / dashGapPairLength);
+
+  // Generate the middle pattern array
+  const middlePattern = Array(numberOfPairs).fill(`${dashLength} ${gapLength}`).join(' ');
+
+  // Combine all parts
+  const dashArray = `0 ${oValueS} ${middlePattern} ${oValueE}`;
+
+  return dashArray;
+};
+export const insertEdge = function (
+  elem,
+  edge,
+  clusterDb,
+  diagramType,
+  startNode,
+  endNode,
+  id,
+  skipIntersect = false
+) {
  const { handDrawnSeed } = getConfig();
  let points = edge.points;
  let pointsHasChanged = false;
@@ -452,11 +482,12 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
    edgeClassStyles.push(edge.cssCompiledStyles[key]);
  }

-  if (head.intersect && tail.intersect) {
+  log.debug('UIO intersect check', edge.points, head.x, tail.x);
+  if (head.intersect && tail.intersect && !skipIntersect) {
    points = points.slice(1, edge.points.length - 1);
    points.unshift(tail.intersect(points[0]));
    log.debug(
-      'Last point APA12',
+      'Last point UIO',
      edge.start,
      '-->',
      edge.end,
@@ -466,6 +497,7 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
    );
    points.push(head.intersect(points[points.length - 1]));
  }
+  const pointsStr = btoa(JSON.stringify(points));
  if (edge.toCluster) {
    log.info('to cluster abc88', clusterDb.get(edge.toCluster));
    points = cutPathAtIntersect(edge.points, clusterDb.get(edge.toCluster).node);
@@ -529,6 +561,10 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
      curve = curveBasis;
  }

+  // if (edge.curve) {
+  //   curve = edge.curve;
+  // }
+
  const { x, y } = getLineFunctionsWithOffset(edge);
  const lineFunction = line().x(x).y(y).curve(curve);

@@ -560,10 +596,14 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
      strokeClasses += ' edge-pattern-solid';
  }
  let svgPath;
-  let linePath = lineFunction(lineData);
-  const edgeStyles = Array.isArray(edge.style) ? edge.style : edge.style ? [edge.style] : [];
+  let linePath =
+    edge.curve === 'rounded'
+      ? generateRoundedPath(applyMarkerOffsetsToPoints(lineData, edge), 5)
+      : lineFunction(lineData);
+  const edgeStyles = Array.isArray(edge.style) ? edge.style : [edge.style];
  let strokeColor = edgeStyles.find((style) => style?.startsWith('stroke:'));

+  let animatedEdge = false;
  if (edge.look === 'handDrawn') {
    const rc = rough.svg(elem);
    Object.assign([], lineData);
@@ -594,7 +634,10 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
      animationClass = ' edge-animation-' + edge.animation;
    }

-    const pathStyle = stylesFromClasses ? stylesFromClasses + ';' + styles + ';' : styles;
+    const pathStyle =
+      (stylesFromClasses ? stylesFromClasses + ';' + styles + ';' : styles) +
+      ';' +
+      (edgeStyles ? edgeStyles.reduce((acc, style) => acc + ';' + style, '') : '');
    svgPath = elem
      .append('path')
      .attr('d', linePath)
@@ -604,11 +647,39 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
        ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : '') + (animationClass ?? '')
      )
      .attr('style', pathStyle);
+
+    //eslint-disable-next-line @typescript-eslint/prefer-regexp-exec
    strokeColor = pathStyle.match(/stroke:([^;]+)/)?.[1];
+
+    // Possible fix to remove eslint-disable-next-line
+    //strokeColor = /stroke:([^;]+)/.exec(pathStyle)?.[1];
+
+    animatedEdge =
+      edge.animate === true || !!edge.animation || stylesFromClasses.includes('animation');
+    const pathNode = svgPath.node();
+    const len = typeof pathNode.getTotalLength === 'function' ? pathNode.getTotalLength() : 0;
+    const oValueS = markerOffsets2[edge.arrowTypeStart] || 0;
+    const oValueE = markerOffsets2[edge.arrowTypeEnd] || 0;
+
+    if (edge.look === 'neo' && !animatedEdge) {
+      const dashArray =
+        edge.pattern === 'dotted' || edge.pattern === 'dashed'
+          ? generateDashArray(len, oValueS, oValueE)
+          : `0 ${oValueS} ${len - oValueS - oValueE} ${oValueE}`;
+
+      // No offset needed because we already start with a zero-length dash that effectively sets us up for a gap at the start.
+      const mOffset = `stroke-dasharray: ${dashArray}; stroke-dashoffset: 0;`;
+      svgPath.attr('style', mOffset + svgPath.attr('style'));
+    }
  }

-  // DEBUG code, DO NOT REMOVE
-  // adds a red circle at each edge coordinate
+  // MC Special
+  svgPath.attr('data-edge', true);
+  svgPath.attr('data-et', 'edge');
+  svgPath.attr('data-id', edge.id);
+  svgPath.attr('data-points', pointsStr);
+
+  // DEBUG code, adds a red circle at each edge coordinate
  // cornerPoints.forEach((point) => {
  //   elem
  //     .append('circle')
@@ -618,24 +689,33 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
  //     .attr('cx', point.x)
  //     .attr('cy', point.y);
  // });
-  // lineData.forEach((point) => {
-  //   elem
-  //     .append('circle')
-  //     .style('stroke', 'red')
-  //     .style('fill', 'red')
-  //     .attr('r', 1)
-  //     .attr('cx', point.x)
-  //     .attr('cy', point.y);
-  // });
+  if (edge.showPoints) {
+    lineData.forEach((point) => {
+      elem
+        .append('circle')
+        .style('stroke', 'red')
+        .style('fill', 'red')
+        .attr('r', 1)
+        .attr('cx', point.x)
+        .attr('cy', point.y);
+    });
+  }

  let url = '';
  if (getConfig().flowchart.arrowMarkerAbsolute || getConfig().state.arrowMarkerAbsolute) {
-    url = getUrl(true);
+    url =
+      window.location.protocol +
+      '//' +
+      window.location.host +
+      window.location.pathname +
+      window.location.search;
+    url = url.replace(/\(/g, '\\(').replace(/\)/g, '\\)');
  }
  log.info('arrowTypeStart', edge.arrowTypeStart);
  log.info('arrowTypeEnd', edge.arrowTypeEnd);

-  addEdgeMarkers(svgPath, edge, url, id, diagramType, strokeColor);
+  const useMargin = !animatedEdge && edge?.look === 'neo';
+  addEdgeMarkers(svgPath, edge, url, id, diagramType, useMargin, strokeColor);
  const midIndex = Math.floor(points.length / 2);
  const point = points[midIndex];
  if (!utils.isLabelCoordinateInPath(point, svgPath.attr('d'))) {
@@ -649,3 +729,134 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
  paths.originalPath = edge.points;
  return paths;
 };
+
+/**
+ * Generates SVG path data with rounded corners from an array of points.
+ * @param {Array} points - Array of points in the format [{x: Number, y: Number}, ...]
+ * @param {Number} radius - The radius of the rounded corners
+ * @returns {String} - SVG path data string
+ */
+function generateRoundedPath(points, radius) {
+  if (points.length < 2) {
+    return '';
+  }
+
+  let path = '';
+  const size = points.length;
+  const epsilon = 1e-5;
+
+  for (let i = 0; i < size; i++) {
+    const currPoint = points[i];
+    const prevPoint = points[i - 1];
+    const nextPoint = points[i + 1];
+
+    if (i === 0) {
+      // Move to the first point
+      path += `M${currPoint.x},${currPoint.y}`;
+    } else if (i === size - 1) {
+      // Last point, draw a straight line to the final point
+      path += `L${currPoint.x},${currPoint.y}`;
+    } else {
+      // Calculate vectors for incoming and outgoing segments
+      const dx1 = currPoint.x - prevPoint.x;
+      const dy1 = currPoint.y - prevPoint.y;
+      const dx2 = nextPoint.x - currPoint.x;
+      const dy2 = nextPoint.y - currPoint.y;
+
+      const len1 = Math.hypot(dx1, dy1);
+      const len2 = Math.hypot(dx2, dy2);
+
+      // Prevent division by zero
+      if (len1 < epsilon || len2 < epsilon) {
+        path += `L${currPoint.x},${currPoint.y}`;
+        continue;
+      }
+
+      // Normalize the vectors
+      const nx1 = dx1 / len1;
+      const ny1 = dy1 / len1;
+      const nx2 = dx2 / len2;
+      const ny2 = dy2 / len2;
+
+      // Calculate the angle between the vectors
+      const dot = nx1 * nx2 + ny1 * ny2;
+      // Clamp the dot product to avoid numerical issues with acos
+      const clampedDot = Math.max(-1, Math.min(1, dot));
+      const angle = Math.acos(clampedDot);
+
+      // Skip rounding if the angle is too small or too close to 180 degrees
+      if (angle < epsilon || Math.abs(Math.PI - angle) < epsilon) {
+        path += `L${currPoint.x},${currPoint.y}`;
+        continue;
+      }
+
+      // Calculate the distance to offset the control point
+      const cutLen = Math.min(radius / Math.sin(angle / 2), len1 / 2, len2 / 2);
+
+      // Calculate the start and end points of the curve
+      const startX = currPoint.x - nx1 * cutLen;
+      const startY = currPoint.y - ny1 * cutLen;
+      const endX = currPoint.x + nx2 * cutLen;
+      const endY = currPoint.y + ny2 * cutLen;
+
+      // Draw the line to the start of the curve
+      path += `L${startX},${startY}`;
+
+      // Draw the quadratic Bezier curve
+      path += `Q${currPoint.x},${currPoint.y} ${endX},${endY}`;
+    }
+  }
+
+  return path;
+}
+// Helper function to calculate delta and angle between two points
+function calculateDeltaAndAngle(point1, point2) {
+  if (!point1 || !point2) {
+    return { angle: 0, deltaX: 0, deltaY: 0 };
+  }
+  const deltaX = point2.x - point1.x;
+  const deltaY = point2.y - point1.y;
+  const angle = Math.atan2(deltaY, deltaX);
+  return { angle, deltaX, deltaY };
+}
+
+// Function to adjust the first and last points of the points array
+function applyMarkerOffsetsToPoints(points, edge) {
+  // Copy the points array to avoid mutating the original data
+  const newPoints = points.map((point) => ({ ...point }));
+
+  // Handle the first point (start of the edge)
+  if (points.length >= 2 && markerOffsets[edge.arrowTypeStart]) {
+    const offsetValue = markerOffsets[edge.arrowTypeStart];
+
+    const point1 = points[0];
+    const point2 = points[1];
+
+    const { angle } = calculateDeltaAndAngle(point1, point2);
+
+    const offsetX = offsetValue * Math.cos(angle);
+    const offsetY = offsetValue * Math.sin(angle);
+
+    newPoints[0].x = point1.x + offsetX;
+    newPoints[0].y = point1.y + offsetY;
+  }
+
+  // Handle the last point (end of the edge)
+  const n = points.length;
+  if (n >= 2 && markerOffsets[edge.arrowTypeEnd]) {
+    const offsetValue = markerOffsets[edge.arrowTypeEnd];
+
+    const point1 = points[n - 1];
+    const point2 = points[n - 2];
+
+    const { angle } = calculateDeltaAndAngle(point2, point1);
+
+    const offsetX = offsetValue * Math.cos(angle);
+    const offsetY = offsetValue * Math.sin(angle);
+
+    newPoints[n - 1].x = point1.x - offsetX;
+    newPoints[n - 1].y = point1.y - offsetY;
+  }
+
+  return newPoints;
+}
--- a/packages/mermaid/src/utils/lineWithOffset.ts
+++ b/packages/mermaid/src/utils/lineWithOffset.ts
@@ -4,12 +4,22 @@ import type { EdgeData, Point } from '../types.js';
 // under any transparent markers.
 // The offsets are calculated from the markers' dimensions.
 export const markerOffsets = {
-  aggregation: 18,
-  extension: 18,
-  composition: 18,
+  aggregation: 17.25,
+  extension: 17.25,
+  composition: 17.25,
  dependency: 6,
  lollipop: 13.5,
  arrow_point: 4,
+  //arrow_cross: 24,
+} as const;
+
+// We need to draw the lines a bit shorter to avoid drawing
+// under any transparent markers.
+// The offsets are calculated from the markers' dimensions.
+export const markerOffsets2 = {
+  arrow_point: 9,
+  arrow_cross: 12.5,
+  arrow_circle: 12.5,
 } as const;

 /**
@@ -104,6 +114,7 @@ export const getLineFunctionsWithOffset = (
        adjustment *= DIRECTION === 'right' ? -1 : 1;
        offset += adjustment;
      }
+
      return pointTransformer(d).x + offset;
    },
    y: function (
--- a/packages/tiny/CHANGELOG.md
+++ b/packages/tiny/CHANGELOG.md
@@ -1,19 +1,5 @@
 # mermaid

-## 11.11.0
-
-### Minor Changes
-
- [#6704](https://github.com/mermaid-js/mermaid/pull/6704) [`012530e`](https://github.com/mermaid-js/mermaid/commit/012530e98e9b8b80962ab270b6bb3b6d9f6ada05) Thanks [@omkarht](https://github.com/omkarht)! - feat: Added support for new participant types (`actor`, `boundary`, `control`, `entity`, `database`, `collections`, `queue`) in `sequenceDiagram`.
-
- [#6802](https://github.com/mermaid-js/mermaid/pull/6802) [`c8e5027`](https://github.com/mermaid-js/mermaid/commit/c8e50276e877c4de7593a09ec458c99353e65af8) Thanks [@darshanr0107](https://github.com/darshanr0107)! - feat: Update mindmap rendering to support multiple layouts, improved edge intersections, and new shapes
-
-### Patch Changes
-
- [#6905](https://github.com/mermaid-js/mermaid/pull/6905) [`33bc4a0`](https://github.com/mermaid-js/mermaid/commit/33bc4a0b4e2ca6d937bb0a8c4e2081b1362b2800) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: Render newlines as spaces in class diagrams
-
- [#6886](https://github.com/mermaid-js/mermaid/pull/6886) [`e0b45c2`](https://github.com/mermaid-js/mermaid/commit/e0b45c2d2b41c2a9038bf87646fa3ccd7560eb20) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: Handle arrows correctly when auto number is enabled
-
 ## 11.10.0

 ### Minor Changes
--- a/packages/tiny/package.json
+++ b/packages/tiny/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@mermaid-js/tiny",
-  "version": "11.11.0",
+  "version": "11.10.0",
  "description": "Tiny version of mermaid",
  "type": "commonjs",
  "main": "./dist/mermaid.tiny.js",
Author	SHA1	Message	Date
Knut Sveidqvist	25fa26d915	fix(layout-elk): prevent NaN paths from duplicate points	2025-09-05 16:24:32 +02:00
Knut Sveidqvist	62915183b1	Merge branch 'mindmaps-and-elk-updates' of github.com:mermaid-js/mermaid into mindmaps-and-elk-updates	2025-09-05 15:51:40 +02:00
Knut Sveidqvist	6874ab3fb6	Adjusted elk-config	2025-09-05 15:50:58 +02:00
darshanr0107	040af4f545	fix: failing unit test on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>	2025-09-05 19:16:43 +05:30
Knut Sveidqvist	65ca3eabfd	Some cleanup	2025-09-05 15:21:45 +02:00
Knut Sveidqvist	8b9bbad842	Fix for render issue to and from subgraphs	2025-09-05 14:48:15 +02:00
darshanr0107	d2773db7dc	fix: review comments and unit tests on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>	2025-09-05 16:43:29 +05:30
darshanr0107	0dd46a3543	fix: resolve TypeScript errors in mermaid-layout-elk on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>	2025-09-04 14:57:24 +05:30
darshanr0107	f81e63663c	fix: pnpm lock issue on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>	2025-09-04 14:25:18 +05:30
darshanr0107	7109e3a17f	fix: pnpm lock fil issue on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>	2025-09-04 14:19:18 +05:30
darshanr0107	e0bd51941e	Revert "fix: revert pnpm-lock file" This reverts commit `38f4e67ca7`.	2025-09-04 14:14:01 +05:30
darshanr0107	38f4e67ca7	fix: revert pnpm-lock file on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>	2025-09-04 14:04:42 +05:30
darshanr0107	681d829227	fix: pnpm lock issues on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>	2025-09-04 14:00:38 +05:30
darshanr0107	164e44c3d9	Merge branch 'develop' of https://github.com/mermaid-js/mermaid into mindmaps-and-elk-updates	2025-09-04 13:46:33 +05:30
Knut Sveidqvist	a716a525c3	Merge remote-tracking branch 'origin/develop' into mindmaps-and-elk-updates	2025-08-14 13:53:33 +02:00
Knut Sveidqvist	11abfc9ae5	Refactor code structure for improved readability and maintainability	2025-08-12 16:08:19 +02:00
Knut Sveidqvist	81b0ffb92a	Merge branch '6088-fix-for-diamond-intersections' into mindmaps-and-elk-updates	2025-08-12 11:11:51 +02:00
Knut Sveidqvist	8314554eb5	Merge branch 'test-merge' into 6088-fix-for-diamond-intersections	2025-06-25 13:00:03 +02:00
Knut Sveidqvist	b7c03dc27e	Some cleanup	2025-06-25 12:58:54 +02:00
Knut Sveidqvist	c7f2f609a9	Intersections ok	2025-06-24 20:30:50 +02:00
Knut Sveidqvist	4c3de3a1ec	Merge remote-tracking branch 'origin/develop' into test-merge	2025-06-24 10:58:28 +02:00