Merge branch 'develop' of https://github.com/mermaid-js/mermaid into saurabh/refactor-fontawesome-icon-usage

.changeset/grumpy-cheetahs-deliver.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+`mermaidAPI.getDiagramFromText()` now returns a new db instance on each call for state diagrams

.changeset/heavy-moose-mix.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+Added versioning to StateDB and updated tests and diagrams to use it.

.changeset/weak-trees-perform.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: `getDirection` and `setDirection` in `stateDb` refactored to return and set actual direction

.github/lychee.toml

@@ -47,7 +47,10 @@ exclude = [
 "https://(www.)?drupal.org",
 
 # Swimm returns 404, eventhough the link is valid
-"https://docs.swimm.io"
+"https://docs.swimm.io",
+
+# Timeout
+"https://huehive.co"
 ]
 
 # Exclude all private IPs from checking.

.github/workflows/codeql.yml

@@ -36,7 +36,7 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@c36620d31ac7c881962c3d9dd939c40ec9434f2b # v3.26.12
+        uses: github/codeql-action/init@f779452ac5af1c261dce0346a8f964149f49322b # v3.26.13
         with:
           config-file: ./.github/codeql/codeql-config.yml
           languages: ${{ matrix.language }}
@@ -48,7 +48,7 @@ jobs:
       # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@c36620d31ac7c881962c3d9dd939c40ec9434f2b # v3.26.12
+        uses: github/codeql-action/autobuild@f779452ac5af1c261dce0346a8f964149f49322b # v3.26.13
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
@@ -62,4 +62,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@c36620d31ac7c881962c3d9dd939c40ec9434f2b # v3.26.12
+        uses: github/codeql-action/analyze@f779452ac5af1c261dce0346a8f964149f49322b # v3.26.13

.github/workflows/dependency-review.yml

@@ -17,4 +17,4 @@ jobs:
       - name: 'Checkout Repository'
         uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
       - name: 'Dependency Review'
-        uses: actions/dependency-review-action@5a2ce3f5b92ee19cbb1541a4984c76d921601d7c # v4.3.4
+        uses: actions/dependency-review-action@a6993e2c61fd5dc440b409aa1d6904921c5e1894 # v4.3.5

.github/workflows/e2e-timings.yml

@@ -26,11 +26,11 @@ jobs:
         with:
           node-version-file: '.node-version'
       - name: Install dependencies
-        uses: cypress-io/github-action@0da3c06ed8217b912deea9d8ee69630baed1737e # v6.7.6
+        uses: cypress-io/github-action@57b70560982e6a11d23d4b8bec7f8a487cdbb71b # v6.7.8
         with:
           runTests: false
       - name: Cypress run
-        uses: cypress-io/github-action@0da3c06ed8217b912deea9d8ee69630baed1737e # v6.7.6
+        uses: cypress-io/github-action@57b70560982e6a11d23d4b8bec7f8a487cdbb71b # v6.7.8
         id: cypress
         with:
           install: false

.github/workflows/e2e.yml

