Merge branch 'develop' into 6730-gantt-excludes-datetime-format

.changeset/pretty-falcons-say.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+chore: Updated TreeMapDB to use class based approach

.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/weak-files-stare.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+chore: Update MindmapDB to use class based approach

.github/lychee.toml

@@ -52,6 +52,9 @@ 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/autofix.yml

@@ -42,4 +42,4 @@ jobs:
         working-directory: ./packages/mermaid
         run: pnpm run docs:build
 
-      - uses: autofix-ci/action@551dded8c6cc8a1054039c8bc0b8b48c51dfc6ef # main
+      - uses: autofix-ci/action@635ffb0c9798bd160680f18fd73371e355b85f27 # main

__mocks__/d3.ts

@@ -1,13 +0,0 @@
-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.config.ts

@@ -26,7 +26,10 @@ export default eyesPlugin(
         config.env.useArgos = process.env.RUN_VISUAL_TEST === 'true';
 
         if (config.env.useArgos) {
-          registerArgosTask(on, config);
+          registerArgosTask(on, config, {
+            // Enable upload to Argos only when it runs on CI.
+            uploadToArgos: !!process.env.CI,
+          });
         } else {
           addMatchImageSnapshotPlugin(on, config);
         }

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 renderers. (The renderers are tested with integration tests.)
+Unit tests are mandatory for all code except the layout tests. (The layouts are tested with integration tests.)
 
 We use [Vitest](https://vitest.dev) to run unit tests.
 
@@ -327,6 +327,30 @@ 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.

package.json

@@ -64,7 +64,7 @@
   },
   "devDependencies": {
     "@applitools/eyes-cypress": "^3.44.9",
-    "@argos-ci/cypress": "^4.0.3",
+    "@argos-ci/cypress": "^5.0.2",
     "@changesets/changelog-github": "^0.5.1",
     "@changesets/cli": "^2.27.12",
     "@cspell/eslint-plugin": "^8.19.3",
@@ -83,13 +83,13 @@
     "@vitest/spy": "^3.0.6",
     "@vitest/ui": "^3.0.6",
     "ajv": "^8.17.1",
-    "chokidar": "4.0.3",
+    "chokidar": "3.6.0",
     "concurrently": "^9.1.2",
     "cors": "^2.8.5",
     "cpy-cli": "^5.0.0",
     "cross-env": "^7.0.3",
     "cspell": "^9.1.3",
-    "cypress": "^14.0.3",
+    "cypress": "^14.5.1",
     "cypress-image-snapshot": "^4.0.1",
     "cypress-split": "^1.24.14",
     "esbuild": "^0.25.0",
@@ -112,7 +112,7 @@
     "jest": "^30.0.4",
     "jison": "^0.4.18",
     "js-yaml": "^4.1.0",
-    "jsdom": "^26.0.0",
+    "jsdom": "^26.1.0",
     "langium-cli": "3.3.0",
     "lint-staged": "^16.1.2",
     "markdown-table": "^3.0.4",
@@ -139,8 +139,13 @@
       "roughjs": "patches/roughjs.patch"
     },
     "onlyBuiltDependencies": [
+      "canvas",
       "cypress",
       "esbuild"
+    ],
+    "ignoredBuiltDependencies": [
+      "sharp",
+      "vue-demi"
     ]
   }
 }

packages/mermaid/package.json

@@ -79,7 +79,7 @@
     "dagre-d3-es": "7.0.11",
     "dayjs": "^1.11.13",
     "dompurify": "^3.2.5",
-    "katex": "^0.16.9",
+    "katex": "^0.16.22",
     "khroma": "^2.1.0",
     "lodash-es": "^4.17.21",
     "marked": "^16.0.0",
@@ -105,13 +105,14 @@
     "@types/stylis": "^4.2.7",
     "@types/uuid": "^10.0.0",
     "ajv": "^8.17.1",
