From cefafba062a1603cd2f82d1a4ac97bb8417615a3 Mon Sep 17 00:00:00 2001 From: Michael Maier Date: Sat, 9 Oct 2021 16:17:54 +0200 Subject: [PATCH 01/13] add brackets [| and |] for datastore nodes of data flow diagrams See https://github.com/mermaid-js/mermaid/issues/1893 --- src/diagrams/flowchart/parser/flow.jison | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/diagrams/flowchart/parser/flow.jison b/src/diagrams/flowchart/parser/flow.jison index a0b1b0019..3f682f29d 100644 --- a/src/diagrams/flowchart/parser/flow.jison +++ b/src/diagrams/flowchart/parser/flow.jison @@ -118,6 +118,8 @@ that id. "])" return 'STADIUMEND'; "[[" return 'SUBROUTINESTART'; "]]" return 'SUBROUTINEEND'; +"[|" return 'DATASTORESTART'; +"|]" return 'DATASTOREEND'; "[(" return 'CYLINDERSTART'; ")]" return 'CYLINDEREND'; \- return 'MINUS'; @@ -380,6 +382,8 @@ vertex: idString SQS text SQE {$$ = $1;yy.addVertex($1,$3,'stadium');} | idString SUBROUTINESTART text SUBROUTINEEND {$$ = $1;yy.addVertex($1,$3,'subroutine');} + | idString DATASTORESTART text DATASTOREEND + {$$ = $1;yy.addVertex($1,$3,'datastore');} | idString CYLINDERSTART text CYLINDEREND {$$ = $1;yy.addVertex($1,$3,'cylinder');} | idString PS text PE @@ -559,5 +563,5 @@ alphaNumToken : PUNCTUATION | AMP | UNICODE_TEXT | NUM| ALPHA | COLON | COMMA | idStringToken : ALPHA|UNDERSCORE |UNICODE_TEXT | NUM| COLON | COMMA | PLUS | MINUS | DOWN |EQUALS | MULT | BRKT | DOT | PUNCTUATION | AMP; -graphCodeTokens: STADIUMSTART | STADIUMEND | SUBROUTINESTART | SUBROUTINEEND | CYLINDERSTART | CYLINDEREND | TRAPSTART | TRAPEND | INVTRAPSTART | INVTRAPEND | PIPE | PS | PE | SQS | SQE | DIAMOND_START | DIAMOND_STOP | TAGSTART | TAGEND | ARROW_CROSS | ARROW_POINT | ARROW_CIRCLE | ARROW_OPEN | QUOTE | SEMI; +graphCodeTokens: STADIUMSTART | STADIUMEND | SUBROUTINESTART | SUBROUTINEEND | DATASTORESTART | DATASTOREEND | CYLINDERSTART | CYLINDEREND | TRAPSTART | TRAPEND | INVTRAPSTART | INVTRAPEND | PIPE | PS | PE | SQS | SQE | DIAMOND_START | DIAMOND_STOP | TAGSTART | TAGEND | ARROW_CROSS | ARROW_POINT | ARROW_CIRCLE | ARROW_OPEN | QUOTE | SEMI; %% From cd427ab8ba7ada02f33870720be9b28ee8674ed5 Mon Sep 17 00:00:00 2001 From: Michael Maier Date: Sat, 9 Oct 2021 16:21:57 +0200 Subject: [PATCH 02/13] add shape `datastore` (for nodes of data flow diagram) See https://github.com/mermaid-js/mermaid/issues/1893 --- src/diagrams/flowchart/flowChartShapes.js | 20 ++++++++++++++++++++ src/diagrams/flowchart/flowRenderer.js | 3 +++ 2 files changed, 23 insertions(+) diff --git a/src/diagrams/flowchart/flowChartShapes.js b/src/diagrams/flowchart/flowChartShapes.js index 1f403a2ae..35f65571d 100644 --- a/src/diagrams/flowchart/flowChartShapes.js +++ b/src/diagrams/flowchart/flowChartShapes.js @@ -176,6 +176,24 @@ function subroutine(parent, bbox, node) { return shapeSvg; } +function datastore(parent, bbox, node) { + const shapeSvg = parent + .insert('rect', ':first-child') + .attr('class', 'basic label-container') + .attr('style', node.style) + .attr('rx', node.rx) + .attr('ry', node.ry) + .attr('x', -bbox.width / 2) + .attr('y', -bbox.height / 2) + .attr('width', bbox.width) + .attr('height', bbox.height) + .attr('stroke-dasharray', bbox.width + ' ' + bbox.height); + node.intersect = function (point) { + return dagreD3.intersect.rect(node, point); + }; + return shapeSvg; +} + function cylinder(parent, bbox, node) { const w = bbox.width; const rx = w / 2; @@ -244,6 +262,7 @@ export function addToRender(render) { render.shapes().hexagon = hexagon; render.shapes().stadium = stadium; render.shapes().subroutine = subroutine; + render.shapes().datastore = datastore; render.shapes().cylinder = cylinder; // Add custom shape for box with inverted arrow on left side @@ -270,6 +289,7 @@ export function addToRenderV2(addShape) { addShape({ hexagon }); addShape({ stadium }); addShape({ subroutine }); + addShape({ datastore }); addShape({ cylinder }); // Add custom shape for box with inverted arrow on left side diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js index 9c405fe42..1b11d4730 100644 --- a/src/diagrams/flowchart/flowRenderer.js +++ b/src/diagrams/flowchart/flowRenderer.js @@ -123,6 +123,9 @@ export const addVertices = function (vert, g, svgId) { case 'subroutine': _shape = 'subroutine'; break; + case 'datastore': + _shape = 'datastore'; + break; case 'cylinder': _shape = 'cylinder'; break; From e2cd2a72aacca0e9b3279efb0fdbe7ef4ae65de5 Mon Sep 17 00:00:00 2001 From: Michael Maier Date: Sat, 9 Oct 2021 16:22:17 +0200 Subject: [PATCH 03/13] add example of data flow diagram See https://github.com/mermaid-js/mermaid/issues/1893 --- dist/dataflowchart.html | 42 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 dist/dataflowchart.html diff --git a/dist/dataflowchart.html b/dist/dataflowchart.html new file mode 100644 index 000000000..8aa1d882c --- /dev/null +++ b/dist/dataflowchart.html @@ -0,0 +1,42 @@ + + + + + + Mermaid Quick Test Page + + + + +

