chore(deps): downgrade @argos-ci/cypress from ^5.0.7 to ^5.0.2

chore(deps): update peter-evans/create-pull-request digest to 915d841

.changeset/beige-peas-shave.md

@@ -1,5 +0,0 @@
----
-'@mermaid-js/mermaid-zenuml': patch
----
-
-Fixed a critical bug that the ZenUML diagram is not rendered.

.changeset/busy-clocks-melt.md

@@ -1,6 +0,0 @@
----
-'@mermaid-js/layout-elk': patch
-'mermaid': patch
----
-
-feat: Exposing elk configuration forceNodeModelOrder and considerModelOrder to the mermaid configuration

.changeset/chatty-lemons-stick.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-chore: Remove the "-beta" suffix from the XYChart, Block, Sankey diagrams to reflect their stable status

.changeset/clean-wolves-turn.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Render newlines as spaces in class diagrams

.changeset/cold-sites-accept.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Position the edge label in state diagram correctly relative to the edge

.changeset/crazy-loops-matter.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Handle arrows correctly when auto number is enabled

.changeset/deep-times-make.md

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

.changeset/empty-clouds-cry.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Apply correct dateFormat in Gantt chart to show only day when specified

.changeset/four-eyes-wish.md

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

.changeset/fuzzy-pears-cough.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: handle exclude dates properly in Gantt charts when using dateFormat: 'YYYY-MM-DD HH:mm:ss'

.changeset/gold-spiders-join.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: fixed connection gaps in flowchart for roundedRect, stadium and diamond shape

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

.changeset/large-mirrors-cheer.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Update casing of ID in requirement diagram

.changeset/lemon-masks-unite.md

@@ -1,5 +0,0 @@
----
-'mermaid': minor
----
-
-feat: Added support for per link curve styling in flowchart diagram using edge ids

.changeset/light-flowers-judge.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Make flowchart elk detector regex match less greedy

.changeset/lovely-queens-own.md

@@ -1,8 +0,0 @@
----
-'mermaid': patch
----
-
-fix(block): overflowing blocks no longer affect later lines
-
-This may change the layout of block diagrams that have overflowing lines
-(i.e. block diagrams that use up more columns that the `columns` specifier).

.changeset/moody-fans-try.md

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

.changeset/ninety-roses-turn.md

@@ -1,7 +0,0 @@
----
-'mermaid': patch
----
-
-fix: log warning for blocks exceeding column width
-
-This update adds a validation check that logs a warning message when a block's width exceeds the defined column layout.

.changeset/proud-colts-smell.md

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

.changeset/rare-women-fly.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Add escaped class literal name on namespace

.changeset/red-zebras-happen.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Allow equals sign in sequenceDiagram labels

.changeset/revert-marked-dependency.md

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

.changeset/seven-papayas-film.md

@@ -1,9 +0,0 @@
----
-'mermaid': patch
----
-
-Add validation for negative values in pie charts:
-
-Prevents crashes during parsing by validating values post-parsing.
-
-Provides clearer, user-friendly error messages for invalid negative inputs.

.changeset/silver-eyes-build.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-chore: migrate to class-based ArchitectureDB implementation

.changeset/six-planets-rescue.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: node border style for handdrawn shapes

.changeset/smart-humans-cover.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Update flowchart direction TD's behavior to be the same as TB

.changeset/spicy-ties-see.md

@@ -1,5 +0,0 @@
----
-'@mermaid-js/layout-elk': patch
----
-
-Make elk not force node model order, but strongly consider it instead

.changeset/strong-dryers-pay.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: correctly render non-directional lines for '---' in block diagrams

.changeset/strong-laws-confess.md

@@ -1,9 +0,0 @@
----
-'mermaid': patch
----
-
-fix: fallback to raw text instead of rendering _Unsupported markdown_ or empty blocks
-
-Instead of printing **Unsupported markdown: XXX**, or empty blocks when using a markdown feature
-that Mermaid does not yet support when `htmlLabels: true`(default) or `htmlLabels: false`,
-fallback to the raw markdown text.

.changeset/vast-buses-see.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-chore: Update packet diagram to use new class-based database structure

.cspell/contributors.txt

@@ -2,6 +2,7 @@
 Ashish Jain
 cpettitt
 Dong Cai
+fourcube
 knsv
 Knut Sveidqvist
 Nikolay Rozhkov

.cspell/mermaid-terms.txt

@@ -5,6 +5,7 @@ bmatrix
 braintree
 catmull
 compositTitleSize
+cose
 curv
 doublecircle
 elem

.cspell/misc-terms.txt

@@ -1,4 +1,5 @@
 BRANDES
+Buzan
 circo
 handDrawn
 KOEPF

.github/lychee.toml

@@ -59,6 +59,7 @@ exclude = [
 "https://huehive.co",
 "https://foswiki.org",
 "https://www.gnu.org",
+"https://redmine.org",
 "https://mermaid-preview.com"
 ]
 

.github/workflows/e2e-applitools.yml

@@ -23,9 +23,6 @@ env:
 jobs:
   e2e-applitools:
     runs-on: ubuntu-latest
-    container:
-      image: cypress/browsers:node-20.11.0-chrome-121.0.6167.85-1-ff-120.0-edge-121.0.2277.83-1
-      options: --user 1001
     steps:
       - if: ${{ ! env.USE_APPLI }}
         name: Warn if not using Applitools

.github/workflows/e2e-timings.yml

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

.lintstagedrc.mjs

@@ -7,6 +7,5 @@ export default {
     'prettier --write',
   ],
   '.cspell/*.txt': ['tsx scripts/fixCSpell.ts'],
-  '**/*.md': ['pnpm cspell'],
   '**/*.jison': ['pnpm -w run lint:jison'],
 };

cypress/helpers/util.ts

@@ -14,7 +14,7 @@ interface CodeObject {
   mermaid: CypressMermaidConfig;
 }
 
-const utf8ToB64 = (str: string): string => {
+export const utf8ToB64 = (str: string): string => {
   return Buffer.from(decodeURIComponent(encodeURIComponent(str))).toString('base64');
 };
 
@@ -22,7 +22,7 @@ const batchId: string =
   'mermaid-batch-' +
   (Cypress.env('useAppli')
     ? Date.now().toString()
-    : Cypress.env('CYPRESS_COMMIT') || Date.now().toString());
+    : (Cypress.env('CYPRESS_COMMIT') ?? Date.now().toString()));
 
 export const mermaidUrl = (
   graphStr: string | string[],
@@ -61,9 +61,7 @@ export const imgSnapshotTest = (
     sequence: {
       ...(_options.sequence ?? {}),
       actorFontFamily: 'courier',
-      noteFontFamily: _options.sequence?.noteFontFamily
-        ? _options.sequence.noteFontFamily
-        : 'courier',
+      noteFontFamily: _options.sequence?.noteFontFamily ?? 'courier',
       messageFontFamily: 'courier',
     },
   };

cypress/integration/other/configuration.spec.js

@@ -98,12 +98,12 @@ describe('Configuration', () => {
     it('should handle arrowMarkerAbsolute set to true', () => {
       renderGraph(
         `flowchart TD
-        A[Christmas] -->|Get money| B(Go shopping)
-        B --> C{Let me think}
-        C -->|One| D[Laptop]
-        C -->|Two| E[iPhone]
-        C -->|Three| F[fa:fa-car Car]
-        `,
+    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]
+    `,
         {
           arrowMarkerAbsolute: true,
         }
@@ -113,8 +113,7 @@ describe('Configuration', () => {
         cy.get('path')
           .first()
           .should('have.attr', 'marker-end')
-          .should('exist')
-          .and('include', 'url(http\\:\\/\\/localhost');
+          .and('include', 'url(http://localhost');
       });
     });
     it('should not taint the initial configuration when using multiple directives', () => {

cypress/integration/other/xss.spec.js

@@ -1,4 +1,4 @@
-import { mermaidUrl } from '../../helpers/util.ts';
+import { imgSnapshotTest, mermaidUrl, utf8ToB64 } from '../../helpers/util.ts';
 describe('XSS', () => {
   it('should handle xss in tags', () => {
     const str =
@@ -141,4 +141,37 @@ describe('XSS', () => {
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
   });
+
+  it('should sanitize icon labels in architecture diagrams', () => {
+    const str = JSON.stringify({
+      code: `architecture-beta
+    group api(cloud)[API]
+    service db "<img src=x onerror=\\"xssAttack()\\">" [Database] in api`,
+    });
+    imgSnapshotTest(utf8ToB64(str), {}, true);
+    cy.wait(1000);
+    cy.get('#the-malware').should('not.exist');
+  });
+
+  it('should sanitize katex blocks', () => {
+    const str = JSON.stringify({
+      code: `sequenceDiagram
+    participant A as Alice<img src="x" onerror="xssAttack()">$$\\text{Alice}$$
+    A->>John: Hello John, how are you?`,
+    });
+    imgSnapshotTest(utf8ToB64(str), {}, true);
+    cy.wait(1000);
+    cy.get('#the-malware').should('not.exist');
+  });
+
+  it('should sanitize labels', () => {
+    const str = JSON.stringify({
+      code: `erDiagram
+    "<img src=x onerror=xssAttack()>" ||--|| ENTITY2 : "<img src=x onerror=xssAttack()>"
+    `,
+    });
+    imgSnapshotTest(utf8ToB64(str), {}, true);
+    cy.wait(1000);
+    cy.get('#the-malware').should('not.exist');
+  });
 });

cypress/integration/rendering/classDiagram.spec.js

@@ -524,5 +524,18 @@ describe('Class diagram', () => {
       `,
       {}
     );
+    it('should handle an empty class body with empty braces', () => {
+      imgSnapshotTest(
+        ` classDiagram
+        class FooBase~T~ {}
+    class Bar {
+        +Zip
+        +Zap()
+    }
+    FooBase <|-- Ba
+        `,
+        { flowchart: { defaultRenderer: 'elk' } }
+      );
+    });
   });
 });

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

@@ -109,7 +109,7 @@ describe('Flowchart ELK', () => {
       const style = svg.attr('style');
       expect(style).to.match(/^max-width: [\d.]+px;$/);
       const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-      verifyNumber(maxWidthValue, 380);
+      verifyNumber(maxWidthValue, 380, 15);
     });
   });
   it('8-elk: should render a flowchart when useMaxWidth is false', () => {
@@ -128,7 +128,7 @@ describe('Flowchart ELK', () => {
       const width = parseFloat(svg.attr('width'));
       // use within because the absolute value can be slightly different depending on the environment ±5%
       // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
-      verifyNumber(width, 380);
+      verifyNumber(width, 380, 15);
       expect(svg).to.not.have.attr('style');
     });
   });

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

@@ -1118,7 +1118,7 @@ end
       imgSnapshotTest(
         `flowchart TB
           A(["Start"]) --> n1["Untitled Node"]
-          A --> n2["Untitled Node"]     
+          A --> n2["Untitled Node"]
         `,
         {}
       );
@@ -1127,7 +1127,7 @@ end
       imgSnapshotTest(
         `flowchart BT
           n2["Untitled Node"] --> n1["Diamond"]
-          n1@{ shape: diam}     
+          n1@{ shape: diam}
         `,
         {}
       );
@@ -1138,7 +1138,7 @@ end
         n2["Untitled Node"] --> n1["Rounded Rectangle"]
         n3["Untitled Node"] --> n1
         n1@{ shape: rounded}
