marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-18 19:54:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Refactor: Change flowDB to class based architecture.
This commit is contained in:
Ashish Jain
2025-01-22 22:41:52 +01:00
committed by GitHub
parent e9e663ffa3 1575a93136
commit 5120ed09ab
22 changed files with 1197 additions and 1130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/new-kiwis-listen.md Normal file
View File

@@ -0,0 +1,5 @@
---
'mermaid': patch
---
fix: `mermaidAPI.getDiagramFromText()` now returns a new different db for each flowchart

63
cypress/platform/saurabh.html
View File

@@ -62,56 +62,23 @@
<body style="display: flex; gap: 2rem; flex-direction: row"> <body style="display: flex; gap: 2rem; flex-direction: row">
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid">
flowchart LR flowchart
A@{ icon: "fa:window-minimize", form: circle } A --> A
E@{ icon: "fa:window-minimize", form: circle } subgraph B
B@{ icon: "fa:bell", form: circle } B1 --> B1
B2@{ icon: "fa:bell", form: circle } end
C@{ icon: "fa:address-book", form: square } subgraph C
D@{ icon: "fa:star-half", form: square } subgraph C1
A --> E C2 --> C2
B --> B2 subgraph D
D1 --> D1
end
D --> D
end
C1 --> C1
end
</pre> </pre>
<pre id="diagram4" class="mermaid2">
flowchart TB
A --test2--> B2@{ icon: "fa:bell", form: "rounded", label: "B2 aiduaid uyawduad uaduabd uyduadb", pos: "b" }
B2 --test--> C
D --> B2 --> E
style B2 fill:#f9f,stroke:#333,stroke-width:4px
</pre
>
<pre id="diagram43" class="mermaid2">
flowchart BT
A --test2--> B2@{ icon: "fa:bell", form: "square", label: "B2", pos: "t", h: 40, w: 30 }
B2 --test--> C
D --> B2 --> E
</pre
>
<pre id="diagram4" class="mermaid2">
flowchart BT
A --test2--> B2@{ icon: "fa:bell", label: "B2 awiugdawu uydgayuiwd wuydguy", pos: "b", h: 40, w: 30 }
B2 --test--> C
</pre
>
<pre id="diagram43" class="mermaid2">
flowchart BT
A --test2--> B2@{ icon: "fa:bell", label: "B2 dawuygd ayuwgd uy", pos: "t", h: 40, w: 30 }
B2 --test--> C
</pre
>
<pre id="diagram6" class="mermaid2">
flowchart TB
A --> B2@{ icon: "fa:bell", form: "circle", label: "test augfuyfavf ydvaubfuac", pos: "t", w: 200, h: 100 } --> C
</pre
>
<pre id="diagram6" class="mermaid2">
flowchart TB
A --> B2@{ icon: "fa:bell", form: "circle", label: "test augfuyfavf ydvaubfuac", pos: "b", w: 200, h: 100 } --> C
D --> B2 --> E
</pre
>
<script type="module"> <script type="module">
import mermaid from './mermaid.esm.mjs'; import mermaid from './mermaid.esm.mjs';
import layouts from './mermaid-layout-elk.esm.mjs'; import layouts from './mermaid-layout-elk.esm.mjs';

37
packages/mermaid/src/diagrams/flowchart/flowDb.spec.ts
View File

