Merge pull request #6161 from mermaid-js/saurabh/refactor/convert-flowDb-to-class

Refactor: Change flowDB to class based architecture.
2025-11-18 11:44:07 +01:00 · 2025-01-22 22:41:52 +01:00
parent e9e663ffa3 1575a93136
commit 5120ed09ab
22 changed files with 1197 additions and 1130 deletions
--- a/.changeset/new-kiwis-listen.md
+++ b/.changeset/new-kiwis-listen.md
@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: `mermaidAPI.getDiagramFromText()` now returns a new different db for each flowchart
--- a/cypress/platform/saurabh.html
+++ b/cypress/platform/saurabh.html
@@ -62,56 +62,23 @@

  <body style="display: flex; gap: 2rem; flex-direction: row">
    <pre id="diagram4" class="mermaid">
-      flowchart LR
-      A@{ icon: "fa:window-minimize", form: circle }
-      E@{ icon: "fa:window-minimize", form: circle }
-      B@{ icon: "fa:bell", form: circle }
-      B2@{ icon: "fa:bell", form: circle }
-      C@{ icon: "fa:address-book",  form: square  }
-      D@{ icon: "fa:star-half",  form: square  }
-      A --> E
-      B --> B2
-
+      flowchart
+          A --> A
+          subgraph B
+            B1 --> B1
+          end
+          subgraph C
+            subgraph C1
+              C2 --> C2
+              subgraph D
+                D1 --> D1
+              end
+              D --> D
+            end
+            C1 --> C1
+          end

    </pre>