-        n3@{ shape: rect}  
+        n3@{ shape: rect}
     `,
         {}
       );
@@ -1186,4 +1186,17 @@ end
       imgSnapshotTest(graph, { htmlLabels: false });
     });
   });
+
+  it('V2 - 17: should apply class def colour to edge label', () => {
+    imgSnapshotTest(
+      ` graph LR
+    id1(Start) link@-- "Label" -->id2(Stop)
+    style id1 fill:#f9f,stroke:#333,stroke-width:4px
+
+class id2 myClass
+classDef myClass fill:#bbf,stroke:#f66,stroke-width:2px,color:white,stroke-dasharray: 5 5
+class link myClass
+`
+    );
+  });
 });

cypress/integration/rendering/gantt.spec.js

@@ -803,4 +803,34 @@ describe('Gantt diagram', () => {
       {}
     );
   });
+  it('should handle numeric timestamps with dateFormat x', () => {
+    imgSnapshotTest(
+      `
+     gantt
+     title Process time profile (ms)
+     dateFormat x
+     axisFormat %L
+     tickInterval 250millisecond
+
+     section Pipeline
+     Parse JSON p1: 000, 120
+    `,
+      {}
+    );
+  });
+  it('should handle numeric timestamps with dateFormat X', () => {
+    imgSnapshotTest(
+      `
+     gantt
+     title Process time profile (ms)
+     dateFormat X
+     axisFormat %L
+     tickInterval 250millisecond
+
+     section Pipeline
+     Parse JSON p1: 000, 120
+    `,
+      {}
+    );
+  });
 });

cypress/integration/rendering/mindmap-tidy-tree.spec.js

@@ -0,0 +1,79 @@
+import { imgSnapshotTest } from '../../helpers/util.ts';
+
+describe('Mindmap Tidy Tree', () => {
+  it('1-tidy-tree: should render a simple mindmap without children', () => {
+    imgSnapshotTest(
+      ` ---
+      config:
+        layout: tidy-tree
+      ---
+      mindmap
+      root((mindmap))
+        A
+        B
+      `
+    );
+  });
+  it('2-tidy-tree: should render a simple mindmap', () => {
+    imgSnapshotTest(
+      ` ---
+      config:
+        layout: tidy-tree
+      ---
+      mindmap
+      root((mindmap is a long thing))
+        A
+        B
+        C
+        D
+      `
+    );
+  });
+  it('3-tidy-tree: should render a  mindmap with different shapes', () => {
+    imgSnapshotTest(
+      ` ---
+      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
+              id)I am a cloud(
+                  id))I am a bang((
+                    Tools
+      `
+    );
+  });
+  it('4-tidy-tree: should render a mindmap with children', () => {
+    imgSnapshotTest(
+      ` ---
+      config:
+        layout: tidy-tree
+      ---
+       mindmap
+      ((This is a mindmap))
+        child1
+         grandchild 1
+         grandchild 2
+        child2
+         grandchild 3
+         grandchild 4
+        child3
+         grandchild 5
+         grandchild 6
+      `
+    );
+  });
+});

cypress/integration/rendering/mindmap.spec.ts

@@ -228,25 +228,21 @@ 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' } }
       );
     });

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

@@ -0,0 +1,659 @@
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
+
+const looks = ['classic'];
+const participantTypes = [
+  { type: 'participant', display: 'participant' },
+  { type: 'actor', display: 'actor' },
+  { type: 'boundary', display: 'boundary' },
+  { type: 'control', display: 'control' },
+  { type: 'entity', display: 'entity' },
+  { type: 'database', display: 'database' },
+  { type: 'collections', display: 'collections' },
+  { type: 'queue', display: 'queue' },
+];
+
+const restrictedTypes = ['boundary', 'control', 'entity', 'database', 'collections', 'queue'];
+
+const interactionTypes = ['->>', '-->>', '->', '-->', '-x', '--x', '->>+', '-->>+'];
+
+const notePositions = ['left of', 'right of', 'over'];
+
+function getParticipantLine(name, type, alias) {
+  if (restrictedTypes.includes(type)) {
+    return `  participant ${name}@{ "type" : "${type}" }\n`;
+  } else if (alias) {
+    return `  participant ${name}@{ "type" : "${type}" } \n`;
+  } else {
+    return `  participant ${name}@{ "type" : "${type}" }\n`;
+  }
+}
+
+looks.forEach((look) => {
+  describe(`Sequence Diagram Tests - ${look} look`, () => {
+    it('should render all participant types', () => {
+      let diagramCode = `sequenceDiagram\n`;
+      participantTypes.forEach((pt, index) => {
+        const name = `${pt.display}${index}`;
+        diagramCode += getParticipantLine(name, pt.type);
+      });
+      for (let i = 0; i < participantTypes.length - 1; i++) {
+        diagramCode += `  ${participantTypes[i].display}${i} ->> ${participantTypes[i + 1].display}${i + 1}: Message ${i}\n`;
+      }
+      imgSnapshotTest(diagramCode, { look, sequence: { diagramMarginX: 50, diagramMarginY: 10 } });
+    });
+
+    it('should render all interaction types', () => {
+      let diagramCode = `sequenceDiagram\n`;
+      diagramCode += getParticipantLine('A', 'actor');
+      diagramCode += getParticipantLine('B', 'boundary');
+      interactionTypes.forEach((interaction, index) => {
+        diagramCode += `  A ${interaction} B: ${interaction} message ${index}\n`;
+      });
+      imgSnapshotTest(diagramCode, { look });
+    });
+
+    it('should render participant creation and destruction', () => {
+      let diagramCode = `sequenceDiagram\n`;
+      participantTypes.forEach((pt, index) => {
+        const name = `${pt.display}${index}`;
+        diagramCode += getParticipantLine('A', pt.type);
+        diagramCode += getParticipantLine('B', pt.type);
+        diagramCode += `  create participant ${name}@{ "type" : "${pt.type}" }\n`;
+        diagramCode += `  A ->> ${name}: Hello ${pt.display}\n`;
+        if (index % 2 === 0) {
+          diagramCode += `  destroy ${name}\n`;
+        }
+      });
+      imgSnapshotTest(diagramCode, { look });
+    });
+
+    it('should render notes in all positions', () => {
+      let diagramCode = `sequenceDiagram\n`;
+      diagramCode += getParticipantLine('A', 'actor');
+      diagramCode += getParticipantLine('B', 'boundary');
+      notePositions.forEach((position, index) => {
+        diagramCode += `  Note ${position} A: Note ${position} ${index}\n`;
+      });
+      diagramCode += `  A ->> B: Message with notes\n`;
+      imgSnapshotTest(diagramCode, { look });
+    });
+
+    it('should render parallel interactions', () => {
+      let diagramCode = `sequenceDiagram\n`;
+      participantTypes.slice(0, 4).forEach((pt, index) => {
+        diagramCode += getParticipantLine(`${pt.display}${index}`, pt.type);
+      });
+      diagramCode += `  par Parallel actions\n`;
+      for (let i = 0; i < 3; i += 2) {
+        diagramCode += `    ${participantTypes[i].display}${i} ->> ${participantTypes[i + 1].display}${i + 1}: Message ${i}\n`;
+        if (i < participantTypes.length - 2) {
+          diagramCode += `    and\n`;
+        }
+      }
+      diagramCode += `  end\n`;
+      imgSnapshotTest(diagramCode, { look });
+    });
+
+    it('should render alternative flows', () => {
+      let diagramCode = `sequenceDiagram\n`;
+      diagramCode += getParticipantLine('A', 'actor');
+      diagramCode += getParticipantLine('B', 'boundary');
+      diagramCode += `  alt Successful case\n`;
+      diagramCode += `    A ->> B: Request\n`;
+      diagramCode += `    B -->> A: Success\n`;
+      diagramCode += `  else Failure case\n`;
+      diagramCode += `    A ->> B: Request\n`;
+      diagramCode += `    B --x A: Failure\n`;
+      diagramCode += `  end\n`;
+      imgSnapshotTest(diagramCode, { look });
+    });
+
+    it('should render loops', () => {
+      let diagramCode = `sequenceDiagram\n`;
+      participantTypes.slice(0, 3).forEach((pt, index) => {
+        diagramCode += getParticipantLine(`${pt.display}${index}`, pt.type);
+      });
+      diagramCode += `  loop For each participant\n`;
+      for (let i = 0; i < 3; i++) {
+        diagramCode += `    ${participantTypes[0].display}0 ->> ${participantTypes[1].display}1: Message ${i}\n`;
+      }
+      diagramCode += `  end\n`;
+      imgSnapshotTest(diagramCode, { look });
+    });
+
+    it('should render boxes around groups', () => {
+      let diagramCode = `sequenceDiagram\n`;
+      diagramCode += `  box Group 1\n`;
+      participantTypes.slice(0, 3).forEach((pt, index) => {
+        diagramCode += `    ${getParticipantLine(`${pt.display}${index}`, pt.type)}`;
+      });
+      diagramCode += `  end\n`;
+      diagramCode += `  box rgb(200,220,255) Group 2\n`;
+      participantTypes.slice(3, 6).forEach((pt, index) => {
+        diagramCode += `    ${getParticipantLine(`${pt.display}${index}`, pt.type)}`;
+      });
+      diagramCode += `  end\n`;
+      diagramCode += `  ${participantTypes[0].display}0 ->> ${participantTypes[3].display}0: Cross-group message\n`;
+      imgSnapshotTest(diagramCode, { look });
+    });
+
+    it('should render with different font settings', () => {
+      let diagramCode = `sequenceDiagram\n`;
+      participantTypes.slice(0, 3).forEach((pt, index) => {
+        diagramCode += getParticipantLine(`${pt.display}${index}`, pt.type);
+      });
+      diagramCode += `  ${participantTypes[0].display}0 ->> ${participantTypes[1].display}1: Regular message\n`;
+      diagramCode += `  Note right of ${participantTypes[1].display}1: Regular note\n`;
+      imgSnapshotTest(diagramCode, {
+        look,
+        sequence: {
+          actorFontFamily: 'courier',
+          actorFontSize: 14,
+          messageFontFamily: 'Arial',
+          messageFontSize: 12,
+          noteFontFamily: 'times',
+          noteFontSize: 16,
+          noteAlign: 'left',
+        },
+      });
+    });
+  });
+});
+
+// Additional tests for specific combinations
+describe('Sequence Diagram Special Cases', () => {
+  it('should render complex sequence with all features', () => {
+    const diagramCode = `
+      sequenceDiagram
+        box rgb(200,220,255) Authentication
+          actor User
+          participant LoginUI@{ "type": "boundary" }
+          participant AuthService@{ "type": "control" }
+          participant UserDB@{ "type": "database" }
+        end
+
+        box rgb(200,255,220) Order Processing
+          participant Order@{ "type": "entity" }
+          participant OrderQueue@{ "type": "queue" }
+          participant AuditLogs@{ "type": "collections" }
+        end
+        
+        User ->> LoginUI: Enter credentials
+        LoginUI ->> AuthService: Validate
+        AuthService ->> UserDB: Query user
+        UserDB -->> AuthService: User data
+        alt Valid credentials
+          AuthService -->> LoginUI: Success
+          LoginUI -->> User: Welcome
+          
+          par Place order
+            User ->> Order: New order
+            Order ->> OrderQueue: Process
+            and
+            Order ->> AuditLogs: Record
+          end
+          
+          loop Until confirmed
+            OrderQueue ->> Order: Update status
+            Order -->> User: Notification
+          end
+        else Invalid credentials
+          AuthService --x LoginUI: Failure
+          LoginUI --x User: Retry
+        end
+    `;
+    imgSnapshotTest(diagramCode, {});
+  });
+
+  it('should render with wrapped messages and notes', () => {
+    const diagramCode = `
+      sequenceDiagram
+        participant A
+        participant B
+        
+        A ->> B: This is a very long message that should wrap properly in the diagram rendering
+        Note over A,B: This is a very long note that should also wrap properly when rendered in the diagram
+        
+        par Wrapped parallel
+          A ->> B: Parallel message 1<br>with explicit line break
+          and
+          B ->> A: Parallel message 2<br>with explicit line break
+        end
+        
+        loop Wrapped loop
+          Note right of B: This is a long note<br>in a loop
+          A ->> B: Message in loop
+        end
+    `;
+    imgSnapshotTest(diagramCode, { sequence: { wrap: true } });
+  });
+  describe('Sequence Diagram Rendering with Different Participant Types', () => {
+    it('should render a sequence diagram with various participant types', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+          participant User@{ "type": "actor" }
+          participant AuthService@{ "type": "control" }
+          participant UI@{ "type": "boundary" }
+          participant OrderController@{ "type": "control" }
+          participant Product@{ "type": "entity" }
+          participant MongoDB@{ "type": "database" }
+          participant Products@{ "type": "collections" }
+          participant OrderQueue@{ "type": "queue" }
+          User ->> UI: Login request
+          UI ->> AuthService: Validate credentials
+          AuthService -->> UI: Authentication token
+          UI ->> OrderController: Place order
+          OrderController ->> Product: Check availability
+          Product -->> OrderController: Available
+          OrderController ->> MongoDB: Save order
+          MongoDB -->> OrderController: Order saved
+          OrderController ->> OrderQueue: Process payment
+          OrderQueue -->> User: Order confirmation
+      `
+      );
+    });
+
+    it('should render participant creation and destruction with different types', () => {
+      imgSnapshotTest(`
+      sequenceDiagram
+          participant Alice@{ "type" : "boundary" }
+          Alice->>Bob: Hello Bob, how are you ?
+          Bob->>Alice: Fine, thank you. And you?
+          create participant Carl@{ "type" : "control" }
+          Alice->>Carl: Hi Carl!
+          create actor D as Donald
+          Carl->>D: Hi!
+          destroy Carl
+          Alice-xCarl: We are too many
+          destroy Bob
+          Bob->>Alice: I agree
+      `);
+    });
+
+    it('should handle complex interactions between different participant types', () => {
+      imgSnapshotTest(
+        `
+     sequenceDiagram
+        box rgb(200,220,255) Authentication
+          participant User@{ "type": "actor" }
+          participant LoginUI@{ "type": "boundary" }
+          participant AuthService@{ "type": "control" }
+          participant UserDB@{ "type": "database" }
+        end
+
+        box rgb(200,255,220) Order Processing
+          participant Order@{ "type": "entity" }
+          participant OrderQueue@{ "type": "queue" }
+          participant AuditLogs@{ "type": "collections" }
+        end
+
+        User ->> LoginUI: Enter credentials
+        LoginUI ->> AuthService: Validate
+        AuthService ->> UserDB: Query user
+        UserDB -->> AuthService: User data
+
+        alt Valid credentials
+          AuthService -->> LoginUI: Success
+          LoginUI -->> User: Welcome
+
+          par Place order
+            User ->> Order: New order
+            Order ->> OrderQueue: Process
+            and
+            Order ->> AuditLogs: Record
+          end
+
+          loop Until confirmed
+            OrderQueue ->> Order: Update status
+            Order -->> User: Notification
+          end
+        else Invalid credentials
+          AuthService --x LoginUI: Failure
+          LoginUI --x User: Retry
+        end
+      `,
+        { sequence: { useMaxWidth: false } }
+      );
+    });
+
+    it('should render parallel processes with different participant types', () => {
+      imgSnapshotTest(
+        `
+       sequenceDiagram
+        participant Customer@{ "type": "actor" }
+        participant Frontend@{ "type": "participant" }
+        participant PaymentService@{ "type": "boundary" }
+        participant InventoryManager@{ "type": "control" }
+        participant Order@{ "type": "entity" }
+        participant OrdersDB@{ "type": "database" }
+        participant NotificationQueue@{ "type": "queue" }
+
+        Customer ->> Frontend: Place order
+        Frontend ->> Order: Create order
+        par Parallel Processing
+          Order ->> PaymentService: Process payment
+          and
+          Order ->> InventoryManager: Reserve items
+        end
+        PaymentService -->> Order: Payment confirmed
+        InventoryManager -->> Order: Items reserved
+        Order ->> OrdersDB: Save finalized order
+        OrdersDB -->> Order: Order saved
+        Order ->> NotificationQueue: Send confirmation
+        NotificationQueue -->> Customer: Order confirmation
+      `
+      );
+    });
+  });
+  it('should render different participant types with notes and loops', () => {
+    imgSnapshotTest(
+      `
+    sequenceDiagram
+    actor Admin
+    participant Dashboard
+    participant AuthService@{ "type" : "boundary" }
+    participant UserManager@{ "type" : "control" }
+    participant UserProfile@{ "type" : "entity" }
+    participant UserDB@{ "type" : "database" }
+    participant Logs@{ "type" : "database" }
+    
+    Admin ->> Dashboard: Open user management
+    loop Authentication check
+      Dashboard ->> AuthService: Verify admin rights
+      AuthService ->> Dashboard: Access granted
+    end
+    Dashboard ->> UserManager: List users
+    UserManager ->> UserDB: Query users
+    UserDB ->> UserManager: Return user data
+    Note right of UserDB: Encrypted data<br/>requires decryption
+    UserManager ->> UserProfile: Format profiles
+    UserProfile ->> UserManager: Formatted data
+    UserManager ->> Dashboard: Display users
+    Dashboard ->> Logs: Record access
+    Logs ->> Admin: Audit trail
+    `
+    );
+  });
+
+  it('should render different participant types with alternative flows', () => {
+    imgSnapshotTest(
+      `
+    sequenceDiagram
+      actor Client
+      participant MobileApp
+      participant CloudService@{ "type" : "boundary" }
+      participant DataProcessor@{ "type" : "control" }
+      participant Transaction@{ "type" : "entity" }
+      participant TransactionsDB@{ "type" : "database" }
+      participant EventBus@{ "type" : "queue" }
+      
+      Client ->> MobileApp: Initiate transaction
+      MobileApp ->> CloudService: Authenticate
+      alt Authentication successful
+        CloudService -->> MobileApp: Auth token
+        MobileApp ->> DataProcessor: Process data
+        DataProcessor ->> Transaction: Create transaction
+        Transaction ->> TransactionsDB: Save record
+        TransactionsDB -->> Transaction: Confirmation
+        Transaction ->> EventBus: Publish event
+        EventBus -->> Client: Notification
+      else Authentication failed
+        CloudService -->> MobileApp: Error
+        MobileApp -->> Client: Show error
+      end
+    `
+    );
+  });
+
+  it('should render different participant types with wrapping text', () => {
+    imgSnapshotTest(
+      `
+  sequenceDiagram
+      participant B@{ "type" : "boundary" }
+      participant C@{ "type" : "control" }
+      participant E@{ "type" : "entity" }
+      participant DB@{ "type" : "database" }
+      participant COL@{ "type" : "collections" }
+      participant Q@{ "type" : "queue" }
+    
+      FE ->> B: Another long message<br/>with explicit<br/>line breaks
+      B -->> FE: Response message that is also quite long and needs to wrap
+      FE ->> C: Process data
+      C ->> E: Validate
+      E -->> C: Validation result
+      C ->> DB: Save
+      DB -->> C: Save result
+      C ->> COL: Log
+      COL -->> Q: Forward
+      Q -->> LongNameUser: Final response with confirmation of all actions taken
+    `,
+      { sequence: { wrap: true } }
+    );
+  });
+
+  describe('Sequence Diagram - New Participant Types with Long Notes and Messages', () => {
+    it('should render long notes left of boundary', () => {
+      imgSnapshotTest(
+        `
+      sequenceDiagram
+        participant Alice@{ "type" : "boundary" }
+        actor Bob
+        Alice->>Bob: Hola
+        Note left of Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
+        Bob->>Alice: I'm short though
+    `,
+        {}
+      );
+    });
+
+    it('should render wrapped long notes left of control', () => {
+      imgSnapshotTest(
+        `
+      sequenceDiagram
+      participant Alice@{ "type" : "control" }
+      actor Bob
+      Alice->>Bob: Hola
+      Note left of Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
+      Bob->>Alice: I'm short though
+    `,
+        {}
+      );
+    });
+
+    it('should render long notes right of entity', () => {
+      imgSnapshotTest(
+        `
+      sequenceDiagram
+      participant Alice@{ "type" : "entity" }
+      actor Bob
+      Alice->>Bob: Hola
+      Note right of Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
+      Bob->>Alice: I'm short though
+    `,
+        {}
+      );
+    });
+
+    it('should render wrapped long notes right of database', () => {
+      imgSnapshotTest(
+        `
+      sequenceDiagram
+      participant Alice@{ "type" : "database" }
+      actor Bob
+      Alice->>Bob: Hola
+      Note right of Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
+      Bob->>Alice: I'm short though
+    `,
+        {}
+      );
+    });
+
+    it('should render long notes over collections', () => {
+      imgSnapshotTest(
+        `
+      sequenceDiagram
+      participant Alice@{ "type" : "collections" }
+      actor Bob
+      Alice->>Bob: Hola
+      Note over Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
+      Bob->>Alice: I'm short though
+    `,
+        {}
+      );
+    });
+
+    it('should render wrapped long notes over queue', () => {
+      imgSnapshotTest(
+        `
+      sequenceDiagram
+      participant Alice@{ "type" : "queue" }
+      actor Bob
+      Alice->>Bob: Hola
+      Note over Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
+      Bob->>Alice: I'm short though
+    `,
+        {}
+      );
+    });
+
+    it('should render notes over actor and boundary', () => {
+      imgSnapshotTest(
+        `
+      sequenceDiagram
+      actor Alice
+      participant Charlie@{ "type" : "boundary" }
+      note over Alice: Some note
+      note over Charlie: Other note
+    `,
+        {}
+      );
+    });
+
+    it('should render long messages from database to collections', () => {
+      imgSnapshotTest(
+        `
+      sequenceDiagram
+      participant Alice@{ "type" : "database" }
+      participant Bob@{ "type" : "collections" }
+      Alice->>Bob: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
+      Bob->>Alice: I'm short though
+    `,
+        {}
+      );
+    });
+
+    it('should render wrapped long messages from control to entity', () => {
+      imgSnapshotTest(
+        `
+      sequenceDiagram
+      participant Alice@{ "type" : "control" }
+      participant Bob@{ "type" : "entity" }
+      Alice->>Bob:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
+      Bob->>Alice: I'm short though
+    `,
+        {}
+      );
+    });
+
+    it('should render long messages from queue to boundary', () => {
+      imgSnapshotTest(
+        `
+      sequenceDiagram
+      participant Alice@{ "type" : "queue" }
+      participant Bob@{ "type" : "boundary" }
+      Alice->>Bob: I'm short
+      Bob->>Alice: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
+    `,
+        {}
+      );
+    });
+
+    it('should render wrapped long messages from actor to database', () => {
+      imgSnapshotTest(
+        `
+      sequenceDiagram
+      actor Alice
+      participant Bob@{ "type" : "database" }
+      Alice->>Bob: I'm short
+      Bob->>Alice:wrap: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
+    `,
+        {}
+      );
+    });
+  });
+
+  describe('svg size', () => {
+    it('should render a sequence diagram when useMaxWidth is true (default)', () => {
+      renderGraph(
+        `
+      sequenceDiagram
+        actor Alice
+        participant Bob@{ "type" : "boundary" }
+        participant John@{ "type" : "control" }
+        Alice ->> Bob: Hello Bob, how are you?
+        Bob-->>John: How about you John?
+        Bob--x Alice: I am good thanks!
+        Bob-x John: I am good thanks!
+        Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
+        Bob-->Alice: Checking with John...
+        alt either this
+          Alice->>John: Yes
+        else or this
+          Alice->>John: No
+        else or this will happen
+          Alice->John: Maybe
+        end
+        par this happens in parallel
+          Alice -->> Bob: Parallel message 1
+        and
+          Alice -->> John: Parallel message 2
+        end
+      `,
+        { sequence: { useMaxWidth: true } }
+      );
+      cy.get('svg').should((svg) => {
+        expect(svg).to.have.attr('width', '100%');
+        const style = svg.attr('style');
+        expect(style).to.match(/^max-width: [\d.]+px;$/);
+        const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
+        expect(maxWidthValue).to.be.within(820 * 0.95, 820 * 1.05);
+      });
+    });
+
+    it('should render a sequence diagram when useMaxWidth is false', () => {
+      renderGraph(
+        `
+      sequenceDiagram
+        actor Alice
+        participant Bob@{ "type" : "boundary" }
+        participant John@{ "type" : "control" }
+        Alice ->> Bob: Hello Bob, how are you?
+        Bob-->>John: How about you John?
+        Bob--x Alice: I am good thanks!
+        Bob-x John: I am good thanks!
+        Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
+        Bob-->Alice: Checking with John...
+        alt either this
+          Alice->>John: Yes
+        else or this
+          Alice->>John: No
+        else or this will happen
+          Alice->John: Maybe
+        end
+        par this happens in parallel
+          Alice -->> Bob: Parallel message 1
+        and
+          Alice -->> John: Parallel message 2
+        end
+      `,
+        { sequence: { useMaxWidth: false } }
+      );
+      cy.get('svg').should((svg) => {
+        const width = parseFloat(svg.attr('width'));
+        expect(width).to.be.within(820 * 0.95, 820 * 1.05);
+        expect(svg).to.not.have.attr('style');
+      });
+    });
+  });
+});

cypress/integration/rendering/sequencediagram.spec.js

@@ -893,6 +893,17 @@ describe('Sequence diagram', () => {
         }
       );
     });