-    "chokidar": "4.0.3",
+    "canvas": "^3.1.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.0.0",
+    "jsdom": "^26.1.0",
     "json-schema-to-typescript": "^15.0.4",
     "micromatch": "^4.0.8",
     "path-browserify": "^1.0.1",

packages/mermaid/src/accessibility.spec.ts

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

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

@@ -379,6 +379,15 @@ function layoutArchitecture(
           },
         },
       ],
+      layout: {
+        name: 'grid',
+        boundingBox: {
+          x1: 0,
+          x2: 100,
+          y1: 0,
+          y2: 100,
+        },
+      },
     });
     // Remove element after layout
     renderEl.remove();

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

@@ -1,12 +1,14 @@
 // @ts-ignore: JISON doesn't support types
 import parser from './parser/mindmap.jison';
-import db from './mindmapDb.js';
+import { MindmapDB } 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 = {
-  db,
+  get db() {
+    return new MindmapDB();
+  },
   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 = mindmapDB;
+    mindmap.yy = new MindmapDB();
     mindmap.yy.clear();
     setLogLevel('trace');
   });

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

@@ -5,70 +5,6 @@ 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,
@@ -78,82 +14,149 @@ 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 default db;
+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;
+  }
+}

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

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

@@ -1,8 +1,9 @@
 import { createText } from '../../rendering-util/createText.js';
-import type { FilledMindMapNode, MindmapDB } from './mindmapTypes.js';
+import type { FilledMindMapNode } 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/sequence/svgDraw.js

