marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-15 02:04:08 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' into update-requirement-diagram

Browse Source
This commit is contained in:
Yari DeWalt
2025-01-24 10:43:23 -08:00
committed by GitHub
parent 22bc234ff3 74a56fc58a
commit cc2373ea89
46 changed files with 2119 additions and 1809 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/bright-ads-exist.md Normal file
View File

@@ -0,0 +1,5 @@
---
'mermaid': patch
---
Fixes for consistent edge id creation & handling edge cases for animate edge feature

5
.changeset/chatty-elephants-warn.md Normal file
View File

@@ -0,0 +1,5 @@
---
'mermaid': patch
---
Fix for issue #6195 - allowing @ signs inside node labels

5
.changeset/chilly-years-cheat.md Normal file
View File

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

5
.changeset/dull-tips-cough.md Normal file
View File

@@ -0,0 +1,5 @@
---
'mermaid': patch
---
fix: revert state db to resolve getData returning empty nodes and edges

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

5
.changeset/stupid-dots-do.md Normal file
View File

@@ -0,0 +1,5 @@
---
'mermaid': patch
---
fix: Gantt, Sankey and User Journey diagram are now able to pick font-family from mermaid config.

5
.changeset/witty-crews-smell.md Normal file
View File

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

26
cypress/platform/knsv2.html
View File