+
+    it('should handle bidirectional arrows with autonumber', () => {
+      imgSnapshotTest(`
+       sequenceDiagram
+       autonumber
+       participant A
+       participant B
+       A<<->>B: This is a bidirectional message
+       A->B: This is a normal message`);
+    });
+
     it('should support actor links and properties when not mirrored EXPERIMENTAL: USE WITH CAUTION', () => {
       //Be aware that the syntax for "properties" is likely to be changed.
       imgSnapshotTest(

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;
             } */
@@ -134,16 +109,191 @@
       ---
       config:
         layout: elk
-        flowchart:
-          curve: linear
       ---
-      flowchart LR
-          D["Use<br/>the<br/>editor"] -- Mermaid js --> I["fa:fa-code Text"]
-          I --> D & D
-          D@{ shape: question}
-          I@{ shape: question}
-</pre>
-    <pre id="diagram4" class="mermaid2">
+      flowchart-elk TB
+      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">
+      ---
+      config:
+        layout: elk
+      ---
+      flowchart TB
+
+        process_C
+      subgraph container_Alpha
+        subgraph process_B
+          pppB
+        end
+        subgraph process_A
+          pppA
+        end
+        process_B-->|via_AWSBatch|container_Beta
+        process_A-->|messages|container_Beta
+      end
+
+</pre
+    >
+    <pre id="diagram4" class="mermaid">
+      ---
+      config:
+        layout: elk
+      ---
+      flowchart TB
+      subgraph container_Beta
+        process_C
+      end
+      subgraph container_Alpha
+        subgraph process_B
+          pppB
+        end
+        subgraph process_A
+          pppA
+        end
+        process_B-->|via_AWSBatch|container_Beta
+        process_A-->|messages|container_Beta
+      end
+
+</pre
+    >
+    <pre id="diagram4" class="mermaid">
+      ---
+      config:
+        layout: elk
+      ---
+      flowchart TB
+      subgraph container_Beta
+        process_C
+      end
+
+        process_B-->|via_AWSBatch|container_Beta
+
+
+</pre
+    >
+    <pre id="diagram4" class="mermaid">
+      ---
+      config:
+        layout: elk
+      ---
+      classDiagram
+      note "I love this diagram!\nDo you love it?"
+      Class01 <|-- AveryLongClass : Cool
+      &lt;&lt;interface&gt;&gt; Class01
+      Class03 "1" *-- "*" Class04
+      Class05 "1" o-- "many" Class06
+      Class07 "1" .. "*" Class08
+      Class09 "1" --> "*" C2 : Where am i?
+      Class09 "*" --* "*" C3
+      Class09 "1" --|> "1" Class07
+      Class12 <|.. Class08
+      Class11 ..>Class12
+      Class07 : equals()
+      Class07 : Object[] elementData
+      Class01 : size()
+      Class01 : int chimp
+      Class01 : int gorilla
+      Class01 : -int privateChimp
+      Class01 : +int publicGorilla
+      Class01 : #int protectedMarmoset
+      Class08 <--> C2: Cool label
+      class Class10 {
+        &lt;&lt;service&gt;&gt;
+        int id
+        test()
+      }
+      note for Class10 "Cool class\nI said it's very cool class!"
+</pre
+    >
+    <pre id="diagram4" class="mermaid">
+      ---
+      config:
+        layout: elk
+      ---
+      requirementDiagram
+        requirement test_req {
+        id: 1
+        text: the test text.
+        risk: high
+        verifymethod: test
+        }
+
+        element test_entity {
+        type: simulation
+        }
+
+        test_entity - satisfies -> test_req
+</pre
+    >
+    <pre id="diagram4" class="mermaid">
+      ---
+      config:
+        layout: elk
+      ---
+      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: elk
+      ---
+      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: elk
@@ -566,7 +716,6 @@ kanban
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
       import layouts from './mermaid-layout-elk.esm.mjs';
-      import tidyTreeLayouts from './mermaid-layout-tidy-tree.esm.mjs';
 
       const staticBellIconPack = {
         prefix: 'fa6-regular',
@@ -592,7 +741,6 @@ kanban
         },
       ]);
       mermaid.registerLayoutLoaders(layouts);
-      mermaid.registerLayoutLoaders(tidyTreeLayouts);
       mermaid.parseError = function (err, hash) {
         console.error('Mermaid error: ', err);
       };
