chore: update ER diagram docs

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

.build/common.ts

@@ -33,11 +33,6 @@ export const packageOptions = {
     packageName: 'mermaid-layout-elk',
     file: 'layouts.ts',
   },
-  'mermaid-layout-tidy-tree': {
-    name: 'mermaid-layout-tidy-tree',
-    packageName: 'mermaid-layout-tidy-tree',
-    file: 'index.ts',
-  },
   examples: {
     name: 'mermaid-examples',
     packageName: 'examples',

.changeset/angry-trains-fall.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Make relationship-label optional in ER diagrams

.changeset/clean-wolves-turn.md

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

.changeset/crazy-loops-matter.md

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

.changeset/deep-times-make.md

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

.changeset/four-eyes-wish.md

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

.changeset/hungry-baths-glow.md

@@ -1,5 +0,0 @@
----
-'mermaid': minor
----
-
-feat: Added support for new participant types (`actor`, `boundary`, `control`, `entity`, `database`, `collections`, `queue`) in `sequenceDiagram`.

.changeset/hungry-guests-drive.md

@@ -1,7 +0,0 @@
----
-'mermaid': minor
-'@mermaid-js/layout-tidy-tree': minor
-'@mermaid-js/layout-elk': minor
----
-
-feat: Update mindmap rendering to support multiple layouts, improved edge intersections, and new shapes

.changeset/proud-colts-smell.md

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

.changeset/revert-marked-dependency.md

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

.cspell/mermaid-terms.txt

@@ -5,10 +5,8 @@ bmatrix
 braintree
 catmull
 compositTitleSize
-cose
 curv
 doublecircle
-elem
 elems
 gantt
 gitgraph

.cspell/misc-terms.txt

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

.github/workflows/e2e-applitools.yml

@@ -23,6 +23,9 @@ 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@18e469570b1cf0dfc11d60ec121099f8ff3e617a
+        uses: peter-evans/create-pull-request@cb4d3bfce175d44325c6b7697f81e0afe8a79bdf
         with:
           add-paths: |
             cypress/timings.json

.github/workflows/validate-lockfile.yml

@@ -35,7 +35,7 @@ jobs:
 
           # 2) No unwanted vitepress paths
           if grep -qF 'packages/mermaid/src/vitepress' pnpm-lock.yaml; then
-            issues+=("• Disallowed path 'packages/mermaid/src/vitepress' present. Run \`rm -rf packages/mermaid/src/vitepress && pnpm install\` to regenerate.")
+            issues+=("• Disallowed path 'packages/mermaid/src/vitepress' present. Run `rm -rf packages/mermaid/src/vitepress && pnpm install` to regenerate.")
           fi
 
           # 3) Lockfile only changes when package.json changes

.gitignore

@@ -4,7 +4,6 @@ node_modules/
 coverage/
 .idea/
 .pnpm-store/
-.instructions/
 
 dist
 v8-compile-cache-0

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,7 +113,8 @@ describe('Configuration', () => {
         cy.get('path')
           .first()
           .should('have.attr', 'marker-end')
-          .and('include', 'url(http://localhost');
+          .should('exist')
+          .and('include', 'url(http\\:\\/\\/localhost');
       });
     });
     it('should not taint the initial configuration when using multiple directives', () => {

cypress/integration/rendering/classDiagram.spec.js

@@ -524,18 +524,5 @@ 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/erDiagram.spec.js

@@ -322,6 +322,18 @@ ORDER ||--|{ LINE-ITEM : contains
     );
   });
 
+  it('should render an ER diagram  without labels also', () => {
+    imgSnapshotTest(
+      `
+    erDiagram
+        BOOK }|..|{ AUTHOR 
+        BOOK }|..|{ GENRE
+        AUTHOR }|..|{ GENRE 
+      `,
+      { logLevel: 1 }
+    );
+  });
+
   it('should render relationship labels with line breaks', () => {
     imgSnapshotTest(
       `

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, 15);
+      verifyNumber(maxWidthValue, 380);
     });
   });
   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, 15);
+      verifyNumber(width, 380);
       expect(svg).to.not.have.attr('style');
     });
   });

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

@@ -1186,17 +1186,4 @@ 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/mindmap-tidy-tree.spec.js

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

@@ -159,10 +159,12 @@ root
   });
   it('square shape', () => {
     imgSnapshotTest(
-      `mindmap
+      `
+mindmap
     root[
       The root
-    ]`,
+    ]
+      `,
       {},
       undefined,
       shouldHaveRoot
@@ -170,10 +172,12 @@ root
   });
   it('rounded rect shape', () => {
     imgSnapshotTest(
-      `mindmap
+      `
+mindmap
     root((
       The root
-    ))`,
+    ))
+      `,
       {},
       undefined,
       shouldHaveRoot
@@ -181,10 +185,12 @@ root
   });
   it('circle shape', () => {
     imgSnapshotTest(
-      `mindmap
+      `
+mindmap
     root(
       The root
-    )`,
+    )
+      `,
       {},
       undefined,
       shouldHaveRoot
@@ -192,8 +198,10 @@ root
   });
   it('default shape', () => {
     imgSnapshotTest(
-      `mindmap
-  The root`,
+      `
+mindmap
+  The root
+      `,
       {},
       undefined,
       shouldHaveRoot
@@ -201,10 +209,12 @@ root
   });
   it('adding children', () => {
     imgSnapshotTest(
-      `mindmap
+      `
+mindmap
   The root
     child1
-    child2`,
+    child2
+      `,
       {},
       undefined,
       shouldHaveRoot
@@ -212,11 +222,13 @@ root
   });
   it('adding grand children', () => {
     imgSnapshotTest(
-      `mindmap
+      `
+mindmap
   The root
     child1
       child2
-      child3`,
+      child3
+      `,
       {},
       undefined,
       shouldHaveRoot
@@ -228,21 +240,25 @@ root
         `mindmap
     id1[\`**Start** with
     a second line 😎\`]
-      id2[\`The dog in **the** hog... a *very long text* about it Word!\`]`
+      id2[\`The dog in **the** hog... a *very long text* about it
+Word!\`]
+`
       );
     });
   });
   describe('Include char sequence "graph" in text (#6795)', () => {
     it('has a label with char sequence "graph"', () => {
       imgSnapshotTest(
-        ` mindmap
+        `
+        mindmap
           root
             Photograph
               Waterfall
               Landscape
             Geography
               Mountains
-              Rocks`,
+              Rocks
+        `,
         { flowchart: { defaultRenderer: 'elk' } }
       );
     });

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

@@ -1,659 +0,0 @@
-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,17 +893,6 @@ 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,8 +32,26 @@
       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; */
@@ -45,7 +63,9 @@
       h1 {
         color: grey;
       }
-
+      .mermaid {
+        border: 1px solid red;
+      }
       .mermaid2 {
         display: none;
       }
@@ -83,6 +103,11 @@
         width: 100%;
       }
 
+      .class2 {
+        fill: red;
+        fill-opacity: 1;
+      }
+
       /* tspan {
               font-size: 6px !important;
             } */
@@ -106,194 +131,6 @@
 
   <body>
     <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: elk
-      ---
-      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
@@ -320,149 +157,84 @@ treemap
     "Leaf 2.2": 25
     "Leaf 2.3": 12
 
-    </pre>
-    <pre id="diagram5" class="mermaid">
-      ---
-      config:
-        layout: elk
-        flowchart:
-          curve: rounded
-      ---
-      flowchart LR
-          I["fa:fa-code Text"] -- Mermaid js --> D["Use<br/>the<br/>editor!"]
-          I --> D & D
-          D@{ shape: question}
-          I@{ shape: question}
+classDef class1   fill:red,color:blue,stroke:#FFD600;
 
-    </pre>
-    <pre id="diagram4" class="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
-        Tools
-          Pen and paper
-          Mermaid
 
-    </pre>
-    <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: elk
-        flowchart:
-          curve: linear
-      ---
-      flowchart LR
-          A[A] --> B[B]
-          A[A] --- B([C])
-          A@{ shape: diamond}
-          %%B@{ shape: diamond}
-
-    </pre>
-    <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: elk
-        flowchart:
-          curve: linear
-      ---
-      flowchart LR
-          A[A] -- Mermaid js --> B[B]
-          A[A] -- Mermaid js --- B[B]
-          A@{ shape: diamond}
-          B@{ shape: diamond}
-
-    </pre>
-    <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: elk
-        flowchart:
-          curve: rounded
-      ---
-      flowchart LR
-          D["Use the editor"] -- Mermaid js --> I["fa:fa-code Text"]
-          I --> D & D
-          D@{ shape: question}
-          I@{ shape: question}
-    </pre>
-    <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: elk
-        flowchart:
-          curve: rounded
-        elk:
-          nodePlacementStrategy: NETWORK_SIMPLEX
-      ---
-      flowchart LR
-          D["Use the editor"] -- Mermaid js --> I["fa:fa-code Text"]
-          D --> I & I
-          a["a"]
-          D@{ shape: trap-b}
-          I@{ shape: lean-l}
-    </pre>
-    <pre id="diagram4" class="mermaid">
+</pre
+    >
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
-  layout: elk
-
+  treemap:
+    valueFormat: '$0,0'
 ---
-flowchart LR
- %% subgraph s1["Untitled subgraph"]
-        C["Evaluate"]
- %% end
+treemap
+"Budget"
+    "Operations"
+        "Salaries": 7000
+        "Equipment": 2000
+        "Supplies": 1000
+    "Marketing"
+        "Advertising": 4000
+        "Events": 1000
 
-    B --> C
-    </pre>
+</pre
+    >
     <pre id="diagram4" class="mermaid">
----
-config:
-  layout: elk
-  flowchart:
-    //curve: linear
----
-flowchart LR
-%% A ==> B
-%% A2 --> B2
-A{A} --> B((Bo boo)) & B & B & B
-
+    treemap
+      title Accessible Treemap Title
+      "Category A"
+          "Item A1": 10
+          "Item A2": 20
+      "Category B"
+          "Item B1": 15
+          "Item B2": 25
     </pre>
-    <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: elk
-        theme: default
-        look: classic
-      ---
+    <pre id="diagram4" class="mermaid2">
       flowchart LR
-       subgraph s1["APA"]
-              D{"Use the editor"}
-        end
-       subgraph S2["S2"]
-              s1
-              I>"fa:fa-code Text"]
-              E["E"]
-        end
-          D -- Mermaid js --> I
-          D --> I & E
-          E --> I
+        AB["apa@apa@"] --> B(("`apa@apa`"))
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
+      flowchart
+        D(("for D"))
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+      flowchart LR
+        A e1@==> B
+        e1@{ animate: true}
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+  A e1@--> B
+  classDef animate stroke-width:2,stroke-dasharray:10\,8,stroke-dashoffset:-180,animation: edge-animation-frame 6s linear infinite, stroke-linecap: round
+  class e1 animate
+    </pre>
+    <h2>infinite</h2>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+  A e1@--> B
+  classDef animate stroke-dasharray: 9\,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
+  class e1 animate
+    </pre>
+    <h2>Mermaid - edge-animation-slow</h2>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+  A e1@--> B
+e1@{ animation: fast}
+    </pre>
+    <h2>Mermaid - edge-animation-fast</h2>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+  A e1@--> B
+  classDef animate stroke-dasharray: 1000,stroke-dashoffset: 1000,animation: dash 10s linear;
+  class e1 edge-animation-fast
+    </pre>
+
+    <pre id="diagram4" class="mermaid2">
+
+info    </pre
+    >
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
   layout: elk
@@ -487,7 +259,7 @@ config:
       end
       end
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
   layout: elk
@@ -500,7 +272,7 @@ config:
       D-->I
       D-->I
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
   layout: elk
@@ -539,7 +311,7 @@ flowchart LR
     n8@{ shape: rect}
 
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
   layout: elk
@@ -555,7 +327,7 @@ flowchart LR
 
 
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
   layout: elk
@@ -564,7 +336,7 @@ flowchart LR
     A{A} --> B & C
 </pre
     >
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
   layout: elk
@@ -576,7 +348,7 @@ flowchart LR
     end
 </pre
     >
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
   layout: elk
@@ -594,7 +366,7 @@ flowchart LR
 
 
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
   kanban:
@@ -613,81 +385,81 @@ kanban
     task3[💻 Develop login feature]@{ ticket: 103 }
 
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Default] --> A@{ icon: 'fa:bell', form: 'rounded' }
 
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Style] --> A@{ icon: 'fa:bell', form: 'rounded' }
 style A fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Class] --> A@{ icon: 'fa:bell', form: 'rounded' }
 A:::AClass
 classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
   nA[Class] --> A@{ icon: 'logos:aws', form: 'rounded' }
 
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Default] --> A@{ icon: 'fa:bell', form: 'square' }
 
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Style] --> A@{ icon: 'fa:bell', form: 'square' }
 style A fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Class] --> A@{ icon: 'fa:bell', form: 'square' }
 A:::AClass
 classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
   nA[Class] --> A@{ icon: 'logos:aws', form: 'square' }
 
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Default] --> A@{ icon: 'fa:bell', form: 'circle' }
 
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Style] --> A@{ icon: 'fa:bell', form: 'circle' }
 style A fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
 nA[Class] --> A@{ icon: 'fa:bell', form: 'circle' }
 A:::AClass
 classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
   nA[Class] --> A@{ icon: 'logos:aws', form: 'circle' }
   A:::AClass
   classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
   nA[Style] --> A@{ icon: 'logos:aws', form: 'circle' }
   style A fill:#f9f,stroke:#333,stroke-width:4px
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 kanban
   id2[In progress]
     docs[Create Blog about the new diagram]@{ priority: 'Very Low', ticket: MC-2037, assigned: 'knsv' }
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
   kanban:
