marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-30 04:39:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' into timeline

Browse Source 
* develop: (45 commits)
  Showcase section to the docs - keepings docs up to date (#4055)
  bugfix: add missing d3 curves to flowchart and docs
  fix(deps): update dependency dagre-d3-es to v7.0.8
  build(pre-commit): cache eslint in pre-commit
  build(lint): cache eslint with strategy content
  Update cypress/integration/rendering/sequencediagram.spec.js
  feat(er): allow leading underscore for attributes name
  ci(lint): show nice error on lint failure
  chore: add moment to dependencies
  Update docs
  Update mindmap.md
  chore: remove moment-mini
  docs(readme-ch): fix twitter link
  build(lint): cache prettier on `pnpm run lint`
  fix: moment-mini default exporter
  docs(readme): update broken twitter badge
  test(er): improve tests on multiple key constraints
  Fixes Typo, remove console.log
  doc(er): add documentation on multiple key constraints
  feat(er): allow multiple constraints on attributes
  ...
This commit is contained in:
Sidharth Vinod
2023-02-08 15:57:09 +05:30
parent 6a045db83c 563896400b
commit d562a81019
59 changed files with 1674 additions and 650 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/mermaid-mindmap/package.json
View File

@@ -47,6 +47,7 @@
"non-layered-tidy-tree-layout": "^2.0.2"
},
"devDependencies": {
"@types/cytoscape": "^3.19.9",
"concurrently": "^7.5.0",
"mermaid": "workspace:*",
"rimraf": "^3.0.2"

6
packages/mermaid/package.json
View File

@@ -54,12 +54,12 @@
"dependencies": {
"@braintree/sanitize-url": "^6.0.0",
"d3": "^7.0.0",
"dagre-d3-es": "7.0.6",
"dagre-d3-es": "7.0.8",
"dompurify": "2.4.3",
"elkjs": "^0.8.2",
"khroma": "^2.0.0",
"lodash-es": "^4.17.21",
"moment-mini": "^2.24.0",
"moment": "^2.29.4",
"non-layered-tidy-tree-layout": "^2.0.2",
"stylis": "^4.1.2",
"ts-dedent": "^2.2.0",
@@ -86,10 +86,10 @@
"js-base64": "^3.7.2",
"jsdom": "^20.0.2",
"micromatch": "^4.0.5",
"moment": "^2.29.4",
"path-browserify": "^1.0.1",
"prettier": "^2.7.1",
"remark": "^14.0.2",
"remark-frontmatter": "^4.0.1",
"remark-gfm": "^3.0.1",
"rimraf": "^3.0.2",
"start-server-and-test": "^1.14.0",

2
packages/mermaid/src/Diagram.ts
View File

@@ -6,7 +6,7 @@ import { extractFrontMatter } from './diagram-api/frontmatter';
import { isDetailedError } from './utils';
import type { DetailedError } from './utils';
export type ParseErrorFunction = (err: string | DetailedError, hash?: any) => void;
export type ParseErrorFunction = (err: string | DetailedError | unknown, hash?: any) => void;
export class Diagram {
type = 'graph';

7
packages/mermaid/src/diagrams/er/erRenderer.js
View File

@@ -59,7 +59,7 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => {
// Check to see if any of the attributes has a key or a comment
attributes.forEach((item) => {
if (item.attributeKeyType !== undefined) {
if (item.attributeKeyTypeList !== undefined && item.attributeKeyTypeList.length > 0) {
hasKeyType = true;
}
@@ -112,6 +112,9 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => {
nodeHeight = Math.max(typeBBox.height, nameBBox.height);
if (hasKeyType) {
const keyTypeNodeText =
item.attributeKeyTypeList !== undefined ? item.attributeKeyTypeList.join(',') : '';
const keyTypeNode = groupNode
.append('text')
.classed('er entityLabel', true)
@@ -122,7 +125,7 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => {
.style('text-anchor', 'left')
.style('font-family', getConfig().fontFamily)
.style('font-size', attrFontSize + 'px')
.text(item.attributeKeyType || '');
.text(keyTypeNodeText);
attributeNode.kn = keyTypeNode;
const keyTypeBBox = keyTypeNode.node().getBBox();

15
packages/mermaid/src/diagrams/er/parser/erDiagram.jison
View File

@@ -28,10 +28,11 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili
\"[^"]*\" return 'WORD';
"erDiagram" return 'ER_DIAGRAM';
"{" { this.begin("block"); return 'BLOCK_START'; }
<block>"," return 'COMMA';
<block>\s+ /* skip whitespace in block */
<block>\b((?:PK)|(?:FK)|(?:UK))\b return 'ATTRIBUTE_KEY'
<block>(.*?)[~](.*?)*[~] return 'ATTRIBUTE_WORD';
<block>[A-Za-z][A-Za-z0-9\-_\[\]\(\)]* return 'ATTRIBUTE_WORD'
<block>[A-Za-z_][A-Za-z0-9\-_\[\]\(\)]* return 'ATTRIBUTE_WORD'
<block>\"[^"]*\" return 'COMMENT';
<block>[\n]+ /* nothing */
<block>"}" { this.popState(); return 'BLOCK_STOP'; }
@@ -80,7 +81,7 @@ start
document
: /* empty */ { $$ = [] }
| document line {$1.push($2);$$ = $1}
| document line {$1.push($2);$$ = $1}
;
line
@@ -131,11 +132,12 @@ attributes
attribute
: attributeType attributeName { $$ = { attributeType: $1, attributeName: $2 }; }
| attributeType attributeName attributeKeyType { $$ = { attributeType: $1, attributeName: $2, attributeKeyType: $3 }; }
| attributeType attributeName attributeKeyTypeList { $$ = { attributeType: $1, attributeName: $2, attributeKeyTypeList: $3 }; }
| attributeType attributeName attributeComment { $$ = { attributeType: $1, attributeName: $2, attributeComment: $3 }; }
| attributeType attributeName attributeKeyType attributeComment { $$ = { attributeType: $1, attributeName: $2, attributeKeyType: $3, attributeComment: $4 }; }
| attributeType attributeName attributeKeyTypeList attributeComment { $$ = { attributeType: $1, attributeName: $2, attributeKeyTypeList: $3, attributeComment: $4 }; }
;
attributeType
: ATTRIBUTE_WORD { $$=$1; }
;
@@ -144,6 +146,11 @@ attributeName
: ATTRIBUTE_WORD { $$=$1; }
;
attributeKeyTypeList
: attributeKeyType { $$ = [$1]; }
| attributeKeyTypeList COMMA attributeKeyType { $1.push($3); $$ = $1; }
;
attributeKeyType
: ATTRIBUTE_KEY { $$=$1; }
;

53
packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js
View File

@@ -135,6 +135,37 @@ describe('when parsing ER diagram it...', function () {
});
});
describe('attribute name', () => {
it('should allow alphanumeric characters, dashes, underscores and brackets (not leading chars)', function () {
const entity = 'BOOK';
const attribute1 = 'string myBookTitle';
const attribute2 = 'string MYBOOKSUBTITLE_1';
const attribute3 = 'string author-ref[name](1)';
erDiagram.parser.parse(
`erDiagram\n${entity} {\n${attribute1}\n${attribute2}\n${attribute3}\n}`
);
const entities = erDb.getEntities();
expect(Object.keys(entities).length).toBe(1);
expect(entities[entity].attributes.length).toBe(3);
expect(entities[entity].attributes[0].attributeName).toBe('myBookTitle');
expect(entities[entity].attributes[1].attributeName).toBe('MYBOOKSUBTITLE_1');
expect(entities[entity].attributes[2].attributeName).toBe('author-ref[name](1)');
});
it('should not allow leading numbers, dashes or brackets', function () {
const entity = 'BOOK';
const nonLeadingChars = '0-[]()';
[...nonLeadingChars].forEach((nonLeadingChar) => {
expect(() => {
const attribute = `string ${nonLeadingChar}author`;
erDiagram.parser.parse(`erDiagram\n${entity} {\n${attribute}\n}`);
}).toThrow();
});
});
});
it('should allow an entity with a single attribute to be defined', function () {
const entity = 'BOOK';
const attribute = 'string title';
@@ -190,6 +221,28 @@ describe('when parsing ER diagram it...', function () {
expect(entities[entity].attributes.length).toBe(4);
});
it('should allow an entity with attributes that have many constraints and comments', function () {
const entity = 'CUSTOMER';
const attribute1 = 'int customer_number PK, FK "comment1"';
const attribute2 = 'datetime customer_status_start_datetime PK,UK, FK';
const attribute3 = 'datetime customer_status_end_datetime PK , UK "comment3"';
const attribute4 = 'string customer_firstname';
const attribute5 = 'string customer_lastname "comment5"';
erDiagram.parser.parse(
`erDiagram\n${entity} {\n${attribute1}\n${attribute2}\n${attribute3}\n${attribute4}\n${attribute5}\n}`
);
const entities = erDb.getEntities();
expect(entities[entity].attributes[0].attributeKeyTypeList).toEqual(['PK', 'FK']);
expect(entities[entity].attributes[0].attributeComment).toBe('comment1');
expect(entities[entity].attributes[1].attributeKeyTypeList).toEqual(['PK', 'UK', 'FK']);
expect(entities[entity].attributes[2].attributeKeyTypeList).toEqual(['PK', 'UK']);
expect(entities[entity].attributes[2].attributeComment).toBe('comment3');
expect(entities[entity].attributes[3].attributeKeyTypeList).toBeUndefined();
expect(entities[entity].attributes[4].attributeKeyTypeList).toBeUndefined();
expect(entities[entity].attributes[4].attributeComment).toBe('comment5');
});
it('should allow an entity with attribute that has a generic type', function () {
const entity = 'BOOK';
const attribute1 = 'type~T~ type';

259
packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
View File

@@ -609,7 +609,7 @@ const insertChildren = (nodeArray, parentLookupDb) => {
* @param id
*/
export const draw = function (text, id, _version, diagObj) {
export const draw = async function (text, id, _version, diagObj) {
// Add temporary render element
diagObj.db.clear();
nodeDb = {};
@@ -617,149 +617,128 @@ export const draw = function (text, id, _version, diagObj) {
// Parse the graph definition
diagObj.parser.parse(text);
return new Promise(function (resolve, reject) {
const renderEl = select('body').append('div').attr('style', 'height:400px').attr('id', 'cy');
// .attr('style', 'display:none')
let graph = {
id: 'root',
layoutOptions: {
'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
// 'elk.hierarchyHandling': 'SEPARATE_CHILDREN',
'org.eclipse.elk.padding': '[top=100, left=100, bottom=110, right=110]',
// 'org.eclipse.elk.layered.spacing.nodeNodeBetweenLayers': 120,
// 'elk.layered.spacing.nodeNodeBetweenLayers': '140',
'elk.layered.spacing.edgeNodeBetweenLayers': '30',
// 'elk.algorithm': 'layered',
'elk.direction': 'DOWN',
// 'elk.port.side': 'SOUTH',
// 'nodePlacement.strategy': 'SIMPLE',
// 'org.eclipse.elk.spacing.labelLabel': 120,
// 'org.eclipse.elk.graphviz.concentrate': true,
// 'org.eclipse.elk.spacing.nodeNode': 120,
// 'org.eclipse.elk.spacing.edgeEdge': 120,
// 'org.eclipse.elk.spacing.edgeNode': 120,
// 'org.eclipse.elk.spacing.nodeEdge': 120,
// 'org.eclipse.elk.spacing.componentComponent': 120,
},
children: [],
edges: [],
};
log.info('Drawing flowchart using v3 renderer');
const renderEl = select('body').append('div').attr('style', 'height:400px').attr('id', 'cy');
let graph = {
id: 'root',
layoutOptions: {
'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
'org.eclipse.elk.padding': '[top=100, left=100, bottom=110, right=110]',
'elk.layered.spacing.edgeNodeBetweenLayers': '30',
'elk.direction': 'DOWN',
},
children: [],
edges: [],
};
log.info('Drawing flowchart using v3 renderer');
// Set the direction,
// Fetch the default direction, use TD if none was found
let dir = diagObj.db.getDirection();
switch (dir) {
case 'BT':
graph.layoutOptions['elk.direction'] = 'UP';
break;
case 'TB':
graph.layoutOptions['elk.direction'] = 'DOWN';
break;
case 'LR':
graph.layoutOptions['elk.direction'] = 'RIGHT';
break;
case 'RL':
graph.layoutOptions['elk.direction'] = 'LEFT';
break;
// Set the direction,
// Fetch the default direction, use TD if none was found
let dir = diagObj.db.getDirection();
switch (dir) {
case 'BT':
graph.layoutOptions['elk.direction'] = 'UP';
break;
case 'TB':
graph.layoutOptions['elk.direction'] = 'DOWN';
break;
case 'LR':
graph.layoutOptions['elk.direction'] = 'RIGHT';
break;
case 'RL':
graph.layoutOptions['elk.direction'] = 'LEFT';
break;
}
const { securityLevel, flowchart: conf } = getConfig();
// Find the root dom node to ne used in rendering
// Handle root and document for when rendering in sandbox mode
let sandboxElement;
if (securityLevel === 'sandbox') {
sandboxElement = select('#i' + id);
}
const root =
securityLevel === 'sandbox'
? select(sandboxElement.nodes()[0].contentDocument.body)
: select('body');
const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
const svg = root.select(`[id="${id}"]`);
// Define the supported markers for the diagram
const markers = ['point', 'circle', 'cross'];
// Add the marker definitions to the svg as marker tags
insertMarkers(svg, markers, diagObj.type, diagObj.arrowMarkerAbsolute);
// Fetch the vertices/nodes and edges/links from the parsed graph definition
const vert = diagObj.db.getVertices();
// Setup nodes from the subgraphs with type group, these will be used
// as nodes with children in the subgraph
let subG;
const subGraphs = diagObj.db.getSubGraphs();
log.info('Subgraphs - ', subGraphs);
for (let i = subGraphs.length - 1; i >= 0; i--) {
subG = subGraphs[i];
diagObj.db.addVertex(subG.id, subG.title, 'group', undefined, subG.classes, subG.dir);
}
// Add an element in the svg to be used to hold the subgraphs container
// elements
const subGraphsEl = svg.insert('g').attr('class', 'subgraphs');
// Create the lookup db for the subgraphs and their children to used when creating
// the tree structured graph
const parentLookupDb = addSubGraphs(diagObj.db);
// Add the nodes to the graph, this will entail creating the actual nodes
// in order to get the size of the node. You can't get the size of a node
// that is not in the dom so we need to add it to the dom, get the size
// we will position the nodes when we get the layout from elkjs
graph = addVertices(vert, id, root, doc, diagObj, parentLookupDb, graph);
// Time for the edges, we start with adding an element in the node to hold the edges
const edgesEl = svg.insert('g').attr('class', 'edges edgePath');
// Fetch the edges form the parsed graph definition
const edges = diagObj.db.getEdges();
// Add the edges to the graph, this will entail creating the actual edges
graph = addEdges(edges, diagObj, graph, svg);
// Iterate through all nodes and add the top level nodes to the graph
const nodes = Object.keys(nodeDb);
nodes.forEach((nodeId) => {
const node = nodeDb[nodeId];
if (!node.parent) {
graph.children.push(node);
}
const { securityLevel, flowchart: conf } = getConfig();
// Find the root dom node to ne used in rendering
// Handle root and document for when rendering in sandbox mode
let sandboxElement;
if (securityLevel === 'sandbox') {
sandboxElement = select('#i' + id);
}
const root =
securityLevel === 'sandbox'
? select(sandboxElement.nodes()[0].contentDocument.body)
: select('body');
const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
const svg = root.select(`[id="${id}"]`);
// Define the supported markers for the diagram
const markers = ['point', 'circle', 'cross'];
// Add the marker definitions to the svg as marker tags
insertMarkers(svg, markers, diagObj.type, diagObj.arrowMarkerAbsolute);
// Fetch the vertices/nodes and edges/links from the parsed graph definition
const vert = diagObj.db.getVertices();
// Setup nodes from the subgraphs with type group, these will be used
// as nodes with children in the subgraph
let subG;
const subGraphs = diagObj.db.getSubGraphs();
log.info('Subgraphs - ', subGraphs);
for (let i = subGraphs.length - 1; i >= 0; i--) {
subG = subGraphs[i];
diagObj.db.addVertex(subG.id, subG.title, 'group', undefined, subG.classes, subG.dir);
}
// Add an element in the svg to be used to hold the subgraphs container
// elements
const subGraphsEl = svg.insert('g').attr('class', 'subgraphs');
// Create the lookup db for the subgraphs and their children to used when creating
// the tree structured graph
const parentLookupDb = addSubGraphs(diagObj.db);
// Add the nodes to the graph, this will entail creating the actual nodes
// in order to get the size of the node. You can't get the size of a node
// that is not in the dom so we need to add it to the dom, get the size
// we will position the nodes when we get the layout from elkjs
graph = addVertices(vert, id, root, doc, diagObj, parentLookupDb, graph);
// Time for the edges, we start with adding an element in the node to hold the edges
const edgesEl = svg.insert('g').attr('class', 'edges edgePath');
// Fetch the edges form the parsed graph definition
const edges = diagObj.db.getEdges();
// Add the edges to the graph, this will entail creating the actual edges
graph = addEdges(edges, diagObj, graph, svg);
// Iterate through all nodes and add the top level nodes to the graph
const nodes = Object.keys(nodeDb);
nodes.forEach((nodeId) => {
const node = nodeDb[nodeId];
if (!node.parent) {
graph.children.push(node);
}
// node.nodePadding = [120, 50, 50, 50];
// node['org.eclipse.elk.spacing.nodeNode'] = 120;
// Subgraph
if (parentLookupDb.childrenById[nodeId] !== undefined) {
node.labels = [
{
text: node.labelText,
layoutOptions: {
'nodeLabels.placement': '[H_CENTER, V_TOP, INSIDE]',
},
width: node.labelData.width,
height: node.labelData.height,
// Subgraph
if (parentLookupDb.childrenById[nodeId] !== undefined) {
node.labels = [
{
text: node.labelText,
layoutOptions: {
'nodeLabels.placement': '[H_CENTER, V_TOP, INSIDE]',
},
];
delete node.x;
delete node.y;
delete node.width;
delete node.height;
}
});
insertChildren(graph.children, parentLookupDb);
elk.layout(graph).then(function (g) {
drawNodes(0, 0, g.children, svg, subGraphsEl, diagObj, 0);
g.edges.map((edge, id) => {
insertEdge(edgesEl, edge, edge.edgeData, diagObj, parentLookupDb);
});
setupGraphViewbox({}, svg, conf.diagramPadding, conf.useMaxWidth);
resolve();
});
// Remove element after layout
renderEl.remove();
width: node.labelData.width,
height: node.labelData.height,
},
];
delete node.x;
delete node.y;
delete node.width;
delete node.height;
}
});
insertChildren(graph.children, parentLookupDb);
const g = await elk.layout(graph);
drawNodes(0, 0, g.children, svg, subGraphsEl, diagObj, 0);
g.edges?.map((edge) => {
insertEdge(edgesEl, edge, edge.edgeData, diagObj, parentLookupDb);
});
setupGraphViewbox({}, svg, conf.diagramPadding, conf.useMaxWidth);
// Remove element after layout
renderEl.remove();
};
const drawNodes = (relX, relY, nodeArray, svg, subgraphsEl, diagObj, depth) => {

2
packages/mermaid/src/diagrams/gantt/ganttDb.js
View File

@@ -1,4 +1,4 @@
import moment from 'moment-mini';
import moment from 'moment';
import { sanitizeUrl } from '@braintree/sanitize-url';
import { log } from '../../logger';
import * as configApi from '../../config';

2
packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts
View File

@@ -1,5 +1,5 @@
// @ts-nocheck TODO: Fix TS
import moment from 'moment-mini';
import moment from 'moment';
import ganttDb from './ganttDb';
import { convert } from '../../tests/util';

2
packages/mermaid/src/diagrams/gantt/ganttRenderer.js
View File

@@ -1,4 +1,4 @@
import moment from 'moment-mini';
import moment from 'moment';
import { log } from '../../logger';
import {
select,

32
packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison
View File

@@ -35,8 +35,9 @@
\%%(?!\{)[^\n]* /* skip comments */
[^\}]\%\%[^\n]* /* skip comments */
[0-9]+(?=[ \n]+) return 'NUM';
"box" { this.begin('LINE'); return 'box'; }
"participant" { this.begin('ID'); return 'participant'; }
"actor" { this.begin('ID'); return 'participant_actor'; }
"actor" { this.begin('ID'); return 'participant_actor'; }
<ID>[^\->:\n,;]+?([\-]*[^\->:\n,;]+?)*?(?=((?!\n)\s)+"as"(?!\n)\s|[#\n;]|$) { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; }
<ALIAS>"as" { this.popState(); this.popState(); this.begin('LINE'); return 'AS'; }
<ALIAS>(?:) { this.popState(); this.popState(); return 'NEWLINE'; }
@@ -117,16 +118,30 @@ line
| NEWLINE { $$=[]; }
;
box_section
: /* empty */ { $$ = [] }
| box_section box_line {$1.push($2);$$ = $1}
;
box_line
: SPACE participant_statement { $$ = $2 }
| participant_statement { $$ = $1 }
| NEWLINE { $$=[]; }
;
directive
: openDirective typeDirective closeDirective 'NEWLINE'
| openDirective typeDirective ':' argDirective closeDirective 'NEWLINE'
;
statement
: 'participant' actor 'AS' restOfLine 'NEWLINE' {$2.type='addParticipant';$2.description=yy.parseMessage($4); $$=$2;}
| 'participant' actor 'NEWLINE' {$2.type='addParticipant';$$=$2;}
| 'participant_actor' actor 'AS' restOfLine 'NEWLINE' {$2.type='addActor';$2.description=yy.parseMessage($4); $$=$2;}
| 'participant_actor' actor 'NEWLINE' {$2.type='addActor'; $$=$2;}
: participant_statement
| 'box' restOfLine box_section end
{
$3.unshift({type: 'boxStart', boxData:yy.parseBoxData($2) });
$3.push({type: 'boxEnd', boxText:$2});
$$=$3;}
| signal 'NEWLINE'
| autonumber NUM NUM 'NEWLINE' { $$= {type:'sequenceIndex',sequenceIndex: Number($2), sequenceIndexStep:Number($3), sequenceVisible:true, signalType:yy.LINETYPE.AUTONUMBER};}
| autonumber NUM 'NEWLINE' { $$ = {type:'sequenceIndex',sequenceIndex: Number($2), sequenceIndexStep:1, sequenceVisible:true, signalType:yy.LINETYPE.AUTONUMBER};}
@@ -209,6 +224,13 @@ else_sections
{ $$ = $1.concat([{type: 'else', altText:yy.parseMessage($3), signalType: yy.LINETYPE.ALT_ELSE}, $4]); }
;
participant_statement
: 'participant' actor 'AS' restOfLine 'NEWLINE' {$2.type='addParticipant';$2.description=yy.parseMessage($4); $$=$2;}
| 'participant' actor 'NEWLINE' {$2.type='addParticipant';$$=$2;}
| 'participant_actor' actor 'AS' restOfLine 'NEWLINE' {$2.type='addActor';$2.description=yy.parseMessage($4); $$=$2;}
| 'participant_actor' actor 'NEWLINE' {$2.type='addActor'; $$=$2;}
;
note_statement
: 'note' placement actor text2
{

112
packages/mermaid/src/diagrams/sequence/sequenceDb.js
View File

@@ -14,20 +14,52 @@ import {
let prevActor = undefined;
let actors = {};
let boxes = [];
let messages = [];
const notes = [];
let sequenceNumbersEnabled = false;
let wrapEnabled;
let currentBox = undefined;
export const parseDirective = function (statement, context, type) {
mermaidAPI.parseDirective(this, statement, context, type);
};
export const addBox = function (data) {
boxes.push({
name: data.text,
wrap: (data.wrap === undefined && autoWrap()) || !!data.wrap,
fill: data.color,
actorKeys: [],
});
currentBox = boxes.slice(-1)[0];
};
export const addActor = function (id, name, description, type) {
// Don't allow description nulling
let assignedBox = currentBox;
const old = actors[id];
if (old && name === old.name && description == null) {
return;
if (old) {
// If already set and trying to set to a new one throw error
if (currentBox && old.box && currentBox !== old.box) {
throw new Error(
'A same participant should only be defined in one Box: ' +
old.name +
" can't be in '" +
old.box.name +
"' and in '" +
currentBox.name +
"' at the same time."
);
}
// Don't change the box if already
assignedBox = old.box ? old.box : currentBox;
old.box = assignedBox;
// Don't allow description nulling
if (old && name === old.name && description == null) {
return;
}
}
// Don't allow null descriptions, either
@@ -39,6 +71,7 @@ export const addActor = function (id, name, description, type) {
}
actors[id] = {
box: assignedBox,
name: name,
description: description.text,
wrap: (description.wrap === undefined && autoWrap()) || !!description.wrap,
@@ -53,6 +86,9 @@ export const addActor = function (id, name, description, type) {
actors[prevActor].nextActor = id;
}
if (currentBox) {
currentBox.actorKeys.push(id);
}
prevActor = id;
};
@@ -111,10 +147,21 @@ export const addSignal = function (
return true;
};
export const hasAtLeastOneBox = function () {
return boxes.length > 0;
};
export const hasAtLeastOneBoxWithTitle = function () {
return boxes.some((b) => b.name);
};
export const getMessages = function () {
return messages;
};
export const getBoxes = function () {
return boxes;
};
export const getActors = function () {
return actors;
};
@@ -147,6 +194,7 @@ export const autoWrap = () => {
export const clear = function () {
actors = {};
boxes = [];
messages = [];
sequenceNumbersEnabled = false;
commonClear();
@@ -167,6 +215,47 @@ export const parseMessage = function (str) {
return message;
};
// We expect the box statement to be color first then description
// The color can be rgb,rgba,hsl,hsla, or css code names #hex codes are not supported for now because of the way the char # is handled
// We extract first segment as color, the rest of the line is considered as text
export const parseBoxData = function (str) {
const match = str.match(/^((?:rgba?|hsla?)\s*\(.*\)|\w*)(.*)$/);
let color = match != null && match[1] ? match[1].trim() : 'transparent';
let title = match != null && match[2] ? match[2].trim() : undefined;
// check that the string is a color
if (window && window.CSS) {
if (!window.CSS.supports('color', color)) {
color = 'transparent';
title = str.trim();
}
} else {
const style = new Option().style;
style.color = color;
if (style.color !== color) {
color = 'transparent';
title = str.trim();
}
}
const boxData = {
color: color,
text:
title !== undefined
? sanitizeText(title.replace(/^:?(?:no)?wrap:/, ''), configApi.getConfig())
: undefined,
wrap:
title !== undefined
? title.match(/^:?wrap:/) !== null
? true
: title.match(/^:?nowrap:/) !== null
? false
: undefined
: undefined,
};
return boxData;
};
export const LINETYPE = {
SOLID: 0,
DOTTED: 1,
@@ -311,6 +400,13 @@ function insertProperties(actor, properties) {
}
}
/**
*
*/
function boxEnd() {
currentBox = undefined;
}
export const addDetails = function (actorId, text) {
// find the actor
const actor = getActor(actorId);
@@ -391,6 +487,12 @@ export const apply = function (param) {
case 'addMessage':
addSignal(param.from, param.to, param.msg, param.signalType);
break;
case 'boxStart':
addBox(param.boxData);
break;
case 'boxEnd':
boxEnd();
break;
case 'loopStart':
addSignal(undefined, undefined, param.loopText, param.signalType);
break;
@@ -467,12 +569,14 @@ export default {
getActorKeys,
getActorProperty,
getAccTitle,
getBoxes,
getDiagramTitle,
setDiagramTitle,
parseDirective,
getConfig: () => configApi.getConfig().sequence,
clear,
parseMessage,
parseBoxData,
LINETYPE,
ARROWTYPE,
PLACEMENT,
@@ -481,4 +585,6 @@ export default {
apply,
setAccDescription,
getAccDescription,
hasAtLeastOneBox,
hasAtLeastOneBoxWithTitle,
};

98
packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
View File

@@ -52,8 +52,16 @@ vi.mock('d3', () => {
curveBasis: 'basis',
curveBasisClosed: 'basisClosed',
curveBasisOpen: 'basisOpen',
curveLinear: 'linear',
curveBumpX: 'bumpX',
curveBumpY: 'bumpY',
curveBundle: 'bundle',
curveCardinalClosed: 'cardinalClosed',
curveCardinalOpen: 'cardinalOpen',
curveCardinal: 'cardinal',
curveCatmullRomClosed: 'catmullRomClosed',
curveCatmullRomOpen: 'catmullRomOpen',
curveCatmullRom: 'catmullRom',
curveLinear: 'linear',
curveLinearClosed: 'linearClosed',
curveMonotoneX: 'monotoneX',
curveMonotoneY: 'monotoneY',
@@ -1299,8 +1307,76 @@ properties b: {"class": "external-service-actor", "icon": "@computer"}
expect(actors.b.properties['icon']).toBe('@computer');
expect(actors.c.properties['class']).toBe(undefined);
});
});
it('should handle box', function () {
const str = `
sequenceDiagram
box green Group 1
participant a as Alice
participant b as Bob
end
participant c as Charlie
links a: { "Repo": "https://repo.contoso.com/", "Dashboard": "https://dashboard.contoso.com/" }
links b: { "Dashboard": "https://dashboard.contoso.com/" }
links a: { "On-Call": "https://oncall.contoso.com/?svc=alice" }
link a: Endpoint @ https://alice.contoso.com
link a: Swagger @ https://swagger.contoso.com
link a: Tests @ https://tests.contoso.com/?svc=alice@contoso.com
`;
mermaidAPI.parse(str);
const boxes = diagram.db.getBoxes();
expect(boxes[0].name).toEqual('Group 1');
expect(boxes[0].actorKeys).toEqual(['a', 'b']);
expect(boxes[0].fill).toEqual('green');
});
it('should handle box without color', function () {
const str = `
sequenceDiagram
box Group 1
participant a as Alice
participant b as Bob
end
participant c as Charlie
links a: { "Repo": "https://repo.contoso.com/", "Dashboard": "https://dashboard.contoso.com/" }
links b: { "Dashboard": "https://dashboard.contoso.com/" }
links a: { "On-Call": "https://oncall.contoso.com/?svc=alice" }
link a: Endpoint @ https://alice.contoso.com
link a: Swagger @ https://swagger.contoso.com
link a: Tests @ https://tests.contoso.com/?svc=alice@contoso.com
`;
mermaidAPI.parse(str);
const boxes = diagram.db.getBoxes();
expect(boxes[0].name).toEqual('Group 1');
expect(boxes[0].actorKeys).toEqual(['a', 'b']);
expect(boxes[0].fill).toEqual('transparent');
});
it('should handle box without description', function () {
const str = `
sequenceDiagram
box Aqua
participant a as Alice
participant b as Bob
end
participant c as Charlie
links a: { "Repo": "https://repo.contoso.com/", "Dashboard": "https://dashboard.contoso.com/" }
links b: { "Dashboard": "https://dashboard.contoso.com/" }
links a: { "On-Call": "https://oncall.contoso.com/?svc=alice" }
link a: Endpoint @ https://alice.contoso.com
link a: Swagger @ https://swagger.contoso.com
link a: Tests @ https://tests.contoso.com/?svc=alice@contoso.com
`;
mermaidAPI.parse(str);
const boxes = diagram.db.getBoxes();
expect(boxes[0].name).toBeFalsy();
expect(boxes[0].actorKeys).toEqual(['a', 'b']);
expect(boxes[0].fill).toEqual('Aqua');
});
});
describe('when checking the bounds in a sequenceDiagram', function () {
beforeAll(() => {
let conf = {
@@ -1573,6 +1649,24 @@ Alice->Bob: Hello Bob, how are you?`;
expect(bounds.stopx).toBe(conf.width * 2 + conf.actorMargin);
expect(bounds.stopy).toBe(models.lastMessage().stopy + 10);
});
it('should handle two actors in a box', function () {
const str = `
sequenceDiagram
box rgb(34, 56, 0) Group1
participant Alice
participant Bob
end
Alice->Bob: Hello Bob, how are you?`;
mermaidAPI.parse(str);
diagram.renderer.draw(str, 'tst', '1.2.3', diagram);
const { bounds, models } = diagram.renderer.bounds.getBounds();
expect(bounds.startx).toBe(0);
expect(bounds.starty).toBe(0);
expect(bounds.stopx).toBe(conf.width * 2 + conf.actorMargin + conf.boxTextMargin * 2);
expect(bounds.stopy).toBe(models.lastMessage().stopy + 20);
});
it('should handle two actors with init directive', function () {
const str = `
%%{init: {'logLevel': 0}}%%

108
packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
View File

@@ -10,6 +10,7 @@ import assignWithDepth from '../../assignWithDepth';
import utils from '../../utils';
import { configureSvgSize } from '../../setupGraphViewbox';
import Diagram from '../../Diagram';
import { convert } from '../../tests/util';
let conf = {};
@@ -43,10 +44,14 @@ export const bounds = {
},
clear: function () {
this.actors = [];
this.boxes = [];
this.loops = [];
this.messages = [];
this.notes = [];
},
addBox: function (boxModel) {
this.boxes.push(boxModel);
},
addActor: function (actorModel) {
this.actors.push(actorModel);
},
@@ -72,6 +77,7 @@ export const bounds = {
return this.notes[this.notes.length - 1];
},
actors: [],
boxes: [],
loops: [],
messages: [],
notes: [],
@@ -465,7 +471,8 @@ export const drawActors = function (
actorKeys,
verticalPos,
configuration,
messages
messages,
isFooter
) {
if (configuration.hideUnusedParticipants === true) {
const newActors = new Set();
@@ -480,8 +487,28 @@ export const drawActors = function (
let prevWidth = 0;
let prevMargin = 0;
let maxHeight = 0;
let prevBox = undefined;
for (const actorKey of actorKeys) {
const actor = actors[actorKey];
const box = actor.box;
// end of box
if (prevBox && prevBox != box) {
if (!isFooter) {
bounds.models.addBox(prevBox);
}
prevMargin += conf.boxMargin + prevBox.margin;
}
// new box
if (box && box != prevBox) {
if (!isFooter) {
box.x = prevWidth + prevMargin;
box.y = verticalPos;
}
prevMargin += box.margin;
}
// Add some rendering data to the object
actor.width = actor.width || conf.width;
@@ -489,18 +516,27 @@ export const drawActors = function (
actor.margin = actor.margin || conf.actorMargin;
actor.x = prevWidth + prevMargin;
actor.y = verticalPos;
actor.y = bounds.getVerticalPos();
// Draw the box with the attached line
const height = svgDraw.drawActor(diagram, actor, conf);
const height = svgDraw.drawActor(diagram, actor, conf, isFooter);
maxHeight = Math.max(maxHeight, height);
bounds.insert(actor.x, verticalPos, actor.x + actor.width, actor.height);
prevWidth += actor.width;
prevMargin += actor.margin;
prevWidth += actor.width + prevMargin;
if (actor.box) {
actor.box.width = prevWidth + box.margin - actor.box.x;
}
prevMargin = actor.margin;
prevBox = actor.box;
bounds.models.addActor(actor);
}
// end of box
if (prevBox && !isFooter) {
bounds.models.addBox(prevBox);
}
// Add a margin between the actor boxes and the first arrow
bounds.bumpVerticalPos(maxHeight);
};
@@ -614,18 +650,27 @@ export const draw = function (_text: string, id: string, _version: string, diagO
// Fetch data from the parsing
const actors = diagObj.db.getActors();
const boxes = diagObj.db.getBoxes();
const actorKeys = diagObj.db.getActorKeys();
const messages = diagObj.db.getMessages();
const title = diagObj.db.getDiagramTitle();
const hasBoxes = diagObj.db.hasAtLeastOneBox();
const hasBoxTitles = diagObj.db.hasAtLeastOneBoxWithTitle();
const maxMessageWidthPerActor = getMaxMessageWidthPerActor(actors, messages, diagObj);
conf.height = calculateActorMargins(actors, maxMessageWidthPerActor);
conf.height = calculateActorMargins(actors, maxMessageWidthPerActor, boxes);
svgDraw.insertComputerIcon(diagram);
svgDraw.insertDatabaseIcon(diagram);
svgDraw.insertClockIcon(diagram);
drawActors(diagram, actors, actorKeys, 0, conf, messages);
if (hasBoxes) {
bounds.bumpVerticalPos(conf.boxMargin);
if (hasBoxTitles) {
bounds.bumpVerticalPos(boxes[0].textMaxHeight);
}
}
drawActors(diagram, actors, actorKeys, 0, conf, messages, false);
const loopWidths = calculateLoopBounds(messages, actors, maxMessageWidthPerActor, diagObj);
// The arrow head definition is attached to the svg once
@@ -847,11 +892,26 @@ export const draw = function (_text: string, id: string, _version: string, diagO
if (conf.mirrorActors) {
// Draw actors below diagram
bounds.bumpVerticalPos(conf.boxMargin * 2);
drawActors(diagram, actors, actorKeys, bounds.getVerticalPos(), conf, messages);
drawActors(diagram, actors, actorKeys, bounds.getVerticalPos(), conf, messages, true);
bounds.bumpVerticalPos(conf.boxMargin);
fixLifeLineHeights(diagram, bounds.getVerticalPos());
}
bounds.models.boxes.forEach(function (box) {
box.height = bounds.getVerticalPos() - box.y;
bounds.insert(box.x, box.y, box.x + box.width, box.height);
box.startx = box.x;
box.starty = box.y;
box.stopx = box.startx + box.width;
box.stopy = box.starty + box.height;
box.stroke = 'rgb(0,0,0, 0.5)';
svgDraw.drawBox(diagram, box, conf);
});
if (hasBoxes) {
bounds.bumpVerticalPos(conf.boxMargin);
}
// only draw popups for the top row of actors.
const requiredBoxSize = drawActorsPopup(diagram, actors, actorKeys, doc);
@@ -1039,10 +1099,12 @@ const getRequiredPopupWidth = function (actor) {
*
* @param actors - The actors map to calculate margins for
* @param actorToMessageWidth - A map of actor key → max message width it holds
* @param boxes - The boxes around the actors if any
*/
function calculateActorMargins(
actors: { [id: string]: any },
actorToMessageWidth: ReturnType<typeof getMaxMessageWidthPerActor>
actorToMessageWidth: ReturnType<typeof getMaxMessageWidthPerActor>,
boxes
) {
let maxHeight = 0;
Object.keys(actors).forEach((prop) => {
@@ -1074,6 +1136,9 @@ function calculateActorMargins(
// No need to space out an actor that doesn't have a next link
if (!nextActor) {
const messageWidth = actorToMessageWidth[actorKey];
const actorWidth = messageWidth + conf.actorMargin - actor.width / 2;
actor.margin = Math.max(actorWidth, conf.actorMargin);
continue;
}
@@ -1083,6 +1148,29 @@ function calculateActorMargins(
actor.margin = Math.max(actorWidth, conf.actorMargin);
}
let maxBoxHeight = 0;
boxes.forEach((box) => {
const textFont = messageFont(conf);
let totalWidth = box.actorKeys.reduce((total, aKey) => {
return (total += actors[aKey].width + (actors[aKey].margin || 0));
}, 0);
totalWidth -= 2 * conf.boxTextMargin;
if (box.wrap) {
box.name = utils.wrapLabel(box.name, totalWidth - 2 * conf.wrapPadding, textFont);
}
const boxMsgDimensions = utils.calculateTextDimensions(box.name, textFont);
maxBoxHeight = Math.max(boxMsgDimensions.height, maxBoxHeight);
const minWidth = Math.max(totalWidth, boxMsgDimensions.width + 2 * conf.wrapPadding);
box.margin = conf.boxTextMargin;
if (totalWidth < minWidth) {
const missing = (minWidth - totalWidth) / 2;
box.margin += missing;
}
});
boxes.forEach((box) => (box.textMaxHeight = maxBoxHeight));
return Math.max(maxHeight, conf.height);
}

42
packages/mermaid/src/diagrams/sequence/svgDraw.js
View File

@@ -341,19 +341,21 @@ export const fixLifeLineHeights = (diagram, bounds) => {
* @param {any} elem - The diagram we'll draw to.
* @param {any} actor - The actor to draw.
* @param {any} conf - DrawText implementation discriminator object
* @param {boolean} isFooter - If the actor is the footer one
*/
const drawActorTypeParticipant = function (elem, actor, conf) {
const drawActorTypeParticipant = function (elem, actor, conf, isFooter) {
const center = actor.x + actor.width / 2;
const centerY = actor.y + 5;
const boxpluslineGroup = elem.append('g');
var g = boxpluslineGroup;
if (actor.y === 0) {
if (!isFooter) {
actorCnt++;
g.append('line')
.attr('id', 'actor' + actorCnt)
.attr('x1', center)
.attr('y1', 5)
.attr('y1', centerY)
.attr('x2', center)
.attr('y2', 2000)
.attr('class', 'actor-line')
@@ -416,16 +418,17 @@ const drawActorTypeParticipant = function (elem, actor, conf) {
return height;
};
const drawActorTypeActor = function (elem, actor, conf) {
const drawActorTypeActor = function (elem, actor, conf, isFooter) {
const center = actor.x + actor.width / 2;
const centerY = actor.y + 80;
if (actor.y === 0) {
if (!isFooter) {
actorCnt++;
elem
.append('line')
.attr('id', 'actor' + actorCnt)
.attr('x1', center)
.attr('y1', 80)
.attr('y1', centerY)
.attr('x2', center)
.attr('y2', 2000)
.attr('class', 'actor-line')
@@ -498,15 +501,34 @@ const drawActorTypeActor = function (elem, actor, conf) {
return actor.height;
};
export const drawActor = function (elem, actor, conf) {
export const drawActor = function (elem, actor, conf, isFooter) {
switch (actor.type) {
case 'actor':
return drawActorTypeActor(elem, actor, conf);
return drawActorTypeActor(elem, actor, conf, isFooter);
case 'participant':
return drawActorTypeParticipant(elem, actor, conf);
return drawActorTypeParticipant(elem, actor, conf, isFooter);
}
};
export const drawBox = function (elem, box, conf) {
const boxplustextGroup = elem.append('g');
const g = boxplustextGroup;
drawBackgroundRect(g, box);
if (box.name) {
_drawTextCandidateFunc(conf)(
box.name,
g,
box.x,
box.y + (box.textMaxHeight || 0) / 2,
box.width,
0,
{ class: 'text' },
conf
);
}
g.lower();
};
export const anchorElement = function (elem) {
return elem.append('g');
};
@@ -645,6 +667,7 @@ export const drawBackgroundRect = function (elem, bounds) {
width: bounds.stopx - bounds.startx,
height: bounds.stopy - bounds.starty,
fill: bounds.fill,
stroke: bounds.stroke,
class: 'rect',
});
rectElem.lower();
@@ -1037,6 +1060,7 @@ export default {
drawText,
drawLabel,
drawActor,
drawBox,
drawPopup,
drawImage,
drawEmbeddedImage,

133
packages/mermaid/src/diagrams/state/parser/state-parser.spec.js Normal file
View File

@@ -0,0 +1,133 @@
import stateDb from '../stateDb';
import stateDiagram from './stateDiagram';
import { setConfig } from '../../../config';
setConfig({
securityLevel: 'strict',
});
describe('state parser can parse...', () => {
beforeEach(function () {
stateDiagram.parser.yy = stateDb;
stateDiagram.parser.yy.clear();
});
describe('states with id displayed as a (name)', () => {
describe('syntax 1: stateID as "name in quotes"', () => {
it('stateID as "some name"', () => {
const diagramText = `stateDiagram-v2
state "Small State 1" as namedState1`;
stateDiagram.parser.parse(diagramText);
stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
const states = stateDiagram.parser.yy.getStates();
expect(states['namedState1']).not.toBeUndefined();
expect(states['namedState1'].descriptions.join(' ')).toEqual('Small State 1');
});
});
describe('syntax 2: stateID: "name in quotes" [colon after the id]', () => {
it('space before and after the colon', () => {
const diagramText = `stateDiagram-v2
namedState1 : Small State 1`;
stateDiagram.parser.parse(diagramText);
stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
const states = stateDiagram.parser.yy.getStates();
expect(states['namedState1']).not.toBeUndefined();
expect(states['namedState1'].descriptions.join(' ')).toEqual('Small State 1');
});
it('no spaces before and after the colon', () => {
const diagramText = `stateDiagram-v2
namedState1:Small State 1`;
stateDiagram.parser.parse(diagramText);
stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
const states = stateDiagram.parser.yy.getStates();
expect(states['namedState1']).not.toBeUndefined();
expect(states['namedState1'].descriptions.join(' ')).toEqual('Small State 1');
});
});
});
describe('can handle "as" in a state name', () => {
it('assemble, assemblies, state assemble, state assemblies', function () {
const diagramText = `stateDiagram-v2
assemble
assemblies
state assemble
state assemblies
`;
stateDiagram.parser.parse(diagramText);
stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
const states = stateDiagram.parser.yy.getStates();
expect(states['assemble']).not.toBeUndefined();
expect(states['assemblies']).not.toBeUndefined();
});
it('state "as" as as', function () {
const diagramText = `stateDiagram-v2
state "as" as as
`;
stateDiagram.parser.parse(diagramText);
stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
const states = stateDiagram.parser.yy.getStates();
expect(states['as']).not.toBeUndefined();
expect(states['as'].descriptions.join(' ')).toEqual('as');
});
});
describe('groups (clusters/containers)', () => {
it('state "Group Name" as stateIdentifier', () => {
const diagramText = `stateDiagram-v2
state "Small State 1" as namedState1
%% Notice that this is named "Big State 1" with an "as"
state "Big State 1" as bigState1 {
bigState1InternalState
}
namedState1 --> bigState1: should point to \\nBig State 1 container
state "Small State 2" as namedState2
%% Notice that bigState2 does not have a name; no "as"
state bigState2 {
bigState2InternalState
}
namedState2 --> bigState2: should point to \\nbigState2 container`;
stateDiagram.parser.parse(diagramText);
stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
const states = stateDiagram.parser.yy.getStates();
expect(states['namedState1']).not.toBeUndefined();
expect(states['bigState1']).not.toBeUndefined();
expect(states['bigState1'].doc[0].id).toEqual('bigState1InternalState');
expect(states['namedState2']).not.toBeUndefined();
expect(states['bigState2']).not.toBeUndefined();
expect(states['bigState2'].doc[0].id).toEqual('bigState2InternalState');
const relationships = stateDiagram.parser.yy.getRelations();
expect(relationships[0].id1).toEqual('namedState1');
expect(relationships[0].id2).toEqual('bigState1');
expect(relationships[1].id1).toEqual('namedState2');
expect(relationships[1].id2).toEqual('bigState2');
});
it('group has a state with stateID AS "state name" and state2ID: "another state name"', () => {
const diagramText = `stateDiagram-v2
state "Big State 1" as bigState1 {
state "inner state 1" as inner1
inner2: inner state 2
inner1 --> inner2
}`;
stateDiagram.parser.parse(diagramText);
stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
const states = stateDiagram.parser.yy.getStates();
expect(states['bigState1']).not.toBeUndefined();
expect(states['bigState1'].doc[0].id).toEqual('inner1');
expect(states['bigState1'].doc[0].description).toEqual('inner state 1');
expect(states['bigState1'].doc[1].id).toEqual('inner2');
expect(states['bigState1'].doc[1].description).toEqual('inner state 2');
});
});
});

77
packages/mermaid/src/diagrams/state/parser/stateDiagram.jison
View File

@@ -65,14 +65,14 @@
\%%[^\n]* /* skip comments */
"scale"\s+ { this.pushState('SCALE'); /* console.log('Got scale', yytext);*/ return 'scale'; }
<SCALE>\d+ return 'WIDTH';
<SCALE>\s+"width" {this.popState();}
<SCALE>\s+"width" { this.popState(); }
accTitle\s*":"\s* { this.begin("acc_title");return 'acc_title'; }
<acc_title>(?!\n|;|#)*[^\n]* { this.popState(); return "acc_title_value"; }
accDescr\s*":"\s* { this.begin("acc_descr");return 'acc_descr'; }
<acc_descr>(?!\n|;|#)*[^\n]* { this.popState(); return "acc_descr_value"; }
accDescr\s*"{"\s* { this.begin("acc_descr_multiline");}
<acc_descr_multiline>[\}] { this.popState(); }
accDescr\s*"{"\s* { this.begin("acc_descr_multiline"); }
<acc_descr_multiline>[\}] { this.popState(); }
<acc_descr_multiline>[^\}]* return "acc_descr_multiline_value";
<INITIAL,struct>"classDef"\s+ { this.pushState('CLASSDEF'); return 'classDef'; }
@@ -81,57 +81,60 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili
<CLASSDEFID>[^\n]* { this.popState(); return 'CLASSDEF_STYLEOPTS' }
<INITIAL,struct>"class"\s+ { this.pushState('CLASS'); return 'class'; }
<CLASS>(\w+)+((","\s*\w+)*) { this.popState(); this.pushState('CLASS_STYLE'); return 'CLASSENTITY_IDS' }
<CLASS>(\w+)+((","\s*\w+)*) { this.popState(); this.pushState('CLASS_STYLE'); return 'CLASSENTITY_IDS' }
<CLASS_STYLE>[^\n]* { this.popState(); return 'STYLECLASS' }
"scale"\s+ { this.pushState('SCALE'); /* console.log('Got scale', yytext);*/ return 'scale'; }
<SCALE>\d+ return 'WIDTH';
<SCALE>\s+"width" {this.popState();}
<INITIAL,struct>"state"\s+ { /* console.log('Starting STATE '); */ this.pushState('STATE'); }
<INITIAL,struct>"state"\s+ { /*console.log('Starting STATE zxzx'+yy.getDirection());*/this.pushState('STATE'); }
<STATE>.*"<<fork>>" {this.popState();yytext=yytext.slice(0,-8).trim(); /*console.warn('Fork Fork: ',yytext);*/return 'FORK';}
<STATE>.*"<<join>>" {this.popState();yytext=yytext.slice(0,-8).trim();/*console.warn('Fork Join: ',yytext);*/return 'JOIN';}
<STATE>.*"<<choice>>" {this.popState();yytext=yytext.slice(0,-10).trim();/*console.warn('Fork Join: ',yytext);*/return 'CHOICE';}
<STATE>.*"<<choice>>" {this.popState();yytext=yytext.slice(0,-10).trim();/*console.warn('Fork Join: ',yytext);*/return 'CHOICE';}
<STATE>.*"[[fork]]" {this.popState();yytext=yytext.slice(0,-8).trim();/*console.warn('Fork Fork: ',yytext);*/return 'FORK';}
<STATE>.*"[[join]]" {this.popState();yytext=yytext.slice(0,-8).trim();/*console.warn('Fork Join: ',yytext);*/return 'JOIN';}
<STATE>.*"[[choice]]" {this.popState();yytext=yytext.slice(0,-10).trim();/*console.warn('Fork Join: ',yytext);*/return 'CHOICE';}
<STATE>.*"[[choice]]" {this.popState();yytext=yytext.slice(0,-10).trim();/*console.warn('Fork Join: ',yytext);*/return 'CHOICE';}
<struct>.*direction\s+TB[^\n]* { return 'direction_tb';}
<struct>.*direction\s+BT[^\n]* { return 'direction_bt';}
<struct>.*direction\s+RL[^\n]* { return 'direction_rl';}
<struct>.*direction\s+LR[^\n]* { return 'direction_lr';}
<STATE>["] { /*console.log('Starting STATE_STRING zxzx');*/this.begin("STATE_STRING");}
<STATE>\s*"as"\s+ {this.popState();this.pushState('STATE_ID');return "AS";}
<STATE_ID>[^\n\{]* {this.popState();/* console.log('STATE_ID', yytext);*/return "ID";}
<STATE_STRING>["] this.popState();
<STATE_STRING>[^"]* { /*console.log('Long description:', yytext);*/return "STATE_DESCR";}
<STATE>[^\n\s\{]+ {/*console.log('COMPOSIT_STATE', yytext);*/return 'COMPOSIT_STATE';}
<STATE>\n {this.popState();}
<INITIAL,STATE>\{ {this.popState();this.pushState('struct'); /*console.log('begin struct', yytext);*/return 'STRUCT_START';}
<struct>\%\%(?!\{)[^\n]* /* skip comments inside state*/
<struct>\} { /*console.log('Ending struct');*/ this.popState(); return 'STRUCT_STOP';}}
<struct>[\n] /* nothing */
<STATE>["] { /* console.log('Starting STATE_STRING'); */ this.pushState("STATE_STRING"); }
<STATE>\s*"as"\s+ { this.pushState('STATE_ID'); /* console.log('pushState(STATE_ID)'); */ return "AS"; }
<STATE_ID>[^\n\{]* { this.popState(); /* console.log('STATE_ID', yytext); */ return "ID"; }
<STATE_STRING>["] { this.popState(); }
<STATE_STRING>[^"]* { /* console.log('Long description:', yytext); */ return "STATE_DESCR"; }
<STATE>[^\n\s\{]+ { /* console.log('COMPOSIT_STATE', yytext); */ return 'COMPOSIT_STATE'; }
<STATE>\n { this.popState(); }
<INITIAL,STATE>\{ { this.popState(); this.pushState('struct'); /* console.log('begin struct', yytext); */ return 'STRUCT_START'; }
<struct>\%\%(?!\{)[^\n]* /* skip comments inside state*/
<struct>\} { /*console.log('Ending struct');*/ this.popState(); return 'STRUCT_STOP';} }
<struct>[\n] /* nothing */
<INITIAL,struct>"note"\s+ { this.begin('NOTE'); return 'note'; }
<NOTE>"left of" { this.popState();this.pushState('NOTE_ID');return 'left_of';}
<NOTE>"right of" { this.popState();this.pushState('NOTE_ID');return 'right_of';}
<NOTE>\" { this.popState();this.pushState('FLOATING_NOTE');}
<FLOATING_NOTE>\s*"as"\s* {this.popState();this.pushState('FLOATING_NOTE_ID');return "AS";}
<FLOATING_NOTE>["] /**/
<FLOATING_NOTE>[^"]* { /*console.log('Floating note text: ', yytext);*/return "NOTE_TEXT";}
<FLOATING_NOTE_ID>[^\n]* {this.popState();/*console.log('Floating note ID', yytext);*/return "ID";}
<NOTE_ID>\s*[^:\n\s\-]+ { this.popState();this.pushState('NOTE_TEXT');/*console.log('Got ID for note', yytext);*/return 'ID';}
<NOTE_TEXT>\s*":"[^:\n;]+ { this.popState();/*console.log('Got NOTE_TEXT for note',yytext);*/yytext = yytext.substr(2).trim();return 'NOTE_TEXT';}
<NOTE_TEXT>[\s\S]*?"end note" { this.popState();/*console.log('Got NOTE_TEXT for note',yytext);*/yytext = yytext.slice(0,-8).trim();return 'NOTE_TEXT';}
<NOTE>"left of" { this.popState(); this.pushState('NOTE_ID'); return 'left_of'; }
<NOTE>"right of" { this.popState(); this.pushState('NOTE_ID'); return 'right_of'; }
<NOTE>\" { this.popState(); this.pushState('FLOATING_NOTE'); }
<FLOATING_NOTE>\s*"as"\s* { this.popState(); this.pushState('FLOATING_NOTE_ID'); return "AS"; }
<FLOATING_NOTE>["] /**/
<FLOATING_NOTE>[^"]* { /* console.log('Floating note text: ', yytext); */ return "NOTE_TEXT"; }
<FLOATING_NOTE_ID>[^\n]* { this.popState(); /* console.log('Floating note ID', yytext);*/ return "ID"; }
<NOTE_ID>\s*[^:\n\s\-]+ { this.popState(); this.pushState('NOTE_TEXT'); /*console.log('Got ID for note', yytext);*/ return 'ID'; }
<NOTE_TEXT>\s*":"[^:\n;]+ { this.popState(); /* console.log('Got NOTE_TEXT for note',yytext);*/yytext = yytext.substr(2).trim(); return 'NOTE_TEXT'; }
<NOTE_TEXT>[\s\S]*?"end note" { this.popState(); /* console.log('Got NOTE_TEXT for note',yytext);*/yytext = yytext.slice(0,-8).trim(); return 'NOTE_TEXT'; }
"stateDiagram"\s+ { /*console.log('Got state diagram', yytext,'#');*/return 'SD'; }
"stateDiagram-v2"\s+ { /*console.log('Got state diagram', yytext,'#');*/return 'SD'; }
"hide empty description" { /*console.log('HIDE_EMPTY', yytext,'#');*/return 'HIDE_EMPTY'; }
<INITIAL,struct>"[*]" { /*console.log('EDGE_STATE=',yytext);*/ return 'EDGE_STATE';}
<INITIAL,struct>[^:\n\s\-\{]+ { /*console.log('=>ID=',yytext);*/ return 'ID';}
// <INITIAL,struct>\s*":"[^\+\->:\n;]+ { yytext = yytext.trim(); /*console.log('Descr = ', yytext);*/ return 'DESCR'; }
<INITIAL,struct>\s*":"[^:\n;]+ { yytext = yytext.trim(); /*console.log('Descr = ', yytext);*/ return 'DESCR'; }
"stateDiagram"\s+ { /* console.log('Got state diagram', yytext,'#'); */ return 'SD'; }
"stateDiagram-v2"\s+ { /* console.log('Got state diagram', yytext,'#'); */ return 'SD'; }
"hide empty description" { /* console.log('HIDE_EMPTY', yytext,'#'); */ return 'HIDE_EMPTY'; }
<INITIAL,struct>"[*]" { /* console.log('EDGE_STATE=',yytext); */ return 'EDGE_STATE'; }
<INITIAL,struct>[^:\n\s\-\{]+ { /* console.log('=>ID=',yytext); */ return 'ID'; }
// <INITIAL,struct>\s*":"[^\+\->:\n;]+ { yytext = yytext.trim(); /* console.log('Descr = ', yytext); */ return 'DESCR'; }
<INITIAL,struct>\s*":"[^:\n;]+ { yytext = yytext.trim(); /* console.log('Descr = ', yytext); */ return 'DESCR'; }
<INITIAL,struct>"-->" return '-->';
<struct>"--" return 'CONCURRENT';
@@ -201,7 +204,7 @@ statement
| COMPOSIT_STATE
| COMPOSIT_STATE STRUCT_START document STRUCT_STOP
{
/* console.log('Adding document for state without id ', $1); */
// console.log('Adding document for state without id ', $1);
$$={ stmt: 'state', id: $1, type: 'default', description: '', doc: $3 }
}
| STATE_DESCR AS ID {
@@ -217,7 +220,7 @@ statement
}
| STATE_DESCR AS ID STRUCT_START document STRUCT_STOP
{
/* console.log('Adding document for state with id zxzx', $3, $4, yy.getDirection()); yy.addDocument($3);*/
// console.log('state with id ', $3,' document = ', $5, );
$$={ stmt: 'state', id: $3, type: 'default', description: $1, doc: $5 }
}
| FORK {

70
packages/mermaid/src/diagrams/state/stateDb.js
View File

@@ -94,9 +94,14 @@ const docTranslator = (parent, node, first) => {
docTranslator(parent, node.state1, true);
docTranslator(parent, node.state2, false);
} else {
if (node.stmt === STMT_STATE && node.id === '[*]') {
node.id = first ? parent.id + '_start' : parent.id + '_end';
node.start = first;
if (node.stmt === STMT_STATE) {
if (node.id === '[*]') {
node.id = first ? parent.id + '_start' : parent.id + '_end';
node.start = first;
} else {
// This is just a plain state, not a start or end
node.id = node.id.trim();
}
}
if (node.doc) {
@@ -170,7 +175,7 @@ const extract = (_doc) => {
switch (item.stmt) {
case STMT_STATE:
addState(
item.id,
item.id.trim(),
item.type,
item.doc,
item.description,
@@ -184,10 +189,10 @@ const extract = (_doc) => {
addRelation(item.state1, item.state2, item.description);
break;
case STMT_CLASSDEF:
addStyleClass(item.id, item.classes);
addStyleClass(item.id.trim(), item.classes);
break;
case STMT_APPLYCLASS:
setCssClass(item.id, item.styleClass);
setCssClass(item.id.trim(), item.styleClass);
break;
}
});
@@ -215,11 +220,12 @@ export const addState = function (
styles = null,
textStyles = null
) {
const trimmedId = id?.trim();
// add the state if needed
if (currentDocument.states[id] === undefined) {
log.info('Adding state ', id, descr);
currentDocument.states[id] = {
id: id,
if (currentDocument.states[trimmedId] === undefined) {
log.info('Adding state ', trimmedId, descr);
currentDocument.states[trimmedId] = {
id: trimmedId,
descriptions: [],
type,
doc,
@@ -229,49 +235,49 @@ export const addState = function (
textStyles: [],
};
} else {
if (!currentDocument.states[id].doc) {
currentDocument.states[id].doc = doc;
if (!currentDocument.states[trimmedId].doc) {
currentDocument.states[trimmedId].doc = doc;
}
if (!currentDocument.states[id].type) {
currentDocument.states[id].type = type;
if (!currentDocument.states[trimmedId].type) {
currentDocument.states[trimmedId].type = type;
}
}
if (descr) {
log.info('Setting state description', id, descr);
log.info('Setting state description', trimmedId, descr);
if (typeof descr === 'string') {
addDescription(id, descr.trim());
addDescription(trimmedId, descr.trim());
}
if (typeof descr === 'object') {
descr.forEach((des) => addDescription(id, des.trim()));
descr.forEach((des) => addDescription(trimmedId, des.trim()));
}
}
if (note) {
currentDocument.states[id].note = note;
currentDocument.states[id].note.text = common.sanitizeText(
currentDocument.states[id].note.text,
currentDocument.states[trimmedId].note = note;
currentDocument.states[trimmedId].note.text = common.sanitizeText(
currentDocument.states[trimmedId].note.text,
configApi.getConfig()
);
}
if (classes) {
log.info('Setting state classes', id, classes);
log.info('Setting state classes', trimmedId, classes);
const classesList = typeof classes === 'string' ? [classes] : classes;
classesList.forEach((klass) => setCssClass(id, klass.trim()));
classesList.forEach((klass) => setCssClass(trimmedId, klass.trim()));
}
if (styles) {
log.info('Setting state styles', id, styles);
log.info('Setting state styles', trimmedId, styles);
const stylesList = typeof styles === 'string' ? [styles] : styles;
stylesList.forEach((style) => setStyle(id, style.trim()));
stylesList.forEach((style) => setStyle(trimmedId, style.trim()));
}
if (textStyles) {
log.info('Setting state styles', id, styles);
log.info('Setting state styles', trimmedId, styles);
const textStylesList = typeof textStyles === 'string' ? [textStyles] : textStyles;
textStylesList.forEach((textStyle) => setTextStyle(id, textStyle.trim()));
textStylesList.forEach((textStyle) => setTextStyle(trimmedId, textStyle.trim()));
}
};
@@ -368,10 +374,10 @@ function endTypeIfNeeded(id = '', type = DEFAULT_STATE_TYPE) {
* @param relationTitle
*/
export function addRelationObjs(item1, item2, relationTitle) {
let id1 = startIdIfNeeded(item1.id);
let type1 = startTypeIfNeeded(item1.id, item1.type);
let id2 = startIdIfNeeded(item2.id);
let type2 = startTypeIfNeeded(item2.id, item2.type);
let id1 = startIdIfNeeded(item1.id.trim());
let type1 = startTypeIfNeeded(item1.id.trim(), item1.type);
let id2 = startIdIfNeeded(item2.id.trim());
let type2 = startTypeIfNeeded(item2.id.trim(), item2.type);
addState(
id1,
@@ -412,9 +418,9 @@ export const addRelation = function (item1, item2, title) {
if (typeof item1 === 'object') {
addRelationObjs(item1, item2, title);
} else {
const id1 = startIdIfNeeded(item1);
const id1 = startIdIfNeeded(item1.trim());
const type1 = startTypeIfNeeded(item1);
const id2 = endIdIfNeeded(item2);
const id2 = endIdIfNeeded(item2.trim());
const type2 = endTypeIfNeeded(item2);
addState(id1, type1);

4
packages/mermaid/src/diagrams/state/stateRenderer-v2.js
View File

@@ -307,8 +307,8 @@ const setupNode = (g, parent, parsedItem, diagramStates, diagramDb, altFlag) =>
*
* @param g
* @param parentParsedItem - parsed Item that is the parent of this document (doc)
* @param doc - the document to set up
* @param {object} diagramStates - the list of all known states for the diagram
* @param doc - the document to set up; it is a list of parsed statements
* @param {object[]} diagramStates - the list of all known states for the diagram
* @param diagramDb
* @param {boolean} altFlag
* @todo This duplicates some of what is done in stateDb.js extract method

131
packages/mermaid/src/docs.mts
View File

@@ -37,16 +37,14 @@ import { JSDOM } from 'jsdom';
import type { Code, Root } from 'mdast';
import { posix, dirname, relative, join } from 'path';
import prettier from 'prettier';
import { remark as remarkBuilder } from 'remark';
import { remark } from 'remark';
import remarkFrontmatter from 'remark-frontmatter';
import remarkGfm from 'remark-gfm';
import chokidar from 'chokidar';
import mm from 'micromatch';
// @ts-ignore No typescript declaration file
import flatmap from 'unist-util-flatmap';
// support tables and other GitHub Flavored Markdown syntax in markdown
const remark = remarkBuilder().use(remarkGfm);
const MERMAID_MAJOR_VERSION = (
JSON.parse(readFileSync('../mermaid/package.json', 'utf8')).version as string
).split('.')[0];
@@ -90,7 +88,7 @@ const filesTransformed: Set<string> = new Set();
const generateHeader = (file: string): string => {
// path from file in docs/* to repo root, e.g ../ or ../../ */
const relativePath = relative(file, SOURCE_DOCS_DIR);
const relativePath = relative(file, SOURCE_DOCS_DIR).replaceAll('\\', '/');
const filePathFromRoot = posix.join('/packages/mermaid', file);
const sourcePathRelativeToGenerated = posix.join(relativePath, filePathFromRoot);
return `
@@ -191,7 +189,7 @@ const transformIncludeStatements = (file: string, text: string): string => {
// resolve includes - src https://github.com/vuejs/vitepress/blob/428eec3750d6b5648a77ac52d88128df0554d4d1/src/node/markdownToVue.ts#L65-L76
return text.replace(includesRE, (m, m1) => {
try {
const includePath = join(dirname(file), m1);
const includePath = join(dirname(file), m1).replaceAll('\\', '/');
const content = readSyncedUTF8file(includePath);
includedFiles.add(changeToFinalDocDir(includePath));
return content;
@@ -201,48 +199,86 @@ const transformIncludeStatements = (file: string, text: string): string => {
});
};
/** Options for {@link transformMarkdownAst} */
interface TransformMarkdownAstOptions {
/**
* Used to indicate the original/source file.
*/
originalFilename: string;
/** If `true`, add a warning that the file is autogenerated */
addAutogeneratedWarning?: boolean;
/**
* If `true`, remove the YAML metadata from the Markdown input.
* Generally, YAML metadata is only used for Vitepress.
*/
removeYAML?: boolean;
}
/**
* Transform code blocks in a Markdown file.
* Use remark.parse() to turn the given content (a String) into an AST.
* Remark plugin that transforms mermaid repo markdown to Vitepress/GFM markdown.
*
* For any AST node that is a code block: transform it as needed:
* - blocks marked as MERMAID_DIAGRAM_ONLY will be set to a 'mermaid' code block so it will be rendered as (only) a diagram
* - blocks marked as MERMAID_EXAMPLE_KEYWORDS will be copied and the original node will be a code only block and the copy with be rendered as the diagram
* - blocks marked as BLOCK_QUOTE_KEYWORDS will be transformed into block quotes
*
* Convert the AST back to a string and return it.
* If `addAutogeneratedWarning` is `true`, generates a header stating that this file is autogenerated.
*
* @param content - the contents of a Markdown file
* @returns the contents with transformed code blocks
* @returns plugin function for Remark
*/
export const transformBlocks = (content: string): string => {
const ast: Root = remark.parse(content);
const astWithTransformedBlocks = flatmap(ast, (node: Code) => {
if (node.type !== 'code' || !node.lang) {
return [node]; // no transformation if this is not a code block
export function transformMarkdownAst({
originalFilename,
addAutogeneratedWarning,
removeYAML,
}: TransformMarkdownAstOptions) {
return (tree: Root, _file?: any): Root => {
const astWithTransformedBlocks = flatmap(tree, (node: Code) => {
if (node.type !== 'code' || !node.lang) {
return [node]; // no transformation if this is not a code block
}
if (node.lang === MERMAID_DIAGRAM_ONLY) {
// Set the lang to 'mermaid' so it will be rendered as a diagram.
node.lang = MERMAID_KEYWORD;
return [node];
} else if (MERMAID_EXAMPLE_KEYWORDS.includes(node.lang)) {
// Return 2 nodes:
// 1. the original node with the language now set to 'mermaid-example' (will be rendered as code), and
// 2. a copy of the original node with the language set to 'mermaid' (will be rendered as a diagram)
node.lang = MERMAID_CODE_ONLY_KEYWORD;
return [node, Object.assign({}, node, { lang: MERMAID_KEYWORD })];
}
// Transform these blocks into block quotes.
if (BLOCK_QUOTE_KEYWORDS.includes(node.lang)) {
return [remark.parse(transformToBlockQuote(node.value, node.lang, node.meta))];
}
return [node]; // default is to do nothing to the node
}) as Root;
if (addAutogeneratedWarning) {
// Add the header to the start of the file
const headerNode = remark.parse(generateHeader(originalFilename)).children[0];
if (astWithTransformedBlocks.children[0].type === 'yaml') {
// insert header after the YAML frontmatter if it exists
astWithTransformedBlocks.children.splice(1, 0, headerNode);
} else {
astWithTransformedBlocks.children.unshift(headerNode);
}
}
if (node.lang === MERMAID_DIAGRAM_ONLY) {
// Set the lang to 'mermaid' so it will be rendered as a diagram.
node.lang = MERMAID_KEYWORD;
return [node];
} else if (MERMAID_EXAMPLE_KEYWORDS.includes(node.lang)) {
// Return 2 nodes:
// 1. the original node with the language now set to 'mermaid-example' (will be rendered as code), and
// 2. a copy of the original node with the language set to 'mermaid' (will be rendered as a diagram)
node.lang = MERMAID_CODE_ONLY_KEYWORD;
return [node, Object.assign({}, node, { lang: MERMAID_KEYWORD })];
if (removeYAML) {
const firstNode = astWithTransformedBlocks.children[0];
if (firstNode.type == 'yaml') {
// YAML is currently only used for Vitepress metadata, so we should remove it for GFM output
astWithTransformedBlocks.children.shift();
}
}
// Transform these blocks into block quotes.
if (BLOCK_QUOTE_KEYWORDS.includes(node.lang)) {
return [remark.parse(transformToBlockQuote(node.value, node.lang, node.meta))];
}
return [node]; // default is to do nothing to the node
});
return remark.stringify(astWithTransformedBlocks);
};
return astWithTransformedBlocks;
};
}
/**
* Transform a markdown file and write the transformed file to the directory for published
@@ -260,11 +296,18 @@ export const transformBlocks = (content: string): string => {
*/
const transformMarkdown = (file: string) => {
const doc = injectPlaceholders(transformIncludeStatements(file, readSyncedUTF8file(file)));
let transformed = transformBlocks(doc);
if (!noHeader) {
// Add the header to the start of the file
transformed = `${generateHeader(file)}\n${transformed}`;
}
let transformed = remark()
.use(remarkGfm)
.use(remarkFrontmatter, ['yaml']) // support YAML front-matter in Markdown
.use(transformMarkdownAst, {
// mermaid project specific plugin
originalFilename: file,
addAutogeneratedWarning: !noHeader,
removeYAML: !noHeader,
})
.processSync(doc)
.toString();
if (vitepress && file === 'src/docs/index.md') {
// Skip transforming index if vitepress is enabled
@@ -331,7 +374,7 @@ const getFilesFromGlobs = async (globs: string[]): Promise<string[]> => {
};
/** Main method (entry point) */
(async () => {
const main = async () => {
if (verifyOnly) {
console.log('Verifying that all files are in sync with the source files');
}
@@ -400,4 +443,6 @@ const getFilesFromGlobs = async (globs: string[]): Promise<string[]> => {
}
});
}
})();
};
void main();

82
packages/mermaid/src/docs.spec.ts
View File

@@ -1,40 +1,24 @@
import { transformBlocks, transformToBlockQuote } from './docs.mjs';
import { remark as remarkBuilder } from 'remark'; // import it this way so we can mock it
import { transformMarkdownAst, transformToBlockQuote } from './docs.mjs';
import { remark } from 'remark'; // import it this way so we can mock it
import remarkFrontmatter from 'remark-frontmatter';
import { vi, afterEach, describe, it, expect } from 'vitest';
const remark = remarkBuilder();
vi.mock('remark', async (importOriginal) => {
const { remark: originalRemarkBuilder } = (await importOriginal()) as {
remark: typeof remarkBuilder;
};
// make sure that both `docs.mts` and this test file are using the same remark
// object so that we can mock it
const sharedRemark = originalRemarkBuilder();
return {
remark: () => sharedRemark,
};
});
afterEach(() => {
vi.restoreAllMocks();
});
const originalFilename = 'example-input-filename.md';
const remarkBuilder = remark().use(remarkFrontmatter, ['yaml']); // support YAML front-matter in Markdown
describe('docs.mts', () => {
describe('transformBlocks', () => {
it('uses remark.parse to create the AST for the file ', () => {
const remarkParseSpy = vi
.spyOn(remark, 'parse')
.mockReturnValue({ type: 'root', children: [] });
const contents = 'Markdown file contents';
transformBlocks(contents);
expect(remarkParseSpy).toHaveBeenCalledWith(contents);
});
describe('transformMarkdownAst', () => {
describe('checks each AST node', () => {
it('does no transformation if there are no code blocks', async () => {
const contents = 'Markdown file contents\n';
const result = transformBlocks(contents);
const result = (
await remarkBuilder().use(transformMarkdownAst, { originalFilename }).process(contents)
).toString();
expect(result).toEqual(contents);
});
@@ -46,8 +30,12 @@ describe('docs.mts', () => {
const lang_keyword = 'mermaid-nocode';
const contents = beforeCodeLine + '```' + lang_keyword + '\n' + diagram_text + '\n```\n';
it('changes the language to "mermaid"', () => {
const result = transformBlocks(contents);
it('changes the language to "mermaid"', async () => {
const result = (
await remarkBuilder()
.use(transformMarkdownAst, { originalFilename })
.process(contents)
).toString();
expect(result).toEqual(
beforeCodeLine + '\n' + '```' + 'mermaid' + '\n' + diagram_text + '\n```\n'
);
@@ -61,8 +49,12 @@ describe('docs.mts', () => {
const contents =
beforeCodeLine + '```' + lang_keyword + '\n' + diagram_text + '\n```\n';
it('changes the language to "mermaid-example" and adds a copy of the code block with language = "mermaid"', () => {
const result = transformBlocks(contents);
it('changes the language to "mermaid-example" and adds a copy of the code block with language = "mermaid"', async () => {
const result = (
await remarkBuilder()
.use(transformMarkdownAst, { originalFilename })
.process(contents)
).toString();
expect(result).toEqual(
beforeCodeLine +
'\n' +
@@ -77,16 +69,40 @@ describe('docs.mts', () => {
});
});
it('calls transformToBlockQuote with the node information', () => {
it('calls transformToBlockQuote with the node information', async () => {
const lang_keyword = 'note';
const contents =
beforeCodeLine + '```' + lang_keyword + '\n' + 'This is the text\n' + '```\n';
const result = transformBlocks(contents);
const result = (
await remarkBuilder().use(transformMarkdownAst, { originalFilename }).process(contents)
).toString();
expect(result).toEqual(beforeCodeLine + '\n> **Note**\n' + '> This is the text\n');
});
});
});
it('should remove YAML if `removeYAML` is true', async () => {
const contents = `---
title: Flowcharts Syntax
---
This Markdown should be kept.
`;
const withYaml = (
await remarkBuilder().use(transformMarkdownAst, { originalFilename }).process(contents)
).toString();
// no change
expect(withYaml).toEqual(contents);
const withoutYaml = (
await remarkBuilder()
.use(transformMarkdownAst, { originalFilename, removeYAML: true })
.process(contents)
).toString();
// no change
expect(withoutYaml).toEqual('This Markdown should be kept.\n');
});
});
describe('transformToBlockQuote', () => {

11
packages/mermaid/src/docs/.vitepress/config.ts
View File

@@ -77,8 +77,8 @@ function sidebarAll() {
],
},
...sidebarSyntax(),
...sidebarEcosystem(),
...sidebarConfig(),
...sidebarMisc(),
...sidebarCommunity(),
];
}
@@ -126,19 +126,20 @@ function sidebarConfig() {
{ text: 'Accessibility', link: '/config/accessibility' },
{ text: 'Mermaid CLI', link: '/config/mermaidCLI' },
{ text: 'Advanced usage', link: '/config/n00b-advanced' },
{ text: 'FAQ', link: '/config/faq' },
],
},
];
}
function sidebarMisc() {
function sidebarEcosystem() {
return [
{
text: '📚 Misc',
text: '📚 Ecosystem',
collapsible: true,
items: [
{ text: 'Use-Cases and Integrations', link: '/misc/integrations' },
{ text: 'FAQ', link: '/misc/faq' },
{ text: 'Showcases', link: '/ecosystem/showcases' },
{ text: 'Use-Cases and Integrations', link: '/ecosystem/integrations' },
],
},
];

3
packages/mermaid/src/docs/.vitepress/theme/index.ts
View File

@@ -10,9 +10,6 @@ export default {
// register global components
app.component('Mermaid', Mermaid);
router.onBeforeRouteChange = (to) => {
if (router.route.path !== '/') {
return;
}
try {
const newPath = getRedirect(to);
if (newPath) {

37
packages/mermaid/src/docs/.vitepress/theme/redirect.spec.ts
View File

@@ -5,31 +5,34 @@ import { expect, test } from 'vitest';
import { getRedirect } from './redirect';
test.each([
// Old docs, localhost
['http://localhost:1234/mermaid/#/flowchart.md', 'syntax/flowchart.html'],
['http://localhost/mermaid/#/flowchart.md', 'syntax/flowchart.html'],
['https://mermaid-js.github.io/mermaid/#/flowchart.md', 'syntax/flowchart.html'],
['https://mermaid.js.org/#/flowchart.md', 'syntax/flowchart.html'],
['https://mermaid-js.github.io/mermaid/#/./flowchart', 'syntax/flowchart.html'],
['https://mermaid-js.github.io/mermaid/#/flowchart', 'syntax/flowchart.html'],
['https://mermaid-js.github.io/mermaid/#flowchart', 'syntax/flowchart.html'],
['https://mermaid-js.github.io/mermaid/#/flowchart', 'syntax/flowchart.html'],
['https://mermaid-js.github.io/mermaid/#/flowchart.md?id=my-id', 'syntax/flowchart.html#my-id'],
['https://mermaid-js.github.io/mermaid/#/./flowchart.md?id=my-id', 'syntax/flowchart.html#my-id'],
// Old docs, github pages
['https://mermaid-js.github.io/mermaid/#/flowchart.md', 'syntax/flowchart.html'], // without dot
['https://mermaid-js.github.io/mermaid/#/./flowchart', 'syntax/flowchart.html'], // with dot
['https://mermaid-js.github.io/mermaid/#flowchart', 'syntax/flowchart.html'], // without slash
['https://mermaid-js.github.io/mermaid/#/flowchart', 'syntax/flowchart.html'], // with slash
['https://mermaid-js.github.io/mermaid/#/flowchart.md?id=my-id', 'syntax/flowchart.html#my-id'], // with id
['https://mermaid-js.github.io/mermaid/#/./flowchart.md?id=my-id', 'syntax/flowchart.html#my-id'], // with id and dot
[
'https://mermaid-js.github.io/mermaid/#/flowchart?another=test&id=my-id&one=more',
'https://mermaid-js.github.io/mermaid/#/flowchart?another=test&id=my-id&one=more', // with multiple params
'syntax/flowchart.html#my-id',
],
['https://mermaid-js.github.io/mermaid/#/n00b-advanced', 'config/n00b-advanced.html'],
['https://mermaid-js.github.io/mermaid/#/n00b-advanced.md', 'config/n00b-advanced.html'],
['https://mermaid-js.github.io/mermaid/#/n00b-advanced', 'config/n00b-advanced.html'], // without .md
['https://mermaid-js.github.io/mermaid/#/n00b-advanced.md', 'config/n00b-advanced.html'], // with .md
[
'https://mermaid-js.github.io/mermaid/#/flowchart?id=a-node-in-the-form-of-a-circle',
'https://mermaid-js.github.io/mermaid/#/flowchart?id=a-node-in-the-form-of-a-circle', // with id, without .md
'syntax/flowchart.html#a-node-in-the-form-of-a-circle',
],
// Old docs, without base path, new domain
['https://mermaid.js.org/#/flowchart.md', 'syntax/flowchart.html'],
// New docs, without base path, new domain
['https://mermaid.js.org/misc/faq.html', 'configure/faq.html'],
[
'https://mermaid.js.org/misc/faq.html#frequently-asked-questions',
'configure/faq.html#frequently-asked-questions',
], // with hash
])('should process url %s to %s', (link: string, path: string) => {
expect(getRedirect(link)).toBe(path);
});
test('should throw for invalid URL', () => {
// Not mermaid domain
expect(() => getRedirect('https://www.google.com')).toThrowError();
});

32
packages/mermaid/src/docs/.vitepress/theme/redirect.ts
View File

@@ -1,4 +1,4 @@
export interface Redirect {
interface Redirect {
path: string;
id?: string;
}
@@ -7,15 +7,7 @@ export interface Redirect {
* Extracts the base slug from the old URL.
* @param link - The old URL.
*/
const getBaseFile = (link: string): Redirect => {
const url = new URL(link);
if (
url.hostname !== 'mermaid-js.github.io' &&
url.hostname !== 'mermaid.js.org' &&
url.hostname !== 'localhost'
) {
throw new Error('Not mermaidjs url');
}
const getBaseFile = (url: URL): Redirect => {
const [path, params, ...rest] = url.hash
.toLowerCase()
.replace('.md', '')
@@ -32,7 +24,7 @@ const getBaseFile = (link: string): Redirect => {
return { path, id };
};
const redirectMap: Record<string, string> = {
const idRedirectMap: Record<string, string> = {
'8.6.0_docs': '',
accessibility: 'config/theming',
breakingchanges: '',
@@ -76,15 +68,25 @@ const redirectMap: Record<string, string> = {
'user-journey': 'syntax/userJourney',
};
const urlRedirectMap: Record<string, string> = {
'/misc/faq.html': 'configure/faq.html',
};
/**
*
* @param link - The old documentation URL.
* @returns The new documentation path.
*/
export const getRedirect = (link: string): string | undefined => {
const { path, id } = getBaseFile(link);
if (!(path in redirectMap)) {
return;
const url = new URL(link);
// Redirects for deprecated vitepress URLs
if (url.pathname in urlRedirectMap) {
return `${urlRedirectMap[url.pathname]}${url.hash}`;
}
// Redirects for old docs URLs
const { path, id } = getBaseFile(url);
if (path in idRedirectMap) {
return `${idRedirectMap[path]}.html${id ? `#${id}` : ''}`;
}
return `${redirectMap[path]}.html${id ? `#${id}` : ''}`;
};

0
packages/mermaid/src/docs/misc/faq.md → packages/mermaid/src/docs/config/faq.md
View File

3
packages/mermaid/src/docs/misc/integrations.md → packages/mermaid/src/docs/ecosystem/integrations.md
View File

@@ -89,9 +89,10 @@ They also serve as proof of concept, for the variety of things that can be built
## Editor Plugins
- [Vs Code](https://code.visualstudio.com/)
- [VS Code](https://code.visualstudio.com/)
- [Markdown Preview Mermaid Support](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid)
- [Mermaid Preview](https://marketplace.visualstudio.com/items?itemName=vstirbu.vscode-mermaid-preview)
- [Markdown Preview Enhanced](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)
- [Mermaid Markdown Syntax Highlighting](https://marketplace.visualstudio.com/items?itemName=bpruitt-goddard.mermaid-markdown-syntax-highlighting)
- [Mermaid Editor](https://marketplace.visualstudio.com/items?itemName=tomoyukim.vscode-mermaid-editor)
- [Mermaid Export](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.mermaid-export)

3
packages/mermaid/src/docs/ecosystem/showcases.md Normal file
View File

@@ -0,0 +1,3 @@
# Showcases
- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/Features/diagrams-and-charts).

12
packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md
View File

@@ -146,14 +146,13 @@ The `type` and `name` values must begin with an alphabetic character and may con
#### Attribute Keys and Comments
Attributes may also have a `key` or comment defined. Keys can be "PK", "FK" or "UK", for Primary Key, Foreign Key or Unique Key. And a `comment` is defined by double quotes at the end of an attribute. Comments themselves cannot have double-quote characters in them.
Attributes may also have a `key` or comment defined. Keys can be `PK`, `FK` or `UK`, for Primary Key, Foreign Key or Unique Key. To specify multiple key constraints on a single attribute, separate them with a comma (e.g., `PK, FK`).. A `comment` is defined by double quotes at the end of an attribute. Comments themselves cannot have double-quote characters in them.
```mermaid-example
erDiagram
CAR ||--o{ NAMED-DRIVER : allows
CAR {
string allowedDriver FK "The license of the allowed driver"
string registrationNumber UK
string registrationNumber PK
string make
string model
string[] parts
@@ -163,9 +162,14 @@ erDiagram
string driversLicense PK "The license #"
string(99) firstName "Only 99 characters are allowed"
string lastName
string phone UK
int age
}
MANUFACTURER only one to zero or more CAR
NAMED-DRIVER {
string carRegistrationNumber PK, FK
string driverLicence PK, FK
}
MANUFACTURER only one to zero or more CAR : makes
```
### Other Things

9
packages/mermaid/src/docs/syntax/flowchart.md
View File

@@ -1,3 +1,8 @@
---
title: Flowcharts Syntax
outline: 'deep' # shows all h3 headings in outline in Vitepress
---
# Flowcharts - Basic Syntax
All Flowcharts are composed of **nodes**, the geometric shapes and **edges**, the arrows or lines. The mermaid code defines the way that these **nodes** and **edges** are made and interact.
@@ -547,8 +552,8 @@ linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
### Styling line curves
It is possible to style the type of curve used for lines between items, if the default method does not meet your needs.
Available curve styles include `basis`, `bump`, `linear`, `monotoneX`, `monotoneY`, `natural`, `step`, `stepAfter`,
and `stepBefore`.
Available curve styles include `basis`, `bumpX`, `bumpY`, `cardinal`, `catmullRom`, `linear`, `monotoneX`, `monotoneY`,
`natural`, `step`, `stepAfter`, and `stepBefore`.
In this example, a left-to-right graph uses the `stepBefore` curve style:

2
packages/mermaid/src/docs/syntax/mindmap.md
View File

@@ -55,7 +55,7 @@ In this way we can use a text outline to generate a hierarchical mindmap.
## Different shapes
Mermaids mindmaps can show node using different shapes. When specifying a shape for a node the syntax for the is similar to flowchart nodes, with an id followed by the shape definition and with the text within the shape delimiters. Where possible we try/will try to keep the same shapes as for flowcharts even though they are not all supported from the start.
Mermaid mindmaps can show nodes using different shapes. When specifying a shape for a node the syntax is similar to flowchart nodes, with an id followed by the shape definition and with the text within the shape delimiters. Where possible we try/will try to keep the same shapes as for flowcharts, even though they are not all supported from the start.
Mindmap can show the following shapes:

42
packages/mermaid/src/docs/syntax/sequenceDiagram.md
View File

@@ -58,6 +58,48 @@ sequenceDiagram
J->>A: Great!
```
### Grouping / Box
The actor(s) can be grouped in vertical boxes. You can define a color (if not, it will be transparent) and/or a descriptive label using the following notation:
```
box Aqua Group Description
... actors ...
end
box Group without description
... actors ...
end
box rgb(33,66,99)
... actors ...
end
```
```note
If your group name is a color you can force the color to be transparent:
```
```
box transparent Aqua
... actors ...
end
```
```mermaid-example
sequenceDiagram
box Purple Alice & John
participant A
participant J
end
box Another Group
participant B
participant C
end
A->>J: Hello John, how are you?
J->>A: Great!
A->>B: Hello Bob, how is Charly ?
B->>C: Hello Charly, how are you?
```
## Messages
Messages can be of two displayed either solid or with a dotted line.

2
packages/mermaid/src/logger.ts
View File

@@ -2,7 +2,7 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable @typescript-eslint/no-empty-function */
/* eslint-disable no-console */
import moment from 'moment-mini';
import moment from 'moment';
export type LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal';

18
packages/mermaid/src/mermaid.ts
View File

@@ -17,7 +17,6 @@ import { ExternalDiagramDefinition } from './diagram-api/types';
export type { MermaidConfig, DetailedError, ExternalDiagramDefinition, ParseErrorFunction };
let externalDiagramsRegistered = false;
/**
* ## init
*
@@ -51,12 +50,7 @@ const init = async function (
callback?: Function
) {
try {
// Not really sure if we need to check this, or simply call initThrowsErrorsAsync directly.
if (externalDiagramsRegistered) {
await initThrowsErrorsAsync(config, nodes, callback);
} else {
initThrowsErrors(config, nodes, callback);
}
await initThrowsErrorsAsync(config, nodes, callback);
} catch (e) {
log.warn('Syntax Error rendering');
if (isDetailedError(e)) {
@@ -68,8 +62,7 @@ const init = async function (
}
};
// eslint-disable-next-line @typescript-eslint/ban-types
const handleError = (error: unknown, errors: DetailedError[], parseError?: Function) => {
const handleError = (error: unknown, errors: DetailedError[], parseError?: ParseErrorFunction) => {
log.warn(error);
if (isDetailedError(error)) {
// handle case where error string and hash were
@@ -225,7 +218,6 @@ const loadExternalDiagrams = async (...diagrams: ExternalDiagramDefinition[]) =>
*/
const initThrowsErrorsAsync = async function (
config?: MermaidConfig,
// eslint-disable-next-line no-undef
nodes?: string | HTMLElement | NodeListOf<HTMLElement>,
// eslint-disable-next-line @typescript-eslint/ban-types
callback?: Function
@@ -348,7 +340,7 @@ const contentLoaded = function () {
if (mermaid.startOnLoad) {
const { startOnLoad } = mermaidAPI.getConfig();
if (startOnLoad) {
mermaid.init();
mermaid.init().catch((err) => log.error('Mermaid failed to initialize', err));
}
}
};
@@ -427,7 +419,7 @@ const parseAsync = (txt: string): Promise<boolean> => {
);
});
executionQueue.push(performCall);
executeQueue();
executeQueue().catch(reject);
});
};
@@ -460,7 +452,7 @@ const renderAsync = (
);
});
executionQueue.push(performCall);
executeQueue();
executeQueue().catch(reject);
});
};

18
packages/mermaid/src/utils.ts
View File

@@ -4,6 +4,15 @@ import {
curveBasis,
curveBasisClosed,
curveBasisOpen,
curveBumpX,
curveBumpY,
curveBundle,
curveCardinalClosed,
curveCardinalOpen,
curveCardinal,
curveCatmullRomClosed,
curveCatmullRomOpen,
curveCatmullRom,
CurveFactory,
curveLinear,
curveLinearClosed,
@@ -28,6 +37,15 @@ const d3CurveTypes = {
curveBasis: curveBasis,
curveBasisClosed: curveBasisClosed,
curveBasisOpen: curveBasisOpen,
curveBumpX: curveBumpX,
curveBumpY: curveBumpY,
curveBundle: curveBundle,
curveCardinalClosed: curveCardinalClosed,
curveCardinalOpen: curveCardinalOpen,
curveCardinal: curveCardinal,
curveCatmullRomClosed: curveCatmullRomClosed,
curveCatmullRomOpen: curveCatmullRomOpen,
curveCatmullRom: curveCatmullRom,
curveLinear: curveLinear,
curveLinearClosed: curveLinearClosed,
curveMonotoneX: curveMonotoneX,