@@ -7,9 +7,6 @@ on:
       - master
       - release/**
   pull_request:
-  issue_comment:
-    types:
-      - created
   merge_group:
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}
@@ -31,12 +28,10 @@ env:
       ) || 
       github.event.before
     }}
-  # Check if this is a new comment with '/visual-test'
   RUN_VISUAL_TEST: >-
-    ${{ github.event_name == 'issue_comment' && github.event.action == 'created' && contains(github.event.comment.body, '/visual-test') && github.event.issue.pull_request != null }}
+    ${{ github.repository == 'mermaid-js/mermaid' && (github.event_name != 'pull_request' || !startsWith(github.head_ref, 'renovate/')) }}
 jobs:
   cache:
-    if: ${{ github.event_name != 'issue_comment' || contains(github.event.comment.body, '/visual-test') }}
     runs-on: ubuntu-latest
     container:
       image: cypress/browsers:node-20.11.0-chrome-121.0.6167.85-1-ff-120.0-edge-121.0.2277.83-1
@@ -50,9 +45,8 @@ jobs:
           node-version-file: '.node-version'
       - name: Cache snapshots
         id: cache-snapshot
-        uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4.0.2
+        uses: actions/cache@0c907a75c2c80ebcb7f088228285e798b750cf8f # v4.2.1
         with:
-          save-always: true
           path: ./cypress/snapshots
           key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
 
@@ -65,7 +59,7 @@ jobs:
 
       - name: Install dependencies
         if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
-        uses: cypress-io/github-action@0da3c06ed8217b912deea9d8ee69630baed1737e # v6.7.6
+        uses: cypress-io/github-action@57b70560982e6a11d23d4b8bec7f8a487cdbb71b # v6.7.8
         with:
           # just perform install
           runTests: false
@@ -101,13 +95,13 @@ jobs:
       # These cached snapshots are downloaded, providing the reference snapshots.
       - name: Cache snapshots
         id: cache-snapshot
-        uses: actions/cache/restore@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4.0.2
+        uses: actions/cache/restore@0c907a75c2c80ebcb7f088228285e798b750cf8f # v4.2.1
         with:
           path: ./cypress/snapshots
           key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
 
       - name: Install dependencies
-        uses: cypress-io/github-action@0da3c06ed8217b912deea9d8ee69630baed1737e # v6.7.6
+        uses: cypress-io/github-action@57b70560982e6a11d23d4b8bec7f8a487cdbb71b # v6.7.8
         with:
           runTests: false
 
@@ -123,7 +117,7 @@ jobs:
       # Install NPM dependencies, cache them correctly
       # and run all Cypress tests
       - name: Cypress run
-        uses: cypress-io/github-action@0da3c06ed8217b912deea9d8ee69630baed1737e # v6.7.6
+        uses: cypress-io/github-action@57b70560982e6a11d23d4b8bec7f8a487cdbb71b # v6.7.8
         id: cypress
         with:
           install: false
@@ -134,8 +128,6 @@ jobs:
           # e.g. if this action was run from a fork
           record: ${{ env.RUN_VISUAL_TEST == 'true' && secrets.CYPRESS_RECORD_KEY != '' }}
         env:
-          # Only set Argos environment variables if the visual test comment trigger is present
-          ARGOS_TOKEN: ${{ env.RUN_VISUAL_TEST == 'true' && secrets.ARGOS_TOKEN || '' }}
           ARGOS_PARALLEL: ${{ env.RUN_VISUAL_TEST == 'true' }}
           ARGOS_PARALLEL_TOTAL: ${{ env.RUN_VISUAL_TEST == 'true' && strategy.job-total || 1 }}
           ARGOS_PARALLEL_INDEX: ${{ env.RUN_VISUAL_TEST == 'true' && matrix.containers || 1 }}

.github/workflows/link-checker.yml

@@ -32,7 +32,7 @@ jobs:
       - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
       - name: Restore lychee cache
-        uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4.0.2
+        uses: actions/cache@0c907a75c2c80ebcb7f088228285e798b750cf8f # v4.2.1
         with:
           path: .lycheecache
           key: cache-lychee-${{ github.sha }}

.github/workflows/release.yml

@@ -36,7 +36,7 @@ jobs:
 
       - name: Create Release Pull Request or Publish to npm
         id: changesets
-        uses: changesets/action@3de3850952bec538fde60aac71731376e57b9b57 # v1.4.8
+        uses: changesets/action@c8bada60c408975afd1a20b3db81d6eee6789308 # v1.4.9
         with:
           version: pnpm changeset:version
           publish: pnpm changeset:publish

.github/workflows/scorecard.yml

@@ -32,6 +32,6 @@ jobs:
           path: results.sarif
           retention-days: 5
       - name: Upload to code-scanning
-        uses: github/codeql-action/upload-sarif@c36620d31ac7c881962c3d9dd939c40ec9434f2b # v3.26.12
+        uses: github/codeql-action/upload-sarif@f779452ac5af1c261dce0346a8f964149f49322b # v3.26.13
         with:
           sarif_file: results.sarif

cypress.config.ts

@@ -23,12 +23,10 @@ export default eyesPlugin(
         });
         // copy any needed variables from process.env to config.env
         config.env.useAppli = process.env.USE_APPLI ? true : false;
-        config.env.useArgos = !!process.env.CI && !!process.env.ARGOS_TOKEN;
+        config.env.useArgos = process.env.RUN_VISUAL_TEST === 'true';
 
         if (config.env.useArgos) {
-          registerArgosTask(on, config, {
+          registerArgosTask(on, config);
-            token: 'fc3a35cf5200db928d65b2047861582d9444032b',
-          });
         } else {
           addMatchImageSnapshotPlugin(on, config);
         }

cypress/platform/knsv2.html

@@ -11,7 +11,7 @@
       rel="stylesheet"
     />
     <link
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
       rel="stylesheet"
     />
     <link

package.json

@@ -92,7 +92,7 @@
     "cypress": "^13.14.1",
     "cypress-image-snapshot": "^4.0.1",
     "cypress-split": "^1.24.0",
-    "esbuild": "^0.21.5",
+    "esbuild": "^0.25.0",
     "eslint": "^9.4.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-cypress": "^3.3.0",
@@ -123,6 +123,7 @@
     "rimraf": "^5.0.5",
     "rollup-plugin-visualizer": "^5.12.0",
     "start-server-and-test": "^2.0.3",
+    "tslib": "^2.8.1",
     "tsx": "^4.7.1",
     "typescript": "~5.4.5",
     "typescript-eslint": "^8.0.0-alpha.34",

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

@@ -372,8 +372,8 @@ export const addLinks = function (actorId: string, text: { text: string }) {
   // JSON.parse the text
   try {
     let sanitizedText = sanitizeText(text.text, getConfig());
-    sanitizedText = sanitizedText.replace(/&/g, '&');
     sanitizedText = sanitizedText.replace(/=/g, '=');
+    sanitizedText = sanitizedText.replace(/&/g, '&');
     const links = JSON.parse(sanitizedText);
     // add the deserialized text to the actor's links field.
     insertLinks(actor, links);
@@ -389,8 +389,8 @@ export const addALink = function (actorId: string, text: { text: string }) {
     const links: Record<string, string> = {};
     let sanitizedText = sanitizeText(text.text, getConfig());
     const sep = sanitizedText.indexOf('@');
-    sanitizedText = sanitizedText.replace(/&amp;/g, '&');
     sanitizedText = sanitizedText.replace(/&equals;/g, '=');
+    sanitizedText = sanitizedText.replace(/&amp;/g, '&');
     const label = sanitizedText.slice(0, sep - 1).trim();
     const link = sanitizedText.slice(sep + 1).trim();
 

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(2);
     stateDiagram.parser.yy = stateDb;
     stateDiagram.parser.yy.clear();
   });
@@ -18,7 +20,6 @@ describe('state parser can parse...', () => {
         const diagramText = `stateDiagram-v2
         state "Small State 1" as namedState1`;
         stateDiagram.parser.parse(diagramText);
-        stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
 
         const states = stateDiagram.parser.yy.getStates();
         expect(states.get('namedState1')).not.toBeUndefined();
@@ -31,7 +32,6 @@ describe('state parser can parse...', () => {
         const diagramText = `stateDiagram-v2
         namedState1 : Small State 1`;
         stateDiagram.parser.parse(diagramText);
-        stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
 
         const states = stateDiagram.parser.yy.getStates();
         expect(states.get('namedState1')).not.toBeUndefined();
@@ -42,7 +42,6 @@ describe('state parser can parse...', () => {
         const diagramText = `stateDiagram-v2
         namedState1:Small State 1`;
         stateDiagram.parser.parse(diagramText);
-        stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
 
         const states = stateDiagram.parser.yy.getStates();
         expect(states.get('namedState1')).not.toBeUndefined();
@@ -60,7 +59,6 @@ describe('state parser can parse...', () => {
       state assemblies
       `;
       stateDiagram.parser.parse(diagramText);
-      stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
       const states = stateDiagram.parser.yy.getStates();
       expect(states.get('assemble')).not.toBeUndefined();
       expect(states.get('assemblies')).not.toBeUndefined();
@@ -71,7 +69,6 @@ describe('state parser can parse...', () => {
       state "as" as as
       `;
       stateDiagram.parser.parse(diagramText);
-      stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
       const states = stateDiagram.parser.yy.getStates();
       expect(states.get('as')).not.toBeUndefined();
       expect(states.get('as').descriptions.join(' ')).toEqual('as');
@@ -96,7 +93,6 @@ describe('state parser can parse...', () => {
         namedState2 --> bigState2: should point to \\nbigState2 container`;
 
       stateDiagram.parser.parse(diagramText);
-      stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
 
       const states = stateDiagram.parser.yy.getStates();
       expect(states.get('namedState1')).not.toBeUndefined();
@@ -120,7 +116,6 @@ describe('state parser can parse...', () => {
             inner1 --> inner2
         }`;
       stateDiagram.parser.parse(diagramText);
-      stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
 
       const states = stateDiagram.parser.yy.getStates();
       expect(states.get('bigState1')).not.toBeUndefined();
@@ -137,7 +132,6 @@ describe('state parser can parse...', () => {
 stateDiagram-v2
 [*] --> ${prop}
 ${prop} --> [*]`);
-      stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
       const states = stateDiagram.parser.yy.getStates();
       expect(states.get(prop)).not.toBeUndefined();
     });

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

@@ -1,13 +1,15 @@
-import stateDb from '../stateDb.js';
-import stateDiagram from './stateDiagram.jison';
 import { setConfig } from '../../../config.js';
+import { StateDB } from '../stateDb.js';
+import stateDiagram from './stateDiagram.jison';
 
 setConfig({
   securityLevel: 'strict',
 });
 
 describe('ClassDefs and classes when parsing a State diagram', () => {
+  let stateDb;
   beforeEach(function () {
+    stateDb = new StateDB(2);
     stateDiagram.parser.yy = stateDb;
     stateDiagram.parser.yy.clear();
   });
@@ -16,7 +18,6 @@ describe('ClassDefs and classes when parsing a State diagram', () => {
     describe('defining (classDef)', () => {
       it('has "classDef" as a keyword, an id, and can set a css style attribute', function () {
         stateDiagram.parser.parse('stateDiagram-v2\n classDef exampleClass background:#bbb;');
-        stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
 
         const styleClasses = stateDb.getClasses();
         expect(styleClasses.get('exampleClass').styles.length).toEqual(1);
@@ -27,7 +28,6 @@ describe('ClassDefs and classes when parsing a State diagram', () => {
         stateDiagram.parser.parse(
           'stateDiagram-v2\n classDef exampleClass background:#bbb, font-weight:bold, font-style:italic;'
         );
-        stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
 
         const styleClasses = stateDb.getClasses();
         expect(styleClasses.get('exampleClass').styles.length).toEqual(3);
@@ -41,7 +41,6 @@ describe('ClassDefs and classes when parsing a State diagram', () => {
         stateDiagram.parser.parse(
           'stateDiagram-v2\n classDef exampleStyleClass background:#bbb,border:1.5px solid red;'
         );
-        stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
 
         const classes = stateDiagram.parser.yy.getClasses();
         expect(classes.get('exampleStyleClass').styles.length).toBe(2);
@@ -53,7 +52,6 @@ describe('ClassDefs and classes when parsing a State diagram', () => {
         stateDiagram.parser.parse(
           'stateDiagram-v2\n classDef exampleStyleClass background:  #bbb,border:1.5px solid red;'
         );
-        stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
 
         const classes = stateDiagram.parser.yy.getClasses();
         expect(classes.get('exampleStyleClass').styles.length).toBe(2);
@@ -65,7 +63,6 @@ describe('ClassDefs and classes when parsing a State diagram', () => {
         stateDiagram.parser.parse(
           'stateDiagram-v2\n classDef __proto__ background:#bbb,border:1.5px solid red;\n classDef constructor background:#bbb,border:1.5px solid red;'
         );
-        stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
         const classes = stateDiagram.parser.yy.getClasses();
         expect(classes.get('__proto__').styles.length).toBe(2);
         expect(classes.get('constructor').styles.length).toBe(2);
@@ -81,7 +78,6 @@ describe('ClassDefs and classes when parsing a State diagram', () => {
         diagram += 'class a exampleStyleClass';
 
         stateDiagram.parser.parse(diagram);
-        stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
 
         const classes = stateDb.getClasses();
         expect(classes.get('exampleStyleClass').styles.length).toEqual(2);
@@ -102,7 +98,6 @@ describe('ClassDefs and classes when parsing a State diagram', () => {
         diagram += 'class a_a exampleStyleClass';
 
         stateDiagram.parser.parse(diagram);
-        stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
 
         const classes = stateDiagram.parser.yy.getClasses();
         expect(classes.get('exampleStyleClass').styles.length).toBe(2);
@@ -122,7 +117,6 @@ describe('ClassDefs and classes when parsing a State diagram', () => {
           diagram += 'a --> b:::exampleStyleClass' + '\n';
 
           stateDiagram.parser.parse(diagram);
-          stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
 
           const states = stateDiagram.parser.yy.getStates();
           const classes = stateDiagram.parser.yy.getClasses();
@@ -141,7 +135,6 @@ describe('ClassDefs and classes when parsing a State diagram', () => {
           diagram += '[*]:::exampleStyleClass --> b\n';
 
           stateDiagram.parser.parse(diagram);
-          stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
 
           const states = stateDiagram.parser.yy.getStates();
           const classes = stateDiagram.parser.yy.getClasses();
@@ -161,7 +154,6 @@ describe('ClassDefs and classes when parsing a State diagram', () => {
           diagram += 'class a,b exampleStyleClass';
 
           stateDiagram.parser.parse(diagram);
-          stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
           let classes = stateDiagram.parser.yy.getClasses();
           let states = stateDiagram.parser.yy.getStates();
 
@@ -180,7 +172,6 @@ describe('ClassDefs and classes when parsing a State diagram', () => {
           diagram += 'class a,b,c, d, e exampleStyleClass';
 
           stateDiagram.parser.parse(diagram);
-          stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
           const classes = stateDiagram.parser.yy.getClasses();
           const states = stateDiagram.parser.yy.getStates();
 
@@ -208,7 +199,6 @@ describe('ClassDefs and classes when parsing a State diagram', () => {
           diagram += '}\n';
 
           stateDiagram.parser.parse(diagram);
-          stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
 
           const states = stateDiagram.parser.yy.getStates();
 
@@ -224,7 +214,6 @@ describe('ClassDefs and classes when parsing a State diagram', () => {
         stateDiagram.parser.parse(`stateDiagram-v2
         id1
         style id1 background:#bbb`);
-        stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
         const data4Layout = stateDiagram.parser.yy.getData();
 
         expect(data4Layout.nodes[0].cssStyles).toEqual(['background:#bbb']);
@@ -234,7 +223,6 @@ describe('ClassDefs and classes when parsing a State diagram', () => {
         id1
         id2
         style id1,id2 background:#bbb`);
-        stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
         const data4Layout = stateDiagram.parser.yy.getData();
 
         expect(data4Layout.nodes[0].cssStyles).toEqual(['background:#bbb']);
@@ -247,7 +235,6 @@ describe('ClassDefs and classes when parsing a State diagram', () => {
         id2
         style id1,id2 background:#bbb, font-weight:bold, font-style:italic;`);
 
-        stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
         const data4Layout = stateDiagram.parser.yy.getData();
 
         expect(data4Layout.nodes[0].cssStyles).toEqual([

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';
@@ -414,13 +414,13 @@ let edgeCount = 0;
 export const drawEdge = function (elem, path, relation) {
   const getRelationType = function (type) {
     switch (type) {
-      case stateDb.relationType.AGGREGATION:
+      case StateDB.relationType.AGGREGATION:
         return 'aggregation';
-      case stateDb.relationType.EXTENSION:
+      case StateDB.relationType.EXTENSION:
         return 'extension';
-      case stateDb.relationType.COMPOSITION:
+      case StateDB.relationType.COMPOSITION:
         return 'composition';
-      case stateDb.relationType.DEPENDENCY:
+      case StateDB.relationType.DEPENDENCY:
         return 'dependency';
     }
   };
@@ -459,7 +459,7 @@ export const drawEdge = function (elem, path, relation) {
 
   svgPath.attr(
     'marker-end',
-    'url(' + url + '#' + getRelationType(stateDb.relationType.DEPENDENCY) + 'End' + ')'
+    'url(' + url + '#' + getRelationType(StateDB.relationType.DEPENDENCY) + 'End' + ')'
   );
 
   if (relation.title !== undefined) {

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

@@ -3,11 +3,14 @@
  */
 
 // default diagram direction