@@ -751,22 +523,18 @@ kanban
         alert('It worked');
       }
       await mermaid.initialize({
-        // theme: 'base',
+        // theme: 'forest',
         // theme: 'default',
         // theme: 'forest',
         // handDrawnSeed: 12,
         // look: 'handDrawn',
         // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
         // layout: 'dagre',
-        layout: 'elk',
+        // layout: 'elk',
         // layout: 'fixed',
         // htmlLabels: false,
         flowchart: { titleTopMargin: 10 },
-
-        // fontFamily: 'Caveat',
-        // fontFamily: 'Kalam',
-        // fontFamily: 'courier',
-        fontFamily: 'arial',
+        fontFamily: "'Recursive', sans-serif",
         sequence: {
           actorFontFamily: 'courier',
           noteFontFamily: 'courier',

cypress/platform/mindmap-layouts.html

@@ -1,376 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>Mermaid Quick Test Page</title>
-    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
-    <style>
-      div.mermaid {
-        font-family: 'Courier New', Courier, monospace !important;
-      }
-    </style>
-  </head>
-
-  <body>
-    <pre class="mermaid">
- ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap))
-        A
-        B
-    </pre>
-    <pre class="mermaid">
- ---
-      config:
-        layout: dagre
-      ---
-      mindmap
-      root((mindmap))
-        A
-        B
-    </pre>
-    <pre class="mermaid">
- ---
-      config:
-        layout: elk
-      ---
-      mindmap
-      root((mindmap))
-        A
-        B
-    </pre>
-    <pre class="mermaid">
- ---
-      config:
-        layout: cose-bilkent
-      ---
-      mindmap
-      root((mindmap))
-        A
-        B
-    </pre>
-    <pre class="mermaid">
-    ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap is a long thing))
-        A
-        B
-        C
-        D
-    </pre>
-    <pre class="mermaid">
-    ---
-      config:
-        layout: dagre
-      ---
-      mindmap
-      root((mindmap is a long thing))
-        A
-        B
-        C
-        D
-    </pre>
-    <pre class="mermaid">
-    ---
-      config:
-        layout: elk
-      ---
-      mindmap
-      root((mindmap is a long thing))
-        A
-        B
-        C
-        D
-    </pre>
-    <pre class="mermaid">
-    ---
-      config:
-        layout: cose-bilkent
-      ---
-      mindmap
-      root((mindmap is a long thing))
-        A
-        B
-        C
-        D
-    </pre>
-
-    <pre class="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&lt;br/>and features
-          On Automatic creation
-            Uses
-                Creative techniques
-                Strategic planning
-                Argument mapping
-        Tools
-              id)I am a cloud(
-                  id))I am a bang((
-                    Tools
-    </pre>
-    <pre class="mermaid">
-    ---
-      config:
-        layout: dagre
-      ---
-      mindmap
-      root((mindmap))
-        Origins
-          Long history
-          ::icon(fa fa-book)
-          Popularisation
-            British popular psychology author Tony Buzan
-        Research
-          On effectiveness&lt;br/>and features
-          On Automatic creation
-            Uses
-                Creative techniques
-                Strategic planning
-                Argument mapping
-        Tools
-              id)I am a cloud(
-                  id))I am a bang((
-                    Tools
-    </pre>
-    <pre class="mermaid">
-    ---
-      config:
-        layout: elk
-      ---
-      mindmap
-      root((mindmap))
-        Origins
-          Long history
-          ::icon(fa fa-book)
-          Popularisation
-            British popular psychology author Tony Buzan
-        Research
-          On effectiveness&lt;br/>and features
-          On Automatic creation
-            Uses
-                Creative techniques
-                Strategic planning
-                Argument mapping
-        Tools
-              id)I am a cloud(
-                  id))I am a bang((
-                    Tools
-    </pre>
-    <pre class="mermaid">
-    ---
-      config:
-        layout: cose-bilkent
-      ---
-      mindmap
-      root((mindmap))
-        Origins
-          Long history
-          ::icon(fa fa-book)
-          Popularisation
-            British popular psychology author Tony Buzan
-        Research
-          On effectiveness&lt;br/>and features
-          On Automatic creation
-            Uses
-                Creative techniques
-                Strategic planning
-                Argument mapping
-        Tools
-              id)I am a cloud(
-                  id))I am a bang((
-                    Tools
-    </pre>
-    <pre class="mermaid">
-      ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap))
-        A
-          a
-            apa[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-            apa2[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          b
-          c
-          d
-        B
-            apa3[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-        D
-          apa5[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          apa4[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-
-    </pre>
-    <pre class="mermaid">
-      ---
-      config:
-        layout: dagre
-      ---
-      mindmap
-      root((mindmap))
-        A
-          a
-            apa[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-            apa2[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          b
-          c
-          d
-        B
-            apa3[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-        D
-          apa5[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          apa4[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-
-    </pre>
-    <pre class="mermaid">
-      ---
-      config:
-        layout: elk
-      ---
-      mindmap
-      root((mindmap))
-        A
-          a
-            apa[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-            apa2[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          b
-          c
-          d
-        B
-            apa3[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-        D
-          apa5[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          apa4[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-
-    </pre>
-    <pre class="mermaid">
-      ---
-      config:
-        layout: cose-bilkent
-      ---
-      mindmap
-      root((mindmap))
-        A
-          a
-            apa[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-            apa2[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          b
-          c
-          d
-        B
-            apa3[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-        D
-          apa5[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          apa4[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-
-    </pre>
-
-    <pre class="mermaid">
- ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      ((This is a mindmap))
-        child1
-         grandchild 1
-         grandchild 2
-        child2
-         grandchild 3
-         grandchild 4
-        child3
-         grandchild 5
-         grandchild 6
-      
-    </pre>
-
-    <pre class="mermaid">
- ---
-      config:
-        layout: dagre
-      ---
-      mindmap
-      ((This is a mindmap))
-        child1
-         grandchild 1
-         grandchild 2
-        child2
-         grandchild 3
-         grandchild 4
-        child3
-         grandchild 5
-         grandchild 6
-      
-    </pre>
-
-    <pre class="mermaid">
- ---
-      config:
-        layout: elk
-      ---
-      mindmap
-      ((This is a mindmap))
-        child1
-         grandchild 1
-         grandchild 2
-        child2
-         grandchild 3
-         grandchild 4
-        child3
-         grandchild 5
-         grandchild 6
-      
-    </pre>
-
-    <pre class="mermaid">
- ---
-      config:
-        layout: cose-bilkent
-      ---
-      mindmap
-      ((This is a mindmap))
-        child1
-         grandchild 1
-         grandchild 2
-        child2
-         grandchild 3
-         grandchild 4
-        child3
-         grandchild 5
-         grandchild 6
-      
-    </pre>
-
-    <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,
-        securityLevel: 'loose',
-      });
-    </script>
-  </body>
-</html>

cypress/platform/viewer.js

@@ -1,6 +1,5 @@
 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';
 
@@ -66,7 +65,6 @@ const contentLoaded = async function () {
     await mermaid.registerExternalDiagrams([externalExample, zenUml]);
 
     mermaid.registerLayoutLoaders(layouts);
-    mermaid.registerLayoutLoaders(tidyTree);
     mermaid.initialize(graphObj.mermaid);
     /**
      *  CC-BY-4.0

cypress/timings.json

@@ -2,227 +2,219 @@
   "durations": [
     {
       "spec": "cypress/integration/other/configuration.spec.js",
-      "duration": 5841
+      "duration": 6297
     },
     {
       "spec": "cypress/integration/other/external-diagrams.spec.js",
-      "duration": 2138
+      "duration": 2187
     },
     {
       "spec": "cypress/integration/other/ghsa.spec.js",
-      "duration": 3370
+      "duration": 3509
     },
     {
       "spec": "cypress/integration/other/iife.spec.js",
-      "duration": 2052
+      "duration": 2218
     },
     {
       "spec": "cypress/integration/other/interaction.spec.js",
-      "duration": 12243
+      "duration": 12104
     },
     {
       "spec": "cypress/integration/other/rerender.spec.js",
-      "duration": 2065
+      "duration": 2151
     },
     {
       "spec": "cypress/integration/other/xss.spec.js",
-      "duration": 31288
+      "duration": 33064
     },
     {
       "spec": "cypress/integration/rendering/appli.spec.js",
-      "duration": 3421
+      "duration": 3488
     },
     {
       "spec": "cypress/integration/rendering/architecture.spec.ts",
-      "duration": 97
+      "duration": 106
     },
     {
       "spec": "cypress/integration/rendering/block.spec.js",
-      "duration": 18500
+      "duration": 18317
     },
     {
       "spec": "cypress/integration/rendering/c4.spec.js",
-      "duration": 5793
+      "duration": 5592
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-elk-v3.spec.js",
-      "duration": 40966
+      "duration": 39358
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-handDrawn-v3.spec.js",
-      "duration": 39176
+      "duration": 37160
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-v2.spec.js",
-      "duration": 23468
+      "duration": 23660
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-v3.spec.js",
-      "duration": 38291
+      "duration": 36866
     },
     {
       "spec": "cypress/integration/rendering/classDiagram.spec.js",
-      "duration": 16949
+      "duration": 17334
     },
     {
       "spec": "cypress/integration/rendering/conf-and-directives.spec.js",
-      "duration": 9480
+      "duration": 9871
     },
     {
       "spec": "cypress/integration/rendering/current.spec.js",
-      "duration": 2753
+      "duration": 2833
     },
     {
       "spec": "cypress/integration/rendering/erDiagram-unified.spec.js",
-      "duration": 88028
+      "duration": 85321
     },
     {
       "spec": "cypress/integration/rendering/erDiagram.spec.js",
-      "duration": 15615
+      "duration": 15673
     },
     {
       "spec": "cypress/integration/rendering/errorDiagram.spec.js",
-      "duration": 3706
+      "duration": 3724
     },
     {
       "spec": "cypress/integration/rendering/flowchart-elk.spec.js",
-      "duration": 43905
+      "duration": 41178
     },
     {
       "spec": "cypress/integration/rendering/flowchart-handDrawn.spec.js",
-      "duration": 31217
+      "duration": 29966
     },
     {
       "spec": "cypress/integration/rendering/flowchart-icon.spec.js",
-      "duration": 7531
+      "duration": 7689
     },
     {
       "spec": "cypress/integration/rendering/flowchart-shape-alias.spec.ts",
-      "duration": 25423
+      "duration": 24709
     },
     {
       "spec": "cypress/integration/rendering/flowchart-v2.spec.js",
-      "duration": 49664
+      "duration": 45565
     },
     {
       "spec": "cypress/integration/rendering/flowchart.spec.js",
-      "duration": 32525
+      "duration": 31144
     },
     {
       "spec": "cypress/integration/rendering/gantt.spec.js",
-      "duration": 20915
+      "duration": 20808
     },
     {
       "spec": "cypress/integration/rendering/gitGraph.spec.js",
-      "duration": 53556
+      "duration": 49985
     },
     {
       "spec": "cypress/integration/rendering/iconShape.spec.ts",
-      "duration": 283038
+      "duration": 273272
     },
     {
       "spec": "cypress/integration/rendering/imageShape.spec.ts",
-      "duration": 59434
+      "duration": 55880
     },
     {
       "spec": "cypress/integration/rendering/info.spec.ts",
-      "duration": 3101
+      "duration": 3271
     },
     {
       "spec": "cypress/integration/rendering/journey.spec.js",
-      "duration": 7099
+      "duration": 7293
     },
     {
       "spec": "cypress/integration/rendering/kanban.spec.ts",
-      "duration": 7567
+      "duration": 7861
     },
     {
       "spec": "cypress/integration/rendering/katex.spec.js",
-      "duration": 3817
+      "duration": 3922
     },
     {
       "spec": "cypress/integration/rendering/marker_unique_id.spec.js",
-      "duration": 2624
-    },
-    {
-      "spec": "cypress/integration/rendering/mindmap-tidy-tree.spec.js",
-      "duration": 4246
+      "duration": 2726
     },
     {
       "spec": "cypress/integration/rendering/mindmap.spec.ts",
-      "duration": 11967
+      "duration": 11670
     },
     {
       "spec": "cypress/integration/rendering/newShapes.spec.ts",
-      "duration": 151914
+      "duration": 146020
     },
     {
       "spec": "cypress/integration/rendering/oldShapes.spec.ts",
-      "duration": 116698
+      "duration": 114244
     },
     {
       "spec": "cypress/integration/rendering/packet.spec.ts",
-      "duration": 4967
+      "duration": 5036
     },
     {
       "spec": "cypress/integration/rendering/pie.spec.ts",
-      "duration": 6700
+      "duration": 6545
     },
     {
       "spec": "cypress/integration/rendering/quadrantChart.spec.js",
-      "duration": 8963
+      "duration": 9097
     },
     {
       "spec": "cypress/integration/rendering/radar.spec.js",
-      "duration": 5540
+      "duration": 5676
     },
     {
       "spec": "cypress/integration/rendering/requirement.spec.js",
-      "duration": 2782
+      "duration": 2795
     },
     {
       "spec": "cypress/integration/rendering/requirementDiagram-unified.spec.js",
-      "duration": 54797
+      "duration": 51660
     },
     {
       "spec": "cypress/integration/rendering/sankey.spec.ts",
-      "duration": 6914
-    },
-    {
-      "spec": "cypress/integration/rendering/sequencediagram-v2.spec.js",
-      "duration": 20481
+      "duration": 6957
     },
     {
       "spec": "cypress/integration/rendering/sequencediagram.spec.js",
-      "duration": 38490
+      "duration": 36026
     },
     {
       "spec": "cypress/integration/rendering/stateDiagram-v2.spec.js",
-      "duration": 30766
+      "duration": 29551
     },
     {
       "spec": "cypress/integration/rendering/stateDiagram.spec.js",
-      "duration": 16705
+      "duration": 17364
     },
     {
       "spec": "cypress/integration/rendering/theme.spec.js",
-      "duration": 30928
+      "duration": 30209
     },
     {
       "spec": "cypress/integration/rendering/timeline.spec.ts",
-      "duration": 8424
+      "duration": 8699
     },
     {
       "spec": "cypress/integration/rendering/treemap.spec.ts",
-      "duration": 12533
+      "duration": 12168
     },
     {
       "spec": "cypress/integration/rendering/xyChart.spec.js",
-      "duration": 21197
+      "duration": 21453
     },
     {
       "spec": "cypress/integration/rendering/zenuml.spec.js",
-      "duration": 3455
+      "duration": 3577
     }
   ]
 }

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/1433#issuecomment-1991554712)
+1. [How to add title to flowchart?](https://github.com/mermaid-js/mermaid/issues/556#issuecomment-363182217)
 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

@@ -1,40 +0,0 @@
-> **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,7 +19,6 @@
 - [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

@@ -1,19 +0,0 @@
-> **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,6 +10,10 @@
 
 # mermaid
 
+## Classes
+
+- [UnknownDiagramError](classes/UnknownDiagramError.md)
+
 ## Interfaces
 
 - [DetailedError](interfaces/DetailedError.md)
@@ -23,7 +27,6 @@
 - [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

@@ -0,0 +1,159 @@
+> **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: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:94](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L94)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:96](https://github.com/me
 
 > **detector**: `DiagramDetector`
 
-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)
+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)
 
 ---
 
@@ -26,7 +26,7 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:98](https://github.com/me
 
 > **id**: `string`
 
-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:95](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L95)
 
 ---
 
@@ -34,4 +34,4 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:97](https://github.com/me
 
 > **loader**: `DiagramLoader`
 
-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)
+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)

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

@@ -10,7 +10,7 @@
 
 # Interface: LayoutData
 
-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)
+Defined in: [packages/mermaid/src/rendering-util/types.ts:145](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L145)
 
 ## Indexable
 
@@ -22,7 +22,7 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:168](https://github.co
 
 > **config**: [`MermaidConfig`](MermaidConfig.md)
 
-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:148](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L148)
 
 ---
 
@@ -30,7 +30,7 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:171](https://github.co
 
 > **edges**: `Edge`\[]
 
-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:147](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L147)
 
 ---
 
@@ -38,4 +38,4 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:170](https://github.co
 
 > **nodes**: `Node`\[]
 
-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)
+Defined in: [packages/mermaid/src/rendering-util/types.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L146)

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

@@ -10,7 +10,7 @@
 
 # Interface: LayoutLoaderDefinition
 
-Defined in: [packages/mermaid/src/rendering-util/render.ts:24](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L24)
+Defined in: [packages/mermaid/src/rendering-util/render.ts:21](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L21)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/rendering-util/render.ts:24](https://github.co
 
 > `optional` **algorithm**: `string`
 
-Defined in: [packages/mermaid/src/rendering-util/render.ts:27](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L27)
+Defined in: [packages/mermaid/src/rendering-util/render.ts:24](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L24)
 
 ---
 
@@ -26,7 +26,7 @@ Defined in: [packages/mermaid/src/rendering-util/render.ts:27](https://github.co
 
 > **loader**: `LayoutLoader`
 
-Defined in: [packages/mermaid/src/rendering-util/render.ts:26](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L26)
+Defined in: [packages/mermaid/src/rendering-util/render.ts:23](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L23)
 
 ---
 
@@ -34,4 +34,4 @@ Defined in: [packages/mermaid/src/rendering-util/render.ts:26](https://github.co
 
 > **name**: `string`
 
-Defined in: [packages/mermaid/src/rendering-util/render.ts:25](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L25)
+Defined in: [packages/mermaid/src/rendering-util/render.ts:22](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L22)

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](#initialize).
+**Deprecated**, please set configuration in [initialize](Mermaid.md#initialize).
 
 ##### nodes?
 
@@ -141,13 +141,13 @@ Called once for each rendered diagram's id.
 
 #### Deprecated
 
-Use [initialize](#initialize) and [run](#run) instead.
+Use [initialize](Mermaid.md#initialize) and [run](Mermaid.md#run) instead.
 
 Renders the mermaid diagrams
 
 #### Deprecated
 
-Use [initialize](#initialize) and [run](#run) instead.
+Use [initialize](Mermaid.md#initialize) and [run](Mermaid.md#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,81 +184,73 @@ Defined in: [packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/
 
 #### Deprecated
 
-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.
+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.
 
 ---
 
 ### 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.
 
@@ -340,7 +332,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:88](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L88)
+Defined in: [packages/mermaid/src/types.ts:72](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L72)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:88](https://github.com/mermaid-js/mer
 
 > `optional` **suppressErrors**: `boolean`
 
-Defined in: [packages/mermaid/src/types.ts:93](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L93)
+Defined in: [packages/mermaid/src/types.ts:77](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L77)
 
 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:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L96)
+Defined in: [packages/mermaid/src/types.ts:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L80)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:96](https://github.com/mermaid-js/mer
 
 > **config**: [`MermaidConfig`](MermaidConfig.md)
 
-Defined in: [packages/mermaid/src/types.ts:104](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L104)
+Defined in: [packages/mermaid/src/types.ts:88](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L88)
 
 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:100](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L100)
+Defined in: [packages/mermaid/src/types.ts:84](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L84)
 
 The diagram type, e.g. 'flowchart', 'sequence', etc.

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

@@ -10,7 +10,7 @@
 
 # Interface: RenderOptions
 
-Defined in: [packages/mermaid/src/rendering-util/render.ts:10](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L10)
+Defined in: [packages/mermaid/src/rendering-util/render.ts:7](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L7)
 
 ## Properties
 
@@ -18,4 +18,4 @@ Defined in: [packages/mermaid/src/rendering-util/render.ts:10](https://github.co
 
 > `optional` **algorithm**: `string`
 
-Defined in: [packages/mermaid/src/rendering-util/render.ts:11](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L11)
+Defined in: [packages/mermaid/src/rendering-util/render.ts:8](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L8)

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

@@ -10,7 +10,7 @@
 
 # Interface: RenderResult
 
-Defined in: [packages/mermaid/src/types.ts:114](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L114)
+Defined in: [packages/mermaid/src/types.ts:98](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L98)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:114](https://github.com/mermaid-js/me
 
 > `optional` **bindFunctions**: (`element`) => `void`
 
-Defined in: [packages/mermaid/src/types.ts:132](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L132)
+Defined in: [packages/mermaid/src/types.ts:116](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L116)
 
 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:122](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L122)
+Defined in: [packages/mermaid/src/types.ts:106](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L106)
 
 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:118](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L118)
+Defined in: [packages/mermaid/src/types.ts:102](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L102)
 
 The svg code for the rendered graph.

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

@@ -1,65 +0,0 @@
-> **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: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:126](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L126)

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:130](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L130)
+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/tidy-tree.md

@@ -1,89 +0,0 @@
-> **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/syntax/entityRelationshipDiagram.md

@@ -135,6 +135,44 @@ erDiagram
     "This **is** _Markdown_"
 ```
 
+#### Optional Relationship Labels
+
+Starting from Mermaid version 11.11.0, the relationship label in ER diagrams is optional. You can define relationships without specifying a label, and the diagram will render correctly.
+
+For example, the following is valid:
+
+```mermaid-example
+erDiagram
+    BOOK }|..|{ AUTHOR
+    BOOK }|..|{ GENRE
+    AUTHOR }|..|{ GENRE
+```
+
+```mermaid
+erDiagram
+    BOOK }|..|{ AUTHOR
+    BOOK }|..|{ GENRE
+    AUTHOR }|..|{ GENRE
+```
+
+This will show the relationships between the entities without any labels on the connecting lines.
+
+You can still add a label if you want to describe the relationship:
+
+```mermaid-example
+erDiagram
+    BOOK }|..|{ AUTHOR : written_by
+    BOOK }|..|{ GENRE : categorized_as
+    AUTHOR }|..|{ GENRE : specializes_in
+```
+
+```mermaid
+erDiagram
+    BOOK }|..|{ AUTHOR : written_by
+    BOOK }|..|{ GENRE : categorized_as
+    AUTHOR }|..|{ GENRE : specializes_in
+```
+
 ### Relationship Syntax
 
 The `relationship` part of each statement can be broken down into three sub-components:

docs/syntax/flowchart.md

@@ -326,9 +326,7 @@ Below is a comprehensive list of the newly introduced shapes and their correspon
 
 | **Semantic Name**                 | **Shape Name**         | **Short Name** | **Description**                | **Alias Supported**                                              |
 | --------------------------------- | ---------------------- | -------------- | ------------------------------ | ---------------------------------------------------------------- |
-| Bang                              | Bang                   | `bang`         | Bang                           | `bang`                                                           |
 | Card                              | Notched Rectangle      | `notch-rect`   | Represents a card              | `card`, `notched-rectangle`                                      |
-| Cloud                             | Cloud                  | `cloud`        | cloud                          | `cloud`                                                          |
 | Collate                           | Hourglass              | `hourglass`    | Represents a collate operation | `collate`, `hourglass`                                           |
 | Com Link                          | Lightning Bolt         | `bolt`         | Communication link             | `com-link`, `lightning-bolt`                                     |
 | Comment                           | Curly Brace            | `brace`        | Adds a comment                 | `brace-l`, `comment`                                             |
@@ -985,23 +983,11 @@ 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 width (`w`) accordingly to the height (`h`). 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 height (`h`) accordingly to the width (`w`). If not defined, this will default to `off` Possible values are:
   - `on`
   - `off`
 
-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" }
-```
+These new shapes provide additional flexibility and visual appeal to your flowcharts, making them more informative and engaging.
 
 ## Links between nodes
 

docs/syntax/mindmap.md

@@ -314,22 +314,3 @@ 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/sequenceDiagram.md

@@ -74,126 +74,6 @@ 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/xyChart.md

@@ -138,7 +138,7 @@ xychart
 
 ## Chart Theme Variables
 
-Themes for xychart reside inside the `xychart` attribute, allowing customization through the following syntax:
+Themes for xychart resides inside xychart attribute so to set the variables use this syntax:
 
 ```yaml
 ---
@@ -163,52 +163,6 @@ 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

eslint.config.js

@@ -17,7 +17,6 @@ export default tseslint.config(
   ...tseslint.configs.stylisticTypeChecked,
   {
     ignores: [
-      '**/*.d.ts',
       '**/dist/',
       '**/node_modules/',
       '.git/',

packages/mermaid-layout-elk/README.md

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

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

@@ -1,67 +0,0 @@
-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/find-common-ancestor.d.ts

@@ -1,9 +0,0 @@
-export interface TreeData {
-  parentById: Record<string, string>;
-  childrenById: Record<string, string[]>;
-}
-export declare const findCommonAncestor: (
-  id1: string,
-  id2: string,
-  { parentById }: TreeData
-) => string;

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

@@ -1,209 +0,0 @@
-/* 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/tsconfig.json

@@ -5,6 +5,6 @@
     "outDir": "./dist",
     "types": ["vitest/importMeta", "vitest/globals"]
   },
-  "include": ["./src/**/*.ts", "./src/**/*.d.ts"],
+  "include": ["./src/**/*.ts"],
   "typeRoots": ["./src/types"]
 }

packages/mermaid-layout-tidy-tree/README.md

@@ -1,59 +0,0 @@
-# @mermaid-js/layout-tidy-tree
-
-This package provides a bidirectional tidy tree layout engine for Mermaid based on the non-layered-tidy-tree-layout algorithm.
-
-> [!NOTE]
-> The Tidy Tree Layout engine will not be available in all providers that support mermaid by default.
-> The websites will have to install the @mermaid-js/layout-tidy-tree package to use the Tidy Tree layout engine.
-
-## Usage
-
-```
----
-config:
-  layout: tidy-tree
----
-mindmap
-root((mindmap))
-  A
-  B
-```
-
-### With bundlers
-
-```sh
-npm install @mermaid-js/layout-tidy-tree
-```
-
-```ts
-import mermaid from 'mermaid';
-import tidyTreeLayouts from '@mermaid-js/layout-tidy-tree';
-
-mermaid.registerLayoutLoaders(tidyTreeLayouts);
-```
-
-### With CDN
-
-```html
-<script type="module">
-  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
-  import tidyTreeLayouts from 'https://cdn.jsdelivr.net/npm/@mermaid-js/layout-tidy-tree@0/dist/mermaid-layout-tidy-tree.esm.min.mjs';
-
-  mermaid.registerLayoutLoaders(tidyTreeLayouts);
-</script>
-```
-
-## Tidy Tree Layout Overview
-
-tidy-tree: The bidirectional tidy tree layout
-
-The bidirectional tidy tree layout algorithm creates two separate trees that grow horizontally in opposite directions from a central root node:
-Left tree: grows horizontally to the left (children alternate: 1st, 3rd, 5th...)
-Right tree: grows horizontally to the right (children alternate: 2nd, 4th, 6th...)
-
-This creates a balanced, symmetric layout that is ideal for mindmaps, organizational charts, and other tree-based diagrams.
-
-Layout Structure:
-[Child 3] ← [Child 1] ← [Root] → [Child 2] → [Child 4]
-↓ ↓ ↓ ↓
-[GrandChild] [GrandChild] [GrandChild] [GrandChild]

packages/mermaid-layout-tidy-tree/package.json

@@ -1,46 +0,0 @@
-{
-  "name": "@mermaid-js/layout-tidy-tree",
-  "version": "0.1.0",
-  "description": "Tidy-tree layout engine for mermaid",
-  "module": "dist/mermaid-layout-tidy-tree.core.mjs",
-  "types": "dist/layouts.d.ts",
-  "type": "module",
-  "exports": {
-    ".": {
-      "import": "./dist/mermaid-layout-tidy-tree.core.mjs",
-      "types": "./dist/layouts.d.ts"
-    },
-    "./": "./"
-  },
-  "keywords": [
-    "diagram",
-    "markdown",
-    "tidy-tree",
-    "mermaid",
-    "layout"
-  ],
-  "scripts": {},
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/mermaid-js/mermaid"
-  },
-  "contributors": [
-    "Knut Sveidqvist",
-    "Sidharth Vinod"
-  ],
-  "license": "MIT",
-  "dependencies": {
-    "d3": "^7.9.0",
-    "non-layered-tidy-tree-layout": "^2.0.2"
-  },
-  "devDependencies": {
-    "@types/d3": "^7.4.3",
-    "mermaid": "workspace:^"
-  },
-  "peerDependencies": {
-    "mermaid": "^11.0.2"
-  },
-  "files": [
-    "dist"
-  ]
-}

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

@@ -1,50 +0,0 @@
-/**
- * Bidirectional Tidy-Tree Layout Algorithm for Generic Diagrams
- *
- * This module provides a layout algorithm implementation using the
- * non-layered-tidy-tree-layout algorithm for positioning nodes and edges
- * in tree structures with a bidirectional approach.
- *
- * The algorithm creates two separate trees that grow horizontally in opposite
- * directions from a central root node:
- * - Left tree: grows horizontally to the left (children alternate: 1st, 3rd, 5th...)
- * - Right tree: grows horizontally to the right (children alternate: 2nd, 4th, 6th...)
- *
- * This creates a balanced, symmetric layout that is ideal for mindmaps,
- * organizational charts, and other tree-based diagrams.
- *
- * The algorithm follows the unified rendering pattern and can be used
- * by any diagram type that provides compatible LayoutData.
- */
-
-/**
- * Render function for the bidirectional tidy-tree layout algorithm
- *
- * This function follows the unified rendering pattern used by all layout algorithms.
- * It takes LayoutData, inserts nodes into DOM, runs the bidirectional tidy-tree layout algorithm,
- * and renders the positioned elements to the SVG.
- *
- * Features:
- * - Alternates root children between left and right trees
- * - Left tree grows horizontally to the left (rotated 90° counterclockwise)
- * - Right tree grows horizontally to the right (rotated 90° clockwise)
- * - Uses tidy-tree algorithm for optimal spacing within each tree
- * - Creates symmetric, balanced layouts
- * - Maintains proper edge connections between all nodes
- *
- * Layout Structure:
- * ```
- * [Child 3] ← [Child 1] ← [Root] → [Child 2] → [Child 4]
- *     ↓           ↓                     ↓           ↓
- * [GrandChild]  [GrandChild]      [GrandChild]  [GrandChild]
- * ```
- *
- * @param layoutData - Layout data containing nodes, edges, and configuration
- * @param svg - SVG element to render to
- * @param helpers - Internal helper functions for rendering
- * @param options - Rendering options
- */
-export { default } from './layouts.js';
-export * from './types.js';
-export * from './layout.js';
-export { render } from './render.js';

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

@@ -1,409 +0,0 @@
-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', () => ({
-  BoundingBox: vi.fn().mockImplementation(() => ({})),
-  Layout: vi.fn().mockImplementation(() => ({
-    layout: vi.fn().mockImplementation((treeData) => {
-      const result = { ...treeData };
-
-      if (result.id?.toString().startsWith('virtual-root')) {
-        result.x = 0;
-        result.y = 0;
-      } else {
-        result.x = 100;
-        result.y = 50;
-      }
-
-      if (result.children) {
-        result.children.forEach((child: any, index: number) => {
-          child.x = 50 + index * 100;
-          child.y = 100;
-
-          if (child.children) {
-            child.children.forEach((grandchild: any, gIndex: number) => {
-              grandchild.x = 25 + gIndex * 50;
-              grandchild.y = 200;
-            });
-          }
-        });
-      }
-
-      return {
-        result,
-        boundingBox: {
-          left: 0,
-          right: 200,
-          top: 0,
-          bottom: 250,
-        },
-      };
-    }),
-  })),
-}));
-
-describe('Tidy-Tree Layout Algorithm', () => {
-  let mockConfig: MermaidConfig;
-  let mockLayoutData: LayoutData;
-
-  beforeEach(() => {
-    mockConfig = {
-      theme: 'default',
-    } as MermaidConfig;
-
-    mockLayoutData = {
-      nodes: [
-        {
-          id: 'root',
-          label: 'Root',
-          isGroup: false,
-          shape: 'rect',
-          width: 100,
-          height: 50,
-          padding: 10,
-          x: 0,
-          y: 0,
-          cssClasses: '',
-          cssStyles: [],
-          look: 'default',
-        },
-        {
-          id: 'child1',
-          label: 'Child 1',
-          isGroup: false,
-          shape: 'rect',
-          width: 80,
-          height: 40,
-          padding: 10,
-          x: 0,
-          y: 0,
-          cssClasses: '',
-          cssStyles: [],
-          look: 'default',
-        },
-        {
-          id: 'child2',
-          label: 'Child 2',
-          isGroup: false,
-          shape: 'rect',
-          width: 80,
-          height: 40,
-          padding: 10,
-          x: 0,
-          y: 0,
-          cssClasses: '',
-          cssStyles: [],
-          look: 'default',
-        },
-        {
-          id: 'child3',
-          label: 'Child 3',
-          isGroup: false,
-          shape: 'rect',
-          width: 80,
-          height: 40,
-          padding: 10,
-          x: 0,
-          y: 0,
-          cssClasses: '',
-          cssStyles: [],
-          look: 'default',
-        },
-        {
-          id: 'child4',
-          label: 'Child 4',
-          isGroup: false,
-          shape: 'rect',
-          width: 80,
-          height: 40,
-          padding: 10,
-          x: 0,
-          y: 0,
-          cssClasses: '',
-          cssStyles: [],
-          look: 'default',
-        },
-      ],
-      edges: [
-        {
-          id: 'root_child1',
-          start: 'root',
-          end: 'child1',
-          type: 'edge',
-          classes: '',
-          style: [],
-          animate: false,
-          arrowTypeEnd: 'arrow_point',
-          arrowTypeStart: 'none',
-        },
-        {
-          id: 'root_child2',
-          start: 'root',
-          end: 'child2',
-          type: 'edge',
-          classes: '',
-          style: [],
-          animate: false,
-          arrowTypeEnd: 'arrow_point',
-          arrowTypeStart: 'none',
-        },
-        {
-          id: 'root_child3',
-          start: 'root',
-          end: 'child3',
-          type: 'edge',
-          classes: '',
-          style: [],
-          animate: false,
-          arrowTypeEnd: 'arrow_point',
-          arrowTypeStart: 'none',
-        },
-        {
-          id: 'root_child4',
-          start: 'root',
-          end: 'child4',
-          type: 'edge',
-          classes: '',
-          style: [],
-          animate: false,
-          arrowTypeEnd: 'arrow_point',
-          arrowTypeStart: 'none',
-        },
-      ],
-      config: mockConfig,
-      direction: 'TB',
-      type: 'test',
-      diagramId: 'test-diagram',
-      markers: [],
-    };
-  });
-
-  describe('validateLayoutData', () => {
-    it('should validate correct layout data', () => {
-      expect(() => validateLayoutData(mockLayoutData)).not.toThrow();
-    });
-
-    it('should throw error for missing data', () => {
-      expect(() => validateLayoutData(null as any)).toThrow('Layout data is required');
-    });
-
-    it('should throw error for missing config', () => {
-      const invalidData = { ...mockLayoutData, config: null as any };
-      expect(() => validateLayoutData(invalidData)).toThrow('Configuration is required');
-    });
-
-    it('should throw error for invalid nodes array', () => {
-      const invalidData = { ...mockLayoutData, nodes: null as any };
-      expect(() => validateLayoutData(invalidData)).toThrow('Nodes array is required');
-    });
-
-    it('should throw error for invalid edges array', () => {
-      const invalidData = { ...mockLayoutData, edges: null as any };
-      expect(() => validateLayoutData(invalidData)).toThrow('Edges array is required');
-    });
-  });
-
-  describe('executeTidyTreeLayout function', () => {
-    it('should execute layout algorithm successfully', async () => {
-      const result: LayoutResult = await executeTidyTreeLayout(mockLayoutData);
-
-      expect(result).toBeDefined();
-      expect(result.nodes).toBeDefined();
-      expect(result.edges).toBeDefined();
-      expect(Array.isArray(result.nodes)).toBe(true);
-      expect(Array.isArray(result.edges)).toBe(true);
-    });
-
-    it('should return positioned nodes with coordinates', async () => {
-      const result: LayoutResult = await executeTidyTreeLayout(mockLayoutData);
-
-      expect(result.nodes.length).toBeGreaterThan(0);
-      result.nodes.forEach((node) => {
-        expect(node.x).toBeDefined();
-        expect(node.y).toBeDefined();
-        expect(typeof node.x).toBe('number');
-        expect(typeof node.y).toBe('number');
-      });
-    });
-
-    it('should return positioned edges with coordinates', async () => {
-      const result: LayoutResult = await executeTidyTreeLayout(mockLayoutData);
-
-      expect(result.edges.length).toBeGreaterThan(0);
-      result.edges.forEach((edge) => {
-        expect(edge.startX).toBeDefined();
-        expect(edge.startY).toBeDefined();
-        expect(edge.midX).toBeDefined();
-        expect(edge.midY).toBeDefined();
-        expect(edge.endX).toBeDefined();
-        expect(edge.endY).toBeDefined();
-      });
-    });
-
-    it('should handle empty layout data gracefully', async () => {
-      const emptyData: LayoutData = {
-        ...mockLayoutData,
-        nodes: [],
-        edges: [],
-      };
-
-      await expect(executeTidyTreeLayout(emptyData)).rejects.toThrow(
-        'No nodes found in layout data'
-      );
-    });
-
-    it('should throw error for missing nodes', async () => {
-      const invalidData = { ...mockLayoutData, nodes: [] };
-
-      await expect(executeTidyTreeLayout(invalidData)).rejects.toThrow(
-        'No nodes found in layout data'
-      );
-    });
-
-    it('should handle empty edges (single node tree)', async () => {
-      const singleNodeData = {
-        ...mockLayoutData,
-        edges: [],
-        nodes: [mockLayoutData.nodes[0]],
-      };
-
-      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);
-
-      expect(result).toBeDefined();
-      expect(result.nodes).toHaveLength(5);
-
-      const rootNode = result.nodes.find((node) => node.id === 'root');
-      expect(rootNode).toBeDefined();
-      expect(rootNode!.x).toBe(0);
-      expect(rootNode!.y).toBe(20);
-
-      const child1 = result.nodes.find((node) => node.id === 'child1');
-      const child2 = result.nodes.find((node) => node.id === 'child2');
-      const child3 = result.nodes.find((node) => node.id === 'child3');
-      const child4 = result.nodes.find((node) => node.id === 'child4');
-
-      expect(child1).toBeDefined();
-      expect(child2).toBeDefined();
-      expect(child3).toBeDefined();
-      expect(child4).toBeDefined();
-
-      expect(child1!.x).toBeLessThan(rootNode!.x);
-      expect(child2!.x).toBeGreaterThan(rootNode!.x);
-      expect(child3!.x).toBeLessThan(rootNode!.x);
-      expect(child4!.x).toBeGreaterThan(rootNode!.x);
-
-      expect(child1!.x).toBeLessThan(-100);
-      expect(child3!.x).toBeLessThan(-100);
-
-      expect(child2!.x).toBeGreaterThan(100);
-      expect(child4!.x).toBeGreaterThan(100);
-    });
-
-    it('should correctly transpose coordinates to prevent high nodes from covering nodes above them', async () => {
-      const testData = {
-        ...mockLayoutData,
-        nodes: [
-          {
-            id: 'root',
-            label: 'Root',
-            isGroup: false,
-            shape: 'rect' as const,
-            width: 100,
-            height: 50,
-            padding: 10,
-            x: 0,
-            y: 0,
-            cssClasses: '',
-            cssStyles: [],
-            look: 'default',
-          },
-          {
-            id: 'tall-child',
-            label: 'Tall Child',
-            isGroup: false,
-            shape: 'rect' as const,
-            width: 80,
-            height: 120,
-            padding: 10,
-            x: 0,
-            y: 0,
-            cssClasses: '',
-            cssStyles: [],
-            look: 'default',
-          },
-          {
-            id: 'short-child',
-            label: 'Short Child',
-            isGroup: false,
-            shape: 'rect' as const,
-            width: 80,
-            height: 30,
-            padding: 10,
-            x: 0,
-            y: 0,
-            cssClasses: '',
-            cssStyles: [],
-            look: 'default',
-          },
-        ],
-        edges: [
-          {
-            id: 'root_tall',
-            start: 'root',
-            end: 'tall-child',
-            type: 'edge',
-            classes: '',
-            style: [],
-            animate: false,
-            arrowTypeEnd: 'arrow_point',
-            arrowTypeStart: 'none',
-          },
-          {
-            id: 'root_short',
-            start: 'root',
-            end: 'short-child',
-            type: 'edge',
-            classes: '',
-            style: [],
-            animate: false,
-            arrowTypeEnd: 'arrow_point',
-            arrowTypeStart: 'none',
-          },
-        ],
-      };
-
-      const result = await executeTidyTreeLayout(testData);
-
-      expect(result).toBeDefined();
-      expect(result.nodes).toHaveLength(3);
-
-      const rootNode = result.nodes.find((node) => node.id === 'root');
-      const tallChild = result.nodes.find((node) => node.id === 'tall-child');
-      const shortChild = result.nodes.find((node) => node.id === 'short-child');
-
-      expect(rootNode).toBeDefined();
-      expect(tallChild).toBeDefined();
-      expect(shortChild).toBeDefined();
-
-      expect(tallChild!.x).not.toBe(shortChild!.x);
-
-      expect(tallChild!.width).toBe(80);
-      expect(tallChild!.height).toBe(120);
-      expect(shortChild!.width).toBe(80);
-      expect(shortChild!.height).toBe(30);
-
-      const yDifference = Math.abs(tallChild!.y - shortChild!.y);
-      expect(yDifference).toBeGreaterThanOrEqual(0);
-    });
-  });
-});

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

@@ -1,629 +0,0 @@
-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 {
-  Edge,
-  LayoutResult,
-  Node,
-  PositionedEdge,
-  PositionedNode,
-  TidyTreeNode,
-} from './types.js';
-
-/**
- * Execute the tidy-tree layout algorithm on generic layout data
- *
- * This function takes layout data and uses the non-layered-tidy-tree-layout
- * algorithm to calculate optimal node positions for tree structures.
- *
- * @param data - The layout data containing nodes, edges, and configuration
- * @param config - Mermaid configuration object
- * @returns Promise resolving to layout result with positioned nodes and edges
- */
-export function executeTidyTreeLayout(data: LayoutData): Promise<LayoutResult> {
-  let intersectionShift = 50;
-
-  return new Promise((resolve, reject) => {
-    try {
-      if (!data.nodes || !Array.isArray(data.nodes) || data.nodes.length === 0) {
-        throw new Error('No nodes found in layout data');
-      }
-
-      if (!data.edges || !Array.isArray(data.edges)) {
-        data.edges = [];
-      }
-
-      const { leftTree, rightTree, rootNode } = convertToDualTreeFormat(data);
-
-      const gap = 20;
-      const bottomPadding = 40;
-      intersectionShift = 30;
-
-      const bb = new BoundingBox(gap, bottomPadding);
-      const layout = new Layout(bb);
-
-      let leftResult = null;
-      let rightResult = null;
-
-      if (leftTree) {
-        const leftLayoutResult = layout.layout(leftTree);
-        leftResult = leftLayoutResult.result;
-      }
-
-      if (rightTree) {
-        const rightLayoutResult = layout.layout(rightTree);
-        rightResult = rightLayoutResult.result;
-      }
-
-      const positionedNodes = combineAndPositionTrees(rootNode, leftResult, rightResult);
-      const positionedEdges = calculateEdgePositions(
-        data.edges,
-        positionedNodes,
-        intersectionShift
-      );
-      resolve({
-        nodes: positionedNodes,
-        edges: positionedEdges,
-      });
-    } catch (error) {
-      reject(error);
-    }
-  });
-}
-
-/**
- * Convert LayoutData to dual-tree format (left and right trees)
- *
- * This function builds two separate tree structures from the nodes and edges,
- * alternating children between left and right trees.
- */
-function convertToDualTreeFormat(data: LayoutData): {
-  leftTree: TidyTreeNode | null;
-  rightTree: TidyTreeNode | null;
-  rootNode: TidyTreeNode;
-} {
-  const { nodes, edges } = data;
-
-  const nodeMap = new Map<string, Node>();
-  nodes.forEach((node) => nodeMap.set(node.id, node));
-
-  const children = new Map<string, string[]>();
-  const parents = new Map<string, string>();
-
-  edges.forEach((edge) => {
-    const parentId = edge.start;
-    const childId = edge.end;
-
-    if (parentId && childId) {
-      if (!children.has(parentId)) {
-        children.set(parentId, []);
-      }
-      children.get(parentId)!.push(childId);
-      parents.set(childId, parentId);
-    }
-  });
-
-  const rootNodeData = nodes.find((node) => !parents.has(node.id));
-  if (!rootNodeData && nodes.length === 0) {
-    throw new Error('No nodes available to create tree');
-  }
-
-  const actualRoot = rootNodeData ?? nodes[0];
-
-  const rootNode: TidyTreeNode = {
-    id: actualRoot.id,
-    width: actualRoot.width ?? 100,
-    height: actualRoot.height ?? 50,
-    _originalNode: actualRoot,
-  };
-
-  const rootChildren = children.get(actualRoot.id) ?? [];
-  const leftChildren: string[] = [];
-  const rightChildren: string[] = [];
-
-  rootChildren.forEach((childId, index) => {
-    if (index % 2 === 0) {
-      leftChildren.push(childId);
-    } else {
-      rightChildren.push(childId);
-    }
-  });
-
-  const leftTree = leftChildren.length > 0 ? buildSubTree(leftChildren, children, nodeMap) : null;
-
-  const rightTree =
-    rightChildren.length > 0 ? buildSubTree(rightChildren, children, nodeMap) : null;
-
-  return { leftTree, rightTree, rootNode };
-}
-
-/**
- * Build a subtree from a list of root children
- * For horizontal trees, we need to transpose width/height since the tree will be rotated 90°
- */
-function buildSubTree(
-  rootChildren: string[],
-  children: Map<string, string[]>,
-  nodeMap: Map<string, Node>
-): TidyTreeNode {
-  const virtualRoot: TidyTreeNode = {
-    id: `virtual-root-${Math.random()}`,
-    width: 1,
-    height: 1,
-    children: rootChildren
-      .map((childId) => nodeMap.get(childId))
-      .filter((child): child is Node => child !== undefined)
-      .map((child) => convertNodeToTidyTreeTransposed(child, children, nodeMap)),
-  };
-
-  return virtualRoot;
-}
-
-/**
- * Recursively convert a node and its children to tidy-tree format
- * This version transposes width/height for horizontal tree layout
- */
-function convertNodeToTidyTreeTransposed(
-  node: Node,
-  children: Map<string, string[]>,
-  nodeMap: Map<string, Node>
-): TidyTreeNode {
-  const childIds = children.get(node.id) ?? [];
-  const childNodes = childIds
-    .map((childId) => nodeMap.get(childId))
-    .filter((child): child is Node => child !== undefined)
-    .map((child) => convertNodeToTidyTreeTransposed(child, children, nodeMap));
-
-  return {
-    id: node.id,
-    width: node.height ?? 50,
-    height: node.width ?? 100,
-    children: childNodes.length > 0 ? childNodes : undefined,
-    _originalNode: node,
-  };
-}
-/**
- * Combine and position the left and right trees around the root node
- * Creates a bidirectional layout where left tree grows left and right tree grows right
- */
-function combineAndPositionTrees(
-  rootNode: TidyTreeNode,
-  leftResult: TidyTreeNode | null,
-  rightResult: TidyTreeNode | null
-): PositionedNode[] {
-  const positionedNodes: PositionedNode[] = [];
-
-  const rootX = 0;
-  const rootY = 0;
-
-  const treeSpacing = rootNode.width / 2 + 30;
-  const leftTreeNodes: PositionedNode[] = [];
-  const rightTreeNodes: PositionedNode[] = [];
-
-  if (leftResult?.children) {
-    positionLeftTreeBidirectional(leftResult.children, leftTreeNodes, rootX - treeSpacing, rootY);
-  }
-
-  if (rightResult?.children) {
-    positionRightTreeBidirectional(
-      rightResult.children,
-      rightTreeNodes,
-      rootX + treeSpacing,
-      rootY
-    );
-  }
-
-  let leftTreeCenterY = 0;
-  let rightTreeCenterY = 0;
-
-  if (leftTreeNodes.length > 0) {
-    const leftTreeXPositions = [...new Set(leftTreeNodes.map((node) => node.x))].sort(
-      (a, b) => b - a
-    );
-    const firstLevelLeftX = leftTreeXPositions[0];
-    const firstLevelLeftNodes = leftTreeNodes.filter((node) => node.x === firstLevelLeftX);
-
-    if (firstLevelLeftNodes.length > 0) {
-      const leftMinY = Math.min(
-        ...firstLevelLeftNodes.map((node) => node.y - (node.height ?? 50) / 2)
-      );
-      const leftMaxY = Math.max(
-        ...firstLevelLeftNodes.map((node) => node.y + (node.height ?? 50) / 2)
-      );
-      leftTreeCenterY = (leftMinY + leftMaxY) / 2;
-    }
-  }
-
-  if (rightTreeNodes.length > 0) {
-    const rightTreeXPositions = [...new Set(rightTreeNodes.map((node) => node.x))].sort(
-      (a, b) => a - b
-    );
-    const firstLevelRightX = rightTreeXPositions[0];
-    const firstLevelRightNodes = rightTreeNodes.filter((node) => node.x === firstLevelRightX);
-
-    if (firstLevelRightNodes.length > 0) {
-      const rightMinY = Math.min(
-        ...firstLevelRightNodes.map((node) => node.y - (node.height ?? 50) / 2)
-      );
-      const rightMaxY = Math.max(
-        ...firstLevelRightNodes.map((node) => node.y + (node.height ?? 50) / 2)
-      );
-      rightTreeCenterY = (rightMinY + rightMaxY) / 2;
-    }
-  }
-
-  const leftTreeOffset = -leftTreeCenterY;
-  const rightTreeOffset = -rightTreeCenterY;
-
-  positionedNodes.push({
-    id: String(rootNode.id),
-    x: rootX,
-    y: rootY + 20,
-    section: 'root',
-    width: rootNode._originalNode?.width ?? rootNode.width,
-    height: rootNode._originalNode?.height ?? rootNode.height,
-    originalNode: rootNode._originalNode,
-  });
-
-  const leftTreeNodesWithOffset = leftTreeNodes.map((node) => ({
-    id: node.id,
-    x: node.x - (node.width ?? 0) / 2,
-    y: node.y + leftTreeOffset + (node.height ?? 0) / 2,
-    section: 'left' as const,
-    width: node.width,
-    height: node.height,
-    originalNode: node.originalNode,
-  }));
-
-  const rightTreeNodesWithOffset = rightTreeNodes.map((node) => ({
-    id: node.id,
-    x: node.x + (node.width ?? 0) / 2,
-    y: node.y + rightTreeOffset + (node.height ?? 0) / 2,
-    section: 'right' as const,
-    width: node.width,
-    height: node.height,
-    originalNode: node.originalNode,
-  }));
-
-  positionedNodes.push(...leftTreeNodesWithOffset);
-  positionedNodes.push(...rightTreeNodesWithOffset);
-
-  return positionedNodes;
-}
-
-/**
- * Position nodes from the left tree in a bidirectional layout (grows to the left)
- * Rotates the tree 90 degrees counterclockwise so it grows horizontally to the left
- */
-function positionLeftTreeBidirectional(
-  nodes: TidyTreeNode[],
-  positionedNodes: PositionedNode[],
-  offsetX: number,
-  offsetY: number
-): void {
-  nodes.forEach((node) => {
-    const distanceFromRoot = node.y ?? 0;
-    const verticalPosition = node.x ?? 0;
-
-    const originalWidth = node._originalNode?.width ?? 100;
-    const originalHeight = node._originalNode?.height ?? 50;
-
-    const adjustedY = offsetY + verticalPosition;
-
-    positionedNodes.push({
-      id: String(node.id),
-      x: offsetX - distanceFromRoot,
-      y: adjustedY,
-      width: originalWidth,
-      height: originalHeight,
-      originalNode: node._originalNode,
-    });
-
-    if (node.children) {
-      positionLeftTreeBidirectional(node.children, positionedNodes, offsetX, offsetY);
-    }
-  });
-}
-
-/**
- * Position nodes from the right tree in a bidirectional layout (grows to the right)
- * Rotates the tree 90 degrees clockwise so it grows horizontally to the right
- */
-function positionRightTreeBidirectional(
-  nodes: TidyTreeNode[],
-  positionedNodes: PositionedNode[],
-  offsetX: number,
-  offsetY: number
-): void {
-  nodes.forEach((node) => {
-    const distanceFromRoot = node.y ?? 0;
-    const verticalPosition = node.x ?? 0;
-
-    const originalWidth = node._originalNode?.width ?? 100;
-    const originalHeight = node._originalNode?.height ?? 50;
-
-    const adjustedY = offsetY + verticalPosition;
-
-    positionedNodes.push({
-      id: String(node.id),
-      x: offsetX + distanceFromRoot,
-      y: adjustedY,
-      width: originalWidth,
-      height: originalHeight,
-      originalNode: node._originalNode,
-    });
-
-    if (node.children) {
-      positionRightTreeBidirectional(node.children, positionedNodes, offsetX, offsetY);
-    }
-  });
-}
-
-/**
- * Calculate the intersection point of a line with a circle
- * @param circle - Circle coordinates and radius
- * @param lineStart - Starting point of the line
- * @param lineEnd - Ending point of the line
- * @returns The intersection point
- */
-function computeCircleEdgeIntersection(circle: Bounds, lineStart: Point, lineEnd: Point): Point {
-  const radius = Math.min(circle.width, circle.height) / 2;
-
-  const dx = lineEnd.x - lineStart.x;
-  const dy = lineEnd.y - lineStart.y;
-  const length = Math.sqrt(dx * dx + dy * dy);
-
-  if (length === 0) {
-    return lineStart;
-  }
-
-  const nx = dx / length;
-  const ny = dy / length;
-
-  return {
-    x: circle.x - nx * radius,
-    y: circle.y - ny * radius,
-  };
-}
-
-function intersection(node: PositionedNode, outsidePoint: Point, insidePoint: Point): Point {
-  const x = node.x;
-  const y = node.y;
-
-  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 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;
-    }
-
-    return res;
-  } else {
-    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;
-
-    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 };
-  }
-}
-
-/**
- * Calculate edge positions based on positioned nodes
- * Now includes tree membership and node dimensions for precise edge calculations
- * Edges now stop at shape boundaries instead of extending to centers
- */
-function calculateEdgePositions(
-  edges: Edge[],
-  positionedNodes: PositionedNode[],
-  intersectionShift: number
-): PositionedEdge[] {
-  const nodeInfo = new Map<string, PositionedNode>();
-  positionedNodes.forEach((node) => {
-    nodeInfo.set(node.id, node);
-  });
-
-  return edges.map((edge) => {
-    const sourceNode = nodeInfo.get(edge.start ?? '');
-    const targetNode = nodeInfo.get(edge.end ?? '');
-
-    if (!sourceNode || !targetNode) {
-      return {
-        id: edge.id,
-        source: edge.start ?? '',
-        target: edge.end ?? '',
-        startX: 0,
-        startY: 0,
-        midX: 0,
-        midY: 0,
-        endX: 0,
-        endY: 0,
-        points: [{ x: 0, y: 0 }],
-        sourceSection: undefined,
-        targetSection: undefined,
-        sourceWidth: undefined,
-        sourceHeight: undefined,
-        targetWidth: undefined,
-        targetHeight: undefined,
-      };
-    }
-
-    const sourceCenter = { x: sourceNode.x, y: sourceNode.y };
-    const targetCenter = { x: targetNode.x, y: targetNode.y };
-
-    const isSourceRound = ['circle', 'cloud', 'bang'].includes(
-      sourceNode.originalNode?.shape ?? ''
-    );
-    const isTargetRound = ['circle', 'cloud', 'bang'].includes(
-      targetNode.originalNode?.shape ?? ''
-    );
-
-    let startPos = isSourceRound
-      ? computeCircleEdgeIntersection(
-          {
-            x: sourceNode.x,
-            y: sourceNode.y,
-            width: sourceNode.width ?? 100,
-            height: sourceNode.height ?? 100,
-          },
-          targetCenter,
-          sourceCenter
-        )
-      : intersection(sourceNode, sourceCenter, targetCenter);
-
-    let endPos = isTargetRound
-      ? computeCircleEdgeIntersection(
-          {
-            x: targetNode.x,
-            y: targetNode.y,
-            width: targetNode.width ?? 100,
-            height: targetNode.height ?? 100,
-          },
-          sourceCenter,
-          targetCenter
-        )
-      : intersection(targetNode, targetCenter, sourceCenter);
-
-    const midX = (startPos.x + endPos.x) / 2;
-    const midY = (startPos.y + endPos.y) / 2;
-
-    const points = [startPos];
-    if (sourceNode.section === 'left') {
-      points.push({
-        x: sourceNode.x - (sourceNode.width ?? 0) / 2 - intersectionShift,
-        y: sourceNode.y,
-      });
-    } else if (sourceNode.section === 'right') {
-      points.push({
-        x: sourceNode.x + (sourceNode.width ?? 0) / 2 + intersectionShift,
-        y: sourceNode.y,
-      });
-    }
-    if (targetNode.section === 'left') {
-      points.push({
-        x: targetNode.x + (targetNode.width ?? 0) / 2 + intersectionShift,
-        y: targetNode.y,
-      });
-    } else if (targetNode.section === 'right') {
-      points.push({
-        x: targetNode.x - (targetNode.width ?? 0) / 2 - intersectionShift,
-        y: targetNode.y,
-      });
-    }
-
-    points.push(endPos);
-
-    const secondPoint = points.length > 1 ? points[1] : targetCenter;
-    startPos = isSourceRound
-      ? computeCircleEdgeIntersection(
-          {
-            x: sourceNode.x,
-            y: sourceNode.y,
-            width: sourceNode.width ?? 100,
-            height: sourceNode.height ?? 100,
-          },
-          secondPoint,
-          sourceCenter
-        )
-      : intersection(sourceNode, secondPoint, sourceCenter);
-    points[0] = startPos;
-
-    const secondLastPoint = points.length > 1 ? points[points.length - 2] : sourceCenter;
-    endPos = isTargetRound
-      ? computeCircleEdgeIntersection(
-          {
-            x: targetNode.x,
-            y: targetNode.y,
-            width: targetNode.width ?? 100,
-            height: targetNode.height ?? 100,
-          },
-          secondLastPoint,
-          targetCenter
-        )
-      : intersection(targetNode, secondLastPoint, targetCenter);
-    points[points.length - 1] = endPos;
-
-    return {
-      id: edge.id,
-      source: edge.start ?? '',
-      target: edge.end ?? '',
-      startX: startPos.x,
-      startY: startPos.y,
-      midX,
-      midY,
-      endX: endPos.x,
-      endY: endPos.y,
-      points,
-      sourceSection: sourceNode?.section,
-      targetSection: targetNode?.section,
-      sourceWidth: sourceNode?.width,
-      sourceHeight: sourceNode?.height,
-      targetWidth: targetNode?.width,
-      targetHeight: targetNode?.height,
-    };
-  });
-}
-
-/**
- * Validate layout data structure
- * @param data - The data to validate
- * @returns True if data is valid, throws error otherwise
- */
-export function validateLayoutData(data: LayoutData): boolean {
-  if (!data) {
-    throw new Error('Layout data is required');
-  }
-
-  if (!data.config) {
-    throw new Error('Configuration is required in layout data');
-  }
-
-  if (!Array.isArray(data.nodes)) {
-    throw new Error('Nodes array is required in layout data');
-  }
-
-  if (!Array.isArray(data.edges)) {
-    throw new Error('Edges array is required in layout data');
-  }
-
-  return true;
-}

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

@@ -1,13 +0,0 @@
-import type { LayoutLoaderDefinition } from 'mermaid';
-
-const loader = async () => await import(`./render.js`);
-
-const tidyTreeLayout: LayoutLoaderDefinition[] = [
-  {
-    name: 'tidy-tree',
-    loader,
-    algorithm: 'tidy-tree',
-  },
-];
-
-export default tidyTreeLayout;

packages/mermaid-layout-tidy-tree/src/non-layered-tidy-tree-layout.d.ts

@@ -1,18 +0,0 @@
-declare module 'non-layered-tidy-tree-layout' {
-  export class BoundingBox {
-    constructor(gap: number, bottomPadding: number);
-  }
-
-  export class Layout {
-    constructor(boundingBox: BoundingBox);
-    layout(data: any): {
-      result: any;
-      boundingBox: {
-        left: number;
-        right: number;
-        top: number;
-        bottom: number;
-      };
-    };
-  }
-}

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

@@ -1,180 +0,0 @@
-import type { InternalHelpers, LayoutData, RenderOptions, SVG } from 'mermaid';
-import { executeTidyTreeLayout } from './layout.js';
-
-interface NodeWithPosition {
-  id: string;
-  x?: number;
-  y?: number;
-  width?: number;
-  height?: number;
-  domId?: any;
-  [key: string]: any;
-}
-
-/**
- * Render function for bidirectional tidy-tree layout algorithm
- *
- * This follows the same pattern as ELK and dagre renderers:
- * 1. Insert nodes into DOM to get their actual dimensions
- * 2. Run the bidirectional tidy-tree layout algorithm to calculate positions
- * 3. Position the nodes and edges based on layout results
- *
- * The bidirectional layout creates two trees that grow horizontally in opposite
- * directions from a central root node:
- * - Left tree: grows horizontally to the left (children: 1st, 3rd, 5th...)
- * - Right tree: grows horizontally to the right (children: 2nd, 4th, 6th...)
- */
-export const render = async (
-  data4Layout: LayoutData,
-  svg: SVG,
-  {
-    insertCluster,
-    insertEdge,
-    insertEdgeLabel,
-    insertMarkers,
-    insertNode,
-    log,
-    positionEdgeLabel,
-  }: InternalHelpers,
-  { algorithm: _algorithm }: RenderOptions
-) => {
-  const nodeDb: Record<string, NodeWithPosition> = {};
-  const clusterDb: Record<string, any> = {};
-
-  const element = svg.select('g');
-  insertMarkers(element, data4Layout.markers, data4Layout.type, data4Layout.diagramId);
-
-  const subGraphsEl = element.insert('g').attr('class', 'subgraphs');
-  const edgePaths = element.insert('g').attr('class', 'edgePaths');
-  const edgeLabels = element.insert('g').attr('class', 'edgeLabels');
-  const nodes = element.insert('g').attr('class', 'nodes');
-  // Step 1: Insert nodes into DOM to get their actual dimensions
-  log.debug('Inserting nodes into DOM for dimension calculation');
-
-  await Promise.all(
-    data4Layout.nodes.map(async (node) => {
-      if (node.isGroup) {
-        const clusterNode: NodeWithPosition = {
-          ...node,
-          id: node.id,
-          width: node.width,
-          height: node.height,
-        };
-        clusterDb[node.id] = clusterNode;
-        nodeDb[node.id] = clusterNode;
-
-        await insertCluster(subGraphsEl, node);
-      } else {
-        const nodeWithPosition: NodeWithPosition = {
-          ...node,
-          id: node.id,
-          width: node.width,
-          height: node.height,
-        };
-        nodeDb[node.id] = nodeWithPosition;
-
-        const nodeEl = await insertNode(nodes, node, {
-          config: data4Layout.config,
-          dir: data4Layout.direction || 'TB',
-        });
-
-        const boundingBox = nodeEl.node()!.getBBox();
-        nodeWithPosition.width = boundingBox.width;
-        nodeWithPosition.height = boundingBox.height;
-        nodeWithPosition.domId = nodeEl;
-
-        log.debug(`Node ${node.id} dimensions: ${boundingBox.width}x${boundingBox.height}`);
-      }
-    })
-  );
-  // Step 2: Run the bidirectional tidy-tree layout algorithm
-  log.debug('Running bidirectional tidy-tree layout algorithm');
-
-  const updatedLayoutData = {
-    ...data4Layout,
-    nodes: data4Layout.nodes.map((node) => {
-      const nodeWithDimensions = nodeDb[node.id];
-      return {
-        ...node,
-        width: nodeWithDimensions.width ?? node.width ?? 100,
-        height: nodeWithDimensions.height ?? node.height ?? 50,
-      };
-    }),
-  };
-
-  const layoutResult = await executeTidyTreeLayout(updatedLayoutData);
-  // Step 3: Position the nodes based on bidirectional layout results
-  log.debug('Positioning nodes based on bidirectional layout results');
-
-  layoutResult.nodes.forEach((positionedNode) => {
-    const node = nodeDb[positionedNode.id];
-    if (node?.domId) {
-      // Position the node at the calculated coordinates from bidirectional layout
-      // The layout algorithm has already calculated positions for:
-      // - Root node at center (0, 0)
-      // - Left tree nodes with negative x coordinates (growing left)
-      // - Right tree nodes with positive x coordinates (growing right)
-      node.domId.attr('transform', `translate(${positionedNode.x}, ${positionedNode.y})`);
-      // Store the final position
-      node.x = positionedNode.x;
-      node.y = positionedNode.y;
-      // Step 3: Position the nodes based on bidirectional layout results
-      log.debug(`Positioned node ${node.id} at (${positionedNode.x}, ${positionedNode.y})`);
-    }
-  });
-
-  log.debug('Inserting and positioning edges');
-
-  await Promise.all(
-    data4Layout.edges.map(async (edge) => {
-      await insertEdgeLabel(edgeLabels, edge);
-
-      const startNode = nodeDb[edge.start ?? ''];
-      const endNode = nodeDb[edge.end ?? ''];
-
-      if (startNode && endNode) {
-        const positionedEdge = layoutResult.edges.find((e) => e.id === edge.id);
-
-        if (positionedEdge) {
-          log.debug('APA01 positionedEdge', positionedEdge);
-          const edgeWithPath = {
-            ...edge,
-            points: positionedEdge.points,
-          };
-          const paths = insertEdge(
-            edgePaths,
-            edgeWithPath,
-            clusterDb,
-            data4Layout.type,
-            startNode,
-            endNode,
-            data4Layout.diagramId
-          );
-
-          positionEdgeLabel(edgeWithPath, paths);
-        } else {
-          const edgeWithPath = {
-            ...edge,
-            points: [
-              { x: startNode.x ?? 0, y: startNode.y ?? 0 },
-              { x: endNode.x ?? 0, y: endNode.y ?? 0 },
-            ],
-          };
-
-          const paths = insertEdge(
-            edgePaths,
-            edgeWithPath,
-            clusterDb,
-            data4Layout.type,
-            startNode,
-            endNode,
-            data4Layout.diagramId
-          );
-          positionEdgeLabel(edgeWithPath, paths);
-        }
-      }
-    })
-  );
-
-  log.debug('Bidirectional tidy-tree rendering completed');
-};

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

@@ -1,69 +0,0 @@
-import type { LayoutData } from 'mermaid';
-
-export type Node = LayoutData['nodes'][number];
-export type Edge = LayoutData['edges'][number];
-
-/**
- * Positioned node after layout calculation
- */
-export interface PositionedNode {
-  id: string;
-  x: number;
-  y: number;
-  section?: 'root' | 'left' | 'right';
-  width?: number;
-  height?: number;
-  originalNode?: Node;
-  [key: string]: unknown;
-}
-
-/**
- * Positioned edge after layout calculation
- */
-export interface PositionedEdge {
-  id: string;
-  source: string;
-  target: string;
-  startX: number;
-  startY: number;
-  midX: number;
-  midY: number;
-  endX: number;
-  endY: number;
-  sourceSection?: 'root' | 'left' | 'right';
-  targetSection?: 'root' | 'left' | 'right';
-  sourceWidth?: number;
-  sourceHeight?: number;
-  targetWidth?: number;
-  targetHeight?: number;
-  [key: string]: unknown;
-}
-
-/**
- * Result of layout algorithm execution
- */
-export interface LayoutResult {
-  nodes: PositionedNode[];
-  edges: PositionedEdge[];
-}
-
-/**
- * Tidy-tree node structure compatible with non-layered-tidy-tree-layout
- */
-export interface TidyTreeNode {
-  id: string | number;
-  width: number;
-  height: number;
-  x?: number;
-  y?: number;
-  children?: TidyTreeNode[];
-  _originalNode?: Node;
-}
-
-/**
- * Tidy-tree layout configuration
- */
-export interface TidyTreeLayoutConfig {
-  gap: number;
-  bottomPadding: number;
-}

packages/mermaid-layout-tidy-tree/tsconfig.json

@@ -1,10 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "rootDir": "./src",
-    "outDir": "./dist",
-    "types": ["vitest/importMeta", "vitest/globals"]
-  },
-  "include": ["./src/**/*.ts", "./src/**/*.d.ts"],
-  "typeRoots": ["./src/types"]
-}

packages/mermaid/CHANGELOG.md

@@ -229,6 +229,7 @@
 - [#5999](https://github.com/mermaid-js/mermaid/pull/5999) [`742ad7c`](https://github.com/mermaid-js/mermaid/commit/742ad7c130964df1fb5544e909d9556081285f68) Thanks [@knsv](https://github.com/knsv)! - Adding Kanban board, a new diagram type
 
 - [#5880](https://github.com/mermaid-js/mermaid/pull/5880) [`bdf145f`](https://github.com/mermaid-js/mermaid/commit/bdf145ffe362462176d9c1e68d5f3ff5c9d962b0) Thanks [@yari-dewalt](https://github.com/yari-dewalt)! - Class diagram changes:
+
   - Updates the class diagram to the new unified way of rendering.
   - Includes a new "classBox" shape to be used in diagrams
   - Other updates such as:

packages/mermaid/package.json

@@ -48,10 +48,6 @@
     "types:build-config": "tsx scripts/create-types-from-json-schema.mts",
     "types:verify-config": "tsx scripts/create-types-from-json-schema.mts --verify",
     "checkCircle": "npx madge --circular ./src",
-    "antlr:sequence:clean": "rimraf src/diagrams/sequence/parser/antlr/generated",
-    "antlr:sequence": "pnpm run antlr:sequence:clean && antlr4ng -Dlanguage=TypeScript -Xexact-output-dir -o src/diagrams/sequence/parser/antlr/generated src/diagrams/sequence/parser/antlr/SequenceLexer.g4 src/diagrams/sequence/parser/antlr/SequenceParser.g4",
-    "antlr:class:clean": "rimraf src/diagrams/class/parser/antlr/generated",
-    "antlr:class": "pnpm run antlr:class:clean && antlr4ng -Dlanguage=TypeScript -Xexact-output-dir -o src/diagrams/class/parser/antlr/generated src/diagrams/class/parser/antlr/ClassLexer.g4 src/diagrams/class/parser/antlr/ClassParser.g4",
     "prepublishOnly": "pnpm docs:verify-version"
   },
   "repository": {
@@ -72,11 +68,9 @@
   },
   "dependencies": {
     "@braintree/sanitize-url": "^7.0.4",
-    "@iconify/utils": "^3.0.1",
+    "@iconify/utils": "^2.1.33",
     "@mermaid-js/parser": "workspace:^",
     "@types/d3": "^7.4.3",
-    "antlr-ng": "^1.0.10",
-    "antlr4ng": "^3.0.16",
     "cytoscape": "^3.29.3",
     "cytoscape-cose-bilkent": "^4.1.0",
     "cytoscape-fcose": "^2.2.0",
@@ -129,14 +123,13 @@
     "rimraf": "^6.0.1",
     "start-server-and-test": "^2.0.10",
     "type-fest": "^4.35.0",
-    "typedoc": "^0.28.9",
-    "typedoc-plugin-markdown": "^4.8.0",
+    "typedoc": "^0.27.8",
+    "typedoc-plugin-markdown": "^4.4.2",
     "typescript": "~5.7.3",
     "unist-util-flatmap": "^1.0.0",
     "unist-util-visit": "^5.0.0",
     "vitepress": "^1.0.2",
-    "vitepress-plugin-search": "1.0.4-alpha.22",
-    "antlr4ng-cli": "^2.0.0"
+    "vitepress-plugin-search": "1.0.4-alpha.22"
   },
   "files": [
     "dist/",

packages/mermaid/scripts/docs.spec.ts

@@ -171,9 +171,7 @@ This Markdown should be kept.
       expect(buildShapeDoc()).toMatchInlineSnapshot(`
         "| **Semantic Name**                 | **Shape Name**         | **Short Name** | **Description**                | **Alias Supported**                                              |
         | --------------------------------- | ---------------------- | -------------- | ------------------------------ | ---------------------------------------------------------------- |
-        | Bang                              | Bang                   | \`bang\`         | Bang                           | \`bang\`                                                           |
         | Card                              | Notched Rectangle      | \`notch-rect\`   | Represents a card              | \`card\`, \`notched-rectangle\`                                      |
-        | Cloud                             | Cloud                  | \`cloud\`        | cloud                          | \`cloud\`                                                          |
         | Collate                           | Hourglass              | \`hourglass\`    | Represents a collate operation | \`collate\`, \`hourglass\`                                           |
         | Com Link                          | Lightning Bolt         | \`bolt\`         | Communication link             | \`com-link\`, \`lightning-bolt\`                                     |
         | Comment                           | Curly Brace            | \`brace\`        | Adds a comment                 | \`brace-l\`, \`comment\`                                             |

packages/mermaid/src/config.spec.ts

@@ -78,187 +78,3 @@ 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,17 +248,3 @@ 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/config.type.ts

@@ -1075,10 +1075,6 @@ export interface ArchitectureDiagramConfig extends BaseDiagramConfig {
 export interface MindmapDiagramConfig extends BaseDiagramConfig {
   padding?: number;
   maxNodeWidth?: number;
-  /**
-   * Layout algorithm to use for positioning mindmap nodes
-   */
-  layoutAlgorithm?: string;
 }
 /**
  * The object containing configurations specific for kanban diagrams

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

@@ -1,3 +1,5 @@
+// tests to check that comments are removed
+
 import { cleanupComments } from './comments.js';
 import { describe, it, expect } from 'vitest';
 
@@ -8,12 +10,12 @@ describe('comments', () => {
 %% This is a comment
 %% This is another comment
 graph TD
-    A-->B
+	A-->B
 %% This is a comment
 `;
     expect(cleanupComments(text)).toMatchInlineSnapshot(`
       "graph TD
-          A-->B
+      	A-->B
       "
     `);
   });
@@ -27,9 +29,9 @@ graph TD
 %%{ init: {'theme': 'space before init'}}%%
 %%{init: {'theme': 'space after ending'}}%%
 graph TD
-    A-->B
+	A-->B
 
-    B-->C
+	B-->C
 %% This is a comment
 `;
     expect(cleanupComments(text)).toMatchInlineSnapshot(`
@@ -37,9 +39,9 @@ graph TD
       %%{ init: {'theme': 'space before init'}}%%
       %%{init: {'theme': 'space after ending'}}%%
       graph TD
-          A-->B
+      	A-->B
 
-          B-->C
+      	B-->C
       "
     `);
   });
@@ -48,14 +50,14 @@ graph TD
     const text = `
 %% This is a comment
 graph TD
-    A-->B
-    %% This is a comment
-    C-->D
+	A-->B
+	%% This is a comment
+	C-->D
 `;
     expect(cleanupComments(text)).toMatchInlineSnapshot(`
       "graph TD
-          A-->B
-          C-->D
+	A-->B
+	C-->D
       "
     `);
   });
@@ -68,11 +70,11 @@ graph TD
 
 %% This is a comment
 graph TD
-    A-->B
+	A-->B
 `;
     expect(cleanupComments(text)).toMatchInlineSnapshot(`
       "graph TD
-          A-->B
+      	A-->B
       "
     `);
   });
@@ -80,12 +82,12 @@ graph TD
   it('should remove comments at end of text with no newline', () => {
     const text = `
 graph TD
-    A-->B
+	A-->B
 %% This is a comment`;
 
     expect(cleanupComments(text)).toMatchInlineSnapshot(`
       "graph TD
-          A-->B
+	A-->B
       "
     `);
   });

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

@@ -3,7 +3,6 @@ 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;
@@ -36,8 +35,7 @@ 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;
 }

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

@@ -1,5 +1,6 @@
-import type { LayoutOptions, Position } from 'cytoscape';
+import type { Position } from 'cytoscape';
 import cytoscape from 'cytoscape';
+import type { FcoseLayoutOptions } from 'cytoscape-fcose';
 import fcose from 'cytoscape-fcose';
 import { select } from 'd3';
 import type { DrawDefinition, SVG } from '../../diagram-api/types.js';
@@ -40,7 +41,7 @@ registerIconPacks([
     icons: architectureIcons,
   },
 ]);
-cytoscape.use(fcose as any);
+cytoscape.use(fcose);
 
 function addServices(services: ArchitectureService[], cy: cytoscape.Core, db: ArchitectureDB) {
   services.forEach((service) => {
@@ -428,7 +429,7 @@ function layoutArchitecture(
       },
       alignmentConstraint,
       relativePlacementConstraint,
-    } as LayoutOptions);
+    } as FcoseLayoutOptions);
 
     // Once the diagram has been generated and the service's position cords are set, adjust the XY edges to have a 90deg bend
     layout.one('layoutstop', () => {

packages/mermaid/src/diagrams/architecture/svgDraw.spec.ts

@@ -1,48 +0,0 @@
-import { describe } from 'vitest';
-import { draw } from './architectureRenderer.js';
-import { Diagram } from '../../Diagram.js';
-import { addDetector } from '../../diagram-api/detectType.js';
-import architectureDetector from './architectureDetector.js';
-import { ensureNodeFromSelector, jsdomIt } from '../../tests/util.js';
-
-const { id, detector, loader } = architectureDetector;
-
-addDetector(id, detector, loader); // Add architecture schemas to Mermaid
-
-describe('architecture diagram SVGs', () => {
-  jsdomIt('should add ids', async () => {
-    const svgNode = await drawDiagram(`
-      architecture-beta
-        group api(cloud)[API]
-
-        service db(database)[Database] in api
-        service disk1(disk)[Storage] in api
-        service disk2(disk)[Storage] in api
-        service server(server)[Server] in api
-
-        db:L -- R:server
-        disk1:T -- B:server
-        disk2:T -- B:db
-    `);
-
-    const nodesForGroup = svgNode.querySelectorAll(`#group-api`);
-    expect(nodesForGroup.length).toBe(1);
-
-    const serviceIds = [...svgNode.querySelectorAll(`[id^=service-]`)].map(({ id }) => id).sort();
-    expect(serviceIds).toStrictEqual([
-      'service-db',
-      'service-disk1',
-      'service-disk2',
-      'service-server',
-    ]);
-
-    const edgeIds = [...svgNode.querySelectorAll(`.edge[id^=L_]`)].map(({ id }) => id).sort();
-    expect(edgeIds).toStrictEqual(['L_db_server_0', 'L_disk1_server_0', 'L_disk2_db_0']);
-  });
-});
-
-async function drawDiagram(diagramText: string): Promise<Element> {
-  const diagram = await Diagram.fromText(diagramText, {});
-  await draw('NOT_USED', 'svg', '1.0.0', diagram);
-  return ensureNodeFromSelector('#svg');
-}

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

@@ -20,7 +20,6 @@ import {
   type ArchitectureJunction,
   type ArchitectureService,
 } from './architectureTypes.js';
-import { getEdgeId } from '../../utils.js';
 
 export const drawEdges = async function (
   edgesEl: D3Element,
@@ -92,8 +91,7 @@ export const drawEdges = async function (
 
         g.insert('path')
           .attr('d', `M ${startX},${startY} L ${midX},${midY} L${endX},${endY} `)
-          .attr('class', 'edge')
-          .attr('id', getEdgeId(source, target, { prefix: 'L' }));
+          .attr('class', 'edge');
 
         if (sourceArrow) {
           const xShift = isArchitectureDirectionX(sourceDir)
@@ -208,9 +206,8 @@ export const drawGroups = async function (
       if (data.type === 'group') {
         const { h, w, x1, y1 } = node.boundingBox();
 
-        const groupsNode = groupsEl.append('rect');
-        groupsNode
-          .attr('id', `group-${data.id}`)
+        groupsEl
+          .append('rect')
           .attr('x', x1 + halfIconSize)
           .attr('y', y1 + halfIconSize)
           .attr('width', w)
@@ -265,7 +262,6 @@ export const drawGroups = async function (
               ')'
           );
         }
-        db.setElementForId(data.id, groupsNode);
       }
     })
   );
@@ -346,9 +342,9 @@ export const drawServices = async function (
         );
     }
 
-    serviceElem.attr('id', `service-${service.id}`).attr('class', 'architecture-service');
+    serviceElem.attr('class', 'architecture-service');
 
-    const { width, height } = serviceElem.node().getBBox();
+    const { width, height } = serviceElem._groups[0][0].getBBox();
     service.width = width;
     service.height = height;
     db.setElementForId(service.id, serviceElem);

packages/mermaid/src/diagrams/class/ANTLR_MIGRATION.md

@@ -1,147 +0,0 @@
-## ANTLR migration plan for Class Diagrams (parity with Sequence)
-
-This guide summarizes how to migrate the Class diagram parser from Jison to ANTLR (antlr4ng), following the approach used for Sequence diagrams. The goal is full feature parity and 100% test pass rate, while keeping the Jison implementation as the reference until the ANTLR path is green.
-
-### Objectives
-
-- Keep the existing Jison parser as the authoritative reference until parity is achieved
-- Add an ANTLR parser behind a runtime flag (`USE_ANTLR_PARSER=true`), mirroring Sequence
-- Achieve 100% test compatibility with the current Jison behavior, including error cases
-- Keep the public DB and rendering contracts unchanged
-
----
-
-## 1) Prep and references
-
-- Use the Sequence migration as a template for structure, scripts, and patterns:
-  - antlr4ng grammar files: `SequenceLexer.g4`, `SequenceParser.g4`
-  - wrapper: `antlr-parser.ts` providing a Jison-compatible `parse()` and `yy`
-  - generation script: `pnpm --filter mermaid run antlr:sequence`
-- For Class diagrams, identify analogous files:
-  - Jison grammar: `packages/mermaid/src/diagrams/class/parser/classDiagram.jison`
-  - DB: `packages/mermaid/src/diagrams/class/classDb.ts`
-  - Tests: `packages/mermaid/src/diagrams/class/classDiagram.spec.js`
-- Confirm Class diagram features in the Jison grammar and tests: classes, interfaces, enums, relationships (e.g., `--`, `*--`, `o--`, `<|--`, `--|>`), visibility markers (`+`, `-`, `#`, `~`), generics (`<T>`, nested), static/abstract indicators, fields/properties, methods (with parameters and return types), stereotypes (`<< >>`), notes, direction, style/config lines, and titles/accessibility lines if supported.
-
----
-
-## 2) Create ANTLR grammars
-
-- Create `ClassLexer.g4` and `ClassParser.g4` under `packages/mermaid/src/diagrams/class/parser/antlr/`
-- Lexer design guidelines (mirror Sequence approach):
-  - Implement stateful lexing with modes to replicate Jison behavior (e.g., default, line/rest-of-line, config/title/acc modes if used)
-  - Ensure token precedence resolves conflicts between relation arrows and generics (`<|--` vs `<T>`). Prefer longest-match arrow tokens and handle generics in parser context
-  - Accept identifiers that include special characters that Jison allowed (quotes, underscores, digits, unicode as applicable)
-  - Provide tokens for core keywords and symbols: `class`, `interface`, `enum`, relationship operators, visibility markers, `<< >>` stereotypes, `{ }` blocks, `:` type separators, `,` parameter separators, `[` `]` arrays, `<` `>` generics
-  - Reuse common tokens shared across diagrams where appropriate (e.g., `TITLE`, `ACC_...`) if Class supports them
-- Parser design guidelines:
-  - Follow the Jison grammar structure closely to minimize semantic drift
-  - Allow the final statement in the file to omit a trailing newline (to avoid EOF vs NEWLINE mismatches)
-  - Keep non-ambiguous rules for:
-    - Class declarations and bodies (members split into fields/properties vs methods)
-    - Modifiers (visibility, static, abstract)
-    - Types (simple, namespaced, generic with nesting)
-    - Relationships with labels (left->right/right->left forms) and multiplicities
-    - Stereotypes and notes
-    - Optional global lines (title, accTitle, accDescr) if supported by class diagrams
-
----
-
-## 3) Add the wrapper and flag switch
-
-- Add `packages/mermaid/src/diagrams/class/parser/antlr/antlr-parser.ts`:
-  - Export an object `{ parse, parser, yy }` that mirrors the Jison parser shape
-  - `parse(input)` should:
-    - `this.yy.clear()` to reset DB (same as Sequence)
-    - Build ANTLR's lexer/parser, set `BailErrorStrategy` to fail-fast on syntax errors
-    - Walk the tree with a listener that calls classDb methods
-  - Implement no-op bodies for `visitTerminal`, `visitErrorNode`, `enterEveryRule`, `exitEveryRule` (required by ParseTreeWalker)
-  - Avoid `require()`; import from `antlr4ng`
-  - Use minimal `any`; when casting is unavoidable, add clear comments
-- Add `packages/mermaid/src/diagrams/class/parser/classParser.ts` similar to Sequence `sequenceParser.ts`:
-  - Import both the Jison parser and the ANTLR wrapper
-  - Gate on `process.env.USE_ANTLR_PARSER === 'true'`
-  - Normalize whitespace if Jison relies on specific newlines (keep parity with Sequence patterns)
-
----
-
-## 4) Implement the listener (semantic actions)
-
-Map parsed constructs to classDb calls. Typical handlers include:
-
-- Class-like declarations
-  - `db.addClass(id, { type: 'class'|'interface'|'enum', ... })`
-  - `db.addClassMember(id, member)` for fields/properties/methods (capture visibility, static/abstract, types, params)
-  - Stereotypes, annotations, notes: `db.addAnnotation(...)`, `db.addNote(...)` if applicable
-- Relationships
-  - Parse arrow/operator to relation type; map to db constants (composition/aggregation/inheritance/realization/association)
-  - `db.addRelation(lhs, rhs, { type, label, multiplicity })`
-- Title/Accessibility (if supported in Class diagrams)
-  - `db.setDiagramTitle(...)`, `db.setAccTitle(...)`, `db.setAccDescription(...)`
-- Styles/Directives/Config lines as supported by the Jison grammar
-
-Error handling:
-
-- Use BailErrorStrategy; let invalid constructs throw where Jison tests expect failure
-- For robustness parity, only swallow exceptions in places where Jison tolerated malformed content without aborting
-
----
-
-## 5) Scripts and generation
-
-- Add package scripts similar to Sequence in `packages/mermaid/package.json`:
-  - `antlr:class:clean`: remove generated TS
-  - `antlr:class`: run antlr4ng to generate TS into `parser/antlr/generated`
-- Example command (once scripts exist):
-  - `pnpm --filter mermaid run antlr:class`
-
----
-
-## 6) Tests (Vitest)
-
-- Run existing Class tests with the ANTLR parser enabled:
-  - `USE_ANTLR_PARSER=true pnpm vitest packages/mermaid/src/diagrams/class/classDiagram.spec.js --run`
-- Start by making a small focused subset pass, then expand to the full suite
-- Add targeted tests for areas where the ANTLR grammar needs extra coverage (e.g., nested generics, tricky arrow/operator precedence, stereotypes, notes)
-- Keep test expectations identical to Jison’s behavior; only adjust if Jison’s behavior was explicitly flaky and already tolerated in the repo
-
----
-
-## 7) Linting and quality
-
-- Satisfy ESLint rules enforced in the repo:
-  - Prefer imports over `require()`; no empty methods, avoid untyped `any` where reasonable
-  - If `@ts-ignore` is necessary, include a descriptive reason (≥10 chars)
-- Provide minimal types for listener contexts where helpful; keep casts localized and commented
-- Prefix diagnostic debug logs with the project’s preferred prefix if temporary logging is needed (and clean up before commit)
-
----
-
-## 8) Common pitfalls and tips
-
-- NEWLINE vs EOF: allow the last statement without a trailing newline to prevent InputMismatch
-- Token conflicts: order matters; ensure relationship operators (e.g., `<|--`, `--|>`, `*--`, `o--`) win over generic `<`/`>` in the right contexts
-- Identifiers: match Jison’s permissiveness (quoted names, digits where allowed) and avoid over-greedy tokens that eat operators
-- Listener resilience: ensure classes and endpoints exist before adding relations (create implicitly if Jison did so)
-- Error parity: do not swallow exceptions for cases where tests expect failure
-
----
-
-## 9) Rollout checklist
-
-- [ ] Grammar compiles and generated files are committed
-- [ ] `USE_ANTLR_PARSER=true` passes all Class diagram tests
-- [ ] Sequence and other diagram suites remain green
-- [ ] No new ESLint errors; warnings minimized
-- [ ] PR includes notes on parity and how to run the ANTLR tests
-
----
-
-## 10) Quick command reference
-
-- Generate ANTLR targets (after adding scripts):
-  - `pnpm --filter mermaid run antlr:class`
-- Run Class tests with ANTLR parser:
-  - `USE_ANTLR_PARSER=true pnpm vitest packages/mermaid/src/diagrams/class/classDiagram.spec.js --run`
-- Run a single test:
-  - `USE_ANTLR_PARSER=true pnpm vitest packages/mermaid/src/diagrams/class/classDiagram.spec.js -t "some test name" --run`

packages/mermaid/src/diagrams/class/classDiagram-styles.spec.js

@@ -1,4 +1,4 @@
-import { parser } from './parser/classParser.ts';
+import { parser } from './parser/classDiagram.jison';
 import { ClassDB } from './classDb.js';
 
 describe('class diagram, ', function () {

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

@@ -1,6 +1,6 @@
 import type { DiagramDefinition } from '../../diagram-api/types.js';
 // @ts-ignore: JISON doesn't support types
-import parser from './parser/classParser.ts';
+import parser from './parser/classDiagram.jison';
 import { ClassDB } from './classDb.js';
 import styles from './styles.js';
 import renderer from './classRenderer-v3-unified.js';

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

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/unbound-method -- Broken for Vitest mocks, see https://github.com/vitest-dev/eslint-plugin-vitest/pull/286 */
-// @ts-expect-error Parser exposes mutable yy property without typings
-import { parser } from './parser/classParser.ts';
+// @ts-expect-error Jison doesn't export types
+import { parser } from './parser/classDiagram.jison';
 import { ClassDB } from './classDb.js';
 import { vi, describe, it, expect } from 'vitest';
 import type { ClassMap, NamespaceNode } from './classTypes.js';
@@ -1070,14 +1070,6 @@ describe('given a class diagram with members and methods ', function () {
 
       parser.parse(str);
     });
-    it('should handle an empty class body with {}', function () {
-      const str = 'classDiagram\nclass EmptyClass {}';
-      parser.parse(str);
-      const actual = parser.yy.getClass('EmptyClass');
-      expect(actual.label).toBe('EmptyClass');
-      expect(actual.members.length).toBe(0);
-      expect(actual.methods.length).toBe(0);
-    });
   });
 });
 

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

@@ -1,6 +1,6 @@
 import type { DiagramDefinition } from '../../diagram-api/types.js';
 // @ts-ignore: JISON doesn't support types
-import parser from './parser/classParser.ts';
+import parser from './parser/classDiagram.jison';
 import { ClassDB } from './classDb.js';
 import styles from './styles.js';
 import renderer from './classRenderer-v3-unified.js';

packages/mermaid/src/diagrams/class/parser/antlr/ClassLexer.g4

@@ -1,229 +0,0 @@
-lexer grammar ClassLexer;
-
-tokens {
-  ACC_TITLE_VALUE,
-  ACC_DESCR_VALUE,
-  ACC_DESCR_MULTILINE_VALUE,
-  ACC_DESCR_MULTI_END,
-  OPEN_IN_STRUCT,
-  MEMBER
-}
-
-@members {
-  private pendingClassBody = false;
-  private pendingNamespaceBody = false;
-
-  private clearPendingScopes(): void {
-    this.pendingClassBody = false;
-    this.pendingNamespaceBody = false;
-  }
-}
-
-// Common fragments
-fragment WS_INLINE: [ \t]+;
-fragment DIGIT: [0-9];
-fragment LETTER: [A-Za-z_];
-fragment IDENT_PART: [A-Za-z0-9_\-];
-fragment NOT_DQUOTE: ~[""];
-
-
-// Comments and whitespace
-COMMENT: '%%' ~[\r\n]* -> skip;
-NEWLINE: ('\r'? '\n')+ { this.clearPendingScopes(); };
-WS: [ \t]+ -> skip;
-
-// Diagram title declaration
-CLASS_DIAGRAM_V2: 'classDiagram-v2' -> type(CLASS_DIAGRAM);
-CLASS_DIAGRAM: 'classDiagram';
-
-// Directions
-DIRECTION_TB: 'direction' WS_INLINE+ 'TB';
-DIRECTION_BT: 'direction' WS_INLINE+ 'BT';
-DIRECTION_LR: 'direction' WS_INLINE+ 'LR';
-DIRECTION_RL: 'direction' WS_INLINE+ 'RL';
-
-// Accessibility tokens
-ACC_TITLE: 'accTitle' WS_INLINE* ':' WS_INLINE* -> pushMode(ACC_TITLE_MODE);
-ACC_DESCR: 'accDescr' WS_INLINE* ':' WS_INLINE* -> pushMode(ACC_DESCR_MODE);
-ACC_DESCR_MULTI: 'accDescr' WS_INLINE* '{' -> pushMode(ACC_DESCR_MULTILINE_MODE);
-
-// Statements captured as raw lines for semantic handling in listener
-STYLE_LINE: 'style' WS_INLINE+ ~[\r\n]*;
-CLASSDEF_LINE: 'classDef' ~[\r\n]*;
-CSSCLASS_LINE: 'cssClass' ~[\r\n]*;
-CALLBACK_LINE: 'callback' ~[\r\n]*;
-CLICK_LINE: 'click' ~[\r\n]*;
-LINK_LINE: 'link' ~[\r\n]*;
-CALL_LINE: 'call' ~[\r\n]*;
-
-// Notes
-NOTE_FOR: 'note' WS_INLINE+ 'for';
-NOTE: 'note';
-
-// Keywords that affect block handling
-CLASS: 'class' { this.pendingClassBody = true; };
-NAMESPACE: 'namespace' { this.pendingNamespaceBody = true; };
-
-// Structural tokens
-STYLE_SEPARATOR: ':::';
-ANNOTATION_START: '<<';
-ANNOTATION_END: '>>';
-LBRACKET: '[';
-RBRACKET: ']';
-COMMA: ',';
-DOT: '.';
-EDGE_STATE: '[*]';
-GENERIC: '~' (~[~\r\n])+ '~';
-// Match strings without escape semantics to mirror Jison behavior
-// Allow any chars except an unescaped closing double-quote; permit newlines
-STRING: '"' NOT_DQUOTE* '"';
-BACKTICK_ID: '`' (~[`])* '`';
-LABEL: ':' (~[':\r\n;])*;
-
-RELATION_ARROW
-  : (LEFT_HEAD)? LINE_BODY (RIGHT_HEAD)?
-  ;
-fragment LEFT_HEAD
-  : '<|'
-  | '<'
-  | 'o'
-  | '*'
-  | '()'
-  ;
-fragment RIGHT_HEAD
-  : '|>'
-  | '>'
-  | 'o'
-  | '*'
-  | '()'
-  ;
-fragment LINE_BODY
-  : '--'
-  | '..'
-  ;
-
-// Identifiers and numbers
-IDENTIFIER
-  : (LETTER | DIGIT) IDENT_PART*
-  ;
-NUMBER: DIGIT+;
-PLUS: '+';
-MINUS: '-';
-HASH: '#';
-PERCENT: '%';
-STAR: '*';
-SLASH: '/';
-LPAREN: '(';
-RPAREN: ')';
-
-// Structural braces with mode management
-STRUCT_START
-  : '{'
-    {
-      if (this.pendingClassBody) {
-        this.pendingClassBody = false;
-        this.pushMode(ClassLexer.CLASS_BODY);
-      } else {
-        if (this.pendingNamespaceBody) {
-          this.pendingNamespaceBody = false;
-        }
-        this.pushMode(ClassLexer.BLOCK);
-      }
-    }
-  ;
-
-STRUCT_END: '}' { /* default mode only */ };
-
-// Default fallback (should not normally trigger)
-UNKNOWN: .;
-
-// ===== Mode: ACC_TITLE =====
-mode ACC_TITLE_MODE;
-ACC_TITLE_MODE_WS: [ \t]+ -> skip;
-ACC_TITLE_VALUE: ~[\r\n;#]+ -> type(ACC_TITLE_VALUE), popMode;
-ACC_TITLE_MODE_NEWLINE: ('\r'? '\n')+ { this.popMode(); this.clearPendingScopes(); } -> type(NEWLINE);
-
-// ===== Mode: ACC_DESCR =====
-mode ACC_DESCR_MODE;
-ACC_DESCR_MODE_WS: [ \t]+ -> skip;
-ACC_DESCR_VALUE: ~[\r\n;#]+ -> type(ACC_DESCR_VALUE), popMode;
-ACC_DESCR_MODE_NEWLINE: ('\r'? '\n')+ { this.popMode(); this.clearPendingScopes(); } -> type(NEWLINE);
-
-// ===== Mode: ACC_DESCR_MULTILINE =====
-mode ACC_DESCR_MULTILINE_MODE;
-ACC_DESCR_MULTILINE_VALUE: (~[}])+ -> type(ACC_DESCR_MULTILINE_VALUE);
-ACC_DESCR_MULTI_END: '}' -> popMode, type(ACC_DESCR_MULTI_END);
-
-// ===== Mode: CLASS_BODY =====
-mode CLASS_BODY;
-CLASS_BODY_WS: [ \t]+ -> skip;
-CLASS_BODY_COMMENT: '%%' ~[\r\n]* -> skip;
-CLASS_BODY_NEWLINE: ('\r'? '\n')+ -> type(NEWLINE);
-CLASS_BODY_STRUCT_END: '}' -> popMode, type(STRUCT_END);
-CLASS_BODY_OPEN_BRACE: '{' -> type(OPEN_IN_STRUCT);
-CLASS_BODY_EDGE_STATE: '[*]' -> type(EDGE_STATE);
-CLASS_BODY_MEMBER: ~[{}\r\n]+ -> type(MEMBER);
-
-// ===== Mode: BLOCK =====
-mode BLOCK;
-BLOCK_WS: [ \t]+ -> skip;
-BLOCK_COMMENT: '%%' ~[\r\n]* -> skip;
-BLOCK_NEWLINE: ('\r'? '\n')+ -> type(NEWLINE);
-BLOCK_CLASS: 'class' { this.pendingClassBody = true; } -> type(CLASS);
-BLOCK_NAMESPACE: 'namespace' { this.pendingNamespaceBody = true; } -> type(NAMESPACE);
-BLOCK_STYLE_LINE: 'style' WS_INLINE+ ~[\r\n]* -> type(STYLE_LINE);
-BLOCK_CLASSDEF_LINE: 'classDef' ~[\r\n]* -> type(CLASSDEF_LINE);
-BLOCK_CSSCLASS_LINE: 'cssClass' ~[\r\n]* -> type(CSSCLASS_LINE);
-BLOCK_CALLBACK_LINE: 'callback' ~[\r\n]* -> type(CALLBACK_LINE);
-BLOCK_CLICK_LINE: 'click' ~[\r\n]* -> type(CLICK_LINE);
-BLOCK_LINK_LINE: 'link' ~[\r\n]* -> type(LINK_LINE);
-BLOCK_CALL_LINE: 'call' ~[\r\n]* -> type(CALL_LINE);
-BLOCK_NOTE_FOR: 'note' WS_INLINE+ 'for' -> type(NOTE_FOR);
-BLOCK_NOTE: 'note' -> type(NOTE);
-BLOCK_ACC_TITLE: 'accTitle' WS_INLINE* ':' WS_INLINE* -> type(ACC_TITLE), pushMode(ACC_TITLE_MODE);
-BLOCK_ACC_DESCR: 'accDescr' WS_INLINE* ':' WS_INLINE* -> type(ACC_DESCR), pushMode(ACC_DESCR_MODE);
-BLOCK_ACC_DESCR_MULTI: 'accDescr' WS_INLINE* '{' -> type(ACC_DESCR_MULTI), pushMode(ACC_DESCR_MULTILINE_MODE);
-BLOCK_STRUCT_START
-  : '{'
-    {
-      if (this.pendingClassBody) {
-        this.pendingClassBody = false;
-        this.pushMode(ClassLexer.CLASS_BODY);
-      } else {
-        if (this.pendingNamespaceBody) {
-          this.pendingNamespaceBody = false;
-        }
-        this.pushMode(ClassLexer.BLOCK);
-      }
-    }
-    -> type(STRUCT_START)
-  ;
-BLOCK_STRUCT_END: '}' -> popMode, type(STRUCT_END);
-BLOCK_STYLE_SEPARATOR: ':::' -> type(STYLE_SEPARATOR);
-BLOCK_ANNOTATION_START: '<<' -> type(ANNOTATION_START);
-BLOCK_ANNOTATION_END: '>>' -> type(ANNOTATION_END);
-BLOCK_LBRACKET: '[' -> type(LBRACKET);
-BLOCK_RBRACKET: ']' -> type(RBRACKET);
-BLOCK_COMMA: ',' -> type(COMMA);
-BLOCK_DOT: '.' -> type(DOT);
-BLOCK_EDGE_STATE: '[*]' -> type(EDGE_STATE);
-BLOCK_GENERIC: '~' (~[~\r\n])+ '~' -> type(GENERIC);
-// Mirror Jison: no escape semantics inside strings in BLOCK mode as well
-BLOCK_STRING: '"' NOT_DQUOTE* '"' -> type(STRING);
-BLOCK_BACKTICK_ID: '`' (~[`])* '`' -> type(BACKTICK_ID);
-BLOCK_LABEL: ':' (~[':\r\n;])* -> type(LABEL);
-BLOCK_RELATION_ARROW
-  : (LEFT_HEAD)? LINE_BODY (RIGHT_HEAD)?
-    -> type(RELATION_ARROW)
-  ;
-BLOCK_IDENTIFIER: (LETTER | DIGIT) IDENT_PART* -> type(IDENTIFIER);
-BLOCK_NUMBER: DIGIT+ -> type(NUMBER);
-BLOCK_PLUS: '+' -> type(PLUS);
-BLOCK_MINUS: '-' -> type(MINUS);
-BLOCK_HASH: '#' -> type(HASH);
-BLOCK_PERCENT: '%' -> type(PERCENT);
-BLOCK_STAR: '*' -> type(STAR);
-BLOCK_SLASH: '/' -> type(SLASH);
-BLOCK_LPAREN: '(' -> type(LPAREN);
-BLOCK_RPAREN: ')' -> type(RPAREN);
-BLOCK_UNKNOWN: . -> type(UNKNOWN);

packages/mermaid/src/diagrams/class/parser/antlr/ClassParser.g4

@@ -1,204 +0,0 @@
-parser grammar ClassParser;
-
-options {
-  tokenVocab = ClassLexer;
-}
-
-start
-  : (NEWLINE)* classDiagramSection EOF
-  ;
-
-classDiagramSection
-  : CLASS_DIAGRAM (NEWLINE)+ document
-  ;
-
-document
-  : (line)* statement?
-  ;
-
-line
-  : statement? NEWLINE
-  ;
-
-statement
-  : classStatement
-  | namespaceStatement
-  | relationStatement
-  | noteStatement
-  | annotationStatement
-  | memberStatement
-  | classDefStatement
-  | styleStatement
-  | cssClassStatement
-  | directionStatement
-  | accTitleStatement
-  | accDescrStatement
-  | accDescrMultilineStatement
-  | callbackStatement
-  | clickStatement
-  | linkStatement
-  | callStatement
-  ;
-
-classStatement
-  : classIdentifier classStatementTail?
-  ;
-
-classStatementTail
-  : STRUCT_START classMembers? STRUCT_END
-  | STYLE_SEPARATOR cssClassRef classStatementCssTail?
-  ;
-
-classStatementCssTail
-  : STRUCT_START classMembers? STRUCT_END
-  ;
-
-classIdentifier
-  : CLASS className classLabel?
-  ;
-
-classLabel
-  : LBRACKET stringLiteral RBRACKET
-  ;
-
-cssClassRef
-  : className
-  | IDENTIFIER
-  ;
-
-classMembers
-  : (NEWLINE | classMember)*
-  ;
-
-classMember
-  : MEMBER
-  | EDGE_STATE
-  ;
-
-namespaceStatement
-  : namespaceIdentifier namespaceBlock
-  ;
-
-namespaceIdentifier
-  : NAMESPACE namespaceName
-  ;
-
-namespaceName
-  : className
-  ;
-
-namespaceBlock
-  : STRUCT_START (NEWLINE)* namespaceBody? STRUCT_END
-  ;
-
-namespaceBody
-  : namespaceLine+
-  ;
-
-namespaceLine
-  : (classStatement | namespaceStatement)? NEWLINE
-  | classStatement
-  | namespaceStatement
-  ;
-
-relationStatement
-  : className relation className relationLabel?
-  | className stringLiteral relation className relationLabel?
-  | className relation stringLiteral className relationLabel?
-  | className stringLiteral relation stringLiteral className relationLabel?
-  ;
-
-relation
-  : RELATION_ARROW
-  ;
-
-relationLabel
-  : LABEL
-  ;
-
-noteStatement
-  : NOTE_FOR className noteBody
-  | NOTE noteBody
-  ;
-
-noteBody
-  : stringLiteral
-  ;
-
-annotationStatement
-  : ANNOTATION_START annotationName ANNOTATION_END className
-  ;
-
-annotationName
-  : IDENTIFIER
-  | stringLiteral
-  ;
-
-memberStatement
-  : className LABEL
-  ;
-
-classDefStatement
-  : CLASSDEF_LINE
-  ;
-
-styleStatement
-  : STYLE_LINE
-  ;
-
-cssClassStatement
-  : CSSCLASS_LINE
-  ;
-
-directionStatement
-  : DIRECTION_TB
-  | DIRECTION_BT
-  | DIRECTION_LR
-  | DIRECTION_RL
-  ;
-
-accTitleStatement
-  : ACC_TITLE ACC_TITLE_VALUE
-  ;
-
-accDescrStatement
-  : ACC_DESCR ACC_DESCR_VALUE
-  ;
-
-accDescrMultilineStatement
-  : ACC_DESCR_MULTI ACC_DESCR_MULTILINE_VALUE ACC_DESCR_MULTI_END
-  ;
-
-callbackStatement
-  : CALLBACK_LINE
-  ;
-
-clickStatement
-  : CLICK_LINE
-  ;
-
-linkStatement
-  : LINK_LINE
-  ;
-
-callStatement
-  : CALL_LINE
-  ;
-
-stringLiteral
-  : STRING
-  ;
-
-className
-  : classNameSegment (DOT classNameSegment)*
-  ;
-
-classNameSegment
-  : IDENTIFIER genericSuffix?
-  | BACKTICK_ID genericSuffix?
-  | EDGE_STATE
-  ;
-
-genericSuffix
-  : GENERIC
-  ;

packages/mermaid/src/diagrams/class/parser/antlr/antlr-parser.ts

@@ -1,729 +0,0 @@
-import type { ParseTreeListener } from 'antlr4ng';
-import {
-  BailErrorStrategy,
-  CharStream,
-  CommonTokenStream,
-  ParseCancellationException,
-  ParseTreeWalker,
-  RecognitionException,
-  type Token,
-} from 'antlr4ng';
-import {
-  ClassParser,
-  type ClassIdentifierContext,
-  type ClassMembersContext,
-  type ClassNameContext,
-  type ClassNameSegmentContext,
-  type ClassStatementContext,
-  type NamespaceIdentifierContext,
-  type RelationStatementContext,
-  type NoteStatementContext,
-  type AnnotationStatementContext,
-  type MemberStatementContext,
-  type ClassDefStatementContext,
-  type StyleStatementContext,
-  type CssClassStatementContext,
-  type DirectionStatementContext,
-  type AccTitleStatementContext,
-  type AccDescrStatementContext,
-  type AccDescrMultilineStatementContext,
-  type CallbackStatementContext,
-  type ClickStatementContext,
-  type LinkStatementContext,
-  type CallStatementContext,
-  type CssClassRefContext,
-  type StringLiteralContext,
-} from './generated/ClassParser.js';
-import { ClassParserListener } from './generated/ClassParserListener.js';
-import { ClassLexer } from './generated/ClassLexer.js';
-
-type ClassDbLike = Record<string, any>;
-
-const stripQuotes = (value: string): string => {
-  const trimmed = value.trim();
-  if (trimmed.length >= 2 && trimmed.startsWith('"') && trimmed.endsWith('"')) {
-    try {
-      return JSON.parse(trimmed.replace(/\r?\n/g, '\\n')) as string;
-    } catch {
-      return trimmed.slice(1, -1).replace(/\\"/g, '"');
-    }
-  }
-  return trimmed;
-};
-
-const stripBackticks = (value: string): string => {
-  const trimmed = value.trim();
-  if (trimmed.length >= 2 && trimmed.startsWith('`') && trimmed.endsWith('`')) {
-    return trimmed.slice(1, -1);
-  }
-  return trimmed;
-};
-
-const splitCommaSeparated = (text: string): string[] =>
-  text
-    .split(',')
-    .map((part) => part.trim())
-    .filter((part) => part.length > 0);
-
-const getStringFromLiteral = (ctx: StringLiteralContext | undefined | null): string | undefined => {
-  if (!ctx) {
-    return undefined;
-  }
-  return stripQuotes(ctx.getText());
-};
-
-const getClassNameText = (ctx: ClassNameContext): string => {
-  const segments = ctx.classNameSegment();
-  const parts: string[] = [];
-  for (const segment of segments) {
-    parts.push(getClassNameSegmentText(segment));
-  }
-  return parts.join('.');
-};
-
-const getClassNameSegmentText = (ctx: ClassNameSegmentContext): string => {
-  if (ctx.BACKTICK_ID()) {
-    return stripBackticks(ctx.BACKTICK_ID()!.getText());
-  }
-  if (ctx.EDGE_STATE()) {
-    return ctx.EDGE_STATE()!.getText();
-  }
-  return ctx.getText();
-};
-
-const parseRelationArrow = (arrow: string, db: ClassDbLike) => {
-  const relation = {
-    type1: 'none',
-    type2: 'none',
-    lineType: db.lineType?.LINE ?? 0,
-  };
-
-  const trimmed = arrow.trim();
-  if (trimmed.includes('..')) {
-    relation.lineType = db.lineType?.DOTTED_LINE ?? relation.lineType;
-  }
-
-  const leftHeads: [string, keyof typeof db.relationType][] = [
-    ['<|', 'EXTENSION'],
-    ['()', 'LOLLIPOP'],
-    ['o', 'AGGREGATION'],
-    ['*', 'COMPOSITION'],
-    ['<', 'DEPENDENCY'],
-  ];
-
-  for (const [prefix, key] of leftHeads) {
-    if (trimmed.startsWith(prefix)) {
-      relation.type1 = db.relationType?.[key] ?? relation.type1;
-      break;
-    }
-  }
-
-  const rightHeads: [string, keyof typeof db.relationType][] = [
-    ['|>', 'EXTENSION'],
-    ['()', 'LOLLIPOP'],
-    ['o', 'AGGREGATION'],
-    ['*', 'COMPOSITION'],
-    ['>', 'DEPENDENCY'],
-  ];
-
-  for (const [suffix, key] of rightHeads) {
-    if (trimmed.endsWith(suffix)) {
-      relation.type2 = db.relationType?.[key] ?? relation.type2;
-      break;
-    }
-  }
-
-  return relation;
-};
-
-const parseStyleLine = (db: ClassDbLike, line: string) => {
-  const trimmed = line.trim();
-  const body = trimmed.slice('style'.length).trim();
-  if (!body) {
-    return;
-  }
-  const match = /^(\S+)(\s+.+)?$/.exec(body);
-  if (!match) {
-    return;
-  }
-  const classId = match[1];
-  const styleBody = match[2]?.trim() ?? '';
-  if (!styleBody) {
-    return;
-  }
-  const styles = splitCommaSeparated(styleBody);
-  if (styles.length) {
-    db.setCssStyle?.(classId, styles);
-  }
-};
-
-const parseClassDefLine = (db: ClassDbLike, line: string) => {
-  const trimmed = line.trim();
-  const body = trimmed.slice('classDef'.length).trim();
-  if (!body) {
-    return;
-  }
-  const match = /^(\S+)(\s+.+)?$/.exec(body);
-  if (!match) {
-    return;
-  }
-  const idPart = match[1];
-  const stylePart = match[2]?.trim() ?? '';
-  const ids = splitCommaSeparated(idPart);
-  const styles = stylePart ? splitCommaSeparated(stylePart) : [];
-  db.defineClass?.(ids, styles);
-};
-
-const parseCssClassLine = (db: ClassDbLike, line: string) => {
-  const trimmed = line.trim();
-  const body = trimmed.slice('cssClass'.length).trim();
-  if (!body) {
-    return;
-  }
-  const match = /^("[^"]*"|\S+)\s+(\S+)/.exec(body);
-  if (!match) {
-    return;
-  }
-  const idsRaw = stripQuotes(match[1]);
-  const className = match[2];
-  db.setCssClass?.(idsRaw, className);
-};
-
-const parseCallbackLine = (db: ClassDbLike, line: string) => {
-  const trimmed = line.trim();
-  const match = /^callback\s+(\S+)\s+("[^"]*")(?:\s+("[^"]*"))?\s*$/.exec(trimmed);
-  if (!match) {
-    return;
-  }
-  const target = match[1];
-  const fn = stripQuotes(match[2]);
-  const tooltip = match[3] ? stripQuotes(match[3]) : undefined;
-  db.setClickEvent?.(target, fn);
-  if (tooltip) {
-    db.setTooltip?.(target, tooltip);
-  }
-};
-
-const parseClickLine = (db: ClassDbLike, line: string) => {
-  const trimmed = line.trim();
-  const callMatch = /^click\s+(\S+)\s+call\s+([^(]+)\(([^)]*)\)(?:\s+("[^"]*"))?\s*$/.exec(trimmed);
-  if (callMatch) {
-    const target = callMatch[1];
-    const fnName = callMatch[2].trim();
-    const args = callMatch[3].trim();
-    const tooltip = callMatch[4] ? stripQuotes(callMatch[4]) : undefined;
-    if (args.length > 0) {
-      db.setClickEvent?.(target, fnName, args);
-    } else {
-      db.setClickEvent?.(target, fnName);
-    }
-    if (tooltip) {
-      db.setTooltip?.(target, tooltip);
-    }
-    return target;
-  }
-
-  const hrefMatch = /^click\s+(\S+)\s+href\s+("[^"]*")(?:\s+("[^"]*"))?(?:\s+(\S+))?\s*$/.exec(
-    trimmed
-  );
-  if (hrefMatch) {
-    const target = hrefMatch[1];
-    const url = stripQuotes(hrefMatch[2]);
-    const tooltip = hrefMatch[3] ? stripQuotes(hrefMatch[3]) : undefined;
-    const targetWindow = hrefMatch[4];
-    if (targetWindow) {
-      db.setLink?.(target, url, targetWindow);
-    } else {
-      db.setLink?.(target, url);
-    }
-    if (tooltip) {
-      db.setTooltip?.(target, tooltip);
-    }
-    return target;
-  }
-
-  const genericMatch = /^click\s+(\S+)\s+("[^"]*")(?:\s+("[^"]*"))?\s*$/.exec(trimmed);
-  if (genericMatch) {
-    const target = genericMatch[1];
-    const link = stripQuotes(genericMatch[2]);
-    const tooltip = genericMatch[3] ? stripQuotes(genericMatch[3]) : undefined;
-    db.setLink?.(target, link);
-    if (tooltip) {
-      db.setTooltip?.(target, tooltip);
-    }
-    return target;
-  }
-
-  return undefined;
-};
-
-const parseLinkLine = (db: ClassDbLike, line: string) => {
-  const trimmed = line.trim();
-  const match = /^link\s+(\S+)\s+("[^"]*")(?:\s+("[^"]*"))?(?:\s+(\S+))?\s*$/.exec(trimmed);
-  if (!match) {
-    return;
-  }
-  const target = match[1];
-  const href = stripQuotes(match[2]);
-  const tooltip = match[3] ? stripQuotes(match[3]) : undefined;
-  const targetWindow = match[4];
-
-  if (targetWindow) {
-    db.setLink?.(target, href, targetWindow);
-  } else {
-    db.setLink?.(target, href);
-  }
-  if (tooltip) {
-    db.setTooltip?.(target, tooltip);
-  }
-};
-
-const parseCallLine = (db: ClassDbLike, lastTarget: string | undefined, line: string) => {
-  if (!lastTarget) {
-    return;
-  }
-  const trimmed = line.trim();
-  const match = /^call\s+([^(]+)\(([^)]*)\)\s*("[^"]*")?\s*$/.exec(trimmed);
-  if (!match) {
-    return;
-  }
-  const fnName = match[1].trim();
-  const args = match[2].trim();
-  const tooltip = match[3] ? stripQuotes(match[3]) : undefined;
-  if (args.length > 0) {
-    db.setClickEvent?.(lastTarget, fnName, args);
-  } else {
-    db.setClickEvent?.(lastTarget, fnName);
-  }
-  if (tooltip) {
-    db.setTooltip?.(lastTarget, tooltip);
-  }
-};
-
-interface NamespaceFrame {
-  name?: string;
-  classes: string[];
-}
-
-class ClassDiagramParseListener extends ClassParserListener implements ParseTreeListener {
-  private readonly classNames = new WeakMap<ClassIdentifierContext, string>();
-  private readonly memberLists = new WeakMap<ClassMembersContext, string[]>();
-  private readonly namespaceStack: NamespaceFrame[] = [];
-  private lastClickTarget?: string;
-
-  constructor(private readonly db: ClassDbLike) {
-    super();
-  }
-
-  private recordClassInCurrentNamespace(name: string) {
-    const current = this.namespaceStack[this.namespaceStack.length - 1];
-    if (current?.name) {
-      current.classes.push(name);
-    }
-  }
-
-  override enterNamespaceStatement = (): void => {
-    this.namespaceStack.push({ classes: [] });
-  };
-
-  override exitNamespaceIdentifier = (ctx: NamespaceIdentifierContext): void => {
-    const frame = this.namespaceStack[this.namespaceStack.length - 1];
-    if (!frame) {
-      return;
-    }
-    const classNameCtx = ctx.namespaceName()?.className();
-    if (!classNameCtx) {
-      return;
-    }
-    const name = getClassNameText(classNameCtx);
-    frame.name = name;
-    this.db.addNamespace?.(name);
-  };
-
-  override exitNamespaceStatement = (): void => {
-    const frame = this.namespaceStack.pop();
-    if (!frame?.name) {
-      return;
-    }
-    if (frame.classes.length) {
-      this.db.addClassesToNamespace?.(frame.name, frame.classes);
-    }
-  };
-
-  override exitClassIdentifier = (ctx: ClassIdentifierContext): void => {
-    const id = getClassNameText(ctx.className());
-    this.classNames.set(ctx, id);
-    this.db.addClass?.(id);
-    this.recordClassInCurrentNamespace(id);
-
-    const labelCtx = ctx.classLabel?.();
-    if (labelCtx) {
-      const label = getStringFromLiteral(labelCtx.stringLiteral());
-      if (label !== undefined) {
-        this.db.setClassLabel?.(id, label);
-      }
-    }
-  };
-
-  override exitClassMembers = (ctx: ClassMembersContext): void => {
-    const members: string[] = [];
-    for (const memberCtx of ctx.classMember() ?? []) {
-      if (memberCtx.MEMBER()) {
-        members.push(memberCtx.MEMBER()!.getText());
-      } else if (memberCtx.EDGE_STATE()) {
-        members.push(memberCtx.EDGE_STATE()!.getText());
-      }
-    }
-    members.reverse();
-    this.memberLists.set(ctx, members);
-  };
-
-  override exitClassStatement = (ctx: ClassStatementContext): void => {
-    const identifierCtx = ctx.classIdentifier();
-    if (!identifierCtx) {
-      return;
-    }
-    const classId = this.classNames.get(identifierCtx);
-    if (!classId) {
-      return;
-    }
-
-    const tailCtx = ctx.classStatementTail?.();
-    const cssRefCtx = tailCtx?.cssClassRef?.();
-    if (cssRefCtx) {
-      const cssTarget = this.resolveCssClassRef(cssRefCtx);
-      if (cssTarget) {
-        this.db.setCssClass?.(classId, cssTarget);
-      }
-    }
-
-    const memberContexts: ClassMembersContext[] = [];
-    const cm1 = tailCtx?.classMembers();
-    if (cm1) {
-      memberContexts.push(cm1);
-    }
-    const cssTailCtx = tailCtx?.classStatementCssTail?.();
-    const cm2 = cssTailCtx?.classMembers();
-    if (cm2) {
-      memberContexts.push(cm2);
-    }
-
-    for (const membersCtx of memberContexts) {
-      const members = this.memberLists.get(membersCtx) ?? [];
-      if (members.length) {
-        this.db.addMembers?.(classId, members);
-      }
-    }
-  };
-
-  private resolveCssClassRef(ctx: CssClassRefContext): string | undefined {
-    if (ctx.className()) {
-      return getClassNameText(ctx.className()!);
-    }
-    if (ctx.IDENTIFIER()) {
-      return ctx.IDENTIFIER()!.getText();
-    }
-    return undefined;
-  }
-
-  override exitRelationStatement = (ctx: RelationStatementContext): void => {
-    const classNames = ctx.className();
-    if (classNames.length < 2) {
-      return;
-    }
-    const id1 = getClassNameText(classNames[0]);
-    const id2 = getClassNameText(classNames[classNames.length - 1]);
-
-    const arrow = ctx.relation()?.getText() ?? '';
-    const relation = parseRelationArrow(arrow, this.db);
-
-    let relationTitle1 = 'none';
-    let relationTitle2 = 'none';
-    const stringLiterals = ctx.stringLiteral();
-    if (stringLiterals.length === 1 && ctx.children) {
-      const stringCtx = stringLiterals[0];
-      const children = ctx.children as unknown[];
-      const stringIndex = children.indexOf(stringCtx);
-      const relationCtx = ctx.relation();
-      const relationIndex = relationCtx ? children.indexOf(relationCtx) : -1;
-      if (relationIndex >= 0 && stringIndex >= 0 && stringIndex < relationIndex) {
-        relationTitle1 = getStringFromLiteral(stringCtx) ?? 'none';
-      } else {
-        relationTitle2 = getStringFromLiteral(stringCtx) ?? 'none';
-      }
-    } else if (stringLiterals.length >= 2) {
-      relationTitle1 = getStringFromLiteral(stringLiterals[0]) ?? 'none';
-      relationTitle2 = getStringFromLiteral(stringLiterals[1]) ?? 'none';
-    }
-
-    let title = 'none';
-    const labelCtx = ctx.relationLabel?.();
-    if (labelCtx?.LABEL()) {
-      title = this.db.cleanupLabel?.(labelCtx.LABEL().getText()) ?? 'none';
-    }
-
-    this.db.addRelation?.({
-      id1,
-      id2,
-      relation,
-      relationTitle1,
-      relationTitle2,
-      title,
-    });
-  };
-
-  override exitNoteStatement = (ctx: NoteStatementContext): void => {
-    const noteCtx = ctx.noteBody();
-    const literalText = noteCtx?.getText?.();
-    const text = literalText !== undefined ? stripQuotes(literalText) : undefined;
-    if (text === undefined) {
-      return;
-    }
-    if (ctx.NOTE_FOR()) {
-      const className = getClassNameText(ctx.className()!);
-      this.db.addNote?.(text, className);
-    } else {
-      this.db.addNote?.(text);
-    }
-  };
-
-  override exitAnnotationStatement = (ctx: AnnotationStatementContext): void => {
-    const className = getClassNameText(ctx.className());
-    const nameCtx = ctx.annotationName();
-    let annotation: string | undefined;
-    if (nameCtx.IDENTIFIER()) {
-      annotation = nameCtx.IDENTIFIER()!.getText();
-    } else {
-      annotation = getStringFromLiteral(nameCtx.stringLiteral());
-    }
-    if (annotation !== undefined) {
-      this.db.addAnnotation?.(className, annotation);
-    }
-  };
-
-  override exitMemberStatement = (ctx: MemberStatementContext): void => {
-    const className = getClassNameText(ctx.className());
-    const labelToken = ctx.LABEL();
-    if (!labelToken) {
-      return;
-    }
-    const cleaned = this.db.cleanupLabel?.(labelToken.getText()) ?? labelToken.getText();
-    this.db.addMember?.(className, cleaned);
-  };
-
-  override exitClassDefStatement = (ctx: ClassDefStatementContext): void => {
-    const token = ctx.CLASSDEF_LINE()?.getSymbol()?.text;
-    if (token) {
-      parseClassDefLine(this.db, token);
-    }
-  };
-
-  override exitStyleStatement = (ctx: StyleStatementContext): void => {
-    const token = ctx.STYLE_LINE()?.getSymbol()?.text;
-    if (token) {
-      parseStyleLine(this.db, token);
-    }
-  };
-
-  override exitCssClassStatement = (ctx: CssClassStatementContext): void => {
-    const token = ctx.CSSCLASS_LINE()?.getSymbol()?.text;
-    if (token) {
-      parseCssClassLine(this.db, token);
-    }
-  };
-
-  override exitDirectionStatement = (ctx: DirectionStatementContext): void => {
-    if (ctx.DIRECTION_TB()) {
-      this.db.setDirection?.('TB');
-    } else if (ctx.DIRECTION_BT()) {
-      this.db.setDirection?.('BT');
-    } else if (ctx.DIRECTION_LR()) {
-      this.db.setDirection?.('LR');
-    } else if (ctx.DIRECTION_RL()) {
-      this.db.setDirection?.('RL');
-    }
-  };
-
-  override exitAccTitleStatement = (ctx: AccTitleStatementContext): void => {
-    const value = ctx.ACC_TITLE_VALUE()?.getText();
-    if (value !== undefined) {
-      this.db.setAccTitle?.(value.trim());
-    }
-  };
-
-  override exitAccDescrStatement = (ctx: AccDescrStatementContext): void => {
-    const value = ctx.ACC_DESCR_VALUE()?.getText();
-    if (value !== undefined) {
-      this.db.setAccDescription?.(value.trim());
-    }
-  };
-
-  override exitAccDescrMultilineStatement = (ctx: AccDescrMultilineStatementContext): void => {
-    const value = ctx.ACC_DESCR_MULTILINE_VALUE()?.getText();
-    if (value !== undefined) {
-      this.db.setAccDescription?.(value.trim());
-    }
-  };
-
-  override exitCallbackStatement = (ctx: CallbackStatementContext): void => {
-    const token = ctx.CALLBACK_LINE()?.getSymbol()?.text;
-    if (token) {
-      parseCallbackLine(this.db, token);
-    }
-  };
-
-  override exitClickStatement = (ctx: ClickStatementContext): void => {
-    const token = ctx.CLICK_LINE()?.getSymbol()?.text;
-    if (!token) {
-      return;
-    }
-    const target = parseClickLine(this.db, token);
-    if (target) {
-      this.lastClickTarget = target;
-    }
-  };
-
-  override exitLinkStatement = (ctx: LinkStatementContext): void => {
-    const token = ctx.LINK_LINE()?.getSymbol()?.text;
-    if (token) {
-      parseLinkLine(this.db, token);
-    }
-  };
-
-  override exitCallStatement = (ctx: CallStatementContext): void => {
-    const token = ctx.CALL_LINE()?.getSymbol()?.text;
-    if (token) {
-      parseCallLine(this.db, this.lastClickTarget, token);
-    }
-  };
-}
-
-class ANTLRClassParser {
-  yy: ClassDbLike | null = null;
-
-  parse(input: string): unknown {
-    if (!this.yy) {
-      throw new Error('Class ANTLR parser missing yy (database).');
-    }
-
-    this.yy.clear?.();
-
-    const inputStream = CharStream.fromString(input);
-    const lexer = new ClassLexer(inputStream);
-    const tokenStream = new CommonTokenStream(lexer);
-    const parser = new ClassParser(tokenStream);
-
-    const anyParser = parser as unknown as {
-      getErrorHandler?: () => unknown;
-      setErrorHandler?: (handler: unknown) => void;
-      errorHandler?: unknown;
-    };
-    const currentHandler = anyParser.getErrorHandler?.() ?? anyParser.errorHandler;
-    const handlerName = (currentHandler as { constructor?: { name?: string } } | undefined)
-      ?.constructor?.name;
-    if (!currentHandler || handlerName !== 'BailErrorStrategy') {
-      if (typeof anyParser.setErrorHandler === 'function') {
-        anyParser.setErrorHandler(new BailErrorStrategy());
-      } else {
-        (parser as unknown as { errorHandler: unknown }).errorHandler = new BailErrorStrategy();
-      }
-    }
-
-    try {
-      const tree = parser.start();
-      const listener = new ClassDiagramParseListener(this.yy);
-      ParseTreeWalker.DEFAULT.walk(listener, tree);
-      return tree;
-    } catch (error) {
-      throw this.transformParseError(error, parser);
-    }
-  }
-
-  private transformParseError(error: unknown, parser: ClassParser): Error {
-    const recognitionError = this.unwrapRecognitionError(error);
-    const offendingToken = this.resolveOffendingToken(recognitionError, parser);
-    const line = offendingToken?.line ?? 0;
-    const column = offendingToken?.column ?? 0;
-    const message = `Parse error on line ${line}: Expecting 'STR'`;
-    const cause = error instanceof Error ? error : undefined;
-    const formatted = cause ? new Error(message, { cause }) : new Error(message);
-
-    Object.assign(formatted, {
-      hash: {
-        line,
-        loc: {
-          first_line: line,
-          last_line: line,
-          first_column: column,
-          last_column: column,
-        },
-        text: offendingToken?.text ?? '',
-      },
-    });
-
-    return formatted;
-  }
-
-  private unwrapRecognitionError(error: unknown): RecognitionException | undefined {
-    if (!error) {
-      return undefined;
-    }
-    if (error instanceof RecognitionException) {
-      return error;
-    }
-    if (error instanceof ParseCancellationException) {
-      const cause = (error as { cause?: unknown }).cause;
-      if (cause instanceof RecognitionException) {
-        return cause;
-      }
-    }
-    if (typeof error === 'object' && error !== null && 'cause' in error) {
-      const cause = (error as { cause?: unknown }).cause;
-      if (cause instanceof RecognitionException) {
-        return cause;
-      }
-    }
-    return undefined;
-  }
-
-  private resolveOffendingToken(
-    error: RecognitionException | undefined,
-    parser: ClassParser
-  ): Token | undefined {
-    const candidate = (error as { offendingToken?: Token })?.offendingToken;
-    if (candidate) {
-      return candidate;
-    }
-
-    const current = (
-      parser as unknown as { getCurrentToken?: () => Token | undefined }
-    ).getCurrentToken?.();
-    if (current) {
-      return current;
-    }
-
-    const stream = (
-      parser as unknown as { _input?: { LT?: (offset: number) => Token | undefined } }
-    )._input;
-    return stream?.LT?.(1);
-  }
-}
-
-const parserInstance = new ANTLRClassParser();
-
-const exportedParser = {
-  parse: (text: string) => parserInstance.parse(text),
-  parser: parserInstance,
-  yy: null as ClassDbLike | null,
-};
-
-Object.defineProperty(exportedParser, 'yy', {
-  get() {
-    return parserInstance.yy;
-  },
-  set(value: ClassDbLike | null) {
-    parserInstance.yy = value;
-  },
-});
-
-export default exportedParser;

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

@@ -293,7 +293,6 @@ classStatement
     : classIdentifier
     | classIdentifier STYLE_SEPARATOR alphaNumToken      {yy.setCssClass($1, $3);}
     | classIdentifier STRUCT_START members STRUCT_STOP   {yy.addMembers($1,$3);}
-    | classIdentifier STRUCT_START STRUCT_STOP           {}
     | classIdentifier STYLE_SEPARATOR alphaNumToken STRUCT_START members STRUCT_STOP {yy.setCssClass($1, $3);yy.addMembers($1,$5);}
     ;
 
@@ -302,15 +301,8 @@ classIdentifier
     | CLASS className classLabel                         {$$=$2; yy.addClass($2);yy.setClassLabel($2, $3);}
     ;
 
-
-emptyBody
-    :
-    | SPACE emptyBody
-    | NEWLINE emptyBody
-    ;
-
 annotationStatement
-    : ANNOTATION_START alphaNumToken ANNOTATION_END className  { yy.addAnnotation($4,$2); }
+    :ANNOTATION_START alphaNumToken ANNOTATION_END className  { yy.addAnnotation($4,$2); }
     ;
 
 members

packages/mermaid/src/diagrams/class/parser/classParser.ts

@@ -1,31 +0,0 @@
-// @ts-ignore: JISON parser lacks type definitions
-import jisonParser from './classDiagram.jison';
-import antlrParser from './antlr/antlr-parser.js';
-
-const USE_ANTLR_PARSER = process.env.USE_ANTLR_PARSER === 'true';
-
-const baseParser: any = USE_ANTLR_PARSER ? antlrParser : jisonParser;
-
-const selectedParser: any = Object.create(baseParser);
-
-selectedParser.parse = (source: string): unknown => {
-  const normalized = source.replace(/\r\n/g, '\n');
-  if (USE_ANTLR_PARSER) {
-    return antlrParser.parse(normalized);
-  }
-  return jisonParser.parse(normalized);
-};
-
-Object.defineProperty(selectedParser, 'yy', {
-  get() {
-    return baseParser.yy;
-  },
-  set(value) {
-    baseParser.yy = value;
-  },
-  enumerable: true,
-  configurable: true,
-});
-
-export default selectedParser;
-export const parser = selectedParser;

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

@@ -94,6 +94,22 @@ start
     : 'ER_DIAGRAM' document 'EOF' { /*console.log('finished parsing');*/ }
     ;
 
+relationship
+  : ENTITY relationType ENTITY maybeRole
+    {
+      yy.addRelationship($1, $4, $3, $2);
+    };
+
+maybeRole
+  : COLON role
+    {
+      $$ = $2;
+    }
+  | /* empty */
+    {
+      $$ = '';
+    };
+
 document
 	: /* empty */ { $$ = [] }
 	| document line {$1.push($2);$$ = $1}
@@ -108,32 +124,34 @@ line
 
 
 statement
-    : entityName relSpec entityName COLON role
+    : entityName relSpec entityName maybeRole
       {
           yy.addEntity($1);
           yy.addEntity($3);
-          yy.addRelationship($1, $5, $3, $2);
+          yy.addRelationship($1, $4, $3, $2);
       }
-    | entityName STYLE_SEPARATOR idList relSpec entityName STYLE_SEPARATOR idList COLON role
+    | entityName STYLE_SEPARATOR idList relSpec entityName STYLE_SEPARATOR idList maybeRole
+
       {
           yy.addEntity($1);
           yy.addEntity($5);
-          yy.addRelationship($1, $9, $5, $4);
+          yy.addRelationship($1, $8, $5, $4);
           yy.setClass([$1], $3);
           yy.setClass([$5], $7);
       }
-    | entityName STYLE_SEPARATOR idList relSpec entityName COLON role
+    | entityName STYLE_SEPARATOR idList relSpec entityName maybeRole
+
       {
           yy.addEntity($1);
           yy.addEntity($5);
-          yy.addRelationship($1, $7, $5, $4);
+          yy.addRelationship($1, $6, $5, $4);
           yy.setClass([$1], $3);
       }
-    | entityName relSpec entityName STYLE_SEPARATOR idList COLON role
+    | entityName relSpec entityName STYLE_SEPARATOR idList maybeRole
       {
           yy.addEntity($1);
           yy.addEntity($3);
-          yy.addRelationship($1, $7, $3, $2);
+          yy.addRelationship($1, $6, $3, $2);
           yy.setClass([$3], $5);
       }
     | entityName BLOCK_START attributes BLOCK_STOP

packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js

@@ -981,6 +981,12 @@ describe('when parsing ER diagram it...', function () {
       expect(rels[0].roleA).toBe('places');
     });
 
+    it('should allow label as optional', function () {
+      erDiagram.parser.parse('erDiagram\nCUSTOMER ||--|{ ORDER');
+      const rels = erDb.getRelationships();
+      expect(rels[0].roleA).toBe('');
+    });
+
     it('should represent parent-child relationship correctly', function () {
       erDiagram.parser.parse('erDiagram\nPROJECT u--o{ TEAM_MEMBER : "parent"');
       const rels = erDb.getRelationships();
@@ -989,6 +995,20 @@ describe('when parsing ER diagram it...', function () {
       expect(rels[0].relSpec.cardB).toBe(erDb.Cardinality.MD_PARENT);
       expect(rels[0].relSpec.cardA).toBe(erDb.Cardinality.ZERO_OR_MORE);
     });
+
+    it('should handle whitespace-only relationship labels', function () {
+      erDiagram.parser.parse('erDiagram\nBOOK }|..|{ AUTHOR : "   "');
+      let rels = erDb.getRelationships();
+      expect(rels[rels.length - 1].roleA).toBe('   ');
+
+      erDiagram.parser.parse('erDiagram\nBOOK }|..|{ GENRE : "\t"');
+      rels = erDb.getRelationships();
+      expect(rels[rels.length - 1].roleA).toBe('\t');
+
+      erDiagram.parser.parse('erDiagram\nAUTHOR }|..|{ GENRE : "      "');
+      rels = erDb.getRelationships();
+      expect(rels[rels.length - 1].roleA).toBe('      ');
+    });
   });
 
   describe('prototype properties', function () {

packages/mermaid/src/diagrams/flowchart/parser/antlr/FlowLexer.g4

@@ -1,251 +0,0 @@
-lexer grammar FlowLexer;
-
-// Virtual tokens for parser
-tokens {
-    NODIR, DIR, PIPE, PE, SQE, DIAMOND_STOP, STADIUMEND, SUBROUTINEEND, CYLINDEREND, DOUBLECIRCLEEND,
-    ELLIPSE_END_TOKEN, TRAPEND, INVTRAPEND, PS, SQS, TEXT, CIRCLEEND, STR
-}
-
-// Lexer modes to match Jison's state-based lexing
-// Based on Jison: %x string, md_string, acc_title, acc_descr, acc_descr_multiline, dir, vertex, text, etc.
-
-// Shape data tokens - MUST be defined FIRST for absolute precedence over LINK_ID
-// Match exactly "@{" like Jison does (no whitespace allowed between @ and {)
-SHAPE_DATA_START: '@{' -> pushMode(SHAPE_DATA_MODE);
-
-// Accessibility tokens
-ACC_TITLE: 'accTitle' WS* ':' WS* -> pushMode(ACC_TITLE_MODE);
-ACC_DESCR: 'accDescr' WS* ':' WS* -> pushMode(ACC_DESCR_MODE);
-ACC_DESCR_MULTI: 'accDescr' WS* '{' WS* -> pushMode(ACC_DESCR_MULTILINE_MODE);
-
-// Interactivity tokens
-CALL: 'call' WS+ -> pushMode(CALLBACKNAME_MODE);
-HREF: 'href' WS;
-// CLICK token - matches 'click' + whitespace + node ID (like Jison)
-CLICK: 'click' WS+ [A-Za-z0-9_]+ -> pushMode(CLICK_MODE);
-
-// Graph declaration tokens - these trigger direction mode
-GRAPH: ('flowchart-elk' | 'graph' | 'flowchart') -> pushMode(DIR_MODE);
-SUBGRAPH: 'subgraph';
-END: 'end';
-
-// Link targets
-LINK_TARGET: ('_self' | '_blank' | '_parent' | '_top');
-
-// Style and class tokens
-STYLE: 'style';
-DEFAULT: 'default';
-LINKSTYLE: 'linkStyle';
-INTERPOLATE: 'interpolate';
-CLASSDEF: 'classDef';
-CLASS: 'class';
-
-// String tokens - must come early to avoid conflicts with QUOTE
-MD_STRING_START: '"`' -> pushMode(MD_STRING_MODE);
-
-// Direction tokens - matches Jison's direction_tb, direction_bt, etc.
-// These handle "direction TB", "direction BT", etc. statements within subgraphs
-DIRECTION_TB: 'direction' WS+ 'TB' ~[\n]*;
-DIRECTION_BT: 'direction' WS+ 'BT' ~[\n]*;
-DIRECTION_RL: 'direction' WS+ 'RL' ~[\n]*;
-DIRECTION_LR: 'direction' WS+ 'LR' ~[\n]*;
-
-// ELLIPSE_START must come very early to avoid conflicts with PAREN_START
-ELLIPSE_START: '(-' -> pushMode(ELLIPSE_TEXT_MODE);
-
-// Link ID token - matches edge IDs like "e1@" when followed by link patterns
-// Uses a negative lookahead pattern to match the Jison lookahead (?=[^\{\"])
-// This prevents LINK_ID from matching "e1@{" and allows SHAPE_DATA_START to match "@{" correctly
-// The pattern matches any non-whitespace followed by @ but only when NOT followed by { or "
-LINK_ID: ~[ \t\r\n"]+ '@' {this.inputStream.LA(1) != '{'.charCodeAt(0) && this.inputStream.LA(1) != '"'.charCodeAt(0)}?;
-
-NUM: [0-9]+;
-BRKT: '#';
-STYLE_SEPARATOR: ':::';
-COLON: ':';
-AMP: '&';
-SEMI: ';';
-COMMA: ',';
-MULT: '*';
-
-// Edge patterns - these are complex in Jison, need careful translation
-// Normal edges without text: A-->B (matches Jison: \s*[xo<]?\-\-+[-xo>]\s*) - must come first to avoid conflicts
-LINK_NORMAL: WS* [xo<]? '--' '-'* [-xo>] WS*;
-// Normal edges with text: A-- text ---B (matches Jison: <INITIAL>\s*[xo<]?\-\-\s* -> START_LINK)
-START_LINK_NORMAL: WS* [xo<]? '--' WS+ -> pushMode(EDGE_TEXT_MODE);
-// Normal edges with text (no space): A--text---B - match -- followed by any non-dash character
-START_LINK_NORMAL_NOSPACE: WS* [xo<]? '--' -> pushMode(EDGE_TEXT_MODE);
-// Pipe-delimited edge text: A--x| (linkStatement for arrowText) - matches Jison linkStatement pattern
-LINK_STATEMENT_NORMAL: WS* [xo<]? '--' '-'* [xo<]?;
-
-// Thick edges with text: A== text ===B (matches Jison: <INITIAL>\s*[xo<]?\=\=\s* -> START_LINK)
-START_LINK_THICK: WS* [xo<]? '==' WS+ -> pushMode(THICK_EDGE_TEXT_MODE);
-// Thick edges without text: A==>B (matches Jison: \s*[xo<]?\=\=+[=xo>]\s*)
-LINK_THICK: WS* [xo<]? '==' '='* [=xo>] WS*;
-LINK_STATEMENT_THICK: WS* [xo<]? '==' '='* [xo<]?;
-
-// Dotted edges with text: A-. text .->B (matches Jison: <INITIAL>\s*[xo<]?\-\.\s* -> START_LINK)
-START_LINK_DOTTED: WS* [xo<]? '-.' WS* -> pushMode(DOTTED_EDGE_TEXT_MODE);
-// Dotted edges without text: A-.->B (matches Jison: \s*[xo<]?\-?\.+\-[xo>]?\s*)
-LINK_DOTTED: WS* [xo<]? '-' '.'+ '-' [xo>]? WS*;
-LINK_STATEMENT_DOTTED: WS* [xo<]? '-' '.'+ [xo<]?;
-
-// Special link
-LINK_INVISIBLE: WS* '~~' '~'+ WS*;
-
-// PIPE handling: push to TEXT_MODE to handle content between pipes
-// Put this AFTER link patterns to avoid interference with edge parsing
-PIPE: '|' -> pushMode(TEXT_MODE);
-
-// Vertex shape tokens - MUST come first (longer patterns before shorter ones)
-DOUBLECIRCLE_START: '(((' -> pushMode(TEXT_MODE);
-CIRCLE_START: '((' -> pushMode(TEXT_MODE);
-// ELLIPSE_START moved to top of file for precedence
-
-// Basic shape tokens - shorter patterns after longer ones
-SQUARE_START: '[' -> pushMode(TEXT_MODE), type(SQS);
-// PAREN_START must come AFTER ELLIPSE_START to avoid consuming '(' before '(-' can match
-PAREN_START: '(' -> pushMode(TEXT_MODE), type(PS);
-DIAMOND_START: '{' -> pushMode(TEXT_MODE);
-// PIPE_START removed - conflicts with PIPE token. Context-sensitive pipe handling in TEXT_MODE
-STADIUM_START: '([' -> pushMode(TEXT_MODE);
-SUBROUTINE_START: '[[' -> pushMode(TEXT_MODE);
-VERTEX_WITH_PROPS_START: '[|';
-CYLINDER_START: '[(' -> pushMode(TEXT_MODE);
-TRAP_START: '[/' -> pushMode(TRAP_TEXT_MODE);
-INVTRAP_START: '[\\' -> pushMode(TRAP_TEXT_MODE);
-
-// Other basic shape tokens
-TAGSTART: '<';
-TAGEND: '>' -> pushMode(TEXT_MODE);
-UP: '^';
-DOWN: 'v';
-MINUS: '-';
-
-// Node string - allow dashes with lookahead to prevent conflicts with links (matches Jison pattern)
-// Pattern: ([A-Za-z0-9!"\#$%&'*+\.`?\\_\/]|\-(?=[^\>\-\.])|=(?!=))+
-NODE_STRING: ([A-Za-z0-9!"#$%&'*+.`?\\/_] | '-' ~[>\-.] | '=' ~'=')+;
-
-// Unicode text support (simplified from Jison's extensive Unicode ranges)
-UNICODE_TEXT: [\u00AA\u00B5\u00BA\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE]+;
-
-// String handling - matches Jison's <*>["] behavior (any mode can enter string mode)
-QUOTE: '"' -> pushMode(STRING_MODE), skip;
-
-NEWLINE: ('\r'? '\n')+;
-WS: [ \t]+;
-
-// Lexer modes
-mode ACC_TITLE_MODE;
-ACC_TITLE_VALUE: (~[\n;#])* -> popMode;
-
-mode ACC_DESCR_MODE;
-ACC_DESCR_VALUE: (~[\n;#])* -> popMode;
-
-mode ACC_DESCR_MULTILINE_MODE;
-ACC_DESCR_MULTILINE_END: '}' -> popMode;
-ACC_DESCR_MULTILINE_VALUE: (~[}])*;
-
-mode SHAPE_DATA_MODE;
-SHAPE_DATA_STRING_START: '"' -> pushMode(SHAPE_DATA_STRING_MODE);
-SHAPE_DATA_CONTENT: (~[}"]+);
-SHAPE_DATA_END: '}' -> popMode;
-
-mode SHAPE_DATA_STRING_MODE;
-SHAPE_DATA_STRING_END: '"' -> popMode;
-SHAPE_DATA_STRING_CONTENT: (~["]+);
-
-mode CALLBACKNAME_MODE;
-CALLBACKNAME_PAREN_EMPTY: '(' WS* ')' -> popMode, type(CALLBACKARGS);
-CALLBACKNAME_PAREN_START: '(' -> popMode, pushMode(CALLBACKARGS_MODE);
-CALLBACKNAME: (~[(])*;
-
-mode CALLBACKARGS_MODE;
-CALLBACKARGS_END: ')' -> popMode;
-CALLBACKARGS: (~[)])*;
-
-mode CLICK_MODE;
-CLICK_NEWLINE: ('\r'? '\n')+ -> popMode, type(NEWLINE);
-CLICK_WS: WS -> skip;
-CLICK_CALL: 'call' WS+ -> type(CALL), pushMode(CALLBACKNAME_MODE);
-CLICK_HREF: 'href' -> type(HREF);
-CLICK_STR: '"' (~["])* '"' -> type(STR);
-CLICK_LINK_TARGET: ('_self' | '_blank' | '_parent' | '_top') -> type(LINK_TARGET);
-CLICK_CALLBACKNAME: [A-Za-z0-9_]+ -> type(CALLBACKNAME);
-
-
-
-mode DIR_MODE;
-DIR_NEWLINE: ('\r'? '\n')* WS* '\n' -> popMode, type(NODIR);
-DIR_LR: WS* 'LR' -> popMode, type(DIR);
-DIR_RL: WS* 'RL' -> popMode, type(DIR);
-DIR_TB: WS* 'TB' -> popMode, type(DIR);
-DIR_BT: WS* 'BT' -> popMode, type(DIR);
-DIR_TD: WS* 'TD' -> popMode, type(DIR);
-DIR_BR: WS* 'BR' -> popMode, type(DIR);
-DIR_LEFT: WS* '<' -> popMode, type(DIR);
-DIR_RIGHT: WS* '>' -> popMode, type(DIR);
-DIR_UP: WS* '^' -> popMode, type(DIR);
-DIR_DOWN: WS* 'v' -> popMode, type(DIR);
-
-mode STRING_MODE;
-STRING_END: '"' -> popMode, skip;
-STR: (~["]+);
-
-mode MD_STRING_MODE;
-MD_STRING_END: '`"' -> popMode;
-MD_STR: (~[`"])+;
-
-mode TEXT_MODE;
-// Allow nested diamond starts (for hexagon nodes)
-TEXT_DIAMOND_START: '{' -> pushMode(TEXT_MODE), type(DIAMOND_START);
-
-// Handle nested parentheses and brackets like Jison
-TEXT_PAREN_START: '(' -> pushMode(TEXT_MODE), type(PS);
-TEXT_SQUARE_START: '[' -> pushMode(TEXT_MODE), type(SQS);
-
-// Handle quoted strings in text mode - matches Jison's <*>["] behavior
-// Skip the opening quote token, just push to STRING_MODE like Jison does
-TEXT_STRING_START: '"' -> pushMode(STRING_MODE), skip;
-
-// Handle closing pipe in text mode - pop back to default mode
-TEXT_PIPE_END: '|' -> popMode, type(PIPE);
-
-TEXT_PAREN_END: ')' -> popMode, type(PE);
-TEXT_SQUARE_END: ']' -> popMode, type(SQE);
-TEXT_DIAMOND_END: '}' -> popMode, type(DIAMOND_STOP);
-TEXT_STADIUM_END: '])' -> popMode, type(STADIUMEND);
-TEXT_SUBROUTINE_END: ']]' -> popMode, type(SUBROUTINEEND);
-TEXT_CYLINDER_END: ')]' -> popMode, type(CYLINDEREND);
-TEXT_DOUBLECIRCLE_END: ')))' -> popMode, type(DOUBLECIRCLEEND);
-TEXT_CIRCLE_END: '))' -> popMode, type(CIRCLEEND);
-// Now allow all characters except the specific end tokens for this mode
-TEXT_CONTENT: (~[(){}|\]"])+;
-
-mode ELLIPSE_TEXT_MODE;
-ELLIPSE_END: '-)' -> popMode, type(ELLIPSE_END_TOKEN);
-ELLIPSE_TEXT: (~[-)])+;
-
-mode TRAP_TEXT_MODE;
-TRAP_END_BRACKET: '\\]' -> popMode, type(TRAPEND);
-INVTRAP_END_BRACKET: '/]' -> popMode, type(INVTRAPEND);
-TRAP_TEXT: (~[\\/\]])+;
-
-mode EDGE_TEXT_MODE;
-// Handle space-delimited pattern: A-- text ----B or A-- text -->B (matches Jison: [^-]|\-(?!\-)+)
-// Must handle both cases: extra dashes without arrow (----) and dashes with arrow (-->)
-EDGE_TEXT_LINK_END: WS* '--' '-'* [-xo>]? WS* -> popMode, type(LINK_NORMAL);
-// Match any character including spaces and single dashes, but not double dashes
-EDGE_TEXT: (~[-] | '-' ~[-])+;
-
-mode THICK_EDGE_TEXT_MODE;
-// Handle thick edge patterns: A== text ====B or A== text ==>B
-THICK_EDGE_TEXT_LINK_END: WS* '==' '='* [=xo>]? WS* -> popMode, type(LINK_THICK);
-THICK_EDGE_TEXT: (~[=] | '=' ~[=])+;
-
-mode DOTTED_EDGE_TEXT_MODE;
-// Handle dotted edge patterns: A-. text ...-B or A-. text .->B
-DOTTED_EDGE_TEXT_LINK_END: WS* '.'+ '-' [xo>]? WS* -> popMode, type(LINK_DOTTED);
-DOTTED_EDGE_TEXT: ~[.]+;
-
-

packages/mermaid/src/diagrams/flowchart/parser/antlr/FlowParser.g4

@@ -1,286 +0,0 @@
-parser grammar FlowParser;
-
-options {
-    tokenVocab = FlowLexer;
-}
-
-// Entry point - matches Jison's "start: graphConfig document"
-start: graphConfig document;
-
-// Document structure - matches Jison's document rule
-document:
-    line*
-    ;
-
-// Line structure - matches Jison's line rule
-line:
-    statement
-    | SEMI
-    | NEWLINE
-    | WS
-    ;
-
-// Graph configuration - matches Jison's graphConfig rule
-graphConfig:
-    WS graphConfig
-    | NEWLINE graphConfig
-    | GRAPH NODIR                           // Default TB direction
-    | GRAPH DIR firstStmtSeparator          // Explicit direction
-    ;
-
-// Statement types - matches Jison's statement rule
-statement:
-    vertexStatement separator
-    | standaloneVertex separator           // For edge property statements like e1@{curve: basis}
-    | styleStatement separator
-    | linkStyleStatement separator
-    | classDefStatement separator
-    | classStatement separator
-    | clickStatement separator
-    | subgraphStatement separator
-    | direction
-    | accTitle
-    | accDescr
-    ;
-
-// Separators
-separator: NEWLINE | SEMI | EOF;
-firstStmtSeparator: SEMI | NEWLINE | spaceList NEWLINE;
-spaceList: WS spaceList | WS;
-
-// Vertex statement - matches Jison's vertexStatement rule
-vertexStatement:
-    vertexStatement link node shapeData     // Chain with shape data
-    | vertexStatement link node             // Chain without shape data
-    | vertexStatement link node spaceList  // Chain with trailing space
-    | node spaceList                        // Single node with space
-    | node shapeData                        // Single node with shape data
-    | node                                  // Single node
-    ;
-
-// Standalone vertex - for edge property statements like e1@{curve: basis}
-standaloneVertex:
-    NODE_STRING shapeData
-    | LINK_ID shapeData                     // For edge IDs like e1@{curve: basis}
-    ;
-
-// Node definition - matches Jison's node rule
-node:
-    styledVertex
-    | node shapeData spaceList AMP spaceList styledVertex
-    | node spaceList AMP spaceList styledVertex
-    ;
-
-// Styled vertex - matches Jison's styledVertex rule
-styledVertex:
-    vertex
-    | vertex STYLE_SEPARATOR idString
-    ;
-
-// Vertex shapes - matches Jison's vertex rule
-vertex:
-    idString SQS text SQE                                           // Square: [text]
-    | idString DOUBLECIRCLE_START text DOUBLECIRCLEEND             // Double circle: (((text)))
-    | idString CIRCLE_START text CIRCLEEND                         // Circle: ((text))
-    | idString ELLIPSE_START text ELLIPSE_END_TOKEN                // Ellipse: (-text-)
-    | idString STADIUM_START text STADIUMEND                       // Stadium: ([text])
-    | idString SUBROUTINE_START text SUBROUTINEEND                 // Subroutine: [[text]]
-    | idString VERTEX_WITH_PROPS_START NODE_STRING COLON NODE_STRING PIPE text SQE  // Props: [|field:value|text]
-    | idString CYLINDER_START text CYLINDEREND                     // Cylinder: [(text)]
-    | idString PS text PE                                          // Round: (text)
-    | idString DIAMOND_START text DIAMOND_STOP                     // Diamond: {text}
-    | idString DIAMOND_START DIAMOND_START text DIAMOND_STOP DIAMOND_STOP  // Hexagon: {{text}}
-    | idString TAGEND text SQE                                     // Odd: >text]
-    | idString TRAP_START text TRAPEND                             // Trapezoid: [/text\]
-    | idString INVTRAP_START text INVTRAPEND                       // Inv trapezoid: [\text/]
-    | idString TRAP_START text INVTRAPEND                          // Lean right: [/text/]
-    | idString INVTRAP_START text TRAPEND                          // Lean left: [\text\]
-    | idString                                                     // Plain node
-    ;
-
-// Link definition - matches Jison's link rule
-link:
-    linkStatement arrowText spaceList?
-    | linkStatement
-    | START_LINK_NORMAL edgeText LINK_NORMAL
-    | START_LINK_NORMAL_NOSPACE edgeText LINK_NORMAL
-    | START_LINK_THICK edgeText LINK_THICK
-    | START_LINK_DOTTED edgeText LINK_DOTTED
-    | LINK_ID START_LINK_NORMAL edgeText LINK_NORMAL
-    | LINK_ID START_LINK_NORMAL_NOSPACE edgeText LINK_NORMAL
-    | LINK_ID START_LINK_THICK edgeText LINK_THICK
-    | LINK_ID START_LINK_DOTTED edgeText LINK_DOTTED
-    ;
-
-// Link statement - matches Jison's linkStatement rule
-linkStatement:
-    LINK_NORMAL
-    | LINK_THICK
-    | LINK_DOTTED
-    | LINK_INVISIBLE
-    | LINK_STATEMENT_NORMAL
-    | LINK_STATEMENT_DOTTED
-    | LINK_ID LINK_NORMAL
-    | LINK_ID LINK_THICK
-    | LINK_ID LINK_DOTTED
-    | LINK_ID LINK_INVISIBLE
-    | LINK_ID LINK_STATEMENT_NORMAL
-    | LINK_ID LINK_STATEMENT_THICK
-    ;
-
-// Edge text - matches Jison's edgeText rule
-edgeText:
-    edgeTextToken
-    | edgeText edgeTextToken
-    | stringLiteral
-    | MD_STR
-    ;
-
-// Arrow text - matches Jison's arrowText rule
-arrowText:
-    PIPE text PIPE
-    ;
-
-// Text definition - matches Jison's text rule
-text:
-    textToken
-    | text textToken
-    | stringLiteral
-    | MD_STR
-    | NODE_STRING
-    | TEXT_CONTENT
-    | ELLIPSE_TEXT
-    | TRAP_TEXT
-    ;
-
-// Shape data - matches Jison's shapeData rule
-shapeData:
-    SHAPE_DATA_START shapeDataContent SHAPE_DATA_END
-    ;
-
-shapeDataContent:
-    shapeDataContent SHAPE_DATA_CONTENT
-    | shapeDataContent SHAPE_DATA_STRING_START SHAPE_DATA_STRING_CONTENT SHAPE_DATA_STRING_END
-    | SHAPE_DATA_CONTENT
-    | SHAPE_DATA_STRING_START SHAPE_DATA_STRING_CONTENT SHAPE_DATA_STRING_END
-    |
-    ;
-
-// Style statement - matches Jison's styleStatement rule
-styleStatement:
-    STYLE WS idString WS stylesOpt
-    ;
-
-// Link style statement - matches Jison's linkStyleStatement rule
-linkStyleStatement:
-    LINKSTYLE WS DEFAULT WS stylesOpt
-    | LINKSTYLE WS numList WS stylesOpt
-    | LINKSTYLE WS DEFAULT WS INTERPOLATE WS alphaNum WS stylesOpt
-    | LINKSTYLE WS numList WS INTERPOLATE WS alphaNum WS stylesOpt
-    | LINKSTYLE WS DEFAULT WS INTERPOLATE WS alphaNum
-    | LINKSTYLE WS numList WS INTERPOLATE WS alphaNum
-    ;
-
-// Class definition statement - matches Jison's classDefStatement rule
-classDefStatement:
-    CLASSDEF WS idString WS stylesOpt
-    ;
-
-// Class statement - matches Jison's classStatement rule
-classStatement:
-    CLASS WS idString WS idString
-    ;
-
-// String rule to handle STR patterns
-stringLiteral:
-    STR
-    ;
-
-// Click statement - matches Jison's clickStatement rule
-// CLICK token now contains both 'click' and node ID (like Jison)
-clickStatement:
-    CLICK CALLBACKNAME
-    | CLICK CALLBACKNAME stringLiteral
-    | CLICK CALLBACKNAME CALLBACKARGS
-    | CLICK CALLBACKNAME CALLBACKARGS stringLiteral
-    | CLICK CALL CALLBACKNAME
-    | CLICK CALL CALLBACKNAME stringLiteral
-    | CLICK CALL CALLBACKNAME CALLBACKARGS
-    | CLICK CALL CALLBACKNAME CALLBACKARGS stringLiteral
-    | CLICK HREF stringLiteral
-    | CLICK HREF stringLiteral stringLiteral
-    | CLICK HREF stringLiteral LINK_TARGET
-    | CLICK HREF stringLiteral stringLiteral LINK_TARGET
-    | CLICK stringLiteral                                    // CLICK STR - direct click with URL
-    | CLICK stringLiteral stringLiteral                      // CLICK STR STR - click with URL and tooltip
-    | CLICK stringLiteral LINK_TARGET                        // CLICK STR LINK_TARGET - click with URL and target
-    | CLICK stringLiteral stringLiteral LINK_TARGET          // CLICK STR STR LINK_TARGET - click with URL, tooltip, and target
-    ;
-
-// Subgraph statement - matches Jison's subgraph rules
-subgraphStatement:
-    SUBGRAPH WS textNoTags SQS text SQE separator document END
-    | SUBGRAPH WS textNoTags separator document END
-    | SUBGRAPH separator document END
-    ;
-
-// Direction statement - matches Jison's direction rule
-direction:
-    DIRECTION_TB
-    | DIRECTION_BT
-    | DIRECTION_RL
-    | DIRECTION_LR
-    ;
-
-// Accessibility statements
-accTitle: ACC_TITLE ACC_TITLE_VALUE;
-accDescr: ACC_DESCR ACC_DESCR_VALUE | ACC_DESCR_MULTI ACC_DESCR_MULTILINE_VALUE ACC_DESCR_MULTILINE_END;
-
-// Number list - matches Jison's numList rule
-numList:
-    NUM
-    | numList COMMA NUM
-    ;
-
-// Styles - matches Jison's stylesOpt rule
-stylesOpt:
-    style
-    | stylesOpt COMMA style
-    ;
-
-// Style components - matches Jison's style rule
-style:
-    styleComponent
-    | style styleComponent
-    ;
-
-// Style component - matches Jison's styleComponent rule
-styleComponent: NUM | NODE_STRING | COLON | WS | BRKT | STYLE | MULT | MINUS;
-
-// Token definitions - matches Jison's token lists
-idString:
-    idStringToken
-    | idString idStringToken
-    ;
-
-alphaNum:
-    alphaNumToken
-    | alphaNum alphaNumToken
-    ;
-
-textNoTags:
-    textNoTagsToken
-    | textNoTags textNoTagsToken
-    | stringLiteral
-    | MD_STR
-    ;
-
-// Token types - matches Jison's token definitions
-idStringToken: NUM | NODE_STRING | DOWN | MINUS | DEFAULT | COMMA | COLON | AMP | BRKT | MULT | UNICODE_TEXT;
-textToken: TEXT_CONTENT | TAGSTART | TAGEND | UNICODE_TEXT | NODE_STRING | WS;
-textNoTagsToken: NUM | NODE_STRING | WS | MINUS | AMP | UNICODE_TEXT | COLON | MULT | BRKT | keywords | START_LINK_NORMAL;
-edgeTextToken: EDGE_TEXT | THICK_EDGE_TEXT | DOTTED_EDGE_TEXT | UNICODE_TEXT;
-alphaNumToken: NUM | UNICODE_TEXT | NODE_STRING | DIR | DOWN | MINUS | COMMA | COLON | AMP | BRKT | MULT;
-
-// Keywords - matches Jison's keywords rule
-keywords: STYLE | LINKSTYLE | CLASSDEF | CLASS | CLICK | GRAPH | DIR | SUBGRAPH | END | DOWN | UP;