@@ -524,7 +524,7 @@ export const drawBox = function (elem, box, conf) {
       box.name,
       g,
       box.x,
-      box.y + (box.textMaxHeight || 0) / 2,
+      box.y + conf.boxTextMargin + (box.textMaxHeight || 0) / 2,
       box.width,
       0,
       { class: 'text' },

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

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

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

@@ -1,12 +1,14 @@
 import type { DiagramDefinition } from '../../diagram-api/types.js';
-import { db } from './db.js';
+import { TreeMapDB } from './db.js';
 import { parser } from './parser.js';
 import { renderer } from './renderer.js';
 import styles from './styles.js';
 
 export const diagram: DiagramDefinition = {
   parser,
-  db,
+  get db() {
+    return new TreeMapDB();
+  },
   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 { db } from './db.js';
+import type { TreemapNode, TreemapAst, TreemapDB } from './types.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) => {
+const populate = (ast: TreemapAst, db: TreemapDB) => {
   // We need to bypass the type checking for populateCommonDb
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   populateCommonDb(ast as any, db);
@@ -84,6 +84,8 @@ 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
@@ -91,7 +93,13 @@ 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);
-      populate(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);
     } 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 renderers. (The renderers are tested with integration tests.)
+Unit tests are mandatory for all code except the layout tests. (The layouts are tested with integration tests.)
 
 We use [Vitest](https://vitest.dev) to run unit tests.
 
@@ -328,6 +328,30 @@ 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/mermaidAPI.spec.ts

@@ -1,40 +1,5 @@
 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';
@@ -75,6 +40,9 @@ 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
@@ -225,63 +193,49 @@ 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
 
-    it('appends a div node', () => {
+    jsdomIt('appends a div node', ({ body }) => {
-      appendDivSvgG(fauxParentNode, 'theId', 'dtheId');
+      appendDivSvgG(body, 'theId', 'dtheId');
-      expect(parent_append_spy).toHaveBeenCalledWith('div');
+      const divNode = ensureNodeFromSelector('div');
-      expect(div_append_spy).toHaveBeenCalledWith('svg');
+      const svgNode = ensureNodeFromSelector('svg', divNode);
+      ensureNodeFromSelector('g', svgNode);
     });
-    it('the id for the div is "d" with the id appended', () => {
+    jsdomIt('the id for the div is "d" with the id appended', ({ body }) => {
-      appendDivSvgG(fauxParentNode, 'theId', 'dtheId');
+      appendDivSvgG(body, 'theId', 'dtheId');
-      expect(div_attr_spy).toHaveBeenCalledWith('id', 'dtheId');
+      const divNode = ensureNodeFromSelector('div');
+      expect(divNode?.getAttribute('id')).toBe('dtheId');
     });
 
-    it('sets the style for the div if one is given', () => {
+    jsdomIt('sets the style for the div if one is given', ({ body }) => {
-      appendDivSvgG(fauxParentNode, 'theId', 'dtheId', 'given div style', 'given x link');
+      appendDivSvgG(body, 'theId', 'dtheId', 'given div style', 'given x link');
-      expect(div_attr_spy).toHaveBeenCalledWith('style', 'given div style');
+      const divNode = ensureNodeFromSelector('div');
+      expect(divNode?.getAttribute('style')).toBe('given div style');
     });
 
-    it('appends a svg node to the div node', () => {
+    jsdomIt('sets the svg width to 100%', ({ body }) => {
-      appendDivSvgG(fauxParentNode, 'theId', 'dtheId');
+      appendDivSvgG(body, 'theId', 'dtheId');
-      expect(div_attr_spy).toHaveBeenCalledWith('id', 'dtheId');
+      const svgNode = ensureNodeFromSelector('div > svg');
+      expect(svgNode.getAttribute('width')).toBe('100%');
     });
-    it('sets the svg width to 100%', () => {
+    jsdomIt('the svg id is the id', ({ body }) => {
-      appendDivSvgG(fauxParentNode, 'theId', 'dtheId');
+      appendDivSvgG(body, 'theId', 'dtheId');
-      expect(svg_attr_spy).toHaveBeenCalledWith('width', '100%');
+      const svgNode = ensureNodeFromSelector('div > svg');
+      expect(svgNode.getAttribute('id')).toBe('theId');
     });
-    it('the svg id is the id', () => {
+    jsdomIt('the svg xml namespace is the 2000 standard', ({ body }) => {
-      appendDivSvgG(fauxParentNode, 'theId', 'dtheId');
+      appendDivSvgG(body, 'theId', 'dtheId');
-      expect(svg_attr_spy).toHaveBeenCalledWith('id', 'theId');
+      const svgNode = ensureNodeFromSelector('div > svg');
+      expect(svgNode.getAttribute('xmlns')).toBe('http://www.w3.org/2000/svg');
     });
-    it('the svg xml namespace is the 2000 standard', () => {
+    jsdomIt('sets the  svg xlink if one is given', ({ body }) => {
-      appendDivSvgG(fauxParentNode, 'theId', 'dtheId');
+      appendDivSvgG(body, 'theId', 'dtheId', 'div style', 'given x link');
-      expect(svg_attr_spy).toHaveBeenCalledWith('xmlns', 'http://www.w3.org/2000/svg');
+      const svgNode = ensureNodeFromSelector('div > svg');
+      expect(svgNode.getAttribute('xmlns:xlink')).toBe('given x link');
     });
-    it('sets the  svg xlink if one is given', () => {
+    jsdomIt('returns the given parentRoot d3 nodes', ({ body }) => {
-      appendDivSvgG(fauxParentNode, 'theId', 'dtheId', 'div style', 'given x link');
+      expect(appendDivSvgG(body, 'theId', 'dtheId')).toEqual(body);
-      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);
     });
   });
 
@@ -782,9 +736,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 than was 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 from what is put in the diagram text (ex: in -v2 diagrams)
     const diagramTypesAndExpectations = [
-      { textDiagramType: 'C4Context', expectedType: 'c4' },
+      // { textDiagramType: 'C4Context', expectedType: 'c4' }, TODO : setAccTitle not called in C4 jison parser
       { textDiagramType: 'classDiagram', expectedType: 'class' },
       { textDiagramType: 'classDiagram-v2', expectedType: 'classDiagram' },
       { textDiagramType: 'erDiagram', expectedType: 'er' },
@@ -796,7 +750,11 @@ 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' },
+      {
+        textDiagramType: 'xychart-beta',
+        expectedType: 'xychart',
+        content: 'x-axis "Attempts" 10000 --> 10000\ny-axis "Passing tests" 1 --> 1\nbar [1]',
+      },
       { textDiagramType: 'requirementDiagram', expectedType: 'requirement' },
       { textDiagramType: 'sequenceDiagram', expectedType: 'sequence' },
       { textDiagramType: 'stateDiagram-v2', expectedType: 'stateDiagram' },
@@ -812,20 +770,25 @@ graph TD;A--x|text including URL space|B;`)
       diagramTypesAndExpectations.forEach((testedDiagram) => {
         describe(`${testedDiagram.textDiagramType}`, () => {
           const diagramType = testedDiagram.textDiagramType;
-          const diagramText = `${diagramType}\n accTitle: ${a11yTitle}\n accDescr: ${a11yDescr}\n`;
+          const content = testedDiagram.content || '';
+          const diagramText = `${diagramType}\n accTitle: ${a11yTitle}\n accDescr: ${a11yDescr}\n ${content}`;
           const expectedDiagramType = testedDiagram.expectedType;
 
-          it('should set aria-roledescription to the diagram type AND should call addSVGa11yTitleDescription', async () => {
+          jsdomIt(
-            const a11yDiagramInfo_spy = vi.spyOn(accessibility, 'setA11yDiagramInfo');
+            'should set aria-roledescription to the diagram type AND should call addSVGa11yTitleDescription',
-            const a11yTitleDesc_spy = vi.spyOn(accessibility, 'addSVGa11yTitleDescription');
+            async () => {
-            const result = await mermaidAPI.render(id, diagramText);
+              const { svg } = await mermaidAPI.render(id, diagramText);
-            expect(result.diagramType).toBe(expectedDiagramType);
+              const dom = new JSDOM(svg);
-            expect(a11yDiagramInfo_spy).toHaveBeenCalledWith(
+              const svgNode = ensureNodeFromSelector('svg', dom.window.document);
-              expect.anything(),
+              const descNode = ensureNodeFromSelector('desc', svgNode);
-              expectedDiagramType
+              const titleNode = ensureNodeFromSelector('title', svgNode);
-            );
+              expect(svgNode.getAttribute('aria-roledescription')).toBe(expectedDiagramType);
-            expect(a11yTitleDesc_spy).toHaveBeenCalled();
+              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);
+            }
+          );
         });
       });
     });

packages/mermaid/src/tests/MockedD3.ts

@@ -1,150 +0,0 @@
-/**
- * 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

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

packages/mermaid/src/tests/util.ts

@@ -26,6 +26,10 @@ ${'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()
@@ -42,3 +46,83 @@ 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!;
+}

packages/mermaid/src/utils.spec.ts

@@ -1,11 +1,11 @@
-import { vi } from 'vitest';
+import { expect, vi } from 'vitest';
 import utils, { calculatePoint, cleanAndMerge, detectDirective } from './utils.js';
 import assignWithDepth from './assignWithDepth.js';
 import { detectType } from './diagram-api/detectType.js';
 import { addDiagrams } from './diagram-api/diagram-orchestration.js';
 import memoize from 'lodash-es/memoize.js';
-import { MockedD3 } from './tests/MockedD3.js';
 import { preprocessDiagram } from './preprocess.js';
+import { MOCKED_BBOX, ensureNodeFromSelector, jsdomIt } from './tests/util.js';
 
 addDiagrams();
 
@@ -369,53 +369,34 @@ describe('when initializing the id generator', function () {
 });
 
 describe('when inserting titles', function () {
-  const svg = new MockedD3('svg');
+  jsdomIt('does nothing if the title is empty', function ({ svg }) {
-  const mockedElement = {
-    getBBox: vi.fn().mockReturnValue({ x: 10, y: 11, width: 100, height: 200 }),
-  };
-  const fauxTitle = new MockedD3('title');
-
-  beforeEach(() => {
-    svg.node = vi.fn().mockReturnValue(mockedElement);
-  });
-
-  it('does nothing if the title is empty', function () {
-    const svgAppendSpy = vi.spyOn(svg, 'append');
     utils.insertTitle(svg, 'testClass', 0, '');
-    expect(svgAppendSpy).not.toHaveBeenCalled();
+    const titleNode = document.querySelector('svg > text');
+    expect(titleNode).toBeNull();
   });
 
-  it('appends the title as a text item with the given title text', function () {
+  jsdomIt('appends the title as a text item with the given title text', function ({ svg }) {
-    const svgAppendSpy = vi.spyOn(svg, 'append').mockReturnValue(fauxTitle);
-    const titleTextSpy = vi.spyOn(fauxTitle, 'text');
-
     utils.insertTitle(svg, 'testClass', 5, 'test title');
-    expect(svgAppendSpy).toHaveBeenCalled();
+    const titleNode = ensureNodeFromSelector('svg > text');
-    expect(titleTextSpy).toHaveBeenCalledWith('test title');
+    expect(titleNode.innerHTML).toBe('test title');
   });
 
-  it('x value is the bounds x position + half of the bounds width', () => {
+  jsdomIt('x value is the bounds x position + half of the bounds width', ({ svg }) => {
-    vi.spyOn(svg, 'append').mockReturnValue(fauxTitle);
-    const titleAttrSpy = vi.spyOn(fauxTitle, 'attr');
-
     utils.insertTitle(svg, 'testClass', 5, 'test title');
-    expect(titleAttrSpy).toHaveBeenCalledWith('x', 10 + 100 / 2);
+    const titleNode = ensureNodeFromSelector('svg > text');
+    expect(titleNode.getAttribute('x')).toBe(`${MOCKED_BBOX.x + MOCKED_BBOX.width / 2}`);
   });
 
-  it('y value is the negative of given title top margin', () => {
+  jsdomIt('y value is the negative of given title top margin', ({ svg }) => {
-    vi.spyOn(svg, 'append').mockReturnValue(fauxTitle);
-    const titleAttrSpy = vi.spyOn(fauxTitle, 'attr');
-
     utils.insertTitle(svg, 'testClass', 5, 'test title');
-    expect(titleAttrSpy).toHaveBeenCalledWith('y', -5);
+    const titleNode = ensureNodeFromSelector('svg > text');
+    expect(titleNode.getAttribute('y')).toBe(`${MOCKED_BBOX.y - 5}`);
   });
 
-  it('class is the given css class', () => {
+  jsdomIt('class is the given css class', ({ svg }) => {
-    vi.spyOn(svg, 'append').mockReturnValue(fauxTitle);
-    const titleAttrSpy = vi.spyOn(fauxTitle, 'attr');
-
     utils.insertTitle(svg, 'testClass', 5, 'test title');
-    expect(titleAttrSpy).toHaveBeenCalledWith('class', 'testClass');
+    const titleNode = ensureNodeFromSelector('svg > text');
+    expect(titleNode.getAttribute('class')).toBe('testClass');
   });
 });
 

renovate.json

@@ -40,6 +40,10 @@
     {
       "groupName": "dompurify",
       "matchPackagePatterns": ["dompurify"]
+    },
+    {
+      "matchPackageNames": ["chokidar"],
+      "enabled": false
     }
   ],
   "dependencyDashboard": false,

vite.config.ts

@@ -16,7 +16,6 @@ export default defineConfig({
     environment: 'jsdom',
     globals: true,
     // TODO: should we move this to a mermaid-core package?
-    setupFiles: ['packages/mermaid/src/tests/setup.ts'],
     coverage: {
       provider: 'v8',
       reporter: ['text', 'json', 'html', 'lcov'],