Sample

+
+ graph LR + DataStore[|Database|] -->|input| Process((System)) -->|output| Entity[Customer] +
+ + + + + + From dec6b6d8b571e181587ae0617765977147d60595 Mon Sep 17 00:00:00 2001 From: Michael Maier Date: Sun, 28 Nov 2021 12:09:54 +0100 Subject: [PATCH 04/13] replace 'datastore' brackets with 'vertex with props' bracket --- src/diagrams/flowchart/parser/flow.jison | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/diagrams/flowchart/parser/flow.jison b/src/diagrams/flowchart/parser/flow.jison index 3f682f29d..b920720a4 100644 --- a/src/diagrams/flowchart/parser/flow.jison +++ b/src/diagrams/flowchart/parser/flow.jison @@ -118,8 +118,7 @@ that id. "])" return 'STADIUMEND'; "[[" return 'SUBROUTINESTART'; "]]" return 'SUBROUTINEEND'; -"[|" return 'DATASTORESTART'; -"|]" return 'DATASTOREEND'; +"[|" return 'VERTEX_WITH_PROPS_START'; "[(" return 'CYLINDERSTART'; ")]" return 'CYLINDEREND'; \- return 'MINUS'; @@ -382,8 +381,8 @@ vertex: idString SQS text SQE {$$ = $1;yy.addVertex($1,$3,'stadium');} | idString SUBROUTINESTART text SUBROUTINEEND {$$ = $1;yy.addVertex($1,$3,'subroutine');} - | idString DATASTORESTART text DATASTOREEND - {$$ = $1;yy.addVertex($1,$3,'datastore');} + | idString VERTEX_WITH_PROPS_START ALPHA COLON ALPHA PIPE text SQE + {$$ = $1;yy.addVertex($1,$7,'rect',undefined,undefined,undefined, Object.fromEntries([[$3, $5]]));} | idString CYLINDERSTART text CYLINDEREND {$$ = $1;yy.addVertex($1,$3,'cylinder');} | idString PS text PE @@ -563,5 +562,5 @@ alphaNumToken : PUNCTUATION | AMP | UNICODE_TEXT | NUM| ALPHA | COLON | COMMA | idStringToken : ALPHA|UNDERSCORE |UNICODE_TEXT | NUM| COLON | COMMA | PLUS | MINUS | DOWN |EQUALS | MULT | BRKT | DOT | PUNCTUATION | AMP; -graphCodeTokens: STADIUMSTART | STADIUMEND | SUBROUTINESTART | SUBROUTINEEND | DATASTORESTART | DATASTOREEND | CYLINDERSTART | CYLINDEREND | TRAPSTART | TRAPEND | INVTRAPSTART | INVTRAPEND | PIPE | PS | PE | SQS | SQE | DIAMOND_START | DIAMOND_STOP | TAGSTART | TAGEND | ARROW_CROSS | ARROW_POINT | ARROW_CIRCLE | ARROW_OPEN | QUOTE | SEMI; +graphCodeTokens: STADIUMSTART | STADIUMEND | SUBROUTINESTART | SUBROUTINEEND | VERTEX_WITH_PROPS_START | CYLINDERSTART | CYLINDEREND | TRAPSTART | TRAPEND | INVTRAPSTART | INVTRAPEND | PIPE | PS | PE | SQS | SQE | DIAMOND_START | DIAMOND_STOP | TAGSTART | TAGEND | ARROW_CROSS | ARROW_POINT | ARROW_CIRCLE | ARROW_OPEN | QUOTE | SEMI; %% From 0550e4a899d543021742b7da4f6cbfcbe04658c4 Mon Sep 17 00:00:00 2001 From: Michael Maier Date: Sun, 28 Nov 2021 12:11:50 +0100 Subject: [PATCH 05/13] add `props` to vertex --- src/diagrams/flowchart/flowDb.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/diagrams/flowchart/flowDb.js b/src/diagrams/flowchart/flowDb.js index 3ba55c8dd..346b99d0b 100644 --- a/src/diagrams/flowchart/flowDb.js +++ b/src/diagrams/flowchart/flowDb.js @@ -49,8 +49,9 @@ export const lookUpDomId = function (id) { * @param type * @param style * @param classes + * @param props */ -export const addVertex = function (_id, text, type, style, classes, dir) { +export const addVertex = function (_id, text, type, style, classes, dir, props = {}) { let txt; let id = _id; if (typeof id === 'undefined') { @@ -106,6 +107,7 @@ export const addVertex = function (_id, text, type, style, classes, dir) { if (typeof dir !== 'undefined') { vertices[id].dir = dir; } + vertices[id].props = props }; /** From 853d62c8d1abaaa002d751c43ab4857d23e8b50e Mon Sep 17 00:00:00 2001 From: Michael Maier Date: Sun, 28 Nov 2021 12:12:39 +0100 Subject: [PATCH 06/13] add `props` of vertex to node --- src/diagrams/flowchart/flowRenderer-v2.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/diagrams/flowchart/flowRenderer-v2.js b/src/diagrams/flowchart/flowRenderer-v2.js index fdfd70bd1..7e87955be 100644 --- a/src/diagrams/flowchart/flowRenderer-v2.js +++ b/src/diagrams/flowchart/flowRenderer-v2.js @@ -149,6 +149,7 @@ export const addVertices = function (vert, g, svgId) { width: vertex.type === 'group' ? 500 : undefined, dir: vertex.dir, type: vertex.type, + props: vertex.props, padding: getConfig().flowchart.padding, }); @@ -165,6 +166,7 @@ export const addVertices = function (vert, g, svgId) { width: vertex.type === 'group' ? 500 : undefined, type: vertex.type, dir: vertex.dir, + props: vertex.props, padding: getConfig().flowchart.padding, }); }); From 984a5084b06971dcb8eff7e2af72b0d82e4affbb Mon Sep 17 00:00:00 2001 From: Michael Maier Date: Sun, 28 Nov 2021 12:13:48 +0100 Subject: [PATCH 07/13] render node property `borders` of `rect` node --- src/dagre-wrapper/nodes.js | 47 ++++++++++++++++++++++++++++++++++++-- 1 file changed, 45 insertions(+), 2 deletions(-) diff --git a/src/dagre-wrapper/nodes.js b/src/dagre-wrapper/nodes.js index b006f1343..f3f28c0c0 100644 --- a/src/dagre-wrapper/nodes.js +++ b/src/dagre-wrapper/nodes.js @@ -313,6 +313,8 @@ const rect = (parent, node) => { // add the rect const rect = shapeSvg.insert('rect', ':first-child'); + const totalWidth = bbox.width + node.padding; + const totalHeight = bbox.height + node.padding; rect .attr('class', 'basic label-container') .attr('style', node.style) @@ -320,8 +322,12 @@ const rect = (parent, node) => { .attr('ry', node.ry) .attr('x', -bbox.width / 2 - halfPadding) .attr('y', -bbox.height / 2 - halfPadding) - .attr('width', bbox.width + node.padding) - .attr('height', bbox.height + node.padding); + .attr('width', totalWidth) + .attr('height', totalHeight); + // TODO warn if unknown property is given + if (node.props?.borders) { + applyNodePropertyBorders(rect, node.props.borders, totalWidth, totalHeight); + } updateNodeBounds(node, rect); @@ -332,6 +338,43 @@ const rect = (parent, node) => { return shapeSvg; }; +function applyNodePropertyBorders(rect, borders, totalWidth, totalHeight) { + const strokeDashArray = []; + const addBorder = (length) => { + strokeDashArray.push(length); + strokeDashArray.push(0); + }; + const skipBorder = (length) => { + strokeDashArray.push(0); + strokeDashArray.push(length); + }; + if (borders.includes('t')) { + log.debug('add top border'); + addBorder(totalWidth); + } else { + skipBorder(totalWidth); + } + if (borders.includes('r')) { + log.debug('add right border'); + addBorder(totalHeight); + } else { + skipBorder(totalHeight); + } + if (borders.includes('b')) { + log.debug('add bottom border'); + addBorder(totalWidth); + } else { + skipBorder(totalWidth); + } + if (borders.includes('l')) { + log.debug('add left border'); + addBorder(totalHeight); + } else { + skipBorder(totalHeight); + } + rect.attr('stroke-dasharray', strokeDashArray.join(' ')); +} + const rectWithTitle = (parent, node) => { // const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes); From ee3680eb6df6e96d8afcb4f33078ff82c3c8ee4f Mon Sep 17 00:00:00 2001 From: Michael Maier Date: Sun, 28 Nov 2021 12:15:00 +0100 Subject: [PATCH 08/13] update syntax of data flow diagram example --- dist/dataflowchart.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/dist/dataflowchart.html b/dist/dataflowchart.html index 8aa1d882c..0b554b292 100644 --- a/dist/dataflowchart.html +++ b/dist/dataflowchart.html @@ -15,8 +15,8 @@

Sample

- graph LR - DataStore[|Database|] -->|input| Process((System)) -->|output| Entity[Customer] + flowchart LR + DataStore[|borders:tb|Database] -->|input| Process((System)) -->|output| Entity[Customer];
From 86810e04bd264de6332d0b9b1323a8696c079304 Mon Sep 17 00:00:00 2001 From: Michael Maier Date: Sun, 28 Nov 2021 12:15:49 +0100 Subject: [PATCH 09/13] Revert "add shape `datastore` (for nodes of data flow diagram)" This reverts commit cd427ab8ba7ada02f33870720be9b28ee8674ed5. --- src/diagrams/flowchart/flowChartShapes.js | 20 -------------------- src/diagrams/flowchart/flowRenderer.js | 3 --- 2 files changed, 23 deletions(-) diff --git a/src/diagrams/flowchart/flowChartShapes.js b/src/diagrams/flowchart/flowChartShapes.js index 35f65571d..1f403a2ae 100644 --- a/src/diagrams/flowchart/flowChartShapes.js +++ b/src/diagrams/flowchart/flowChartShapes.js @@ -176,24 +176,6 @@ function subroutine(parent, bbox, node) { return shapeSvg; } -function datastore(parent, bbox, node) { - const shapeSvg = parent - .insert('rect', ':first-child') - .attr('class', 'basic label-container') - .attr('style', node.style) - .attr('rx', node.rx) - .attr('ry', node.ry) - .attr('x', -bbox.width / 2) - .attr('y', -bbox.height / 2) - .attr('width', bbox.width) - .attr('height', bbox.height) - .attr('stroke-dasharray', bbox.width + ' ' + bbox.height); - node.intersect = function (point) { - return dagreD3.intersect.rect(node, point); - }; - return shapeSvg; -} - function cylinder(parent, bbox, node) { const w = bbox.width; const rx = w / 2; @@ -262,7 +244,6 @@ export function addToRender(render) { render.shapes().hexagon = hexagon; render.shapes().stadium = stadium; render.shapes().subroutine = subroutine; - render.shapes().datastore = datastore; render.shapes().cylinder = cylinder; // Add custom shape for box with inverted arrow on left side @@ -289,7 +270,6 @@ export function addToRenderV2(addShape) { addShape({ hexagon }); addShape({ stadium }); addShape({ subroutine }); - addShape({ datastore }); addShape({ cylinder }); // Add custom shape for box with inverted arrow on left side diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js index 1b11d4730..9c405fe42 100644 --- a/src/diagrams/flowchart/flowRenderer.js +++ b/src/diagrams/flowchart/flowRenderer.js @@ -123,9 +123,6 @@ export const addVertices = function (vert, g, svgId) { case 'subroutine': _shape = 'subroutine'; break; - case 'datastore': - _shape = 'datastore'; - break; case 'cylinder': _shape = 'cylinder'; break; From 5fff8403a84c49867f7d3a9ec37e228db913f893 Mon Sep 17 00:00:00 2001 From: Michael Maier Date: Sun, 28 Nov 2021 12:24:24 +0100 Subject: [PATCH 10/13] add borders example --- dist/dataflowchart.html | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/dist/dataflowchart.html b/dist/dataflowchart.html index 0b554b292..258a94201 100644 --- a/dist/dataflowchart.html +++ b/dist/dataflowchart.html @@ -13,12 +13,23 @@ -

Sample

+

Data Flow Diagram Example

flowchart LR DataStore[|borders:tb|Database] -->|input| Process((System)) -->|output| Entity[Customer];
+

Borders Example

+
+ flowchart TD + allSides[ stroke all sides ]; + allSides2[|borders:ltrb| stroke all sides ]; + rbSides[|borders:rb| stroke right and bottom sides ]; + ltSides[|borders:lt| stroke left and top sides ]; + lrSides[|borders:lr| stroke left and right sides ]; + noSide[|borders:no| stroke no side ]; +
+