convert stateDb to class, added test case.

packages/mermaid/src/diagrams/state/parser/state-parser.spec.js

@@ -1,4 +1,4 @@
-import stateDb from '../stateDb.js';
+import { StateDb } from '../stateDb.js';
 import stateDiagram from './stateDiagram.jison';
 import { setConfig } from '../../../config.js';
 
@@ -7,7 +7,9 @@ setConfig({
 });
 
 describe('state parser can parse...', () => {
+  let stateDb;
   beforeEach(function () {
+    stateDb = new StateDb();
     stateDiagram.parser.yy = stateDb;
     stateDiagram.parser.yy.clear();
   });

packages/mermaid/src/diagrams/state/parser/state-style.spec.js

@@ -1,4 +1,4 @@
-import stateDb from '../stateDb.js';
+import { StateDb } from '../stateDb.js';
 import stateDiagram from './stateDiagram.jison';
 import { setConfig } from '../../../config.js';
 
@@ -7,7 +7,9 @@ setConfig({
 });
 
 describe('ClassDefs and classes when parsing a State diagram', () => {
+  let stateDb;
   beforeEach(function () {
+    stateDb = new StateDb();
     stateDiagram.parser.yy = stateDb;
     stateDiagram.parser.yy.clear();
   });

packages/mermaid/src/diagrams/state/shapes.js

@@ -1,6 +1,6 @@
 import { line, curveBasis } from 'd3';
 import idCache from './id-cache.js';
-import stateDb from './stateDb.js';
+import { StateDb } from './stateDb.js';
 import utils from '../../utils.js';
 import common from '../common/common.js';
 import { getConfig } from '../../diagram-api/diagramAPI.js';
@@ -412,6 +412,7 @@ export const drawState = function (elem, stateDef) {
 
 let edgeCount = 0;
 export const drawEdge = function (elem, path, relation) {
+  const stateDb = new StateDb();
   const getRelationType = function (type) {
     switch (type) {
       case stateDb.relationType.AGGREGATION:

packages/mermaid/src/diagrams/state/stateDb.spec.js

@@ -1,8 +1,9 @@
-import stateDb from './stateDb.js';
+import { StateDb } from './stateDb.js';
 
 describe('State Diagram stateDb', () => {
+  let stateDb;
   beforeEach(() => {
-    stateDb.clear();
+    stateDb = new StateDb();
   });
 
   describe('addStyleClass', () => {
@@ -20,8 +21,9 @@ describe('State Diagram stateDb', () => {
   });
 
   describe('addDescription to a state', () => {
+    let stateDb;
     beforeEach(() => {
-      stateDb.clear();
+      stateDb = new StateDb();
       stateDb.addState('state1');
     });
 
@@ -73,3 +75,25 @@ describe('State Diagram stateDb', () => {
     });
   });
 });
+
+describe('state db class', () => {
+  let stateDb;
+  beforeEach(() => {
+    stateDb = new StateDb();
+  });
+  // 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 = [
+      'setRootDoc',
+      'trimColon',
+      'getDividerId',
+      'setAccTitle',
+      'setAccDescription',
+      'setDirection',
+    ];
+
+    for (const fun of functionsUsedInParser) {
+      expect(Object.hasOwn(stateDb, fun)).toBe(true);
+    }
+  });
+});

packages/mermaid/src/diagrams/state/stateDiagram-v2.spec.js

@@ -1,11 +1,13 @@
 import { parser } from './parser/stateDiagram.jison';
-import stateDb from './stateDb.js';
+import { StateDb } from './stateDb.js';
 import stateDiagram from './parser/stateDiagram.jison';
 
 describe('state diagram V2, ', function () {
   // TODO - these examples should be put into ./parser/stateDiagram.spec.js
   describe('when parsing an info graph it', function () {
+    let stateDb;
     beforeEach(function () {
+      stateDb = new StateDb();
       parser.yy = stateDb;
       stateDiagram.parser.yy = stateDb;
       stateDiagram.parser.yy.clear();

packages/mermaid/src/diagrams/state/stateDiagram-v2.ts

@@ -1,13 +1,15 @@
 import type { DiagramDefinition } from '../../diagram-api/types.js';
 // @ts-ignore: JISON doesn't support types
 import parser from './parser/stateDiagram.jison';
-import db from './stateDb.js';
+import { StateDb } from './stateDb.js';
 import styles from './styles.js';
 import renderer from './stateRenderer-v3-unified.js';
 
 export const diagram: DiagramDefinition = {
   parser,
-  db,
+  get db() {
+    return new StateDb();
+  },
   renderer,
   styles,
   init: (cnf) => {
@@ -15,6 +17,5 @@ export const diagram: DiagramDefinition = {
       cnf.state = {};
     }
     cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
-    db.clear();
   },
 };

packages/mermaid/src/diagrams/state/stateDiagram.spec.js

@@ -1,9 +1,11 @@
 import { parser } from './parser/stateDiagram.jison';
-import stateDb from './stateDb.js';
+import { StateDb } from './stateDb.js';
 
 describe('state diagram, ', function () {
   describe('when parsing an info graph it', function () {
+    let stateDb;
     beforeEach(function () {
+      stateDb = new StateDb();
       parser.yy = stateDb;
     });
 

packages/mermaid/src/diagrams/state/stateDiagram.ts

@@ -1,13 +1,15 @@
 import type { DiagramDefinition } from '../../diagram-api/types.js';
 // @ts-ignore: JISON doesn't support types
 import parser from './parser/stateDiagram.jison';
-import db from './stateDb.js';
+import { StateDb } from './stateDb.js';
 import styles from './styles.js';
 import renderer from './stateRenderer.js';
 
 export const diagram: DiagramDefinition = {
   parser,
-  db,
+  get db() {
+    return new StateDb();
+  },
   renderer,
   styles,
   init: (cnf) => {
@@ -15,6 +17,5 @@ export const diagram: DiagramDefinition = {
       cnf.state = {};
     }
     cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
-    db.clear();
   },
 };

packages/mermaid/src/mermaidAPI.spec.ts

@@ -1,4 +1,5 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
+import assert from 'node:assert';
 
 // -------------------------------------
 //  Mocks and mocking
@@ -69,6 +70,7 @@ import { compile, serialize } from 'stylis';
 import { Diagram } from './Diagram.js';
 import { decodeEntities, encodeEntities } from './utils.js';
 import { toBase64 } from './utils/base64.js';
+import { StateDb } from './diagrams/state/stateDb.js';
 
 /**
  * @see https://vitest.dev/guide/mocking.html Mock part of a module
@@ -832,5 +834,46 @@ 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 classDiagram1 = await mermaidAPI.getDiagramFromText(
+        `stateDiagram
+    direction LR
+    [*] --> Still
+    Still --> [*]
+    Still --> Moving
+    Moving --> Still
+    Moving --> Crash
+    Crash --> [*]`
+      );
+      const classDiagram2 = await mermaidAPI.getDiagramFromText(
+        `stateDiagram
+    [*] --> Still
+    Still --> [*]
+    Still --> Moving
+    Moving --> Still
+    Moving --> Crash
+    Crash --> [*]`
+      );
+      expect(classDiagram1.db).not.toBe(classDiagram2.db);
+      assert(classDiagram1.db instanceof StateDb);
+      assert(classDiagram2.db instanceof StateDb);
+      expect(classDiagram2.db.getDirection()).not.toEqual(classDiagram2.db.getDirection());
+    });
+  });
+
+  // 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);
   });
 });