-export const DEFAULT_DIAGRAM_DIRECTION = 'LR';
+export const DEFAULT_DIAGRAM_DIRECTION = 'TB';
 
 // default direction for any nested documents (composites)
 export const DEFAULT_NESTED_DOC_DIR = 'TB';
 
+// parsed statement type for a direction
+export const STMT_DIRECTION = 'dir';
+
 // parsed statement type for a state
 export const STMT_STATE = 'state';
 // parsed statement type for a relation

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

@@ -1,28 +1,29 @@
+import { getConfig } from '../../diagram-api/diagramAPI.js';
 import { log } from '../../logger.js';
 import { generateId } from '../../utils.js';
 import common from '../common/common.js';
-import { getConfig } from '../../diagram-api/diagramAPI.js';
 import {
-  setAccTitle,
-  getAccTitle,
-  getAccDescription,
-  setAccDescription,
   clear as commonClear,
-  setDiagramTitle,
+  getAccDescription,
+  getAccTitle,
   getDiagramTitle,
+  setAccDescription,
+  setAccTitle,
+  setDiagramTitle,
 } from '../common/commonDb.js';
 import { dataFetcher, reset as resetDataFetching } from './dataFetcher.js';
 import { getDir } from './stateRenderer-v3-unified.js';
 
 import {
   DEFAULT_DIAGRAM_DIRECTION,
-  STMT_STATE,
-  STMT_RELATION,
-  STMT_CLASSDEF,
-  STMT_STYLEDEF,
-  STMT_APPLYCLASS,
   DEFAULT_STATE_TYPE,
   DIVIDER_TYPE,
+  STMT_APPLYCLASS,
+  STMT_CLASSDEF,
+  STMT_DIRECTION,
+  STMT_RELATION,
+  STMT_STATE,
+  STMT_STYLEDEF,
 } from './stateCommon.js';
 
 const START_NODE = '[*]';
