marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-05 21:34:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

merge

Browse Source
This commit is contained in:
Knut Sveidqvist
2021-12-01 18:12:05 +01:00
parent 3426aa8b2a 28bb07d415
commit 492ecb1099
5 changed files with 114 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
dist/dataflowchart.html vendored Normal file
View File

@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
<style>
div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<body>
<h2>Data Flow Diagram Example</h2>
<div class="mermaid">
flowchart LR
DataStore[|borders:tb|Database] -->|input| Process((System)) -->|output| Entity[Customer];
</div>
<h2>Borders Example</h2>
<div class="mermaid">
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 ];
</div>
<script src="./mermaid.js"></script>
<script>
mermaid.initialize({
theme: 'forest',
logLevel: 3,
securityLevel: 'loose',
flowchart: { curve: 'basis' }
});
</script>
<script>
function testClick(nodeId) {
console.log("clicked", nodeId)
var originalBgColor = document.querySelector('body').style.backgroundColor
document.querySelector('body').style.backgroundColor = 'yellow'
setTimeout(function() {
document.querySelector('body').style.backgroundColor = originalBgColor
}, 100)
}
</script>
</body>
</html>

54
src/dagre-wrapper/nodes.js
View File

@@ -313,6 +313,8 @@ const rect = (parent, node) => {
// add the rect // add the rect
const rect = shapeSvg.insert('rect', ':first-child'); const rect = shapeSvg.insert('rect', ':first-child');
const totalWidth = bbox.width + node.padding;
const totalHeight = bbox.height + node.padding;
rect rect
.attr('class', 'basic label-container') .attr('class', 'basic label-container')
.attr('style', node.style) .attr('style', node.style)
@@ -320,8 +322,19 @@ const rect = (parent, node) => {
.attr('ry', node.ry) .attr('ry', node.ry)
.attr('x', -bbox.width / 2 - halfPadding) .attr('x', -bbox.width / 2 - halfPadding)
.attr('y', -bbox.height / 2 - halfPadding) .attr('y', -bbox.height / 2 - halfPadding)
.attr('width', bbox.width + node.padding) .attr('width', totalWidth)
.attr('height', bbox.height + node.padding); .attr('height', totalHeight);
if (node.props) {
const propKeys = new Set(Object.keys(node.props));
if (node.props.borders) {
applyNodePropertyBorders(rect, node.props.borders, totalWidth, totalHeight);
propKeys.delete('borders');
}
propKeys.forEach((propKey) => {
log.warn(`Unknown node property ${propKey}`);
});
}
updateNodeBounds(node, rect); updateNodeBounds(node, rect);
@@ -332,6 +345,43 @@ const rect = (parent, node) => {
return shapeSvg; 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 rectWithTitle = (parent, node) => {
// const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes); // const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes);

4
src/diagrams/flowchart/flowDb.js
View File

@@ -52,8 +52,9 @@ export const lookUpDomId = function (id) {
* @param style * @param style
* @param classes * @param classes
* @param dir * @param dir
* @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 txt;
let id = _id; let id = _id;
if (typeof id === 'undefined') { if (typeof id === 'undefined') {
@@ -109,6 +110,7 @@ export const addVertex = function (_id, text, type, style, classes, dir) {
if (typeof dir !== 'undefined') { if (typeof dir !== 'undefined') {
vertices[id].dir = dir; vertices[id].dir = dir;
} }
vertices[id].props = props;
}; };
/** /**

2
src/diagrams/flowchart/flowRenderer-v2.js
View File

@@ -152,6 +152,7 @@ export const addVertices = function (vert, g, svgId) {
width: vertex.type === 'group' ? 500 : undefined, width: vertex.type === 'group' ? 500 : undefined,
dir: vertex.dir, dir: vertex.dir,
type: vertex.type, type: vertex.type,
props: vertex.props,
padding: getConfig().flowchart.padding, padding: getConfig().flowchart.padding,
}); });
@@ -168,6 +169,7 @@ export const addVertices = function (vert, g, svgId) {
width: vertex.type === 'group' ? 500 : undefined, width: vertex.type === 'group' ? 500 : undefined,
type: vertex.type, type: vertex.type,
dir: vertex.dir, dir: vertex.dir,
props: vertex.props,
padding: getConfig().flowchart.padding, padding: getConfig().flowchart.padding,
}); });
}); });

5
src/diagrams/flowchart/parser/flow.jison
View File

@@ -118,6 +118,7 @@ that id.
"])" return 'STADIUMEND'; "])" return 'STADIUMEND';
"[[" return 'SUBROUTINESTART'; "[[" return 'SUBROUTINESTART';
"]]" return 'SUBROUTINEEND'; "]]" return 'SUBROUTINEEND';
"[|" return 'VERTEX_WITH_PROPS_START';
"[(" return 'CYLINDERSTART'; "[(" return 'CYLINDERSTART';
")]" return 'CYLINDEREND'; ")]" return 'CYLINDEREND';
\- return 'MINUS'; \- return 'MINUS';
@@ -380,6 +381,8 @@ vertex: idString SQS text SQE
{$$ = $1;yy.addVertex($1,$3,'stadium');} {$$ = $1;yy.addVertex($1,$3,'stadium');}
| idString SUBROUTINESTART text SUBROUTINEEND | idString SUBROUTINESTART text SUBROUTINEEND
{$$ = $1;yy.addVertex($1,$3,'subroutine');} {$$ = $1;yy.addVertex($1,$3,'subroutine');}
| 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 | idString CYLINDERSTART text CYLINDEREND
{$$ = $1;yy.addVertex($1,$3,'cylinder');} {$$ = $1;yy.addVertex($1,$3,'cylinder');}
| idString PS text PE | idString PS text PE
@@ -559,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; 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 | 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;
%% %%