-    <pre id="diagram4" class="mermaid2">
-      flowchart TB
-       A --test2--> B2@{ icon: "fa:bell", form: "rounded", label: "B2 aiduaid uyawduad uaduabd uyduadb", pos: "b" }
-       B2 --test--> C
-       D --> B2 --> E
-       style B2 fill:#f9f,stroke:#333,stroke-width:4px
-  </pre
-    >
-    <pre id="diagram43" class="mermaid2">
-      flowchart BT
-       A --test2--> B2@{ icon: "fa:bell", form: "square", label: "B2", pos: "t", h: 40, w: 30 }
-       B2 --test--> C
-       D --> B2 --> E
-  </pre
-    >
-    <pre id="diagram4" class="mermaid2">
-      flowchart BT
-       A --test2--> B2@{ icon: "fa:bell", label: "B2 awiugdawu uydgayuiwd wuydguy", pos: "b", h: 40, w: 30 }
-       B2 --test--> C
-  </pre
-    >
-    <pre id="diagram43" class="mermaid2">
-      flowchart BT
-       A --test2--> B2@{ icon: "fa:bell", label: "B2 dawuygd ayuwgd uy", pos: "t", h: 40, w: 30 }
-       B2 --test--> C
-  </pre
-    >
-    <pre id="diagram6" class="mermaid2">
-      flowchart TB
-       A --> B2@{ icon: "fa:bell", form: "circle", label: "test augfuyfavf ydvaubfuac", pos: "t", w: 200, h: 100 } --> C
-  </pre
-    >
-    <pre id="diagram6" class="mermaid2">
-      flowchart TB
-       A --> B2@{ icon: "fa:bell", form: "circle", label: "test augfuyfavf ydvaubfuac", pos: "b", w: 200, h: 100 } --> C
-       D --> B2 --> E
-  </pre
-    >
    <script type="module">
      import mermaid from './mermaid.esm.mjs';
      import layouts from './mermaid-layout-elk.esm.mjs';
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.spec.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.spec.ts
@@ -1,9 +1,11 @@
-import flowDb from './flowDb.js';
+import { FlowDB } from './flowDb.js';
 import type { FlowSubGraph } from './types.js';

 describe('flow db subgraphs', () => {
+  let flowDb: FlowDB;
  let subgraphs: FlowSubGraph[];
  beforeEach(() => {
+    flowDb = new FlowDB();
    subgraphs = [
      { nodes: ['a', 'b', 'c', 'e'] },
      { nodes: ['f', 'g', 'h'] },
@@ -44,8 +46,9 @@ describe('flow db subgraphs', () => {
 });

 describe('flow db addClass', () => {
+  let flowDb: FlowDB;
  beforeEach(() => {
-    flowDb.clear();
+    flowDb = new FlowDB();
  });
  it('should detect many classes', () => {
    flowDb.addClass('a,b', ['stroke-width: 8px']);
@@ -65,3 +68,33 @@ describe('flow db addClass', () => {
    expect(classes.get('a')?.styles).toEqual(['stroke-width: 8px']);
  });
 });
+
+describe('flow db class', () => {
+  let flowDb: FlowDB;
+  beforeEach(() => {
+    flowDb = new FlowDB();
+  });
+  // This is to ensure that functions used in flow JISON are exposed as function from FlowDB
+  it('should have functions used in flow JISON as own property', () => {
+    const functionsUsedInParser = [
+      'setDirection',
+      'addSubGraph',
+      'setAccTitle',
+      'setAccDescription',
+      'addVertex',
+      'addLink',
+      'setClass',
+      'destructLink',
+      'addClass',
+      'setClickEvent',
+      'setTooltip',
+      'setLink',
+      'updateLink',
+      'updateLinkInterpolate',
+    ] as const satisfies (keyof FlowDB)[];
+
+    for (const fun of functionsUsedInParser) {
+      expect(Object.hasOwn(flowDb, fun)).toBe(true);
+    }
+  });
+});
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.ts
--- a/packages/mermaid/src/diagrams/flowchart/flowDiagram.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDiagram.ts
@@ -1,6 +1,6 @@
 import type { MermaidConfig } from '../../config.type.js';
 import { setConfig } from '../../diagram-api/diagramAPI.js';
-import flowDb from './flowDb.js';
+import { FlowDB } from './flowDb.js';
 import renderer from './flowRenderer-v3-unified.js';
 // @ts-ignore: JISON doesn't support types
 //import flowParser from './parser/flow.jison';
@@ -9,7 +9,9 @@ import flowStyles from './styles.js';

 export const diagram = {
  parser: flowParser,
-  db: flowDb,
+  get db() {
+    return new FlowDB();
+  },
  renderer,
  styles: flowStyles,
  init: (cnf: MermaidConfig) => {
@@ -21,7 +23,5 @@ export const diagram = {
    }
    cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
    setConfig({ flowchart: { arrowMarkerAbsolute: cnf.arrowMarkerAbsolute } });
-    flowDb.clear();
-    flowDb.setGen('gen-2');
  },
 };
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts
@@ -7,7 +7,6 @@ import { getRegisteredLayoutAlgorithm, render } from '../../rendering-util/rende
 import { setupViewPortForSVG } from '../../rendering-util/setupViewPortForSVG.js';
 import type { LayoutData } from '../../rendering-util/types.js';
 import utils from '../../utils.js';
-import { getDirection } from './flowDb.js';

 export const getClasses = function (
  text: string,
@@ -37,7 +36,7 @@ export const draw = async function (text: string, id: string, _version: string,
  log.debug('Data: ', data4Layout);
  // Create the root SVG
  const svg = getDiagramElement(id, securityLevel);
-  const direction = getDirection();
+  const direction = diag.db.getDirection();

  data4Layout.type = diag.type;
  data4Layout.layoutAlgorithm = getRegisteredLayoutAlgorithm(layout);
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-arrows.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-arrows.spec.js
@@ -1,4 +1,4 @@
-import flowDb from '../flowDb.js';
+import { FlowDB } from '../flowDb.js';
 import flow from './flowParser.ts';
 import { setConfig } from '../../../config.js';

@@ -8,7 +8,7 @@ setConfig({

 describe('[Arrows] when parsing', () => {
  beforeEach(function () {
-    flow.parser.yy = flowDb;
+    flow.parser.yy = new FlowDB();
    flow.parser.yy.clear();
  });

--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-comments.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-comments.spec.js
@@ -1,4 +1,4 @@
-import flowDb from '../flowDb.js';
+import { FlowDB } from '../flowDb.js';
 import flow from './flowParser.ts';
 import { setConfig } from '../../../config.js';
 import { cleanupComments } from '../../../diagram-api/comments.js';
@@ -9,7 +9,7 @@ setConfig({

 describe('[Comments] when parsing', () => {
  beforeEach(function () {
-    flow.parser.yy = flowDb;
+    flow.parser.yy = new FlowDB();
    flow.parser.yy.clear();
  });

--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-direction.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-direction.spec.js
@@ -1,4 +1,4 @@
-import flowDb from '../flowDb.js';
+import { FlowDB } from '../flowDb.js';
 import flow from './flowParser.ts';
 import { setConfig } from '../../../config.js';

@@ -8,7 +8,7 @@ setConfig({

 describe('when parsing directions', function () {
  beforeEach(function () {
-    flow.parser.yy = flowDb;
+    flow.parser.yy = new FlowDB();
    flow.parser.yy.clear();
    flow.parser.yy.setGen('gen-2');
  });
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-edges.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-edges.spec.js
@@ -1,4 +1,4 @@
-import flowDb from '../flowDb.js';
+import { FlowDB } from '../flowDb.js';
 import flow from './flowParser.ts';
 import { setConfig } from '../../../config.js';

@@ -63,7 +63,7 @@ const regularEdges = [

 describe('[Edges] when parsing', () => {
  beforeEach(function () {
-    flow.parser.yy = flowDb;
+    flow.parser.yy = new FlowDB();
    flow.parser.yy.clear();
  });

--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-huge.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-huge.spec.js
@@ -1,4 +1,4 @@
-import flowDb from '../flowDb.js';
+import { FlowDB } from '../flowDb.js';
 import flow from './flowParser.ts';
 import { setConfig } from '../../../config.js';

@@ -8,7 +8,7 @@ setConfig({

 describe('[Text] when parsing', () => {
  beforeEach(function () {
-    flow.parser.yy = flowDb;
+    flow.parser.yy = new FlowDB();
    flow.parser.yy.clear();
  });

--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-interactions.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-interactions.spec.js
@@ -1,4 +1,4 @@
-import flowDb from '../flowDb.js';
+import { FlowDB } from '../flowDb.js';
 import flow from './flowParser.ts';
 import { setConfig } from '../../../config.js';
 import { vi } from 'vitest';
@@ -9,7 +9,9 @@ setConfig({
 });

 describe('[Interactions] when parsing', () => {
+  let flowDb;
  beforeEach(function () {
+    flowDb = new FlowDB();
    flow.parser.yy = flowDb;
    flow.parser.yy.clear();
  });
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-lines.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-lines.spec.js
@@ -1,4 +1,4 @@
-import flowDb from '../flowDb.js';
+import { FlowDB } from '../flowDb.js';
 import flow from './flowParser.ts';
 import { setConfig } from '../../../config.js';

@@ -8,7 +8,7 @@ setConfig({

 describe('[Lines] when parsing', () => {
  beforeEach(function () {
-    flow.parser.yy = flowDb;
+    flow.parser.yy = new FlowDB();
    flow.parser.yy.clear();
  });

--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-md-string.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-md-string.spec.js
@@ -1,4 +1,4 @@
-import flowDb from '../flowDb.js';
+import { FlowDB } from '../flowDb.js';
 import flow from './flowParser.ts';
 import { setConfig } from '../../../config.js';

@@ -8,7 +8,7 @@ setConfig({

 describe('parsing a flow chart with markdown strings', function () {
  beforeEach(function () {
-    flow.parser.yy = flowDb;
+    flow.parser.yy = new FlowDB();
    flow.parser.yy.clear();
  });

--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-node-data.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-node-data.spec.js
@@ -1,4 +1,4 @@
-import flowDb from '../flowDb.js';
+import { FlowDB } from '../flowDb.js';
 import flow from './flowParser.ts';
 import { setConfig } from '../../../config.js';

@@ -8,7 +8,7 @@ setConfig({

 describe('when parsing directions', function () {
  beforeEach(function () {
-    flow.parser.yy = flowDb;
+    flow.parser.yy = new FlowDB();
    flow.parser.yy.clear();
    flow.parser.yy.setGen('gen-2');
  });
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-singlenode.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-singlenode.spec.js
@@ -1,4 +1,4 @@
-import flowDb from '../flowDb.js';
+import { FlowDB } from '../flowDb.js';
 import flow from './flowParser.ts';
 import { setConfig } from '../../../config.js';

@@ -31,7 +31,7 @@ const specialChars = ['#', ':', '0', '&', ',', '*', '.', '\\', 'v', '-', '/', '_

 describe('[Singlenodes] when parsing', () => {
  beforeEach(function () {
-    flow.parser.yy = flowDb;
+    flow.parser.yy = new FlowDB();
    flow.parser.yy.clear();
  });

--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js
@@ -1,4 +1,4 @@
-import flowDb from '../flowDb.js';
+import { FlowDB } from '../flowDb.js';
 import flow from './flowParser.ts';
 import { setConfig } from '../../../config.js';

@@ -8,7 +8,7 @@ setConfig({

 describe('[Style] when parsing', () => {
  beforeEach(function () {
-    flow.parser.yy = flowDb;
+    flow.parser.yy = new FlowDB();
    flow.parser.yy.clear();
    flow.parser.yy.setGen('gen-2');
  });
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
@@ -1,4 +1,4 @@
-import flowDb from '../flowDb.js';
+import { FlowDB } from '../flowDb.js';
 import flow from './flowParser.ts';
 import { setConfig } from '../../../config.js';

@@ -8,7 +8,7 @@ setConfig({

 describe('[Text] when parsing', () => {
  beforeEach(function () {
-    flow.parser.yy = flowDb;
+    flow.parser.yy = new FlowDB();
    flow.parser.yy.clear();
  });

--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-vertice-chaining.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-vertice-chaining.spec.js
@@ -1,4 +1,4 @@
-import flowDb from '../flowDb.js';
+import { FlowDB } from '../flowDb.js';
 import flow from './flowParser.ts';
 import { setConfig } from '../../../config.js';

@@ -8,7 +8,7 @@ setConfig({

 describe('when parsing flowcharts', function () {
  beforeEach(function () {
-    flow.parser.yy = flowDb;
+    flow.parser.yy = new FlowDB();
    flow.parser.yy.clear();
    flow.parser.yy.setGen('gen-2');
  });
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.spec.js
@@ -1,4 +1,4 @@
-import flowDb from '../flowDb.js';
+import { FlowDB } from '../flowDb.js';
 import flow from './flowParser.ts';
 import { cleanupComments } from '../../../diagram-api/comments.js';
 import { setConfig } from '../../../config.js';
@@ -9,7 +9,7 @@ setConfig({

 describe('parsing a flow chart', function () {
  beforeEach(function () {
-    flow.parser.yy = flowDb;
+    flow.parser.yy = new FlowDB();
    flow.parser.yy.clear();
  });

--- a/packages/mermaid/src/diagrams/flowchart/parser/subgraph.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/subgraph.spec.js
@@ -1,4 +1,4 @@
-import flowDb from '../flowDb.js';
+import { FlowDB } from '../flowDb.js';
 import flow from './flowParser.ts';
 import { setConfig } from '../../../config.js';

@@ -8,7 +8,7 @@ setConfig({

 describe('when parsing subgraphs', function () {
  beforeEach(function () {
-    flow.parser.yy = flowDb;
+    flow.parser.yy = new FlowDB();
    flow.parser.yy.clear();
    flow.parser.yy.setGen('gen-2');
  });
--- a/packages/mermaid/src/mermaidAPI.spec.ts
+++ b/packages/mermaid/src/mermaidAPI.spec.ts
@@ -69,6 +69,7 @@ import { compile, serialize } from 'stylis';
 import { Diagram } from './Diagram.js';
 import { decodeEntities, encodeEntities } from './utils.js';
 import { toBase64 } from './utils/base64.js';
+import { FlowDB } from './diagrams/flowchart/flowDb.js';

 /**
 * @see https://vitest.dev/guide/mocking.html Mock part of a module
@@ -832,5 +833,57 @@ graph TD;A--x|text including URL space|B;`)
      expect(diagram).toBeInstanceOf(Diagram);
      expect(diagram.type).toBe('flowchart-v2');
    });
+
+    it('should not modify db when rendering different diagrams', async () => {
+      const flowDiagram1 = await mermaidAPI.getDiagramFromText(
+        `flowchart LR
+      A -- text --> B -- text2 --> C`
+      );
+      const flwoDiagram2 = await mermaidAPI.getDiagramFromText(
+        `flowchart TD
+      A -- text --> B -- text2 --> C`
+      );
+      // Since flowDiagram will return new Db object each time, we can compare the db to be different.
+      expect(flowDiagram1.db).not.toBe(flwoDiagram2.db);
+      assert(flowDiagram1.db instanceof FlowDB);
+      assert(flwoDiagram2.db instanceof FlowDB);
+      expect(flowDiagram1.db.getDirection()).not.toEqual(flwoDiagram2.db.getDirection());
+
+      const classDiagram1 = await mermaidAPI.getDiagramFromText(
+        `stateDiagram
+    [*] --> Still
+    Still --> [*]
+    Still --> Moving
+    Moving --> Still
+    Moving --> Crash
+    Crash --> [*]`
+      );
+      const classDiagram2 = await mermaidAPI.getDiagramFromText(
+        `stateDiagram
+    [*] --> Still
+    Still --> [*]
+    Still --> Moving
+    Moving --> Still
+    Moving --> Crash
+    Crash --> [*]`
+      );
+      // Since sequenceDiagram will return same Db object each time, we can compare the db to be same.
+      expect(classDiagram1.db).toBe(classDiagram2.db);
+    });
+  });
+
+  // Sequence Diagram currently uses a singleton DB, so this test will fail
+  it.fails('should not modify db when rendering different sequence diagrams', async () => {
+    const sequenceDiagram1 = await mermaidAPI.getDiagramFromText(
+      `sequenceDiagram
+    Alice->>Bob: Hello Bob, how are you?
+    Bob-->>John: How about you John?`
+    );
+    const sequenceDiagram2 = await mermaidAPI.getDiagramFromText(
+      `sequenceDiagram
+    Alice->>Bob: Hello Bob, how are you?
+    Bob-->>John: How about you John?`
+    );
+    expect(sequenceDiagram1.db).not.toBe(sequenceDiagram2.db);
  });
 });