@@ -46,15 +47,6 @@ function newClassesList() {
   return new Map();
 }
 
-let nodes = [];
-let edges = [];
-
-let direction = DEFAULT_DIAGRAM_DIRECTION;
-let rootDoc = [];
-let classes = newClassesList(); // style classes defined by a classDef
-
-// --------------------------------------
-
 const newDoc = () => {
   return {
     /** @type {{ id1: string, id2: string, relationTitle: string }[]} */
@@ -63,40 +55,109 @@ const newDoc = () => {
     documents: {},
   };
 };
-let documents = {
+
+const clone = (o) => JSON.parse(JSON.stringify(o));
+
+export class StateDB {
+  /**
+   * @param {1 | 2} version - v1 renderer or v2 renderer.
+   */
+  constructor(version) {
+    this.clear();
+
+    this.version = version;
+
+    // Needed for JISON since it only supports direct properties
+    this.setRootDoc = this.setRootDoc.bind(this);
+    this.getDividerId = this.getDividerId.bind(this);
+    this.setDirection = this.setDirection.bind(this);
+    this.trimColon = this.trimColon.bind(this);
+  }
+
+  /**
+   * @private
+   * @type {1 | 2}
+   */
+  version;
+
+  /**
+   * @private
+   * @type {Array}
+   */
+  nodes = [];
+  /**
+   * @private
+   * @type {Array}
+   */
+  edges = [];
+
+  /**
+   * @private
+   * @type {Array}
+   */
+  rootDoc = [];
+  /**
+   * @private
+   * @type {Map<string, any>}
+   */
+  classes = newClassesList(); // style classes defined by a classDef
+
+  /**
+   * @private
+   * @type {Object}
+   */
+  documents = {
     root: newDoc(),
-};
+  };
 
-let currentDocument = documents.root;
+  /**
-let startEndCount = 0;
+   * @private
-let dividerCnt = 0;
+   * @type {Object}
+   */
+  currentDocument = this.documents.root;
+  /**
+   * @private
+   * @type {number}
+   */
+  startEndCount = 0;
+  /**
+   * @private
+   * @type {number}
+   */
+  dividerCnt = 0;
 
-export const lineType = {
+  static relationType = {
-  LINE: 0,
-  DOTTED_LINE: 1,
-};
-
-export const relationType = {
     AGGREGATION: 0,
     EXTENSION: 1,
     COMPOSITION: 2,
     DEPENDENCY: 3,
-};
+  };
 
-const clone = (o) => JSON.parse(JSON.stringify(o));
+  setRootDoc(o) {
-
-const setRootDoc = (o) => {
     log.info('Setting root doc', o);
     // rootDoc = { id: 'root', doc: o };
-  rootDoc = o;
+    this.rootDoc = o;
-};
+    if (this.version === 1) {
+      this.extract(o);
+    } else {
+      this.extract(this.getRootDocV2());
+    }
+  }
 
-const getRootDoc = () => rootDoc;
+  getRootDoc() {
+    return this.rootDoc;
+  }
 
-const docTranslator = (parent, node, first) => {
+  /**
+   * @private
+   * @param {Object} parent
+   * @param {Object} node
+   * @param {boolean} first
+   */
+  docTranslator(parent, node, first) {
     if (node.stmt === STMT_RELATION) {
-    docTranslator(parent, node.state1, true);
+      this.docTranslator(parent, node.state1, true);
-    docTranslator(parent, node.state2, false);
+      this.docTranslator(parent, node.state2, false);
     } else {
       if (node.stmt === STMT_STATE) {
         if (node.id === '[*]') {
@@ -115,7 +176,6 @@ const docTranslator = (parent, node, first) => {
         let i;
         for (i = 0; i < node.doc.length; i++) {
           if (node.doc[i].type === DIVIDER_TYPE) {
-          // debugger;
             const newNode = clone(node.doc[i]);
             newNode.doc = clone(currentDoc);
             doc.push(newNode);
@@ -137,17 +197,21 @@ const docTranslator = (parent, node, first) => {
           node.doc = doc;
         }
 
-      node.doc.forEach((docNode) => docTranslator(node, docNode, true));
+        node.doc.forEach((docNode) => this.docTranslator(node, docNode, true));
+      }
     }
   }
-};
-const getRootDocV2 = () => {
-  docTranslator({ id: 'root' }, { id: 'root', doc: rootDoc }, true);
-  return { id: 'root', doc: rootDoc };
-  // Here
-};
 
-/**
+  /**
+   * @private
+   */
+  getRootDocV2() {
+    this.docTranslator({ id: 'root' }, { id: 'root', doc: this.rootDoc }, true);
+    return { id: 'root', doc: this.rootDoc };
+    // Here
+  }
+
+  /**
    * Convert all of the statements (stmts) that were parsed into states and relationships.
    * This is done because a state diagram may have nested sections,
    * where each section is a 'document' and has its own set of statements.
@@ -155,10 +219,10 @@ const getRootDocV2 = () => {
    * refer to the fork as a whole (document).
    * See the parser grammar:  the definition of a document is a document then a 'line', where a line can be a statement.
    * This will push the statement into the list of statements for the current document.
- *
+   * @private
    * @param _doc
    */
-const extract = (_doc) => {
+  extract(_doc) {
     // const res = { states: [], relations: [] };
     let doc;
     if (_doc.doc) {
@@ -171,7 +235,7 @@ const extract = (_doc) => {
     //   doc = root;
     // }
     log.info(doc);
-  clear(true);
+    this.clear(true);
 
     log.info('Extract initial document:', doc);
 
@@ -179,7 +243,7 @@ const extract = (_doc) => {
       log.warn('Statement', item.stmt);
       switch (item.stmt) {
         case STMT_STATE:
-        addState(
+          this.addState(
             item.id.trim(),
             item.type,
             item.doc,
@@ -191,38 +255,48 @@ const extract = (_doc) => {
           );
           break;
         case STMT_RELATION:
-        addRelation(item.state1, item.state2, item.description);
+          this.addRelation(item.state1, item.state2, item.description);
           break;
         case STMT_CLASSDEF:
-        addStyleClass(item.id.trim(), item.classes);
+          this.addStyleClass(item.id.trim(), item.classes);
           break;
         case STMT_STYLEDEF:
           {
             const ids = item.id.trim().split(',');
             const styles = item.styleClass.split(',');
             ids.forEach((id) => {
-            let foundState = getState(id);
+              let foundState = this.getState(id);
               if (foundState === undefined) {
                 const trimmedId = id.trim();
-              addState(trimmedId);
+                this.addState(trimmedId);
-              foundState = getState(trimmedId);
+                foundState = this.getState(trimmedId);
               }
               foundState.styles = styles.map((s) => s.replace(/;/g, '')?.trim());
             });
           }
           break;
         case STMT_APPLYCLASS:
-        setCssClass(item.id.trim(), item.styleClass);
+          this.setCssClass(item.id.trim(), item.styleClass);
           break;
       }
     });
 
-  const diagramStates = getStates();
+    const diagramStates = this.getStates();
     const config = getConfig();
     const look = config.look;
+
     resetDataFetching();
-  dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, look, classes);
+    dataFetcher(
-  nodes.forEach((node) => {
+      undefined,
+      this.getRootDocV2(),
+      diagramStates,
+      this.nodes,
+      this.edges,
+      true,
+      look,
+      this.classes
+    );
+    this.nodes.forEach((node) => {
       if (Array.isArray(node.label)) {
         // add the rest as description
         node.description = node.label.slice(1);
@@ -237,9 +311,9 @@ const extract = (_doc) => {
         node.label = node.label[0];
       }
     });
-};
+  }
 
-/**
+  /**
    * Function called by parser when a node definition has been found.
    *
    * @param {null | string} id
@@ -251,7 +325,7 @@ const extract = (_doc) => {
    * @param {null | string | string[]} styles - styles to apply to this state. Can be a string (1 style) or an array of styles. If it's just 1 style, convert it to an array of that 1 style.
    * @param {null | string | string[]} textStyles - text styles to apply to this state. Can be a string (1 text test) or an array of text styles. If it's just 1 text style, convert it to an array of that 1 text style.
    */
-export const addState = function (
+  addState(
     id,
     type = DEFAULT_STATE_TYPE,
     doc = null,
@@ -260,12 +334,12 @@ export const addState = function (
     classes = null,
     styles = null,
     textStyles = null
-) {
+  ) {
     const trimmedId = id?.trim();
     // add the state if needed
-  if (!currentDocument.states.has(trimmedId)) {
+    if (!this.currentDocument.states.has(trimmedId)) {
       log.info('Adding state ', trimmedId, descr);
-    currentDocument.states.set(trimmedId, {
+      this.currentDocument.states.set(trimmedId, {
         id: trimmedId,
         descriptions: [],
         type,
@@ -276,27 +350,27 @@ export const addState = function (
         textStyles: [],
       });
     } else {
-    if (!currentDocument.states.get(trimmedId).doc) {
+      if (!this.currentDocument.states.get(trimmedId).doc) {
-      currentDocument.states.get(trimmedId).doc = doc;
+        this.currentDocument.states.get(trimmedId).doc = doc;
       }
-    if (!currentDocument.states.get(trimmedId).type) {
+      if (!this.currentDocument.states.get(trimmedId).type) {
-      currentDocument.states.get(trimmedId).type = type;
+        this.currentDocument.states.get(trimmedId).type = type;
       }
     }
 
     if (descr) {
       log.info('Setting state description', trimmedId, descr);
       if (typeof descr === 'string') {
-      addDescription(trimmedId, descr.trim());
+        this.addDescription(trimmedId, descr.trim());
       }
 
       if (typeof descr === 'object') {
-      descr.forEach((des) => addDescription(trimmedId, des.trim()));
+        descr.forEach((des) => this.addDescription(trimmedId, des.trim()));
       }
     }
 
     if (note) {
-    const doc2 = currentDocument.states.get(trimmedId);
+      const doc2 = this.currentDocument.states.get(trimmedId);
       doc2.note = note;
       doc2.note.text = common.sanitizeText(doc2.note.text, getConfig());
     }
@@ -304,123 +378,126 @@ export const addState = function (
     if (classes) {
       log.info('Setting state classes', trimmedId, classes);
       const classesList = typeof classes === 'string' ? [classes] : classes;
-    classesList.forEach((cssClass) => setCssClass(trimmedId, cssClass.trim()));
+      classesList.forEach((cssClass) => this.setCssClass(trimmedId, cssClass.trim()));
     }
 
     if (styles) {
       log.info('Setting state styles', trimmedId, styles);
       const stylesList = typeof styles === 'string' ? [styles] : styles;
-    stylesList.forEach((style) => setStyle(trimmedId, style.trim()));
+      stylesList.forEach((style) => this.setStyle(trimmedId, style.trim()));
     }
 
     if (textStyles) {
       log.info('Setting state styles', trimmedId, styles);
       const textStylesList = typeof textStyles === 'string' ? [textStyles] : textStyles;
-    textStylesList.forEach((textStyle) => setTextStyle(trimmedId, textStyle.trim()));
+      textStylesList.forEach((textStyle) => this.setTextStyle(trimmedId, textStyle.trim()));
+    }
   }
-};
 
-export const clear = function (saveCommon) {
+  clear(saveCommon) {
-  nodes = [];
+    this.nodes = [];
-  edges = [];
+    this.edges = [];
-  documents = {
+    this.documents = {
       root: newDoc(),
     };
-  currentDocument = documents.root;
+    this.currentDocument = this.documents.root;
 
     // number of start and end nodes; used to construct ids
-  startEndCount = 0;
+    this.startEndCount = 0;
-  classes = newClassesList();
+    this.classes = newClassesList();
     if (!saveCommon) {
       commonClear();
     }
-};
+  }
 
-export const getState = function (id) {
+  getState(id) {
-  return currentDocument.states.get(id);
+    return this.currentDocument.states.get(id);
-};
+  }
+  getStates() {
+    return this.currentDocument.states;
+  }
+  logDocuments() {
+    log.info('Documents = ', this.documents);
+  }
+  getRelations() {
+    return this.currentDocument.relations;
+  }
 
-export const getStates = function () {
+  /**
-  return currentDocument.states;
-};
-export const logDocuments = function () {
-  log.info('Documents = ', documents);
-};
-export const getRelations = function () {
-  return currentDocument.relations;
-};
-
-/**
    * If the id is a start node ( [*] ), then return a new id constructed from
    * the start node name and the current start node count.
    * else return the given id
    *
    * @param {string} id
    * @returns {string} - the id (original or constructed)
+   * @private
    */
-function startIdIfNeeded(id = '') {
+  startIdIfNeeded(id = '') {
     let fixedId = id;
     if (id === START_NODE) {
-    startEndCount++;
+      this.startEndCount++;
-    fixedId = `${START_TYPE}${startEndCount}`;
+      fixedId = `${START_TYPE}${this.startEndCount}`;
     }
     return fixedId;
-}
+  }
 
-/**
+  /**
    * If the id is a start node ( [*] ), then return the start type ('start')
    * else return the given type
    *
    * @param {string} id
    * @param {string} type
    * @returns {string} - the type that should be used
+   * @private
    */
-function startTypeIfNeeded(id = '', type = DEFAULT_STATE_TYPE) {
+  startTypeIfNeeded(id = '', type = DEFAULT_STATE_TYPE) {
     return id === START_NODE ? START_TYPE : type;
-}
+  }
 
-/**
+  /**
    * If the id is an end node ( [*] ), then return a new id constructed from
    * the end node name and the current start_end node count.
    * else return the given id
    *
    * @param {string} id
    * @returns {string} - the id (original or constructed)
+   * @private
    */
-function endIdIfNeeded(id = '') {
+  endIdIfNeeded(id = '') {
     let fixedId = id;
     if (id === END_NODE) {
-    startEndCount++;
+      this.startEndCount++;
-    fixedId = `${END_TYPE}${startEndCount}`;
+      fixedId = `${END_TYPE}${this.startEndCount}`;
     }
     return fixedId;
-}
+  }
 
-/**
+  /**
    * If the id is an end node ( [*] ), then return the end type
    * else return the given type
    *
    * @param {string} id
    * @param {string} type
    * @returns {string} - the type that should be used
+   * @private
    */
-function endTypeIfNeeded(id = '', type = DEFAULT_STATE_TYPE) {
+  endTypeIfNeeded(id = '', type = DEFAULT_STATE_TYPE) {
     return id === END_NODE ? END_TYPE : type;
-}
+  }
 
-/**
+  /**
    *
    * @param item1
    * @param item2
    * @param relationTitle
    */
-export function addRelationObjs(item1, item2, relationTitle) {
+  addRelationObjs(item1, item2, relationTitle) {
-  let id1 = startIdIfNeeded(item1.id.trim());
+    let id1 = this.startIdIfNeeded(item1.id.trim());
-  let type1 = startTypeIfNeeded(item1.id.trim(), item1.type);
+    let type1 = this.startTypeIfNeeded(item1.id.trim(), item1.type);
-  let id2 = startIdIfNeeded(item2.id.trim());
+    let id2 = this.startIdIfNeeded(item2.id.trim());
-  let type2 = startTypeIfNeeded(item2.id.trim(), item2.type);
+    let type2 = this.startTypeIfNeeded(item2.id.trim(), item2.type);
 
-  addState(
+    this.addState(
       id1,
       type1,
       item1.doc,
@@ -430,7 +507,7 @@ export function addRelationObjs(item1, item2, relationTitle) {
       item1.styles,
       item1.textStyles
     );
-  addState(
+    this.addState(
       id2,
       type2,
       item2.doc,
@@ -441,71 +518,71 @@ export function addRelationObjs(item1, item2, relationTitle) {
       item2.textStyles
     );
 
-  currentDocument.relations.push({
+    this.currentDocument.relations.push({
       id1,
       id2,
       relationTitle: common.sanitizeText(relationTitle, getConfig()),
     });
-}
+  }
 
-/**
+  /**
    * Add a relation between two items.  The items may be full objects or just the string id of a state.
    *
    * @param {string | object} item1
    * @param {string | object} item2
    * @param {string} title
    */
-export const addRelation = function (item1, item2, title) {
+  addRelation(item1, item2, title) {
     if (typeof item1 === 'object') {
-    addRelationObjs(item1, item2, title);
+      this.addRelationObjs(item1, item2, title);
     } else {
-    const id1 = startIdIfNeeded(item1.trim());
+      const id1 = this.startIdIfNeeded(item1.trim());
-    const type1 = startTypeIfNeeded(item1);
+      const type1 = this.startTypeIfNeeded(item1);
-    const id2 = endIdIfNeeded(item2.trim());
+      const id2 = this.endIdIfNeeded(item2.trim());
-    const type2 = endTypeIfNeeded(item2);
+      const type2 = this.endTypeIfNeeded(item2);
 
-    addState(id1, type1);
+      this.addState(id1, type1);
-    addState(id2, type2);
+      this.addState(id2, type2);
-    currentDocument.relations.push({
+      this.currentDocument.relations.push({
         id1,
         id2,
         title: common.sanitizeText(title, getConfig()),
       });
     }
-};
+  }
 
-export const addDescription = function (id, descr) {
+  addDescription(id, descr) {
-  const theState = currentDocument.states.get(id);
+    const theState = this.currentDocument.states.get(id);
     const _descr = descr.startsWith(':') ? descr.replace(':', '').trim() : descr;
     theState.descriptions.push(common.sanitizeText(_descr, getConfig()));
-};
+  }
 
-export const cleanupLabel = function (label) {
+  cleanupLabel(label) {
     if (label.substring(0, 1) === ':') {
       return label.substr(2).trim();
     } else {
       return label.trim();
     }
-};
+  }
 
-const getDividerId = () => {
+  getDividerId() {
-  dividerCnt++;
+    this.dividerCnt++;
-  return 'divider-id-' + dividerCnt;
+    return 'divider-id-' + this.dividerCnt;
-};
+  }
 
-/**
+  /**
    * Called when the parser comes across a (style) class definition
    * @example classDef my-style fill:#f96;
    *
    * @param {string} id - the id of this (style) class
    * @param  {string | null} styleAttributes - the string with 1 or more style attributes (each separated by a comma)
    */
-export const addStyleClass = function (id, styleAttributes = '') {
+  addStyleClass(id, styleAttributes = '') {
     // create a new style class object with this id
-  if (!classes.has(id)) {
+    if (!this.classes.has(id)) {
-    classes.set(id, { id: id, styles: [], textStyles: [] }); // This is a classDef
+      this.classes.set(id, { id: id, styles: [], textStyles: [] }); // This is a classDef
     }
-  const foundClass = classes.get(id);
+    const foundClass = this.classes.get(id);
     if (styleAttributes !== undefined && styleAttributes !== null) {
       styleAttributes.split(STYLECLASS_SEP).forEach((attrib) => {
         // remove any trailing ;
@@ -520,17 +597,17 @@ export const addStyleClass = function (id, styleAttributes = '') {
         foundClass.styles.push(fixedAttrib);
       });
     }
-};
+  }
 
-/**
+  /**
    * Return all of the style classes
    * @returns {{} | any | classes}
    */
-export const getClasses = function () {
+  getClasses() {
-  return classes;
+    return this.classes;
-};
+  }
 
-/**
+  /**
    * Add a (style) class or css class to a state with the given id.
    * If the state isn't already in the list of known states, add it.
    * Might be called by parser when a style class or CSS class should be applied to a state
@@ -538,19 +615,19 @@ export const getClasses = function () {
    * @param {string | string[]} itemIds The id or a list of ids of the item(s) to apply the css class to
    * @param {string} cssClassName CSS class name
    */
-export const setCssClass = function (itemIds, cssClassName) {
+  setCssClass(itemIds, cssClassName) {
-  itemIds.split(',').forEach(function (id) {
+    itemIds.split(',').forEach((id) => {
-    let foundState = getState(id);
+      let foundState = this.getState(id);
       if (foundState === undefined) {
         const trimmedId = id.trim();
-      addState(trimmedId);
+        this.addState(trimmedId);
-      foundState = getState(trimmedId);
+        foundState = this.getState(trimmedId);
       }
       foundState.classes.push(cssClassName);
     });
-};
+  }
 
-/**
+  /**
    * Add a style to a state with the given id.
    * @example style stateId fill:#f9f,stroke:#333,stroke-width:4px
    *   where 'style' is the keyword
@@ -560,67 +637,70 @@ export const setCssClass = function (itemIds, cssClassName) {
    * @param itemId The id of item to apply the style to
    * @param styleText - the text of the attributes for the style
    */
-export const setStyle = function (itemId, styleText) {
+  setStyle(itemId, styleText) {
-  const item = getState(itemId);
+    const item = this.getState(itemId);
     if (item !== undefined) {
       item.styles.push(styleText);
     }
-};
+  }
 
-/**
+  /**
    * Add a text style to a state with the given id
    *
    * @param itemId The id of item to apply the css class to
    * @param cssClassName CSS class name
    */
-export const setTextStyle = function (itemId, cssClassName) {
+  setTextStyle(itemId, cssClassName) {
-  const item = getState(itemId);
+    const item = this.getState(itemId);
     if (item !== undefined) {
       item.textStyles.push(cssClassName);
     }
-};
+  }
 
-const getDirection = () => direction;
+  /**
-const setDirection = (dir) => {
+   * Finds the direction statement in the root document.
-  direction = dir;
+   * @private
-};
+   * @returns {{ value: string } | undefined} - the direction statement if present
+   */
+  getDirectionStatement() {
+    return this.rootDoc.find((doc) => doc.stmt === STMT_DIRECTION);
+  }
 
-const trimColon = (str) => (str && str[0] === ':' ? str.substr(1).trim() : str.trim());
+  getDirection() {
+    return this.getDirectionStatement()?.value ?? DEFAULT_DIAGRAM_DIRECTION;
+  }
 
-export const getData = () => {
+  setDirection(dir) {
+    const doc = this.getDirectionStatement();
+    if (doc) {
+      doc.value = dir;
+    } else {
+      this.rootDoc.unshift({ stmt: STMT_DIRECTION, value: dir });
+    }
+  }
+
+  trimColon(str) {
+    return str && str[0] === ':' ? str.substr(1).trim() : str.trim();
+  }
+
+  getData() {
     const config = getConfig();
-  return { nodes, edges, other: {}, config, direction: getDir(getRootDocV2()) };
+    return {
-};
+      nodes: this.nodes,
+      edges: this.edges,
+      other: {},
+      config,
+      direction: getDir(this.getRootDocV2()),
+    };
+  }
 
-export default {
+  getConfig() {
-  getConfig: () => getConfig().state,
+    return getConfig().state;
-  getData,
+  }
-  addState,
+  getAccTitle = getAccTitle;
-  clear,
+  setAccTitle = setAccTitle;
-  getState,
+  getAccDescription = getAccDescription;
-  getStates,
+  setAccDescription = setAccDescription;
-  getRelations,
+  setDiagramTitle = setDiagramTitle;
-  getClasses,
+  getDiagramTitle = getDiagramTitle;
-  getDirection,
+}
-  addRelation,
-  getDividerId,
-  setDirection,
-  cleanupLabel,
-  lineType,
-  relationType,
-  logDocuments,
-  getRootDoc,
-  setRootDoc,
-  getRootDocV2,
-  extract,
-  trimColon,
-  getAccTitle,
-  setAccTitle,
-  getAccDescription,
-  setAccDescription,
-  addStyleClass,
-  setCssClass,
-  addDescription,
-  setDiagramTitle,
-  getDiagramTitle,
-};

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(1);
   });
 
   describe('addStyleClass', () => {
@@ -20,8 +21,9 @@ describe('State Diagram stateDb', () => {
   });
 
   describe('addDescription to a state', () => {
+    let stateDb;
     beforeEach(() => {
-      stateDb.clear();
+      stateDb = new StateDB(1);
       stateDb.addState('state1');
     });
 
@@ -73,3 +75,25 @@ describe('State Diagram stateDb', () => {
     });
   });
 });
+
+describe('state db class', () => {
+  let stateDb;
+  beforeEach(() => {
+    stateDb = new StateDB(1);
+  });
+  // This is to ensure that functions used in state JISON are exposed as function from StateDb
+  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 stateDiagram, { parser } from './parser/stateDiagram.jison';
-import stateDb from './stateDb.js';
+import { DEFAULT_DIAGRAM_DIRECTION } from './stateCommon.js';
-import stateDiagram from './parser/stateDiagram.jison';
+import { StateDB } from './stateDb.js';
 
 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(2);
       parser.yy = stateDb;
       stateDiagram.parser.yy = stateDb;
       stateDiagram.parser.yy.clear();
@@ -127,7 +129,6 @@ describe('state diagram V2, ', function () {
         `;
 
         stateDiagram.parser.parse(diagram);
-        stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
 
         const rels = stateDb.getRelations();
         const rel_1_2 = rels.find((rel) => rel.id1 === 'State1' && rel.id2 === 'State2');
@@ -402,7 +403,6 @@ describe('state diagram V2, ', function () {
         `;
 
       stateDiagram.parser.parse(diagram);
-      stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
 
       const states = stateDb.getStates();
       expect(states.get('Active').doc[0].id).toEqual('Idle');
@@ -413,5 +413,34 @@ describe('state diagram V2, ', function () {
       const rel_Active_Active = rels.find((rel) => rel.id1 === 'Active' && rel.id2 === 'Active');
       expect(rel_Active_Active.relationTitle).toEqual('LOG');
     });
+
+    it('should check default diagram direction', () => {
+      const diagram = `
+        stateDiagram
+          [*] --> Still
+          Still --> [*]
+        `;
+
+      parser.parse(diagram);
+
+      // checking default direction if no direction is specified
+      const defaultDir = stateDb.getDirection();
+      expect(defaultDir).toEqual(DEFAULT_DIAGRAM_DIRECTION);
+    });
+
+    it('retrieve the diagram direction correctly', () => {
+      const diagram = `
+        stateDiagram
+          direction LR
+          [*] --> Still
+          Still --> [*]
+        `;
+
+      parser.parse(diagram);
+
+      //retrieve the diagram direction
+      const currentDirection = stateDb.getDirection();
+      expect(currentDirection).toEqual('LR');
+    });
   });
 });

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(2);
+  },
   renderer,
   styles,
   init: (cnf) => {

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(1);
       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(1);
+  },
   renderer,
   styles,
   init: (cnf) => {

packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts

@@ -36,7 +36,6 @@ export const getClasses = function (
   text: string,
   diagramObj: any
 ): Map<string, DiagramStyleClassDef> {
-  diagramObj.db.extract(diagramObj.db.getRootDocV2());
   return diagramObj.db.getClasses();
 };
 

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

@@ -136,7 +136,6 @@ const renderDoc = (doc, diagram, parentId, altBkg, root, domDocument, diagObj) =
     return {};
   });
 
-  diagObj.db.extract(doc);
   const states = diagObj.db.getStates();
   const relations = diagObj.db.getRelations();
 

packages/mermaid/src/mermaidAPI.spec.ts

@@ -71,6 +71,7 @@ import { decodeEntities, encodeEntities } from './utils.js';
 import { toBase64 } from './utils/base64.js';
 import { ClassDB } from './diagrams/class/classDb.js';
 import { FlowDB } from './diagrams/flowchart/flowDb.js';
+import { StateDB } from './diagrams/state/stateDb.js';
 
 /**
  * @see https://vitest.dev/guide/mocking.html Mock part of a module
@@ -836,6 +837,31 @@ graph TD;A--x|text including URL space|B;`)
     });
 
     it('should not modify db when rendering different diagrams', async () => {
+      const stateDiagram1 = await mermaidAPI.getDiagramFromText(
+        `stateDiagram
+            direction LR
+            [*] --> Still
+            Still --> [*]
+            Still --> Moving
+            Moving --> Still
+            Moving --> Crash
+            Crash --> [*]`
+      );
+      const stateDiagram2 = await mermaidAPI.getDiagramFromText(
+        `stateDiagram
+          direction TB
+          [*] --> Still
+          Still --> [*]
+          Still --> Moving
+          Moving --> Still
+          Moving --> Crash
+          Crash --> [*]`
+      );
+      expect(stateDiagram1.db).not.toBe(stateDiagram2.db);
+      assert(stateDiagram1.db instanceof StateDB);
+      assert(stateDiagram2.db instanceof StateDB);
+      expect(stateDiagram1.db.getDirection()).not.toEqual(stateDiagram2.db.getDirection());
+
       const flowDiagram1 = await mermaidAPI.getDiagramFromText(
         `flowchart LR
       A -- text --> B -- text2 --> C`