@@ -78,9 +78,11 @@
font-family: monospace; font-family: monospace;
font-size: 72px; font-size: 72px;
} }
pre { pre {
width: 100%; width: 100%;
} }
/* tspan { /* tspan {
font-size: 6px !important; font-size: 6px !important;
} */ } */
@@ -103,16 +105,20 @@
</head> </head>
<body> <body>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
flowchart LR flowchart LR
A --> B AB["apa@apa@"] --> B(("`apa@apa`"))
</pre>
<pre id="diagram4" class="mermaid">
flowchart
D(("for D"))
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid">
flowchart LR flowchart LR
A e1@==> B A e1@==> B
e1@{ animate: true} e1@{ animate: true}
</pre> </pre>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
flowchart LR flowchart LR
A e1@--> B A e1@--> B
classDef animate stroke-width:2,stroke-dasharray:10\,8,stroke-dashoffset:-180,animation: edge-animation-frame 6s linear infinite, stroke-linecap: round classDef animate stroke-width:2,stroke-dasharray:10\,8,stroke-dashoffset:-180,animation: edge-animation-frame 6s linear infinite, stroke-linecap: round
@@ -126,7 +132,7 @@ flowchart LR
class e1 animate class e1 animate
</pre> </pre>
<h2>Mermaid - edge-animation-slow</h2> <h2>Mermaid - edge-animation-slow</h2>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
flowchart LR flowchart LR
A e1@--> B A e1@--> B
e1@{ animation: fast} e1@{ animation: fast}
@@ -428,7 +434,10 @@ kanban
window.callback = function () { window.callback = function () {
alert('A callback was triggered'); alert('A callback was triggered');
}; };
mermaid.initialize({ function callback() {
alert('It worked');
}
await mermaid.initialize({
// theme: 'base', // theme: 'base',
// theme: 'default', // theme: 'default',
// theme: 'forest', // theme: 'forest',
@@ -440,9 +449,11 @@ kanban
// layout: 'fixed', // layout: 'fixed',
// htmlLabels: false, // htmlLabels: false,
flowchart: { titleTopMargin: 10 }, flowchart: { titleTopMargin: 10 },
// fontFamily: 'Caveat', // fontFamily: 'Caveat',
// fontFamily: 'Kalam', // fontFamily: 'Kalam',
// fontFamily: 'courier', // fontFamily: 'courier',
fontFamily: 'arial',
sequence: { sequence: {
actorFontFamily: 'courier', actorFontFamily: 'courier',
noteFontFamily: 'courier', noteFontFamily: 'courier',
@@ -454,10 +465,9 @@ kanban
fontSize: 12, fontSize: 12,
logLevel: 0, logLevel: 0,
securityLevel: 'loose', securityLevel: 'loose',
callback,
}); });
function callback() {
alert('It worked');
}
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
console.error('In parse error:'); console.error('In parse error:');
console.error(err); console.error(err);

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';

6
docs/config/setup/interfaces/mermaid.LayoutData.md
View File

@@ -20,7 +20,7 @@
#### Defined in #### Defined in
[packages/mermaid/src/rendering-util/types.ts:147](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L147) [packages/mermaid/src/rendering-util/types.ts:148](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L148)
--- ---
@@ -30,7 +30,7 @@
#### Defined in #### Defined in
[packages/mermaid/src/rendering-util/types.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L146) [packages/mermaid/src/rendering-util/types.ts:147](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L147)
--- ---
@@ -40,4 +40,4 @@
#### Defined in #### Defined in
[packages/mermaid/src/rendering-util/types.ts:145](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L145) [packages/mermaid/src/rendering-util/types.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L146)

477
packages/mermaid/src/diagrams/class/classDb.ts
View File

@@ -24,23 +24,53 @@ import type {
Interface, Interface,
} from './classTypes.js'; } from './classTypes.js';
import type { Node, Edge } from '../../rendering-util/types.js'; import type { Node, Edge } from '../../rendering-util/types.js';
import type { DiagramDB } from '../../diagram-api/types.js';
const MERMAID_DOM_ID_PREFIX = 'classId-'; const MERMAID_DOM_ID_PREFIX = 'classId-';
let relations: ClassRelation[] = [];
let classes = new Map<string, ClassNode>();
const styleClasses = new Map<string, StyleClass>();
let notes: ClassNote[] = [];
let interfaces: Interface[] = [];
let classCounter = 0; let classCounter = 0;
let namespaces = new Map<string, NamespaceNode>();
let namespaceCounter = 0;
let functions: any[] = [];
const sanitizeText = (txt: string) => common.sanitizeText(txt, getConfig()); const sanitizeText = (txt: string) => common.sanitizeText(txt, getConfig());
const splitClassNameAndType = function (_id: string) { export class ClassDB implements DiagramDB {
private relations: ClassRelation[] = [];
private classes = new Map<string, ClassNode>();
private readonly styleClasses = new Map<string, StyleClass>();
private notes: ClassNote[] = [];
private interfaces: Interface[] = [];
// private static classCounter = 0;
private namespaces = new Map<string, NamespaceNode>();
private namespaceCounter = 0;
private functions: any[] = [];
constructor() {
this.functions.push(this.setupToolTips.bind(this));
this.clear();
// Needed for JISON since it only supports direct properties
this.addRelation = this.addRelation.bind(this);
this.addClassesToNamespace = this.addClassesToNamespace.bind(this);
this.addNamespace = this.addNamespace.bind(this);
this.setCssClass = this.setCssClass.bind(this);
this.addMembers = this.addMembers.bind(this);
this.addClass = this.addClass.bind(this);
this.setClassLabel = this.setClassLabel.bind(this);
this.addAnnotation = this.addAnnotation.bind(this);
this.addMember = this.addMember.bind(this);
this.cleanupLabel = this.cleanupLabel.bind(this);
this.addNote = this.addNote.bind(this);
this.defineClass = this.defineClass.bind(this);
this.setDirection = this.setDirection.bind(this);
this.setLink = this.setLink.bind(this);
this.bindFunctions = this.bindFunctions.bind(this);
this.clear = this.clear.bind(this);
this.setTooltip = this.setTooltip.bind(this);
this.setClickEvent = this.setClickEvent.bind(this);
this.setCssStyle = this.setCssStyle.bind(this);
}
private splitClassNameAndType(_id: string) {
const id = common.sanitizeText(_id, getConfig()); const id = common.sanitizeText(_id, getConfig());
let genericType = ''; let genericType = '';
let className = id; let className = id;
@@ -52,37 +82,37 @@ const splitClassNameAndType = function (_id: string) {
} }
return { className: className, type: genericType }; return { className: className, type: genericType };
}; }
export const setClassLabel = function (_id: string, label: string) { public setClassLabel(_id: string, label: string) {
const id = common.sanitizeText(_id, getConfig()); const id = common.sanitizeText(_id, getConfig());
if (label) { if (label) {
label = sanitizeText(label); label = sanitizeText(label);
} }
const { className } = splitClassNameAndType(id); const { className } = this.splitClassNameAndType(id);
classes.get(className)!.label = label; this.classes.get(className)!.label = label;
classes.get(className)!.text = this.classes.get(className)!.text =
`${label}${classes.get(className)!.type ? `<${classes.get(className)!.type}>` : ''}`; `${label}${this.classes.get(className)!.type ? `<${this.classes.get(className)!.type}>` : ''}`;
}; }
/** /**
* Function called by parser when a node definition has been found. * Function called by parser when a node definition has been found.
* *
* @param id - Id of the class to add * @param id - Id of the class to add
* @public * @public
*/ */
export const addClass = function (_id: string) { public addClass(_id: string) {
const id = common.sanitizeText(_id, getConfig()); const id = common.sanitizeText(_id, getConfig());
const { className, type } = splitClassNameAndType(id); const { className, type } = this.splitClassNameAndType(id);
// Only add class if not exists // Only add class if not exists
if (classes.has(className)) { if (this.classes.has(className)) {
return; return;
} }
// alert('Adding class: ' + className); // alert('Adding class: ' + className);
const name = common.sanitizeText(className, getConfig()); const name = common.sanitizeText(className, getConfig());
// alert('Adding class after: ' + name); // alert('Adding class after: ' + name);
classes.set(name, { this.classes.set(name, {
id: name, id: name,
type: type, type: type,
label: name, label: name,
@@ -97,93 +127,93 @@ export const addClass = function (_id: string) {
} as ClassNode); } as ClassNode);
classCounter++; classCounter++;
}; }
const addInterface = function (label: string, classId: string) { private addInterface(label: string, classId: string) {
const classInterface: Interface = { const classInterface: Interface = {
id: `interface${interfaces.length}`, id: `interface${this.interfaces.length}`,
label, label,
classId, classId,
}; };
interfaces.push(classInterface); this.interfaces.push(classInterface);
}; }
/** /**
* Function to lookup domId from id in the graph definition. * Function to lookup domId from id in the graph definition.
* *
* @param id - class ID to lookup * @param id - class ID to lookup
* @public * @public
*/ */
export const lookUpDomId = function (_id: string): string { public lookUpDomId(_id: string): string {
const id = common.sanitizeText(_id, getConfig()); const id = common.sanitizeText(_id, getConfig());
if (classes.has(id)) { if (this.classes.has(id)) {
return classes.get(id)!.domId; return this.classes.get(id)!.domId;
} }
throw new Error('Class not found: ' + id); throw new Error('Class not found: ' + id);
}; }
export const clear = function () { public clear() {
relations = []; this.relations = [];
classes = new Map(); this.classes = new Map();
notes = []; this.notes = [];
interfaces = []; this.interfaces = [];
functions = []; this.functions = [];
functions.push(setupToolTips); this.functions.push(this.setupToolTips.bind(this));
namespaces = new Map(); this.namespaces = new Map();
namespaceCounter = 0; this.namespaceCounter = 0;
direction = 'TB'; this.direction = 'TB';
commonClear(); commonClear();
}; }
export const getClass = function (id: string): ClassNode { public getClass(id: string): ClassNode {
return classes.get(id)!; return this.classes.get(id)!;
}; }
export const getClasses = function (): ClassMap { public getClasses(): ClassMap {
return classes; return this.classes;
}; }
export const getRelations = function (): ClassRelation[] { public getRelations(): ClassRelation[] {
return relations; return this.relations;
}; }
export const getNotes = function () { public getNotes() {
return notes; return this.notes;
}; }
export const addRelation = function (classRelation: ClassRelation) { public addRelation(classRelation: ClassRelation) {
log.debug('Adding relation: ' + JSON.stringify(classRelation)); log.debug('Adding relation: ' + JSON.stringify(classRelation));
// Due to relationType cannot just check if it is equal to 'none' or it complains, can fix this later // Due to relationType cannot just check if it is equal to 'none' or it complains, can fix this later
const invalidTypes = [ const invalidTypes = [
relationType.LOLLIPOP, this.relationType.LOLLIPOP,
relationType.AGGREGATION, this.relationType.AGGREGATION,
relationType.COMPOSITION, this.relationType.COMPOSITION,
relationType.DEPENDENCY, this.relationType.DEPENDENCY,
relationType.EXTENSION, this.relationType.EXTENSION,
]; ];
if ( if (
classRelation.relation.type1 === relationType.LOLLIPOP && classRelation.relation.type1 === this.relationType.LOLLIPOP &&
!invalidTypes.includes(classRelation.relation.type2) !invalidTypes.includes(classRelation.relation.type2)
) { ) {
addClass(classRelation.id2); this.addClass(classRelation.id2);
addInterface(classRelation.id1, classRelation.id2); this.addInterface(classRelation.id1, classRelation.id2);
classRelation.id1 = `interface${interfaces.length - 1}`; classRelation.id1 = `interface${this.interfaces.length - 1}`;
} else if ( } else if (
classRelation.relation.type2 === relationType.LOLLIPOP && classRelation.relation.type2 === this.relationType.LOLLIPOP &&
!invalidTypes.includes(classRelation.relation.type1) !invalidTypes.includes(classRelation.relation.type1)
) { ) {
addClass(classRelation.id1); this.addClass(classRelation.id1);
addInterface(classRelation.id2, classRelation.id1); this.addInterface(classRelation.id2, classRelation.id1);
classRelation.id2 = `interface${interfaces.length - 1}`; classRelation.id2 = `interface${this.interfaces.length - 1}`;
} else { } else {
addClass(classRelation.id1); this.addClass(classRelation.id1);
addClass(classRelation.id2); this.addClass(classRelation.id2);
} }
classRelation.id1 = splitClassNameAndType(classRelation.id1).className; classRelation.id1 = this.splitClassNameAndType(classRelation.id1).className;
classRelation.id2 = splitClassNameAndType(classRelation.id2).className; classRelation.id2 = this.splitClassNameAndType(classRelation.id2).className;
classRelation.relationTitle1 = common.sanitizeText( classRelation.relationTitle1 = common.sanitizeText(
classRelation.relationTitle1.trim(), classRelation.relationTitle1.trim(),
@@ -195,10 +225,10 @@ export const addRelation = function (classRelation: ClassRelation) {
getConfig() getConfig()
); );
relations.push(classRelation); this.relations.push(classRelation);
}; }
/** /**
* Adds an annotation to the specified class Annotations mark special properties of the given type * Adds an annotation to the specified class Annotations mark special properties of the given type
* (like 'interface' or 'service') * (like 'interface' or 'service')
* *
@@ -206,12 +236,12 @@ export const addRelation = function (classRelation: ClassRelation) {
* @param annotation - The name of the annotation without any brackets * @param annotation - The name of the annotation without any brackets
* @public * @public
*/ */
export const addAnnotation = function (className: string, annotation: string) { public addAnnotation(className: string, annotation: string) {
const validatedClassName = splitClassNameAndType(className).className; const validatedClassName = this.splitClassNameAndType(className).className;
classes.get(validatedClassName)!.annotations.push(annotation); this.classes.get(validatedClassName)!.annotations.push(annotation);
}; }
/** /**
* Adds a member to the specified class * Adds a member to the specified class
* *
* @param className - The class name * @param className - The class name
@@ -220,11 +250,11 @@ export const addAnnotation = function (className: string, annotation: string) {
* method Otherwise the member will be treated as a normal property * method Otherwise the member will be treated as a normal property
* @public * @public
*/ */
export const addMember = function (className: string, member: string) { public addMember(className: string, member: string) {
addClass(className); this.addClass(className);
const validatedClassName = splitClassNameAndType(className).className; const validatedClassName = this.splitClassNameAndType(className).className;
const theClass = classes.get(validatedClassName)!; const theClass = this.classes.get(validatedClassName)!;
if (typeof member === 'string') { if (typeof member === 'string') {
// Member can contain white spaces, we trim them out // Member can contain white spaces, we trim them out
@@ -240,60 +270,60 @@ export const addMember = function (className: string, member: string) {
theClass.members.push(new ClassMember(memberString, 'attribute')); theClass.members.push(new ClassMember(memberString, 'attribute'));
} }
} }
}; }
export const addMembers = function (className: string, members: string[]) { public addMembers(className: string, members: string[]) {
if (Array.isArray(members)) { if (Array.isArray(members)) {
members.reverse(); members.reverse();
members.forEach((member) => addMember(className, member)); members.forEach((member) => this.addMember(className, member));
}
} }
};
export const addNote = function (text: string, className: string) { public addNote(text: string, className: string) {
const note = { const note = {
id: `note${notes.length}`, id: `note${this.notes.length}`,
class: className, class: className,
text: text, text: text,
}; };
notes.push(note); this.notes.push(note);
}; }
export const cleanupLabel = function (label: string) { public cleanupLabel(label: string) {
if (label.startsWith(':')) { if (label.startsWith(':')) {
label = label.substring(1); label = label.substring(1);
} }
return sanitizeText(label.trim()); return sanitizeText(label.trim());
}; }
/** /**
* Called by parser when assigning cssClass to a class * Called by parser when assigning cssClass to a class
* *
* @param ids - Comma separated list of ids * @param ids - Comma separated list of ids
* @param className - Class to add * @param className - Class to add
*/ */
export const setCssClass = function (ids: string, className: string) { public setCssClass(ids: string, className: string) {
ids.split(',').forEach(function (_id) { ids.split(',').forEach((_id) => {
let id = _id; let id = _id;
if (/\d/.exec(_id[0])) { if (/\d/.exec(_id[0])) {
id = MERMAID_DOM_ID_PREFIX + id; id = MERMAID_DOM_ID_PREFIX + id;
} }
const classNode = classes.get(id); const classNode = this.classes.get(id);
if (classNode) { if (classNode) {
classNode.cssClasses += ' ' + className; classNode.cssClasses += ' ' + className;
} }
}); });
}; }
export const defineClass = function (ids: string[], style: string[]) { public defineClass(ids: string[], style: string[]) {
for (const id of ids) { for (const id of ids) {
let styleClass = styleClasses.get(id); let styleClass = this.styleClasses.get(id);
if (styleClass === undefined) { if (styleClass === undefined) {
styleClass = { id, styles: [], textStyles: [] }; styleClass = { id, styles: [], textStyles: [] };
styleClasses.set(id, styleClass); this.styleClasses.set(id, styleClass);
} }
if (style) { if (style) {
style.forEach(function (s) { style.forEach((s) => {
if (/color/.exec(s)) { if (/color/.exec(s)) {
const newStyle = s.replace('fill', 'bgFill'); // .replace('color', 'fill'); const newStyle = s.replace('fill', 'bgFill'); // .replace('color', 'fill');
styleClass.textStyles.push(newStyle); styleClass.textStyles.push(newStyle);
@@ -302,51 +332,51 @@ export const defineClass = function (ids: string[], style: string[]) {
}); });
} }
classes.forEach((value) => { this.classes.forEach((value) => {
if (value.cssClasses.includes(id)) { if (value.cssClasses.includes(id)) {
value.styles.push(...style.flatMap((s) => s.split(','))); value.styles.push(...style.flatMap((s) => s.split(',')));
} }
}); });
} }
}; }
/** /**
* Called by parser when a tooltip is found, e.g. a clickable element. * Called by parser when a tooltip is found, e.g. a clickable element.
* *
* @param ids - Comma separated list of ids * @param ids - Comma separated list of ids
* @param tooltip - Tooltip to add * @param tooltip - Tooltip to add
*/ */
const setTooltip = function (ids: string, tooltip?: string) { public setTooltip(ids: string, tooltip?: string) {
ids.split(',').forEach(function (id) { ids.split(',').forEach((id) => {
if (tooltip !== undefined) { if (tooltip !== undefined) {
classes.get(id)!.tooltip = sanitizeText(tooltip); this.classes.get(id)!.tooltip = sanitizeText(tooltip);
} }
}); });
};
export const getTooltip = function (id: string, namespace?: string) {
if (namespace && namespaces.has(namespace)) {
return namespaces.get(namespace)!.classes.get(id)!.tooltip;
} }
return classes.get(id)!.tooltip; public getTooltip(id: string, namespace?: string) {
}; if (namespace && this.namespaces.has(namespace)) {
return this.namespaces.get(namespace)!.classes.get(id)!.tooltip;
}
/** return this.classes.get(id)!.tooltip;
}
/**
* Called by parser when a link is found. Adds the URL to the vertex data. * Called by parser when a link is found. Adds the URL to the vertex data.
* *
* @param ids - Comma separated list of ids * @param ids - Comma separated list of ids
* @param linkStr - URL to create a link for * @param linkStr - URL to create a link for
* @param target - Target of the link, _blank by default as originally defined in the svgDraw.js file * @param target - Target of the link, _blank by default as originally defined in the svgDraw.js file
*/ */
export const setLink = function (ids: string, linkStr: string, target: string) { public setLink(ids: string, linkStr: string, target: string) {
const config = getConfig(); const config = getConfig();
ids.split(',').forEach(function (_id) { ids.split(',').forEach((_id) => {
let id = _id; let id = _id;
if (/\d/.exec(_id[0])) { if (/\d/.exec(_id[0])) {
id = MERMAID_DOM_ID_PREFIX + id; id = MERMAID_DOM_ID_PREFIX + id;
} }
const theClass = classes.get(id); const theClass = this.classes.get(id);
if (theClass) { if (theClass) {
theClass.link = utils.formatUrl(linkStr, config); theClass.link = utils.formatUrl(linkStr, config);
if (config.securityLevel === 'sandbox') { if (config.securityLevel === 'sandbox') {
@@ -358,25 +388,25 @@ export const setLink = function (ids: string, linkStr: string, target: string) {
} }
} }
}); });
setCssClass(ids, 'clickable'); this.setCssClass(ids, 'clickable');
}; }
/** /**
* Called by parser when a click definition is found. Registers an event handler. * Called by parser when a click definition is found. Registers an event handler.
* *
* @param ids - Comma separated list of ids * @param ids - Comma separated list of ids
* @param functionName - Function to be called on click * @param functionName - Function to be called on click
* @param functionArgs - Function args the function should be called with * @param functionArgs - Function args the function should be called with
*/ */
export const setClickEvent = function (ids: string, functionName: string, functionArgs: string) { public setClickEvent(ids: string, functionName: string, functionArgs: string) {
ids.split(',').forEach(function (id) { ids.split(',').forEach((id) => {
setClickFunc(id, functionName, functionArgs); this.setClickFunc(id, functionName, functionArgs);
classes.get(id)!.haveCallback = true; this.classes.get(id)!.haveCallback = true;
}); });
setCssClass(ids, 'clickable'); this.setCssClass(ids, 'clickable');
}; }
const setClickFunc = function (_domId: string, functionName: string, functionArgs: string) { private setClickFunc(_domId: string, functionName: string, functionArgs: string) {
const domId = common.sanitizeText(_domId, getConfig()); const domId = common.sanitizeText(_domId, getConfig());
const config = getConfig(); const config = getConfig();
if (config.securityLevel !== 'loose') { if (config.securityLevel !== 'loose') {
@@ -387,8 +417,8 @@ const setClickFunc = function (_domId: string, functionName: string, functionArg
} }
const id = domId; const id = domId;
if (classes.has(id)) { if (this.classes.has(id)) {
const elemId = lookUpDomId(id); const elemId = this.lookUpDomId(id);
let argList: string[] = []; let argList: string[] = [];
if (typeof functionArgs === 'string') { if (typeof functionArgs === 'string') {
/* Splits functionArgs by ',', ignoring all ',' in double quoted strings */ /* Splits functionArgs by ',', ignoring all ',' in double quoted strings */
@@ -409,12 +439,12 @@ const setClickFunc = function (_domId: string, functionName: string, functionArg
argList.push(elemId); argList.push(elemId);
} }
functions.push(function () { this.functions.push(() => {
const elem = document.querySelector(`[id="${elemId}"]`); const elem = document.querySelector(`[id="${elemId}"]`);
if (elem !== null) { if (elem !== null) {
elem.addEventListener( elem.addEventListener(
'click', 'click',
function () { () => {
utils.runFunc(functionName, ...argList); utils.runFunc(functionName, ...argList);
}, },
false false
@@ -422,41 +452,44 @@ const setClickFunc = function (_domId: string, functionName: string, functionArg
} }
}); });
} }
}; }
export const bindFunctions = function (element: Element) { public bindFunctions(element: Element) {
functions.forEach(function (fun) { this.functions.forEach((fun) => {
fun(element); fun(element);
}); });
}; }
export const lineType = { public readonly lineType = {
LINE: 0, LINE: 0,
DOTTED_LINE: 1, DOTTED_LINE: 1,
}; };
export const relationType = { public readonly relationType = {
AGGREGATION: 0, AGGREGATION: 0,
EXTENSION: 1, EXTENSION: 1,
COMPOSITION: 2, COMPOSITION: 2,
DEPENDENCY: 3, DEPENDENCY: 3,
LOLLIPOP: 4, LOLLIPOP: 4,
}; };
const setupToolTips = function (element: Element) { private readonly setupToolTips = (element: Element) => {
let tooltipElem: Selection<HTMLDivElement, unknown, HTMLElement, unknown> = let tooltipElem: Selection<HTMLDivElement, unknown, HTMLElement, unknown> =
select('.mermaidTooltip'); select('.mermaidTooltip');
// @ts-expect-error - Incorrect types // @ts-expect-error - Incorrect types
if ((tooltipElem._groups || tooltipElem)[0][0] === null) { if ((tooltipElem._groups || tooltipElem)[0][0] === null) {
tooltipElem = select('body').append('div').attr('class', 'mermaidTooltip').style('opacity', 0); tooltipElem = select('body')
.append('div')
.attr('class', 'mermaidTooltip')
.style('opacity', 0);
} }
const svg = select(element).select('svg'); const svg = select(element).select('svg');
const nodes = svg.selectAll('g.node'); const nodes = svg.selectAll('g.node');
nodes nodes
.on('mouseover', function () { .on('mouseover', (event: MouseEvent) => {
const el = select(this); const el = select(event.currentTarget as HTMLElement);
const title = el.attr('title'); const title = el.attr('title');
// Don't try to draw a tooltip if no data is provided // Don't try to draw a tooltip if no data is provided
if (title === null) { if (title === null) {
@@ -473,69 +506,70 @@ const setupToolTips = function (element: Element) {
tooltipElem.html(tooltipElem.html().replace(/&lt;br\/&gt;/g, '<br/>')); tooltipElem.html(tooltipElem.html().replace(/&lt;br\/&gt;/g, '<br/>'));
el.classed('hover', true); el.classed('hover', true);
}) })
.on('mouseout', function () { .on('mouseout', (event: MouseEvent) => {
tooltipElem.transition().duration(500).style('opacity', 0); tooltipElem.transition().duration(500).style('opacity', 0);
const el = select(this); const el = select(event.currentTarget as HTMLElement);
el.classed('hover', false); el.classed('hover', false);
}); });
}; };
functions.push(setupToolTips);
let direction = 'TB'; private direction = 'TB';
const getDirection = () => direction; public getDirection() {
const setDirection = (dir: string) => { return this.direction;
direction = dir; }
}; public setDirection(dir: string) {
this.direction = dir;
}
/** /**
* Function called by parser when a namespace definition has been found. * Function called by parser when a namespace definition has been found.
* *
* @param id - Id of the namespace to add * @param id - Id of the namespace to add
* @public * @public
*/ */
export const addNamespace = function (id: string) { public addNamespace(id: string) {
if (namespaces.has(id)) { if (this.namespaces.has(id)) {
return; return;
} }
namespaces.set(id, { this.namespaces.set(id, {
id: id, id: id,
classes: new Map(), classes: new Map(),
children: {}, children: {},
domId: MERMAID_DOM_ID_PREFIX + id + '-' + namespaceCounter, domId: MERMAID_DOM_ID_PREFIX + id + '-' + this.namespaceCounter,
} as NamespaceNode); } as NamespaceNode);
namespaceCounter++; this.namespaceCounter++;
}; }
const getNamespace = function (name: string): NamespaceNode { public getNamespace(name: string): NamespaceNode {
return namespaces.get(name)!; return this.namespaces.get(name)!;
}; }
const getNamespaces = function (): NamespaceMap { public getNamespaces(): NamespaceMap {
return namespaces; return this.namespaces;
}; }
/** /**
* Function called by parser when a namespace definition has been found. * Function called by parser when a namespace definition has been found.
* *
* @param id - Id of the namespace to add * @param id - Id of the namespace to add
* @param classNames - Ids of the class to add * @param classNames - Ids of the class to add
* @public * @public
*/ */
export const addClassesToNamespace = function (id: string, classNames: string[]) { public addClassesToNamespace(id: string, classNames: string[]) {
if (!namespaces.has(id)) { if (!this.namespaces.has(id)) {
return; return;
} }
for (const name of classNames) { for (const name of classNames) {
const { className } = splitClassNameAndType(name); const { className } = this.splitClassNameAndType(name);
classes.get(className)!.parent = id; this.classes.get(className)!.parent = id;
namespaces.get(id)!.classes.set(className, classes.get(className)!); this.namespaces.get(id)!.classes.set(className, this.classes.get(className)!);
}
} }
};
export const setCssStyle = function (id: string, styles: string[]) { public setCssStyle(id: string, styles: string[]) {
const thisClass = classes.get(id); const thisClass = this.classes.get(id);
if (!styles || !thisClass) { if (!styles || !thisClass) {
return; return;
} }
@@ -546,15 +580,15 @@ export const setCssStyle = function (id: string, styles: string[]) {
thisClass.styles.push(s); thisClass.styles.push(s);
} }
} }
}; }
/** /**
* Gets the arrow marker for a type index * Gets the arrow marker for a type index
* *
* @param type - The type to look for * @param type - The type to look for
* @returns The arrow marker * @returns The arrow marker
*/ */
function getArrowMarker(type: number) { private getArrowMarker(type: number) {
let marker; let marker;
switch (type) { switch (type) {
case 0: case 0:
@@ -576,15 +610,15 @@ function getArrowMarker(type: number) {
marker = 'none'; marker = 'none';
} }
return marker; return marker;
} }
export const getData = () => { public getData() {
const nodes: Node[] = []; const nodes: Node[] = [];
const edges: Edge[] = []; const edges: Edge[] = [];
const config = getConfig(); const config = getConfig();
for (const namespaceKey of namespaces.keys()) { for (const namespaceKey of this.namespaces.keys()) {
const namespace = namespaces.get(namespaceKey); const namespace = this.namespaces.get(namespaceKey);
if (namespace) { if (namespace) {
const node: Node = { const node: Node = {
id: namespace.id, id: namespace.id,
@@ -600,8 +634,8 @@ export const getData = () => {
} }
} }
for (const classKey of classes.keys()) { for (const classKey of this.classes.keys()) {
const classNode = classes.get(classKey); const classNode = this.classes.get(classKey);
if (classNode) { if (classNode) {
const node = classNode as unknown as Node; const node = classNode as unknown as Node;
node.parentId = classNode.parent; node.parentId = classNode.parent;
@@ -611,7 +645,7 @@ export const getData = () => {
} }
let cnt = 0; let cnt = 0;
for (const note of notes) { for (const note of this.notes) {
cnt++; cnt++;
const noteNode: Node = { const noteNode: Node = {
id: note.id, id: note.id,
@@ -629,7 +663,7 @@ export const getData = () => {
}; };
nodes.push(noteNode); nodes.push(noteNode);
const noteClassId = classes.get(note.class)?.id ?? ''; const noteClassId = this.classes.get(note.class)?.id ?? '';
if (noteClassId) { if (noteClassId) {
const edge: Edge = { const edge: Edge = {
@@ -651,7 +685,7 @@ export const getData = () => {
} }
} }
for (const _interface of interfaces) { for (const _interface of this.interfaces) {
const interfaceNode: Node = { const interfaceNode: Node = {
id: _interface.id, id: _interface.id,
label: _interface.label, label: _interface.label,
@@ -664,7 +698,7 @@ export const getData = () => {
} }
cnt = 0; cnt = 0;
for (const classRelation of relations) { for (const classRelation of this.relations) {
cnt++; cnt++;
const edge: Edge = { const edge: Edge = {
id: getEdgeId(classRelation.id1, classRelation.id2, { id: getEdgeId(classRelation.id1, classRelation.id2, {
@@ -678,9 +712,10 @@ export const getData = () => {
labelpos: 'c', labelpos: 'c',
thickness: 'normal', thickness: 'normal',
classes: 'relation', classes: 'relation',
arrowTypeStart: getArrowMarker(classRelation.relation.type1), arrowTypeStart: this.getArrowMarker(classRelation.relation.type1),
arrowTypeEnd: getArrowMarker(classRelation.relation.type2), arrowTypeEnd: this.getArrowMarker(classRelation.relation.type2),
startLabelRight: classRelation.relationTitle1 === 'none' ? '' : classRelation.relationTitle1, startLabelRight:
classRelation.relationTitle1 === 'none' ? '' : classRelation.relationTitle1,
endLabelLeft: classRelation.relationTitle2 === 'none' ? '' : classRelation.relationTitle2, endLabelLeft: classRelation.relationTitle2 === 'none' ? '' : classRelation.relationTitle2,
arrowheadStyle: '', arrowheadStyle: '',
labelStyle: ['display: inline-block'], labelStyle: ['display: inline-block'],
@@ -691,46 +726,14 @@ export const getData = () => {
edges.push(edge); edges.push(edge);
} }
return { nodes, edges, other: {}, config, direction: getDirection() }; return { nodes, edges, other: {}, config, direction: this.getDirection() };
}; }
export default { public setAccTitle = setAccTitle;
setAccTitle, public getAccTitle = getAccTitle;
getAccTitle, public setAccDescription = setAccDescription;
getAccDescription, public getAccDescription = getAccDescription;
setAccDescription, public setDiagramTitle = setDiagramTitle;
getConfig: () => getConfig().class, public getDiagramTitle = getDiagramTitle;
addClass, public getConfig = () => getConfig().class;
bindFunctions, }
clear,
getClass,
getClasses,
getNotes,
addAnnotation,
addNote,
getRelations,
addRelation,
getDirection,
setDirection,
addMember,
addMembers,
cleanupLabel,
lineType,
relationType,
setClickEvent,
setCssClass,
defineClass,
setLink,
getTooltip,
setTooltip,
lookUpDomId,
setDiagramTitle,
getDiagramTitle,
setClassLabel,
addNamespace,
addClassesToNamespace,
getNamespace,
getNamespaces,
setCssStyle,
getData,
};

4
packages/mermaid/src/diagrams/class/classDiagram-styles.spec.js
View File

@@ -1,9 +1,11 @@
import { parser } from './parser/classDiagram.jison'; import { parser } from './parser/classDiagram.jison';
import classDb from './classDb.js'; import { ClassDB } from './classDb.js';
describe('class diagram, ', function () { describe('class diagram, ', function () {
describe('when parsing data from a classDiagram it', function () { describe('when parsing data from a classDiagram it', function () {
let classDb;
beforeEach(function () { beforeEach(function () {
classDb = new ClassDB();
parser.yy = classDb; parser.yy = classDb;
parser.yy.clear(); parser.yy.clear();
}); });

7
packages/mermaid/src/diagrams/class/classDiagram-v2.ts
View File

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

69
packages/mermaid/src/diagrams/class/classDiagram.spec.ts
View File

@@ -1,6 +1,7 @@
/* eslint-disable @typescript-eslint/unbound-method -- Broken for Vitest mocks, see https://github.com/vitest-dev/eslint-plugin-vitest/pull/286 */
// @ts-expect-error Jison doesn't export types // @ts-expect-error Jison doesn't export types
import { parser } from './parser/classDiagram.jison'; import { parser } from './parser/classDiagram.jison';
import classDb from './classDb.js'; import { ClassDB } from './classDb.js';
import { vi, describe, it, expect } from 'vitest'; import { vi, describe, it, expect } from 'vitest';
import type { ClassMap, NamespaceNode } from './classTypes.js'; import type { ClassMap, NamespaceNode } from './classTypes.js';
const spyOn = vi.spyOn; const spyOn = vi.spyOn;
@@ -10,8 +11,9 @@ const abstractCssStyle = 'font-style:italic;';
describe('given a basic class diagram, ', function () { describe('given a basic class diagram, ', function () {
describe('when parsing class definition', function () { describe('when parsing class definition', function () {
let classDb: ClassDB;
beforeEach(function () { beforeEach(function () {
classDb.clear(); classDb = new ClassDB();
parser.yy = classDb; parser.yy = classDb;
}); });
it('should handle classes within namespaces', () => { it('should handle classes within namespaces', () => {
@@ -564,8 +566,9 @@ class C13["With Città foreign language"]
}); });
describe('when parsing class defined in brackets', function () { describe('when parsing class defined in brackets', function () {
let classDb: ClassDB;
beforeEach(function () { beforeEach(function () {
classDb.clear(); classDb = new ClassDB();
parser.yy = classDb; parser.yy = classDb;
}); });
@@ -656,8 +659,9 @@ class C13["With Città foreign language"]
}); });
describe('when parsing comments', function () { describe('when parsing comments', function () {
let classDb: ClassDB;
beforeEach(function () { beforeEach(function () {
classDb.clear(); classDb = new ClassDB();
parser.yy = classDb; parser.yy = classDb;
}); });
@@ -746,8 +750,9 @@ foo()
}); });
describe('when parsing click statements', function () { describe('when parsing click statements', function () {
let classDb: ClassDB;
beforeEach(function () { beforeEach(function () {
classDb.clear(); classDb = new ClassDB();
parser.yy = classDb; parser.yy = classDb;
}); });
it('should handle href link', function () { it('should handle href link', function () {
@@ -857,8 +862,9 @@ foo()
}); });
describe('when parsing annotations', function () { describe('when parsing annotations', function () {
let classDb: ClassDB;
beforeEach(function () { beforeEach(function () {
classDb.clear(); classDb = new ClassDB();
parser.yy = classDb; parser.yy = classDb;
}); });
@@ -921,8 +927,9 @@ foo()
describe('given a class diagram with members and methods ', function () { describe('given a class diagram with members and methods ', function () {
describe('when parsing members', function () { describe('when parsing members', function () {
let classDb: ClassDB;
beforeEach(function () { beforeEach(function () {
classDb.clear(); classDb = new ClassDB();
parser.yy = classDb; parser.yy = classDb;
}); });
@@ -980,8 +987,9 @@ describe('given a class diagram with members and methods ', function () {
}); });
describe('when parsing method definition', function () { describe('when parsing method definition', function () {
let classDb: ClassDB;
beforeEach(function () { beforeEach(function () {
classDb.clear(); classDb = new ClassDB();
parser.yy = classDb; parser.yy = classDb;
}); });
@@ -1067,8 +1075,9 @@ describe('given a class diagram with members and methods ', function () {
describe('given a class diagram with generics, ', function () { describe('given a class diagram with generics, ', function () {
describe('when parsing valid generic classes', function () { describe('when parsing valid generic classes', function () {
let classDb: ClassDB;
beforeEach(function () { beforeEach(function () {
classDb.clear(); classDb = new ClassDB();
parser.yy = classDb; parser.yy = classDb;
}); });
@@ -1180,8 +1189,9 @@ namespace space {
describe('given a class diagram with relationships, ', function () { describe('given a class diagram with relationships, ', function () {
describe('when parsing basic relationships', function () { describe('when parsing basic relationships', function () {
let classDb: ClassDB;
beforeEach(function () { beforeEach(function () {
classDb.clear(); classDb = new ClassDB();
parser.yy = classDb; parser.yy = classDb;
}); });
@@ -1714,7 +1724,9 @@ class Class2
}); });
describe('when parsing classDiagram with text labels', () => { describe('when parsing classDiagram with text labels', () => {
let classDb: ClassDB;
beforeEach(function () { beforeEach(function () {
classDb = new ClassDB();
parser.yy = classDb; parser.yy = classDb;
parser.yy.clear(); parser.yy.clear();
}); });
@@ -1897,3 +1909,40 @@ class C13["With Città foreign language"]
}); });
}); });
}); });
describe('class db class', () => {
let classDb: ClassDB;
beforeEach(() => {
classDb = new ClassDB();
});
// This is to ensure that functions used in class JISON are exposed as function from ClassDB
it('should have functions used in class JISON as own property', () => {
const functionsUsedInParser = [
'addRelation',
'cleanupLabel',
'setAccTitle',
'setAccDescription',
'addClassesToNamespace',
'addNamespace',
'setCssClass',
'addMembers',
'addClass',
'setClassLabel',
'addAnnotation',
'addMember',
'addNote',
'defineClass',
'setDirection',
'relationType',
'lineType',
'setClickEvent',
'setTooltip',
'setLink',
'setCssStyle',
] as const satisfies (keyof ClassDB)[];
for (const fun of functionsUsedInParser) {
expect(Object.hasOwn(classDb, fun)).toBe(true);
}
});
});

7
packages/mermaid/src/diagrams/class/classDiagram.ts
View File

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

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

@@ -1,8 +1,10 @@
import { parser } from './classDiagram.jison'; import { parser } from './classDiagram.jison';
import classDb from '../classDb.js'; import { ClassDB } from '../classDb.js';
describe('class diagram', function () { describe('class diagram', function () {
let classDb;
beforeEach(function () { beforeEach(function () {
classDb = new ClassDB();
parser.yy = classDb; parser.yy = classDb;
parser.yy.clear(); parser.yy.clear();
}); });

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);
}
});
});

658
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();
}); });

97
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');
}); });
@@ -251,7 +251,7 @@ describe('when parsing directions', function () {
expect(data4Layout.nodes[0].shape).toEqual('squareRect'); expect(data4Layout.nodes[0].shape).toEqual('squareRect');
expect(data4Layout.nodes[0].label).toEqual('This is a<br/>multiline string'); expect(data4Layout.nodes[0].label).toEqual('This is a<br/>multiline string');
}); });
it(' should be possible to use } in strings', function () { it('should be possible to use } in strings', function () {
const res = flow.parser.parse(`flowchart TB const res = flow.parser.parse(`flowchart TB
A@{ A@{
label: "This is a string with }" label: "This is a string with }"
@@ -264,7 +264,7 @@ describe('when parsing directions', function () {
expect(data4Layout.nodes[0].shape).toEqual('squareRect'); expect(data4Layout.nodes[0].shape).toEqual('squareRect');
expect(data4Layout.nodes[0].label).toEqual('This is a string with }'); expect(data4Layout.nodes[0].label).toEqual('This is a string with }');
}); });
it(' should be possible to use @ in strings', function () { it('should be possible to use @ in strings', function () {
const res = flow.parser.parse(`flowchart TB const res = flow.parser.parse(`flowchart TB
A@{ A@{
label: "This is a string with @" label: "This is a string with @"
@@ -277,7 +277,7 @@ describe('when parsing directions', function () {
expect(data4Layout.nodes[0].shape).toEqual('squareRect'); expect(data4Layout.nodes[0].shape).toEqual('squareRect');
expect(data4Layout.nodes[0].label).toEqual('This is a string with @'); expect(data4Layout.nodes[0].label).toEqual('This is a string with @');
}); });
it(' should be possible to use @ in strings', function () { it('should be possible to use @ in strings', function () {
const res = flow.parser.parse(`flowchart TB const res = flow.parser.parse(`flowchart TB
A@{ A@{
label: "This is a string with}" label: "This is a string with}"
@@ -291,7 +291,7 @@ describe('when parsing directions', function () {
expect(data4Layout.nodes[0].label).toEqual('This is a string with}'); expect(data4Layout.nodes[0].label).toEqual('This is a string with}');
}); });
it(' should be possible to use @ syntax to add labels on multi nodes', function () { it('should be possible to use @ syntax to add labels on multi nodes', function () {
const res = flow.parser.parse(`flowchart TB const res = flow.parser.parse(`flowchart TB
n2["label for n2"] & n4@{ label: "labe for n4"} & n5@{ label: "labe for n5"} n2["label for n2"] & n4@{ label: "labe for n4"} & n5@{ label: "labe for n5"}
`); `);
@@ -317,7 +317,90 @@ describe('when parsing directions', function () {
expect(data4Layout.nodes[3].label).toEqual('for E'); expect(data4Layout.nodes[3].label).toEqual('for E');
expect(data4Layout.nodes[4].label).toEqual('for D'); expect(data4Layout.nodes[4].label).toEqual('for D');
}); });
it.skip(' should be possible to use @ syntax to add labels with trail spaces', function () {
it('should be possible to use @ syntax in labels', function () {
const res = flow.parser.parse(`flowchart TD
A["@A@"] --> B["@for@ B@"] & C@{ label: "@for@ c@"} & E{"\`@for@ E@\`"} & D(("@for@ D@"))
H1{{"@for@ H@"}}
H2{{"\`@for@ H@\`"}}
Q1{"@for@ Q@"}
Q2{"\`@for@ Q@\`"}
AS1>"@for@ AS@"]
AS2>"\`@for@ AS@\`"]
`);
const data4Layout = flow.parser.yy.getData();
expect(data4Layout.nodes.length).toBe(11);
expect(data4Layout.nodes[0].label).toEqual('@A@');
expect(data4Layout.nodes[1].label).toEqual('@for@ B@');
expect(data4Layout.nodes[2].label).toEqual('@for@ c@');
expect(data4Layout.nodes[3].label).toEqual('@for@ E@');
expect(data4Layout.nodes[4].label).toEqual('@for@ D@');
expect(data4Layout.nodes[5].label).toEqual('@for@ H@');
expect(data4Layout.nodes[6].label).toEqual('@for@ H@');
expect(data4Layout.nodes[7].label).toEqual('@for@ Q@');
expect(data4Layout.nodes[8].label).toEqual('@for@ Q@');
expect(data4Layout.nodes[9].label).toEqual('@for@ AS@');
expect(data4Layout.nodes[10].label).toEqual('@for@ AS@');
});
it('should handle unique edge creation with using @ and &', function () {
const res = flow.parser.parse(`flowchart TD
A & B e1@--> C & D
A1 e2@--> C1 & D1
`);
const data4Layout = flow.parser.yy.getData();
expect(data4Layout.nodes.length).toBe(7);
expect(data4Layout.edges.length).toBe(6);
expect(data4Layout.edges[0].id).toEqual('L_A_C_0');
expect(data4Layout.edges[1].id).toEqual('L_A_D_0');
expect(data4Layout.edges[2].id).toEqual('e1');
expect(data4Layout.edges[3].id).toEqual('L_B_D_0');
expect(data4Layout.edges[4].id).toEqual('e2');
expect(data4Layout.edges[5].id).toEqual('L_A1_D1_0');
});
it('should handle redefine same edge ids again', function () {
const res = flow.parser.parse(`flowchart TD
A & B e1@--> C & D
A1 e1@--> C1 & D1
`);
const data4Layout = flow.parser.yy.getData();
expect(data4Layout.nodes.length).toBe(7);
expect(data4Layout.edges.length).toBe(6);
expect(data4Layout.edges[0].id).toEqual('L_A_C_0');
expect(data4Layout.edges[1].id).toEqual('L_A_D_0');
expect(data4Layout.edges[2].id).toEqual('e1');
expect(data4Layout.edges[3].id).toEqual('L_B_D_0');
expect(data4Layout.edges[4].id).toEqual('L_A1_C1_0');
expect(data4Layout.edges[5].id).toEqual('L_A1_D1_0');
});
it('should handle overriding edge animate again', function () {
const res = flow.parser.parse(`flowchart TD
A e1@--> B
C e2@--> D
E e3@--> F
e1@{ animate: true }
e2@{ animate: false }
e3@{ animate: true }
e3@{ animate: false }
`);
const data4Layout = flow.parser.yy.getData();
expect(data4Layout.nodes.length).toBe(6);
expect(data4Layout.edges.length).toBe(3);
expect(data4Layout.edges[0].id).toEqual('e1');
expect(data4Layout.edges[0].animate).toEqual(true);
expect(data4Layout.edges[1].id).toEqual('e2');
expect(data4Layout.edges[1].animate).toEqual(false);
expect(data4Layout.edges[2].id).toEqual('e3');
expect(data4Layout.edges[2].animate).toEqual(false);
});
it.skip('should be possible to use @ syntax to add labels with trail spaces', function () {
const res = flow.parser.parse( const res = flow.parser.parse(
`flowchart TB `flowchart TB
n2["label for n2"] & n4@{ label: "labe for n4"} & n5@{ label: "labe for n5"} ` n2["label for n2"] & n4@{ label: "labe for n4"} & n5@{ label: "labe for n5"} `

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');
}); });

2
packages/mermaid/src/diagrams/flowchart/parser/flow.jison
View File

@@ -141,7 +141,7 @@ that id.
.*direction\s+RL[^\n]* return 'direction_rl'; .*direction\s+RL[^\n]* return 'direction_rl';
.*direction\s+LR[^\n]* return 'direction_lr'; .*direction\s+LR[^\n]* return 'direction_lr';
[^\s]+\@(?=[^\{]) { return 'LINK_ID'; } [^\s\"]+\@(?=[^\{\"]) { return 'LINK_ID'; }
[0-9]+ return 'NUM'; [0-9]+ return 'NUM';
\# return 'BRKT'; \# return 'BRKT';
":::" return 'STYLE_SEPARATOR'; ":::" return 'STYLE_SEPARATOR';

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');
}); });

1
packages/mermaid/src/diagrams/flowchart/types.ts
View File

@@ -53,6 +53,7 @@ export interface FlowText {
} }
export interface FlowEdge { export interface FlowEdge {
isUserDefinedId: boolean;
start: string; start: string;
end: string; end: string;
interpolate?: string; interpolate?: string;

10
packages/mermaid/src/diagrams/gantt/styles.js
View File

@@ -1,7 +1,7 @@
const getStyles = (options) => const getStyles = (options) =>
` `
.mermaid-main-font { .mermaid-main-font {
font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif); font-family: ${options.fontFamily};
} }
.exclude-range { .exclude-range {
@@ -45,7 +45,7 @@ const getStyles = (options) =>
.sectionTitle { .sectionTitle {
text-anchor: start; text-anchor: start;
font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif); font-family: ${options.fontFamily};
} }
@@ -86,13 +86,13 @@ const getStyles = (options) =>
.taskText { .taskText {
text-anchor: middle; text-anchor: middle;
font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif); font-family: ${options.fontFamily};
} }
.taskTextOutsideRight { .taskTextOutsideRight {
fill: ${options.taskTextDarkColor}; fill: ${options.taskTextDarkColor};
text-anchor: start; text-anchor: start;
font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif); font-family: ${options.fontFamily};
} }
.taskTextOutsideLeft { .taskTextOutsideLeft {
@@ -248,7 +248,7 @@ const getStyles = (options) =>
text-anchor: middle; text-anchor: middle;
font-size: 18px; font-size: 18px;
fill: ${options.titleColor || options.textColor}; fill: ${options.titleColor || options.textColor};
font-family: var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif); font-family: ${options.fontFamily};
} }
`; `;

2
packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
View File

@@ -4,11 +4,13 @@ import parser from './parser/sankey.jison';
import db from './sankeyDB.js'; import db from './sankeyDB.js';
import renderer from './sankeyRenderer.js'; import renderer from './sankeyRenderer.js';
import { prepareTextForParsing } from './sankeyUtils.js'; import { prepareTextForParsing } from './sankeyUtils.js';
import sankeyStyles from './styles.js';
const originalParse = parser.parse.bind(parser); const originalParse = parser.parse.bind(parser);
parser.parse = (text: string) => originalParse(prepareTextForParsing(text)); parser.parse = (text: string) => originalParse(prepareTextForParsing(text));
export const diagram: DiagramDefinition = { export const diagram: DiagramDefinition = {
styles: sankeyStyles,
parser, parser,
db, db,
renderer, renderer,

1
packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
View File

@@ -136,7 +136,6 @@ export const draw = function (text: string, id: string, _version: string, diagOb
svg svg
.append('g') .append('g')
.attr('class', 'node-labels') .attr('class', 'node-labels')
.attr('font-family', 'sans-serif')
.attr('font-size', 14) .attr('font-size', 14)
.selectAll('text') .selectAll('text')
.data(graph.nodes) .data(graph.nodes)

6
packages/mermaid/src/diagrams/sankey/styles.js Normal file
View File

@@ -0,0 +1,6 @@
const getStyles = (options) =>
`.label {
font-family: ${options.fontFamily};
}`;
export default getStyles;

1
packages/mermaid/src/diagrams/state/stateDiagram-v2.ts
View File

@@ -15,6 +15,5 @@ export const diagram: DiagramDefinition = {
cnf.state = {}; cnf.state = {};
} }
cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute; cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
db.clear();
}, },
}; };

1
packages/mermaid/src/diagrams/state/stateDiagram.ts
View File

@@ -15,6 +15,5 @@ export const diagram: DiagramDefinition = {
cnf.state = {}; cnf.state = {};
} }
cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute; cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
db.clear();
}, },
}; };

6
packages/mermaid/src/diagrams/user-journey/styles.js
View File

@@ -1,7 +1,6 @@
const getStyles = (options) => const getStyles = (options) =>
`.label { `.label {
font-family: 'trebuchet ms', verdana, arial, sans-serif; font-family: ${options.fontFamily};
font-family: var(--mermaid-font-family);
color: ${options.textColor}; color: ${options.textColor};
} }
.mouth { .mouth {
@@ -79,8 +78,7 @@ const getStyles = (options) =>
text-align: center; text-align: center;
max-width: 200px; max-width: 200px;
padding: 2px; padding: 2px;
font-family: 'trebuchet ms', verdana, arial, sans-serif; font-family: ${options.fontFamily};
font-family: var(--mermaid-font-family);
font-size: 12px; font-size: 12px;
background: ${options.tertiaryColor}; background: ${options.tertiaryColor};
border: 1px solid ${options.border2}; border: 1px solid ${options.border2};

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

@@ -1,4 +1,4 @@
import { beforeEach, describe, expect, it, vi } from 'vitest'; import { assert, beforeEach, describe, expect, it, vi } from 'vitest';
// ------------------------------------- // -------------------------------------
// Mocks and mocking // Mocks and mocking
@@ -69,6 +69,8 @@ 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 { ClassDB } from './diagrams/class/classDb.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 +834,93 @@ 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 flowDiagram2 = 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(flowDiagram2.db);
assert(flowDiagram1.db instanceof FlowDB);
assert(flowDiagram2.db instanceof FlowDB);
expect(flowDiagram1.db.getDirection()).not.toEqual(flowDiagram2.db.getDirection());
const classDiagram1 = await mermaidAPI.getDiagramFromText(
`classDiagram
direction TB
class Student {
-idCard : IdCard
}
class IdCard{
-id : int
-name : string
}
class Bike{
-id : int
-name : string
}
Student "1" --o "1" IdCard : carries
Student "1" --o "1" Bike : rides`
);
const classDiagram2 = await mermaidAPI.getDiagramFromText(
`classDiagram
direction LR
class Student {
-idCard : IdCard
}
class IdCard{
-id : int
-name : string
}
class Bike{
-id : int
-name : string
}
Student "1" --o "1" IdCard : carries
Student "1" --o "1" Bike : rides`
);
// Since classDiagram will return new Db object each time, we can compare the db to be different.
expect(classDiagram1.db).not.toBe(classDiagram2.db);
assert(classDiagram1.db instanceof ClassDB);
assert(classDiagram2.db instanceof ClassDB);
expect(classDiagram1.db.getDirection()).not.toEqual(classDiagram2.db.getDirection());
const sequenceDiagram1 = await mermaidAPI.getDiagramFromText(
`sequenceDiagram
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
John-->>-Alice: I feel great!`
);
const sequenceDiagram2 = await mermaidAPI.getDiagramFromText(
`sequenceDiagram
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
John-->>-Alice: I feel great!`
);
// Since sequenceDiagram will return same Db object each time, we can compare the db to be same.
expect(sequenceDiagram1.db).toBe(sequenceDiagram2.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);
}); });
}); });

1
packages/mermaid/src/rendering-util/types.ts
View File

@@ -125,6 +125,7 @@ export interface Edge {
pattern?: string; pattern?: string;
thickness?: 'normal' | 'thick' | 'invisible' | 'dotted'; thickness?: 'normal' | 'thick' | 'invisible' | 'dotted';
look?: string; look?: string;
isUserDefinedId?: boolean;
} }
export interface RectOptions { export interface RectOptions {