@@ -603,7 +751,7 @@ kanban
         alert('It worked');
       }
       await mermaid.initialize({
-        // theme: 'forest',
+        // theme: 'base',
         // theme: 'default',
         // theme: 'forest',
         // handDrawnSeed: 12,
@@ -614,7 +762,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/platform/mindmap-layouts.html

@@ -101,14 +101,7 @@
         C
         D
     </pre>
-    <pre class="mermaid">
-      mindmap
-      root((mindmap is a long thing))
-        A
-        B
-        C
-        D
-    </pre>
+
     <pre class="mermaid">
     ---
       config:
@@ -369,6 +362,10 @@
     <hr />
     <script type="module">
       import mermaid from '/mermaid.esm.mjs';
+      import tidytree from '/mermaid-layout-tidy-tree.esm.mjs';
+      import layouts from './mermaid-layout-elk.esm.mjs';
+      mermaid.registerLayoutLoaders(layouts);
+      mermaid.registerLayoutLoaders(tidytree);
       mermaid.initialize({
         theme: 'default',
         logLevel: 3,

cypress/platform/sidv.html

@@ -41,10 +41,6 @@ graph TB
       const { svg } = await mermaid.render('d22', value);
       console.log(svg);
       el.innerHTML = svg;
-      // mermaid.test1('first_slow', 1200).then((r) => console.info(r));
-      // mermaid.test1('second_fast', 200).then((r) => console.info(r));
-      // mermaid.test1('third_fast', 200).then((r) => console.info(r));
-      // mermaid.test1('forth_slow', 1200).then((r) => console.info(r));
     </script>
   </body>
 </html>

cypress/platform/viewer.js

@@ -1,5 +1,6 @@
 import externalExample from './mermaid-example-diagram.esm.mjs';
 import layouts from './mermaid-layout-elk.esm.mjs';
+import tidyTree from './mermaid-layout-tidy-tree.esm.mjs';
 import zenUml from './mermaid-zenuml.esm.mjs';
 import mermaid from './mermaid.esm.mjs';
 
@@ -65,6 +66,7 @@ const contentLoaded = async function () {
     await mermaid.registerExternalDiagrams([externalExample, zenUml]);
 
     mermaid.registerLayoutLoaders(layouts);
+    mermaid.registerLayoutLoaders(tidyTree);
     mermaid.initialize(graphObj.mermaid);
     /**
      *  CC-BY-4.0
@@ -182,7 +184,7 @@ const contentLoadedApi = async function () {
       for (let i = 0; i < numCodes; i++) {
         const { svg, bindFunctions } = await mermaid.render('newid' + i, graphObj.code[i], divs[i]);
         div.innerHTML = svg;
-        bindFunctions(div);
+        bindFunctions?.(div);
       }
     } else {
       const div = document.createElement('div');
@@ -194,7 +196,7 @@ const contentLoadedApi = async function () {
       const { svg, bindFunctions } = await mermaid.render('newid', graphObj.code, div);
       div.innerHTML = svg;
       console.log(div.innerHTML);
-      bindFunctions(div);
+      bindFunctions?.(div);
     }
   }
 };

cypress/timings.json

@@ -2,35 +2,35 @@
   "durations": [
     {
       "spec": "cypress/integration/other/configuration.spec.js",
-      "duration": 5815
+      "duration": 5841
     },
     {
       "spec": "cypress/integration/other/external-diagrams.spec.js",
-      "duration": 2035
+      "duration": 2138
     },
     {
       "spec": "cypress/integration/other/ghsa.spec.js",
-      "duration": 3386
+      "duration": 3370
     },
     {
       "spec": "cypress/integration/other/iife.spec.js",
-      "duration": 2089
+      "duration": 2052
     },
     {
       "spec": "cypress/integration/other/interaction.spec.js",
-      "duration": 11578
+      "duration": 12243
     },
     {
       "spec": "cypress/integration/other/rerender.spec.js",
-      "duration": 2119
+      "duration": 2065
     },
     {
       "spec": "cypress/integration/other/xss.spec.js",
-      "duration": 27282
+      "duration": 31288
     },
     {
       "spec": "cypress/integration/rendering/appli.spec.js",
-      "duration": 3377
+      "duration": 3421
     },
     {
       "spec": "cypress/integration/rendering/architecture.spec.ts",
@@ -38,95 +38,95 @@
     },
     {
       "spec": "cypress/integration/rendering/block.spec.js",
-      "duration": 18137
+      "duration": 18500
     },
     {
       "spec": "cypress/integration/rendering/c4.spec.js",
-      "duration": 5455
+      "duration": 5793
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-elk-v3.spec.js",
-      "duration": 40850
+      "duration": 40966
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-handDrawn-v3.spec.js",
-      "duration": 37964
+      "duration": 39176
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-v2.spec.js",
-      "duration": 23446
+      "duration": 23468
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-v3.spec.js",
-      "duration": 37207
+      "duration": 38291
     },
     {
       "spec": "cypress/integration/rendering/classDiagram.spec.js",
-      "duration": 16531
+      "duration": 16949
     },
     {
       "spec": "cypress/integration/rendering/conf-and-directives.spec.js",
-      "duration": 9385
+      "duration": 9480
     },
     {
       "spec": "cypress/integration/rendering/current.spec.js",
-      "duration": 2697
+      "duration": 2753
     },
     {
       "spec": "cypress/integration/rendering/erDiagram-unified.spec.js",
-      "duration": 88648
+      "duration": 88028
     },
     {
       "spec": "cypress/integration/rendering/erDiagram.spec.js",
-      "duration": 15094
+      "duration": 15615
     },
     {
       "spec": "cypress/integration/rendering/errorDiagram.spec.js",
-      "duration": 3548
+      "duration": 3706
     },
     {
       "spec": "cypress/integration/rendering/flowchart-elk.spec.js",
-      "duration": 44889
+      "duration": 43905
     },
     {
       "spec": "cypress/integration/rendering/flowchart-handDrawn.spec.js",
-      "duration": 30487
+      "duration": 31217
     },
     {
       "spec": "cypress/integration/rendering/flowchart-icon.spec.js",
-      "duration": 7375
+      "duration": 7531
     },
     {
       "spec": "cypress/integration/rendering/flowchart-shape-alias.spec.ts",
-      "duration": 24913
+      "duration": 25423
     },
     {
       "spec": "cypress/integration/rendering/flowchart-v2.spec.js",
-      "duration": 51927
+      "duration": 49664
     },
     {
       "spec": "cypress/integration/rendering/flowchart.spec.js",
-      "duration": 31676
+      "duration": 32525
     },
     {
       "spec": "cypress/integration/rendering/gantt.spec.js",
-      "duration": 19897
+      "duration": 20915
     },
     {
       "spec": "cypress/integration/rendering/gitGraph.spec.js",
-      "duration": 53450
+      "duration": 53556
     },
     {
       "spec": "cypress/integration/rendering/iconShape.spec.ts",
-      "duration": 287035
+      "duration": 283038
     },
     {
       "spec": "cypress/integration/rendering/imageShape.spec.ts",
-      "duration": 58555
+      "duration": 59434
     },
     {
       "spec": "cypress/integration/rendering/info.spec.ts",
-      "duration": 3179
+      "duration": 3101
     },
     {
       "spec": "cypress/integration/rendering/journey.spec.js",
@@ -134,87 +134,95 @@
     },
     {
       "spec": "cypress/integration/rendering/kanban.spec.ts",
-      "duration": 7628
+      "duration": 7567
     },
     {
       "spec": "cypress/integration/rendering/katex.spec.js",
-      "duration": 3764
+      "duration": 3817
     },
     {
       "spec": "cypress/integration/rendering/marker_unique_id.spec.js",
-      "duration": 2573
+      "duration": 2624
+    },
+    {
+      "spec": "cypress/integration/rendering/mindmap-tidy-tree.spec.js",
+      "duration": 4246
     },
     {
       "spec": "cypress/integration/rendering/mindmap.spec.ts",
-      "duration": 11269
+      "duration": 11967
     },
     {
       "spec": "cypress/integration/rendering/newShapes.spec.ts",
-      "duration": 148389
+      "duration": 151914
     },
     {
       "spec": "cypress/integration/rendering/oldShapes.spec.ts",
-      "duration": 113395
+      "duration": 116698
     },
     {
       "spec": "cypress/integration/rendering/packet.spec.ts",
-      "duration": 4714
+      "duration": 4967
     },
     {
       "spec": "cypress/integration/rendering/pie.spec.ts",
-      "duration": 6446
+      "duration": 6700
     },
     {
       "spec": "cypress/integration/rendering/quadrantChart.spec.js",
-      "duration": 9133
+      "duration": 8963
     },
     {
       "spec": "cypress/integration/rendering/radar.spec.js",
-      "duration": 5544
+      "duration": 5540
     },
     {
       "spec": "cypress/integration/rendering/requirement.spec.js",
-      "duration": 2709
+      "duration": 2782
     },
     {
       "spec": "cypress/integration/rendering/requirementDiagram-unified.spec.js",
-      "duration": 55647
+      "duration": 54797
     },
     {
       "spec": "cypress/integration/rendering/sankey.spec.ts",
-      "duration": 6751
+      "duration": 6914
+    },
+    {
+      "spec": "cypress/integration/rendering/sequencediagram-v2.spec.js",
+      "duration": 20481
     },
     {
       "spec": "cypress/integration/rendering/sequencediagram.spec.js",
-      "duration": 36618
+      "duration": 38490
     },
     {
       "spec": "cypress/integration/rendering/stateDiagram-v2.spec.js",
-      "duration": 29642
+      "duration": 30766
     },
     {
       "spec": "cypress/integration/rendering/stateDiagram.spec.js",
-      "duration": 16037
+      "duration": 16705
     },
     {
       "spec": "cypress/integration/rendering/theme.spec.js",
-      "duration": 30006
+      "duration": 30928
     },
     {
       "spec": "cypress/integration/rendering/timeline.spec.ts",
-      "duration": 8451
+      "duration": 8424
     },
     {
       "spec": "cypress/integration/rendering/treemap.spec.ts",
-      "duration": 11996
+      "duration": 12533
     },
     {
       "spec": "cypress/integration/rendering/xyChart.spec.js",
-      "duration": 20627
+      "duration": 21197
     },
     {
       "spec": "cypress/integration/rendering/zenuml.spec.js",
-      "duration": 3472
+      "duration": 3455
     }
   ]
 }

demos/sankey.html

@@ -20,14 +20,14 @@
           width: 800
           nodeAlignment: left
       ---
-     sankey   
+     sankey
         a,b,8
         b,c,8
         c,d,8
         d,e,8
-        
+
         x,c,4
-        c,y,4 
+        c,y,4
     </pre>
 
     <h2>Energy flow</h2>

docs/config/faq.md

@@ -6,7 +6,7 @@
 
 # Frequently Asked Questions
 
-1. [How to add title to flowchart?](https://github.com/mermaid-js/mermaid/issues/556#issuecomment-363182217)
+1. [How to add title to flowchart?](https://github.com/mermaid-js/mermaid/issues/1433#issuecomment-1991554712)
 2. [How to specify custom CSS file?](https://github.com/mermaidjs/mermaid.cli/pull/24#issuecomment-373402785)
 3. [How to fix tooltip misplacement issue?](https://github.com/mermaid-js/mermaid/issues/542#issuecomment-3343564621)
 4. [How to specify gantt diagram xAxis format?](https://github.com/mermaid-js/mermaid/issues/269#issuecomment-373229136)

docs/config/layouts.md

@@ -0,0 +1,40 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/layouts.md](../../packages/mermaid/src/docs/config/layouts.md).
+
+# Layouts
+
+This page lists the available layout algorithms supported in Mermaid diagrams.
+
+## Supported Layouts
+
+- **elk**: [ELK (Eclipse Layout Kernel)](https://www.eclipse.org/elk/)
+- **tidy-tree**: Tidy tree layout for hierarchical diagrams [Tidy Tree Configuration](/config/tidy-tree)
+- **cose-bilkent**: Cose Bilkent layout for force-directed graphs
+- **dagre**: Dagre layout for layered graphs
+
+## How to Use
+
+You can specify the layout in your diagram's YAML config or initialization options. For example:
+
+```mermaid-example
+---
+config:
+  layout: elk
+---
+graph TD;
+  A-->B;
+  B-->C;
+```
+
+```mermaid
+---
+config:
+  layout: elk
+---
+graph TD;
+  A-->B;
+  B-->C;
+```

docs/config/setup/config/README.md

@@ -19,6 +19,7 @@
 - [addDirective](functions/addDirective.md)
 - [getConfig](functions/getConfig.md)
 - [getSiteConfig](functions/getSiteConfig.md)
+- [getUserDefinedConfig](functions/getUserDefinedConfig.md)
 - [reset](functions/reset.md)
 - [sanitize](functions/sanitize.md)
 - [saveConfigFromInitialize](functions/saveConfigFromInitialize.md)

docs/config/setup/config/functions/getUserDefinedConfig.md

@@ -0,0 +1,19 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/config/functions/getUserDefinedConfig.md](../../../../../packages/mermaid/src/docs/config/setup/config/functions/getUserDefinedConfig.md).
+
+[**mermaid**](../../README.md)
+
+---
+
+# Function: getUserDefinedConfig()
+
+> **getUserDefinedConfig**(): [`MermaidConfig`](../../mermaid/interfaces/MermaidConfig.md)
+
+Defined in: [packages/mermaid/src/config.ts:252](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L252)
+
+## Returns
+
+[`MermaidConfig`](../../mermaid/interfaces/MermaidConfig.md)

docs/config/setup/mermaid/README.md

@@ -10,10 +10,6 @@
 
 # mermaid
 
-## Classes
-
-- [UnknownDiagramError](classes/UnknownDiagramError.md)
-
 ## Interfaces
 
 - [DetailedError](interfaces/DetailedError.md)
@@ -27,6 +23,7 @@
 - [RenderOptions](interfaces/RenderOptions.md)
 - [RenderResult](interfaces/RenderResult.md)
 - [RunOptions](interfaces/RunOptions.md)
+- [UnknownDiagramError](interfaces/UnknownDiagramError.md)
 
 ## Type Aliases
 

docs/config/setup/mermaid/classes/UnknownDiagramError.md

@@ -1,159 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/mermaid/classes/UnknownDiagramError.md](../../../../../packages/mermaid/src/docs/config/setup/mermaid/classes/UnknownDiagramError.md).
-
-[**mermaid**](../../README.md)
-
----
-
-# Class: UnknownDiagramError
-
-Defined in: [packages/mermaid/src/errors.ts:1](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/errors.ts#L1)
-
-## Extends
-
-- `Error`
-
-## Constructors
-
-### new UnknownDiagramError()
-
-> **new UnknownDiagramError**(`message`): [`UnknownDiagramError`](UnknownDiagramError.md)
-
-Defined in: [packages/mermaid/src/errors.ts:2](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/errors.ts#L2)
-
-#### Parameters
-
-##### message
-
-`string`
-
-#### Returns
-
-[`UnknownDiagramError`](UnknownDiagramError.md)
-
-#### Overrides
-
-`Error.constructor`
-
-## Properties
-
-### cause?
-
-> `optional` **cause**: `unknown`
-
-Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es2022.error.d.ts:26
-
-#### Inherited from
-
-`Error.cause`
-
----
-
-### message
-
-> **message**: `string`
-
-Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es5.d.ts:1077
-
-#### Inherited from
-
-`Error.message`
-
----
-
-### name
-
-> **name**: `string`
-
-Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es5.d.ts:1076
-
-#### Inherited from
-
-`Error.name`
-
----
-
-### stack?
-
-> `optional` **stack**: `string`
-
-Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es5.d.ts:1078
-
-#### Inherited from
-
-`Error.stack`
-
----
-
-### prepareStackTrace()?
-
-> `static` `optional` **prepareStackTrace**: (`err`, `stackTraces`) => `any`
-
-Defined in: node_modules/.pnpm/@types+node\@22.13.5/node_modules/@types/node/globals.d.ts:143
-
-Optional override for formatting stack traces
-
-#### Parameters
-
-##### err
-
-`Error`
-
-##### stackTraces
-
-`CallSite`\[]
-
-#### Returns
-
-`any`
-
-#### See
-
-<https://v8.dev/docs/stack-trace-api#customizing-stack-traces>
-
-#### Inherited from
-
-`Error.prepareStackTrace`
-
----
-
-### stackTraceLimit
-
-> `static` **stackTraceLimit**: `number`
-
-Defined in: node_modules/.pnpm/@types+node\@22.13.5/node_modules/@types/node/globals.d.ts:145
-
-#### Inherited from
-
-`Error.stackTraceLimit`
-
-## Methods
-
-### captureStackTrace()
-
-> `static` **captureStackTrace**(`targetObject`, `constructorOpt`?): `void`
-
-Defined in: node_modules/.pnpm/@types+node\@22.13.5/node_modules/@types/node/globals.d.ts:136
-
-Create .stack property on a target object
-
-#### Parameters
-
-##### targetObject
-
-`object`
-
-##### constructorOpt?
-
-`Function`
-
-#### Returns
-
-`void`
-
-#### Inherited from
-
-`Error.captureStackTrace`

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

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

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

@@ -10,7 +10,7 @@
 
 # Interface: LayoutData
 
-Defined in: [packages/mermaid/src/rendering-util/types.ts:170](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L170)
+Defined in: [packages/mermaid/src/rendering-util/types.ts:168](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L168)
 
 ## Indexable
 
@@ -22,7 +22,7 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:170](https://github.co
 
 > **config**: [`MermaidConfig`](MermaidConfig.md)
 
-Defined in: [packages/mermaid/src/rendering-util/types.ts:173](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L173)
+Defined in: [packages/mermaid/src/rendering-util/types.ts:171](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L171)
 
 ---
 
@@ -30,7 +30,7 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:173](https://github.co
 
 > **edges**: `Edge`\[]
 
-Defined in: [packages/mermaid/src/rendering-util/types.ts:172](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L172)
+Defined in: [packages/mermaid/src/rendering-util/types.ts:170](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L170)
 
 ---
 
@@ -38,4 +38,4 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:172](https://github.co
 
 > **nodes**: `Node`\[]
 
-Defined in: [packages/mermaid/src/rendering-util/types.ts:171](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L171)
+Defined in: [packages/mermaid/src/rendering-util/types.ts:169](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L169)

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

@@ -32,7 +32,7 @@ page.
 
 ### detectType()
 
-> **detectType**: (`text`, `config`?) => `string`
+> **detectType**: (`text`, `config?`) => `string`
 
 Defined in: [packages/mermaid/src/mermaid.ts:449](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L449)
 
@@ -105,7 +105,7 @@ An array of objects with the id of the diagram.
 
 ### ~~init()~~
 
-> **init**: (`config`?, `nodes`?, `callback`?) => `Promise`<`void`>
+> **init**: (`config?`, `nodes?`, `callback?`) => `Promise`<`void`>
 
 Defined in: [packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L442)
 
@@ -117,7 +117,7 @@ Defined in: [packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/
 
 [`MermaidConfig`](MermaidConfig.md)
 
-**Deprecated**, please set configuration in [initialize](Mermaid.md#initialize).
+**Deprecated**, please set configuration in [initialize](#initialize).
 
 ##### nodes?
 
@@ -141,13 +141,13 @@ Called once for each rendered diagram's id.
 
 #### Deprecated
 
-Use [initialize](Mermaid.md#initialize) and [run](Mermaid.md#run) instead.
+Use [initialize](#initialize) and [run](#run) instead.
 
 Renders the mermaid diagrams
 
 #### Deprecated
 
-Use [initialize](Mermaid.md#initialize) and [run](Mermaid.md#run) instead.
+Use [initialize](#initialize) and [run](#run) instead.
 
 ---
 
@@ -176,7 +176,7 @@ Configuration object for mermaid.
 
 ### ~~mermaidAPI~~
 
-> **mermaidAPI**: `Readonly`<{ `defaultConfig`: [`MermaidConfig`](MermaidConfig.md); `getConfig`: () => [`MermaidConfig`](MermaidConfig.md); `getDiagramFromText`: (`text`, `metadata`) => `Promise`<`Diagram`>; `getSiteConfig`: () => [`MermaidConfig`](MermaidConfig.md); `globalReset`: () => `void`; `initialize`: (`userOptions`) => `void`; `parse`: (`text`, `parseOptions`) => `Promise`<`false` | [`ParseResult`](ParseResult.md)>(`text`, `parseOptions`?) => `Promise`<[`ParseResult`](ParseResult.md)>; `render`: (`id`, `text`, `svgContainingElement`?) => `Promise`<[`RenderResult`](RenderResult.md)>; `reset`: () => `void`; `setConfig`: (`conf`) => [`MermaidConfig`](MermaidConfig.md); `updateSiteConfig`: (`conf`) => [`MermaidConfig`](MermaidConfig.md); }>
+> **mermaidAPI**: `Readonly`<{ `defaultConfig`: [`MermaidConfig`](MermaidConfig.md); `getConfig`: () => [`MermaidConfig`](MermaidConfig.md); `getDiagramFromText`: (`text`, `metadata`) => `Promise`<`Diagram`>; `getSiteConfig`: () => [`MermaidConfig`](MermaidConfig.md); `globalReset`: () => `void`; `initialize`: (`userOptions`) => `void`; `parse`: {(`text`, `parseOptions`): `Promise`<`false` | [`ParseResult`](ParseResult.md)>; (`text`, `parseOptions?`): `Promise`<[`ParseResult`](ParseResult.md)>; }; `render`: (`id`, `text`, `svgContainingElement?`) => `Promise`<[`RenderResult`](RenderResult.md)>; `reset`: () => `void`; `setConfig`: (`conf`) => [`MermaidConfig`](MermaidConfig.md); `updateSiteConfig`: (`conf`) => [`MermaidConfig`](MermaidConfig.md); }>
 
 Defined in: [packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L436)
 
@@ -184,73 +184,81 @@ Defined in: [packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/
 
 #### Deprecated
 
-Use [parse](Mermaid.md#parse) and [render](Mermaid.md#render) instead. Please [open a discussion](https://github.com/mermaid-js/mermaid/discussions) if your use case does not fit the new API.
+Use [parse](#parse) and [render](#render) instead. Please [open a discussion](https://github.com/mermaid-js/mermaid/discussions) if your use case does not fit the new API.
 
 ---
 
 ### parse()
 
-> **parse**: (`text`, `parseOptions`) => `Promise`<`false` | [`ParseResult`](ParseResult.md)>(`text`, `parseOptions`?) => `Promise`<[`ParseResult`](ParseResult.md)>
+> **parse**: {(`text`, `parseOptions`): `Promise`<`false` | [`ParseResult`](ParseResult.md)>; (`text`, `parseOptions?`): `Promise`<[`ParseResult`](ParseResult.md)>; }
 
 Defined in: [packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437)
 
+#### Call Signature
+
+> (`text`, `parseOptions`): `Promise`<`false` | [`ParseResult`](ParseResult.md)>
+
 Parse the text and validate the syntax.
 
-#### Parameters
+##### Parameters
 
-##### text
+###### text
 
 `string`
 
 The mermaid diagram definition.
 
-##### parseOptions
+###### parseOptions
 
 [`ParseOptions`](ParseOptions.md) & `object`
 
 Options for parsing.
 
-#### Returns
+##### Returns
 
 `Promise`<`false` | [`ParseResult`](ParseResult.md)>
 
 An object with the `diagramType` set to type of the diagram if valid. Otherwise `false` if parseOptions.suppressErrors is `true`.
 
-#### See
+##### See
 
 [ParseOptions](ParseOptions.md)
 
-#### Throws
+##### Throws
 
 Error if the diagram is invalid and parseOptions.suppressErrors is false or not set.
 
+#### Call Signature
+
+> (`text`, `parseOptions?`): `Promise`<[`ParseResult`](ParseResult.md)>
+
 Parse the text and validate the syntax.
 
-#### Parameters
+##### Parameters
 
-##### text
+###### text
 
 `string`
 
 The mermaid diagram definition.
 
-##### parseOptions?
+###### parseOptions?
 
 [`ParseOptions`](ParseOptions.md)
 
 Options for parsing.
 
-#### Returns
+##### Returns
 
 `Promise`<[`ParseResult`](ParseResult.md)>
 
 An object with the `diagramType` set to type of the diagram if valid. Otherwise `false` if parseOptions.suppressErrors is `true`.
 
-#### See
+##### See
 
 [ParseOptions](ParseOptions.md)
 
-#### Throws
+##### Throws
 
 Error if the diagram is invalid and parseOptions.suppressErrors is false or not set.
 
@@ -332,7 +340,7 @@ Defined in: [packages/mermaid/src/mermaid.ts:444](https://github.com/mermaid-js/
 
 ### render()
 
-> **render**: (`id`, `text`, `svgContainingElement`?) => `Promise`<[`RenderResult`](RenderResult.md)>
+> **render**: (`id`, `text`, `svgContainingElement?`) => `Promise`<[`RenderResult`](RenderResult.md)>
 
 Defined in: [packages/mermaid/src/mermaid.ts:438](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L438)
 

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

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

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

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

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

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

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

@@ -0,0 +1,65 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/mermaid/interfaces/UnknownDiagramError.md](../../../../../packages/mermaid/src/docs/config/setup/mermaid/interfaces/UnknownDiagramError.md).
+
+[**mermaid**](../../README.md)
+
+---
+
+# Interface: UnknownDiagramError
+
+Defined in: [packages/mermaid/src/errors.ts:1](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/errors.ts#L1)
+
+## Extends
+
+- `Error`
+
+## Properties
+
+### cause?
+
+> `optional` **cause**: `unknown`
+
+Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es2022.error.d.ts:26
+
+#### Inherited from
+
+`Error.cause`
+
+---
+
+### message
+
+> **message**: `string`
+
+Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es5.d.ts:1077
+
+#### Inherited from
+
+`Error.message`
+
+---
+
+### name
+
+> **name**: `string`
+
+Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es5.d.ts:1076
+
+#### Inherited from
+
+`Error.name`
+
+---
+
+### stack?
+
+> `optional` **stack**: `string`
+
+Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es5.d.ts:1078
+
+#### Inherited from
+
+`Error.stack`

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

@@ -10,6 +10,6 @@
 
 # Type Alias: InternalHelpers
 
-> **InternalHelpers**: _typeof_ `internalHelpers`
+> **InternalHelpers** = _typeof_ `internalHelpers`
 
 Defined in: [packages/mermaid/src/internals.ts:33](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/internals.ts#L33)

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

@@ -10,7 +10,7 @@
 
 # Type Alias: ParseErrorFunction()
 
-> **ParseErrorFunction**: (`err`, `hash`?) => `void`
+> **ParseErrorFunction** = (`err`, `hash?`) => `void`
 
 Defined in: [packages/mermaid/src/Diagram.ts:10](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/Diagram.ts#L10)
 

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

@@ -10,6 +10,6 @@
 
 # Type Alias: SVG
 
-> **SVG**: `d3.Selection`<`SVGSVGElement`, `unknown`, `Element` | `null`, `unknown`>
+> **SVG** = `d3.Selection`<`SVGSVGElement`, `unknown`, `Element` | `null`, `unknown`>
 
-Defined in: [packages/mermaid/src/diagram-api/types.ts:126](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L126)
+Defined in: [packages/mermaid/src/diagram-api/types.ts:128](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L128)

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

@@ -10,6 +10,6 @@
 
 # Type Alias: SVGGroup
 
-> **SVGGroup**: `d3.Selection`<`SVGGElement`, `unknown`, `Element` | `null`, `unknown`>
+> **SVGGroup** = `d3.Selection`<`SVGGElement`, `unknown`, `Element` | `null`, `unknown`>
 
-Defined in: [packages/mermaid/src/diagram-api/types.ts:128](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L128)
+Defined in: [packages/mermaid/src/diagram-api/types.ts:130](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L130)

docs/config/tidy-tree.md

@@ -0,0 +1,89 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/tidy-tree.md](../../packages/mermaid/src/docs/config/tidy-tree.md).
+
+# Tidy-tree Layout
+
+The **tidy-tree** layout arranges nodes in a hierarchical, tree-like structure. It is especially useful for diagrams where parent-child relationships are important, such as mindmaps.
+
+## Features
+
+- Organizes nodes in a tidy, non-overlapping tree
+- Ideal for mindmaps and hierarchical data
+- Automatically adjusts spacing for readability
+
+## Example Usage
+
+```mermaid-example
+---
+config:
+  layout: tidy-tree
+---
+mindmap
+root((mindmap is a long thing))
+  A
+  B
+  C
+  D
+```
+
+```mermaid
+---
+config:
+  layout: tidy-tree
+---
+mindmap
+root((mindmap is a long thing))
+  A
+  B
+  C
+  D
+```
+
+```mermaid-example
+---
+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
+```
+
+```mermaid
+---
+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
+```
+
+## Note
+
+- Currently, tidy-tree is primarily supported for mindmap diagrams.

docs/ecosystem/integrations-community.md

@@ -73,7 +73,7 @@ To add an integration to this list, see the [Integrations - create page](./integ
 - [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) ✅
 - [Outline](https://docs.getoutline.com/s/guide/doc/diagrams-KQiKoT4wzK) ✅
 - [Redmine](https://redmine.org)
-  - [Mermaid Macro](https://www.redmine.org/plugins/redmine_mermaid_macro)
+  - [Mermaid Macro](https://redmine.org/plugins/redmine_mermaid_macro)
   - [Markdown for mermaid plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin)
   - [redmine-mermaid](https://github.com/styz/redmine_mermaid)
 - Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive)
@@ -117,7 +117,7 @@ Content Management Systems/Enterprise Content Management
 - [Grav CMS](https://getgrav.org/)
   - [Mermaid Diagrams Plugin](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams)
   - [GitLab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
-- [Tiki](https://tiki.org)
+- [Tiki Wiki CMS Groupware](https://tiki.org)
   - [Tracker Entity Relationship Diagram](https://doc.tiki.org/Tracker-Entity-Relationship-Diagram)
 - [VitePress](https://vitepress.vuejs.org/)
   - [Plugin for Mermaid.js](https://emersonbottero.github.io/vitepress-plugin-mermaid/)

docs/news/blog.md

@@ -6,6 +6,66 @@
 
 # Blog
 
+## [Mermaid introduces the Visual Editor for Entity Relationship diagrams](https://docs.mermaidchart.com/blog/posts/mermaid-introduces-the-visual-editor-for-entity-relationship-diagrams)
+
+7/15/2025 • 7 mins
+
+Mermaid just introduced a Visual Editor for Entity Relationship diagrams, letting anyone map database structures through a simple point-and-click interface instead of code. This no-code ER builder now sits alongside Mermaid’s editors for flowcharts, sequence, and class diagrams, enabling teams to craft and share polished data models for apps, AI, and business processes.
+
+## [Mermaid supports Treemap Diagrams now!!!](https://docs.mermaidchart.com/blog/posts/mermaid-have-treemap-diagrams-now)
+
+7/3/2025 • 4 mins
+
+Mermaid has introduced Treemap diagrams, currently in beta, enhancing hierarchical data visualization. Treemap diagrams use nested rectangles to represent data relationships, focusing on size and proportions. They offer various applications, including budget visualization and market analysis. With simple syntax and customization options, users can effectively present complex data hierarchies.
+
+## [AI Diagram Generators and Data Visualization: Best Practices](https://docs.mermaidchart.com/blog/posts/ai-diagram-generators-and-data-visualization-best-practices)
+
+7/2/2025 • 6 mins
+
+AI diagram generators transform complex data into clear, interactive visuals – enabling faster analysis, better decisions, and stronger collaboration across teams. By combining automation with manual refinement, these tools empower anyone to communicate insights effectively, regardless of technical skill level.
+
+## [How to Choose the Best AI Diagram Generator for Your Needs (2025)](https://docs.mermaidchart.com/blog/posts/how-to-choose-the-best-ai-diagram-generator-for-your-needs-2025)
+
+6/26/2025 • 14 mins
+
+AI diagram generators are transforming how developers visualize and communicate complex systems, reducing hours of manual work into minutes. With tools like Mermaid AI, users benefit from both code-based and visual editing, enabling seamless collaboration and precision. Whether you’re diagramming workflows, software architecture, or data relationships, the right AI tool can significantly boost productivity and streamline communication.
+
+## [5 Time-Saving Tips for Using Mermaid’s AI Diagram Generator Effectively](https://docs.mermaidchart.com/blog/posts/5-time-saving-tips-for-using-mermaids-ai-diagram-generator-effectively)
+
+6/11/2025 • 10 mins
+
+See how developers can save time and boost productivity using Mermaid Chart’s AI diagram generator. Learn five practical tips that help turn plain language into powerful, professional diagrams.
+
+## [Enhancing Team Collaboration with AI-Powered Diagrams](https://docs.mermaidchart.com/blog/posts/enhancing-team-collaboration-with-ai-powered-diagrams)
+
+5/27/2025 • 6 mins
+
+Software teams move fast, but old-school diagramming tools can’t keep up. Mermaid Chart replaces static slides and whiteboards with real-time, AI-generated visuals that evolve with your code and ideas. Just describe a process in plain English, and watch it come to life.
+
+## [What is an AI Diagram Generator? Benefits and Use Cases](https://docs.mermaidchart.com/blog/posts/what-is-an-ai-diagram-generator-benefits-and-use-cases)
+
+5/22/2025 • 6 mins
+
+Discover how AI diagram generators like Mermaid Chart transform developer workflows. Instantly turn text into flowcharts, ERDs, and system diagrams, no manual drag-and-drop needed. Learn how it works, key benefits, and real-world use cases.
+
+## [How to Use Mermaid Chart as an AI Diagram Generator for Developers](https://docs.mermaidchart.com/blog/posts/how-to-use-mermaid-chart-as-an-ai-diagram-generator)
+
+5/21/2025 • 9 mins
+
+Would an AI diagram generator make your life easier? We think it would!
+
+## [Mermaid Chart VS Code Plugin: Create and Edit Mermaid.js Diagrams in Visual Studio Code](https://docs.mermaidchart.com/blog/posts/mermaid-chart-vs-code-plugin-create-and-edit-mermaid-js-diagrams-in-visual-studio-code)
+
+3/21/2025 • 5 mins
+
+The Mermaid Chart VS Code Plugin is a powerful developer diagramming tool that brings Mermaid.js diagramming directly into your Visual Studio Code environment. Whether you’re visualizing software architecture, documenting API flows, fixing bad documentation, or managing flowcharts and sequence diagrams, this plugin integrates seamlessly into your workflow. Key Features of the Mermaid Chart VS Code \[…]
+
+## [Mermaid Chart: The Evolution of Mermaid](https://docs.mermaidchart.com/blog/posts/mermaid-chart-the-evolution-of-mermaid)
+
+1/30/2025 • 3 mins
+
+Mermaid revolutionized diagramming with its simple, markdown-style syntax, empowering millions of developers worldwide. Now, Mermaid Chart takes it further with AI-powered visuals, a GUI for seamless editing, real-time collaboration, and advanced design tools. Experience the next generation of diagramming—faster, smarter, and built for modern teams. Try Mermaid Chart today!
+
 ## [GUI for editing Mermaid Class Diagrams](https://docs.mermaidchart.com/blog/posts/gui-for-editing-mermaid-class-diagrams)
 
 1/17/2025 • 5 mins

docs/syntax/flowchart.md

@@ -985,11 +985,23 @@ flowchart TD
   - `b`
 - **w**: The width of the image. If not defined, this will default to the natural width of the image.
 - **h**: The height of the image. If not defined, this will default to the natural height of the image.
-- **constraint**: Determines if the image should constrain the node size. This setting also ensures the image maintains its original aspect ratio, adjusting the height (`h`) accordingly to the width (`w`). If not defined, this will default to `off` Possible values are:
+- **constraint**: Determines if the image should constrain the node size. This setting also ensures the image maintains its original aspect ratio, adjusting the width (`w`) accordingly to the height (`h`). If not defined, this will default to `off` Possible values are:
   - `on`
   - `off`
 
-These new shapes provide additional flexibility and visual appeal to your flowcharts, making them more informative and engaging.
+If you want to resize an image, but keep the same aspect ratio, set `h`, and set `constraint: on` to constrain the aspect ratio. E.g.
+
+```mermaid-example
+flowchart TD
+  %% My image with a constrained aspect ratio
+  A@{ img: "https://mermaid.js.org/favicon.svg", label: "My example image label", pos: "t", h: 60, constraint: "on" }
+```
+
+```mermaid
+flowchart TD
+  %% My image with a constrained aspect ratio
+  A@{ img: "https://mermaid.js.org/favicon.svg", label: "My example image label", pos: "t", h: 60, constraint: "on" }
+```
 
 ## Links between nodes
 
@@ -1818,7 +1830,7 @@ config:
 graph LR
 ```
 
-#### Edge level curve style using Edge IDs (v\<MERMAID_RELEASE_VERSION>+)
+#### Edge level curve style using Edge IDs (v11.10.0+)
 
 You can assign IDs to [edges](#attaching-an-id-to-edges). After assigning an ID you can modify the line style by modifying the edge's `curve` property using the following syntax:
 

docs/syntax/mindmap.md

@@ -314,3 +314,22 @@ You can also refer the [implementation in the live editor](https://github.com/me
 cspell:locale en,en-gb
 cspell:ignore Buzan
 --->
+
+## Layouts
+
+Mermaid also supports a Tidy Tree layout for mindmaps.
+
+```
+---
+config:
+  layout: tidy-tree
+---
+mindmap
+root((mindmap is a long thing))
+  A
+  B
+  C
+  D
+```
+
+Instructions to add and register tidy-tree layout are present in [Tidy Tree Configuration](/config/tidy-tree)

docs/syntax/pie.md

@@ -39,7 +39,7 @@ Drawing a pie chart is really simple in mermaid.
 
 **Note:**
 
-> Pie chart values must be **positive numbers greater than zero**.\
+> Pie chart values must be **positive numbers greater than zero**.
 > **Negative values are not allowed** and will result in an error.
 
 \[pie] \[showData] (OPTIONAL)

docs/syntax/sequenceDiagram.md

@@ -74,6 +74,126 @@ sequenceDiagram
     Bob->>Alice: Hi Alice
 ```
 
+### Boundary
+
+If you want to use the boundary symbol for a participant, use the JSON configuration syntax as shown below.
+
+```mermaid-example
+sequenceDiagram
+    participant Alice@{ "type" : "boundary" }
+    participant Bob
+    Alice->>Bob: Request from boundary
+    Bob->>Alice: Response to boundary
+```
+
+```mermaid
+sequenceDiagram
+    participant Alice@{ "type" : "boundary" }
+    participant Bob
+    Alice->>Bob: Request from boundary
+    Bob->>Alice: Response to boundary
+```
+
+### Control
+
+If you want to use the control symbol for a participant, use the JSON configuration syntax as shown below.
+
+```mermaid-example
+sequenceDiagram
+    participant Alice@{ "type" : "control" }
+    participant Bob
+    Alice->>Bob: Control request
+    Bob->>Alice: Control response
+```
+
+```mermaid
+sequenceDiagram
+    participant Alice@{ "type" : "control" }
+    participant Bob
+    Alice->>Bob: Control request
+    Bob->>Alice: Control response
+```
+
+### Entity
+
+If you want to use the entity symbol for a participant, use the JSON configuration syntax as shown below.
+
+```mermaid-example
+sequenceDiagram
+    participant Alice@{ "type" : "entity" }
+    participant Bob
+    Alice->>Bob: Entity request
+    Bob->>Alice: Entity response
+```
+
+```mermaid
+sequenceDiagram
+    participant Alice@{ "type" : "entity" }
+    participant Bob
+    Alice->>Bob: Entity request
+    Bob->>Alice: Entity response
+```
+
+### Database
+
+If you want to use the database symbol for a participant, use the JSON configuration syntax as shown below.
+
+```mermaid-example
+sequenceDiagram
+    participant Alice@{ "type" : "database" }
+    participant Bob
+    Alice->>Bob: DB query
+    Bob->>Alice: DB result
+```
+
+```mermaid
+sequenceDiagram
+    participant Alice@{ "type" : "database" }
+    participant Bob
+    Alice->>Bob: DB query
+    Bob->>Alice: DB result
+```
+
+### Collections
+
+If you want to use the collections symbol for a participant, use the JSON configuration syntax as shown below.
+
+```mermaid-example
+sequenceDiagram
+    participant Alice@{ "type" : "collections" }
+    participant Bob
+    Alice->>Bob: Collections request
+    Bob->>Alice: Collections response
+```
+
+```mermaid
+sequenceDiagram
+    participant Alice@{ "type" : "collections" }
+    participant Bob
+    Alice->>Bob: Collections request
+    Bob->>Alice: Collections response
+```
+
+### Queue
+
+If you want to use the queue symbol for a participant, use the JSON configuration syntax as shown below.
+
+```mermaid-example
+sequenceDiagram
+    participant Alice@{ "type" : "queue" }
+    participant Bob
+    Alice->>Bob: Queue message
+    Bob->>Alice: Queue response
+```
+
+```mermaid
+sequenceDiagram
+    participant Alice@{ "type" : "queue" }
+    participant Bob
+    Alice->>Bob: Queue message
+    Bob->>Alice: Queue response
+```
+
 ### Aliases
 
 The actor can have a convenient identifier and a descriptive label.

docs/syntax/userJourney.md

@@ -38,3 +38,5 @@ Each user journey is split into sections, these describe the part of the task
 the user is trying to complete.
 
 Tasks syntax is `Task name: <score>: <comma separated list of actors>`
+
+Score is a number between 1 and 5, inclusive.

docs/syntax/xyChart.md

@@ -138,7 +138,7 @@ xychart
 
 ## Chart Theme Variables
 
-Themes for xychart resides inside xychart attribute so to set the variables use this syntax:
+Themes for xychart reside inside the `xychart` attribute, allowing customization through the following syntax:
 
 ```yaml
 ---
@@ -163,6 +163,52 @@ config:
 | yAxisLineColor   | Color of the y-axis line                                  |
 | plotColorPalette | String of colors separated by comma e.g. "#f3456, #43445" |
 
+### Setting Colors for Lines and Bars
+
+To set the color for lines and bars, use the `plotColorPalette` parameter. Colors in the palette will correspond sequentially to the elements in your chart (e.g., first bar/line will use the first color specified in the palette).
+
+```mermaid-example
+---
+config:
+  themeVariables:
+    xyChart:
+      plotColorPalette: '#000000, #0000FF, #00FF00, #FF0000'
+---
+xychart
+title "Different Colors in xyChart"
+x-axis "categoriesX" ["Category 1", "Category 2", "Category 3", "Category 4"]
+y-axis "valuesY" 0 --> 50
+%% Black line
+line [10,20,30,40]
+%% Blue bar
+bar [20,30,25,35]
+%% Green bar
+bar [15,25,20,30]
+%% Red line
+line [5,15,25,35]
+```
+
+```mermaid
+---
+config:
+  themeVariables:
+    xyChart:
+      plotColorPalette: '#000000, #0000FF, #00FF00, #FF0000'
+---
+xychart
+title "Different Colors in xyChart"
+x-axis "categoriesX" ["Category 1", "Category 2", "Category 3", "Category 4"]
+y-axis "valuesY" 0 --> 50
+%% Black line
+line [10,20,30,40]
+%% Blue bar
+bar [20,30,25,35]
+%% Green bar
+bar [15,25,20,30]
+%% Red line
+line [5,15,25,35]
+```
+
 ## Example on config and theme
 
 ```mermaid-example

instructions.md

@@ -1,145 +0,0 @@
-Please help me to implement the tidy-tree algorithm.
-
-- I have added a placeholder with the correct signature in `packages/mermaid/src/rendering-util/layout-algorithms/tidy-tree/`.
-
-Replace the cytoscape layout with one using tidy-tree.
-
-This is the API for tidy-tree:
-
-```
-# non-layered-tidy-tree-layout
-
-Draw non-layered tidy trees in linear time.
-
-> This a JavaScript port from the project [cwi-swat/non-layered-tidy-trees](https://github.com/cwi-swat/non-layered-tidy-trees), which is written in Java. The algorithm used in that project is from the paper by _A.J. van der Ploeg_, [Drawing Non-layered Tidy Trees in Linear Time](http://oai.cwi.nl/oai/asset/21856/21856B.pdf). There is another JavaScript port from that project [d3-flextree](https://github.com/Klortho/d3-flextree), which depends on _d3-hierarchy_. This project is dependency free.
-
-## Getting started
-
-### Installation
-
-```
-
-npm install non-layered-tidy-tree-layout
-
-```
-
-Or
-
-```
-
-yarn add non-layered-tidy-tree-layout
-
-````
-
-There's also a built verison: `dist/non-layered-tidy-tree-layout.js` for use with browser `<script>` tag, or as a Javascript module.
-
-### Usage
-
-```js
-import { BoundingBox, Layout } from 'non-layered-tidy-tree-layout'
-
-// BoundingBox(gap, bottomPadding)
-const bb = new BoundingBox(10, 20)
-const layout = new Layout(bb)
-const treeData = {
-  id: 0,
-  width: 40,
-  height: 40,
-  children: [
-    {
-      id: 1,
-      width: 40,
-      height: 40,
-      children: [{ id: 6, width: 400, height: 40 }]
-    },
-    { id: 2, width: 40, height: 40 },
-    { id: 3, width: 40, height: 40 },
-    { id: 4, width: 40, height: 40 },
-    { id: 5, width: 40, height: 80 }
-  ]
-}
-const { result, boundingBox } = layout.layout(treeData)
-
-// result:
-// {
-//   id: 0,
-//   x: 300,
-//   y: 0,
-//   width: 40,
-//   height: 40,
-//   children: [
-//     {
-//       id: 1,
-//       x: 185,
-//       y: 60,
-//       width: 40,
-//       height: 40,
-//       children: [
-//         { id: 6, x: 5, y: 120, width: 400, height: 40 }
-//       ]
-//     },
-//     { id: 2, x: 242.5, y: 60, width: 40, height: 40 },
-//     { id: 3, x: 300, y: 60, width: 40, height: 40 },
-//     { id: 4, x: 357.5, y: 60, width: 40, height: 40 },
-//     { id: 5, x: 415, y: 60, width: 40, height: 80 }
-//   ]
-// }
-//
-// boundingBox:
-// {
-//   left: 5,
-//   right: 455,
-//   top: 0,
-//   bottom: 160
-// }
-````
-
-The method `Layout.layout` modifies `treeData` inplace. It returns an object like `{ result: treeData, boundingBox: {left: num, right: num, top: num, bottom: num} }`. `result` is the same object `treeData` with calculated coordinates, `boundingBox` are the coordinates for the whole tree:
-
-![](./screenshots/1.png)
-
-The red dashed lines are the bounding boxes for each node. `Layout.layout()` produces coordinates to draw nodes, which are the grey boxes with black border.
-
-The library also provides a class `Tree` and a method `layout`.
-
-```js
-/**
- * Constructor for Tree.
- * @param {number} width - width of bounding box
- * @param {number} height - height of bounding box
- * @param {number} y - veritcal coordinate of bounding box
- * @param {array} children - a list of Tree instances
- */
-new Tree(width, height, y, children);
-
-/**
- * Calculate x, y coordindates and assign them to tree.
- * @param {Object} tree - a Tree object
- */
-layout(tree);
-```
-
-In case your data structure are not the same as provided by the example above, you can refer to `src/helpers.js` to implement a `Layout` class that converts your data to a `Tree`, then call `layout` to calculate the coordinates for drawing.
-
-## License
-
-[MIT](./LICENSE)
-
-## Changelog
-
-### [2.0.1]
-
-- Fixed bounding box calculation in `Layout.getSize` and `Layout.assignLayout` and `Layout.layout`
-
-### [2.0.0]
-
-- Added `Layout.layout`
-- Removed `Layout.layoutTreeData`
-
-### [1.0.0]
-
-- Added `Layout`, `BoundingBox`, `layout`, `Tree`
-
-```
-
-```

packages/examples/package.json

@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "description": "Mermaid examples package",
   "author": "Sidharth Vinod",
+  "license": "MIT",
   "type": "module",
   "module": "./dist/mermaid-examples.core.mjs",
   "types": "./dist/mermaid.d.ts",
@@ -27,9 +28,6 @@
   "devDependencies": {
     "mermaid": "workspace:*"
   },
-  "peerDependencies": {
-    "mermaid": "workspace:~"
-  },
   "publishConfig": {
     "access": "public"
   }

packages/mermaid-layout-elk/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @mermaid-js/layout-elk
 
+## 0.1.9
+
+### Patch Changes
+
+- [#6857](https://github.com/mermaid-js/mermaid/pull/6857) [`b9ef683`](https://github.com/mermaid-js/mermaid/commit/b9ef683fb67b8959abc455d6cc5266c37ba435f6) Thanks [@knsv](https://github.com/knsv)! - feat: Exposing elk configuration forceNodeModelOrder and considerModelOrder to the mermaid configuration
+
+- [#6849](https://github.com/mermaid-js/mermaid/pull/6849) [`2260948`](https://github.com/mermaid-js/mermaid/commit/2260948b7bda08f00616c2ce678bed1da69eb96c) Thanks [@anderium](https://github.com/anderium)! - Make elk not force node model order, but strongly consider it instead
+
+- Updated dependencies [[`b9ef683`](https://github.com/mermaid-js/mermaid/commit/b9ef683fb67b8959abc455d6cc5266c37ba435f6), [`2c0931d`](https://github.com/mermaid-js/mermaid/commit/2c0931da46794b49d2523211e25f782900c34e94), [`33e08da`](https://github.com/mermaid-js/mermaid/commit/33e08daf175125295a06b1b80279437004a4e865), [`814b68b`](https://github.com/mermaid-js/mermaid/commit/814b68b4a94813f7c6b3d7fb4559532a7bab2652), [`fce7cab`](https://github.com/mermaid-js/mermaid/commit/fce7cabb71d68a20a66246fe23d066512126a412), [`fc07f0d`](https://github.com/mermaid-js/mermaid/commit/fc07f0d8abca49e4f887d7457b7b94fb07d1e3da), [`12e01bd`](https://github.com/mermaid-js/mermaid/commit/12e01bdb5cacf3569133979a5a4f1d8973e9aec1), [`01aaef3`](https://github.com/mermaid-js/mermaid/commit/01aaef39b4a1ec8bc5a0c6bfa3a20b712d67f4dc), [`daf8d8d`](https://github.com/mermaid-js/mermaid/commit/daf8d8d3befcd600618a629977b76463b38d0ad9), [`c36cd05`](https://github.com/mermaid-js/mermaid/commit/c36cd05c45ac3090181152b4dae41f8d7b569bd6), [`8bb29fc`](https://github.com/mermaid-js/mermaid/commit/8bb29fc879329ad109898e4025b4f4eba2ab0649), [`71b04f9`](https://github.com/mermaid-js/mermaid/commit/71b04f93b07f876df2b30656ef36036c1d0e4e4f), [`c99bce6`](https://github.com/mermaid-js/mermaid/commit/c99bce6bab4c7ce0b81b66d44f44853ce4aeb1c3), [`6cc1926`](https://github.com/mermaid-js/mermaid/commit/6cc192680a2531cab28f87a8061a53b786e010f3), [`9da6fb3`](https://github.com/mermaid-js/mermaid/commit/9da6fb39ae278401771943ac85d6d1b875f78cf1), [`e48b0ba`](https://github.com/mermaid-js/mermaid/commit/e48b0ba61dab7f95aa02da603b5b7d383b894932), [`4d62d59`](https://github.com/mermaid-js/mermaid/commit/4d62d5963238400270e9314c6e4d506f48147074), [`e9ce8cf`](https://github.com/mermaid-js/mermaid/commit/e9ce8cf4da9062d85098042044822100889bb0dd), [`9258b29`](https://github.com/mermaid-js/mermaid/commit/9258b2933bbe1ef41087345ffea3731673671c49), [`da90f67`](https://github.com/mermaid-js/mermaid/commit/da90f6760b6efb0da998bcb63b75eecc29e06c08), [`0133f1c`](https://github.com/mermaid-js/mermaid/commit/0133f1c0c5cff4fc4c8e0b99e9cf0b3d49dcbe71), [`895f9d4`](https://github.com/mermaid-js/mermaid/commit/895f9d43ff98ca05ebfba530789f677f31a011ff)]:
+  - mermaid@11.10.0
+
 ## 0.1.8
 
 ### Patch Changes

packages/mermaid-layout-elk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mermaid-js/layout-elk",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "ELK layout engine for mermaid",
   "module": "dist/mermaid-layout-elk.core.mjs",
   "types": "dist/layouts.d.ts",

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);
+  });
+});

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

@@ -0,0 +1,209 @@
+/* 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;
+
+export const onBorder = (bounds: RectLike, p: P, tol = 0.5): boolean => {
+  const halfW = bounds.width / 2;
+  const halfH = bounds.height / 2;
+  const left = bounds.x - halfW;
+  const right = bounds.x + halfW;
+  const top = bounds.y - halfH;
+  const bottom = bounds.y + halfH;
+
+  const onLeft = Math.abs(p.x - left) <= tol && p.y >= top - tol && p.y <= bottom + tol;
+  const onRight = Math.abs(p.x - right) <= tol && p.y >= top - tol && p.y <= bottom + tol;
+  const onTop = Math.abs(p.y - top) <= tol && p.x >= left - tol && p.x <= right + tol;
+  const onBottom = Math.abs(p.y - bottom) <= tol && p.x >= left - tol && p.x <= right + tol;
+  return onLeft || onRight || onTop || onBottom;
+};
+
+/**
+ * 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;
+    }
+  }
+};

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

@@ -1,19 +0,0 @@
-import type { InternalHelpers, LayoutData, RenderOptions, SVG } from 'mermaid';
-export declare const render: (
-  data4Layout: LayoutData,
-  svg: SVG,
-  {
-    common,
-    getConfig,
-    insertCluster,
-    insertEdge,
-    insertEdgeLabel,
-    insertMarkers,
-    insertNode,
-    interpolateToCurve,
-    labelHelper,
-    log,
-    positionEdgeLabel,
-  }: InternalHelpers,
-  { algorithm }: RenderOptions
-) => Promise<void>;

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

@@ -1,15 +1,18 @@
-import type {
-  InternalHelpers,
-  LayoutData,
-  RenderOptions,
-  SVG,
-  SVGGroup,
-} from '@mermaid-chart/mermaid';
+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 TreeData, findCommonAncestor } from './find-common-ancestor.js';
 
+import {
+  type P,
+  type RectLike,
+  outsideNode,
+  computeNodeIntersection,
+  replaceEndpoint,
+  onBorder,
+} from './geometry.js';
+
 type Node = LayoutData['nodes'][number];
 
 // Minimal structural type to avoid depending on d3 Selection typings
@@ -78,6 +81,7 @@ export const render = async (
       // A subgraph
       const child: NodeWithVertex & { children: NodeWithVertex[] } = {
         ...node,
+        domId: undefined,
         children: [],
       };
       // Let elk render with the copy
@@ -246,6 +250,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: {
@@ -302,99 +412,18 @@ export const render = async (
         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 += style;
-        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;
@@ -465,345 +494,179 @@ export const render = async (
     }
   }
 
-  const intersection = (
-    node: { x: any; y: any; width: number; height: number },
-    outsidePoint: { x: number; y: number },
-    insidePoint: { x: number; y: number }
-  ) => {
-    log.debug(`intersection calc abc89:
-  outsidePoint: ${JSON.stringify(outsidePoint)}
-  insidePoint : ${JSON.stringify(insidePoint)}
-  node        : x:${node.x} y:${node.y} w:${node.width} h:${node.height}`);
-    const x = node.x;
-    const y = node.y;
+  // 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 dx = Math.abs(x - insidePoint.x);
-    // const dy = Math.abs(y - insidePoint.y);
-    const w = node.width / 2;
-    let r = insidePoint.x < outsidePoint.x ? w - dx : w + dx;
-    const h = node.height / 2;
+  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,
+    };
+  };
+  // Helper utilities for endpoint handling around cutter2
+  type Side = 'start' | 'end';
+  const approxEq = (a: number, b: number, eps = 1e-6) => Math.abs(a - b) < eps;
+  const isCenterApprox = (pt: P, node: { x: number; y: number }) =>
+    approxEq(pt.x, node.x) && approxEq(pt.y, node.y);
 
-    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,
-      };
-
-      if (r === 0) {
-        res.x = outsidePoint.x;
-        res.y = outsidePoint.y;
-      }
-      if (R === 0) {
-        res.x = outsidePoint.x;
-      }
-      if (Q === 0) {
-        res.y = outsidePoint.y;
-      }
-
-      log.debug(`abc89 topp/bott calc, Q ${Q}, q ${q}, R ${R}, r ${r}`, res); // cspell: disable-line
-
-      return res;
+  const getCandidateBorderPoint = (
+    points: P[],
+    node: any,
+    side: Side
+  ): { candidate: P; centerApprox: boolean } => {
+    if (!points?.length) {
+      return { candidate: { x: node.x, y: node.y } as P, centerApprox: true };
+    }
+    if (side === 'start') {
+      const first = points[0];
+      const centerApprox = isCenterApprox(first, node);
+      const candidate = centerApprox && points.length > 1 ? points[1] : first;
+      return { candidate, centerApprox };
     } else {
-      // Intersection onn sides of rect
-      if (insidePoint.x < outsidePoint.x) {
-        r = outsidePoint.x - w - x;
-      } else {
-        // r = outsidePoint.x - w - x;
-        r = x - w - outsidePoint.x;
-      }
-      const q = (Q * r) / R;
-      //  OK let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : insidePoint.x + dx - w;
-      // OK let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : outsidePoint.x + r;
-      let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : insidePoint.x - R + r;
-      // let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : outsidePoint.x + r;
-      let _y = insidePoint.y < outsidePoint.y ? insidePoint.y + q : insidePoint.y - q;
-      log.debug(`sides calc abc89, Q ${Q}, q ${q}, R ${R}, r ${r}`, { _x, _y });
-      if (r === 0) {
-        _x = outsidePoint.x;
-        _y = outsidePoint.y;
-      }
-      if (R === 0) {
-        _x = outsidePoint.x;
-      }
-      if (Q === 0) {
-        _y = outsidePoint.y;
-      }
-
-      return { x: _x, y: _y };
+      const last = points[points.length - 1];
+      const centerApprox = isCenterApprox(last, node);
+      const candidate = centerApprox && points.length > 1 ? points[points.length - 2] : last;
+      return { candidate, centerApprox };
     }
   };
-  const outsideNode = (
-    node: { x: any; y: any; width: number; height: number },
-    point: { x: number; y: number }
-  ) => {
-    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;
-    if (dx >= w || dy >= h) {
-      return true;
+
+  const dropAutoCenterPoint = (points: P[], side: Side, doDrop: boolean) => {
+    if (!doDrop) {
+      return;
+    }
+    if (side === 'start') {
+      if (points.length > 0) {
+        points.shift();
+      }
+    } else {
+      if (points.length > 0) {
+        points.pop();
+      }
+    }
+  };
+
+  const applyStartIntersectionIfNeeded = (points: P[], startNode: any, startBounds: RectLike) => {
+    let firstOutsideStartIndex = -1;
+    for (const [i, p] of points.entries()) {
+      if (outsideNode(startBounds, p)) {
+        firstOutsideStartIndex = i;
+        break;
+      }
+    }
+    if (firstOutsideStartIndex !== -1) {
+      const outsidePointForStart = points[firstOutsideStartIndex];
+      const startCenter = points[0];
+      const startIntersection = computeNodeIntersection(
+        startNode,
+        startBounds,
+        outsidePointForStart,
+        startCenter
+      );
+      replaceEndpoint(points, 'start', startIntersection);
+      log.debug('UIO cutter2: start-only intersection applied', { startIntersection });
+    }
+  };
+
+  const applyEndIntersectionIfNeeded = (points: P[], endNode: any, endBounds: RectLike) => {
+    let outsideIndexForEnd = -1;
+    for (let i = points.length - 1; i >= 0; i--) {
+      if (outsideNode(endBounds, points[i])) {
+        outsideIndexForEnd = i;
+        break;
+      }
+    }
+    if (outsideIndexForEnd !== -1) {
+      const outsidePointForEnd = points[outsideIndexForEnd];
+      const endCenter = points[points.length - 1];
+      const endIntersection = computeNodeIntersection(
+        endNode,
+        endBounds,
+        outsidePointForEnd,
+        endCenter
+      );
+      replaceEndpoint(points, 'end', endIntersection);
+      log.debug('UIO cutter2: end-only intersection applied', { endIntersection });
     }
-    return false;
   };
 
   const cutter2 = (startNode: any, endNode: any, _points: any[]) => {
-    const startBounds = {
-      x: startNode.offset.posX + startNode.width / 2,
-      y: startNode.offset.posY + startNode.height / 2,
-      width: startNode.width,
-      height: startNode.height,
-      padding: startNode.padding,
-    };
-    const endBounds = {
-      x: endNode.offset.posX + endNode.width / 2,
-      y: endNode.offset.posY + endNode.height / 2,
-      width: endNode.width,
-      height: endNode.height,
-      padding: endNode.padding,
-    };
+    const startBounds = boundsFor(startNode);
+    const endBounds = boundsFor(endNode);
 
     if (_points.length === 0) {
       return [];
     }
 
     // Copy the original points array
-    const points = [..._points];
+    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];
 
-    log.debug('UIO cutter2: startCenter:', startCenter);
-    log.debug('UIO cutter2: endCenter:', endCenter);
+    // Minimal, structured logging for diagnostics
+    log.debug('PPP cutter2: bounds', { startBounds, endBounds });
+    log.debug('PPP cutter2: original points', _points);
 
     let firstOutsideStartIndex = -1;
-    let lastOutsideEndIndex = -1;
 
     // Single iteration through the array
     for (const [i, point] of points.entries()) {
-      // Check if this is the first point outside the start node
       if (firstOutsideStartIndex === -1 && outsideNode(startBounds, point)) {
         firstOutsideStartIndex = i;
-        log.debug('UIO cutter2: First point outside start node at index', i, point);
       }
-
-      // Check if this point is outside the end node (keep updating to find the last one)
       if (outsideNode(endBounds, point)) {
-        lastOutsideEndIndex = i;
-        log.debug('UIO cutter2: Point outside end node at index', i, point);
+        // keep scanning; we'll also scan from the end for the last outside point
       }
     }
 
-    log.debug(
-      'UIO cutter2: firstOutsideStartIndex:',
-      firstOutsideStartIndex,
-      'lastOutsideEndIndex:',
-      lastOutsideEndIndex
-    );
-    log.debug('UIO cutter2: startBounds:', startBounds);
-    log.debug('UIO cutter2: endBounds:', endBounds);
-    log.debug('UIO cutter2: original points:', _points);
-
     // Calculate intersection with start node if we found a point outside it
     if (firstOutsideStartIndex !== -1) {
-      const outsidePoint = points[firstOutsideStartIndex];
-      let startIntersection;
-
-      // Try using the node's intersect method first
-      if (startNode.intersect) {
-        startIntersection = startNode.intersect(outsidePoint);
-
-        // Check if the intersection is valid (distance > 1)
-        const distance = Math.sqrt(
-          (startCenter.x - startIntersection.x) ** 2 + (startCenter.y - startIntersection.y) ** 2
-        );
-        if (distance <= 1) {
-          startIntersection = null;
-        }
-      }
-
-      // Fallback to intersection function
-      if (!startIntersection) {
-        startIntersection = intersection(startBounds, startCenter, outsidePoint);
-      }
-
-      // Replace the first point with the intersection
-      if (startIntersection) {
-        // Check if the intersection is the same as any existing point
-        const isDuplicate = points.some(
-          (p, index) =>
-            index > 0 &&
-            Math.abs(p.x - startIntersection.x) < 0.1 &&
-            Math.abs(p.y - startIntersection.y) < 0.1
-        );
-
-        if (isDuplicate) {
-          log.debug(
-            'UIO cutter2: Start intersection is duplicate of existing point, removing first point instead'
-          );
-          points.shift(); // Remove the first point instead of replacing it
-        } else {
-          log.debug(
-            'UIO cutter2: Replacing first point',
-            points[0],
-            'with intersection',
-            startIntersection
-          );
-          points[0] = startIntersection;
-        }
-      }
+      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
-    // Need to recalculate indices since we may have removed the first point
     let outsidePointForEnd = null;
     let outsideIndexForEnd = -1;
 
-    // Find the last point that's outside the end node in the current points array
     for (let i = points.length - 1; i >= 0; i--) {
       if (outsideNode(endBounds, points[i])) {
         outsidePointForEnd = points[i];
         outsideIndexForEnd = i;
-        log.debug('UIO cutter2: Found point outside end node at current index:', i, points[i]);
         break;
       }
     }
 
     if (!outsidePointForEnd && points.length > 1) {
-      // No points outside end node, try using the second-to-last point
-      log.debug('UIO cutter2: No points outside end node, trying second-to-last point');
       outsidePointForEnd = points[points.length - 2];
       outsideIndexForEnd = points.length - 2;
     }
 
     if (outsidePointForEnd) {
-      // Check if the outside point is actually on the boundary (distance = 0 from intersection)
-      // If so, we need to create a truly outside point
-      let actualOutsidePoint = outsidePointForEnd;
-
-      // Quick check: if the point is very close to the node boundary, move it further out
-      const dx = Math.abs(outsidePointForEnd.x - endBounds.x);
-      const dy = Math.abs(outsidePointForEnd.y - endBounds.y);
-      const w = endBounds.width / 2;
-      const h = endBounds.height / 2;
-
-      log.debug('UIO cutter2: Checking if outside point is truly outside:', {
-        outsidePoint: outsidePointForEnd,
-        dx,
-        dy,
-        w,
-        h,
-        isOnBoundary: Math.abs(dx - w) < 1 || Math.abs(dy - h) < 1,
-      });
-
-      // If the point is on or very close to the boundary, move it further out
-      if (Math.abs(dx - w) < 1 || Math.abs(dy - h) < 1) {
-        log.debug('UIO cutter2: Outside point is on boundary, creating truly outside point');
-        // Move the point further away from the node center
-        const directionX = outsidePointForEnd.x - endBounds.x;
-        const directionY = outsidePointForEnd.y - endBounds.y;
-        const length = Math.sqrt(directionX * directionX + directionY * directionY);
-
-        if (length > 0) {
-          // Move the point 10 pixels further out in the same direction
-          actualOutsidePoint = {
-            x: endBounds.x + (directionX / length) * (length + 10),
-            y: endBounds.y + (directionY / length) * (length + 10),
-          };
-          log.debug('UIO cutter2: Created truly outside point:', actualOutsidePoint);
-        }
-      }
-
-      let endIntersection;
-
-      // Try using the node's intersect method first
-      if (endNode.intersect) {
-        endIntersection = endNode.intersect(actualOutsidePoint);
-        log.debug('UIO cutter2: endNode.intersect result:', endIntersection);
-
-        // Check if the intersection is on the wrong side of the node
-        const isWrongSide =
-          (actualOutsidePoint.x < endBounds.x && endIntersection.x > endBounds.x) ||
-          (actualOutsidePoint.x > endBounds.x && endIntersection.x < endBounds.x);
-
-        if (isWrongSide) {
-          log.debug('UIO cutter2: endNode.intersect returned wrong side, setting to null');
-          endIntersection = null;
-        } else {
-          // Check if the intersection is valid (distance > 1)
-          const distance = Math.sqrt(
-            (actualOutsidePoint.x - endIntersection.x) ** 2 +
-              (actualOutsidePoint.y - endIntersection.y) ** 2
-          );
-          log.debug('UIO cutter2: Distance from outside point to intersection:', distance);
-          if (distance <= 1) {
-            log.debug('UIO cutter2: endNode.intersect distance too small, setting to null');
-            endIntersection = null;
-          }
-        }
-      } else {
-        log.debug('UIO cutter2: endNode.intersect method not available');
-      }
-
-      // Fallback to intersection function
-      if (!endIntersection) {
-        // Create a proper inside point that's on the correct side of the node
-        // The inside point should be between the outside point and the far edge
-        const insidePoint = {
-          x:
-            actualOutsidePoint.x < endBounds.x
-              ? endBounds.x - endBounds.width / 4
-              : endBounds.x + endBounds.width / 4,
-          y: endCenter.y,
-        };
-
-        log.debug('UIO cutter2: Using fallback intersection function with:', {
-          endBounds,
-          actualOutsidePoint,
-          insidePoint,
-          endCenter,
-        });
-        endIntersection = intersection(endBounds, actualOutsidePoint, insidePoint);
-        log.debug('UIO cutter2: Fallback intersection result:', endIntersection);
-      }
-
-      // Replace the last point with the intersection
-      if (endIntersection) {
-        // Check if the intersection is the same as any existing point
-        const isDuplicate = points.some(
-          (p, index) =>
-            index < points.length - 1 &&
-            Math.abs(p.x - endIntersection.x) < 0.1 &&
-            Math.abs(p.y - endIntersection.y) < 0.1
-        );
-
-        if (isDuplicate) {
-          log.debug(
-            'UIO cutter2: End intersection is duplicate of existing point, removing last point instead'
-          );
-          points.pop(); // Remove the last point instead of replacing it
-        } else {
-          log.debug(
-            'UIO cutter2: Replacing last point',
-            points[points.length - 1],
-            'with intersection',
-            endIntersection,
-            'using outside point at index',
-            outsideIndexForEnd
-          );
-          points[points.length - 1] = endIntersection;
-        }
-      }
-    } else {
-      log.debug('UIO cutter2: No suitable outside point found for end node intersection');
+      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
@@ -813,37 +676,17 @@ export const render = async (
       const distance = Math.sqrt(
         (lastPoint.x - secondLastPoint.x) ** 2 + (lastPoint.y - secondLastPoint.y) ** 2
       );
-
-      // If the distance is very small (less than 2 pixels), remove the last point
       if (distance < 2) {
-        log.debug(
-          'UIO cutter2: Last point too close to previous point, removing it. Distance:',
-          distance
-        );
-        log.debug('UIO cutter2: Removing last point:', lastPoint, 'keeping:', secondLastPoint);
+        log.debug('UIO cutter2: trimming tail point (too close)', {
+          distance,
+          lastPoint,
+          secondLastPoint,
+        });
         points.pop();
       }
     }
 
-    log.debug('UIO cutter2: Final points:', points);
-
-    // Debug: Check which side of the end node we're ending at
-    if (points.length > 0) {
-      const finalPoint = points[points.length - 1];
-      const endNodeCenter = endBounds.x;
-      const endNodeLeftEdge = endNodeCenter - endBounds.width / 2;
-      const endNodeRightEdge = endNodeCenter + endBounds.width / 2;
-
-      log.debug('UIO cutter2: End node analysis:', {
-        finalPoint,
-        endNodeCenter,
-        endNodeLeftEdge,
-        endNodeRightEdge,
-        endingSide: finalPoint.x < endNodeCenter ? 'LEFT' : 'RIGHT',
-        distanceFromLeftEdge: Math.abs(finalPoint.x - endNodeLeftEdge),
-        distanceFromRightEdge: Math.abs(finalPoint.x - endNodeRightEdge),
-      });
-    }
+    log.debug('UIO cutter2: final points', points);
 
     return points;
   };
@@ -859,17 +702,17 @@ 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': 25,
-      // 'elk.layered.unnecessaryBendpoints': true,
-      // 'elk.layered.cycleBreaking.strategy': data4Layout.config.elk?.cycleBreakingStrategy,
+      '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,
@@ -881,27 +724,27 @@ export const render = async (
       // 'spacing.nodeSelfLoop': 20,
 
       // Tweaking options
-      'nodePlacement.favorStraightEdges': true,
-      'elk.layered.nodePlacement.favorStraightEdges': true,
-      'nodePlacement.feedbackEdges': true,
+      // '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.strategy': 'MULTI_EDGE',
+      // 'elk.layered.wrapping.strategy': 'MULTI_EDGE',
       // '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.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
+      // 'elk.layered.considerModelOrder.strategy': 'EDGES', // NODES_AND_EDGES
+      // 'elk.layered.wrapping.cutting.strategy': 'ARD', // NODES_AND_EDGES
     },
     children: [],
     edges: [],
@@ -910,7 +753,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
@@ -1075,7 +918,7 @@ 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.width,
@@ -1110,22 +953,105 @@ export const render = async (
         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') {
+
+        // Only add center points for non-subgraph nodes or when the edge path doesn't already end near the target
+        const shouldAddStartCenter = startNode.shape !== 'rect33';
+        const shouldAddEndCenter = endNode.shape !== 'rect33';
+
+        if (shouldAddStartCenter) {
           edge.points.unshift({
             x: startNode.x,
             y: startNode.y,
           });
         }
-        if (endNode.shape !== 'rect33') {
+
+        if (shouldAddEndCenter) {
           edge.points.push({
             x: endNode.x,
             y: endNode.y,
           });
         }
 
-        log.debug('UIO cutter2: Points before cutter2:', edge.points);
-        edge.points = cutter2(startNode, endNode, edge.points);
-        log.debug('UIO cutter2: Points after cutter2:', edge.points);
+        // Debug and sanitize points around cutter2
+        const prevPoints = Array.isArray(edge.points) ? [...edge.points] : [];
+        const endBounds = boundsFor(endNode);
+        log.debug(
+          'PPP cutter2: Points before cutter2:',
+          JSON.stringify(edge.points),
+          'endBounds:',
+          endBounds,
+          onBorder(endBounds, edge.points[edge.points.length - 1])
+        );
+        // Block for reducing variable scope and guardrails for the cutter function
+        {
+          const startBounds = boundsFor(startNode);
+          const endBounds = boundsFor(endNode);
+
+          const startIsGroup = !!startNode?.isGroup;
+          const endIsGroup = !!endNode?.isGroup;
+
+          const { candidate: startCandidate, centerApprox: startCenterApprox } =
+            getCandidateBorderPoint(prevPoints as P[], startNode, 'start');
+          const { candidate: endCandidate, centerApprox: endCenterApprox } =
+            getCandidateBorderPoint(prevPoints as P[], endNode, 'end');
+
+          const skipStart = startIsGroup && onBorder(startBounds, startCandidate);
+          const skipEnd = endIsGroup && onBorder(endBounds, endCandidate);
+
+          dropAutoCenterPoint(prevPoints as P[], 'start', skipStart && startCenterApprox);
+          dropAutoCenterPoint(prevPoints as P[], 'end', skipEnd && endCenterApprox);
+
+          if (skipStart || skipEnd) {
+            if (!skipStart) {
+              applyStartIntersectionIfNeeded(prevPoints as P[], startNode, startBounds);
+            }
+            if (!skipEnd) {
+              applyEndIntersectionIfNeeded(prevPoints as P[], endNode, endBounds);
+            }
+
+            log.debug('PPP cutter2: skipping cutter2 due to on-border group endpoint(s)', {
+              skipStart,
+              skipEnd,
+              startCenterApprox,
+              endCenterApprox,
+              startCandidate,
+              endCandidate,
+            });
+            edge.points = prevPoints;
+          } else {
+            edge.points = cutter2(startNode, endNode, prevPoints);
+          }
+        }
+        log.debug('PPP cutter2: Points after cutter2:', JSON.stringify(edge.points));
+        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(
+            'POI 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,

packages/mermaid-layout-tidy-tree/src/layout.test.ts

@@ -1,4 +1,7 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { executeTidyTreeLayout, validateLayoutData } from './layout.js';
+import type { LayoutResult } from './types.js';
+import type { LayoutData, MermaidConfig } from 'mermaid';
 
 // Mock non-layered-tidy-tree-layout
 vi.mock('non-layered-tidy-tree-layout', () => ({
@@ -42,10 +45,6 @@ vi.mock('non-layered-tidy-tree-layout', () => ({
   })),
 }));
 
-import { executeTidyTreeLayout, validateLayoutData } from './layout.js';
-import type { LayoutResult } from './types.js';
-import type { LayoutData, MermaidConfig } from 'mermaid';
-
 describe('Tidy-Tree Layout Algorithm', () => {
   let mockConfig: MermaidConfig;
   let mockLayoutData: LayoutData;
@@ -209,7 +208,7 @@ describe('Tidy-Tree Layout Algorithm', () => {
 
   describe('executeTidyTreeLayout function', () => {
     it('should execute layout algorithm successfully', async () => {
-      const result: LayoutResult = await executeTidyTreeLayout(mockLayoutData, mockConfig);
+      const result: LayoutResult = await executeTidyTreeLayout(mockLayoutData);
 
       expect(result).toBeDefined();
       expect(result.nodes).toBeDefined();
@@ -219,7 +218,7 @@ describe('Tidy-Tree Layout Algorithm', () => {
     });
 
     it('should return positioned nodes with coordinates', async () => {
-      const result: LayoutResult = await executeTidyTreeLayout(mockLayoutData, mockConfig);
+      const result: LayoutResult = await executeTidyTreeLayout(mockLayoutData);
 
       expect(result.nodes.length).toBeGreaterThan(0);
       result.nodes.forEach((node) => {
@@ -231,7 +230,7 @@ describe('Tidy-Tree Layout Algorithm', () => {
     });
 
     it('should return positioned edges with coordinates', async () => {
-      const result: LayoutResult = await executeTidyTreeLayout(mockLayoutData, mockConfig);
+      const result: LayoutResult = await executeTidyTreeLayout(mockLayoutData);
 
       expect(result.edges.length).toBeGreaterThan(0);
       result.edges.forEach((edge) => {
@@ -251,7 +250,7 @@ describe('Tidy-Tree Layout Algorithm', () => {
         edges: [],
       };
 
-      await expect(executeTidyTreeLayout(emptyData, mockConfig)).rejects.toThrow(
+      await expect(executeTidyTreeLayout(emptyData)).rejects.toThrow(
         'No nodes found in layout data'
       );
     });
@@ -259,7 +258,7 @@ describe('Tidy-Tree Layout Algorithm', () => {
     it('should throw error for missing nodes', async () => {
       const invalidData = { ...mockLayoutData, nodes: [] };
 
-      await expect(executeTidyTreeLayout(invalidData, mockConfig)).rejects.toThrow(
+      await expect(executeTidyTreeLayout(invalidData)).rejects.toThrow(
         'No nodes found in layout data'
       );
     });
@@ -271,14 +270,14 @@ describe('Tidy-Tree Layout Algorithm', () => {
         nodes: [mockLayoutData.nodes[0]],
       };
 
-      const result = await executeTidyTreeLayout(singleNodeData, mockConfig);
+      const result = await executeTidyTreeLayout(singleNodeData);
       expect(result).toBeDefined();
       expect(result.nodes).toHaveLength(1);
       expect(result.edges).toHaveLength(0);
     });
 
     it('should create bidirectional dual-tree layout with alternating left/right children', async () => {
-      const result = await executeTidyTreeLayout(mockLayoutData, mockConfig);
+      const result = await executeTidyTreeLayout(mockLayoutData);
 
       expect(result).toBeDefined();
       expect(result.nodes).toHaveLength(5);
@@ -383,7 +382,7 @@ describe('Tidy-Tree Layout Algorithm', () => {
         ],
       };
 
-      const result = await executeTidyTreeLayout(testData, mockConfig);
+      const result = await executeTidyTreeLayout(testData);
 
       expect(result).toBeDefined();
       expect(result.nodes).toHaveLength(3);

packages/mermaid-layout-tidy-tree/src/layout.ts

@@ -1,12 +1,13 @@
+import type { LayoutData } from 'mermaid';
+import type { Bounds, Point } from 'mermaid/src/types.js';
 import { BoundingBox, Layout } from 'non-layered-tidy-tree-layout';
-import type { MermaidConfig, LayoutData } from 'mermaid';
 import type {
-  LayoutResult,
-  TidyTreeNode,
-  PositionedNode,
-  PositionedEdge,
-  Node,
   Edge,
+  LayoutResult,
+  Node,
+  PositionedEdge,
+  PositionedNode,
+  TidyTreeNode,
 } from './types.js';
 
 /**
@@ -19,10 +20,7 @@ import type {
  * @param config - Mermaid configuration object
  * @returns Promise resolving to layout result with positioned nodes and edges
  */
-export function executeTidyTreeLayout(
-  data: LayoutData,
-  _config: MermaidConfig
-): Promise<LayoutResult> {
+export function executeTidyTreeLayout(data: LayoutData): Promise<LayoutResult> {
   let intersectionShift = 50;
 
   return new Promise((resolve, reject) => {
@@ -46,35 +44,23 @@ export function executeTidyTreeLayout(
 
       let leftResult = null;
       let rightResult = null;
-      let leftBoundingBox = null;
-      let rightBoundingBox = null;
 
       if (leftTree) {
         const leftLayoutResult = layout.layout(leftTree);
         leftResult = leftLayoutResult.result;
-        leftBoundingBox = leftLayoutResult.boundingBox;
       }
 
       if (rightTree) {
         const rightLayoutResult = layout.layout(rightTree);
         rightResult = rightLayoutResult.result;
-        rightBoundingBox = rightLayoutResult.boundingBox;
       }
 
-      const positionedNodes = combineAndPositionTrees(
-        rootNode,
-        leftResult,
-        rightResult,
-        leftBoundingBox,
-        rightBoundingBox,
-        data
-      );
+      const positionedNodes = combineAndPositionTrees(rootNode, leftResult, rightResult);
       const positionedEdges = calculateEdgePositions(
         data.edges,
         positionedNodes,
         intersectionShift
       );
-
       resolve({
         nodes: positionedNodes,
         edges: positionedEdges,
@@ -203,10 +189,7 @@ function convertNodeToTidyTreeTransposed(
 function combineAndPositionTrees(
   rootNode: TidyTreeNode,
   leftResult: TidyTreeNode | null,
-  rightResult: TidyTreeNode | null,
-  _leftBoundingBox: any,
-  _rightBoundingBox: any,
-  _data: LayoutData
+  rightResult: TidyTreeNode | null
 ): PositionedNode[] {
   const positionedNodes: PositionedNode[] = [];
 
@@ -383,11 +366,7 @@ function positionRightTreeBidirectional(
  * @param lineEnd - Ending point of the line
  * @returns The intersection point
  */
-function computeCircleEdgeIntersection(
-  circle: { x: number; y: number; width: number; height: number },
-  lineStart: { x: number; y: number },
-  lineEnd: { x: number; y: number }
-): { x: number; y: number } {
+function computeCircleEdgeIntersection(circle: Bounds, lineStart: Point, lineEnd: Point): Point {
   const radius = Math.min(circle.width, circle.height) / 2;
 
   const dx = lineEnd.x - lineStart.x;
@@ -407,53 +386,65 @@ function computeCircleEdgeIntersection(
   };
 }
 
-/**
- * Calculate intersection point of a line with a rectangle
- * This is a simplified version that we'll use instead of importing from mermaid
- */
-function intersection(
-  node: { x: number; y: number; width?: number; height?: number },
-  point1: { x: number; y: number },
-  point2: { x: number; y: number }
-): { x: number; y: number } {
-  const nodeWidth = node.width ?? 100;
-  const nodeHeight = node.height ?? 50;
+function intersection(node: PositionedNode, outsidePoint: Point, insidePoint: Point): Point {
+  const x = node.x;
+  const y = node.y;
 
-  const centerX = node.x;
-  const centerY = node.y;
-
-  const dx = point2.x - point1.x;
-  const dy = point2.y - point1.y;
-
-  if (dx === 0 && dy === 0) {
-    return { x: centerX, y: centerY };
+  if (!node.width || !node.height) {
+    return { x: outsidePoint.x, y: outsidePoint.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 halfWidth = nodeWidth / 2;
-  const halfHeight = nodeHeight / 2;
+  const Q = Math.abs(outsidePoint.y - insidePoint.y);
+  const R = Math.abs(outsidePoint.x - insidePoint.x);
 
-  let intersectionX = centerX;
-  let intersectionY = centerY;
+  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,
+    };
 
-  if (Math.abs(dx) > Math.abs(dy)) {
-    if (dx > 0) {
-      intersectionX = centerX + halfWidth;
-      intersectionY = centerY + (halfWidth * dy) / dx;
-    } else {
-      intersectionX = centerX - halfWidth;
-      intersectionY = centerY - (halfWidth * dy) / dx;
+    if (r === 0) {
+      res.x = outsidePoint.x;
+      res.y = outsidePoint.y;
     }
+    if (R === 0) {
+      res.x = outsidePoint.x;
+    }
+    if (Q === 0) {
+      res.y = outsidePoint.y;
+    }
+
+    return res;
   } else {
-    if (dy > 0) {
-      intersectionY = centerY + halfHeight;
-      intersectionX = centerX + (halfHeight * dx) / dy;
+    if (insidePoint.x < outsidePoint.x) {
+      r = outsidePoint.x - w - x;
     } else {
-      intersectionY = centerY - halfHeight;
-      intersectionX = centerX - (halfHeight * dx) / dy;
+      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;
 
-  return { x: intersectionX, y: intersectionY };
+    if (r === 0) {
+      _x = outsidePoint.x;
+      _y = outsidePoint.y;
+    }
+    if (R === 0) {
+      _x = outsidePoint.x;
+    }
+    if (Q === 0) {
+      _y = outsidePoint.y;
+    }
+
+    return { x: _x, y: _y };
+  }
 }
 
 /**

packages/mermaid-layout-tidy-tree/src/render.ts

@@ -102,7 +102,7 @@ export const render = async (
     }),
   };
 
-  const layoutResult = await executeTidyTreeLayout(updatedLayoutData, data4Layout.config);
+  const layoutResult = await executeTidyTreeLayout(updatedLayoutData);
   // Step 3: Position the nodes based on bidirectional layout results
   log.debug('Positioning nodes based on bidirectional layout results');
 

packages/mermaid-zenuml/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @mermaid-js/mermaid-zenuml
 
+## 0.2.2
+
+### Patch Changes
+
+- [#6798](https://github.com/mermaid-js/mermaid/pull/6798) [`3ffe961`](https://github.com/mermaid-js/mermaid/commit/3ffe9618aebc9ac96de6e3c826481f542f18c2a9) Thanks [@MrCoder](https://github.com/MrCoder)! - Fixed a critical bug that the ZenUML diagram is not rendered.
+
+- Updated dependencies [[`b9ef683`](https://github.com/mermaid-js/mermaid/commit/b9ef683fb67b8959abc455d6cc5266c37ba435f6), [`2c0931d`](https://github.com/mermaid-js/mermaid/commit/2c0931da46794b49d2523211e25f782900c34e94), [`33e08da`](https://github.com/mermaid-js/mermaid/commit/33e08daf175125295a06b1b80279437004a4e865), [`814b68b`](https://github.com/mermaid-js/mermaid/commit/814b68b4a94813f7c6b3d7fb4559532a7bab2652), [`fce7cab`](https://github.com/mermaid-js/mermaid/commit/fce7cabb71d68a20a66246fe23d066512126a412), [`fc07f0d`](https://github.com/mermaid-js/mermaid/commit/fc07f0d8abca49e4f887d7457b7b94fb07d1e3da), [`12e01bd`](https://github.com/mermaid-js/mermaid/commit/12e01bdb5cacf3569133979a5a4f1d8973e9aec1), [`01aaef3`](https://github.com/mermaid-js/mermaid/commit/01aaef39b4a1ec8bc5a0c6bfa3a20b712d67f4dc), [`daf8d8d`](https://github.com/mermaid-js/mermaid/commit/daf8d8d3befcd600618a629977b76463b38d0ad9), [`c36cd05`](https://github.com/mermaid-js/mermaid/commit/c36cd05c45ac3090181152b4dae41f8d7b569bd6), [`8bb29fc`](https://github.com/mermaid-js/mermaid/commit/8bb29fc879329ad109898e4025b4f4eba2ab0649), [`71b04f9`](https://github.com/mermaid-js/mermaid/commit/71b04f93b07f876df2b30656ef36036c1d0e4e4f), [`c99bce6`](https://github.com/mermaid-js/mermaid/commit/c99bce6bab4c7ce0b81b66d44f44853ce4aeb1c3), [`6cc1926`](https://github.com/mermaid-js/mermaid/commit/6cc192680a2531cab28f87a8061a53b786e010f3), [`9da6fb3`](https://github.com/mermaid-js/mermaid/commit/9da6fb39ae278401771943ac85d6d1b875f78cf1), [`e48b0ba`](https://github.com/mermaid-js/mermaid/commit/e48b0ba61dab7f95aa02da603b5b7d383b894932), [`4d62d59`](https://github.com/mermaid-js/mermaid/commit/4d62d5963238400270e9314c6e4d506f48147074), [`e9ce8cf`](https://github.com/mermaid-js/mermaid/commit/e9ce8cf4da9062d85098042044822100889bb0dd), [`9258b29`](https://github.com/mermaid-js/mermaid/commit/9258b2933bbe1ef41087345ffea3731673671c49), [`da90f67`](https://github.com/mermaid-js/mermaid/commit/da90f6760b6efb0da998bcb63b75eecc29e06c08), [`0133f1c`](https://github.com/mermaid-js/mermaid/commit/0133f1c0c5cff4fc4c8e0b99e9cf0b3d49dcbe71), [`895f9d4`](https://github.com/mermaid-js/mermaid/commit/895f9d43ff98ca05ebfba530789f677f31a011ff)]:
+  - mermaid@11.10.0
+
 ## 0.2.1
 
 ### Patch Changes

packages/mermaid-zenuml/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mermaid-js/mermaid-zenuml",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "MermaidJS plugin for ZenUML integration",
   "module": "dist/mermaid-zenuml.core.mjs",
   "types": "dist/detector.d.ts",

packages/mermaid/CHANGELOG.md

@@ -1,5 +1,72 @@
 # mermaid
 
+## 11.10.0
+
+### Minor Changes
+
+- [#6744](https://github.com/mermaid-js/mermaid/pull/6744) [`daf8d8d`](https://github.com/mermaid-js/mermaid/commit/daf8d8d3befcd600618a629977b76463b38d0ad9) Thanks [@SpecularAura](https://github.com/SpecularAura)! - feat: Added support for per link curve styling in flowchart diagram using edge ids
+
+### Patch Changes
+
+- [#6857](https://github.com/mermaid-js/mermaid/pull/6857) [`b9ef683`](https://github.com/mermaid-js/mermaid/commit/b9ef683fb67b8959abc455d6cc5266c37ba435f6) Thanks [@knsv](https://github.com/knsv)! - feat: Exposing elk configuration forceNodeModelOrder and considerModelOrder to the mermaid configuration
+
+- [#6653](https://github.com/mermaid-js/mermaid/pull/6653) [`2c0931d`](https://github.com/mermaid-js/mermaid/commit/2c0931da46794b49d2523211e25f782900c34e94) Thanks [@darshanr0107](https://github.com/darshanr0107)! - chore: Remove the "-beta" suffix from the XYChart, Block, Sankey diagrams to reflect their stable status
+
+- [#6683](https://github.com/mermaid-js/mermaid/pull/6683) [`33e08da`](https://github.com/mermaid-js/mermaid/commit/33e08daf175125295a06b1b80279437004a4e865) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: Position the edge label in state diagram correctly relative to the edge
+
+- [#6693](https://github.com/mermaid-js/mermaid/pull/6693) [`814b68b`](https://github.com/mermaid-js/mermaid/commit/814b68b4a94813f7c6b3d7fb4559532a7bab2652) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: Apply correct dateFormat in Gantt chart to show only day when specified
+
+- [#6734](https://github.com/mermaid-js/mermaid/pull/6734) [`fce7cab`](https://github.com/mermaid-js/mermaid/commit/fce7cabb71d68a20a66246fe23d066512126a412) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: handle exclude dates properly in Gantt charts when using dateFormat: 'YYYY-MM-DD HH:mm:ss'
+
+- [#6733](https://github.com/mermaid-js/mermaid/pull/6733) [`fc07f0d`](https://github.com/mermaid-js/mermaid/commit/fc07f0d8abca49e4f887d7457b7b94fb07d1e3da) Thanks [@omkarht](https://github.com/omkarht)! - fix: fixed connection gaps in flowchart for roundedRect, stadium and diamond shape
+
+- [#6876](https://github.com/mermaid-js/mermaid/pull/6876) [`12e01bd`](https://github.com/mermaid-js/mermaid/commit/12e01bdb5cacf3569133979a5a4f1d8973e9aec1) Thanks [@sidharthv96](https://github.com/sidharthv96)! - fix: sanitize icon labels and icon SVGs
+
+  Resolves CVE-2025-54880 reported by @fourcube
+
+- [#6801](https://github.com/mermaid-js/mermaid/pull/6801) [`01aaef3`](https://github.com/mermaid-js/mermaid/commit/01aaef39b4a1ec8bc5a0c6bfa3a20b712d67f4dc) Thanks [@sidharthv96](https://github.com/sidharthv96)! - fix: Update casing of ID in requirement diagram
+
+- [#6796](https://github.com/mermaid-js/mermaid/pull/6796) [`c36cd05`](https://github.com/mermaid-js/mermaid/commit/c36cd05c45ac3090181152b4dae41f8d7b569bd6) Thanks [@HashanCP](https://github.com/HashanCP)! - fix: Make flowchart elk detector regex match less greedy
+
+- [#6702](https://github.com/mermaid-js/mermaid/pull/6702) [`8bb29fc`](https://github.com/mermaid-js/mermaid/commit/8bb29fc879329ad109898e4025b4f4eba2ab0649) Thanks [@qraqras](https://github.com/qraqras)! - fix(block): overflowing blocks no longer affect later lines
+
+  This may change the layout of block diagrams that have overflowing lines
+  (i.e. block diagrams that use up more columns that the `columns` specifier).
+
+- [#6717](https://github.com/mermaid-js/mermaid/pull/6717) [`71b04f9`](https://github.com/mermaid-js/mermaid/commit/71b04f93b07f876df2b30656ef36036c1d0e4e4f) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: log warning for blocks exceeding column width
+
+  This update adds a validation check that logs a warning message when a block's width exceeds the defined column layout.
+
+- [#6820](https://github.com/mermaid-js/mermaid/pull/6820) [`c99bce6`](https://github.com/mermaid-js/mermaid/commit/c99bce6bab4c7ce0b81b66d44f44853ce4aeb1c3) Thanks [@kriss-u](https://github.com/kriss-u)! - fix: Add escaped class literal name on namespace
+
+- [#6332](https://github.com/mermaid-js/mermaid/pull/6332) [`6cc1926`](https://github.com/mermaid-js/mermaid/commit/6cc192680a2531cab28f87a8061a53b786e010f3) Thanks [@ajuckel](https://github.com/ajuckel)! - fix: Allow equals sign in sequenceDiagram labels
+
+- [#6651](https://github.com/mermaid-js/mermaid/pull/6651) [`9da6fb3`](https://github.com/mermaid-js/mermaid/commit/9da6fb39ae278401771943ac85d6d1b875f78cf1) Thanks [@darshanr0107](https://github.com/darshanr0107)! - Add validation for negative values in pie charts:
+
+  Prevents crashes during parsing by validating values post-parsing.
+
+  Provides clearer, user-friendly error messages for invalid negative inputs.
+
+- [#6803](https://github.com/mermaid-js/mermaid/pull/6803) [`e48b0ba`](https://github.com/mermaid-js/mermaid/commit/e48b0ba61dab7f95aa02da603b5b7d383b894932) Thanks [@omkarht](https://github.com/omkarht)! - chore: migrate to class-based ArchitectureDB implementation
+
+- [#6838](https://github.com/mermaid-js/mermaid/pull/6838) [`4d62d59`](https://github.com/mermaid-js/mermaid/commit/4d62d5963238400270e9314c6e4d506f48147074) Thanks [@saurabhg772244](https://github.com/saurabhg772244)! - fix: node border style for handdrawn shapes
+
+- [#6739](https://github.com/mermaid-js/mermaid/pull/6739) [`e9ce8cf`](https://github.com/mermaid-js/mermaid/commit/e9ce8cf4da9062d85098042044822100889bb0dd) Thanks [@kriss-u](https://github.com/kriss-u)! - fix: Update flowchart direction TD's behavior to be the same as TB
+
+- [#6833](https://github.com/mermaid-js/mermaid/pull/6833) [`9258b29`](https://github.com/mermaid-js/mermaid/commit/9258b2933bbe1ef41087345ffea3731673671c49) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: correctly render non-directional lines for '---' in block diagrams
+
+- [#6855](https://github.com/mermaid-js/mermaid/pull/6855) [`da90f67`](https://github.com/mermaid-js/mermaid/commit/da90f6760b6efb0da998bcb63b75eecc29e06c08) Thanks [@sidharthv96](https://github.com/sidharthv96)! - fix: fallback to raw text instead of rendering _Unsupported markdown_ or empty blocks
+
+  Instead of printing **Unsupported markdown: XXX**, or empty blocks when using a markdown feature
+  that Mermaid does not yet support when `htmlLabels: true`(default) or `htmlLabels: false`,
+  fallback to the raw markdown text.
+
+- [#6876](https://github.com/mermaid-js/mermaid/pull/6876) [`0133f1c`](https://github.com/mermaid-js/mermaid/commit/0133f1c0c5cff4fc4c8e0b99e9cf0b3d49dcbe71) Thanks [@sidharthv96](https://github.com/sidharthv96)! - fix: sanitize KATEX blocks
+
+  Resolves CVE-2025-54881 reported by @fourcube
+
+- [#6804](https://github.com/mermaid-js/mermaid/pull/6804) [`895f9d4`](https://github.com/mermaid-js/mermaid/commit/895f9d43ff98ca05ebfba530789f677f31a011ff) Thanks [@omkarht](https://github.com/omkarht)! - chore: Update packet diagram to use new class-based database structure
+
 ## 11.9.0
 
 ### Minor Changes
@@ -87,6 +154,7 @@
 ### Minor Changes
 
 - [#6408](https://github.com/mermaid-js/mermaid/pull/6408) [`ad65313`](https://github.com/mermaid-js/mermaid/commit/ad653138e16765d095613a6e5de86dc5e52ac8f0) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - fix: restore curve type configuration functionality for flowcharts. This fixes the issue where curve type settings were not being applied when configured through any of the following methods:
+
   - Config
   - Init directive (%%{ init: { 'flowchart': { 'curve': '...' } } }%%)
   - LinkStyle command (linkStyle default interpolate ...)
@@ -105,12 +173,14 @@
 ### Minor Changes
 
 - [#6187](https://github.com/mermaid-js/mermaid/pull/6187) [`7809b5a`](https://github.com/mermaid-js/mermaid/commit/7809b5a93fae127f45727071f5ff14325222c518) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - Flowchart new syntax for node metadata bugs
+
   - Incorrect label mapping for nodes when using `&`
   - Syntax error when `}` with trailing spaces before new line
 
 - [#6136](https://github.com/mermaid-js/mermaid/pull/6136) [`ec0d9c3`](https://github.com/mermaid-js/mermaid/commit/ec0d9c389aa6018043187654044c1e0b5aa4f600) Thanks [@knsv](https://github.com/knsv)! - Adding support for animation of flowchart edges
 
 - [#6373](https://github.com/mermaid-js/mermaid/pull/6373) [`05bdf0e`](https://github.com/mermaid-js/mermaid/commit/05bdf0e20e2629fe77513218fbd4e28e65f75882) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - Upgrade Requirement and ER diagram to use the common renderer flow
+
   - Added support for directions
   - Added support for hand drawn look
 

packages/mermaid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "11.9.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",
@@ -68,7 +68,7 @@
   },
   "dependencies": {
     "@braintree/sanitize-url": "^7.0.4",
-    "@iconify/utils": "^2.1.33",
+    "@iconify/utils": "^3.0.1",
     "@mermaid-js/parser": "workspace:^",
     "@types/d3": "^7.4.3",
     "cytoscape": "^3.29.3",
@@ -82,7 +82,7 @@
     "katex": "^0.16.22",
     "khroma": "^2.1.0",
     "lodash-es": "^4.17.21",
-    "marked": "^15.0.7",
+    "marked": "^16.0.0",
     "roughjs": "^4.6.6",
     "stylis": "^4.3.6",
     "ts-dedent": "^2.2.0",

packages/mermaid/src/config.spec.ts

@@ -78,3 +78,187 @@ describe('when working with site config', () => {
     expect(config_4.altFontFamily).toBeUndefined();
   });
 });
+
+describe('getUserDefinedConfig', () => {
+  beforeEach(() => {
+    configApi.reset();
+  });
+
+  it('should return empty object when no user config is defined', () => {
+    const userConfig = configApi.getUserDefinedConfig();
+    expect(userConfig).toEqual({});
+  });
+
+  it('should return config from initialize only', () => {
+    const initConfig: MermaidConfig = { theme: 'dark', fontFamily: 'Arial' };
+    configApi.saveConfigFromInitialize(initConfig);
+
+    const userConfig = configApi.getUserDefinedConfig();
+    expect(userConfig).toEqual(initConfig);
+  });
+
+  it('should return config from directives only', () => {
+    const directive1: MermaidConfig = { layout: 'elk', fontSize: 14 };
+    const directive2: MermaidConfig = { theme: 'forest' };
+
+    configApi.addDirective(directive1);
+    configApi.addDirective(directive2);
+
+    expect(configApi.getUserDefinedConfig()).toMatchInlineSnapshot(`
+      {
+        "fontFamily": "Arial",
+        "fontSize": 14,
+        "layout": "elk",
+        "theme": "forest",
+      }
+    `);
+  });
+
+  it('should combine initialize config and directives', () => {
+    const initConfig: MermaidConfig = { theme: 'dark', fontFamily: 'Arial', layout: 'dagre' };
+    const directive1: MermaidConfig = { layout: 'elk', fontSize: 14 };
+    const directive2: MermaidConfig = { theme: 'forest' };
+
+    configApi.saveConfigFromInitialize(initConfig);
+    configApi.addDirective(directive1);
+    configApi.addDirective(directive2);
+
+    const userConfig = configApi.getUserDefinedConfig();
+    expect(userConfig).toMatchInlineSnapshot(`
+      {
+        "fontFamily": "Arial",
+        "fontSize": 14,
+        "layout": "elk",
+        "theme": "forest",
+      }
+    `);
+  });
+
+  it('should handle nested config objects properly', () => {
+    const initConfig: MermaidConfig = {
+      flowchart: { nodeSpacing: 50, rankSpacing: 100 },
+      theme: 'default',
+    };
+    const directive: MermaidConfig = {
+      flowchart: { nodeSpacing: 75, curve: 'basis' },
+      mindmap: { padding: 20 },
+    };
+
+    configApi.saveConfigFromInitialize(initConfig);
+    configApi.addDirective(directive);
+
+    const userConfig = configApi.getUserDefinedConfig();
+    expect(userConfig).toMatchInlineSnapshot(`
+      {
+        "flowchart": {
+          "curve": "basis",
+          "nodeSpacing": 75,
+          "rankSpacing": 100,
+        },
+        "mindmap": {
+          "padding": 20,
+        },
+        "theme": "default",
+      }
+    `);
+  });
+
+  it('should handle complex nested overrides', () => {
+    const initConfig: MermaidConfig = {
+      flowchart: {
+        nodeSpacing: 50,
+        rankSpacing: 100,
+        curve: 'linear',
+      },
+      theme: 'default',
+    };
+    const directive1: MermaidConfig = {
+      flowchart: {
+        nodeSpacing: 75,
+      },
+      fontSize: 12,
+    };
+    const directive2: MermaidConfig = {
+      flowchart: {
+        curve: 'basis',
+        nodeSpacing: 100,
+      },
+      mindmap: {
+        padding: 15,
+      },
+    };
+
+    configApi.saveConfigFromInitialize(initConfig);
+    configApi.addDirective(directive1);
+    configApi.addDirective(directive2);
+
+    const userConfig = configApi.getUserDefinedConfig();
+    expect(userConfig).toMatchInlineSnapshot(`
+      {
+        "flowchart": {
+          "curve": "basis",
+          "nodeSpacing": 100,
+          "rankSpacing": 100,
+        },
+        "fontSize": 12,
+        "mindmap": {
+          "padding": 15,
+        },
+        "theme": "default",
+      }
+    `);
+  });
+
+  it('should return independent copies (not references)', () => {
+    const initConfig: MermaidConfig = { theme: 'dark', flowchart: { nodeSpacing: 50 } };
+    configApi.saveConfigFromInitialize(initConfig);
+
+    const userConfig1 = configApi.getUserDefinedConfig();
+    const userConfig2 = configApi.getUserDefinedConfig();
+
+    userConfig1.theme = 'neutral';
+    userConfig1.flowchart!.nodeSpacing = 999;
+
+    expect(userConfig2).toMatchInlineSnapshot(`
+      {
+        "flowchart": {
+          "nodeSpacing": 50,
+        },
+        "theme": "dark",
+      }
+    `);
+  });
+
+  it('should handle edge cases with undefined values', () => {
+    const initConfig: MermaidConfig = { theme: 'dark', layout: undefined };
+    const directive: MermaidConfig = { fontSize: 14, fontFamily: undefined };
+
+    configApi.saveConfigFromInitialize(initConfig);
+    configApi.addDirective(directive);
+
+    expect(configApi.getUserDefinedConfig()).toMatchInlineSnapshot(`
+      {
+        "fontSize": 14,
+        "layout": undefined,
+        "theme": "dark",
+      }
+    `);
+  });
+
+  it('should retain config from initialize after reset', () => {
+    const initConfig: MermaidConfig = { theme: 'dark' };
+    const directive: MermaidConfig = { layout: 'elk' };
+
+    configApi.saveConfigFromInitialize(initConfig);
+    configApi.addDirective(directive);
+
+    expect(configApi.getUserDefinedConfig()).toMatchInlineSnapshot(`
+      {
+        "layout": "elk",
+        "theme": "dark",
+      }
+    `);
+
+    configApi.reset();
+  });
+});

packages/mermaid/src/config.ts

@@ -248,3 +248,17 @@ const checkConfig = (config: MermaidConfig) => {
     issueWarning('LAZY_LOAD_DEPRECATED');
   }
 };
+
+export const getUserDefinedConfig = (): MermaidConfig => {
+  let userConfig: MermaidConfig = {};
+
+  if (configFromInitialize) {
+    userConfig = assignWithDepth(userConfig, configFromInitialize);
+  }
+
+  for (const d of directives) {
+    userConfig = assignWithDepth(userConfig, d);
+  }
+
+  return userConfig;
+};

packages/mermaid/src/dagre-wrapper/createLabel.js

@@ -1,9 +1,9 @@
 import { select } from 'd3';
-import { log } from '../logger.js';
 import { getConfig } from '../diagram-api/diagramAPI.js';
-import { evaluate } from '../diagrams/common/common.js';
-import { decodeEntities } from '../utils.js';
+import { evaluate, sanitizeText } from '../diagrams/common/common.js';
+import { log } from '../logger.js';
 import { replaceIconSubstring } from '../rendering-util/createText.js';
+import { decodeEntities } from '../utils.js';
 
 /**
  * @param dom
@@ -19,14 +19,14 @@ function applyStyle(dom, styleFn) {
  * @param {any} node
  * @returns {SVGForeignObjectElement} Node
  */
-function addHtmlLabel(node) {
+function addHtmlLabel(node, config) {
   const fo = select(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'));
   const div = fo.append('xhtml:div');
 
   const label = node.label;
   const labelClass = node.isNode ? 'nodeLabel' : 'edgeLabel';
   const span = div.append('span');
-  span.html(label);
+  span.html(sanitizeText(label, config));
   applyStyle(span, node.labelStyle);
   span.attr('class', labelClass);
 
@@ -49,7 +49,8 @@ const createLabel = async (_vertexText, style, isTitle, isNode) => {
   if (typeof vertexText === 'object') {
     vertexText = vertexText[0];
   }
-  if (evaluate(getConfig().flowchart.htmlLabels)) {
+  const config = getConfig();
+  if (evaluate(config.flowchart.htmlLabels)) {
     // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
     vertexText = vertexText.replace(/\\n|\n/g, '<br />');
     log.debug('vertexText' + vertexText);
@@ -59,7 +60,7 @@ const createLabel = async (_vertexText, style, isTitle, isNode) => {
       label,
       labelStyle: style.replace('fill:', 'color:'),
     };
-    let vertexNode = addHtmlLabel(node);
+    let vertexNode = addHtmlLabel(node, config);
     // vertexNode.parentNode.removeChild(vertexNode);
     return vertexNode;
   } else {

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

@@ -4,6 +4,5 @@
  * @returns cleaned text
  */
 export const cleanupComments = (text: string): string => {
-  const cleaned = text.replace(/^\s*%%(?!{)[^\n]+\n?/gm, '');
-  return cleaned.trimStart();
+  return text.replace(/^\s*%%(?!{)[^\n]+\n?/gm, '').trimStart();
 };

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

@@ -3,6 +3,7 @@ import type * as d3 from 'd3';
 import type { SetOptional, SetRequired } from 'type-fest';
 import type { Diagram } from '../Diagram.js';
 import type { BaseDiagramConfig, MermaidConfig } from '../config.type.js';
+import type { DiagramOrientation } from '../diagrams/git/gitGraphTypes.js';
 
 export interface DiagramMetadata {
   title?: string;
@@ -35,7 +36,8 @@ export interface DiagramDB {
   getAccTitle?: () => string;
   setAccDescription?: (description: string) => void;
   getAccDescription?: () => string;
-
+  getDirection?: () => string | undefined;
+  setDirection?: (dir: DiagramOrientation) => void;
   setDisplayMode?: (title: string) => void;
   bindFunctions?: (element: Element) => void;
 }