@@ -1,9 +1,11 @@
import flowDb from './flowDb.js'; import { FlowDB } from './flowDb.js';
import type { FlowSubGraph } from './types.js'; import type { FlowSubGraph } from './types.js';
describe('flow db subgraphs', () => { describe('flow db subgraphs', () => {
let flowDb: FlowDB;
let subgraphs: FlowSubGraph[]; let subgraphs: FlowSubGraph[];
beforeEach(() => { beforeEach(() => {
flowDb = new FlowDB();
subgraphs = [ subgraphs = [
{ nodes: ['a', 'b', 'c', 'e'] }, { nodes: ['a', 'b', 'c', 'e'] },
{ nodes: ['f', 'g', 'h'] }, { nodes: ['f', 'g', 'h'] },
@@ -44,8 +46,9 @@ describe('flow db subgraphs', () => {
}); });
describe('flow db addClass', () => { describe('flow db addClass', () => {
let flowDb: FlowDB;
beforeEach(() => { beforeEach(() => {
flowDb.clear(); flowDb = new FlowDB();
}); });
it('should detect many classes', () => { it('should detect many classes', () => {
flowDb.addClass('a,b', ['stroke-width: 8px']); flowDb.addClass('a,b', ['stroke-width: 8px']);
@@ -65,3 +68,33 @@ describe('flow db addClass', () => {
expect(classes.get('a')?.styles).toEqual(['stroke-width: 8px']); expect(classes.get('a')?.styles).toEqual(['stroke-width: 8px']);
}); });
}); });
describe('flow db class', () => {
let flowDb: FlowDB;
beforeEach(() => {
flowDb = new FlowDB();
});
// This is to ensure that functions used in flow JISON are exposed as function from FlowDB
it('should have functions used in flow JISON as own property', () => {
const functionsUsedInParser = [
'setDirection',
'addSubGraph',
'setAccTitle',
'setAccDescription',
'addVertex',
'addLink',
'setClass',
'destructLink',
'addClass',
'setClickEvent',
'setTooltip',
'setLink',
'updateLink',
'updateLinkInterpolate',
] as const satisfies (keyof FlowDB)[];
for (const fun of functionsUsedInParser) {
expect(Object.hasOwn(flowDb, fun)).toBe(true);
}
});
});

588
packages/mermaid/src/diagrams/flowchart/flowDb.ts
View File

File diff suppressed because it is too large Load Diff

8
packages/mermaid/src/diagrams/flowchart/flowDiagram.ts
View File

@@ -1,6 +1,6 @@
import type { MermaidConfig } from '../../config.type.js'; import type { MermaidConfig } from '../../config.type.js';
import { setConfig } from '../../diagram-api/diagramAPI.js'; import { setConfig } from '../../diagram-api/diagramAPI.js';
import flowDb from './flowDb.js'; import { FlowDB } from './flowDb.js';
import renderer from './flowRenderer-v3-unified.js'; import renderer from './flowRenderer-v3-unified.js';
// @ts-ignore: JISON doesn't support types // @ts-ignore: JISON doesn't support types
//import flowParser from './parser/flow.jison'; //import flowParser from './parser/flow.jison';
@@ -9,7 +9,9 @@ import flowStyles from './styles.js';
export const diagram = { export const diagram = {
parser: flowParser, parser: flowParser,
db: flowDb, get db() {
return new FlowDB();
},
renderer, renderer,
styles: flowStyles, styles: flowStyles,
init: (cnf: MermaidConfig) => { init: (cnf: MermaidConfig) => {
@@ -21,7 +23,5 @@ export const diagram = {
} }
cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute; cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
setConfig({ flowchart: { arrowMarkerAbsolute: cnf.arrowMarkerAbsolute } }); setConfig({ flowchart: { arrowMarkerAbsolute: cnf.arrowMarkerAbsolute } });
flowDb.clear();
flowDb.setGen('gen-2');
}, },
}; };

3
packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts
View File

@@ -7,7 +7,6 @@ import { getRegisteredLayoutAlgorithm, render } from '../../rendering-util/rende
import { setupViewPortForSVG } from '../../rendering-util/setupViewPortForSVG.js'; import { setupViewPortForSVG } from '../../rendering-util/setupViewPortForSVG.js';
import type { LayoutData } from '../../rendering-util/types.js'; import type { LayoutData } from '../../rendering-util/types.js';
import utils from '../../utils.js'; import utils from '../../utils.js';
import { getDirection } from './flowDb.js';
export const getClasses = function ( export const getClasses = function (
text: string, text: string,
@@ -37,7 +36,7 @@ export const draw = async function (text: string, id: string, _version: string,
log.debug('Data: ', data4Layout); log.debug('Data: ', data4Layout);
// Create the root SVG // Create the root SVG
const svg = getDiagramElement(id, securityLevel); const svg = getDiagramElement(id, securityLevel);
const direction = getDirection(); const direction = diag.db.getDirection();
data4Layout.type = diag.type; data4Layout.type = diag.type;
data4Layout.layoutAlgorithm = getRegisteredLayoutAlgorithm(layout); data4Layout.layoutAlgorithm = getRegisteredLayoutAlgorithm(layout);

4
packages/mermaid/src/diagrams/flowchart/parser/flow-arrows.spec.js
View File

@@ -1,4 +1,4 @@
import flowDb from '../flowDb.js'; import { FlowDB } from '../flowDb.js';
import flow from './flowParser.ts'; import flow from './flowParser.ts';
import { setConfig } from '../../../config.js'; import { setConfig } from '../../../config.js';
@@ -8,7 +8,7 @@ setConfig({
describe('[Arrows] when parsing', () => { describe('[Arrows] when parsing', () => {
beforeEach(function () { beforeEach(function () {
flow.parser.yy = flowDb; flow.parser.yy = new FlowDB();
flow.parser.yy.clear(); flow.parser.yy.clear();
}); });

4
packages/mermaid/src/diagrams/flowchart/parser/flow-comments.spec.js
View File

@@ -1,4 +1,4 @@
import flowDb from '../flowDb.js'; import { FlowDB } from '../flowDb.js';
import flow from './flowParser.ts'; import flow from './flowParser.ts';
import { setConfig } from '../../../config.js'; import { setConfig } from '../../../config.js';
import { cleanupComments } from '../../../diagram-api/comments.js'; import { cleanupComments } from '../../../diagram-api/comments.js';
@@ -9,7 +9,7 @@ setConfig({
describe('[Comments] when parsing', () => { describe('[Comments] when parsing', () => {
beforeEach(function () { beforeEach(function () {
flow.parser.yy = flowDb; flow.parser.yy = new FlowDB();
flow.parser.yy.clear(); flow.parser.yy.clear();
}); });

4
packages/mermaid/src/diagrams/flowchart/parser/flow-direction.spec.js
View File

@@ -1,4 +1,4 @@
import flowDb from '../flowDb.js'; import { FlowDB } from '../flowDb.js';
import flow from './flowParser.ts'; import flow from './flowParser.ts';
import { setConfig } from '../../../config.js'; import { setConfig } from '../../../config.js';
@@ -8,7 +8,7 @@ setConfig({
describe('when parsing directions', function () { describe('when parsing directions', function () {
beforeEach(function () { beforeEach(function () {
flow.parser.yy = flowDb; flow.parser.yy = new FlowDB();
flow.parser.yy.clear(); flow.parser.yy.clear();
flow.parser.yy.setGen('gen-2'); flow.parser.yy.setGen('gen-2');
}); });

4
packages/mermaid/src/diagrams/flowchart/parser/flow-edges.spec.js
View File

@@ -1,4 +1,4 @@
import flowDb from '../flowDb.js'; import { FlowDB } from '../flowDb.js';
import flow from './flowParser.ts'; import flow from './flowParser.ts';
import { setConfig } from '../../../config.js'; import { setConfig } from '../../../config.js';
@@ -63,7 +63,7 @@ const regularEdges = [
describe('[Edges] when parsing', () => { describe('[Edges] when parsing', () => {
beforeEach(function () { beforeEach(function () {
flow.parser.yy = flowDb; flow.parser.yy = new FlowDB();
flow.parser.yy.clear(); flow.parser.yy.clear();
}); });

4
packages/mermaid/src/diagrams/flowchart/parser/flow-huge.spec.js
View File

@@ -1,4 +1,4 @@
import flowDb from '../flowDb.js'; import { FlowDB } from '../flowDb.js';
import flow from './flowParser.ts'; import flow from './flowParser.ts';
import { setConfig } from '../../../config.js'; import { setConfig } from '../../../config.js';
@@ -8,7 +8,7 @@ setConfig({
describe('[Text] when parsing', () => { describe('[Text] when parsing', () => {
beforeEach(function () { beforeEach(function () {
flow.parser.yy = flowDb; flow.parser.yy = new FlowDB();
flow.parser.yy.clear(); flow.parser.yy.clear();
}); });

4
packages/mermaid/src/diagrams/flowchart/parser/flow-interactions.spec.js
View File

@@ -1,4 +1,4 @@
import flowDb from '../flowDb.js'; import { FlowDB } from '../flowDb.js';
import flow from './flowParser.ts'; import flow from './flowParser.ts';
import { setConfig } from '../../../config.js'; import { setConfig } from '../../../config.js';
import { vi } from 'vitest'; import { vi } from 'vitest';
@@ -9,7 +9,9 @@ setConfig({
}); });
describe('[Interactions] when parsing', () => { describe('[Interactions] when parsing', () => {
let flowDb;
beforeEach(function () { beforeEach(function () {
flowDb = new FlowDB();
flow.parser.yy = flowDb; flow.parser.yy = flowDb;
flow.parser.yy.clear(); flow.parser.yy.clear();
}); });

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

@@ -1,4 +1,4 @@
import flowDb from '../flowDb.js'; import { FlowDB } from '../flowDb.js';
import flow from './flowParser.ts'; import flow from './flowParser.ts';
import { setConfig } from '../../../config.js'; import { setConfig } from '../../../config.js';
@@ -8,7 +8,7 @@ setConfig({
describe('[Lines] when parsing', () => { describe('[Lines] when parsing', () => {
beforeEach(function () { beforeEach(function () {
flow.parser.yy = flowDb; flow.parser.yy = new FlowDB();
flow.parser.yy.clear(); flow.parser.yy.clear();
}); });

4
packages/mermaid/src/diagrams/flowchart/parser/flow-md-string.spec.js
View File

@@ -1,4 +1,4 @@
import flowDb from '../flowDb.js'; import { FlowDB } from '../flowDb.js';
import flow from './flowParser.ts'; import flow from './flowParser.ts';
import { setConfig } from '../../../config.js'; import { setConfig } from '../../../config.js';
@@ -8,7 +8,7 @@ setConfig({
describe('parsing a flow chart with markdown strings', function () { describe('parsing a flow chart with markdown strings', function () {
beforeEach(function () { beforeEach(function () {
flow.parser.yy = flowDb; flow.parser.yy = new FlowDB();
flow.parser.yy.clear(); flow.parser.yy.clear();
}); });

4
packages/mermaid/src/diagrams/flowchart/parser/flow-node-data.spec.js
View File

@@ -1,4 +1,4 @@
import flowDb from '../flowDb.js'; import { FlowDB } from '../flowDb.js';
import flow from './flowParser.ts'; import flow from './flowParser.ts';
import { setConfig } from '../../../config.js'; import { setConfig } from '../../../config.js';
@@ -8,7 +8,7 @@ setConfig({
describe('when parsing directions', function () { describe('when parsing directions', function () {
beforeEach(function () { beforeEach(function () {
flow.parser.yy = flowDb; flow.parser.yy = new FlowDB();
flow.parser.yy.clear(); flow.parser.yy.clear();
flow.parser.yy.setGen('gen-2'); flow.parser.yy.setGen('gen-2');
}); });

4
packages/mermaid/src/diagrams/flowchart/parser/flow-singlenode.spec.js
View File

@@ -1,4 +1,4 @@
import flowDb from '../flowDb.js'; import { FlowDB } from '../flowDb.js';
import flow from './flowParser.ts'; import flow from './flowParser.ts';
import { setConfig } from '../../../config.js'; import { setConfig } from '../../../config.js';
@@ -31,7 +31,7 @@ const specialChars = ['#', ':', '0', '&', ',', '*', '.', '\\', 'v', '-', '/', '_
describe('[Singlenodes] when parsing', () => { describe('[Singlenodes] when parsing', () => {
beforeEach(function () { beforeEach(function () {
flow.parser.yy = flowDb; flow.parser.yy = new FlowDB();
flow.parser.yy.clear(); flow.parser.yy.clear();
}); });

4
packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js
View File

@@ -1,4 +1,4 @@
import flowDb from '../flowDb.js'; import { FlowDB } from '../flowDb.js';
import flow from './flowParser.ts'; import flow from './flowParser.ts';
import { setConfig } from '../../../config.js'; import { setConfig } from '../../../config.js';
@@ -8,7 +8,7 @@ setConfig({
describe('[Style] when parsing', () => { describe('[Style] when parsing', () => {
beforeEach(function () { beforeEach(function () {
flow.parser.yy = flowDb; flow.parser.yy = new FlowDB();
flow.parser.yy.clear(); flow.parser.yy.clear();
flow.parser.yy.setGen('gen-2'); flow.parser.yy.setGen('gen-2');
}); });

4
packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
View File

@@ -1,4 +1,4 @@
import flowDb from '../flowDb.js'; import { FlowDB } from '../flowDb.js';
import flow from './flowParser.ts'; import flow from './flowParser.ts';
import { setConfig } from '../../../config.js'; import { setConfig } from '../../../config.js';
@@ -8,7 +8,7 @@ setConfig({
describe('[Text] when parsing', () => { describe('[Text] when parsing', () => {
beforeEach(function () { beforeEach(function () {
flow.parser.yy = flowDb; flow.parser.yy = new FlowDB();
flow.parser.yy.clear(); flow.parser.yy.clear();
}); });

4
packages/mermaid/src/diagrams/flowchart/parser/flow-vertice-chaining.spec.js
View File

@@ -1,4 +1,4 @@
import flowDb from '../flowDb.js'; import { FlowDB } from '../flowDb.js';
import flow from './flowParser.ts'; import flow from './flowParser.ts';
import { setConfig } from '../../../config.js'; import { setConfig } from '../../../config.js';
@@ -8,7 +8,7 @@ setConfig({
describe('when parsing flowcharts', function () { describe('when parsing flowcharts', function () {
beforeEach(function () { beforeEach(function () {
flow.parser.yy = flowDb; flow.parser.yy = new FlowDB();
flow.parser.yy.clear(); flow.parser.yy.clear();
flow.parser.yy.setGen('gen-2'); flow.parser.yy.setGen('gen-2');
}); });

4
packages/mermaid/src/diagrams/flowchart/parser/flow.spec.js
View File

@@ -1,4 +1,4 @@
import flowDb from '../flowDb.js'; import { FlowDB } from '../flowDb.js';
import flow from './flowParser.ts'; import flow from './flowParser.ts';
import { cleanupComments } from '../../../diagram-api/comments.js'; import { cleanupComments } from '../../../diagram-api/comments.js';
import { setConfig } from '../../../config.js'; import { setConfig } from '../../../config.js';
@@ -9,7 +9,7 @@ setConfig({
describe('parsing a flow chart', function () { describe('parsing a flow chart', function () {
beforeEach(function () { beforeEach(function () {
flow.parser.yy = flowDb; flow.parser.yy = new FlowDB();
flow.parser.yy.clear(); flow.parser.yy.clear();
}); });

4
packages/mermaid/src/diagrams/flowchart/parser/subgraph.spec.js
View File

@@ -1,4 +1,4 @@
import flowDb from '../flowDb.js'; import { FlowDB } from '../flowDb.js';
import flow from './flowParser.ts'; import flow from './flowParser.ts';
import { setConfig } from '../../../config.js'; import { setConfig } from '../../../config.js';
@@ -8,7 +8,7 @@ setConfig({
describe('when parsing subgraphs', function () { describe('when parsing subgraphs', function () {
beforeEach(function () { beforeEach(function () {
flow.parser.yy = flowDb; flow.parser.yy = new FlowDB();
flow.parser.yy.clear(); flow.parser.yy.clear();
flow.parser.yy.setGen('gen-2'); flow.parser.yy.setGen('gen-2');
}); });

53
packages/mermaid/src/mermaidAPI.spec.ts
View File

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