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

.changeset/beige-peas-shave.md

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

.changeset/gold-olives-rule.md

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

.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/large-mirrors-cheer.md

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

.changeset/lemon-masks-unite.md

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

.changeset/light-flowers-judge.md

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

.changeset/lovely-queens-own.md

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

.changeset/ninety-roses-turn.md

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

.changeset/platinum-olives-rule.md

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

.changeset/rare-women-fly.md

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

.changeset/silver-eyes-build.md

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

.changeset/slimy-peaches-win.md

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

.changeset/smart-humans-cover.md

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

.changeset/tangy-ghosts-watch.md

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

.changeset/thick-women-find.md

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

.changeset/vast-buses-see.md

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

.changeset/wild-areas-lick.md

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

.github/lychee.toml

@@ -52,9 +52,6 @@ exclude = [
 # Swimm returns 404, even though the link is valid
 "https://docs.swimm.io",
 
-# Certificate Error
-"https://noteshub.app",
-
 # Timeout
 "https://huehive.co",
 "https://foswiki.org",

.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@07cbaebb4bfc9c5d7db426ea5a5f585df29dd0a0
+        uses: peter-evans/create-pull-request@889dce9eaba7900ce30494f5e1ac7220b27e5c81
         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
@@ -46,12 +46,11 @@ jobs:
 
           # If any issues, output them and fail
           if [ ${#issues[@]} -gt 0 ]; then
-            # Use the new GITHUB_OUTPUT approach to set a multiline output
             {
               echo "errors<<EOF"
               printf '%s\n' "${issues[@]}"
               echo "EOF"
-            } >> $GITHUB_OUTPUT
+            } >> "$GITHUB_OUTPUT"
             exit 1
           fi
 
@@ -63,6 +62,7 @@ jobs:
           issue-number: ${{ github.event.pull_request.number }}
           body: |
             The following issue(s) were detected:
+              
             ${{ steps.validate.outputs.errors }}
 
             Please address these and push an update.

CHANGELOG.md

@@ -1 +0,0 @@
-./packages/mermaid/CHANGELOG.md

__mocks__/d3.ts

@@ -0,0 +1,13 @@
+import { MockedD3 } from '../packages/mermaid/src/tests/MockedD3.js';
+
+export const select = function () {
+  return new MockedD3();
+};
+
+export const selectAll = function () {
+  return new MockedD3();
+};
+
+export const curveBasis = 'basis';
+export const curveLinear = 'linear';
+export const curveCardinal = 'cardinal';

cypress/integration/rendering/block.spec.js

@@ -384,17 +384,4 @@ describe('Block diagram', () => {
       {}
     );
   });
-
-  it('BL30: block should overflow if too wide for columns', () => {
-    imgSnapshotTest(
-      `block-beta
-  columns 2
-  fit:2
-  overflow:3
-  short:1
-  also_overflow:2
-`,
-      {}
-    );
-  });
 });

cypress/integration/rendering/classDiagram.spec.js

@@ -495,34 +495,4 @@ describe('Class diagram', () => {
       cy.get('a').should('have.attr', 'target', '_blank').should('have.attr', 'rel', 'noopener');
     });
   });
-
-  describe('Include char sequence "graph" in text (#6795)', () => {
-    it('has a label with char sequence "graph"', () => {
-      imgSnapshotTest(
-        `
-        classDiagram
-          class Person {
-            +String name
-            -Int id
-            #double age
-            +Text demographicProfile
-          }
-        `,
-        { flowchart: { defaultRenderer: 'elk' } }
-      );
-    });
-  });
-
-  it('should handle backticks for namespace and class names', () => {
-    imgSnapshotTest(
-      `
-      classDiagram
-          namespace \`A::B\` {
-              class \`IPC::Sender\`
-          }
-          RenderProcessHost --|> \`IPC::Sender\`
-      `,
-      {}
-    );
-  });
 });

cypress/integration/rendering/erDiagram.spec.js

@@ -354,19 +354,4 @@ ORDER ||--|{ LINE-ITEM : contains
       { logLevel: 1 }
     );
   });
-
-  describe('Include char sequence "graph" in text (#6795)', () => {
-    it('has a label with char sequence "graph"', () => {
-      imgSnapshotTest(
-        `
-        erDiagram
-          p[Photograph] {
-            varchar(12) jobId
-            date dateCreated
-          }
-        `,
-        { flowchart: { defaultRenderer: 'elk' } }
-      );
-    });
-  });
 });

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

@@ -1113,24 +1113,4 @@ end
       );
     });
   });
-
-  it('6617: Per Link Curve Styling using edge Ids', () => {
-    imgSnapshotTest(
-      `flowchart TD
-      A e1@-->B e5@--> E
-      E e7@--> D
-      B e3@-->D
-      A e2@-->C e4@-->D
-      C e6@--> F
-      F e8@--> D
-      e1@{ curve: natural }
-      e2@{ curve: stepAfter }
-      e3@{ curve: monotoneY }
-      e4@{ curve: bumpY }
-      e5@{ curve: linear }
-      e6@{ curve: catmullRom }
-      e7@{ curve: cardinal }
-      `
-    );
-  });
 });

cypress/integration/rendering/mindmap.spec.ts

@@ -246,22 +246,5 @@ Word!\`]
       );
     });
   });
-  describe('Include char sequence "graph" in text (#6795)', () => {
-    it('has a label with char sequence "graph"', () => {
-      imgSnapshotTest(
-        `
-        mindmap
-          root
-            Photograph
-              Waterfall
-              Landscape
-            Geography
-              Mountains
-              Rocks
-        `,
-        { flowchart: { defaultRenderer: 'elk' } }
-      );
-    });
-  });
   /* The end */
 });

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

@@ -1,644 +0,0 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
-
-const looks = ['classic'];
-const participantTypes = [
-  'participant',
-  'actor',
-  'boundary',
-  'control',
-  'entity',
-  'database',
-  'collections',
-  'queue',
-];
-
-const interactionTypes = [
-  '->>', // Solid arrow with arrowhead
-  '-->>', // Dotted arrow with arrowhead
-  '->', // Solid arrow without arrowhead
-  '-->', // Dotted arrow without arrowhead
-  '-x', // Solid arrow with cross
-  '--x', // Dotted arrow with cross
-  '->>+', // Solid arrow with arrowhead (activate)
-  '-->>+', // Dotted arrow with arrowhead (activate)
-];
-
-const notePositions = ['left of', 'right of', 'over'];
-
-looks.forEach((look) => {
-  describe(`Sequence Diagram Tests - ${look} look`, () => {
-    it('should render all participant types', () => {
-      let diagramCode = `sequenceDiagram\n`;
-      participantTypes.forEach((type, index) => {
-        diagramCode += `  ${type} ${type}${index} as ${type} ${index}\n`;
-      });
-      // Add some basic interactions
-      for (let i = 0; i < participantTypes.length - 1; i++) {
-        diagramCode += `  ${participantTypes[i]}${i} ->> ${participantTypes[i + 1]}${i + 1}: Message ${i}\n`;
-      }
-      imgSnapshotTest(diagramCode, { look, sequence: { diagramMarginX: 50, diagramMarginY: 10 } });
-    });
-
-    it('should render all interaction types', () => {
-      let diagramCode = `sequenceDiagram\n`;
-      // Create two participants
-      // Add all interaction types
-      diagramCode += `  participant A\n`;
-      diagramCode += `  participant B\n`;
-      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((type, index) => {
-        diagramCode += `  ${type} A\n`;
-        diagramCode += `  ${type} B\n`;
-        diagramCode += `  create ${type} ${type}${index}\n`;
-        diagramCode += `  A ->> ${type}${index}: Hello ${type}\n`;
-        if (index % 2 === 0) {
-          diagramCode += `  destroy ${type}${index}\n`;
-        }
-      });
-      imgSnapshotTest(diagramCode, { look });
-    });
-
-    it('should render notes in all positions', () => {
-      let diagramCode = `sequenceDiagram\n`;
-      diagramCode += `  participant A\n`;
-      diagramCode += `  participant B\n`;
-      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((type, index) => {
-        diagramCode += `  ${type} ${type}${index}\n`;
-      });
-      diagramCode += `  par Parallel actions\n`;
-      for (let i = 0; i < participantTypes.length - 1; i += 2) {
-        diagramCode += `    ${participantTypes[i]}${i} ->> ${participantTypes[i + 1]}${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 += `  participant A\n`;
-      diagramCode += `  participant B\n`;
-      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((type, index) => {
-        diagramCode += `  ${type} ${type}${index}\n`;
-      });
-      diagramCode += `  loop For each participant\n`;
-      for (let i = 0; i < 3; i++) {
-        diagramCode += `    ${participantTypes[0]}0 ->> ${participantTypes[1]}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((type, index) => {
-        diagramCode += `    ${type} ${type}${index}\n`;
-      });
-      diagramCode += `  end\n`;
-      diagramCode += `  box rgb(200,220,255) Group 2\n`;
-      participantTypes.slice(3, 6).forEach((type, index) => {
-        diagramCode += `    ${type} ${type}${index}\n`;
-      });
-      diagramCode += `  end\n`;
-      // Add some interactions
-      diagramCode += `  ${participantTypes[0]}0 ->> ${participantTypes[3]}0: Cross-group message\n`;
-      imgSnapshotTest(diagramCode, { look });
-    });
-
-    it('should render with different font settings', () => {
-      let diagramCode = `sequenceDiagram\n`;
-      participantTypes.slice(0, 3).forEach((type, index) => {
-        diagramCode += `  ${type} ${type}${index}\n`;
-      });
-      diagramCode += `  ${participantTypes[0]}0 ->> ${participantTypes[1]}1: Regular message\n`;
-      diagramCode += `  Note right of ${participantTypes[1]}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
-          boundary LoginUI
-          control AuthService
-          database UserDB
-        end
-        
-        box rgb(200,255,220) Order Processing
-          entity Order
-          queue OrderQueue
-          collections AuditLogs
-        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
-        actor User
-        participant AuthService as Authentication Service
-        boundary UI
-        control OrderController
-        entity Product
-        database MongoDB
-        collections Products
-        queue OrderQueue
-        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
-      actor Customer
-      participant Frontend
-      boundary PaymentGateway
-      Customer ->> Frontend: Place order
-      Frontend ->> OrderProcessor: Process order
-      create database OrderDB
-      OrderProcessor ->> OrderDB: Save order
-      `
-      );
-    });
-
-    it('should handle complex interactions between different participant types', () => {
-      imgSnapshotTest(
-        `
-      sequenceDiagram
-    box rgba(200,220,255,0.5) System Components
-    actor User
-    boundary WebUI
-    control API
-    entity BusinessLogic
-    database MainDB
-    end
-    box rgba(200,255,220,0.5) External Services
-    queue MessageQueue
-    database AuditLogs
-    end
-
-    User ->> WebUI: Submit request
-    WebUI ->> API: Process request
-    API ->> BusinessLogic: Execute business rules
-    BusinessLogic ->> MainDB: Query data
-    MainDB -->> BusinessLogic: Return results
-    BusinessLogic ->> MessageQueue: Publish event
-    MessageQueue -->> AuditLogs: Store audit trail
-    AuditLogs -->> API: Audit complete
-    API -->> WebUI: Return response
-    WebUI -->> User: Show results
-      `,
-        { sequence: { useMaxWidth: false } }
-      );
-    });
-
-    it('should render parallel processes with different participant types', () => {
-      imgSnapshotTest(
-        `
-      sequenceDiagram
-        actor Customer
-        participant Frontend
-        boundary PaymentService
-        control InventoryManager
-        entity Order
-        database OrdersDB
-        queue NotificationQueue
-        
-        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
-    boundary AuthService
-    control UserManager
-    entity UserProfile
-    database UserDB
-    database Logs
-    
-    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
-        boundary CloudService
-        control DataProcessor
-        entity Transaction
-        database TransactionsDB
-        queue EventBus
-        
-        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
-        actor LongNameUser as User With A Very<br/>Long Name
-        participant FE as Frontend Service<br/>With Long Name
-        boundary B as Boundary With<br/>Multiline Name
-        control C as Control With<br/>Multiline Name
-        entity E as Entity With<br/>Multiline Name
-        database DB as Database With<br/>Multiline Name
-        collections COL as Collections With<br/>Multiline Name
-        queue Q as Queue With<br/>Multiline Name
-        
-        LongNameUser ->> FE: This is a very long message that should wrap properly in the diagram
-        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
-      boundary Alice
-      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
-      control Alice
-      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
-      entity Alice
-      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
-      database Alice
-      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
-      collections Alice
-      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
-      queue Alice
-      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
-      boundary Charlie
-      note over Alice: Some note
-      note over Charlie: Other note
-    `,
-          {}
-        );
-      });
-
-      it('should render long messages from database to collections', () => {
-        imgSnapshotTest(
-          `
-      sequenceDiagram
-      database Alice
-      collections Bob
-      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
-      control Alice
-      entity Bob
-      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
-      queue Alice
-      boundary Bob
-      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
-      database Bob
-      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
-        boundary Bob
-        control John as John<br/>Second Line
-        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
-        boundary Bob
-        control John as John<br/>Second Line
-        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');
-      });
-    });
-  });
-});

docs/community/contributing.md

@@ -301,7 +301,7 @@ If you are adding a feature, you will definitely need to add tests. Depending on
 
 Unit tests are tests that test a single function or module. They are the easiest to write and the fastest to run.
 
