marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-17 14:29:48 +02:00
Code Issues Packages Projects Releases Wiki Activity

Changes to add actor node for flowchart

Browse Source
This commit is contained in:
Ashish Gupta
2021-11-12 14:09:49 +05:30
parent 857f6c892c
commit a69b7090cc
5 changed files with 125 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
cypress/platform/scratch/logicbeat/ashish.html Normal file
View File

@@ -0,0 +1,67 @@
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
rel="stylesheet"
/>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style>
body {
/* background: rgb(221, 208, 208); */
/* background:#333; */
font-family: 'Arial';
/* font-size: 18px !important; */
width: 100%;
}
h1 { color: grey;}
.mermaid2,.mermaid3 {
display: none;
}
.mermaid svg {
/* font-size: 18px !important; */
}
</style>
</head>
<body>
<div>info below</div>
<div class="flex flex-wrap">
<div class="mermaid" style="width: 100%; height: 20%;">
flowchart LR
A(Ashu) --> B
C(^actor^) --> B
</div>
<script src="/mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
// theme: 'dark',
theme: 'forest',
arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 2,
flowchart: { nodeSpacing: 10, curve: 'cardinal', htmlLabels: false },
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
// sequenceDiagram: { actorMargin: 300 } // deprecated
// fontFamily: '"times", sans-serif',
// fontFamily: 'courier',
state:{
nodeSpacing: 50,
rankSpacing: 50,
defaultRenderer: 'dagre-wrapper',
},
logLevel:0,
fontSize: 18,
curve: 'cardinal',
securityLevel: 'strict',
// themeVariables: {relationLabelColor: 'red'}
});
function callback(){alert('It worked');}
</script>
</body>
</html>

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

@@ -238,6 +238,45 @@ const rect_right_inv_arrow = (parent, node) => {
return shapeSvg; return shapeSvg;
}; };
const actor = (parent, node) => {
const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
const w = bbox.width + node.padding;
const h = bbox.height + node.padding;
const points = [
{ x: w / 2, y: 0 },
{ x: w / 2, y: -h },
{ x: w / 2, y: -h / 1.5 },
{ x: w / 4, y: -h },
{ x: w / 2, y: -h / 1.5 },
{ x: w / 2 + w / 4, y: -h },
{ x: w / 2, y: -h / 1.5 },
{ x: w / 2, y: -h / 2.5 },
{ x: w / 4, y: h / 5 },
{ x: w / 2, y: -h / 2.5 },
{ x: w / 2 + w / 4, y: h / 5 },
{ x: w / 2, y: -h / 2.5 },
{ x: w / 2, y: -h },
{ x: w / 1.8, y: -h },
{ x: w / 1.5, y: -h - h / 3 },
{ x: w / 1.8, y: -h - h / 2 },
{ x: w / 2.2, y: -h - h / 2 },
{ x: w / 3, y: -h - h / 3 },
{ x: w / 2.2, y: -h },
{ x: w / 2, y: -h },
];
const el = insertPolygonShape(shapeSvg, w, h, points);
el.attr('style', node.style);
updateNodeBounds(node, el);
node.intersect = function (point) {
return intersect.polygon(node, points, point);
};
return shapeSvg;
};
const cylinder = (parent, node) => { const cylinder = (parent, node) => {
const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true); const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
@@ -894,6 +933,7 @@ const shapes = {
inv_trapezoid, inv_trapezoid,
rect_right_inv_arrow, rect_right_inv_arrow,
cylinder, cylinder,
actor,
start, start,
end, end,
note, note,

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

@@ -125,6 +125,9 @@ export const addVertices = function (vert, g, svgId) {
case 'cylinder': case 'cylinder':
_shape = 'cylinder'; _shape = 'cylinder';
break; break;
case 'actor':
_shape = 'actor';
break;
case 'group': case 'group':
_shape = 'rect'; _shape = 'rect';
break; break;

10
src/diagrams/flowchart/parser/flow-singlenode.spec.js
View File

@@ -44,7 +44,17 @@ describe('[Singlenodes] when parsing', () => {
expect(vert['a'].styles.length).toBe(0); expect(vert['a'].styles.length).toBe(0);
expect(vert['a'].type).toBe('square'); expect(vert['a'].type).toBe('square');
}); });
it('should handle a single actor', function() {
// Silly but syntactically correct
const res = flow.parser.parse('graph TD\nA(^Actor^)');
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
expect(edges.length).toBe(0);
expect(vert['A'].styles.length).toBe(0);
expect(vert['A'].type).toBe('actor');
});
it('should handle a single round square node', function() { it('should handle a single round square node', function() {
// Silly but syntactically correct // Silly but syntactically correct
const res = flow.parser.parse('graph TD;a[A];'); const res = flow.parser.parse('graph TD;a[A];');

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

@@ -120,6 +120,8 @@ that id.
"]]" return 'SUBROUTINEEND'; "]]" return 'SUBROUTINEEND';
"[(" return 'CYLINDERSTART'; "[(" return 'CYLINDERSTART';
")]" return 'CYLINDEREND'; ")]" return 'CYLINDEREND';
"(^" return 'ACTORSTART';
"^)" return 'ACTOREND';
\- return 'MINUS'; \- return 'MINUS';
"." return 'DOT'; "." return 'DOT';
[\_] return 'UNDERSCORE'; [\_] return 'UNDERSCORE';
@@ -382,6 +384,8 @@ vertex: idString SQS text SQE
{$$ = $1;yy.addVertex($1,$3,'subroutine');} {$$ = $1;yy.addVertex($1,$3,'subroutine');}
| idString CYLINDERSTART text CYLINDEREND | idString CYLINDERSTART text CYLINDEREND
{$$ = $1;yy.addVertex($1,$3,'cylinder');} {$$ = $1;yy.addVertex($1,$3,'cylinder');}
| idString ACTORSTART text ACTOREND
{$$ = $1;yy.addVertex($1,$3,'actor');}
| idString PS text PE | idString PS text PE
{$$ = $1;yy.addVertex($1,$3,'round');} {$$ = $1;yy.addVertex($1,$3,'round');}
| idString DIAMOND_START text DIAMOND_STOP | idString DIAMOND_START text DIAMOND_STOP
@@ -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; 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 | CYLINDERSTART | CYLINDEREND | ACTORSTART | ACTOREND | 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;
%% %%