-Unit tests are mandatory for all code except the layout tests. (The layouts are tested with integration tests.)
+Unit tests are mandatory for all code except the renderers. (The renderers are tested with integration tests.)
 
 We use [Vitest](https://vitest.dev) to run unit tests.
 
@@ -327,30 +327,6 @@ When using Docker prepend your command with `./run`:
 ./run pnpm test
 ```
 
-##### Testing the DOM
-
-One can use `jsdomIt` to test any part of Mermaid that interacts with the DOM, as long as it is not related to the layout.
-
-The function `jsdomIt` ([developed in utils.ts](../../tests/util.ts)) overrides `it` from `vitest`, and creates a pseudo-browser environment that works almost like the real deal for the duration of the test. It uses JSDOM to create a DOM, and adds objects `window` and `document` to `global` to mock the browser environment.
-
-> \[!NOTE]
-> The layout cannot work in `jsdomIt` tests because JSDOM has no rendering engine, hence the pseudo-browser environment.
-
-Example :
-
-```typescript
-import { ensureNodeFromSelector, jsdomIt } from './tests/util.js';
-
-jsdomIt('should add element "thing" in the SVG', ({ svg }) => {
-  // Code in this block runs in a pseudo-browser environment
-  addThing(svg); // The svg item is the D3 selection of the SVG node
-  const svgNode = ensureNodeFromSelector('svg'); // Retrieve the DOM node using the DOM API
-  expect(svgNode.querySelector('thing')).not.toBeNull(); // Test the structure of the SVG
-});
-```
-
-They can be used to test any method that interacts with the DOM, including for testing renderers. For renderers, additional integration testing is necessary to test the layout though.
-
 #### Integration / End-to-End (E2E) Tests
 
 These test the rendering and visual appearance of the diagrams.

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

@@ -10,7 +10,7 @@
 
 # Interface: ParseOptions
 
-Defined in: [packages/mermaid/src/types.ts:72](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L72)
+Defined in: [packages/mermaid/src/types.ts:59](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L59)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:72](https://github.com/mermaid-js/mer
 
 > `optional` **suppressErrors**: `boolean`
 
-Defined in: [packages/mermaid/src/types.ts:77](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L77)
+Defined in: [packages/mermaid/src/types.ts:64](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L64)
 
 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:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L80)
+Defined in: [packages/mermaid/src/types.ts:67](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L67)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:80](https://github.com/mermaid-js/mer
 
 > **config**: [`MermaidConfig`](MermaidConfig.md)
 
-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:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L75)
 
 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:84](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L84)
+Defined in: [packages/mermaid/src/types.ts:71](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L71)
 
 The diagram type, e.g. 'flowchart', 'sequence', etc.

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

@@ -10,7 +10,7 @@
 
 # Interface: RenderResult
 
-Defined in: [packages/mermaid/src/types.ts:98](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L98)
+Defined in: [packages/mermaid/src/types.ts:85](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L85)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:98](https://github.com/mermaid-js/mer
 
 > `optional` **bindFunctions**: (`element`) => `void`
 
-Defined in: [packages/mermaid/src/types.ts:116](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L116)
+Defined in: [packages/mermaid/src/types.ts:103](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L103)
 
 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:106](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L106)
+Defined in: [packages/mermaid/src/types.ts:93](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L93)
 
 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:102](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L102)
+Defined in: [packages/mermaid/src/types.ts:89](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L89)
 
 The svg code for the rendered graph.

docs/diagrams/flowchart-code-flow.mmd

@@ -1,189 +0,0 @@
----
-references:
-  - "File: /packages/mermaid/src/diagrams/flowchart/flowDiagram.ts"
-  - "File: /packages/mermaid/src/diagrams/flowchart/flowDb.ts"
-  - "File: /packages/mermaid/src/diagrams/flowchart/flowDetector.ts"
-  - "File: /packages/mermaid/src/diagrams/flowchart/flowDetector-v2.ts"
-  - "File: /packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts"
-  - "File: /packages/mermaid/src/diagrams/flowchart/styles.ts"
-  - "File: /packages/mermaid/src/diagrams/flowchart/types.ts"
-  - "File: /packages/mermaid/src/diagrams/flowchart/flowChartShapes.js"
-  - "File: /packages/mermaid/src/diagrams/flowchart/parser/flowParser.ts"
-  - "File: /packages/mermaid/src/diagrams/flowchart/elk/detector.ts"
-generationTime: 2025-07-23T10:31:53.266Z
----
-flowchart TD
-    %% Entry Points and Detection
-    Input["User Input Text"] --> Detection{Detection Phase}
-    
-    Detection --> flowDetector["flowDetector.ts<br/>detector(txt, config)"]
-    Detection --> flowDetectorV2["flowDetector-v2.ts<br/>detector(txt, config)"]
-    Detection --> elkDetector["elk/detector.ts<br/>detector(txt, config)"]
-    
-    flowDetector --> |"Checks /^\s*graph/"| DetectLegacy{Legacy Flowchart?}
-    flowDetectorV2 --> |"Checks /^\s*flowchart/"| DetectNew{New Flowchart?}
-    elkDetector --> |"Checks /^\s*flowchart-elk/"| DetectElk{ELK Layout?}
-    
-    DetectLegacy --> |Yes| LoadDiagram
-    DetectNew --> |Yes| LoadDiagram
-    DetectElk --> |Yes| LoadDiagram
-    
-    %% Loading Phase
-    LoadDiagram["loader() function"] --> flowDiagram["flowDiagram.ts<br/>diagram object"]
-    
-    flowDiagram --> DiagramStructure{Diagram Components}
-    DiagramStructure --> Parser["parser: flowParser"]
-    DiagramStructure --> Database["db: new FlowDB()"]
-    DiagramStructure --> Renderer["renderer: flowRenderer-v3-unified"]
-    DiagramStructure --> Styles["styles: flowStyles"]
-    DiagramStructure --> Init["init: (cnf: MermaidConfig)"]
-    
-    %% Parser Phase
-    Parser --> flowParser["parser/flowParser.ts<br/>newParser.parse(src)"]
-    flowParser --> |"Preprocesses src"| RemoveWhitespace["Remove trailing whitespace<br/>src.replace(/}\s*\n/g, '}\n')"]
-    RemoveWhitespace --> flowJison["parser/flow.jison<br/>flowJisonParser.parse(newSrc)"]
-    
-    flowJison --> ParseGraph["Parse Graph Structure"]
-    ParseGraph --> ParseVertices["Parse Vertices"]
-    ParseGraph --> ParseEdges["Parse Edges"]
-    ParseGraph --> ParseSubgraphs["Parse Subgraphs"]
-    ParseGraph --> ParseClasses["Parse Classes"]
-    ParseGraph --> ParseStyles["Parse Styles"]
-    
-    %% Database Phase - FlowDB Class
-    Database --> FlowDBClass["flowDb.ts<br/>FlowDB class"]
-    
-    FlowDBClass --> DBInit["constructor()<br/>- Initialize counters<br/>- Bind methods<br/>- Setup toolTips<br/>- Call clear()"]
-    
-    DBInit --> DBMethods{FlowDB Methods}
-    
-    DBMethods --> addVertex["addVertex(id, textObj, type, style,<br/>classes, dir, props, metadata)"]
-    DBMethods --> addLink["addLink(_start[], _end[], linkData)"]
-    DBMethods --> addSingleLink["addSingleLink(_start, _end, type, id)"]
-    DBMethods --> setDirection["setDirection(dir)"]
-    DBMethods --> addSubGraph["addSubGraph(nodes[], id, title)"]
-    DBMethods --> addClass["addClass(id, style)"]
-    DBMethods --> setClass["setClass(ids, className)"]
-    DBMethods --> setTooltip["setTooltip(ids, tooltip)"]
-    DBMethods --> setClickEvent["setClickEvent(id, functionName, args)"]
-    DBMethods --> setClickFun["setClickFun(id, functionName, args)"]
-    
-    %% Vertex Processing
-    addVertex --> VertexProcess{Vertex Processing}
-    VertexProcess --> CreateVertex["Create FlowVertex object<br/>- id, labelType, domId<br/>- styles[], classes[]"]
-    VertexProcess --> SanitizeText["sanitizeText(textObj.text)"]
-    VertexProcess --> ParseMetadata["Parse YAML metadata<br/>yaml.load(yamlData)"]
-    VertexProcess --> SetVertexProps["Set vertex properties<br/>- shape, label, icon, form<br/>- pos, img, constraint, w, h"]
-    
-    %% Edge Processing  
-    addSingleLink --> EdgeProcess{Edge Processing}
-    EdgeProcess --> CreateEdge["Create FlowEdge object<br/>- start, end, type, text<br/>- labelType, classes[]"]
-    EdgeProcess --> ProcessLinkText["Process link text<br/>- sanitizeText()<br/>- strip quotes"]
-    EdgeProcess --> SetEdgeProps["Set edge properties<br/>- type, stroke, length"]
-    EdgeProcess --> GenerateEdgeId["Generate edge ID<br/>getEdgeId(start, end, counter)"]
-    EdgeProcess --> ValidateEdgeLimit["Validate edge limit<br/>maxEdges check"]
-    
-    %% Data Collection
-    DBMethods --> GetData["getData()"]
-    GetData --> CollectNodes["Collect nodes[] from vertices"]
-    GetData --> CollectEdges["Collect edges[] from edges"]
-    GetData --> ProcessSubGraphs["Process subgraphs<br/>- parentDB Map<br/>- subGraphDB Map"]
-    GetData --> AddNodeFromVertex["addNodeFromVertex()<br/>for each vertex"]
-    GetData --> ProcessEdgeTypes["destructEdgeType()<br/>arrowTypeStart, arrowTypeEnd"]
-    
-    %% Node Creation
-    AddNodeFromVertex --> NodeCreation{Node Creation}
-    NodeCreation --> FindExistingNode["findNode(nodes, vertex.id)"]
-    NodeCreation --> CreateBaseNode["Create base node<br/>- id, label, parentId<br/>- cssStyles, cssClasses<br/>- shape, domId, tooltip"]
-    NodeCreation --> GetCompiledStyles["getCompiledStyles(classDefs)"]
-    NodeCreation --> GetTypeFromVertex["getTypeFromVertex(vertex)"]
-    
-    %% Rendering Phase
-    Renderer --> flowRendererV3["flowRenderer-v3-unified.ts<br/>draw(text, id, version, diag)"]
-    
-    flowRendererV3 --> RenderInit["Initialize rendering<br/>- getConfig()<br/>- handle securityLevel<br/>- getDiagramElement()"]
-    
-    RenderInit --> GetLayoutData["diag.db.getData()<br/>as LayoutData"]
-    GetLayoutData --> SetupLayoutData["Setup layout data<br/>- type, layoutAlgorithm<br/>- direction, spacing<br/>- markers, diagramId"]
-    
-    SetupLayoutData --> CallRender["render(data4Layout, svg)"]
-    CallRender --> SetupViewPort["setupViewPortForSVG(svg, padding)"]
-    SetupViewPort --> ProcessLinks["Process vertex links<br/>- create anchor elements<br/>- handle click events"]
-    
-    %% Shape Rendering
-    CallRender --> ShapeSystem["flowChartShapes.js<br/>Shape Functions"]
-    
-    ShapeSystem --> ShapeFunctions{Shape Functions}
-    ShapeFunctions --> question["question(parent, bbox, node)"]
-    ShapeFunctions --> hexagon["hexagon(parent, bbox, node)"]
-    ShapeFunctions --> rect_left_inv_arrow["rect_left_inv_arrow(parent, bbox, node)"]
-    ShapeFunctions --> lean_right["lean_right(parent, bbox, node)"]
-    ShapeFunctions --> lean_left["lean_left(parent, bbox, node)"]
-    
-    ShapeFunctions --> insertPolygonShape["insertPolygonShape(parent, w, h, points)"]
-    ShapeFunctions --> intersectPolygon["intersectPolygon(node, points, point)"]
-    ShapeFunctions --> intersectRect["intersectRect(node, point)"]
-    
-    %% Styling System
-    Styles --> stylesTS["styles.ts<br/>getStyles(options)"]
-    stylesTS --> StyleOptions["FlowChartStyleOptions<br/>- arrowheadColor, border2<br/>- clusterBkg, mainBkg<br/>- fontFamily, textColor"]
-    
-    StyleOptions --> GenerateCSS["Generate CSS styles<br/>- .label, .cluster-label<br/>- .node, .edgePath<br/>- .flowchart-link, .edgeLabel"]
-    GenerateCSS --> GetIconStyles["getIconStyles()"]
-    
-    %% Type System
-    Parser --> TypeSystem["types.ts<br/>Type Definitions"]
-    TypeSystem --> FlowVertex["FlowVertex interface"]
-    TypeSystem --> FlowEdge["FlowEdge interface"]
-    TypeSystem --> FlowClass["FlowClass interface"]
-    TypeSystem --> FlowSubGraph["FlowSubGraph interface"]
-    TypeSystem --> FlowVertexTypeParam["FlowVertexTypeParam<br/>Shape types"]
-    
-    %% Utility Functions
-    DBMethods --> UtilityFunctions{Utility Functions}
-    UtilityFunctions --> lookUpDomId["lookUpDomId(id)"]
-    UtilityFunctions --> getClasses["getClasses()"]
-    UtilityFunctions --> getDirection["getDirection()"]
-    UtilityFunctions --> getVertices["getVertices()"]
-    UtilityFunctions --> getEdges["getEdges()"]
-    UtilityFunctions --> getSubGraphs["getSubGraphs()"]
-    UtilityFunctions --> clear["clear()"]
-    UtilityFunctions --> defaultConfig["defaultConfig()"]
-    
-    %% Event Handling
-    ProcessLinks --> EventHandling{Event Handling}
-    EventHandling --> setupToolTips["setupToolTips(element)"]
-    EventHandling --> bindFunctions["bindFunctions(element)"]
-    EventHandling --> runFunc["utils.runFunc(functionName, args)"]
-    
-    %% Common Database Functions
-    DBMethods --> CommonDB["commonDb.js functions"]
-    CommonDB --> setAccTitle["setAccTitle()"]
-    CommonDB --> getAccTitle["getAccTitle()"]
-    CommonDB --> setAccDescription["setAccDescription()"]
-    CommonDB --> getAccDescription["getAccDescription()"]
-    CommonDB --> setDiagramTitle["setDiagramTitle()"]
-    CommonDB --> getDiagramTitle["getDiagramTitle()"]
-    CommonDB --> commonClear["clear()"]
-    
-    %% Final Output
-    ProcessLinks --> FinalSVG["Final SVG Output"]
-    
-    %% Layout Algorithm Selection
-    SetupLayoutData --> LayoutAlgorithm{Layout Algorithm}
-    LayoutAlgorithm --> Dagre["dagre<br/>(default)"]
-    LayoutAlgorithm --> DagreWrapper["dagre-wrapper<br/>(v2 renderer)"]
-    LayoutAlgorithm --> ELK["elk<br/>(external package)"]
-    
-    %% Testing Components
-    FlowDBClass --> TestFiles["Test Files"]
-    TestFiles --> flowDbSpec["flowDb.spec.ts"]
-    TestFiles --> flowChartShapesSpec["flowChartShapes.spec.js"]
-    TestFiles --> ParserTests["parser/*.spec.js files<br/>- flow-text.spec.js<br/>- flow-edges.spec.js<br/>- flow-style.spec.js<br/>- subgraph.spec.js"]
-    
-    %% Configuration
-    Init --> ConfigSetup["Configuration Setup"]
-    ConfigSetup --> FlowchartConfig["cnf.flowchart config"]
-    ConfigSetup --> ArrowMarkers["arrowMarkerAbsolute"]
-    ConfigSetup --> LayoutConfig["layout config"]
-    ConfigSetup --> SetConfig["setConfig() calls"]

docs/diagrams/mermaid-api-sequence.mmd

@@ -1,307 +0,0 @@
----
-references:
-  - "File: /packages/mermaid/src/mermaidAPI.ts"
-  - "File: /packages/mermaid/src/mermaid.ts"
-generationTime: 2025-01-28T16:30:00.000Z
----
-sequenceDiagram
-    participant User as User/Browser
-    participant Mermaid as mermaid.ts
-    participant Queue as executionQueue
-    participant API as mermaidAPI.ts
-    participant Config as configApi
-    participant Preprocessor as preprocessDiagram
-    participant DiagramAPI as diagram-api
-    participant Diagram as Diagram.fromText
-    participant Renderer as diagram.renderer
-    participant Styles as Styling System
-    participant DOM as DOM/SVG
-
-    Note over User, DOM: Mermaid Complete API Flow
-
-    %% Initialization Phase
-    User->>+Mermaid: mermaid.initialize(config)
-    Mermaid->>+API: mermaidAPI.initialize(config)
-    
-    API->>API: assignWithDepth({}, userOptions)
-    API->>API: handle legacy fontFamily config
-    API->>Config: saveConfigFromInitialize(options)
-    
-    alt Theme Configuration Available
-        API->>API: check if theme in theme object
-        API->>API: set themeVariables from theme
-    else Default Theme
-        API->>API: use default theme variables
-    end
-    
-    API->>Config: setSiteConfig(options) or getSiteConfig()
-    API->>API: setLogLevel(config.logLevel)
-    API->>DiagramAPI: addDiagrams()
-    
-    API-->>-Mermaid: initialization complete
-    Mermaid-->>-User: ready to render
-
-    %% Content Loaded Event
-    User->>DOM: document.load event
-    DOM->>+Mermaid: contentLoaded()
-    
-    opt startOnLoad is true
-        Mermaid->>Config: getConfig()
-        Config-->>Mermaid: { startOnLoad: true }
-        Mermaid->>Mermaid: run()
-    end
-    
-    Mermaid-->>-DOM: event handling complete
-
-    %% Main Run Function
-    User->>+Mermaid: mermaid.run(options)
-    
-    Mermaid->>Mermaid: runThrowsErrors(options)
-    Mermaid->>Config: getConfig()
-    Config-->>Mermaid: configuration object
-    
-    alt nodes provided
-        Mermaid->>Mermaid: use provided nodes
-    else querySelector provided
-        Mermaid->>DOM: document.querySelectorAll(querySelector)
-        DOM-->>Mermaid: nodesToProcess
-    end
-    
-    Mermaid->>Mermaid: new InitIDGenerator(deterministicIds, seed)
-    
-    loop For each diagram element
-        Mermaid->>DOM: check element.getAttribute('data-processed')
-        
-        opt not processed
-            Mermaid->>DOM: element.setAttribute('data-processed', 'true')
-            Mermaid->>Mermaid: generate unique id
-            Mermaid->>DOM: get element.innerHTML
-            Mermaid->>Mermaid: entityDecode and clean text
-            Mermaid->>Mermaid: detectInit(txt)
-            
-            Mermaid->>Queue: render(id, txt, element)
-        end
-    end
-    
-    Mermaid-->>-User: processing initiated
-
-    %% Render Function (Queued)
-    activate Queue
-    Queue->>+API: mermaidAPI.render(id, text, container)
-    
-    API->>DiagramAPI: addDiagrams()
-    API->>+Preprocessor: processAndSetConfigs(text)
-    
-    Preprocessor->>Preprocessor: preprocessDiagram(text)
-    Preprocessor->>Config: reset()
-    Preprocessor->>Config: addDirective(processed.config)
-    Preprocessor-->>-API: { code, config }
-    
-    API->>Config: getConfig()
-    Config-->>API: current configuration
-    
-    opt text length > maxTextSize
-        API->>API: text = MAX_TEXTLENGTH_EXCEEDED_MSG
-    end
-    
-    API->>API: setup id selectors and element IDs
-    API->>API: determine security level (sandbox/loose)
-
-    %% DOM Setup
-    alt svgContainingElement provided
-        alt isSandboxed
-            API->>DOM: sandboxedIframe(select(svgContainingElement), iFrameID)
-            API->>DOM: select iframe contentDocument body
-        else
-            API->>DOM: select(svgContainingElement)
-        end
-    else no container
-        API->>API: removeExistingElements(document, id, divId, iFrameId)
-        alt isSandboxed
-            API->>DOM: sandboxedIframe(select('body'), iFrameID)
-        else
-            API->>DOM: select('body')
-        end
-    end
-    
-    API->>DOM: appendDivSvgG(root, id, enclosingDivID, fontFamily, XMLNS_XLINK_STD)
-
-    %% Diagram Creation
-    API->>+Diagram: Diagram.fromText(text, { title: processed.title })
-    
-    Diagram->>DiagramAPI: detect diagram type
-    Diagram->>DiagramAPI: load appropriate diagram
-    Diagram-->>-API: diagram instance
-    
-    opt parsing error occurred
-        API->>+Diagram: Diagram.fromText('error')
-        Diagram-->>-API: error diagram
-        API->>API: store parseEncounteredException
-    end
-
-    %% Style Generation
-    API->>DOM: get svg element and firstChild
-    API->>Renderer: diag.renderer.getClasses(text, diag)
-    Renderer-->>API: diagramClassDefs
-    
-    API->>+Styles: createUserStyles(config, diagramType, diagramClassDefs, idSelector)
-    
-    Styles->>Styles: createCssStyles(config, classDefs)
-    
-    opt config.themeCSS defined
-        Styles->>Styles: append themeCSS
-    end
-    
-    opt fontFamily configured
-        Styles->>Styles: add CSS variables for fonts
-    end
-    
-    opt classDefs exist
-        loop For each styleClassDef
-            opt has styles
-                Styles->>Styles: cssImportantStyles for each CSS element
-            end
-            opt has textStyles
-                Styles->>Styles: cssImportantStyles for tspan elements
-            end
-        end
-    end
-    
-    Styles->>Styles: getStyles(graphType, userCSSstyles, themeVariables)
-    Styles->>Styles: serialize(compile(svgId{allStyles}), stringify)
-    Styles-->>-API: compiled CSS rules
-    
-    API->>DOM: create style element
-    API->>DOM: style.innerHTML = rules
-    API->>DOM: svg.insertBefore(style, firstChild)
-
-    %% Diagram Rendering
-    API->>+Renderer: diag.renderer.draw(text, id, version, diag)
-    
-    Renderer->>Renderer: diagram-specific rendering logic
-    Renderer->>DOM: create SVG elements
-    Renderer->>DOM: apply positioning and styling
-    Renderer-->>-API: rendered diagram
-    
-    opt rendering error
-        alt suppressErrorRendering
-            API->>API: removeTempElements()
-            API->>Mermaid: throw error
-        else
-            API->>Renderer: errorRenderer.draw(text, id, version)
-        end
-    end
-
-    %% Accessibility and Cleanup
-    API->>DOM: select svg element
-    API->>Diagram: diag.db.getAccTitle()
-    API->>Diagram: diag.db.getAccDescription()
-    API->>API: addA11yInfo(diagramType, svgNode, a11yTitle, a11yDescr)
-    
-    API->>DOM: set xmlns for foreignobject elements
-    API->>DOM: get innerHTML from enclosing div
-    
-    API->>+API: cleanUpSvgCode(svgCode, isSandboxed, arrowMarkerAbsolute)
-    
-    opt not useArrowMarkerUrls and not sandboxed
-        API->>API: replace marker-end URLs with anchors
-    end
-    
-    API->>API: decodeEntities(svgCode)
-    API->>API: replace <br> with <br/>
-    API-->>-API: cleaned SVG code
-    
-    alt isSandboxed
-        API->>+API: putIntoIFrame(svgCode, svgEl)
-        API->>API: calculate iframe height
-        API->>API: toBase64 encode SVG content
-        API->>API: create iframe with sandbox attributes
-        API-->>-API: iframe HTML
-    else not loose security
-        API->>API: DOMPurify.sanitize(svgCode, options)
-    end
-    
-    API->>API: attachFunctions()
-    API->>API: removeTempElements()
-    
-    opt parseEncounteredException
-        API->>Mermaid: throw parseEncounteredException
-    end
-    
-    API-->>-Queue: { diagramType, svg: svgCode, bindFunctions }
-
-    %% Return to Web Integration
-    activate Mermaid
-    Queue-->>Mermaid: render result
-    Mermaid->>DOM: element.innerHTML = svg
-    
-    opt postRenderCallback
-        Mermaid->>User: postRenderCallback(id)
-    end
-    
-    opt bindFunctions exist
-        Mermaid->>DOM: bindFunctions(element)
-    end
-    deactivate Mermaid
-
-    %% Parse Function Flow
-    User->>+Mermaid: mermaid.parse(text, parseOptions)
-    activate Queue
-    
-    Queue->>+API: mermaidAPI.parse(text, parseOptions)
-    
-    API->>DiagramAPI: addDiagrams()
-    API->>Preprocessor: processAndSetConfigs(text)
-    Preprocessor-->>API: { code, config }
-    API->>Diagram: getDiagramFromText(code)
-    Diagram-->>API: diagram instance
-    API-->>-Queue: { diagramType: diagram.type, config }
-    
-    Queue-->>-Mermaid: parse result
-    Mermaid-->>-User: ParseResult or false
-
-    %% External Diagram Registration
-    User->>+Mermaid: registerExternalDiagrams(diagrams, options)
-    
-    Mermaid->>DiagramAPI: addDiagrams()
-    Mermaid->>DiagramAPI: registerLazyLoadedDiagrams(...diagrams)
-    
-    opt lazyLoad is false
-        Mermaid->>DiagramAPI: loadRegisteredDiagrams()
-    end
-    
-    Mermaid-->>-User: registration complete
-
-    %% Error Handling
-    Note over Mermaid, API: Error Handling Throughout
-    alt Error occurs
-        API->>Mermaid: throw error
-        Mermaid->>+Mermaid: handleError(error, errors, parseError)
-        
-        Mermaid->>Mermaid: log.warn(error)
-        
-        alt isDetailedError
-            Mermaid->>User: parseError(error.str, error.hash)
-        else
-            Mermaid->>User: parseError(error)
-        end
-        
-        opt not suppressErrors
-            Mermaid->>User: throw error
-        end
-        
-        Mermaid-->>-User: error handled
-    end
-
-    %% Configuration Details
-    Note over Config: Configuration Functions
-    Note right of Config: Functions:<br/>- reset()<br/>- getConfig()<br/>- setConfig()<br/>- getSiteConfig()<br/>- updateSiteConfig()<br/>- saveConfigFromInitialize()
-    
-    Note over Styles: CSS Generation
-    Note right of Styles: Features:<br/>- createCssStyles()<br/>- createUserStyles()<br/>- cssImportantStyles()<br/>- Theme integration<br/>- Class definitions
-    
-    Note over API: Security Levels
-    Note right of API: Modes:<br/>- sandbox: iframe isolation<br/>- loose: minimal sanitization<br/>- default: DOMPurify sanitization
-    
-    Note over API: Helper Functions
-    Note right of API: Utilities:<br/>- cleanUpSvgCode()<br/>- putIntoIFrame()<br/>- appendDivSvgG()<br/>- removeExistingElements() 

docs/diagrams/mindmap-implementation-sequence.mmd

@@ -1,180 +0,0 @@
----
-references:
-  - "File: /packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts"
-  - "File: /packages/mermaid/src/diagrams/mindmap/mindmapDb.ts"
-  - "File: /packages/mermaid/src/diagrams/mindmap/detector.ts"
-  - "File: /packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts"
-  - "File: /packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts"
-  - "File: /packages/mermaid/src/diagrams/mindmap/styles.ts"
-  - "File: /packages/mermaid/src/diagrams/mindmap/svgDraw.ts"
-generationTime: 2025-01-28T16:00:00.000Z
----
-sequenceDiagram
-    participant User as User Input Text
-    participant Detector as detector.ts
-    participant Loader as DiagramLoader
-    participant Definition as mindmap-definition.ts
-    participant Parser as parser/mindmap.jison
-    participant DB as MindmapDB
-    participant Renderer as mindmapRenderer.ts
-    participant Cytoscape as cytoscape.js
-    participant SVGDraw as svgDraw.ts
-    participant Styles as styles.ts
-    participant Output as Final SVG
-
-    Note over User, Output: Mindmap Implementation Flow
-
-    %% Detection Phase
-    User->>Detector: /^\s*mindmap/ text input
-    activate Detector
-    Detector->>Detector: detector(txt) validates pattern
-    Detector->>Loader: loader() function called
-    deactivate Detector
-    
-    activate Loader
-    Loader->>Definition: import mindmap-definition.js
-    deactivate Loader
-
-    %% Core Structure Setup
-    activate Definition
-    Definition->>DB: get db() → new MindmapDB()
-    Definition->>Renderer: setup renderer
-    Definition->>Parser: setup parser
-    Definition->>Styles: setup styles
-    deactivate Definition
-
-    %% Database Initialization
-    activate DB
-    Note over DB: MindmapDB Constructor
-    DB->>DB: initialize nodes array
-    DB->>DB: setup nodeType constants
-    DB->>DB: bind methods
-    DB->>DB: clear() state
-    
-    %% Parsing Phase
-    activate Parser
-    User->>Parser: mindmap syntax text
-    
-    loop For each node in hierarchy
-        Parser->>DB: addNode(level, id, descr, type)
-        activate DB
-        DB->>DB: sanitizeText(id, descr)
-        DB->>DB: getType(startStr, endStr)
-        Note right of DB: Shape Detection:<br/>[ → RECT<br/>( → ROUNDED_RECT<br/>(( → CIRCLE<br/>)) → BANG<br/>{{ → HEXAGON
-        DB->>DB: getParent(level)
-        DB->>DB: create MindmapNode
-        DB->>DB: add to hierarchy
-        deactivate DB
-    end
-
-    opt Icon/Class Decoration
-        Parser->>DB: decorateNode(decoration)
-        DB->>DB: set icon/class properties
-    end
-    deactivate Parser
-
-    %% Data Preparation
-    Renderer->>DB: getData() for layout
-    activate DB
-    DB->>DB: collect all nodes
-    DB->>DB: build parent-child relationships
-    DB-->>Renderer: return node hierarchy
-    deactivate DB
-
-    %% Rendering Pipeline
-    activate Renderer
-    Note over Renderer: Rendering Phase
-    
-    Renderer->>Cytoscape: initialize cytoscape
-    activate Cytoscape
-    
-    loop For each node in mindmap
-        Renderer->>Cytoscape: addNodes(mindmap, cy, conf, level)
-        Cytoscape->>Cytoscape: create node data
-        Cytoscape->>Cytoscape: set position (x, y)
-    end
-
-    loop For parent-child relationships
-        Renderer->>Cytoscape: add edges
-        Cytoscape->>Cytoscape: create edge data
-    end
-
-    Renderer->>Cytoscape: configure cose-bilkent layout
-    Cytoscape->>Cytoscape: calculate optimal positions
-    Cytoscape-->>Renderer: return positioned graph
-    deactivate Cytoscape
-
-    %% SVG Generation
-    Renderer->>SVGDraw: drawNodes(db, svg, mindmap, section, conf)
-    activate SVGDraw
-    
-    loop For each node recursively
-        SVGDraw->>SVGDraw: select shape function
-        
-        alt Default Shape
-            SVGDraw->>SVGDraw: defaultBkg() - rounded rectangle
-        else Rectangle Shape
-            SVGDraw->>SVGDraw: rectBkg() - sharp corners
-        else Circle Shape
-            SVGDraw->>SVGDraw: circleBkg() - perfect circle
-        else Cloud Shape
-            SVGDraw->>SVGDraw: cloudBkg() - organic curves
-        else Bang Shape
-            SVGDraw->>SVGDraw: bangBkg() - explosion style
-        else Hexagon Shape
-            SVGDraw->>SVGDraw: hexagonBkg() - six sides
-        end
-        
-        SVGDraw->>SVGDraw: create SVG elements
-        SVGDraw->>SVGDraw: add text labels
-        SVGDraw->>SVGDraw: position node
-        
-        opt Node has children
-            SVGDraw->>SVGDraw: drawNodes() recursive call
-        end
-    end
-    deactivate SVGDraw
-
-    %% Edge Rendering
-    Renderer->>Renderer: drawEdges(edgesEl, cy)
-    loop For each edge
-        Renderer->>Renderer: extract edge bounds
-        Renderer->>Renderer: draw SVG path
-    end
-
-    %% Styling Application
-    Renderer->>Styles: getStyles(options)
-    activate Styles
-    
-    Styles->>Styles: genSections(options)
-    loop For THEME_COLOR_LIMIT sections
-        Styles->>Styles: generate color scale
-        Styles->>Styles: create CSS rules
-        Note right of Styles: .section-X fills<br/>.edge-depth-X widths<br/>.node-icon-X colors
-    end
-    
-    Styles->>Styles: apply theme integration
-    Styles-->>Renderer: return compiled CSS
-    deactivate Styles
-
-    %% Final Assembly
-    Renderer->>Output: selectSvgElement()
-    Renderer->>Output: setupGraphViewbox()
-    Renderer->>Output: apply styles
-    Renderer->>Output: add interactive elements
-    deactivate Renderer
-
-    activate Output
-    Note over Output: Final Mindmap Features
-    Output->>Output: responsive layout
-    Output->>Output: accessibility attributes
-    Output->>Output: hover effects
-    Output->>Output: click handling
-    Output-->>User: rendered mindmap
-    deactivate Output
-
-    %% Configuration Details
-    Note over DB, Styles: Configuration Options
-    Note right of DB: Padding Calculations:<br/>Base padding from config<br/>RECT: ×2 padding<br/>ROUNDED_RECT: ×2 padding<br/>HEXAGON: ×2 padding
-    Note right of Styles: Section Management:<br/>MAX_SECTIONS = 12<br/>Dynamic color generation<br/>Git theme integration
-    Note right of Renderer: Layout Parameters:<br/>Cytoscape configuration<br/>coseBilkent settings<br/>Node spacing rules 

docs/ecosystem/integrations-community.md

@@ -84,7 +84,6 @@ To add an integration to this list, see the [Integrations - create page](./integ
 LLM integrations to create mermaid diagrams using AI from text descriptions.
 
 - [HueHive - Create mermaid diagrams with text](https://huehive.co/tools/diagrams)
-- [MCP Server Mermaid](https://github.com/hustcc/mcp-mermaid) - Generate mermaid diagram and chart with AI MCP dynamically.
 
 ### CRM/ERP
 
@@ -104,7 +103,6 @@ Blogging frameworks and platforms
   - [Mermaid](https://nextra.site/docs/guide/mermaid)
 - [WordPress](https://wordpress.org)
   - [MerPRess](https://wordpress.org/plugins/merpress/)
-  - [WP Documentation](https://wordpress.org/themes/wp-documentation/)
 
 ### CMS/ECM
 

docs/ecosystem/integrations-create.md

@@ -16,7 +16,9 @@ Applications that support Mermaid files [SHOULD](https://datatracker.ietf.org/do
 
 ### MIME Type
 
-The recommended [MIME type](https://www.iana.org/assignments/media-types/media-types.xhtml) for Mermaid media is [`text/vnd.mermaid`](https://www.iana.org/assignments/media-types/application/vnd.mermaid).
+The recommended [MIME type](https://www.iana.org/assignments/media-types/media-types.xhtml) for Mermaid media is `text/vnd.mermaid`.
+
+Currently pending [IANA](https://www.iana.org/) recognition.
 
 ## Showcase
 

docs/syntax/flowchart.md

@@ -1795,54 +1795,15 @@ It is possible to style the type of curve used for lines between items, if the d
 Available curve styles include `basis`, `bumpX`, `bumpY`, `cardinal`, `catmullRom`, `linear`, `monotoneX`, `monotoneY`,
 `natural`, `step`, `stepAfter`, and `stepBefore`.
 
-For a full list of available curves, including an explanation of custom curves, refer to
-the [Shapes](https://d3js.org/d3-shape/curve) documentation in the [d3-shape](https://github.com/d3/d3-shape/) project.
-
-Line styling can be achieved in two ways:
-
-1. Change the curve style of all the lines
-2. Change the curve style of a particular line
-
-#### Diagram level curve style
-
 In this example, a left-to-right graph uses the `stepBefore` curve style:
 
 ```
----
-config:
-  flowchart:
-    curve: stepBefore
----
+%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
 graph LR
 ```
 
-#### Edge level curve style using Edge IDs (v\<MERMAID_RELEASE_VERSION>+)
-
-You can assign IDs to [edges](#attaching-an-id-to-edges). After assigning an ID you can modify the line style by modifying the edge's `curve` property using the following syntax:
-
-```mermaid-example
-flowchart LR
-    A e1@==> B
-    A e2@--> C
-    e1@{ curve: linear }
-    e2@{ curve: natural }
-```
-
-```mermaid
-flowchart LR
-    A e1@==> B
-    A e2@--> C
-    e1@{ curve: linear }
-    e2@{ curve: natural }
-```
-
-```info
-Any edge curve style modified at the edge level overrides the diagram level style.
-```
-
-```info
-If the same edge is modified multiple times the last modification will be rendered.
-```
+For a full list of available curves, including an explanation of custom curves, refer to
+the [Shapes](https://d3js.org/d3-shape/curve) documentation in the [d3-shape](https://github.com/d3/d3-shape/) project.
 
 ### Styling a node
 

docs/syntax/sequenceDiagram.md

@@ -74,222 +74,6 @@ sequenceDiagram
     Bob->>Alice: Hi Alice
 ```
 
-### Boundary
-
-If you want to use the boundary symbol for a participant, use the `boundary` statement as shown below.
-
-```mermaid-example
-sequenceDiagram
-    boundary theBoundary
-    participant Bob
-    theBoundary->>Bob: Request from boundary
-    Bob->>theBoundary: Response to boundary
-```
-
-```mermaid
-sequenceDiagram
-    boundary theBoundary
-    participant Bob
-    theBoundary->>Bob: Request from boundary
-    Bob->>theBoundary: Response to boundary
-```
-
-```mermaid-example
-sequenceDiagram
-    boundary theBoundary
-    participant Bob
-    theBoundary->>Bob: Request from boundary
-    Bob->>theBoundary: Response to boundary
-```
-
-```mermaid
-sequenceDiagram
-    boundary theBoundary
-    participant Bob
-    theBoundary->>Bob: Request from boundary
-    Bob->>theBoundary: Response to boundary
-```
-
-### Control
-
-If you want to use the control symbol for a participant, use the `control` statement as shown below.
-
-```mermaid-example
-sequenceDiagram
-    control theControl
-    participant Alice
-    theControl->>Alice: Control request
-    Alice->>theControl: Control response
-```
-
-```mermaid
-sequenceDiagram
-    control theControl
-    participant Alice
-    theControl->>Alice: Control request
-    Alice->>theControl: Control response
-```
-
-```mermaid-example
-sequenceDiagram
-    control theControl
-    participant Alice
-    theControl->>Alice: Control request
-    Alice->>theControl: Control response
-```
-
-```mermaid
-sequenceDiagram
-    control theControl
-    participant Alice
-    theControl->>Alice: Control request
-    Alice->>theControl: Control response
-```
-
-### Entity
-
-If you want to use the entity symbol for a participant, use the `entity` statement as shown below.
-
-```mermaid-example
-sequenceDiagram
-    entity theEntity
-    participant Bob
-    theEntity->>Bob: Entity request
-    Bob->>theEntity: Entity response
-```
-
-```mermaid
-sequenceDiagram
-    entity theEntity
-    participant Bob
-    theEntity->>Bob: Entity request
-    Bob->>theEntity: Entity response
-```
-
-```mermaid-example
-sequenceDiagram
-    entity theEntity
-    participant Bob
-    theEntity->>Bob: Entity request
-    Bob->>theEntity: Entity response
-```
-
-```mermaid
-sequenceDiagram
-    entity theEntity
-    participant Bob
-    theEntity->>Bob: Entity request
-    Bob->>theEntity: Entity response
-```
-
-### Database
-
-If you want to use the database symbol for a participant, use the `database` statement as shown below.
-
-```mermaid-example
-sequenceDiagram
-    database theDb
-    participant Alice
-    theDb->>Alice: DB query
-    Alice->>theDb: DB result
-```
-
-```mermaid
-sequenceDiagram
-    database theDb
-    participant Alice
-    theDb->>Alice: DB query
-    Alice->>theDb: DB result
-```
-
-```mermaid-example
-sequenceDiagram
-    database theDb
-    participant Alice
-    theDb->>Alice: DB query
-    Alice->>theDb: DB result
-```
-
-```mermaid
-sequenceDiagram
-    database theDb
-    participant Alice
-    theDb->>Alice: DB query
-    Alice->>theDb: DB result
-```
-
-### Collections
-
-If you want to use the collections symbol for a participant, use the `collections` statement as shown below.
-
-```mermaid-example
-sequenceDiagram
-    collections theCollection
-    participant Bob
-    theCollection->>Bob: Collections request
-    Bob->>theCollection: Collections response
-```
-
-```mermaid
-sequenceDiagram
-    collections theCollection
-    participant Bob
-    theCollection->>Bob: Collections request
-    Bob->>theCollection: Collections response
-```
-
-```mermaid-example
-sequenceDiagram
-    collections theCollection
-    participant Bob
-    theCollection->>Bob: Collections request
-    Bob->>theCollection: Collections response
-```
-
-```mermaid
-sequenceDiagram
-    collections theCollection
-    participant Bob
-    theCollection->>Bob: Collections request
-    Bob->>theCollection: Collections response
-```
-
-### Queue
-
-If you want to use the queue symbol for a participant, use the `queue` statement as shown below.
-
-```mermaid-example
-sequenceDiagram
-    queue theQueue
-    participant Alice
-    theQueue->>Alice: Queue message
-    Alice->>theQueue: Queue
-```
-
-```mermaid
-sequenceDiagram
-    queue theQueue
-    participant Alice
-    theQueue->>Alice: Queue message
-    Alice->>theQueue: Queue
-```
-
-```mermaid-example
-sequenceDiagram
-    queue theQueue
-    participant Alice
-    theQueue->>Alice: Queue message
-    Alice->>theQueue: Queue
-```
-
-```mermaid
-sequenceDiagram
-    queue theQueue
-    participant Alice
-    theQueue->>Alice: Queue message
-    Alice->>theQueue: Queue
-```
-
 ### Aliases
 
 The actor can have a convenient identifier and a descriptive label.

package.json

@@ -67,7 +67,7 @@
     "@argos-ci/cypress": "^5.0.2",
     "@changesets/changelog-github": "^0.5.1",
     "@changesets/cli": "^2.27.12",
-    "@cspell/eslint-plugin": "^8.19.4",
+    "@cspell/eslint-plugin": "^8.19.3",
     "@cypress/code-coverage": "^3.12.49",
     "@eslint/js": "^9.26.0",
     "@rollup/plugin-typescript": "^12.1.2",
@@ -94,17 +94,17 @@
     "cypress-split": "^1.24.14",
     "esbuild": "^0.25.0",
     "eslint": "^9.26.0",
-    "eslint-config-prettier": "^10.1.8",
+    "eslint-config-prettier": "^10.1.1",
     "eslint-plugin-cypress": "^4.3.0",
-    "eslint-plugin-html": "^8.1.3",
-    "eslint-plugin-jest": "^28.14.0",
-    "eslint-plugin-jsdoc": "^50.8.0",
+    "eslint-plugin-html": "^8.1.2",
+    "eslint-plugin-jest": "^28.11.0",
+    "eslint-plugin-jsdoc": "^50.6.9",
     "eslint-plugin-json": "^4.0.1",
     "eslint-plugin-lodash": "^8.0.0",
     "eslint-plugin-markdown": "^5.1.0",
     "eslint-plugin-no-only-tests": "^3.3.0",
     "eslint-plugin-tsdoc": "^0.4.0",
-    "eslint-plugin-unicorn": "^59.0.1",
+    "eslint-plugin-unicorn": "^59.0.0",
     "express": "^5.1.0",
     "globals": "^16.0.0",
     "globby": "^14.0.2",
@@ -112,7 +112,7 @@
     "jest": "^30.0.4",
     "jison": "^0.4.18",
     "js-yaml": "^4.1.0",
-    "jsdom": "^26.1.0",
+    "jsdom": "^26.0.0",
     "langium-cli": "3.3.0",
     "lint-staged": "^16.1.2",
     "markdown-table": "^3.0.4",
@@ -126,7 +126,7 @@
     "tslib": "^2.8.1",
     "tsx": "^4.7.3",
     "typescript": "~5.7.3",
-    "typescript-eslint": "^8.38.0",
+    "typescript-eslint": "^8.32.0",
     "vite": "^7.0.3",
     "vite-plugin-istanbul": "^7.0.0",
     "vitest": "^3.0.6"
@@ -139,13 +139,8 @@
       "roughjs": "patches/roughjs.patch"
     },
     "onlyBuiltDependencies": [
-      "canvas",
       "cypress",
       "esbuild"
-    ],
-    "ignoredBuiltDependencies": [
-      "sharp",
-      "vue-demi"
     ]
   }
 }

packages/examples/CHANGELOG.md

@@ -1,14 +0,0 @@
-# @mermaid-js/examples
-
-## 1.0.0
-
-### Minor Changes
-
-- [#6453](https://github.com/mermaid-js/mermaid/pull/6453) [`4936ef5`](https://github.com/mermaid-js/mermaid/commit/4936ef5c306d2f892cca9a95a5deac4af6d4882b) Thanks [@sidharthv96](https://github.com/sidharthv96)! - feat: Add examples for diagrams in the `@mermaid-js/examples` package
-
-### Patch Changes
-
-- [#6510](https://github.com/mermaid-js/mermaid/pull/6510) [`7a38eb7`](https://github.com/mermaid-js/mermaid/commit/7a38eb715d795cd5c66cb59357d64ec197b432e6) Thanks [@sidharthv96](https://github.com/sidharthv96)! - chore: Move packet diagram out of beta
-
-- Updated dependencies [[`5acbd7e`](https://github.com/mermaid-js/mermaid/commit/5acbd7e762469d9d89a9c77faf6617ee13367f3a), [`d90634b`](https://github.com/mermaid-js/mermaid/commit/d90634bf2b09e586b055729e07e9a1a31b21827c), [`7a38eb7`](https://github.com/mermaid-js/mermaid/commit/7a38eb715d795cd5c66cb59357d64ec197b432e6), [`3e3ae08`](https://github.com/mermaid-js/mermaid/commit/3e3ae089305e1c7b9948b9e149eba6854fe7f2d6), [`d3e2be3`](https://github.com/mermaid-js/mermaid/commit/d3e2be35be066adeb7fd502b4a24c223c3b53947), [`637680d`](https://github.com/mermaid-js/mermaid/commit/637680d4d9e39b4f8cb6f05b4cb261e8f5693ac3)]:
-  - mermaid@11.9.0

packages/examples/README.md

@@ -1,41 +0,0 @@
-# @mermaid-js/examples
-
-The `@mermaid-js/examples` package contains a collection of examples used by tools like [mermaid.live](https://mermaid.live) to help users get started with new diagrams.
-
-You can duplicate an existing diagram example file, e.g., `packages/examples/src/examples/flowchart.ts`, and modify it with details specific to your diagram.
-
-Then, import the example in the `packages/examples/src/index.ts` file and add it to the `examples` array.
-
-Each diagram should have at least one example, which should be marked as the default. It's a good idea to add more examples to showcase different features of the diagram.
-
-## Usage
-
-```bash
-pnpm add @mermaid-js/examples
-```
-
-A sample usage of the package in mermaid.live, to get the default example for every diagram type:
-
-```ts
-import { diagramData } from '@mermaid-js/examples';
-
-type DiagramDefinition = (typeof diagramData)[number];
-
-const isValidDiagram = (diagram: DiagramDefinition): diagram is Required<DiagramDefinition> => {
-  return Boolean(diagram.name && diagram.examples && diagram.examples.length > 0);
-};
-
-export const getSampleDiagrams = () => {
-  const diagrams = diagramData
-    .filter((d) => isValidDiagram(d))
-    .map(({ examples, ...rest }) => ({
-      ...rest,
-      example: examples?.filter(({ isDefault }) => isDefault)[0],
-    }));
-  const examples: Record<string, string> = {};
-  for (const diagram of diagrams) {
-    examples[diagram.name.replace(/ (Diagram|Chart|Graph)/, '')] = diagram.example.code;
-  }
-  return examples;
-};
-```

packages/examples/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mermaid-js/examples",
-  "version": "1.0.0",
+  "version": "0.0.1-beta.1",
   "description": "Mermaid examples package",
   "author": "Sidharth Vinod",
   "type": "module",
@@ -16,10 +16,6 @@
   "files": [
     "dist"
   ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/mermaid-js/mermaid"
-  },
   "scripts": {
     "clean": "rimraf dist"
   },

packages/mermaid-zenuml/README.md

@@ -1,384 +0,0 @@
-# @mermaid-js/mermaid-zenuml
-
-MermaidJS plugin for ZenUML integration - A powerful sequence diagram rendering engine.
-
-> A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.
-
-Mermaid can render sequence diagrams with [ZenUML](https://zenuml.com). Note that ZenUML uses a different
-syntax than the original Sequence Diagram in mermaid.
-
-```mermaid
-zenuml
-    BookLibService.Borrow(id) {
-      User = Session.GetUser()
-      if(User.isActive) {
-        try {
-          BookRepository.Update(id, onLoan, User)
-          receipt = new Receipt(id, dueDate)
-        } catch (BookNotFoundException) {
-          ErrorService.onException(BookNotFoundException)
-        } finally {
-          Connection.close()
-        }
-      }
-      return receipt
-    }
-```
-
-## Installation
-
-### With bundlers
-
-```sh
-npm install @mermaid-js/mermaid-zenuml
-```
-
-```ts
-import mermaid from 'mermaid';
-import zenuml from '@mermaid-js/mermaid-zenuml';
-
-await mermaid.registerExternalDiagrams([zenuml]);
-```
-
-### With CDN
-
-```html
-<script type="module">
-  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
-  import zenuml from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-zenuml@0.2.0/dist/mermaid-zenuml.core.mjs';
-  await mermaid.registerExternalDiagrams([zenuml]);
-</script>
-```
-
-> [!NOTE]  
-> ZenUML uses experimental lazy loading & async rendering features which could change in the future.
-
-## Basic Usage
-
-Once the plugin is registered, you can create ZenUML diagrams using the `zenuml` syntax:
-
-```mermaid
-zenuml
-    Controller.Get(id) {
-        Service.Get(id) {
-            item = Repository.Get(id)
-            if(item) {
-                return item
-            } else {
-                return null
-            }
-        }
-        return result
-    }
-```
-
-## ZenUML Syntax Reference
-
-### Participants
-
-The participants can be defined implicitly as in the first example on this page. The participants or actors are
-rendered in order of appearance in the diagram source text. Sometimes you might want to show the participants in a
-different order than how they appear in the first message. It is possible to specify the actor's order of
-appearance by doing the following:
-
-```mermaid
-zenuml
-    title Declare participant (optional)
-    Bob
-    Alice
-    Alice->Bob: Hi Bob
-    Bob->Alice: Hi Alice
-```
-
-### Annotators
-
-If you specifically want to use symbols instead of just rectangles with text you can do so by using the annotator syntax to declare participants as per below.
-
-```mermaid
-zenuml
-    title Annotators
-    @Actor Alice
-    @Database Bob
-    Alice->Bob: Hi Bob
-    Bob->Alice: Hi Alice
-```
-
-Available annotators include:
-
-- `@Actor` - Human figure
-- `@Database` - Database symbol
-- `@Boundary` - Boundary symbol
-- `@Control` - Control symbol
-- `@Entity` - Entity symbol
-- `@Queue` - Queue symbol
-
-### Aliases
-
-The participants can have a convenient identifier and a descriptive label.
-
-```mermaid
-zenuml
-    title Aliases
-    A as Alice
-    J as John
-    A->J: Hello John, how are you?
-    J->A: Great!
-```
-
-## Messages
-
-Messages can be one of:
-
-1. Sync message
-2. Async message
-3. Creation message
-4. Reply message
-
-### Sync message
-
-You can think of a sync (blocking) method in a programming language.
-
-```mermaid
-zenuml
-    title Sync message
-    A.SyncMessage
-    A.SyncMessage(with, parameters) {
-      B.nestedSyncMessage()
-    }
-```
-
-### Async message
-
-You can think of an async (non-blocking) method in a programming language. Fire an event and forget about it.
-
-```mermaid
-zenuml
-    title Async message
-    Alice->Bob: How are you?
-```
-
-### Creation message
-
-We use `new` keyword to create an object.
-
-```mermaid
-zenuml
-    new A1
-    new A2(with, parameters)
-```
-
-### Reply message
-
-There are three ways to express a reply message:
-
-```mermaid
-zenuml
-    // 1. assign a variable from a sync message.
-    a = A.SyncMessage()
-
-    // 1.1. optionally give the variable a type
-    SomeType a = A.SyncMessage()
-
-    // 2. use return keyword
-    A.SyncMessage() {
-    return result
-    }
-
-    // 3. use @return or @reply annotator on an async message
-    @return
-    A->B: result
-```
-
-The third way `@return` is rarely used, but it is useful when you want to return to one level up.
-
-```mermaid
-zenuml
-    title Reply message
-    Client->A.method() {
-      B.method() {
-        if(condition) {
-          return x1
-          // return early
-          @return
-          A->Client: x11
-        }
-      }
-      return x2
-    }
-```
-
-## Advanced Features
-
-### Nesting
-
-Sync messages and Creation messages are naturally nestable with `{}`.
-
-```mermaid
-zenuml
-    A.method() {
-      B.nested_sync_method()
-      B->C: nested async message
-    }
-```
-
-### Comments
-
-It is possible to add comments to a sequence diagram with `// comment` syntax.
-Comments will be rendered above the messages or fragments. Comments on other places
-are ignored. Markdown is supported.
-
-```mermaid
-zenuml
-    // a comment on a participant will not be rendered
-    BookService
-    // a comment on a message.
-    // **Markdown** is supported.
-    BookService.getBook()
-```
-
-### Loops
-
-It is possible to express loops in a ZenUML diagram. This is done by any of the
-following notations:
-
-1. while
-2. for
-3. forEach, foreach
-4. loop
-
-```zenuml
-while(condition) {
-    ...statements...
-}
-```
-
-Example:
-
-```mermaid
-zenuml
-    Alice->John: Hello John, how are you?
-    while(true) {
-      John->Alice: Great!
-    }
-```
-
-### Alt (Alternative paths)
-
-It is possible to express alternative paths in a sequence diagram. This is done by the notation
-
-```zenuml
-if(condition1) {
-    ...statements...
-} else if(condition2) {
-    ...statements...
-} else {
-    ...statements...
-}
-```
-
-Example:
-
-```mermaid
-zenuml
-    Alice->Bob: Hello Bob, how are you?
-    if(is_sick) {
-      Bob->Alice: Not so good :(
-    } else {
-      Bob->Alice: Feeling fresh like a daisy
-    }
-```
-
-### Opt (Optional)
-
-It is possible to render an `opt` fragment. This is done by the notation
-
-```zenuml
-opt {
-  ...statements...
-}
-```
-
-Example:
-
-```mermaid
-zenuml
-    Alice->Bob: Hello Bob, how are you?
-    Bob->Alice: Not so good :(
-    opt {
-      Bob->Alice: Thanks for asking
-    }
-```
-
-### Parallel
-
-It is possible to show actions that are happening in parallel.
-
-This is done by the notation
-
-```zenuml
-par {
-  statement1
-  statement2
-  statement3
-}
-```
-
-Example:
-
-```mermaid
-zenuml
-    par {
-        Alice->Bob: Hello guys!
-        Alice->John: Hello guys!
-    }
-```
-
-### Try/Catch/Finally (Break)
-
-It is possible to indicate a stop of the sequence within the flow (usually used to model exceptions).
-
-This is done by the notation
-
-```
-try {
-  ...statements...
-} catch {
-  ...statements...
-} finally {
-  ...statements...
-}
-```
-
-Example:
-
-```mermaid
-zenuml
-    try {
-      Consumer->API: Book something
-      API->BookingService: Start booking process
-    } catch {
-      API->Consumer: show failure
-    } finally {
-      API->BookingService: rollback status
-    }
-```
-
-## Contributing
-
-This package is part of the [Mermaid](https://github.com/mermaid-js/mermaid) project. See the main repository for contributing guidelines.
-
-## Contributors
-
-- [Peng Xiao](https://github.com/MrCoder)
-- [Sidharth Vinod](https://sidharth.dev)
-- [Dong Cai](https://github.com/dontry)
-
-## License
-
-MIT
-
-## Links
-
-- [ZenUML Official Website](https://zenuml.com)
-- [Mermaid Documentation](https://mermaid.js.org)
-- [GitHub Repository](https://github.com/mermaid-js/mermaid)

packages/mermaid-zenuml/README.md

@@ -0,0 +1 @@
+../mermaid/src/docs/syntax/zenuml.md

packages/mermaid-zenuml/package.json

@@ -33,7 +33,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@zenuml/core": "^3.35.2"
+    "@zenuml/core": "^3.31.1"
   },
   "devDependencies": {
     "mermaid": "workspace:^"

packages/mermaid-zenuml/src/zenuml.d.ts

@@ -1,11 +0,0 @@
-declare module '@zenuml/core' {
-  interface RenderOptions {
-    theme?: string;
-    mode?: string;
-  }
-
-  export default class ZenUml {
-    constructor(container: Element);
-    render(text: string, options?: RenderOptions): Promise<void>;
-  }
-}

packages/mermaid-zenuml/src/zenumlRenderer.ts

@@ -53,6 +53,7 @@ export const draw = async function (text: string, id: string) {
 
   const { foreignObject, container, app } = createForeignObject(id);
   svgContainer.appendChild(foreignObject);
+  // @ts-expect-error @zenuml/core@3.0.0 exports the wrong type for ZenUml
   const zenuml = new ZenUml(app);
   // default is a theme name. More themes to be added and will be configurable in the future
   await zenuml.render(text, { theme: 'default', mode: 'static' });

packages/mermaid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "11.9.0",
+  "version": "11.8.1",
   "description": "Markdown-ish syntax for generating flowcharts, mindmaps, sequence diagrams, class diagrams, gantt charts, git graphs and more.",
   "type": "module",
   "module": "./dist/mermaid.core.mjs",
@@ -79,7 +79,7 @@
     "dagre-d3-es": "7.0.11",
     "dayjs": "^1.11.13",
     "dompurify": "^3.2.5",
-    "katex": "^0.16.22",
+    "katex": "^0.16.9",
     "khroma": "^2.1.0",
     "lodash-es": "^4.17.21",
     "marked": "^16.0.0",
@@ -105,14 +105,13 @@
     "@types/stylis": "^4.2.7",
     "@types/uuid": "^10.0.0",
     "ajv": "^8.17.1",
-    "canvas": "^3.1.0",
-    "chokidar": "3.6.0",
+    "chokidar": "^3.6.0",
     "concurrently": "^9.1.2",
     "csstree-validator": "^4.0.1",
     "globby": "^14.0.2",
     "jison": "^0.4.18",
     "js-base64": "^3.7.7",
-    "jsdom": "^26.1.0",
+    "jsdom": "^26.0.0",
     "json-schema-to-typescript": "^15.0.4",
     "micromatch": "^4.0.8",
     "path-browserify": "^1.0.1",

packages/mermaid/src/accessibility.spec.ts

@@ -1,25 +1,28 @@
-import { addSVGa11yTitleDescription, setA11yDiagramInfo } from './accessibility.js';
-import { ensureNodeFromSelector, jsdomIt } from './tests/util.js';
-import { expect } from 'vitest';
+import { MockedD3 } from './tests/MockedD3.js';
+import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility.js';
+import type { D3Element } from './types.js';
 
 describe('accessibility', () => {
+  const fauxSvgNode: MockedD3 = new MockedD3();
+
   describe('setA11yDiagramInfo', () => {
-    jsdomIt('should set svg element role to "graphics-document document"', ({ svg }) => {
-      setA11yDiagramInfo(svg, 'flowchart');
-      const svgNode = ensureNodeFromSelector('svg');
-      expect(svgNode.getAttribute('role')).toBe('graphics-document document');
+    it('should set svg element role to "graphics-document document"', () => {
+      const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
+      setA11yDiagramInfo(fauxSvgNode, 'flowchart');
+      expect(svgAttrSpy).toHaveBeenCalledWith('role', 'graphics-document document');
     });
 
-    jsdomIt('should set aria-roledescription to the diagram type', ({ svg }) => {
-      setA11yDiagramInfo(svg, 'flowchart');
-      const svgNode = ensureNodeFromSelector('svg');
-      expect(svgNode.getAttribute('aria-roledescription')).toBe('flowchart');
+    it('should set aria-roledescription to the diagram type', () => {
+      const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
+      setA11yDiagramInfo(fauxSvgNode, 'flowchart');
+      expect(svgAttrSpy).toHaveBeenCalledWith('aria-roledescription', 'flowchart');
     });
 
-    jsdomIt('should not set aria-roledescription if the diagram type is empty', ({ svg }) => {
-      setA11yDiagramInfo(svg, '');
-      const svgNode = ensureNodeFromSelector('svg');
-      expect(svgNode.getAttribute('aria-roledescription')).toBeNull();
+    it('should not set aria-roledescription if the diagram type is empty', () => {
+      const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
+      setA11yDiagramInfo(fauxSvgNode, '');
+      expect(svgAttrSpy).toHaveBeenCalledTimes(1);
+      expect(svgAttrSpy).toHaveBeenCalledWith('role', expect.anything()); // only called to set the role
     });
   });
 
@@ -36,78 +39,115 @@ describe('accessibility', () => {
         expect(noInsertAttrSpy).not.toHaveBeenCalled();
       });
 
+      // convenience functions to DRY up the spec
+
+      function expectAriaLabelledByItTitleId(
+        svgD3Node: D3Element,
+        title: string | undefined,
+        desc: string | undefined,
+        givenId: string
+      ): void {
+        const svgAttrSpy = vi.spyOn(svgD3Node, 'attr').mockReturnValue(svgD3Node);
+        addSVGa11yTitleDescription(svgD3Node, title, desc, givenId);
+        expect(svgAttrSpy).toHaveBeenCalledWith('aria-labelledby', `chart-title-${givenId}`);
+      }
+
+      function expectAriaDescribedByItDescId(
+        svgD3Node: D3Element,
+        title: string | undefined,
+        desc: string | undefined,
+        givenId: string
+      ): void {
+        const svgAttrSpy = vi.spyOn(svgD3Node, 'attr').mockReturnValue(svgD3Node);
+        addSVGa11yTitleDescription(svgD3Node, title, desc, givenId);
+        expect(svgAttrSpy).toHaveBeenCalledWith('aria-describedby', `chart-desc-${givenId}`);
+      }
+
+      function a11yTitleTagInserted(
+        svgD3Node: D3Element,
+        title: string | undefined,
+        desc: string | undefined,
+        givenId: string,
+        callNumber: number
+      ): void {
+        a11yTagInserted(svgD3Node, title, desc, givenId, callNumber, 'title', title);
+      }
+
+      function a11yDescTagInserted(
+        svgD3Node: D3Element,
+        title: string | undefined,
+        desc: string | undefined,
+        givenId: string,
+        callNumber: number
+      ): void {
+        a11yTagInserted(svgD3Node, title, desc, givenId, callNumber, 'desc', desc);
+      }
+
+      function a11yTagInserted(
+        _svgD3Node: D3Element,
+        title: string | undefined,
+        desc: string | undefined,
+        givenId: string,
+        callNumber: number,
+        expectedPrefix: string,
+        expectedText: string | undefined
+      ): void {
+        const fauxInsertedD3: MockedD3 = new MockedD3();
+        const svginsertpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxInsertedD3);
+        const titleAttrSpy = vi.spyOn(fauxInsertedD3, 'attr').mockReturnValue(fauxInsertedD3);
+        const titleTextSpy = vi.spyOn(fauxInsertedD3, 'text');
+
+        addSVGa11yTitleDescription(fauxSvgNode, title, desc, givenId);
+        expect(svginsertpy).toHaveBeenCalledWith(expectedPrefix, ':first-child');
+        expect(titleAttrSpy).toHaveBeenCalledWith('id', `chart-${expectedPrefix}-${givenId}`);
+        expect(titleTextSpy).toHaveBeenNthCalledWith(callNumber, expectedText);
+      }
+
       describe('with a11y title', () => {
         const a11yTitle = 'a11y title';
 
         describe('with a11y description', () => {
           const a11yDesc = 'a11y description';
 
-          jsdomIt('should set aria-labelledby to the title id inserted as a child', ({ svg }) => {
-            addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId);
-            const svgNode = ensureNodeFromSelector('svg');
-            expect(svgNode.getAttribute('aria-labelledby')).toBe(`chart-title-${givenId}`);
+          it('should set aria-labelledby to the title id inserted as a child', () => {
+            expectAriaLabelledByItTitleId(fauxSvgNode, a11yTitle, a11yDesc, givenId);
           });
 
-          jsdomIt(
-            'should set aria-describedby to the description id inserted as a child',
-            ({ svg }) => {
-              addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId);
-              const svgNode = ensureNodeFromSelector('svg');
-              expect(svgNode.getAttribute('aria-describedby')).toBe(`chart-desc-${givenId}`);
-            }
-          );
+          it('should set aria-describedby to the description id inserted as a child', () => {
+            expectAriaDescribedByItDescId(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+          });
 
-          jsdomIt(
-            'should insert title tag as the first child with the text set to the accTitle given',
-            ({ svg }) => {
-              addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId);
-              const svgNode = ensureNodeFromSelector('svg');
-              const titleNode = ensureNodeFromSelector('title', svgNode);
-              expect(titleNode?.innerHTML).toBe(a11yTitle);
-            }
-          );
+          it('should insert title tag as the first child with the text set to the accTitle given', () => {
+            a11yTitleTagInserted(fauxSvgNode, a11yTitle, a11yDesc, givenId, 2);
+          });
 
-          jsdomIt(
-            'should insert desc tag as the 2nd child with the text set to accDescription given',
-            ({ svg }) => {
-              addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId);
-              const svgNode = ensureNodeFromSelector('svg');
-              const descNode = ensureNodeFromSelector('desc', svgNode);
-              expect(descNode?.innerHTML).toBe(a11yDesc);
-            }
-          );
+          it('should insert desc tag as the 2nd child with the text set to accDescription given', () => {
+            a11yDescTagInserted(fauxSvgNode, a11yTitle, a11yDesc, givenId, 1);
+          });
         });
 
-        describe(`without a11y description`, {}, () => {
+        describe(`without a11y description`, () => {
           const a11yDesc = undefined;
 
-          jsdomIt('should set aria-labelledby to the title id inserted as a child', ({ svg }) => {
-            addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId);
-            const svgNode = ensureNodeFromSelector('svg');
-            expect(svgNode.getAttribute('aria-labelledby')).toBe(`chart-title-${givenId}`);
+          it('should set aria-labelledby to the title id inserted as a child', () => {
+            expectAriaLabelledByItTitleId(fauxSvgNode, a11yTitle, a11yDesc, givenId);
           });
 
-          jsdomIt('should not set aria-describedby', ({ svg }) => {
-            addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId);
-            const svgNode = ensureNodeFromSelector('svg');
-            expect(svgNode.getAttribute('aria-describedby')).toBeNull();
+          it('should not set aria-describedby', () => {
+            const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
+            addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+            expect(svgAttrSpy).not.toHaveBeenCalledWith('aria-describedby', expect.anything());
           });
 
-          jsdomIt(
-            'should insert title tag as the first child with the text set to the accTitle given',
-            ({ svg }) => {
-              addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId);
-              const svgNode = ensureNodeFromSelector('svg');
-              const titleNode = ensureNodeFromSelector('title', svgNode);
-              expect(titleNode?.innerHTML).toBe(a11yTitle);
-            }
-          );
+          it('should insert title tag as the first child with the text set to the accTitle given', () => {
+            a11yTitleTagInserted(fauxSvgNode, a11yTitle, a11yDesc, givenId, 1);
+          });
 
-          jsdomIt('should not insert description tag', ({ svg }) => {
-            addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId);
-            const svgNode = ensureNodeFromSelector('svg');
-            const descNode = svgNode.querySelector('desc');
-            expect(descNode).toBeNull();
+          it('should not insert description tag', () => {
+            const fauxTitle: MockedD3 = new MockedD3();
+            const svginsertpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxTitle);
+            addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+            expect(svginsertpy).not.toHaveBeenCalledWith('desc', ':first-child');
           });
         });
       });
@@ -118,66 +158,55 @@ describe('accessibility', () => {
         describe('with a11y description', () => {
           const a11yDesc = 'a11y description';
 
-          jsdomIt('should not set aria-labelledby', ({ svg }) => {
-            addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId);
-            const svgNode = ensureNodeFromSelector('svg');
-            expect(svgNode.getAttribute('aria-labelledby')).toBeNull();
+          it('should not set aria-labelledby', () => {
+            const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
+            addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+            expect(svgAttrSpy).not.toHaveBeenCalledWith('aria-labelledby', expect.anything());
           });
 
-          jsdomIt('should not insert title tag', ({ svg }) => {
-            addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId);
-            const svgNode = ensureNodeFromSelector('svg');
-            const titleNode = svgNode.querySelector('title');
-            expect(titleNode).toBeNull();
+          it('should not insert title tag', () => {
+            const fauxTitle: MockedD3 = new MockedD3();
+            const svginsertpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxTitle);
+            addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+            expect(svginsertpy).not.toHaveBeenCalledWith('title', ':first-child');
           });
 
-          jsdomIt(
-            'should set aria-describedby to the description id inserted as a child',
-            ({ svg }) => {
-              addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId);
-              const svgNode = ensureNodeFromSelector('svg');
-              expect(svgNode.getAttribute('aria-describedby')).toBe(`chart-desc-${givenId}`);
-            }
-          );
+          it('should set aria-describedby to the description id inserted as a child', () => {
+            expectAriaDescribedByItDescId(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+          });
 
-          jsdomIt(
-            'should insert desc tag as the 2nd child with the text set to accDescription given',
-            ({ svg }) => {
-              addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId);
-              const svgNode = ensureNodeFromSelector('svg');
-              const descNode = ensureNodeFromSelector('desc', svgNode);
-              expect(descNode?.innerHTML).toBe(a11yDesc);
-            }
-          );
+          it('should insert desc tag as the 2nd child with the text set to accDescription given', () => {
+            a11yDescTagInserted(fauxSvgNode, a11yTitle, a11yDesc, givenId, 1);
+          });
         });
 
         describe('without a11y description', () => {
           const a11yDesc = undefined;
 
-          jsdomIt('should not set aria-labelledby', ({ svg }) => {
-            addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId);
-            const svgNode = ensureNodeFromSelector('svg');
-            expect(svgNode.getAttribute('aria-labelledby')).toBeNull();
+          it('should not set aria-labelledby', () => {
+            const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
+            addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+            expect(svgAttrSpy).not.toHaveBeenCalledWith('aria-labelledby', expect.anything());
           });
 
-          jsdomIt('should not set aria-describedby', ({ svg }) => {
-            addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId);
-            const svgNode = ensureNodeFromSelector('svg');
-            expect(svgNode.getAttribute('aria-describedby')).toBeNull();
+          it('should not set aria-describedby', () => {
+            const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
+            addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+            expect(svgAttrSpy).not.toHaveBeenCalledWith('aria-describedby', expect.anything());
           });
 
-          jsdomIt('should not insert title tag', ({ svg }) => {
-            addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId);
-            const svgNode = ensureNodeFromSelector('svg');
-            const titleNode = svgNode.querySelector('title');
-            expect(titleNode).toBeNull();
+          it('should not insert title tag', () => {
+            const fauxTitle: MockedD3 = new MockedD3();
+            const svginsertpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxTitle);
+            addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+            expect(svginsertpy).not.toHaveBeenCalledWith('title', ':first-child');
           });
 
-          jsdomIt('should not insert  description tag', ({ svg }) => {
-            addSVGa11yTitleDescription(svg, a11yTitle, a11yDesc, givenId);
-            const svgNode = ensureNodeFromSelector('svg');
-            const descNode = svgNode.querySelector('desc');
-            expect(descNode).toBeNull();
+          it('should not insert  description tag', () => {
+            const fauxDesc: MockedD3 = new MockedD3();
+            const svginsertpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxDesc);
+            addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+            expect(svginsertpy).not.toHaveBeenCalledWith('desc', ':first-child');
           });
         });
       });

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

@@ -78,41 +78,5 @@ describe('diagram-orchestration', () => {
       flowchart: 1 "pie" pie: 2 "pie"`)
       ).toBe('pie');
     });
-
-    it('should detect proper diagram when defaultRenderer is elk for flowchart', () => {
-      expect(
-        detectType('mindmap\n  root\n    Photograph\n      Waterfall', {
-          flowchart: { defaultRenderer: 'elk' },
-        })
-      ).toBe('mindmap');
-      expect(
-        detectType(
-          `
-          classDiagram
-            class Person {
-              +String name
-              -Int id
-              #double age
-              +Text demographicProfile
-            }
-          `,
-          { flowchart: { defaultRenderer: 'elk' } }
-        )
-      ).toBe('class');
-      expect(
-        detectType(
-          `
-          erDiagram
-            p[Photograph] {
-              varchar(12) jobId
-              date dateCreated
-            }
-          `,
-          {
-            flowchart: { defaultRenderer: 'elk' },
-          }
-        )
-      ).toBe('er');
-    });
   });
 });

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

@@ -1,12 +1,21 @@
 import { it, describe, expect } from 'vitest';
+import { db } from './architectureDb.js';
 import { parser } from './architectureParser.js';
-import { ArchitectureDB } from './architectureDb.js';
+
+const {
+  clear,
+  getDiagramTitle,
+  getAccTitle,
+  getAccDescription,
+  getServices,
+  getGroups,
+  getEdges,
+  getJunctions,
+} = db;
+
 describe('architecture diagrams', () => {
-  let db: ArchitectureDB;
   beforeEach(() => {
-    db = new ArchitectureDB();
-    // @ts-expect-error since type is set to undefined we will have error
-    parser.parser?.yy = db;
+    clear();
   });
 
   describe('architecture diagram definitions', () => {
@@ -27,7 +36,7 @@ describe('architecture diagrams', () => {
     it('should handle title on the first line', async () => {
       const str = `architecture-beta title Simple Architecture Diagram`;
       await expect(parser.parse(str)).resolves.not.toThrow();
-      expect(db.getDiagramTitle()).toBe('Simple Architecture Diagram');
+      expect(getDiagramTitle()).toBe('Simple Architecture Diagram');
     });
 
     it('should handle title on another line', async () => {
@@ -35,7 +44,7 @@ describe('architecture diagrams', () => {
             title Simple Architecture Diagram
             `;
       await expect(parser.parse(str)).resolves.not.toThrow();
-      expect(db.getDiagramTitle()).toBe('Simple Architecture Diagram');
+      expect(getDiagramTitle()).toBe('Simple Architecture Diagram');
     });
 
     it('should handle accessibility title and description', async () => {
@@ -44,8 +53,8 @@ describe('architecture diagrams', () => {
             accDescr: Accessibility Description
             `;
       await expect(parser.parse(str)).resolves.not.toThrow();
-      expect(db.getAccTitle()).toBe('Accessibility Title');
-      expect(db.getAccDescription()).toBe('Accessibility Description');
+      expect(getAccTitle()).toBe('Accessibility Title');
+      expect(getAccDescription()).toBe('Accessibility Description');
     });
 
     it('should handle multiline accessibility description', async () => {
@@ -55,7 +64,7 @@ describe('architecture diagrams', () => {
             }
             `;
       await expect(parser.parse(str)).resolves.not.toThrow();
-      expect(db.getAccDescription()).toBe('Accessibility Description');
+      expect(getAccDescription()).toBe('Accessibility Description');
     });
   });
 });

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

@@ -1,9 +1,8 @@
-import { getConfig as commonGetConfig } from '../../config.js';
 import type { ArchitectureDiagramConfig } from '../../config.type.js';
 import DEFAULT_CONFIG from '../../defaultConfig.js';
-import type { DiagramDB } from '../../diagram-api/types.js';
+import { getConfig as commonGetConfig } from '../../config.js';
 import type { D3Element } from '../../types.js';
-import { cleanAndMerge } from '../../utils.js';
+import { ImperativeState } from '../../utils/imperativeState.js';
 import {
   clear as commonClear,
   getAccDescription,
@@ -15,6 +14,7 @@ import {
 } from '../common/commonDb.js';
 import type {
   ArchitectureAlignment,
+  ArchitectureDB,
   ArchitectureDirectionPair,
   ArchitectureDirectionPairMap,
   ArchitectureEdge,
@@ -33,333 +33,330 @@ import {
   isArchitectureService,
   shiftPositionByArchitectureDirectionPair,
 } from './architectureTypes.js';
+import { cleanAndMerge } from '../../utils.js';
 
 const DEFAULT_ARCHITECTURE_CONFIG: Required<ArchitectureDiagramConfig> =
   DEFAULT_CONFIG.architecture;
-export class ArchitectureDB implements DiagramDB {
-  private nodes: Record<string, ArchitectureNode> = {};
-  private groups: Record<string, ArchitectureGroup> = {};
-  private edges: ArchitectureEdge[] = [];
-  private registeredIds: Record<string, 'node' | 'group'> = {};
-  private dataStructures?: ArchitectureState['dataStructures'];
-  private elements: Record<string, D3Element> = {};
 
-  constructor() {
-    this.clear();
+const state = new ImperativeState<ArchitectureState>(() => ({
+  nodes: {},
+  groups: {},
+  edges: [],
+  registeredIds: {},
+  config: DEFAULT_ARCHITECTURE_CONFIG,
+  dataStructures: undefined,
+  elements: {},
+}));
+
+const clear = (): void => {
+  state.reset();
+  commonClear();
+};
+
+const addService = function ({
+  id,
+  icon,
+  in: parent,
+  title,
+  iconText,
+}: Omit<ArchitectureService, 'edges'>) {
+  if (state.records.registeredIds[id] !== undefined) {
+    throw new Error(
+      `The service id [${id}] is already in use by another ${state.records.registeredIds[id]}`
+    );
+  }
+  if (parent !== undefined) {
+    if (id === parent) {
+      throw new Error(`The service [${id}] cannot be placed within itself`);
+    }
+    if (state.records.registeredIds[parent] === undefined) {
+      throw new Error(
+        `The service [${id}]'s parent does not exist. Please make sure the parent is created before this service`
+      );
+    }
+    if (state.records.registeredIds[parent] === 'node') {
+      throw new Error(`The service [${id}]'s parent is not a group`);
+    }
   }
 
-  public clear(): void {
-    this.nodes = {};
-    this.groups = {};
-    this.edges = [];
-    this.registeredIds = {};
-    this.dataStructures = undefined;
-    this.elements = {};
-    commonClear();
+  state.records.registeredIds[id] = 'node';
+
+  state.records.nodes[id] = {
+    id,
+    type: 'service',
+    icon,
+    iconText,
+    title,
+    edges: [],
+    in: parent,
+  };
+};
+
+const getServices = (): ArchitectureService[] =>
+  Object.values(state.records.nodes).filter<ArchitectureService>(isArchitectureService);
+
+const addJunction = function ({ id, in: parent }: Omit<ArchitectureJunction, 'edges'>) {
+  state.records.registeredIds[id] = 'node';
+
+  state.records.nodes[id] = {
+    id,
+    type: 'junction',
+    edges: [],
+    in: parent,
+  };
+};
+
+const getJunctions = (): ArchitectureJunction[] =>
+  Object.values(state.records.nodes).filter<ArchitectureJunction>(isArchitectureJunction);
+
+const getNodes = (): ArchitectureNode[] => Object.values(state.records.nodes);
+
+const getNode = (id: string): ArchitectureNode | null => state.records.nodes[id];
+
+const addGroup = function ({ id, icon, in: parent, title }: ArchitectureGroup) {
+  if (state.records.registeredIds[id] !== undefined) {
+    throw new Error(
+      `The group id [${id}] is already in use by another ${state.records.registeredIds[id]}`
+    );
+  }
+  if (parent !== undefined) {
+    if (id === parent) {
+      throw new Error(`The group [${id}] cannot be placed within itself`);
+    }
+    if (state.records.registeredIds[parent] === undefined) {
+      throw new Error(
+        `The group [${id}]'s parent does not exist. Please make sure the parent is created before this group`
+      );
+    }
+    if (state.records.registeredIds[parent] === 'node') {
+      throw new Error(`The group [${id}]'s parent is not a group`);
+    }
   }
 
-  public addService({
+  state.records.registeredIds[id] = 'group';
+
+  state.records.groups[id] = {
     id,
     icon,
-    in: parent,
     title,
-    iconText,
-  }: Omit<ArchitectureService, 'edges'>): void {
-    if (this.registeredIds[id] !== undefined) {
-      throw new Error(
-        `The service id [${id}] is already in use by another ${this.registeredIds[id]}`
-      );
-    }
-    if (parent !== undefined) {
-      if (id === parent) {
-        throw new Error(`The service [${id}] cannot be placed within itself`);
-      }
-      if (this.registeredIds[parent] === undefined) {
-        throw new Error(
-          `The service [${id}]'s parent does not exist. Please make sure the parent is created before this service`
-        );
-      }
-      if (this.registeredIds[parent] === 'node') {
-        throw new Error(`The service [${id}]'s parent is not a group`);
-      }
-    }
+    in: parent,
+  };
+};
+const getGroups = (): ArchitectureGroup[] => {
+  return Object.values(state.records.groups);
+};
 
-    this.registeredIds[id] = 'node';
-
-    this.nodes[id] = {
-      id,
-      type: 'service',
-      icon,
-      iconText,
-      title,
-      edges: [],
-      in: parent,
-    };
+const addEdge = function ({
+  lhsId,
+  rhsId,
+  lhsDir,
+  rhsDir,
+  lhsInto,
+  rhsInto,
+  lhsGroup,
+  rhsGroup,
+  title,
+}: ArchitectureEdge<string>) {
+  if (!isArchitectureDirection(lhsDir)) {
+    throw new Error(
+      `Invalid direction given for left hand side of edge ${lhsId}--${rhsId}. Expected (L,R,T,B) got ${lhsDir}`
+    );
+  }
+  if (!isArchitectureDirection(rhsDir)) {
+    throw new Error(
+      `Invalid direction given for right hand side of edge ${lhsId}--${rhsId}. Expected (L,R,T,B) got ${rhsDir}`
+    );
   }
 
-  public getServices(): ArchitectureService[] {
-    return Object.values(this.nodes).filter(isArchitectureService);
+  if (state.records.nodes[lhsId] === undefined && state.records.groups[lhsId] === undefined) {
+    throw new Error(
+      `The left-hand id [${lhsId}] does not yet exist. Please create the service/group before declaring an edge to it.`
+    );
+  }
+  if (state.records.nodes[rhsId] === undefined && state.records.groups[lhsId] === undefined) {
+    throw new Error(
+      `The right-hand id [${rhsId}] does not yet exist. Please create the service/group before declaring an edge to it.`
+    );
   }
 
-  public addJunction({ id, in: parent }: Omit<ArchitectureJunction, 'edges'>): void {
-    this.registeredIds[id] = 'node';
-
-    this.nodes[id] = {
-      id,
-      type: 'junction',
-      edges: [],
-      in: parent,
-    };
+  const lhsGroupId = state.records.nodes[lhsId].in;
+  const rhsGroupId = state.records.nodes[rhsId].in;
+  if (lhsGroup && lhsGroupId && rhsGroupId && lhsGroupId == rhsGroupId) {
+    throw new Error(
+      `The left-hand id [${lhsId}] is modified to traverse the group boundary, but the edge does not pass through two groups.`
+    );
+  }
+  if (rhsGroup && lhsGroupId && rhsGroupId && lhsGroupId == rhsGroupId) {
+    throw new Error(
+      `The right-hand id [${rhsId}] is modified to traverse the group boundary, but the edge does not pass through two groups.`
+    );
   }
 
-  public getJunctions(): ArchitectureJunction[] {
-    return Object.values(this.nodes).filter(isArchitectureJunction);
-  }
-
-  public getNodes(): ArchitectureNode[] {
-    return Object.values(this.nodes);
-  }
-
-  public getNode(id: string): ArchitectureNode | null {
-    return this.nodes[id] ?? null;
-  }
-
-  public addGroup({ id, icon, in: parent, title }: ArchitectureGroup): void {
-    if (this.registeredIds?.[id] !== undefined) {
-      throw new Error(
-        `The group id [${id}] is already in use by another ${this.registeredIds[id]}`
-      );
-    }
-    if (parent !== undefined) {
-      if (id === parent) {
-        throw new Error(`The group [${id}] cannot be placed within itself`);
-      }
-      if (this.registeredIds?.[parent] === undefined) {
-        throw new Error(
-          `The group [${id}]'s parent does not exist. Please make sure the parent is created before this group`
-        );
-      }
-      if (this.registeredIds?.[parent] === 'node') {
-        throw new Error(`The group [${id}]'s parent is not a group`);
-      }
-    }
-
-    this.registeredIds[id] = 'group';
-
-    this.groups[id] = {
-      id,
-      icon,
-      title,
-      in: parent,
-    };
-  }
-  public getGroups(): ArchitectureGroup[] {
-    return Object.values(this.groups);
-  }
-  public addEdge({
+  const edge = {
     lhsId,
-    rhsId,
     lhsDir,
-    rhsDir,
     lhsInto,
-    rhsInto,
     lhsGroup,
+    rhsId,
+    rhsDir,
+    rhsInto,
     rhsGroup,
     title,
-  }: ArchitectureEdge): void {
-    if (!isArchitectureDirection(lhsDir)) {
-      throw new Error(
-        `Invalid direction given for left hand side of edge ${lhsId}--${rhsId}. Expected (L,R,T,B) got ${String(lhsDir)}`
-      );
-    }
-    if (!isArchitectureDirection(rhsDir)) {
-      throw new Error(
-        `Invalid direction given for right hand side of edge ${lhsId}--${rhsId}. Expected (L,R,T,B) got ${String(rhsDir)}`
-      );
-    }
+  };
 
-    if (this.nodes[lhsId] === undefined && this.groups[lhsId] === undefined) {
-      throw new Error(
-        `The left-hand id [${lhsId}] does not yet exist. Please create the service/group before declaring an edge to it.`
-      );
-    }
-    if (this.nodes[rhsId] === undefined && this.groups[rhsId] === undefined) {
-      throw new Error(
-        `The right-hand id [${rhsId}] does not yet exist. Please create the service/group before declaring an edge to it.`
-      );
-    }
-
-    const lhsGroupId = this.nodes[lhsId].in;
-    const rhsGroupId = this.nodes[rhsId].in;
-    if (lhsGroup && lhsGroupId && rhsGroupId && lhsGroupId == rhsGroupId) {
-      throw new Error(
-        `The left-hand id [${lhsId}] is modified to traverse the group boundary, but the edge does not pass through two groups.`
-      );
-    }
-    if (rhsGroup && lhsGroupId && rhsGroupId && lhsGroupId == rhsGroupId) {
-      throw new Error(
-        `The right-hand id [${rhsId}] is modified to traverse the group boundary, but the edge does not pass through two groups.`
-      );
-    }
-
-    const edge = {
-      lhsId,
-      lhsDir,
-      lhsInto,
-      lhsGroup,
-      rhsId,
-      rhsDir,
-      rhsInto,
-      rhsGroup,
-      title,
-    };
-
-    this.edges.push(edge);
-    if (this.nodes[lhsId] && this.nodes[rhsId]) {
-      this.nodes[lhsId].edges.push(this.edges[this.edges.length - 1]);
-      this.nodes[rhsId].edges.push(this.edges[this.edges.length - 1]);
-    }
+  state.records.edges.push(edge);
+  if (state.records.nodes[lhsId] && state.records.nodes[rhsId]) {
+    state.records.nodes[lhsId].edges.push(state.records.edges[state.records.edges.length - 1]);
+    state.records.nodes[rhsId].edges.push(state.records.edges[state.records.edges.length - 1]);
   }
+};
 
-  public getEdges(): ArchitectureEdge[] {
-    return this.edges;
-  }
+const getEdges = (): ArchitectureEdge[] => state.records.edges;
 
-  /**
-   * Returns the current diagram's adjacency list, spatial map, & group alignments.
-   * If they have not been created, run the algorithms to generate them.
-   * @returns
-   */
-  public getDataStructures() {
-    if (this.dataStructures === undefined) {
-      // Tracks how groups are aligned with one another. Generated while creating the adj list
-      const groupAlignments: Record<
-        string,
-        Record<string, Exclude<ArchitectureAlignment, 'bend'>>
-      > = {};
+/**
+ * Returns the current diagram's adjacency list, spatial map, & group alignments.
+ * If they have not been created, run the algorithms to generate them.
+ * @returns
+ */
+const getDataStructures = () => {
+  if (state.records.dataStructures === undefined) {
+    // Tracks how groups are aligned with one another. Generated while creating the adj list
+    const groupAlignments: Record<
+      string,
+      Record<string, Exclude<ArchitectureAlignment, 'bend'>>
+    > = {};
 
-      // Create an adjacency list of the diagram to perform BFS on
-      // Outer reduce applied on all services
-      // Inner reduce applied on the edges for a service
-      const adjList = Object.entries(this.nodes).reduce<
-        Record<string, ArchitectureDirectionPairMap>
-      >((prevOuter, [id, service]) => {
-        prevOuter[id] = service.edges.reduce<ArchitectureDirectionPairMap>((prevInner, edge) => {
-          // track the direction groups connect to one another
-          const lhsGroupId = this.getNode(edge.lhsId)?.in;
-          const rhsGroupId = this.getNode(edge.rhsId)?.in;
-          if (lhsGroupId && rhsGroupId && lhsGroupId !== rhsGroupId) {
-            const alignment = getArchitectureDirectionAlignment(edge.lhsDir, edge.rhsDir);
-            if (alignment !== 'bend') {
-              groupAlignments[lhsGroupId] ??= {};
-              groupAlignments[lhsGroupId][rhsGroupId] = alignment;
-              groupAlignments[rhsGroupId] ??= {};
-              groupAlignments[rhsGroupId][lhsGroupId] = alignment;
-            }
-          }
-
-          if (edge.lhsId === id) {
-            // source is LHS
-            const pair = getArchitectureDirectionPair(edge.lhsDir, edge.rhsDir);
-            if (pair) {
-              prevInner[pair] = edge.rhsId;
-            }
-          } else {
-            // source is RHS
-            const pair = getArchitectureDirectionPair(edge.rhsDir, edge.lhsDir);
-            if (pair) {
-              prevInner[pair] = edge.lhsId;
-            }
-          }
-          return prevInner;
-        }, {});
-        return prevOuter;
-      }, {});
-
-      // Configuration for the initial pass of BFS
-      const firstId = Object.keys(adjList)[0];
-      const visited = { [firstId]: 1 };
-      // If a key is present in this object, it has not been visited
-      const notVisited = Object.keys(adjList).reduce(
-        (prev, id) => (id === firstId ? prev : { ...prev, [id]: 1 }),
-        {} as Record<string, number>
-      );
-
-      // Perform BFS on the adjacency list
-      const BFS = (startingId: string): ArchitectureSpatialMap => {
-        const spatialMap = { [startingId]: [0, 0] };
-        const queue = [startingId];
-        while (queue.length > 0) {
-          const id = queue.shift();
-          if (id) {
-            visited[id] = 1;
-            delete notVisited[id];
-            const adj = adjList[id];
-            const [posX, posY] = spatialMap[id];
-            Object.entries(adj).forEach(([dir, rhsId]) => {
-              if (!visited[rhsId]) {
-                spatialMap[rhsId] = shiftPositionByArchitectureDirectionPair(
-                  [posX, posY],
-                  dir as ArchitectureDirectionPair
-                );
-                queue.push(rhsId);
-              }
-            });
+    // Create an adjacency list of the diagram to perform BFS on
+    // Outer reduce applied on all services
+    // Inner reduce applied on the edges for a service
+    const adjList = Object.entries(state.records.nodes).reduce<
+      Record<string, ArchitectureDirectionPairMap>
+    >((prevOuter, [id, service]) => {
+      prevOuter[id] = service.edges.reduce<ArchitectureDirectionPairMap>((prevInner, edge) => {
+        // track the direction groups connect to one another
+        const lhsGroupId = getNode(edge.lhsId)?.in;
+        const rhsGroupId = getNode(edge.rhsId)?.in;
+        if (lhsGroupId && rhsGroupId && lhsGroupId !== rhsGroupId) {
+          const alignment = getArchitectureDirectionAlignment(edge.lhsDir, edge.rhsDir);
+          if (alignment !== 'bend') {
+            groupAlignments[lhsGroupId] ??= {};
+            groupAlignments[lhsGroupId][rhsGroupId] = alignment;
+            groupAlignments[rhsGroupId] ??= {};
+            groupAlignments[rhsGroupId][lhsGroupId] = alignment;
           }
         }
-        return spatialMap;
-      };
-      const spatialMaps = [BFS(firstId)];
 
-      // If our diagram is disconnected, keep adding additional spatial maps until all disconnected graphs have been found
-      while (Object.keys(notVisited).length > 0) {
-        spatialMaps.push(BFS(Object.keys(notVisited)[0]));
+        if (edge.lhsId === id) {
+          // source is LHS
+          const pair = getArchitectureDirectionPair(edge.lhsDir, edge.rhsDir);
+          if (pair) {
+            prevInner[pair] = edge.rhsId;
+          }
+        } else {
+          // source is RHS
+          const pair = getArchitectureDirectionPair(edge.rhsDir, edge.lhsDir);
+          if (pair) {
+            prevInner[pair] = edge.lhsId;
+          }
+        }
+        return prevInner;
+      }, {});
+      return prevOuter;
+    }, {});
+
+    // Configuration for the initial pass of BFS
+    const firstId = Object.keys(adjList)[0];
+    const visited = { [firstId]: 1 };
+    // If a key is present in this object, it has not been visited
+    const notVisited = Object.keys(adjList).reduce(
+      (prev, id) => (id === firstId ? prev : { ...prev, [id]: 1 }),
+      {} as Record<string, number>
+    );
+
+    // Perform BFS on the adjacency list
+    const BFS = (startingId: string): ArchitectureSpatialMap => {
+      const spatialMap = { [startingId]: [0, 0] };
+      const queue = [startingId];
+      while (queue.length > 0) {
+        const id = queue.shift();
+        if (id) {
+          visited[id] = 1;
+          delete notVisited[id];
+          const adj = adjList[id];
+          const [posX, posY] = spatialMap[id];
+          Object.entries(adj).forEach(([dir, rhsId]) => {
+            if (!visited[rhsId]) {
+              spatialMap[rhsId] = shiftPositionByArchitectureDirectionPair(
+                [posX, posY],
+                dir as ArchitectureDirectionPair
+              );
+              queue.push(rhsId);
+            }
+          });
+        }
       }
-      this.dataStructures = {
-        adjList,
-        spatialMaps,
-        groupAlignments,
-      };
+      return spatialMap;
+    };
+    const spatialMaps = [BFS(firstId)];
+
+    // If our diagram is disconnected, keep adding additional spatial maps until all disconnected graphs have been found
+    while (Object.keys(notVisited).length > 0) {
+      spatialMaps.push(BFS(Object.keys(notVisited)[0]));
     }
-    return this.dataStructures;
+    state.records.dataStructures = {
+      adjList,
+      spatialMaps,
+      groupAlignments,
+    };
   }
+  return state.records.dataStructures;
+};
 
-  public setElementForId(id: string, element: D3Element): void {
-    this.elements[id] = element;
-  }
+const setElementForId = (id: string, element: D3Element) => {
+  state.records.elements[id] = element;
+};
+const getElementById = (id: string) => state.records.elements[id];
 
-  public getElementById(id: string): D3Element {
-    return this.elements[id];
-  }
+const getConfig = (): Required<ArchitectureDiagramConfig> => {
+  const config = cleanAndMerge({
+    ...DEFAULT_ARCHITECTURE_CONFIG,
+    ...commonGetConfig().architecture,
+  });
+  return config;
+};
 
-  public getConfig(): Required<ArchitectureDiagramConfig> {
-    return cleanAndMerge({
-      ...DEFAULT_ARCHITECTURE_CONFIG,
-      ...commonGetConfig().architecture,
-    });
-  }
+export const db: ArchitectureDB = {
+  clear,
+  setDiagramTitle,
+  getDiagramTitle,
+  setAccTitle,
+  getAccTitle,
+  setAccDescription,
+  getAccDescription,
+  getConfig,
 
-  public getConfigField<T extends keyof ArchitectureDiagramConfig>(
-    field: T
-  ): Required<ArchitectureDiagramConfig>[T] {
-    return this.getConfig()[field];
-  }
-
-  public setAccTitle = setAccTitle;
-  public getAccTitle = getAccTitle;
-  public setDiagramTitle = setDiagramTitle;
-  public getDiagramTitle = getDiagramTitle;
-  public getAccDescription = getAccDescription;
-  public setAccDescription = setAccDescription;
-}
+  addService,
+  getServices,
+  addJunction,
+  getJunctions,
+  getNodes,
+  getNode,
+  addGroup,
+  getGroups,
+  addEdge,
+  getEdges,
+  setElementForId,
+  getElementById,
+  getDataStructures,
+};
 
 /**
  * Typed wrapper for resolving an architecture diagram's config fields. Returns the default value if undefined
  * @param field - the config field to access
  * @returns
  */
-// export function getConfigField<T extends keyof ArchitectureDiagramConfig>(
-//   field: T
-// ): Required<ArchitectureDiagramConfig>[T] {
-//   return db.getConfig()[field];
-// }
+export function getConfigField<T extends keyof ArchitectureDiagramConfig>(
+  field: T
+): Required<ArchitectureDiagramConfig>[T] {
+  return getConfig()[field];
+}

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

@@ -1,14 +1,12 @@
 import type { DiagramDefinition } from '../../diagram-api/types.js';
 import { parser } from './architectureParser.js';
-import { ArchitectureDB } from './architectureDb.js';
+import { db } from './architectureDb.js';
 import styles from './architectureStyles.js';
 import { renderer } from './architectureRenderer.js';
 
 export const diagram: DiagramDefinition = {
   parser,
-  get db() {
-    return new ArchitectureDB();
-  },
+  db,
   renderer,
   styles,
 };

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

@@ -1,33 +1,24 @@
 import type { Architecture } from '@mermaid-js/parser';
 import { parse } from '@mermaid-js/parser';
-import type { ParserDefinition } from '../../diagram-api/types.js';
 import { log } from '../../logger.js';
+import type { ParserDefinition } from '../../diagram-api/types.js';
 import { populateCommonDb } from '../common/populateCommonDb.js';
-import { ArchitectureDB } from './architectureDb.js';
+import type { ArchitectureDB } from './architectureTypes.js';
+import { db } from './architectureDb.js';
 
 const populateDb = (ast: Architecture, db: ArchitectureDB) => {
   populateCommonDb(ast, db);
-  ast.groups.map((group) => db.addGroup(group));
+  ast.groups.map(db.addGroup);
   ast.services.map((service) => db.addService({ ...service, type: 'service' }));
   ast.junctions.map((service) => db.addJunction({ ...service, type: 'junction' }));
   // @ts-ignore TODO our parser guarantees the type is L/R/T/B and not string. How to change to union type?
-  ast.edges.map((edge) => db.addEdge(edge));
+  ast.edges.map(db.addEdge);
 };
 
 export const parser: ParserDefinition = {
-  parser: {
-    // @ts-expect-error - ArchitectureDB is not assignable to DiagramDB
-    yy: undefined,
-  },
   parse: async (input: string): Promise<void> => {
     const ast: Architecture = await parse('architecture', input);
     log.debug(ast);
-    const db = parser.parser?.yy;
-    if (!(db instanceof ArchitectureDB)) {
-      throw new Error(
-        'parser.parser?.yy was not a ArchitectureDB. This is due to a bug within Mermaid, please report this issue at https://github.com/mermaid-js/mermaid/issues.'
-      );
-    }
     populateDb(ast, db);
   },
 };

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

@@ -1,3 +1,4 @@
+import { registerIconPacks } from '../../rendering-util/icons.js';
 import type { Position } from 'cytoscape';
 import cytoscape from 'cytoscape';
 import type { FcoseLayoutOptions } from 'cytoscape-fcose';
@@ -6,10 +7,9 @@ import { select } from 'd3';
 import type { DrawDefinition, SVG } from '../../diagram-api/types.js';
 import type { Diagram } from '../../Diagram.js';
 import { log } from '../../logger.js';
-import { registerIconPacks } from '../../rendering-util/icons.js';
 import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
 import { setupGraphViewbox } from '../../setupGraphViewbox.js';
-import type { ArchitectureDB } from './architectureDb.js';
+import { getConfigField } from './architectureDb.js';
 import { architectureIcons } from './architectureIcons.js';
 import type {
   ArchitectureAlignment,
@@ -22,6 +22,7 @@ import type {
   NodeSingularData,
 } from './architectureTypes.js';
 import {
+  type ArchitectureDB,
   type ArchitectureDirection,
   type ArchitectureEdge,
   type ArchitectureGroup,
@@ -43,7 +44,7 @@ registerIconPacks([
 ]);
 cytoscape.use(fcose);
 
-function addServices(services: ArchitectureService[], cy: cytoscape.Core, db: ArchitectureDB) {
+function addServices(services: ArchitectureService[], cy: cytoscape.Core) {
   services.forEach((service) => {
     cy.add({
       group: 'nodes',
@@ -53,15 +54,15 @@ function addServices(services: ArchitectureService[], cy: cytoscape.Core, db: Ar
         icon: service.icon,
         label: service.title,
         parent: service.in,
-        width: db.getConfigField('iconSize'),
-        height: db.getConfigField('iconSize'),
+        width: getConfigField('iconSize'),
+        height: getConfigField('iconSize'),
       } as NodeSingularData,
       classes: 'node-service',
     });
   });
 }
 
-function addJunctions(junctions: ArchitectureJunction[], cy: cytoscape.Core, db: ArchitectureDB) {
+function addJunctions(junctions: ArchitectureJunction[], cy: cytoscape.Core) {
   junctions.forEach((junction) => {
     cy.add({
       group: 'nodes',
@@ -69,8 +70,8 @@ function addJunctions(junctions: ArchitectureJunction[], cy: cytoscape.Core, db:
         type: 'junction',
         id: junction.id,
         parent: junction.in,
-        width: db.getConfigField('iconSize'),
-        height: db.getConfigField('iconSize'),
+        width: getConfigField('iconSize'),
+        height: getConfigField('iconSize'),
       } as NodeSingularData,
       classes: 'node-junction',
     });
@@ -256,8 +257,7 @@ function getAlignments(
 }
 
 function getRelativeConstraints(
-  spatialMaps: ArchitectureSpatialMap[],
-  db: ArchitectureDB
+  spatialMaps: ArchitectureSpatialMap[]
 ): fcose.FcoseRelativePlacementConstraint[] {
   const relativeConstraints: fcose.FcoseRelativePlacementConstraint[] = [];
   const posToStr = (pos: number[]) => `${pos[0]},${pos[1]}`;
@@ -296,7 +296,7 @@ function getRelativeConstraints(
                 [ArchitectureDirectionName[
                   getOppositeArchitectureDirection(dir as ArchitectureDirection)
                 ]]: currId,
-                gap: 1.5 * db.getConfigField('iconSize'),
+                gap: 1.5 * getConfigField('iconSize'),
               });
             }
           });
@@ -353,7 +353,7 @@ function layoutArchitecture(
           style: {
             'text-valign': 'bottom',
             'text-halign': 'center',
-            'font-size': `${db.getConfigField('fontSize')}px`,
+            'font-size': `${getConfigField('fontSize')}px`,
           },
         },
         {
@@ -375,32 +375,23 @@ function layoutArchitecture(
           selector: '.node-group',
           style: {
             // @ts-ignore Incorrect library types
-            padding: `${db.getConfigField('padding')}px`,
+            padding: `${getConfigField('padding')}px`,
           },
         },
       ],
-      layout: {
-        name: 'grid',
-        boundingBox: {
-          x1: 0,
-          x2: 100,
-          y1: 0,
-          y2: 100,
-        },
-      },
     });
     // Remove element after layout
     renderEl.remove();
 
     addGroups(groups, cy);
-    addServices(services, cy, db);
-    addJunctions(junctions, cy, db);
+    addServices(services, cy);
+    addJunctions(junctions, cy);
     addEdges(edges, cy);
     // Use the spatial map to create alignment arrays for fcose
     const alignmentConstraint = getAlignments(db, spatialMaps, groupAlignments);
 
     // Create the relative constraints for fcose by using an inverse of the spatial map and performing BFS on it
-    const relativePlacementConstraint = getRelativeConstraints(spatialMaps, db);
+    const relativePlacementConstraint = getRelativeConstraints(spatialMaps);
 
     const layout = cy.layout({
       name: 'fcose',
@@ -415,9 +406,7 @@ function layoutArchitecture(
         const { parent: parentA } = nodeData(nodeA);
         const { parent: parentB } = nodeData(nodeB);
         const elasticity =
-          parentA === parentB
-            ? 1.5 * db.getConfigField('iconSize')
-            : 0.5 * db.getConfigField('iconSize');
+          parentA === parentB ? 1.5 * getConfigField('iconSize') : 0.5 * getConfigField('iconSize');
         return elasticity;
       },
       edgeElasticity(edge: EdgeSingular) {
@@ -537,11 +526,11 @@ export const draw: DrawDefinition = async (text, id, _version, diagObj: Diagram)
 
   const cy = await layoutArchitecture(services, junctions, groups, edges, db, ds);
 
-  await drawEdges(edgesElem, cy, db);
-  await drawGroups(groupElem, cy, db);
+  await drawEdges(edgesElem, cy);
+  await drawGroups(groupElem, cy);
   positionNodes(db, cy);
 
-  setupGraphViewbox(undefined, svg, db.getConfigField('padding'), db.getConfigField('useMaxWidth'));
+  setupGraphViewbox(undefined, svg, getConfigField('padding'), getConfigField('useMaxWidth'));
 };
 
 export const renderer = { draw };

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

@@ -1,9 +1,9 @@
+import { getIconSVG } from '../../rendering-util/icons.js';
 import type cytoscape from 'cytoscape';
 import { getConfig } from '../../diagram-api/diagramAPI.js';
 import { createText } from '../../rendering-util/createText.js';
-import { getIconSVG } from '../../rendering-util/icons.js';
 import type { D3Element } from '../../types.js';
-import type { ArchitectureDB } from './architectureDb.js';
+import { db, getConfigField } from './architectureDb.js';
 import { architectureIcons } from './architectureIcons.js';
 import {
   ArchitectureDirectionArrow,
@@ -16,17 +16,14 @@ import {
   isArchitectureDirectionY,
   isArchitecturePairXY,
   nodeData,
+  type ArchitectureDB,
   type ArchitectureJunction,
   type ArchitectureService,
 } from './architectureTypes.js';
 
-export const drawEdges = async function (
-  edgesEl: D3Element,
-  cy: cytoscape.Core,
-  db: ArchitectureDB
-) {
-  const padding = db.getConfigField('padding');
-  const iconSize = db.getConfigField('iconSize');
+export const drawEdges = async function (edgesEl: D3Element, cy: cytoscape.Core) {
+  const padding = getConfigField('padding');
+  const iconSize = getConfigField('iconSize');
   const halfIconSize = iconSize / 2;
   const arrowSize = iconSize / 6;
   const halfArrowSize = arrowSize / 2;
@@ -186,17 +183,13 @@ export const drawEdges = async function (
   );
 };
 
-export const drawGroups = async function (
-  groupsEl: D3Element,
-  cy: cytoscape.Core,
-  db: ArchitectureDB
-) {
-  const padding = db.getConfigField('padding');
+export const drawGroups = async function (groupsEl: D3Element, cy: cytoscape.Core) {
+  const padding = getConfigField('padding');
   const groupIconSize = padding * 0.75;
 
-  const fontSize = db.getConfigField('fontSize');
+  const fontSize = getConfigField('fontSize');
 
-  const iconSize = db.getConfigField('iconSize');
+  const iconSize = getConfigField('iconSize');
   const halfIconSize = iconSize / 2;
 
   await Promise.all(
@@ -273,7 +266,7 @@ export const drawServices = async function (
 ): Promise<number> {
   for (const service of services) {
     const serviceElem = elem.append('g');
-    const iconSize = db.getConfigField('iconSize');
+    const iconSize = getConfigField('iconSize');
 
     if (service.title) {
       const textElem = serviceElem.append('g');
@@ -357,7 +350,7 @@ export const drawJunctions = function (
 ) {
   junctions.forEach((junction) => {
     const junctionElem = elem.append('g');
-    const iconSize = db.getConfigField('iconSize');
+    const iconSize = getConfigField('iconSize');
 
     const bkgElem = junctionElem.append('g');
     bkgElem

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

@@ -92,20 +92,7 @@ export const setCssClass = function (itemIds: string, cssClassName: string) {
 const populateBlockDatabase = (_blockList: Block[], parent: Block): void => {
   const blockList = _blockList.flat();
   const children = [];
-  const columnSettingBlock = blockList.find((b) => b?.type === 'column-setting');
-  const column = columnSettingBlock?.columns ?? -1;
   for (const block of blockList) {
-    if (
-      typeof column === 'number' &&
-      column > 0 &&
-      block.type !== 'column-setting' &&
-      typeof block.widthInColumns === 'number' &&
-      block.widthInColumns > column
-    ) {
-      log.warn(
-        `Block ${block.id} width ${block.widthInColumns} exceeds configured column width ${column}`
-      );
-    }
     if (block.label) {
       block.label = sanitizeText(block.label);
     }

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

@@ -270,12 +270,7 @@ function layoutBlocks(block: Block, db: BlockDB) {
       if (child.children) {
         layoutBlocks(child, db);
       }
-      let columnsFilled = child?.widthInColumns ?? 1;
-      if (columns > 0) {
-        // Make sure overflowing lines do not affect later lines
-        columnsFilled = Math.min(columnsFilled, columns - (columnPos % columns));
-      }
-      columnPos += columnsFilled;
+      columnPos += child?.widthInColumns ?? 1;
       log.debug('abc88 columnsPos', child, columnPos);
     }
   }

packages/mermaid/src/diagrams/block/parser/block.spec.ts

@@ -1,7 +1,6 @@
 // @ts-ignore: jison doesn't export types
 import block from './block.jison';
 import db from '../blockDB.js';
-import { log } from '../../../logger.js';
 
 describe('Block diagram', function () {
   describe('when parsing a block diagram graph it should handle > ', function () {
@@ -403,25 +402,6 @@ columns 1
       const B = blocks[0];
       expect(B.styles).toContain('fill:#f9F');
     });
-    it('should log a warning when block width exceeds column width', () => {
-      const str = `block-beta
-  columns 1
-  A:1
-  B:2
-  C:3
-  D:4
-  E:3
-  F:2
-  G:1`;
-
-      const logWarnSpy = vi.spyOn(log, 'warn').mockImplementation(() => undefined);
-
-      block.parse(str);
-
-      expect(logWarnSpy).toHaveBeenCalledWith('Block B width 2 exceeds configured column width 1');
-
-      logWarnSpy.mockRestore();
-    });
   });
 
   describe('prototype properties', function () {

packages/mermaid/src/diagrams/class/parser/class.spec.js

@@ -15,12 +15,4 @@ describe('class diagram', function () {
       expect(() => parser.parse(`classDiagram\nnamespace ${prop} {\n\tclass A\n}`)).not.toThrow();
     });
   });
-
-  describe('backtick escaping', function () {
-    it('should handle backtick-quoted namespace names', function () {
-      expect(() =>
-        parser.parse(`classDiagram\nnamespace \`A::B\` {\n\tclass \`IPC::Sender\`\n}`)
-      ).not.toThrow();
-    });
-  });
 });

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

@@ -242,7 +242,6 @@ classLabel
 
 namespaceName
     : alphaNumToken { $$=$1; }
-    | classLiteralName { $$=$1; }
     | alphaNumToken DOT namespaceName { $$=$1+'.'+$3; }
     | alphaNumToken namespaceName { $$=$1+$2; }
     ;

packages/mermaid/src/diagrams/flowchart/elk/detector.ts

@@ -11,7 +11,7 @@ const detector: DiagramDetector = (txt, config = {}): boolean => {
     // If diagram explicitly states flowchart-elk
     /^\s*flowchart-elk/.test(txt) ||
     // If a flowchart/graph diagram has their default renderer set to elk
-    (/^\s*(flowchart|graph)/.test(txt) && config?.flowchart?.defaultRenderer === 'elk')
+    (/^\s*flowchart|graph/.test(txt) && config?.flowchart?.defaultRenderer === 'elk')
   ) {
     config.layout = 'elk';
     return true;

packages/mermaid/src/diagrams/flowchart/flowDb.spec.ts

@@ -125,60 +125,4 @@ describe('flow db getData', () => {
     const { edges } = flowDb.getData();
     expect(edges[0].curve).toBe('basis');
   });
-
-  it('should support modifying interpolate using edge id syntax', () => {
-    flowDb.addVertex('A', { text: 'A', type: 'text' }, undefined, [], [], '', {}, undefined);
-    flowDb.addVertex('B', { text: 'B', type: 'text' }, undefined, [], [], '', {}, undefined);
-    flowDb.addVertex('C', { text: 'C', type: 'text' }, undefined, [], [], '', {}, undefined);
-    flowDb.addVertex('D', { text: 'D', type: 'text' }, undefined, [], [], '', {}, undefined);
-    flowDb.addLink(['A'], ['B'], {});
-    flowDb.addLink(['A'], ['C'], { id: 'e2' });
-    flowDb.addLink(['B'], ['D'], { id: 'e3' });
-    flowDb.addLink(['C'], ['D'], {});
-    flowDb.updateLinkInterpolate(['default'], 'stepBefore');
-    flowDb.updateLinkInterpolate([0], 'basis');
-    flowDb.addVertex(
-      'e2',
-      { text: 'Shouldnt be used', type: 'text' },
-      undefined,
-      [],
-      [],
-      '',
-      {},
-      ' curve: monotoneX '
-    );
-    flowDb.addVertex(
-      'e3',
-      { text: 'Shouldnt be used', type: 'text' },
-      undefined,
-      [],
-      [],
-      '',
-      {},
-      ' curve: catmullRom '
-    );
-
-    const { edges } = flowDb.getData();
-    expect(edges[0].curve).toBe('basis');
-    expect(edges[1].curve).toBe('monotoneX');
-    expect(edges[2].curve).toBe('catmullRom');
-    expect(edges[3].curve).toBe('stepBefore');
-  });
-});
-
-describe('flow db direction', () => {
-  let flowDb: FlowDB;
-  beforeEach(() => {
-    flowDb = new FlowDB();
-  });
-
-  it('should set direction to TB when TD is set', () => {
-    flowDb.setDirection('TD');
-    expect(flowDb.getDirection()).toBe('TB');
-  });
-
-  it('should correctly set direction irrespective of leading spaces', () => {
-    flowDb.setDirection(' TD');
-    expect(flowDb.getDirection()).toBe('TB');
-  });
 });

packages/mermaid/src/diagrams/flowchart/flowDb.ts

@@ -139,9 +139,6 @@ export class FlowDB implements DiagramDB {
       if (edgeDoc?.animation !== undefined) {
         edge.animation = edgeDoc.animation;
       }
-      if (edgeDoc?.curve !== undefined) {
-        edge.interpolate = edgeDoc.curve;
-      }
       return;
     }
 
@@ -406,8 +403,7 @@ You have to call mermaid.initialize.`
    *
    */
   public setDirection(dir: string) {
-    this.direction = dir.trim();
-
+    this.direction = dir;
     if (/.*</.exec(this.direction)) {
       this.direction = 'RL';
     }

packages/mermaid/src/diagrams/flowchart/parser/flow-lines.spec.js

@@ -37,59 +37,6 @@ describe('[Lines] when parsing', () => {
     expect(edges[1].interpolate).toBe('cardinal');
   });
 
-  it('should handle edge curve properties using edge ID', function () {
-    const res = flow.parser.parse(
-      'graph TD\n' +
-        'A e1@-->B\n' +
-        'A uniqueName@-->C\n' +
-        'e1@{curve: basis}\n' +
-        'uniqueName@{curve: cardinal}'
-    );
-
-    const vert = flow.parser.yy.getVertices();
-    const edges = flow.parser.yy.getEdges();
-
-    expect(edges[0].interpolate).toBe('basis');
-    expect(edges[1].interpolate).toBe('cardinal');
-  });
-
-  it('should handle edge curve properties using edge ID but without overriding default', function () {
-    const res = flow.parser.parse(
-      'graph TD\n' +
-        'A e1@-->B\n' +
-        'A-->C\n' +
-        'linkStyle default interpolate linear\n' +
-        'e1@{curve: stepAfter}'
-    );
-
-    const vert = flow.parser.yy.getVertices();
-    const edges = flow.parser.yy.getEdges();
-
-    expect(edges[0].interpolate).toBe('stepAfter');
-    expect(edges.defaultInterpolate).toBe('linear');
-  });
-
-  it('should handle edge curve properties using edge ID mixed with line interpolation', function () {
-    const res = flow.parser.parse(
-      'graph TD\n' +
-        'A e1@-->B-->D\n' +
-        'A-->C e4@-->D-->E\n' +
-        'linkStyle default interpolate linear\n' +
-        'linkStyle 1 interpolate basis\n' +
-        'e1@{curve: monotoneX}\n' +
-        'e4@{curve: stepBefore}'
-    );
-
-    const vert = flow.parser.yy.getVertices();
-    const edges = flow.parser.yy.getEdges();
-
-    expect(edges[0].interpolate).toBe('monotoneX');
-    expect(edges[1].interpolate).toBe('basis');
-    expect(edges.defaultInterpolate).toBe('linear');
-    expect(edges[3].interpolate).toBe('stepBefore');
-    expect(edges.defaultInterpolate).toBe('linear');
-  });
-
   it('should handle line interpolation multi-numbered definitions', function () {
     const res = flow.parser.parse(
       'graph TD\n' + 'A-->B\n' + 'A-->C\n' + 'linkStyle 0,1 interpolate basis'

packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts

@@ -1,14 +1,12 @@
 // @ts-ignore: JISON doesn't support types
 import parser from './parser/mindmap.jison';
-import { MindmapDB } from './mindmapDb.js';
+import db from './mindmapDb.js';
 import renderer from './mindmapRenderer.js';
 import styles from './styles.js';
 import type { DiagramDefinition } from '../../diagram-api/types.js';
 
 export const diagram: DiagramDefinition = {
-  get db() {
-    return new MindmapDB();
-  },
+  db,
   renderer,
   parser,
   styles,

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

@@ -1,12 +1,12 @@
 // @ts-expect-error No types available for JISON
 import { parser as mindmap } from './parser/mindmap.jison';
-import { MindmapDB } from './mindmapDb.js';
+import mindmapDB from './mindmapDb.js';
 // Todo fix utils functions for tests
 import { setLogLevel } from '../../diagram-api/diagramAPI.js';
 
 describe('when parsing a mindmap ', function () {
   beforeEach(function () {
-    mindmap.yy = new MindmapDB();
+    mindmap.yy = mindmapDB;
     mindmap.yy.clear();
     setLogLevel('trace');
   });

packages/mermaid/src/diagrams/mindmap/mindmapDb.ts

@@ -5,6 +5,70 @@ import { log } from '../../logger.js';
 import type { MindmapNode } from './mindmapTypes.js';
 import defaultConfig from '../../defaultConfig.js';
 
+let nodes: MindmapNode[] = [];
+let cnt = 0;
+let elements: Record<number, D3Element> = {};
+
+const clear = () => {
+  nodes = [];
+  cnt = 0;
+  elements = {};
+};
+
+const getParent = function (level: number) {
+  for (let i = nodes.length - 1; i >= 0; i--) {
+    if (nodes[i].level < level) {
+      return nodes[i];
+    }
+  }
+  // No parent found
+  return null;
+};
+
+const getMindmap = () => {
+  return nodes.length > 0 ? nodes[0] : null;
+};
+
+const addNode = (level: number, id: string, descr: string, type: number) => {
+  log.info('addNode', level, id, descr, type);
+  const conf = getConfig();
+  let padding: number = conf.mindmap?.padding ?? defaultConfig.mindmap.padding;
+  switch (type) {
+    case nodeType.ROUNDED_RECT:
+    case nodeType.RECT:
+    case nodeType.HEXAGON:
+      padding *= 2;
+  }
+
+  const node = {
+    id: cnt++,
+    nodeId: sanitizeText(id, conf),
+    level,
+    descr: sanitizeText(descr, conf),
+    type,
+    children: [],
+    width: conf.mindmap?.maxNodeWidth ?? defaultConfig.mindmap.maxNodeWidth,
+    padding,
+  } satisfies MindmapNode;
+
+  const parent = getParent(level);
+  if (parent) {
+    parent.children.push(node);
+    // Keep all nodes in the list
+    nodes.push(node);
+  } else {
+    if (nodes.length === 0) {
+      // First node, the root
+      nodes.push(node);
+    } else {
+      // Syntax error ... there can only bee one root
+      throw new Error(
+        'There can be only one root. No parent could be found for ("' + node.descr + '")'
+      );
+    }
+  }
+};
+
 const nodeType = {
   DEFAULT: 0,
   NO_BORDER: 0,
@@ -14,149 +78,82 @@ const nodeType = {
   CLOUD: 4,
   BANG: 5,
   HEXAGON: 6,
+};
+
+const getType = (startStr: string, endStr: string): number => {
+  log.debug('In get type', startStr, endStr);
+  switch (startStr) {
+    case '[':
+      return nodeType.RECT;
+    case '(':
+      return endStr === ')' ? nodeType.ROUNDED_RECT : nodeType.CLOUD;
+    case '((':
+      return nodeType.CIRCLE;
+    case ')':
+      return nodeType.CLOUD;
+    case '))':
+      return nodeType.BANG;
+    case '{{':
+      return nodeType.HEXAGON;
+    default:
+      return nodeType.DEFAULT;
+  }
+};
+
+const setElementForId = (id: number, element: D3Element) => {
+  elements[id] = element;
+};
+
+const decorateNode = (decoration?: { class?: string; icon?: string }) => {
+  if (!decoration) {
+    return;
+  }
+  const config = getConfig();
+  const node = nodes[nodes.length - 1];
+  if (decoration.icon) {
+    node.icon = sanitizeText(decoration.icon, config);
+  }
+  if (decoration.class) {
+    node.class = sanitizeText(decoration.class, config);
+  }
+};
+
+const type2Str = (type: number) => {
+  switch (type) {
+    case nodeType.DEFAULT:
+      return 'no-border';
+    case nodeType.RECT:
+      return 'rect';
+    case nodeType.ROUNDED_RECT:
+      return 'rounded-rect';
+    case nodeType.CIRCLE:
+      return 'circle';
+    case nodeType.CLOUD:
+      return 'cloud';
+    case nodeType.BANG:
+      return 'bang';
+    case nodeType.HEXAGON:
+      return 'hexgon'; // cspell: disable-line
+    default:
+      return 'no-border';
+  }
+};
+
+// Expose logger to grammar
+const getLogger = () => log;
+const getElementById = (id: number) => elements[id];
+
+const db = {
+  clear,
+  addNode,
+  getMindmap,
+  nodeType,
+  getType,
+  setElementForId,
+  decorateNode,
+  type2Str,
+  getLogger,
+  getElementById,
 } as const;
 
-export class MindmapDB {
-  private nodes: MindmapNode[] = [];
-  private count = 0;
-  private elements: Record<number, D3Element> = {};
-  public readonly nodeType: typeof nodeType;
-
-  constructor() {
-    this.getLogger = this.getLogger.bind(this);
-    this.nodeType = nodeType;
-    this.clear();
-    this.getType = this.getType.bind(this);
-    this.getMindmap = this.getMindmap.bind(this);
-    this.getElementById = this.getElementById.bind(this);
-    this.getParent = this.getParent.bind(this);
-    this.getMindmap = this.getMindmap.bind(this);
-    this.addNode = this.addNode.bind(this);
-    this.decorateNode = this.decorateNode.bind(this);
-  }
-  public clear() {
-    this.nodes = [];
-    this.count = 0;
-    this.elements = {};
-  }
-
-  public getParent(level: number): MindmapNode | null {
-    for (let i = this.nodes.length - 1; i >= 0; i--) {
-      if (this.nodes[i].level < level) {
-        return this.nodes[i];
-      }
-    }
-    return null;
-  }
-
-  public getMindmap(): MindmapNode | null {
-    return this.nodes.length > 0 ? this.nodes[0] : null;
-  }
-
-  public addNode(level: number, id: string, descr: string, type: number): void {
-    log.info('addNode', level, id, descr, type);
-
-    const conf = getConfig();
-    let padding = conf.mindmap?.padding ?? defaultConfig.mindmap.padding;
-
-    switch (type) {
-      case this.nodeType.ROUNDED_RECT:
-      case this.nodeType.RECT:
-      case this.nodeType.HEXAGON:
-        padding *= 2;
-        break;
-    }
-
-    const node: MindmapNode = {
-      id: this.count++,
-      nodeId: sanitizeText(id, conf),
-      level,
-      descr: sanitizeText(descr, conf),
-      type,
-      children: [],
-      width: conf.mindmap?.maxNodeWidth ?? defaultConfig.mindmap.maxNodeWidth,
-      padding,
-    };
-
-    const parent = this.getParent(level);
-    if (parent) {
-      parent.children.push(node);
-      this.nodes.push(node);
-    } else {
-      if (this.nodes.length === 0) {
-        this.nodes.push(node);
-      } else {
-        throw new Error(
-          `There can be only one root. No parent could be found for ("${node.descr}")`
-        );
-      }
-    }
-  }
-
-  public getType(startStr: string, endStr: string) {
-    log.debug('In get type', startStr, endStr);
-    switch (startStr) {
-      case '[':
-        return this.nodeType.RECT;
-      case '(':
-        return endStr === ')' ? this.nodeType.ROUNDED_RECT : this.nodeType.CLOUD;
-      case '((':
-        return this.nodeType.CIRCLE;
-      case ')':
-        return this.nodeType.CLOUD;
-      case '))':
-        return this.nodeType.BANG;
-      case '{{':
-        return this.nodeType.HEXAGON;
-      default:
-        return this.nodeType.DEFAULT;
-    }
-  }
-
-  public setElementForId(id: number, element: D3Element): void {
-    this.elements[id] = element;
-  }
-  public getElementById(id: number) {
-    return this.elements[id];
-  }
-
-  public decorateNode(decoration?: { class?: string; icon?: string }): void {
-    if (!decoration) {
-      return;
-    }
-
-    const config = getConfig();
-    const node = this.nodes[this.nodes.length - 1];
-    if (decoration.icon) {
-      node.icon = sanitizeText(decoration.icon, config);
-    }
-    if (decoration.class) {
-      node.class = sanitizeText(decoration.class, config);
-    }
-  }
-
-  type2Str(type: number): string {
-    switch (type) {
-      case this.nodeType.DEFAULT:
-        return 'no-border';
-      case this.nodeType.RECT:
-        return 'rect';
-      case this.nodeType.ROUNDED_RECT:
-        return 'rounded-rect';
-      case this.nodeType.CIRCLE:
-        return 'circle';
-      case this.nodeType.CLOUD:
-        return 'cloud';
-      case this.nodeType.BANG:
-        return 'bang';
-      case this.nodeType.HEXAGON:
-        return 'hexgon'; // cspell: disable-line
-      default:
-        return 'no-border';
-    }
-  }
-
-  public getLogger() {
-    return log;
-  }
-}
+export default db;

packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts

@@ -9,10 +9,10 @@ import { log } from '../../logger.js';
 import type { D3Element } from '../../types.js';
 import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
 import { setupGraphViewbox } from '../../setupGraphViewbox.js';
-import type { FilledMindMapNode, MindmapNode } from './mindmapTypes.js';
+import type { FilledMindMapNode, MindmapDB, MindmapNode } from './mindmapTypes.js';
 import { drawNode, positionNode } from './svgDraw.js';
 import defaultConfig from '../../defaultConfig.js';
-import type { MindmapDB } from './mindmapDb.js';
+
 // Inject the layout algorithm into cytoscape
 cytoscape.use(coseBilkent);
 

packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts

@@ -1,4 +1,5 @@
 import type { RequiredDeep } from 'type-fest';
+import type mindmapDb from './mindmapDb.js';
 
 export interface MindmapNode {
   id: number;
@@ -18,3 +19,4 @@ export interface MindmapNode {
 }
 
 export type FilledMindMapNode = RequiredDeep<MindmapNode>;
+export type MindmapDB = typeof mindmapDb;

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

@@ -1,9 +1,8 @@
 import { createText } from '../../rendering-util/createText.js';
-import type { FilledMindMapNode } from './mindmapTypes.js';
+import type { FilledMindMapNode, MindmapDB } from './mindmapTypes.js';
 import type { Point, D3Element } from '../../types.js';
 import { parseFontSize } from '../../utils.js';
 import type { MermaidConfig } from '../../config.type.js';
-import type { MindmapDB } from './mindmapDb.js';
 
 const MAX_SECTIONS = 12;
 

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

@@ -1,7 +1,6 @@
 import { getConfig as commonGetConfig } from '../../config.js';
 import type { PacketDiagramConfig } from '../../config.type.js';
 import DEFAULT_CONFIG from '../../defaultConfig.js';
-import type { DiagramDB } from '../../diagram-api/types.js';
 import { cleanAndMerge } from '../../utils.js';
 import {
   clear as commonClear,
@@ -12,42 +11,49 @@ import {
   setAccTitle,
   setDiagramTitle,
 } from '../common/commonDb.js';
-import type { PacketWord } from './types.js';
+import type { PacketDB, PacketData, PacketWord } from './types.js';
+
+const defaultPacketData: PacketData = {
+  packet: [],
+};
+
+let data: PacketData = structuredClone(defaultPacketData);
+
 const DEFAULT_PACKET_CONFIG: Required<PacketDiagramConfig> = DEFAULT_CONFIG.packet;
 
-export class PacketDB implements DiagramDB {
-  private packet: PacketWord[] = [];
-
-  public getConfig() {
-    const config = cleanAndMerge({
-      ...DEFAULT_PACKET_CONFIG,
-      ...commonGetConfig().packet,
-    });
-    if (config.showBits) {
-      config.paddingY += 10;
-    }
-    return config;
+const getConfig = (): Required<PacketDiagramConfig> => {
+  const config = cleanAndMerge({
+    ...DEFAULT_PACKET_CONFIG,
+    ...commonGetConfig().packet,
+  });
+  if (config.showBits) {
+    config.paddingY += 10;
   }
+  return config;
+};
 
-  public getPacket() {
-    return this.packet;
+const getPacket = (): PacketWord[] => data.packet;
+
+const pushWord = (word: PacketWord) => {
+  if (word.length > 0) {
+    data.packet.push(word);
   }
+};
 
-  public pushWord(word: PacketWord) {
-    if (word.length > 0) {
-      this.packet.push(word);
-    }
-  }
+const clear = () => {
+  commonClear();
+  data = structuredClone(defaultPacketData);
+};
 
-  public clear() {
-    commonClear();
-    this.packet = [];
-  }
-
-  public setAccTitle = setAccTitle;
-  public getAccTitle = getAccTitle;
-  public setDiagramTitle = setDiagramTitle;
-  public getDiagramTitle = getDiagramTitle;
-  public getAccDescription = getAccDescription;
-  public setAccDescription = setAccDescription;
-}
+export const db: PacketDB = {
+  pushWord,
+  getPacket,
+  getConfig,
+  clear,
+  setAccTitle,
+  getAccTitle,
+  setDiagramTitle,
+  getDiagramTitle,
+  getAccDescription,
+  setAccDescription,
+};

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

@@ -1,14 +1,12 @@
 import type { DiagramDefinition } from '../../diagram-api/types.js';
-import { PacketDB } from './db.js';
+import { db } from './db.js';
 import { parser } from './parser.js';
 import { renderer } from './renderer.js';
 import { styles } from './styles.js';
 
 export const diagram: DiagramDefinition = {
   parser,
-  get db() {
-    return new PacketDB();
-  },
+  db,
   renderer,
   styles,
 };

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

@@ -1,26 +1,24 @@
 import { it, describe, expect } from 'vitest';
-import { PacketDB } from './db.js';
+import { db } from './db.js';
 import { parser } from './parser.js';
 
+const { clear, getPacket, getDiagramTitle, getAccTitle, getAccDescription } = db;
+
 describe('packet diagrams', () => {
-  let db: PacketDB;
   beforeEach(() => {
-    db = new PacketDB();
-    if (parser.parser) {
-      parser.parser.yy = db;
-    }
+    clear();
   });
 
   it('should handle a packet-beta definition', async () => {
     const str = `packet-beta`;
     await expect(parser.parse(str)).resolves.not.toThrow();
-    expect(db.getPacket()).toMatchInlineSnapshot('[]');
+    expect(getPacket()).toMatchInlineSnapshot('[]');
   });
 
   it('should handle a packet definition', async () => {
     const str = `packet`;
     await expect(parser.parse(str)).resolves.not.toThrow();
-    expect(db.getPacket()).toMatchInlineSnapshot('[]');
+    expect(getPacket()).toMatchInlineSnapshot('[]');
   });
 
   it('should handle diagram with data and title', async () => {
@@ -31,10 +29,10 @@ describe('packet diagrams', () => {
     0-10: "test"
     `;
     await expect(parser.parse(str)).resolves.not.toThrow();
-    expect(db.getDiagramTitle()).toMatchInlineSnapshot('"Packet diagram"');
-    expect(db.getAccTitle()).toMatchInlineSnapshot('"Packet accTitle"');
-    expect(db.getAccDescription()).toMatchInlineSnapshot('"Packet accDescription"');
-    expect(db.getPacket()).toMatchInlineSnapshot(`
+    expect(getDiagramTitle()).toMatchInlineSnapshot('"Packet diagram"');
+    expect(getAccTitle()).toMatchInlineSnapshot('"Packet accTitle"');
+    expect(getAccDescription()).toMatchInlineSnapshot('"Packet accDescription"');
+    expect(getPacket()).toMatchInlineSnapshot(`
       [
         [
           {
@@ -54,7 +52,7 @@ describe('packet diagrams', () => {
     11: "single"
     `;
     await expect(parser.parse(str)).resolves.not.toThrow();
-    expect(db.getPacket()).toMatchInlineSnapshot(`
+    expect(getPacket()).toMatchInlineSnapshot(`
       [
         [
           {
@@ -80,7 +78,7 @@ describe('packet diagrams', () => {
     +16: "word"
     `;
     await expect(parser.parse(str)).resolves.not.toThrow();
-    expect(db.getPacket()).toMatchInlineSnapshot(`
+    expect(getPacket()).toMatchInlineSnapshot(`
       [
         [
           {
@@ -106,7 +104,7 @@ describe('packet diagrams', () => {
     +16: "word"
     `;
     await expect(parser.parse(str)).resolves.not.toThrow();
-    expect(db.getPacket()).toMatchInlineSnapshot(`
+    expect(getPacket()).toMatchInlineSnapshot(`
       [
         [
           {
@@ -132,7 +130,7 @@ describe('packet diagrams', () => {
     11-90: "multiple"
     `;
     await expect(parser.parse(str)).resolves.not.toThrow();
-    expect(db.getPacket()).toMatchInlineSnapshot(`
+    expect(getPacket()).toMatchInlineSnapshot(`
       [
         [
           {
@@ -174,7 +172,7 @@ describe('packet diagrams', () => {
     17-63: "multiple"
     `;
     await expect(parser.parse(str)).resolves.not.toThrow();
-    expect(db.getPacket()).toMatchInlineSnapshot(`
+    expect(getPacket()).toMatchInlineSnapshot(`
       [
         [
           {

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

@@ -3,12 +3,12 @@ import { parse } from '@mermaid-js/parser';
 import type { ParserDefinition } from '../../diagram-api/types.js';
 import { log } from '../../logger.js';
 import { populateCommonDb } from '../common/populateCommonDb.js';
-import { PacketDB } from './db.js';
+import { db } from './db.js';
 import type { PacketBlock, PacketWord } from './types.js';
 
 const maxPacketSize = 10_000;
 
-const populate = (ast: Packet, db: PacketDB) => {
+const populate = (ast: Packet) => {
   populateCommonDb(ast, db);
   let lastBit = -1;
   let word: PacketWord = [];
@@ -91,17 +91,9 @@ const getNextFittingBlock = (
 };
 
 export const parser: ParserDefinition = {
-  // @ts-expect-error - PacketDB is not assignable to DiagramDB
-  parser: { yy: undefined },
   parse: async (input: string): Promise<void> => {
     const ast: Packet = await parse('packet', input);
-    const db = parser.parser?.yy;
-    if (!(db instanceof PacketDB)) {
-      throw new Error(
-        'parser.parser?.yy was not a PacketDB. This is due to a bug within Mermaid, please report this issue at https://github.com/mermaid-js/mermaid/issues.'
-      );
-    }
     log.debug(ast);
-    populate(ast, db);
+    populate(ast);
   },
 };

packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison

@@ -12,7 +12,6 @@
 
 %options case-insensitive
 
-
 // Special states for recognizing aliases
 // A special state for grabbing text up to the first comment/newline
 %x ID ALIAS LINE
@@ -32,12 +31,6 @@
 "box"															{ this.begin('LINE'); return 'box'; }
 "participant"                                                   { this.begin('ID'); return 'participant'; }
 "actor"                                                   		{ this.begin('ID'); return 'participant_actor'; }
-"boundary"                                                      { return yy.matchAsActorOrParticipant('boundary', 'participant_boundary', this._input, this); }
-"control"                                                       { return yy.matchAsActorOrParticipant('control', 'participant_control', this._input, this); }
-"entity"                                                        { return yy.matchAsActorOrParticipant('entity', 'participant_entity', this._input, this); }
-"database"                                                      { return yy.matchAsActorOrParticipant('database', 'participant_database', this._input, this); }
-"collections"                                                   { return yy.matchAsActorOrParticipant('collections', 'participant_collections', this._input, this); }
-"queue"                                                         { return yy.matchAsActorOrParticipant('queue', 'participant_queue', this._input, this); }
 "create"                                                        return 'create';
 "destroy"                                                       { this.begin('ID'); return 'destroy'; }
 <ID>[^\<->\->:\n,;]+?([\-]*[^\<->\->:\n,;]+?)*?(?=((?!\n)\s)+"as"(?!\n)\s|[#\n;]|$)     { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; }
@@ -238,25 +231,6 @@ participant_statement
 	| 'participant_actor' actor 'AS' restOfLine 'NEWLINE' {$2.draw='actor'; $2.type='addParticipant';$2.description=yy.parseMessage($4); $$=$2;}
 	| 'participant_actor' actor 'NEWLINE' {$2.draw='actor'; $2.type='addParticipant'; $$=$2;}
 	| 'destroy' actor 'NEWLINE' {$2.type='destroyParticipant'; $$=$2;}
-
-	| 'participant_boundary' actor 'AS' restOfLine 'NEWLINE' {$2.draw='boundary'; $2.type='addParticipant';$2.description=yy.parseMessage($4); $$=$2;}
-	| 'participant_boundary' actor 'NEWLINE' {$2.draw='boundary'; $2.type='addParticipant'; $$=$2;}
-
-	| 'participant_control' actor 'AS' restOfLine 'NEWLINE' {$2.draw='control'; $2.type='addParticipant';$2.description=yy.parseMessage($4); $$=$2;}
-	| 'participant_control' actor 'NEWLINE' {$2.draw='control'; $2.type='addParticipant'; $$=$2;}
-
-	| 'participant_entity' actor 'AS' restOfLine 'NEWLINE' {$2.draw='entity'; $2.type='addParticipant';$2.description=yy.parseMessage($4); $$=$2;}
-	| 'participant_entity' actor 'NEWLINE' {$2.draw='entity'; $2.type='addParticipant'; $$=$2;}
-
-	| 'participant_database' actor 'AS' restOfLine 'NEWLINE' {$2.draw='database'; $2.type='addParticipant';$2.description=yy.parseMessage($4); $$=$2;}
-	| 'participant_database' actor 'NEWLINE' {$2.draw='database'; $2.type='addParticipant'; $$=$2;}
-
-	| 'participant_collections' actor 'AS' restOfLine 'NEWLINE' {$2.draw='collections'; $2.type='addParticipant';$2.description=yy.parseMessage($4); $$=$2;}
-	| 'participant_collections' actor 'NEWLINE' {$2.draw='collections'; $2.type='addParticipant'; $$=$2;}
-
-	| 'participant_queue' actor 'AS' restOfLine 'NEWLINE' {$2.draw='queue'; $2.type='addParticipant';$2.description=yy.parseMessage($4); $$=$2;}
-	| 'participant_queue' actor 'NEWLINE' {$2.draw='queue'; $2.type='addParticipant'; $$=$2;}
-
 	;
 
 note_statement

packages/mermaid/src/diagrams/sequence/sequenceDb.ts

@@ -75,17 +75,6 @@ const PLACEMENT = {
   OVER: 2,
 } as const;
 
-export const PARTICIPANT_TYPE = {
-  ACTOR: 'actor',
-  BOUNDARY: 'boundary',
-  COLLECTIONS: 'collections',
-  CONTROL: 'control',
-  DATABASE: 'database',
-  ENTITY: 'entity',
-  PARTICIPANT: 'participant',
-  QUEUE: 'queue',
-} as const;
-
 export class SequenceDB implements DiagramDB {
   private readonly state = new ImperativeState<SequenceState>(() => ({
     prevActor: undefined,
@@ -107,7 +96,6 @@ export class SequenceDB implements DiagramDB {
     this.apply = this.apply.bind(this);
     this.parseBoxData = this.parseBoxData.bind(this);
     this.parseMessage = this.parseMessage.bind(this);
-    this.matchAsActorOrParticipant = this.matchAsActorOrParticipant.bind(this);
 
     this.clear();
 
@@ -342,22 +330,6 @@ export class SequenceDB implements DiagramDB {
     return message;
   }
 
-  public matchAsActorOrParticipant(
-    tokenName: string,
-    tokenType: string,
-    inputRemainder: string,
-    lexer: any
-  ): string {
-    const arrowLike = /^\s*(->>|-->>|->|-->|<<->>|<<-->>|-x|--x|-\))/;
-    const colonLike = /^\s*:/;
-
-    if (arrowLike.test(inputRemainder) || colonLike.test(inputRemainder)) {
-      return 'ACTOR';
-    }
-    lexer.begin('ID'); // used  the passed lexer
-    return tokenType;
-  }
-
   // We expect the box statement to be color first then description
   // The color can be rgb,rgba,hsl,hsla, or css code names  #hex codes are not supported for now because of the way the char # is handled
   // We extract first segment as color, the rest of the line is considered as text

packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js

@@ -2038,189 +2038,4 @@ Bob->>Alice:Got it!
     expect(messages[0].from).toBe('Alice');
     expect(messages[0].to).toBe('Bob');
   });
-  describe('when newly parsing messages ', () => {
-    it('should parse a message', async () => {
-      const actor1 = 'database';
-      const diagram = await Diagram.fromText(`
-    sequenceDiagram
-        database Alice
-        database Bob
-        Bob->>+Alice: Hi Alice
-        Alice->>+Bob: Hi Bob
-      `);
-
-      const messages = diagram.db.getMessages();
-    });
-
-    it('should parse a message', async () => {
-      const actor1 = 'database';
-      const diagram = await Diagram.fromText(`
-    sequenceDiagram
-        participant lead
-        queue dsa
-        API->>+Database: getUserb
-        Database-->>-API: userb
-        queue --> Database: hello
-    `);
-
-      const messages = diagram.db.getMessages();
-    });
-  });
-  describe('participant type parsing', () => {
-    it('should parse boundary participant', async () => {
-      const diagram = await Diagram.fromText(`
-          sequenceDiagram
-          boundary B as Boundary Box
-          B->B: test
-      `);
-      const actors = diagram.db.getActors();
-      expect(actors.get('B').type).toBe('boundary');
-      expect(actors.get('B').description).toBe('Boundary Box');
-    });
-
-    it('should parse control participant', async () => {
-      const diagram = await Diagram.fromText(`
-        sequenceDiagram
-        control C as Controller
-        C->C: test
-        `);
-      const actors = diagram.db.getActors();
-      expect(actors.get('C').type).toBe('control');
-      expect(actors.get('C').description).toBe('Controller');
-    });
-
-    it('should parse entity participant', async () => {
-      const diagram = await Diagram.fromText(`
-      sequenceDiagram
-      entity E as Entity
-      E->E: test
-      `);
-      const actors = diagram.db.getActors();
-      expect(actors.get('E').type).toBe('entity');
-      expect(actors.get('E').description).toBe('Entity');
-    });
-
-    it('should parse database participant', async () => {
-      const diagram = await Diagram.fromText(`
-      sequenceDiagram
-      database D as Database
-      D->D: test
-      `);
-      const actors = diagram.db.getActors();
-      expect(actors.get('D').type).toBe('database');
-      expect(actors.get('D').description).toBe('Database');
-    });
-
-    it('should parse collections participant', async () => {
-      const diagram = await Diagram.fromText(`
-      sequenceDiagram
-      collections L as List
-      L->L: test
-      `);
-      const actors = diagram.db.getActors();
-      expect(actors.get('L').type).toBe('collections');
-      expect(actors.get('L').description).toBe('List');
-    });
-
-    it('should parse queue participant', async () => {
-      const diagram = await Diagram.fromText(`
-      sequenceDiagram
-      queue Q as Jobs
-      Q->Q: test 
-      `);
-      const actors = diagram.db.getActors();
-      expect(actors.get('Q').type).toBe('queue');
-      expect(actors.get('Q').description).toBe('Jobs');
-    });
-  });
-
-  describe('participant type parsing', () => {
-    it('should parse actor participant', async () => {
-      const diagram = await Diagram.fromText(`
-      sequenceDiagram
-      queue A as ActorName
-      A->A: test
-      `);
-      const actors = diagram.db.getActors();
-      expect(actors.get('A').type).toBe('queue');
-      expect(actors.get('A').description).toBe('ActorName');
-    });
-
-    it('should parse participant participant', async () => {
-      const diagram = await Diagram.fromText(`
-      sequenceDiagram
-      database P as PartName
-      P->P: test
-      `);
-      const actors = diagram.db.getActors();
-      expect(actors.get('P').type).toBe('database');
-      expect(actors.get('P').description).toBe('PartName');
-    });
-
-    it('should parse boundary using actor keyword', async () => {
-      const diagram = await Diagram.fromText(`
-      sequenceDiagram
-      collections B as Boundary
-      B->B: test
-      `);
-      const actors = diagram.db.getActors();
-      expect(actors.get('B').type).toBe('collections');
-      expect(actors.get('B').description).toBe('Boundary');
-    });
-
-    it('should parse control using participant keyword', async () => {
-      const diagram = await Diagram.fromText(`
-      sequenceDiagram
-      control C as Controller
-      C->C: test
-      `);
-      const actors = diagram.db.getActors();
-      expect(actors.get('C').type).toBe('control');
-      expect(actors.get('C').description).toBe('Controller');
-    });
-
-    it('should parse entity using actor keyword', async () => {
-      const diagram = await Diagram.fromText(`
-      sequenceDiagram
-      entity E as Entity
-      E->E: test
-      `);
-      const actors = diagram.db.getActors();
-      expect(actors.get('E').type).toBe('entity');
-      expect(actors.get('E').description).toBe('Entity');
-    });
-
-    it('should parse database using participant keyword', async () => {
-      const diagram = await Diagram.fromText(`
-      sequenceDiagram
-      participant D as Database
-      D->D: test
-      `);
-      const actors = diagram.db.getActors();
-      expect(actors.get('D').type).toBe('participant');
-      expect(actors.get('D').description).toBe('Database');
-    });
-
-    it('should parse collections using actor keyword', async () => {
-      const diagram = await Diagram.fromText(`
-      sequenceDiagram
-      actor L as List
-      L->L: test
-      `);
-      const actors = diagram.db.getActors();
-      expect(actors.get('L').type).toBe('actor');
-      expect(actors.get('L').description).toBe('List');
-    });
-
-    it('should parse queue using participant keyword', async () => {
-      const diagram = await Diagram.fromText(`
-      sequenceDiagram
-      participant Q as Jobs
-      Q->Q: test
-      `);
-      const actors = diagram.db.getActors();
-      expect(actors.get('Q').type).toBe('participant');
-      expect(actors.get('Q').description).toBe('Jobs');
-    });
-  });
 });

packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts

@@ -10,7 +10,6 @@ import assignWithDepth from '../../assignWithDepth.js';
 import utils from '../../utils.js';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
 import type { Diagram } from '../../Diagram.js';
-import { PARTICIPANT_TYPE } from './sequenceDb.js';
 
 let conf = {};
 
@@ -725,19 +724,11 @@ function adjustCreatedDestroyedData(
       msgModel.startx = msgModel.startx - adjustment;
     }
   }
-  const actorArray = [
-    PARTICIPANT_TYPE.ACTOR,
-    PARTICIPANT_TYPE.CONTROL,
-    PARTICIPANT_TYPE.ENTITY,
-    PARTICIPANT_TYPE.DATABASE,
-  ];
 
   // if it is a create message
   if (createdActors.get(msg.to) == index) {
     const actor = actors.get(msg.to);
-    const adjustment = actorArray.includes(actor.type)
-      ? ACTOR_TYPE_WIDTH / 2 + 3
-      : actor.width / 2 + 3;
+    const adjustment = actor.type == 'actor' ? ACTOR_TYPE_WIDTH / 2 + 3 : actor.width / 2 + 3;
     receiverAdjustment(actor, adjustment);
     actor.starty = lineStartY - actor.height / 2;
     bounds.bumpVerticalPos(actor.height / 2);
@@ -746,7 +737,7 @@ function adjustCreatedDestroyedData(
   else if (destroyedActors.get(msg.from) == index) {
     const actor = actors.get(msg.from);
     if (conf.mirrorActors) {
-      const adjustment = actorArray.includes(actor.type) ? ACTOR_TYPE_WIDTH / 2 : actor.width / 2;
+      const adjustment = actor.type == 'actor' ? ACTOR_TYPE_WIDTH / 2 : actor.width / 2;
       senderAdjustment(actor, adjustment);
     }
     actor.stopy = lineStartY - actor.height / 2;
@@ -756,9 +747,7 @@ function adjustCreatedDestroyedData(
   else if (destroyedActors.get(msg.to) == index) {
     const actor = actors.get(msg.to);
     if (conf.mirrorActors) {
-      const adjustment = actorArray.includes(actor.type)
-        ? ACTOR_TYPE_WIDTH / 2 + 3
-        : actor.width / 2 + 3;
+      const adjustment = actor.type == 'actor' ? ACTOR_TYPE_WIDTH / 2 + 3 : actor.width / 2 + 3;
       receiverAdjustment(actor, adjustment);
     }
     actor.stopy = lineStartY - actor.height / 2;
@@ -1076,11 +1065,10 @@ export const draw = async function (_text: string, id: string, _version: string,
   for (const box of bounds.models.boxes) {
     box.height = bounds.getVerticalPos() - box.y;
     bounds.insert(box.x, box.y, box.x + box.width, box.height);
-    const boxPadding = conf.boxMargin * 2;
-    box.startx = box.x - boxPadding;
-    box.starty = box.y - boxPadding * 0.25;
-    box.stopx = box.startx + box.width + 2 * boxPadding;
-    box.stopy = box.starty + box.height + boxPadding * 0.75;
+    box.startx = box.x;
+    box.starty = box.y;
+    box.stopx = box.startx + box.width;
+    box.stopy = box.starty + box.height;
     box.stroke = 'rgb(0,0,0, 0.5)';
     svgDraw.drawBox(diagram, box, conf);
   }
@@ -1345,9 +1333,6 @@ async function calculateActorMargins(
       return (total += actors.get(aKey).width + (actors.get(aKey).margin || 0));
     }, 0);
 
-    const standardBoxPadding = conf.boxMargin * 8;
-    totalWidth += standardBoxPadding;
-
     totalWidth -= 2 * conf.boxTextMargin;
     if (box.wrap) {
       box.name = utils.wrapLabel(box.name, totalWidth - 2 * conf.wrapPadding, textFont);

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

@@ -12,11 +12,6 @@ const getStyles = (options) =>
   .actor-line {
     stroke: ${options.actorLineColor};
   }
-  
-  .innerArc {
-    stroke-width: 1.5;
-    stroke-dasharray: none;
-  }
 
   .messageLine0 {
     stroke-width: 1.5;
@@ -120,7 +115,6 @@ const getStyles = (options) =>
     fill: ${options.actorBkg};
     stroke-width: 2px;
   }
-
 `;
 
 export default getStyles;

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

@@ -411,608 +411,6 @@ const drawActorTypeParticipant = function (elem, actor, conf, isFooter) {
   return height;
 };
 
-/**
- * Draws an actor in the diagram with the attached line
- *
- * @param {any} elem - The diagram we'll draw to.
- * @param {any} actor - The actor to draw.
- * @param {any} conf - DrawText implementation discriminator object
- * @param {boolean} isFooter - If the actor is the footer one
- */
-const drawActorTypeCollections = function (elem, actor, conf, isFooter) {
-  const actorY = isFooter ? actor.stopy : actor.starty;
-  const center = actor.x + actor.width / 2;
-  const centerY = actorY + actor.height;
-
-  const boxplusLineGroup = elem.append('g').lower();
-  var g = boxplusLineGroup;
-
-  if (!isFooter) {
-    actorCnt++;
-    if (Object.keys(actor.links || {}).length && !conf.forceMenus) {
-      g.attr('onclick', popupMenuToggle(`actor${actorCnt}_popup`)).attr('cursor', 'pointer');
-    }
-    g.append('line')
-      .attr('id', 'actor' + actorCnt)
-      .attr('x1', center)
-      .attr('y1', centerY)
-      .attr('x2', center)
-      .attr('y2', 2000)
-      .attr('class', 'actor-line 200')
-      .attr('stroke-width', '0.5px')
-      .attr('stroke', '#999')
-      .attr('name', actor.name);
-
-    g = boxplusLineGroup.append('g');
-    actor.actorCnt = actorCnt;
-
-    if (actor.links != null) {
-      g.attr('id', 'root-' + actorCnt);
-    }
-  }
-
-  const rect = svgDrawCommon.getNoteRect();
-  var cssclass = 'actor';
-  if (actor.properties?.class) {
-    cssclass = actor.properties.class;
-  } else {
-    rect.fill = '#eaeaea';
-  }
-  if (isFooter) {
-    cssclass += ` ${BOTTOM_ACTOR_CLASS}`;
-  } else {
-    cssclass += ` ${TOP_ACTOR_CLASS}`;
-  }
-  rect.x = actor.x;
-  rect.y = actorY;
-  rect.width = actor.width;
-  rect.height = actor.height;
-  rect.class = cssclass;
-  // rect.rx = 3;
-  // rect.ry = 3;
-  rect.name = actor.name;
-
-  // 🔹 DRAW STACKED RECTANGLES
-  const offset = 6;
-  const shadowRect = {
-    ...rect,
-    x: rect.x + offset,
-    y: rect.y + (isFooter ? +offset : -offset),
-    class: 'actor',
-  };
-  drawRect(g, shadowRect);
-  const rectElem = drawRect(g, rect); // draw main rectangle on top
-  actor.rectData = rect;
-
-  if (actor.properties?.icon) {
-    const iconSrc = actor.properties.icon.trim();
-    if (iconSrc.charAt(0) === '@') {
-      svgDrawCommon.drawEmbeddedImage(g, rect.x + rect.width - 20, rect.y + 10, iconSrc.substr(1));
-    } else {
-      svgDrawCommon.drawImage(g, rect.x + rect.width - 20, rect.y + 10, iconSrc);
-    }
-  }
-
-  _drawTextCandidateFunc(conf, hasKatex(actor.description))(
-    actor.description,
-    g,
-    rect.x,
-    rect.y,
-    rect.width,
-    rect.height,
-    { class: `actor ${ACTOR_BOX_CLASS}` },
-    conf
-  );
-
-  let height = actor.height;
-  if (rectElem.node) {
-    const bounds = rectElem.node().getBBox();
-    actor.height = bounds.height;
-    height = bounds.height;
-  }
-
-  return height;
-};
-
-const drawActorTypeQueue = function (elem, actor, conf, isFooter) {
-  const actorY = isFooter ? actor.stopy : actor.starty;
-  const center = actor.x + actor.width / 2;
-  const centerY = actorY + actor.height;
-
-  const boxplusLineGroup = elem.append('g').lower();
-  let g = boxplusLineGroup;
-
-  if (!isFooter) {
-    actorCnt++;
-    if (Object.keys(actor.links || {}).length && !conf.forceMenus) {
-      g.attr('onclick', popupMenuToggle(`actor${actorCnt}_popup`)).attr('cursor', 'pointer');
-    }
-    g.append('line')
-      .attr('id', 'actor' + actorCnt)
-      .attr('x1', center)
-      .attr('y1', centerY)
-      .attr('x2', center)
-      .attr('y2', 2000)
-      .attr('class', 'actor-line 200')
-      .attr('stroke-width', '0.5px')
-      .attr('stroke', '#999')
-      .attr('name', actor.name);
-
-    g = boxplusLineGroup.append('g');
-    actor.actorCnt = actorCnt;
-
-    if (actor.links != null) {
-      g.attr('id', 'root-' + actorCnt);
-    }
-  }
-
-  const rect = svgDrawCommon.getNoteRect();
-  let cssclass = 'actor';
-  if (actor.properties?.class) {
-    cssclass = actor.properties.class;
-  } else {
-    rect.fill = '#eaeaea';
-  }
-
-  if (isFooter) {
-    cssclass += ` ${BOTTOM_ACTOR_CLASS}`;
-  } else {
-    cssclass += ` ${TOP_ACTOR_CLASS}`;
-  }
-
-  rect.x = actor.x;
-  rect.y = actorY;
-  rect.width = actor.width;
-  rect.height = actor.height;
-  rect.class = cssclass;
-  rect.name = actor.name;
-
-  // Cylinder dimensions
-  const ry = rect.height / 2;
-  const rx = ry / (2.5 + rect.height / 50);
-
-  // Cylinder base group
-  const cylinderGroup = g.append('g');
-  const cylinderArc = g.append('g');
-
-  // Main cylinder body
-  cylinderGroup
-    .append('path')
-    .attr(
-      'd',
-      `M ${rect.x},${rect.y + ry}
-    a ${rx},${ry} 0 0 0 0,${rect.height}
-    h ${rect.width - 2 * rx}
-    a ${rx},${ry} 0 0 0 0,-${rect.height}
-    Z
-  `
-    )
-    .attr('class', cssclass);
-  cylinderArc
-    .append('path')
-    .attr(
-      'd',
-      `M ${rect.x},${rect.y + ry}
-      a ${rx},${ry} 0 0 0 0,${rect.height}`
-    )
-    .attr('stroke', '#666')
-    .attr('stroke-width', '1px')
-    .attr('class', cssclass);
-
-  cylinderGroup.attr('transform', `translate(${rx}, ${-(rect.height / 2)})`);
-  cylinderArc.attr('transform', `translate(${rect.width - rx}, ${-rect.height / 2})`);
-
-  actor.rectData = rect;
-
-  if (actor.properties?.icon) {
-    const iconSrc = actor.properties.icon.trim();
-    const iconX = rect.x + rect.width - 20;
-    const iconY = rect.y + 10;
-    if (iconSrc.charAt(0) === '@') {
-      svgDrawCommon.drawEmbeddedImage(g, iconX, iconY, iconSrc.substr(1));
-    } else {
-      svgDrawCommon.drawImage(g, iconX, iconY, iconSrc);
-    }
-  }
-
-  _drawTextCandidateFunc(conf, hasKatex(actor.description))(
-    actor.description,
-    g,
-    rect.x,
-    rect.y,
-    rect.width,
-    rect.height,
-    { class: `actor ${ACTOR_BOX_CLASS}` },
-    conf
-  );
-
-  let height = actor.height;
-  const lastPath = cylinderGroup.select('path:last-child');
-  if (lastPath.node()) {
-    const bounds = lastPath.node().getBBox();
-    actor.height = bounds.height;
-    height = bounds.height;
-  }
-
-  return height;
-};
-
-const drawActorTypeControl = function (elem, actor, conf, isFooter) {
-  const actorY = isFooter ? actor.stopy : actor.starty;
-  const center = actor.x + actor.width / 2;
-  const centerY = actorY + 75;
-
-  const line = elem.append('g').lower();
-
-  if (!isFooter) {
-    actorCnt++;
-    line
-      .append('line')
-      .attr('id', 'actor' + actorCnt)
-      .attr('x1', center)
-      .attr('y1', centerY)
-      .attr('x2', center)
-      .attr('y2', 2000)
-      .attr('class', 'actor-line 200')
-      .attr('stroke-width', '0.5px')
-      .attr('stroke', '#999')
-      .attr('name', actor.name);
-
-    actor.actorCnt = actorCnt;
-  }
-  const actElem = elem.append('g');
-  let cssClass = ACTOR_MAN_FIGURE_CLASS;
-  if (isFooter) {
-    cssClass += ` ${BOTTOM_ACTOR_CLASS}`;
-  } else {
-    cssClass += ` ${TOP_ACTOR_CLASS}`;
-  }
-  actElem.attr('class', cssClass);
-  actElem.attr('name', actor.name);
-
-  const rect = svgDrawCommon.getNoteRect();
-  rect.x = actor.x;
-  rect.y = actorY;
-  rect.fill = '#eaeaea';
-  rect.width = actor.width;
-  rect.height = actor.height;
-  rect.class = 'actor';
-
-  const cx = actor.x + actor.width / 2;
-  const cy = actorY + 30;
-  const r = 18;
-
-  actElem
-    .append('defs')
-    .append('marker')
-    .attr('id', 'filled-head-control')
-    .attr('refX', 15.5)
-    .attr('refY', 7)
-    .attr('markerWidth', 20)
-    .attr('markerHeight', 28)
-    .attr('orient', '180')
-    .append('path')
-    .attr('d', 'M 18,7 L9,13 L14,7 L9,1 Z');
-
-  // Draw the base circle
-  actElem
-    .append('circle')
-    .attr('cx', cx)
-    .attr('cy', cy)
-    .attr('r', r)
-    .attr('fill', '#eaeaf7')
-    .attr('stroke', '#666')
-    .attr('stroke-width', 1.2);
-
-  // Draw looping arrow as arc path
-  actElem
-    .append('path')
-    .attr('d', `M ${cx},${cy - r}`)
-    .attr('stroke-width', 1.5)
-    .attr('marker-end', 'url(#filled-head-control)');
-
-  const bounds = actElem.node().getBBox();
-  actor.height = bounds.height + 2 * (conf?.sequence?.labelBoxHeight ?? 0);
-
-  _drawTextCandidateFunc(conf, hasKatex(actor.description))(
-    actor.description,
-    actElem,
-    rect.x,
-    rect.y + 30,
-    rect.width,
-    rect.height,
-    { class: `actor ${ACTOR_MAN_FIGURE_CLASS}` },
-    conf
-  );
-
-  return actor.height;
-};
-
-const drawActorTypeEntity = function (elem, actor, conf, isFooter) {
-  const actorY = isFooter ? actor.stopy : actor.starty;
-  const center = actor.x + actor.width / 2;
-  const centerY = actorY + 75;
-
-  const line = elem.append('g').lower();
-
-  const actElem = elem.append('g');
-  let cssClass = ACTOR_MAN_FIGURE_CLASS;
-  if (isFooter) {
-    cssClass += ` ${BOTTOM_ACTOR_CLASS}`;
-  } else {
-    cssClass += ` ${TOP_ACTOR_CLASS}`;
-  }
-  actElem.attr('class', cssClass);
-  actElem.attr('name', actor.name);
-
-  const rect = svgDrawCommon.getNoteRect();
-  rect.x = actor.x;
-  rect.y = actorY;
-  rect.fill = '#eaeaea';
-  rect.width = actor.width;
-  rect.height = actor.height;
-  rect.class = 'actor';
-
-  const cx = actor.x + actor.width / 2;
-  const cy = actorY + 25;
-  const r = 18;
-
-  actElem
-    .append('circle')
-    .attr('cx', cx)
-    .attr('cy', cy)
-    .attr('r', r)
-    .attr('width', actor.width)
-    .attr('height', actor.height);
-
-  actElem
-    .append('line')
-    .attr('x1', cx - r)
-    .attr('x2', cx + r)
-    .attr('y1', cy + r)
-    .attr('y2', cy + r)
-    .attr('stroke', '#333')
-    .attr('stroke-width', 2);
-
-  const bounds = actElem.node().getBBox();
-  actor.height = bounds.height + (conf.sequence.labelBoxHeight ?? 0);
-
-  if (!isFooter) {
-    actorCnt++;
-    line
-      .append('line')
-      .attr('id', 'actor' + actorCnt)
-      .attr('x1', center)
-      .attr('y1', centerY)
-      .attr('x2', center)
-      .attr('y2', 2000)
-      .attr('class', 'actor-line 200')
-      .attr('stroke-width', '0.5px')
-      .attr('stroke', '#999')
-      .attr('name', actor.name);
-
-    actor.actorCnt = actorCnt;
-  }
-
-  _drawTextCandidateFunc(conf, hasKatex(actor.description))(
-    actor.description,
-    actElem,
-    rect.x,
-    rect.y + (!isFooter ? (cy + r - actorY) / 2 : (cy - actorY) / 2 + r + 2),
-    rect.width,
-    rect.height,
-    { class: `actor ${ACTOR_MAN_FIGURE_CLASS}` },
-    conf
-  );
-
-  if (!isFooter) {
-    actElem.attr('transform', `translate(${0}, ${r / 2})`);
-  } else {
-    actElem.attr('transform', `translate(${0}, ${r / 2})`);
-  }
-
-  return actor.height;
-};
-
-const drawActorTypeDatabase = function (elem, actor, conf, isFooter) {
-  const actorY = isFooter ? actor.stopy : actor.starty;
-  const center = actor.x + actor.width / 2;
-  const centerY = actorY + actor.height + 2 * conf.boxTextMargin;
-
-  const boxplusLineGroup = elem.append('g').lower();
-  let g = boxplusLineGroup;
-
-  if (!isFooter) {
-    actorCnt++;
-    if (Object.keys(actor.links || {}).length && !conf.forceMenus) {
-      g.attr('onclick', popupMenuToggle(`actor${actorCnt}_popup`)).attr('cursor', 'pointer');
-    }
-    g.append('line')
-      .attr('id', 'actor' + actorCnt)
-      .attr('x1', center)
-      .attr('y1', centerY)
-      .attr('x2', center)
-      .attr('y2', 2000)
-      .attr('class', 'actor-line 200')
-      .attr('stroke-width', '0.5px')
-      .attr('stroke', '#999')
-      .attr('name', actor.name);
-
-    g = boxplusLineGroup.append('g');
-    actor.actorCnt = actorCnt;
-
-    if (actor.links != null) {
-      g.attr('id', 'root-' + actorCnt);
-    }
-  }
-
-  const rect = svgDrawCommon.getNoteRect();
-
-  let cssclass = 'actor';
-  if (actor.properties?.class) {
-    cssclass = actor.properties.class;
-  } else {
-    rect.fill = '#eaeaea';
-  }
-
-  if (isFooter) {
-    cssclass += ` ${BOTTOM_ACTOR_CLASS}`;
-  } else {
-    cssclass += ` ${TOP_ACTOR_CLASS}`;
-  }
-
-  rect.x = actor.x;
-  rect.y = actorY;
-  rect.width = actor.width;
-  rect.height = actor.height;
-  rect.class = cssclass;
-  rect.name = actor.name;
-
-  // Cylinder dimensions
-  rect.x = actor.x;
-  rect.y = actorY;
-  const w = rect.width / 4;
-  const h = rect.height * 0.8;
-  const rx = w / 2;
-  const ry = rx / (2.5 + w / 50);
-
-  // Cylinder base group
-  const cylinderGroup = g.append('g');
-
-  const d = `
-  M ${rect.x},${rect.y + ry}
-  a ${rx},${ry} 0 0 0 ${w},0
-  a ${rx},${ry} 0 0 0 -${w},0
-  l 0,${h - 2 * ry}
-  a ${rx},${ry} 0 0 0 ${w},0
-  l 0,-${h - 2 * ry}
-`;
-  // Draw the main cylinder body
-  cylinderGroup
-    .append('path')
-    .attr('d', d)
-    .attr('fill', '#eaeaea')
-    .attr('stroke', '#000')
-    .attr('stroke-width', 1)
-    .attr('class', cssclass);
-
-  if (!isFooter) {
-    cylinderGroup.attr('transform', `translate(${w * 1.5}, ${rect.height / 4 - 2 * ry})`);
-  } else {
-    cylinderGroup.attr('transform', `translate(${w * 1.5}, ${rect.height / 4 - 2 * ry})`);
-  }
-  actor.rectData = rect;
-  _drawTextCandidateFunc(conf, hasKatex(actor.description))(
-    actor.description,
-    g,
-    rect.x,
-    rect.y + (!isFooter ? rect.height / 2 : h / 2 + ry),
-    rect.width,
-    rect.height,
-    { class: `actor ${ACTOR_BOX_CLASS}` },
-    conf
-  );
-
-  const lastPath = cylinderGroup.select('path:last-child');
-  if (lastPath.node()) {
-    const bounds = lastPath.node().getBBox();
-    actor.height = bounds.height + (conf.sequence.labelBoxHeight ?? 0);
-  }
-
-  return actor.height;
-};
-
-const drawActorTypeBoundary = function (elem, actor, conf, isFooter) {
-  const actorY = isFooter ? actor.stopy : actor.starty;
-  const center = actor.x + actor.width / 2;
-  const centerY = actorY + 80;
-  const radius = 30;
-  const line = elem.append('g').lower();
-
-  if (!isFooter) {
-    actorCnt++;
-    line
-      .append('line')
-      .attr('id', 'actor' + actorCnt)
-      .attr('x1', center)
-      .attr('y1', centerY)
-      .attr('x2', center)
-      .attr('y2', 2000)
-      .attr('class', 'actor-line 200')
-      .attr('stroke-width', '0.5px')
-      .attr('stroke', '#999')
-      .attr('name', actor.name);
-
-    actor.actorCnt = actorCnt;
-  }
-  const actElem = elem.append('g');
-  let cssClass = ACTOR_MAN_FIGURE_CLASS;
-  if (isFooter) {
-    cssClass += ` ${BOTTOM_ACTOR_CLASS}`;
-  } else {
-    cssClass += ` ${TOP_ACTOR_CLASS}`;
-  }
-  actElem.attr('class', cssClass);
-  actElem.attr('name', actor.name);
-
-  const rect = svgDrawCommon.getNoteRect();
-  rect.x = actor.x;
-  rect.y = actorY;
-  rect.fill = '#eaeaea';
-  rect.width = actor.width;
-  rect.height = actor.height;
-  rect.class = 'actor';
-  rect.rx = 3;
-  rect.ry = 3;
-
-  actElem
-    .append('line')
-    .attr('id', 'actor-man-torso' + actorCnt)
-    .attr('x1', actor.x + actor.width / 2 - radius * 2.5)
-    .attr('y1', actorY + 10)
-    .attr('x2', actor.x + actor.width / 2 - 15)
-    .attr('y2', actorY + 10);
-
-  actElem
-    .append('line')
-    .attr('id', 'actor-man-arms' + actorCnt)
-    .attr('x1', actor.x + actor.width / 2 - radius * 2.5)
-    .attr('y1', actorY + 0) // starting Y
-    .attr('x2', actor.x + actor.width / 2 - radius * 2.5)
-    .attr('y2', actorY + 20); // ending Y (26px long, adjust as needed)
-
-  actElem
-    .append('circle')
-    .attr('cx', actor.x + actor.width / 2)
-    .attr('cy', actorY + 10)
-    .attr('r', radius)
-    .attr('width', actor.width);
-
-  const bounds = actElem.node().getBBox();
-  actor.height = bounds.height + (conf.sequence.labelBoxHeight ?? 0);
-
-  _drawTextCandidateFunc(conf, hasKatex(actor.description))(
-    actor.description,
-    actElem,
-    rect.x,
-    rect.y + (!isFooter ? radius / 2 : radius / 2),
-    rect.width,
-    rect.height,
-    { class: `actor ${ACTOR_MAN_FIGURE_CLASS}` },
-    conf
-  );
-
-  if (!isFooter) {
-    actElem.attr('transform', `translate(0,${radius / 2 + 7})`);
-  } else {
-    actElem.attr('transform', `translate(0,${radius / 2 + 7})`);
-  }
-
-  // actElem.attr('transform', `translate(${rect.width / 2}, ${actorY + rect.height / 2})`);
-
-  return actor.height;
-};
-
 const drawActorTypeActor = function (elem, actor, conf, isFooter) {
   const actorY = isFooter ? actor.stopy : actor.starty;
   const center = actor.x + actor.width / 2;
@@ -1114,18 +512,6 @@ export const drawActor = async function (elem, actor, conf, isFooter) {
       return await drawActorTypeActor(elem, actor, conf, isFooter);
     case 'participant':
       return await drawActorTypeParticipant(elem, actor, conf, isFooter);
-    case 'boundary':
-      return await drawActorTypeBoundary(elem, actor, conf, isFooter);
-    case 'control':
-      return await drawActorTypeControl(elem, actor, conf, isFooter);
-    case 'entity':
-      return await drawActorTypeEntity(elem, actor, conf, isFooter);
-    case 'database':
-      return await drawActorTypeDatabase(elem, actor, conf, isFooter);
-    case 'collections':
-      return await drawActorTypeCollections(elem, actor, conf, isFooter);
-    case 'queue':
-      return await drawActorTypeQueue(elem, actor, conf, isFooter);
   }
 };
 

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

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

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

@@ -1,14 +1,12 @@
 import type { DiagramDefinition } from '../../diagram-api/types.js';
-import { TreeMapDB } from './db.js';
+import { db } from './db.js';
 import { parser } from './parser.js';
 import { renderer } from './renderer.js';
 import styles from './styles.js';
 
 export const diagram: DiagramDefinition = {
   parser,
-  get db() {
-    return new TreeMapDB();
-  },
+  db,
   renderer,
   styles,
 };

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

@@ -2,15 +2,15 @@ import { parse } from '@mermaid-js/parser';
 import type { ParserDefinition } from '../../diagram-api/types.js';
 import { log } from '../../logger.js';
 import { populateCommonDb } from '../common/populateCommonDb.js';
-import type { TreemapNode, TreemapAst, TreemapDB } from './types.js';
+import { db } from './db.js';
+import type { TreemapNode, TreemapAst } from './types.js';
 import { buildHierarchy } from './utils.js';
-import { TreeMapDB } from './db.js';
 
 /**
  * Populates the database with data from the Treemap AST
  * @param ast - The Treemap AST
  */
-const populate = (ast: TreemapAst, db: TreemapDB) => {
+const populate = (ast: TreemapAst) => {
   // We need to bypass the type checking for populateCommonDb
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   populateCommonDb(ast as any, db);
@@ -84,8 +84,6 @@ const getItemName = (item: { name?: string | number }): string => {
 };
 
 export const parser: ParserDefinition = {
-  // @ts-expect-error - TreeMapDB is not assignable to DiagramDB
-  parser: { yy: undefined },
   parse: async (text: string): Promise<void> => {
     try {
       // Use a generic parse that accepts any diagram type
@@ -93,13 +91,7 @@ export const parser: ParserDefinition = {
       const parseFunc = parse as (diagramType: string, text: string) => Promise<TreemapAst>;
       const ast = await parseFunc('treemap', text);
       log.debug('Treemap AST:', ast);
-      const db = parser.parser?.yy;
-      if (!(db instanceof TreeMapDB)) {
-        throw new Error(
-          'parser.parser?.yy was not a TreemapDB. This is due to a bug within Mermaid, please report this issue at https://github.com/mermaid-js/mermaid/issues.'
-        );
-      }
-      populate(ast, db);
+      populate(ast);
     } catch (error) {
       log.error('Error parsing treemap:', error);
       throw error;

packages/mermaid/src/docs/community/contributing.md

@@ -302,7 +302,7 @@ If you are adding a feature, you will definitely need to add tests. Depending on
 
 Unit tests are tests that test a single function or module. They are the easiest to write and the fastest to run.
 
-Unit tests are mandatory for all code except the layout tests. (The layouts are tested with integration tests.)
+Unit tests are mandatory for all code except the renderers. (The renderers are tested with integration tests.)
 
 We use [Vitest](https://vitest.dev) to run unit tests.
 
@@ -328,30 +328,6 @@ When using Docker prepend your command with `./run`:
 ./run pnpm test
 ```
 
-##### Testing the DOM
-
-One can use `jsdomIt` to test any part of Mermaid that interacts with the DOM, as long as it is not related to the layout.
-
-The function `jsdomIt` ([developed in utils.ts](../../tests/util.ts)) overrides `it` from `vitest`, and creates a pseudo-browser environment that works almost like the real deal for the duration of the test. It uses JSDOM to create a DOM, and adds objects `window` and `document` to `global` to mock the browser environment.
-
-> [!NOTE]
-> The layout cannot work in `jsdomIt` tests because JSDOM has no rendering engine, hence the pseudo-browser environment.
-
-Example :
-
-```typescript
-import { ensureNodeFromSelector, jsdomIt } from './tests/util.js';
-
-jsdomIt('should add element "thing" in the SVG', ({ svg }) => {
-  // Code in this block runs in a pseudo-browser environment
-  addThing(svg); // The svg item is the D3 selection of the SVG node
-  const svgNode = ensureNodeFromSelector('svg'); // Retrieve the DOM node using the DOM API
-  expect(svgNode.querySelector('thing')).not.toBeNull(); // Test the structure of the SVG
-});
-```
-
-They can be used to test any method that interacts with the DOM, including for testing renderers. For renderers, additional integration testing is necessary to test the layout though.
-
 #### Integration / End-to-End (E2E) Tests
 
 These test the rendering and visual appearance of the diagrams.

packages/mermaid/src/docs/diagrams/flowchart-code-flow.mmd

@@ -1,189 +0,0 @@
----
-references:
-  - "File: /packages/mermaid/src/diagrams/flowchart/flowDiagram.ts"
-  - "File: /packages/mermaid/src/diagrams/flowchart/flowDb.ts"
-  - "File: /packages/mermaid/src/diagrams/flowchart/flowDetector.ts"
-  - "File: /packages/mermaid/src/diagrams/flowchart/flowDetector-v2.ts"
-  - "File: /packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts"
-  - "File: /packages/mermaid/src/diagrams/flowchart/styles.ts"
-  - "File: /packages/mermaid/src/diagrams/flowchart/types.ts"
-  - "File: /packages/mermaid/src/diagrams/flowchart/flowChartShapes.js"
-  - "File: /packages/mermaid/src/diagrams/flowchart/parser/flowParser.ts"
-  - "File: /packages/mermaid/src/diagrams/flowchart/elk/detector.ts"
-generationTime: 2025-07-23T10:31:53.266Z
----
-flowchart TD
-    %% Entry Points and Detection
-    Input["User Input Text"] --> Detection{Detection Phase}
-    
-    Detection --> flowDetector["flowDetector.ts<br/>detector(txt, config)"]
-    Detection --> flowDetectorV2["flowDetector-v2.ts<br/>detector(txt, config)"]
-    Detection --> elkDetector["elk/detector.ts<br/>detector(txt, config)"]
-    
-    flowDetector --> |"Checks /^\s*graph/"| DetectLegacy{Legacy Flowchart?}
-    flowDetectorV2 --> |"Checks /^\s*flowchart/"| DetectNew{New Flowchart?}
-    elkDetector --> |"Checks /^\s*flowchart-elk/"| DetectElk{ELK Layout?}
-    
-    DetectLegacy --> |Yes| LoadDiagram
-    DetectNew --> |Yes| LoadDiagram
-    DetectElk --> |Yes| LoadDiagram
-    
-    %% Loading Phase
-    LoadDiagram["loader() function"] --> flowDiagram["flowDiagram.ts<br/>diagram object"]
-    
-    flowDiagram --> DiagramStructure{Diagram Components}
-    DiagramStructure --> Parser["parser: flowParser"]
-    DiagramStructure --> Database["db: new FlowDB()"]
-    DiagramStructure --> Renderer["renderer: flowRenderer-v3-unified"]
-    DiagramStructure --> Styles["styles: flowStyles"]
-    DiagramStructure --> Init["init: (cnf: MermaidConfig)"]
-    
-    %% Parser Phase
-    Parser --> flowParser["parser/flowParser.ts<br/>newParser.parse(src)"]
-    flowParser --> |"Preprocesses src"| RemoveWhitespace["Remove trailing whitespace<br/>src.replace(/}\s*\n/g, '}\n')"]
-    RemoveWhitespace --> flowJison["parser/flow.jison<br/>flowJisonParser.parse(newSrc)"]
-    
-    flowJison --> ParseGraph["Parse Graph Structure"]
-    ParseGraph --> ParseVertices["Parse Vertices"]
-    ParseGraph --> ParseEdges["Parse Edges"]
-    ParseGraph --> ParseSubgraphs["Parse Subgraphs"]
-    ParseGraph --> ParseClasses["Parse Classes"]
-    ParseGraph --> ParseStyles["Parse Styles"]
-    
-    %% Database Phase - FlowDB Class
-    Database --> FlowDBClass["flowDb.ts<br/>FlowDB class"]
-    
-    FlowDBClass --> DBInit["constructor()<br/>- Initialize counters<br/>- Bind methods<br/>- Setup toolTips<br/>- Call clear()"]
-    
-    DBInit --> DBMethods{FlowDB Methods}
-    
-    DBMethods --> addVertex["addVertex(id, textObj, type, style,<br/>classes, dir, props, metadata)"]
-    DBMethods --> addLink["addLink(_start[], _end[], linkData)"]
-    DBMethods --> addSingleLink["addSingleLink(_start, _end, type, id)"]
-    DBMethods --> setDirection["setDirection(dir)"]
-    DBMethods --> addSubGraph["addSubGraph(nodes[], id, title)"]
-    DBMethods --> addClass["addClass(id, style)"]
-    DBMethods --> setClass["setClass(ids, className)"]
-    DBMethods --> setTooltip["setTooltip(ids, tooltip)"]
-    DBMethods --> setClickEvent["setClickEvent(id, functionName, args)"]
-    DBMethods --> setClickFun["setClickFun(id, functionName, args)"]
-    
-    %% Vertex Processing
-    addVertex --> VertexProcess{Vertex Processing}
-    VertexProcess --> CreateVertex["Create FlowVertex object<br/>- id, labelType, domId<br/>- styles[], classes[]"]
-    VertexProcess --> SanitizeText["sanitizeText(textObj.text)"]
-    VertexProcess --> ParseMetadata["Parse YAML metadata<br/>yaml.load(yamlData)"]
-    VertexProcess --> SetVertexProps["Set vertex properties<br/>- shape, label, icon, form<br/>- pos, img, constraint, w, h"]
-    
-    %% Edge Processing  
-    addSingleLink --> EdgeProcess{Edge Processing}
-    EdgeProcess --> CreateEdge["Create FlowEdge object<br/>- start, end, type, text<br/>- labelType, classes[]"]
-    EdgeProcess --> ProcessLinkText["Process link text<br/>- sanitizeText()<br/>- strip quotes"]
-    EdgeProcess --> SetEdgeProps["Set edge properties<br/>- type, stroke, length"]
-    EdgeProcess --> GenerateEdgeId["Generate edge ID<br/>getEdgeId(start, end, counter)"]
-    EdgeProcess --> ValidateEdgeLimit["Validate edge limit<br/>maxEdges check"]
-    
-    %% Data Collection
-    DBMethods --> GetData["getData()"]
-    GetData --> CollectNodes["Collect nodes[] from vertices"]
-    GetData --> CollectEdges["Collect edges[] from edges"]
-    GetData --> ProcessSubGraphs["Process subgraphs<br/>- parentDB Map<br/>- subGraphDB Map"]
-    GetData --> AddNodeFromVertex["addNodeFromVertex()<br/>for each vertex"]
-    GetData --> ProcessEdgeTypes["destructEdgeType()<br/>arrowTypeStart, arrowTypeEnd"]
-    
-    %% Node Creation
-    AddNodeFromVertex --> NodeCreation{Node Creation}
-    NodeCreation --> FindExistingNode["findNode(nodes, vertex.id)"]
-    NodeCreation --> CreateBaseNode["Create base node<br/>- id, label, parentId<br/>- cssStyles, cssClasses<br/>- shape, domId, tooltip"]
-    NodeCreation --> GetCompiledStyles["getCompiledStyles(classDefs)"]
-    NodeCreation --> GetTypeFromVertex["getTypeFromVertex(vertex)"]
-    
-    %% Rendering Phase
-    Renderer --> flowRendererV3["flowRenderer-v3-unified.ts<br/>draw(text, id, version, diag)"]
-    
-    flowRendererV3 --> RenderInit["Initialize rendering<br/>- getConfig()<br/>- handle securityLevel<br/>- getDiagramElement()"]
-    
-    RenderInit --> GetLayoutData["diag.db.getData()<br/>as LayoutData"]
-    GetLayoutData --> SetupLayoutData["Setup layout data<br/>- type, layoutAlgorithm<br/>- direction, spacing<br/>- markers, diagramId"]
-    
-    SetupLayoutData --> CallRender["render(data4Layout, svg)"]
-    CallRender --> SetupViewPort["setupViewPortForSVG(svg, padding)"]
-    SetupViewPort --> ProcessLinks["Process vertex links<br/>- create anchor elements<br/>- handle click events"]
-    
-    %% Shape Rendering
-    CallRender --> ShapeSystem["flowChartShapes.js<br/>Shape Functions"]
-    
-    ShapeSystem --> ShapeFunctions{Shape Functions}
-    ShapeFunctions --> question["question(parent, bbox, node)"]
-    ShapeFunctions --> hexagon["hexagon(parent, bbox, node)"]
-    ShapeFunctions --> rect_left_inv_arrow["rect_left_inv_arrow(parent, bbox, node)"]
-    ShapeFunctions --> lean_right["lean_right(parent, bbox, node)"]
-    ShapeFunctions --> lean_left["lean_left(parent, bbox, node)"]
-    
-    ShapeFunctions --> insertPolygonShape["insertPolygonShape(parent, w, h, points)"]
-    ShapeFunctions --> intersectPolygon["intersectPolygon(node, points, point)"]
-    ShapeFunctions --> intersectRect["intersectRect(node, point)"]
-    
-    %% Styling System
-    Styles --> stylesTS["styles.ts<br/>getStyles(options)"]
-    stylesTS --> StyleOptions["FlowChartStyleOptions<br/>- arrowheadColor, border2<br/>- clusterBkg, mainBkg<br/>- fontFamily, textColor"]
-    
-    StyleOptions --> GenerateCSS["Generate CSS styles<br/>- .label, .cluster-label<br/>- .node, .edgePath<br/>- .flowchart-link, .edgeLabel"]
-    GenerateCSS --> GetIconStyles["getIconStyles()"]
-    
-    %% Type System
-    Parser --> TypeSystem["types.ts<br/>Type Definitions"]
-    TypeSystem --> FlowVertex["FlowVertex interface"]
-    TypeSystem --> FlowEdge["FlowEdge interface"]
-    TypeSystem --> FlowClass["FlowClass interface"]
-    TypeSystem --> FlowSubGraph["FlowSubGraph interface"]
-    TypeSystem --> FlowVertexTypeParam["FlowVertexTypeParam<br/>Shape types"]
-    
-    %% Utility Functions
-    DBMethods --> UtilityFunctions{Utility Functions}
-    UtilityFunctions --> lookUpDomId["lookUpDomId(id)"]
-    UtilityFunctions --> getClasses["getClasses()"]
-    UtilityFunctions --> getDirection["getDirection()"]
-    UtilityFunctions --> getVertices["getVertices()"]
-    UtilityFunctions --> getEdges["getEdges()"]
-    UtilityFunctions --> getSubGraphs["getSubGraphs()"]
-    UtilityFunctions --> clear["clear()"]
-    UtilityFunctions --> defaultConfig["defaultConfig()"]
-    
-    %% Event Handling
-    ProcessLinks --> EventHandling{Event Handling}
-    EventHandling --> setupToolTips["setupToolTips(element)"]
-    EventHandling --> bindFunctions["bindFunctions(element)"]
-    EventHandling --> runFunc["utils.runFunc(functionName, args)"]
-    
-    %% Common Database Functions
-    DBMethods --> CommonDB["commonDb.js functions"]
-    CommonDB --> setAccTitle["setAccTitle()"]
-    CommonDB --> getAccTitle["getAccTitle()"]
-    CommonDB --> setAccDescription["setAccDescription()"]
-    CommonDB --> getAccDescription["getAccDescription()"]
-    CommonDB --> setDiagramTitle["setDiagramTitle()"]
-    CommonDB --> getDiagramTitle["getDiagramTitle()"]
-    CommonDB --> commonClear["clear()"]
-    
-    %% Final Output
-    ProcessLinks --> FinalSVG["Final SVG Output"]
-    
-    %% Layout Algorithm Selection
-    SetupLayoutData --> LayoutAlgorithm{Layout Algorithm}
-    LayoutAlgorithm --> Dagre["dagre<br/>(default)"]
-    LayoutAlgorithm --> DagreWrapper["dagre-wrapper<br/>(v2 renderer)"]
-    LayoutAlgorithm --> ELK["elk<br/>(external package)"]
-    
-    %% Testing Components
-    FlowDBClass --> TestFiles["Test Files"]
-    TestFiles --> flowDbSpec["flowDb.spec.ts"]
-    TestFiles --> flowChartShapesSpec["flowChartShapes.spec.js"]
-    TestFiles --> ParserTests["parser/*.spec.js files<br/>- flow-text.spec.js<br/>- flow-edges.spec.js<br/>- flow-style.spec.js<br/>- subgraph.spec.js"]
-    
-    %% Configuration
-    Init --> ConfigSetup["Configuration Setup"]
-    ConfigSetup --> FlowchartConfig["cnf.flowchart config"]
-    ConfigSetup --> ArrowMarkers["arrowMarkerAbsolute"]
-    ConfigSetup --> LayoutConfig["layout config"]
-    ConfigSetup --> SetConfig["setConfig() calls"]

packages/mermaid/src/docs/diagrams/mermaid-api-sequence.mmd

@@ -1,307 +0,0 @@
----
-references:
-  - "File: /packages/mermaid/src/mermaidAPI.ts"
-  - "File: /packages/mermaid/src/mermaid.ts"
-generationTime: 2025-01-28T16:30:00.000Z
----
-sequenceDiagram
-    participant User as User/Browser
-    participant Mermaid as mermaid.ts
-    participant Queue as executionQueue
-    participant API as mermaidAPI.ts
-    participant Config as configApi
-    participant Preprocessor as preprocessDiagram
-    participant DiagramAPI as diagram-api
-    participant Diagram as Diagram.fromText
-    participant Renderer as diagram.renderer
-    participant Styles as Styling System
-    participant DOM as DOM/SVG
-
-    Note over User, DOM: Mermaid Complete API Flow
-
-    %% Initialization Phase
-    User->>+Mermaid: mermaid.initialize(config)
-    Mermaid->>+API: mermaidAPI.initialize(config)
-    
-    API->>API: assignWithDepth({}, userOptions)
-    API->>API: handle legacy fontFamily config
-    API->>Config: saveConfigFromInitialize(options)
-    
-    alt Theme Configuration Available
-        API->>API: check if theme in theme object
-        API->>API: set themeVariables from theme
-    else Default Theme
-        API->>API: use default theme variables
-    end
-    
-    API->>Config: setSiteConfig(options) or getSiteConfig()
-    API->>API: setLogLevel(config.logLevel)
-    API->>DiagramAPI: addDiagrams()
-    
-    API-->>-Mermaid: initialization complete
-    Mermaid-->>-User: ready to render
-
-    %% Content Loaded Event
-    User->>DOM: document.load event
-    DOM->>+Mermaid: contentLoaded()
-    
-    opt startOnLoad is true
-        Mermaid->>Config: getConfig()
-        Config-->>Mermaid: { startOnLoad: true }
-        Mermaid->>Mermaid: run()
-    end
-    
-    Mermaid-->>-DOM: event handling complete
-
-    %% Main Run Function
-    User->>+Mermaid: mermaid.run(options)
-    
-    Mermaid->>Mermaid: runThrowsErrors(options)
-    Mermaid->>Config: getConfig()
-    Config-->>Mermaid: configuration object
-    
-    alt nodes provided
-        Mermaid->>Mermaid: use provided nodes
-    else querySelector provided
-        Mermaid->>DOM: document.querySelectorAll(querySelector)
-        DOM-->>Mermaid: nodesToProcess
-    end
-    
-    Mermaid->>Mermaid: new InitIDGenerator(deterministicIds, seed)
-    
-    loop For each diagram element
-        Mermaid->>DOM: check element.getAttribute('data-processed')
-        
-        opt not processed
-            Mermaid->>DOM: element.setAttribute('data-processed', 'true')
-            Mermaid->>Mermaid: generate unique id
-            Mermaid->>DOM: get element.innerHTML
-            Mermaid->>Mermaid: entityDecode and clean text
-            Mermaid->>Mermaid: detectInit(txt)
-            
-            Mermaid->>Queue: render(id, txt, element)
-        end
-    end
-    
-    Mermaid-->>-User: processing initiated
-
-    %% Render Function (Queued)
-    activate Queue
-    Queue->>+API: mermaidAPI.render(id, text, container)
-    
-    API->>DiagramAPI: addDiagrams()
-    API->>+Preprocessor: processAndSetConfigs(text)
-    
-    Preprocessor->>Preprocessor: preprocessDiagram(text)
-    Preprocessor->>Config: reset()
-    Preprocessor->>Config: addDirective(processed.config)
-    Preprocessor-->>-API: { code, config }
-    
-    API->>Config: getConfig()
-    Config-->>API: current configuration
-    
-    opt text length > maxTextSize
-        API->>API: text = MAX_TEXTLENGTH_EXCEEDED_MSG
-    end
-    
-    API->>API: setup id selectors and element IDs
-    API->>API: determine security level (sandbox/loose)
-
-    %% DOM Setup
-    alt svgContainingElement provided
-        alt isSandboxed
-            API->>DOM: sandboxedIframe(select(svgContainingElement), iFrameID)
-            API->>DOM: select iframe contentDocument body
-        else
-            API->>DOM: select(svgContainingElement)
-        end
-    else no container
-        API->>API: removeExistingElements(document, id, divId, iFrameId)
-        alt isSandboxed
-            API->>DOM: sandboxedIframe(select('body'), iFrameID)
-        else
-            API->>DOM: select('body')
-        end
-    end
-    
-    API->>DOM: appendDivSvgG(root, id, enclosingDivID, fontFamily, XMLNS_XLINK_STD)
-
-    %% Diagram Creation
-    API->>+Diagram: Diagram.fromText(text, { title: processed.title })
-    
-    Diagram->>DiagramAPI: detect diagram type
-    Diagram->>DiagramAPI: load appropriate diagram
-    Diagram-->>-API: diagram instance
-    
-    opt parsing error occurred
-        API->>+Diagram: Diagram.fromText('error')
-        Diagram-->>-API: error diagram
-        API->>API: store parseEncounteredException
-    end
-
-    %% Style Generation
-    API->>DOM: get svg element and firstChild
-    API->>Renderer: diag.renderer.getClasses(text, diag)
-    Renderer-->>API: diagramClassDefs
-    
-    API->>+Styles: createUserStyles(config, diagramType, diagramClassDefs, idSelector)
-    
-    Styles->>Styles: createCssStyles(config, classDefs)
-    
-    opt config.themeCSS defined
-        Styles->>Styles: append themeCSS
-    end
-    
-    opt fontFamily configured
-        Styles->>Styles: add CSS variables for fonts
-    end
-    
-    opt classDefs exist
-        loop For each styleClassDef
-            opt has styles
-                Styles->>Styles: cssImportantStyles for each CSS element
-            end
-            opt has textStyles
-                Styles->>Styles: cssImportantStyles for tspan elements
-            end
-        end
-    end
-    
-    Styles->>Styles: getStyles(graphType, userCSSstyles, themeVariables)
-    Styles->>Styles: serialize(compile(svgId{allStyles}), stringify)
-    Styles-->>-API: compiled CSS rules
-    
-    API->>DOM: create style element
-    API->>DOM: style.innerHTML = rules
-    API->>DOM: svg.insertBefore(style, firstChild)
-
-    %% Diagram Rendering
-    API->>+Renderer: diag.renderer.draw(text, id, version, diag)
-    
-    Renderer->>Renderer: diagram-specific rendering logic
-    Renderer->>DOM: create SVG elements
-    Renderer->>DOM: apply positioning and styling
-    Renderer-->>-API: rendered diagram
-    
-    opt rendering error
-        alt suppressErrorRendering
-            API->>API: removeTempElements()
-            API->>Mermaid: throw error
-        else
-            API->>Renderer: errorRenderer.draw(text, id, version)
-        end
-    end
-
-    %% Accessibility and Cleanup
-    API->>DOM: select svg element
-    API->>Diagram: diag.db.getAccTitle()
-    API->>Diagram: diag.db.getAccDescription()
-    API->>API: addA11yInfo(diagramType, svgNode, a11yTitle, a11yDescr)
-    
-    API->>DOM: set xmlns for foreignobject elements
-    API->>DOM: get innerHTML from enclosing div
-    
-    API->>+API: cleanUpSvgCode(svgCode, isSandboxed, arrowMarkerAbsolute)
-    
-    opt not useArrowMarkerUrls and not sandboxed
-        API->>API: replace marker-end URLs with anchors
-    end
-    
-    API->>API: decodeEntities(svgCode)
-    API->>API: replace <br> with <br/>
-    API-->>-API: cleaned SVG code
-    
-    alt isSandboxed
-        API->>+API: putIntoIFrame(svgCode, svgEl)
-        API->>API: calculate iframe height
-        API->>API: toBase64 encode SVG content
-        API->>API: create iframe with sandbox attributes
-        API-->>-API: iframe HTML
-    else not loose security
-        API->>API: DOMPurify.sanitize(svgCode, options)
-    end
-    
-    API->>API: attachFunctions()
-    API->>API: removeTempElements()
-    
-    opt parseEncounteredException
-        API->>Mermaid: throw parseEncounteredException
-    end
-    
-    API-->>-Queue: { diagramType, svg: svgCode, bindFunctions }
-
-    %% Return to Web Integration
-    activate Mermaid
-    Queue-->>Mermaid: render result
-    Mermaid->>DOM: element.innerHTML = svg
-    
-    opt postRenderCallback
-        Mermaid->>User: postRenderCallback(id)
-    end
-    
-    opt bindFunctions exist
-        Mermaid->>DOM: bindFunctions(element)
-    end
-    deactivate Mermaid
-
-    %% Parse Function Flow
-    User->>+Mermaid: mermaid.parse(text, parseOptions)
-    activate Queue
-    
-    Queue->>+API: mermaidAPI.parse(text, parseOptions)
-    
-    API->>DiagramAPI: addDiagrams()
-    API->>Preprocessor: processAndSetConfigs(text)
-    Preprocessor-->>API: { code, config }
-    API->>Diagram: getDiagramFromText(code)
-    Diagram-->>API: diagram instance
-    API-->>-Queue: { diagramType: diagram.type, config }
-    
-    Queue-->>-Mermaid: parse result
-    Mermaid-->>-User: ParseResult or false
-
-    %% External Diagram Registration
-    User->>+Mermaid: registerExternalDiagrams(diagrams, options)
-    
-    Mermaid->>DiagramAPI: addDiagrams()
-    Mermaid->>DiagramAPI: registerLazyLoadedDiagrams(...diagrams)
-    
-    opt lazyLoad is false
-        Mermaid->>DiagramAPI: loadRegisteredDiagrams()
-    end
-    
-    Mermaid-->>-User: registration complete
-
-    %% Error Handling
-    Note over Mermaid, API: Error Handling Throughout
-    alt Error occurs
-        API->>Mermaid: throw error
-        Mermaid->>+Mermaid: handleError(error, errors, parseError)
-        
-        Mermaid->>Mermaid: log.warn(error)
-        
-        alt isDetailedError
-            Mermaid->>User: parseError(error.str, error.hash)
-        else
-            Mermaid->>User: parseError(error)
-        end
-        
-        opt not suppressErrors
-            Mermaid->>User: throw error
-        end
-        
-        Mermaid-->>-User: error handled
-    end
-
-    %% Configuration Details
-    Note over Config: Configuration Functions
-    Note right of Config: Functions:<br/>- reset()<br/>- getConfig()<br/>- setConfig()<br/>- getSiteConfig()<br/>- updateSiteConfig()<br/>- saveConfigFromInitialize()
-    
-    Note over Styles: CSS Generation
-    Note right of Styles: Features:<br/>- createCssStyles()<br/>- createUserStyles()<br/>- cssImportantStyles()<br/>- Theme integration<br/>- Class definitions
-    
-    Note over API: Security Levels
-    Note right of API: Modes:<br/>- sandbox: iframe isolation<br/>- loose: minimal sanitization<br/>- default: DOMPurify sanitization
-    
-    Note over API: Helper Functions
-    Note right of API: Utilities:<br/>- cleanUpSvgCode()<br/>- putIntoIFrame()<br/>- appendDivSvgG()<br/>- removeExistingElements() 

packages/mermaid/src/docs/diagrams/mindmap-implementation-sequence.mmd

@@ -1,180 +0,0 @@
----
-references:
-  - "File: /packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts"
-  - "File: /packages/mermaid/src/diagrams/mindmap/mindmapDb.ts"
-  - "File: /packages/mermaid/src/diagrams/mindmap/detector.ts"
-  - "File: /packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts"
-  - "File: /packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts"
-  - "File: /packages/mermaid/src/diagrams/mindmap/styles.ts"
-  - "File: /packages/mermaid/src/diagrams/mindmap/svgDraw.ts"
-generationTime: 2025-01-28T16:00:00.000Z
----
-sequenceDiagram
-    participant User as User Input Text
-    participant Detector as detector.ts
-    participant Loader as DiagramLoader
-    participant Definition as mindmap-definition.ts
-    participant Parser as parser/mindmap.jison
-    participant DB as MindmapDB
-    participant Renderer as mindmapRenderer.ts
-    participant Cytoscape as cytoscape.js
-    participant SVGDraw as svgDraw.ts
-    participant Styles as styles.ts
-    participant Output as Final SVG
-
-    Note over User, Output: Mindmap Implementation Flow
-
-    %% Detection Phase
-    User->>Detector: /^\s*mindmap/ text input
-    activate Detector
-    Detector->>Detector: detector(txt) validates pattern
-    Detector->>Loader: loader() function called
-    deactivate Detector
-    
-    activate Loader
-    Loader->>Definition: import mindmap-definition.js
-    deactivate Loader
-
-    %% Core Structure Setup
-    activate Definition
-    Definition->>DB: get db() → new MindmapDB()
-    Definition->>Renderer: setup renderer
-    Definition->>Parser: setup parser
-    Definition->>Styles: setup styles
-    deactivate Definition
-
-    %% Database Initialization
-    activate DB
-    Note over DB: MindmapDB Constructor
-    DB->>DB: initialize nodes array
-    DB->>DB: setup nodeType constants
-    DB->>DB: bind methods
-    DB->>DB: clear() state
-    
-    %% Parsing Phase
-    activate Parser
-    User->>Parser: mindmap syntax text
-    
-    loop For each node in hierarchy
-        Parser->>DB: addNode(level, id, descr, type)
-        activate DB
-        DB->>DB: sanitizeText(id, descr)
-        DB->>DB: getType(startStr, endStr)
-        Note right of DB: Shape Detection:<br/>[ → RECT<br/>( → ROUNDED_RECT<br/>(( → CIRCLE<br/>)) → BANG<br/>{{ → HEXAGON
-        DB->>DB: getParent(level)
-        DB->>DB: create MindmapNode
-        DB->>DB: add to hierarchy
-        deactivate DB
-    end
-
-    opt Icon/Class Decoration
-        Parser->>DB: decorateNode(decoration)
-        DB->>DB: set icon/class properties
-    end
-    deactivate Parser
-
-    %% Data Preparation
-    Renderer->>DB: getData() for layout
-    activate DB
-    DB->>DB: collect all nodes
-    DB->>DB: build parent-child relationships
-    DB-->>Renderer: return node hierarchy
-    deactivate DB
-
-    %% Rendering Pipeline
-    activate Renderer
-    Note over Renderer: Rendering Phase
-    
-    Renderer->>Cytoscape: initialize cytoscape
-    activate Cytoscape
-    
-    loop For each node in mindmap
-        Renderer->>Cytoscape: addNodes(mindmap, cy, conf, level)
-        Cytoscape->>Cytoscape: create node data
-        Cytoscape->>Cytoscape: set position (x, y)
-    end
-
-    loop For parent-child relationships
-        Renderer->>Cytoscape: add edges
-        Cytoscape->>Cytoscape: create edge data
-    end
-
-    Renderer->>Cytoscape: configure cose-bilkent layout
-    Cytoscape->>Cytoscape: calculate optimal positions
-    Cytoscape-->>Renderer: return positioned graph
-    deactivate Cytoscape
-
-    %% SVG Generation
-    Renderer->>SVGDraw: drawNodes(db, svg, mindmap, section, conf)
-    activate SVGDraw
-    
-    loop For each node recursively
-        SVGDraw->>SVGDraw: select shape function
-        
-        alt Default Shape
-            SVGDraw->>SVGDraw: defaultBkg() - rounded rectangle
-        else Rectangle Shape
-            SVGDraw->>SVGDraw: rectBkg() - sharp corners
-        else Circle Shape
-            SVGDraw->>SVGDraw: circleBkg() - perfect circle
-        else Cloud Shape
-            SVGDraw->>SVGDraw: cloudBkg() - organic curves
-        else Bang Shape
-            SVGDraw->>SVGDraw: bangBkg() - explosion style
-        else Hexagon Shape
-            SVGDraw->>SVGDraw: hexagonBkg() - six sides
-        end
-        
-        SVGDraw->>SVGDraw: create SVG elements
-        SVGDraw->>SVGDraw: add text labels
-        SVGDraw->>SVGDraw: position node
-        
-        opt Node has children
-            SVGDraw->>SVGDraw: drawNodes() recursive call
-        end
-    end
-    deactivate SVGDraw
-
-    %% Edge Rendering
-    Renderer->>Renderer: drawEdges(edgesEl, cy)
-    loop For each edge
-        Renderer->>Renderer: extract edge bounds
-        Renderer->>Renderer: draw SVG path
-    end
-
-    %% Styling Application
-    Renderer->>Styles: getStyles(options)
-    activate Styles
-    
-    Styles->>Styles: genSections(options)
-    loop For THEME_COLOR_LIMIT sections
-        Styles->>Styles: generate color scale
-        Styles->>Styles: create CSS rules
-        Note right of Styles: .section-X fills<br/>.edge-depth-X widths<br/>.node-icon-X colors
-    end
-    
-    Styles->>Styles: apply theme integration
-    Styles-->>Renderer: return compiled CSS
-    deactivate Styles
-
-    %% Final Assembly
-    Renderer->>Output: selectSvgElement()
-    Renderer->>Output: setupGraphViewbox()
-    Renderer->>Output: apply styles
-    Renderer->>Output: add interactive elements
-    deactivate Renderer
-
-    activate Output
-    Note over Output: Final Mindmap Features
-    Output->>Output: responsive layout
-    Output->>Output: accessibility attributes
-    Output->>Output: hover effects
-    Output->>Output: click handling
-    Output-->>User: rendered mindmap
-    deactivate Output
-
-    %% Configuration Details
-    Note over DB, Styles: Configuration Options
-    Note right of DB: Padding Calculations:<br/>Base padding from config<br/>RECT: ×2 padding<br/>ROUNDED_RECT: ×2 padding<br/>HEXAGON: ×2 padding
-    Note right of Styles: Section Management:<br/>MAX_SECTIONS = 12<br/>Dynamic color generation<br/>Git theme integration
-    Note right of Renderer: Layout Parameters:<br/>Cytoscape configuration<br/>coseBilkent settings<br/>Node spacing rules 

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

@@ -79,7 +79,6 @@ To add an integration to this list, see the [Integrations - create page](./integ
 LLM integrations to create mermaid diagrams using AI from text descriptions.
 
 - [HueHive - Create mermaid diagrams with text](https://huehive.co/tools/diagrams)
-- [MCP Server Mermaid](https://github.com/hustcc/mcp-mermaid) - Generate mermaid diagram and chart with AI MCP dynamically.
 
 ### CRM/ERP
 
@@ -99,7 +98,6 @@ Blogging frameworks and platforms
   - [Mermaid](https://nextra.site/docs/guide/mermaid)
 - [WordPress](https://wordpress.org)
   - [MerPRess](https://wordpress.org/plugins/merpress/)
-  - [WP Documentation](https://wordpress.org/themes/wp-documentation/)
 
 ### CMS/ECM
 

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

@@ -10,7 +10,9 @@ Applications that support Mermaid files [SHOULD](https://datatracker.ietf.org/do
 
 ### MIME Type
 
-The recommended [MIME type](https://www.iana.org/assignments/media-types/media-types.xhtml) for Mermaid media is [`text/vnd.mermaid`](https://www.iana.org/assignments/media-types/application/vnd.mermaid).
+The recommended [MIME type](https://www.iana.org/assignments/media-types/media-types.xhtml) for Mermaid media is `text/vnd.mermaid`.
+
+Currently pending [IANA](https://www.iana.org/) recognition.
 
 ## Showcase
 

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

@@ -1135,46 +1135,15 @@ It is possible to style the type of curve used for lines between items, if the d
 Available curve styles include `basis`, `bumpX`, `bumpY`, `cardinal`, `catmullRom`, `linear`, `monotoneX`, `monotoneY`,
 `natural`, `step`, `stepAfter`, and `stepBefore`.
 
-For a full list of available curves, including an explanation of custom curves, refer to
-the [Shapes](https://d3js.org/d3-shape/curve) documentation in the [d3-shape](https://github.com/d3/d3-shape/) project.
-
-Line styling can be achieved in two ways:
-
-1. Change the curve style of all the lines
-2. Change the curve style of a particular line
-
-#### Diagram level curve style
-
 In this example, a left-to-right graph uses the `stepBefore` curve style:
 
 ```
----
-config:
-  flowchart:
-    curve: stepBefore
----
+%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
 graph LR
 ```
 
-#### Edge level curve style using Edge IDs (v<MERMAID_RELEASE_VERSION>+)
-
-You can assign IDs to [edges](#attaching-an-id-to-edges). After assigning an ID you can modify the line style by modifying the edge's `curve` property using the following syntax:
-
-```mermaid
-flowchart LR
-    A e1@==> B
-    A e2@--> C
-    e1@{ curve: linear }
-    e2@{ curve: natural }
-```
-
-```info
-Any edge curve style modified at the edge level overrides the diagram level style.
-```
-
-```info
-If the same edge is modified multiple times the last modification will be rendered.
-```
+For a full list of available curves, including an explanation of custom curves, refer to
+the [Shapes](https://d3js.org/d3-shape/curve) documentation in the [d3-shape](https://github.com/d3/d3-shape/) project.
 
 ### Styling a node
 

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

@@ -46,126 +46,6 @@ sequenceDiagram
     Bob->>Alice: Hi Alice
 ```
 
-### Boundary
-
-If you want to use the boundary symbol for a participant, use the `boundary` statement as shown below.
-
-```mermaid-example
-sequenceDiagram
-    boundary theBoundary
-    participant Bob
-    theBoundary->>Bob: Request from boundary
-    Bob->>theBoundary: Response to boundary
-```
-
-```mermaid
-sequenceDiagram
-    boundary theBoundary
-    participant Bob
-    theBoundary->>Bob: Request from boundary
-    Bob->>theBoundary: Response to boundary
-```
-
-### Control
-
-If you want to use the control symbol for a participant, use the `control` statement as shown below.
-
-```mermaid-example
-sequenceDiagram
-    control theControl
-    participant Alice
-    theControl->>Alice: Control request
-    Alice->>theControl: Control response
-```
-
-```mermaid
-sequenceDiagram
-    control theControl
-    participant Alice
-    theControl->>Alice: Control request
-    Alice->>theControl: Control response
-```
-
-### Entity
-
-If you want to use the entity symbol for a participant, use the `entity` statement as shown below.
-
-```mermaid-example
-sequenceDiagram
-    entity theEntity
-    participant Bob
-    theEntity->>Bob: Entity request
-    Bob->>theEntity: Entity response
-```
-
-```mermaid
-sequenceDiagram
-    entity theEntity
-    participant Bob
-    theEntity->>Bob: Entity request
-    Bob->>theEntity: Entity response
-```
-
-### Database
-
-If you want to use the database symbol for a participant, use the `database` statement as shown below.
-
-```mermaid-example
-sequenceDiagram
-    database theDb
-    participant Alice
-    theDb->>Alice: DB query
-    Alice->>theDb: DB result
-```
-
-```mermaid
-sequenceDiagram
-    database theDb
-    participant Alice
-    theDb->>Alice: DB query
-    Alice->>theDb: DB result
-```
-
-### Collections
-
-If you want to use the collections symbol for a participant, use the `collections` statement as shown below.
-
-```mermaid-example
-sequenceDiagram
-    collections theCollection
-    participant Bob
-    theCollection->>Bob: Collections request
-    Bob->>theCollection: Collections response
-```
-
-```mermaid
-sequenceDiagram
-    collections theCollection
-    participant Bob
-    theCollection->>Bob: Collections request
-    Bob->>theCollection: Collections response
-```
-
-### Queue
-
-If you want to use the queue symbol for a participant, use the `queue` statement as shown below.
-
-```mermaid-example
-sequenceDiagram
-    queue theQueue
-    participant Alice
-    theQueue->>Alice: Queue message
-    Alice->>theQueue: Queue
-```
-
-```mermaid
-sequenceDiagram
-    queue theQueue
-    participant Alice
-    theQueue->>Alice: Queue message
-    Alice->>theQueue: Queue
-```
-
 ### Aliases
 
 The actor can have a convenient identifier and a descriptive label.

packages/mermaid/src/mermaidAPI.spec.ts

@@ -1,5 +1,40 @@
 import { assert, beforeEach, describe, expect, it, vi } from 'vitest';
 
+// -------------------------------------
+//  Mocks and mocking
+
+import { MockedD3 } from './tests/MockedD3.js';
+
+// Note: If running this directly from within an IDE, the mocks directory must be at packages/mermaid/mocks
+vi.mock('d3');
+vi.mock('dagre-d3');
+
+// mermaidAPI.spec.ts:
+import * as accessibility from './accessibility.js'; // Import it this way so we can use spyOn(accessibility,...)
+vi.mock('./accessibility.js', () => ({
+  setA11yDiagramInfo: vi.fn(),
+  addSVGa11yTitleDescription: vi.fn(),
+}));
+
+// Mock the renderers specifically so we can test render(). Need to mock draw() for each renderer
+vi.mock('./diagrams/c4/c4Renderer.js');
+vi.mock('./diagrams/class/classRenderer.js');
+vi.mock('./diagrams/class/classRenderer-v2.js');
+vi.mock('./diagrams/er/erRenderer.js');
+vi.mock('./diagrams/flowchart/flowRenderer-v2.js');
+vi.mock('./diagrams/git/gitGraphRenderer.js');
+vi.mock('./diagrams/gantt/ganttRenderer.js');
+vi.mock('./diagrams/user-journey/journeyRenderer.js');
+vi.mock('./diagrams/pie/pieRenderer.js');
+vi.mock('./diagrams/packet/renderer.js');
+vi.mock('./diagrams/xychart/xychartRenderer.js');
+vi.mock('./diagrams/requirement/requirementRenderer.js');
+vi.mock('./diagrams/sequence/sequenceRenderer.js');
+vi.mock('./diagrams/radar/renderer.js');
+vi.mock('./diagrams/architecture/architectureRenderer.js');
+
+// -------------------------------------
+
 import assignWithDepth from './assignWithDepth.js';
 import type { MermaidConfig } from './config.type.js';
 import mermaid from './mermaid.js';
@@ -40,9 +75,6 @@ import { SequenceDB } from './diagrams/sequence/sequenceDb.js';
 import { decodeEntities, encodeEntities } from './utils.js';
 import { toBase64 } from './utils/base64.js';
 import { StateDB } from './diagrams/state/stateDb.js';
-import { ensureNodeFromSelector, jsdomIt } from './tests/util.js';
-import { select } from 'd3';
-import { JSDOM } from 'jsdom';
 
 /**
  * @see https://vitest.dev/guide/mocking.html Mock part of a module
@@ -193,49 +225,63 @@ describe('mermaidAPI', () => {
     });
   });
 
+  const fauxParentNode = new MockedD3();
+  const fauxEnclosingDiv = new MockedD3();
+  const fauxSvgNode = new MockedD3();
+
   describe('appendDivSvgG', () => {
+    const fauxGNode = new MockedD3();
+    const parent_append_spy = vi.spyOn(fauxParentNode, 'append').mockReturnValue(fauxEnclosingDiv);
+    const div_append_spy = vi.spyOn(fauxEnclosingDiv, 'append').mockReturnValue(fauxSvgNode);
+    // @ts-ignore @todo TODO why is this getting a type error?
+    const div_attr_spy = vi.spyOn(fauxEnclosingDiv, 'attr').mockReturnValue(fauxEnclosingDiv);
+    const svg_append_spy = vi.spyOn(fauxSvgNode, 'append').mockReturnValue(fauxGNode);
+    // @ts-ignore @todo TODO why is this getting a type error?
+    const svg_attr_spy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
+
     // cspell:ignore dthe
 
-    jsdomIt('appends a div node', ({ body }) => {
-      appendDivSvgG(body, 'theId', 'dtheId');
-      const divNode = ensureNodeFromSelector('div');
-      const svgNode = ensureNodeFromSelector('svg', divNode);
-      ensureNodeFromSelector('g', svgNode);
+    it('appends a div node', () => {
+      appendDivSvgG(fauxParentNode, 'theId', 'dtheId');
+      expect(parent_append_spy).toHaveBeenCalledWith('div');
+      expect(div_append_spy).toHaveBeenCalledWith('svg');
     });
-    jsdomIt('the id for the div is "d" with the id appended', ({ body }) => {
-      appendDivSvgG(body, 'theId', 'dtheId');
-      const divNode = ensureNodeFromSelector('div');
-      expect(divNode?.getAttribute('id')).toBe('dtheId');
+    it('the id for the div is "d" with the id appended', () => {
+      appendDivSvgG(fauxParentNode, 'theId', 'dtheId');
+      expect(div_attr_spy).toHaveBeenCalledWith('id', 'dtheId');
     });
 
-    jsdomIt('sets the style for the div if one is given', ({ body }) => {
-      appendDivSvgG(body, 'theId', 'dtheId', 'given div style', 'given x link');
-      const divNode = ensureNodeFromSelector('div');
-      expect(divNode?.getAttribute('style')).toBe('given div style');
+    it('sets the style for the div if one is given', () => {
+      appendDivSvgG(fauxParentNode, 'theId', 'dtheId', 'given div style', 'given x link');
+      expect(div_attr_spy).toHaveBeenCalledWith('style', 'given div style');
     });
 
-    jsdomIt('sets the svg width to 100%', ({ body }) => {
-      appendDivSvgG(body, 'theId', 'dtheId');
-      const svgNode = ensureNodeFromSelector('div > svg');
-      expect(svgNode.getAttribute('width')).toBe('100%');
+    it('appends a svg node to the div node', () => {
+      appendDivSvgG(fauxParentNode, 'theId', 'dtheId');
+      expect(div_attr_spy).toHaveBeenCalledWith('id', 'dtheId');
     });
-    jsdomIt('the svg id is the id', ({ body }) => {
-      appendDivSvgG(body, 'theId', 'dtheId');
-      const svgNode = ensureNodeFromSelector('div > svg');
-      expect(svgNode.getAttribute('id')).toBe('theId');
+    it('sets the svg width to 100%', () => {
+      appendDivSvgG(fauxParentNode, 'theId', 'dtheId');
+      expect(svg_attr_spy).toHaveBeenCalledWith('width', '100%');
     });
-    jsdomIt('the svg xml namespace is the 2000 standard', ({ body }) => {
-      appendDivSvgG(body, 'theId', 'dtheId');
-      const svgNode = ensureNodeFromSelector('div > svg');
-      expect(svgNode.getAttribute('xmlns')).toBe('http://www.w3.org/2000/svg');
+    it('the svg id is the id', () => {
+      appendDivSvgG(fauxParentNode, 'theId', 'dtheId');
+      expect(svg_attr_spy).toHaveBeenCalledWith('id', 'theId');
     });
-    jsdomIt('sets the  svg xlink if one is given', ({ body }) => {
-      appendDivSvgG(body, 'theId', 'dtheId', 'div style', 'given x link');
-      const svgNode = ensureNodeFromSelector('div > svg');
-      expect(svgNode.getAttribute('xmlns:xlink')).toBe('given x link');
+    it('the svg xml namespace is the 2000 standard', () => {
+      appendDivSvgG(fauxParentNode, 'theId', 'dtheId');
+      expect(svg_attr_spy).toHaveBeenCalledWith('xmlns', 'http://www.w3.org/2000/svg');
     });
-    jsdomIt('returns the given parentRoot d3 nodes', ({ body }) => {
-      expect(appendDivSvgG(body, 'theId', 'dtheId')).toEqual(body);
+    it('sets the  svg xlink if one is given', () => {
+      appendDivSvgG(fauxParentNode, 'theId', 'dtheId', 'div style', 'given x link');
+      expect(svg_attr_spy).toHaveBeenCalledWith('xmlns:xlink', 'given x link');
+    });
+    it('appends a g (group) node to the svg node', () => {
+      appendDivSvgG(fauxParentNode, 'theId', 'dtheId');
+      expect(svg_append_spy).toHaveBeenCalledWith('g');
+    });
+    it('returns the given parentRoot d3 nodes', () => {
+      expect(appendDivSvgG(fauxParentNode, 'theId', 'dtheId')).toEqual(fauxParentNode);
     });
   });
 
@@ -736,9 +782,9 @@ graph TD;A--x|text including URL space|B;`)
     // render(id, text, cb?, svgContainingElement?)
 
     // Test all diagram types.  Note that old flowchart 'graph' type will invoke the flowRenderer-v2. (See the flowchart v2 detector.)
-    // We have to have both the specific textDiagramType and the expected type name because the expected type may be slightly different from what is put in the diagram text (ex: in -v2 diagrams)
+    // We have to have both the specific textDiagramType and the expected type name because the expected type may be slightly different than was is put in the diagram text (ex: in -v2 diagrams)
     const diagramTypesAndExpectations = [
-      // { textDiagramType: 'C4Context', expectedType: 'c4' }, TODO : setAccTitle not called in C4 jison parser
+      { textDiagramType: 'C4Context', expectedType: 'c4' },
       { textDiagramType: 'classDiagram', expectedType: 'class' },
       { textDiagramType: 'classDiagram-v2', expectedType: 'classDiagram' },
       { textDiagramType: 'erDiagram', expectedType: 'er' },
@@ -750,11 +796,7 @@ graph TD;A--x|text including URL space|B;`)
       { textDiagramType: 'pie', expectedType: 'pie' },
       { textDiagramType: 'packet', expectedType: 'packet' },
       { textDiagramType: 'packet-beta', expectedType: 'packet' },
-      {
-        textDiagramType: 'xychart-beta',
-        expectedType: 'xychart',
-        content: 'x-axis "Attempts" 10000 --> 10000\ny-axis "Passing tests" 1 --> 1\nbar [1]',
-      },
+      { textDiagramType: 'xychart-beta', expectedType: 'xychart' },
       { textDiagramType: 'requirementDiagram', expectedType: 'requirement' },
       { textDiagramType: 'sequenceDiagram', expectedType: 'sequence' },
       { textDiagramType: 'stateDiagram-v2', expectedType: 'stateDiagram' },
@@ -770,25 +812,20 @@ graph TD;A--x|text including URL space|B;`)
       diagramTypesAndExpectations.forEach((testedDiagram) => {
         describe(`${testedDiagram.textDiagramType}`, () => {
           const diagramType = testedDiagram.textDiagramType;
-          const content = testedDiagram.content || '';
-          const diagramText = `${diagramType}\n accTitle: ${a11yTitle}\n accDescr: ${a11yDescr}\n ${content}`;
+          const diagramText = `${diagramType}\n accTitle: ${a11yTitle}\n accDescr: ${a11yDescr}\n`;
           const expectedDiagramType = testedDiagram.expectedType;
 
-          jsdomIt(
-            'should set aria-roledescription to the diagram type AND should call addSVGa11yTitleDescription',
-            async () => {
-              const { svg } = await mermaidAPI.render(id, diagramText);
-              const dom = new JSDOM(svg);
-              const svgNode = ensureNodeFromSelector('svg', dom.window.document);
-              const descNode = ensureNodeFromSelector('desc', svgNode);
-              const titleNode = ensureNodeFromSelector('title', svgNode);
-              expect(svgNode.getAttribute('aria-roledescription')).toBe(expectedDiagramType);
-              expect(svgNode.getAttribute('aria-describedby')).toBe(`chart-desc-${id}`);
-              expect(descNode.getAttribute('id')).toBe(`chart-desc-${id}`);
-              expect(descNode.innerHTML).toBe(a11yDescr);
-              expect(titleNode.innerHTML).toBe(a11yTitle);
-            }
-          );
+          it('should set aria-roledescription to the diagram type AND should call addSVGa11yTitleDescription', async () => {
+            const a11yDiagramInfo_spy = vi.spyOn(accessibility, 'setA11yDiagramInfo');
+            const a11yTitleDesc_spy = vi.spyOn(accessibility, 'addSVGa11yTitleDescription');
+            const result = await mermaidAPI.render(id, diagramText);
+            expect(result.diagramType).toBe(expectedDiagramType);
+            expect(a11yDiagramInfo_spy).toHaveBeenCalledWith(
+              expect.anything(),
+              expectedDiagramType
+            );
+            expect(a11yTitleDesc_spy).toHaveBeenCalled();
+          });
         });
       });
     });

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

@@ -54,7 +54,7 @@ export async function requirementBox<T extends SVGGraphicsElement>(
   if (isRequirementNode) {
     const idHeight = await addText(
       shapeSvg,
-      `${requirementNode.requirementId ? `ID: ${requirementNode.requirementId}` : ''}`,
+      `${requirementNode.requirementId ? `id: ${requirementNode.requirementId}` : ''}`,
       accumulativeHeight,
       node.labelStyle
     );

packages/mermaid/src/tests/MockedD3.ts

@@ -0,0 +1,150 @@
+/**
+ * This is a mocked/stubbed version of the d3 Selection type. Each of the main functions are all
+ * mocked (via vi.fn()) so you can track if they have been called, etc.
+ *
+ * Note that node() returns a HTML Element with tag 'svg'. It is an empty element (no innerHTML, no children, etc).
+ * This potentially allows testing of mermaidAPI render().
+ */
+export class MockedD3 {
+  public attribs = new Map<string, string>();
+  public id: string | undefined = '';
+  _children: MockedD3[] = [];
+
+  _containingHTMLdoc = new Document();
+
+  constructor(givenId = 'mock-id') {
+    this.id = givenId;
+  }
+
+  /** Helpful utility during development/debugging. This is not a real d3 function */
+  public listChildren(): string {
+    return this._children
+      .map((child) => {
+        return child.id;
+      })
+      .join(', ');
+  }
+
+  select = vi.fn().mockImplementation(({ select_str = '' }): MockedD3 => {
+    // Get the id from an argument string. if it is of the form [id='some-id'], strip off the
+    // surrounding id[..]
+    const stripSurroundRegexp = /\[id='(.*)']/;
+    const matchedSurrounds = select_str.match(stripSurroundRegexp);
+    const cleanId = matchedSurrounds ? matchedSurrounds[1] : select_str;
+    return new MockedD3(cleanId);
+  });
+
+  // This has the same implementation as select(). (It calls it.)
+  selectAll = vi.fn().mockImplementation(({ select_str = '' }): MockedD3 => {
+    return this.select(select_str);
+  });
+
+  append = vi.fn().mockImplementation(function (
+    this: MockedD3,
+    type: string,
+    id = '' + '-appended'
+  ): MockedD3 {
+    const newMock = new MockedD3(id);
+    newMock.attribs.set('type', type);
+    this._children.push(newMock);
+    return newMock;
+  });
+
+  // NOTE: The d3 implementation allows for a selector ('beforeSelector' arg below).
+  //   With this mocked implementation, we assume it will always refer to a node id
+  //   and will always be of the form "#[id of the node to insert before]".
+  //   To keep this simple, any leading '#' is removed and the resulting string is the node id searched.
+  insert = (type: string, beforeSelector?: string, id = this.id + '-inserted'): MockedD3 => {
+    const newMock = new MockedD3(id);
+    newMock.attribs.set('type', type);
+    if (beforeSelector === undefined) {
+      this._children.push(newMock);
+    } else {
+      const idOnly = beforeSelector.startsWith('#') ? beforeSelector.substring(1) : beforeSelector;
+      const foundIndex = this._children.findIndex((child) => child.id === idOnly);
+      if (foundIndex < 0) {
+        this._children.push(newMock);
+      } else {
+        this._children.splice(foundIndex, 0, newMock);
+      }
+    }
+    return newMock;
+  };
+
+  attr(attrName: string): undefined | string;
+  attr(attrName: string, attrValue: string): MockedD3;
+  attr(attrName: string, attrValue?: string): undefined | string | MockedD3 {
+    if (arguments.length === 1) {
+      return this.attribs.get(attrName);
+    } else {
+      if (attrName === 'id') {
+        this.id = attrValue; // also set the id explicitly
+      }
+      if (attrValue !== undefined) {
+        this.attribs.set(attrName, attrValue);
+      }
+      return this;
+    }
+  }
+
+  public lower(attrValue = '') {
+    this.attribs.set('lower', attrValue);
+    return this;
+  }
+  public style(attrValue = '') {
+    this.attribs.set('style', attrValue);
+    return this;
+  }
+  public text(attrValue = '') {
+    this.attribs.set('text', attrValue);
+    return this;
+  }
+
+  // NOTE: Returns a HTML Element with tag 'svg' that has _another_ 'svg' element child.
+  // This allows different tests to succeed -- some need a top level 'svg' and some need a 'svg' element to be the firstChild
+  // Real implementation returns an HTML Element
+  public node = vi.fn().mockImplementation(() => {
+    //create a top level svg element
+    const topElem = this._containingHTMLdoc.createElement('svg');
+    //@ts-ignore - this is a mock SVG element
+    topElem.getBBox = this.getBBox;
+    const elem_svgChild = this._containingHTMLdoc.createElement('svg'); // another svg element
+    topElem.appendChild(elem_svgChild);
+    return topElem;
+  });
+
+  // TODO Is this correct? shouldn't it return a list of HTML Elements?
+  nodes = vi.fn().mockImplementation(function (this: MockedD3): MockedD3[] {
+    return this._children;
+  });
+
+  // This will try to use attrs that have been set.
+  getBBox = () => {
+    const x = this.attribs.has('x') ? this.attribs.get('x') : 20;
+    const y = this.attribs.has('y') ? this.attribs.get('y') : 30;
+    const width = this.attribs.has('width') ? this.attribs.get('width') : 140;
+    const height = this.attribs.has('height') ? this.attribs.get('height') : 250;
+    return {
+      x: x,
+      y: y,
+      width: width,
+      height: height,
+    };
+  };
+
+  // --------------------------------------------------------------------------------
+  // The following functions are here for completeness.  They simply return a vi.fn()
+
+  insertBefore = vi.fn();
+  curveBasis = vi.fn();
+  curveBasisClosed = vi.fn();
+  curveBasisOpen = vi.fn();
+  curveLinear = vi.fn();
+  curveLinearClosed = vi.fn();
+  curveMonotoneX = vi.fn();
+  curveMonotoneY = vi.fn();
+  curveNatural = vi.fn();
+  curveStep = vi.fn();
+  curveStepAfter = vi.fn();
+  curveStepBefore = vi.fn();
+}

packages/mermaid/src/tests/setup.ts

@@ -0,0 +1,3 @@
+import { vi } from 'vitest';
+vi.mock('d3');
+vi.mock('dagre-d3-es');

packages/mermaid/src/tests/util.ts

@@ -26,10 +26,6 @@ ${'2w'}   | ${dayjs.duration(2, 'w')}
 ```
 */
 
-import { JSDOM } from 'jsdom';
-import { expect, it } from 'vitest';
-import { select, type Selection } from 'd3';
-
 export const convert = (template: TemplateStringsArray, ...params: unknown[]) => {
   const header = template[0]
     .trim()
@@ -46,83 +42,3 @@ export const convert = (template: TemplateStringsArray, ...params: unknown[]) =>
   }
   return out;
 };
-
-/**
- * Getting rid of linter issues to make {@link jsdomIt} work.
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function setOnProtectedConstant(object: any, key: string, value: unknown): void {
-  object[key] = value;
-}
-
-export const MOCKED_BBOX = {
-  x: 0,
-  y: 0,
-  width: 666,
-  height: 666,
-};
-
-interface JsdomItInput {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  body: Selection<HTMLBodyElement, never, HTMLElement, any>; // The `any` here comes from D3'as API.
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  svg: Selection<SVGSVGElement, never, HTMLElement, any>; // The `any` here comes from D3'as API.
-}
-
-/**
- * Test method borrowed from d3 : https://github.com/d3/d3-selection/blob/v3.0.0/test/jsdom.js
- *
- * Fools d3 into thinking it's working in a browser with a real DOM.
- *
- * The DOM is actually an instance of JSDom with monkey-patches for DOM methods that require a
- * rendering engine.
- *
- * The resulting environment is capable of rendering SVGs with the caveat that layouts are
- * completely screwed.
- *
- * This makes it possible to make structural tests instead of mocking everything.
- */
-export function jsdomIt(message: string, run: (input: JsdomItInput) => void | Promise<void>) {
-  return it(message, async (): Promise<void> => {
-    const oldWindow = global.window;
-    const oldDocument = global.document;
-
-    try {
-      const baseHtml = `
-        <html lang="en">
-          <body id="cy">
-            <svg id="svg"/>
-          </body>
-        </html>
-      `;
-      const dom = new JSDOM(baseHtml, {
-        resources: 'usable',
-        beforeParse(_window) {
-          // Mocks DOM functions that require rendering, JSDOM doesn't
-          setOnProtectedConstant(_window.Element.prototype, 'getBBox', () => MOCKED_BBOX);
-          setOnProtectedConstant(_window.Element.prototype, 'getComputedTextLength', () => 200);
-        },
-      });
-      setOnProtectedConstant(global, 'window', dom.window); // Fool D3 into thinking it's in a browser
-      setOnProtectedConstant(global, 'document', dom.window.document); // Fool D3 into thinking it's in a browser
-      setOnProtectedConstant(global, 'MutationObserver', undefined); // JSDOM doesn't like cytoscape elements
-
-      const body = select<HTMLBodyElement, never>('body');
-      const svg = select<SVGSVGElement, never>('svg');
-      await run({ body, svg });
-    } finally {
-      setOnProtectedConstant(global, 'window', oldWindow);
-      setOnProtectedConstant(global, 'document', oldDocument);
-    }
-  });
-}
-
-/**
- * Retrieves the node from its parent with ParentNode#querySelector,
- * then checks that it exists before returning it.
- */
-export function ensureNodeFromSelector(selector: string, parent: ParentNode = document): Element {
-  const node = parent.querySelector(selector);
-  expect(node).not.toBeNull();
-  return node!;
-}