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

Using the shape data

Browse Source
This commit is contained in:
Knut Sveidqvist
2024-07-19 18:20:39 +02:00
parent 82c247bb11
commit 958204e831
2 changed files with 37 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
packages/mermaid/src/diagrams/flowchart/parser/flow-node-data.spec.js
View File

@@ -20,6 +20,8 @@ describe('when parsing directions', function () {
const data4Layout = flow.parser.yy.getData(); const data4Layout = flow.parser.yy.getData();
console.log(data4Layout.nodes); console.log(data4Layout.nodes);
expect(data4Layout.nodes.length).toBe(1); expect(data4Layout.nodes.length).toBe(1);
expect(data4Layout.nodes[0].shape).toEqual('rounded');
expect(data4Layout.nodes[0].label).toEqual('D');
}); });
it('should be possible to link to a node with more data', function () { it('should be possible to link to a node with more data', function () {
const res = flow.parser.parse(`flowchart TB const res = flow.parser.parse(`flowchart TB
@@ -31,10 +33,16 @@ describe('when parsing directions', function () {
`); `);
const data4Layout = flow.parser.yy.getData(); const data4Layout = flow.parser.yy.getData();
console.log(data4Layout.nodes); console.log(data4Layout.edges);
expect(data4Layout.nodes.length).toBe(2); expect(data4Layout.nodes.length).toBe(2);
expect(data4Layout.nodes[0].shape).toEqual('squareRect');
expect(data4Layout.nodes[0].label).toEqual('A');
expect(data4Layout.nodes[1].label).toEqual('D');
expect(data4Layout.nodes[1].shape).toEqual('circle');
expect(data4Layout.edges.length).toBe(1);
}); });
it('should use default direction from top level', function () { it('should not disturb adding multiple nodes after each other', function () {
const res = flow.parser.parse(`flowchart TB const res = flow.parser.parse(`flowchart TB
A[hello] A[hello]
B@{ B@{
@@ -45,14 +53,18 @@ describe('when parsing directions', function () {
shape: circle, shape: circle,
icon: "clock" icon: "clock"
}@ }@
`); `);
const data4Layout = flow.parser.yy.getData(); const data4Layout = flow.parser.yy.getData();
console.log(data4Layout.nodes);
expect(data4Layout.nodes.length).toBe(3); expect(data4Layout.nodes.length).toBe(3);
expect(data4Layout.nodes[0].shape).toEqual('squareRect');
expect(data4Layout.nodes[0].label).toEqual('hello');
expect(data4Layout.nodes[1].shape).toEqual('circle');
expect(data4Layout.nodes[1].label).toEqual('B');
expect(data4Layout.nodes[2].shape).toEqual('circle');
expect(data4Layout.nodes[2].label).toEqual('Hello');
}); });
it('should use handle } character inside the shape data', function () { it('should use handle bracket end (}) character inside the shape data', function () {
const res = flow.parser.parse(`flowchart TB const res = flow.parser.parse(`flowchart TB
A@{ A@{
label: "This is }", label: "This is }",
@@ -60,8 +72,20 @@ describe('when parsing directions', function () {
}@ }@
`); `);
const data4Layout = flow.parser.yy.getData();
expect(data4Layout.nodes.length).toBe(1);
expect(data4Layout.nodes[0].shape).toEqual('squareRect');
expect(data4Layout.nodes[0].label).toEqual('This is }');
});
it('Diamond shapes should work as usual', function () {
const res = flow.parser.parse(`flowchart TB
A{This is a label}
`);
const data4Layout = flow.parser.yy.getData(); const data4Layout = flow.parser.yy.getData();
console.log(data4Layout.nodes); console.log(data4Layout.nodes);
expect(data4Layout.nodes.length).toBe(1); expect(data4Layout.nodes.length).toBe(1);
expect(data4Layout.nodes[0].shape).toEqual('diamond');
expect(data4Layout.nodes[0].label).toEqual('This is a label');
}); });
}); });

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

@@ -36,8 +36,7 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multilin
<acc_descr_multiline>[^\}]* return "acc_descr_multiline_value"; <acc_descr_multiline>[^\}]* return "acc_descr_multiline_value";
// <acc_descr_multiline>.*[^\n]* { return "acc_descr_line"} // <acc_descr_multiline>.*[^\n]* { return "acc_descr_line"}
[@\{] { this.pushState("shapeData"); } \@\{ { console.log('Pushing state shapeData!'); this.pushState("shapeData"); }
// <shapeData>[\}][\@] { console.log('This is the end: ', yytext); this.popState(); }
<shapeData>[^}] { console.log('End bracket found: ', yytext); this.pushState("shapeDataEndBracket");} <shapeData>[^}] { console.log('End bracket found: ', yytext); this.pushState("shapeDataEndBracket");}
<shapeDataEndBracket>[@] { console.log('This is the end: ', yytext); this.popState();this.popState(); } <shapeDataEndBracket>[@] { console.log('This is the end: ', yytext); this.popState();this.popState(); }
<shapeDataEndBracket>[^@]* { console.log('something else: ', yytext); return 'SHAPE_DATA'; } <shapeDataEndBracket>[^@]* { console.log('something else: ', yytext); return 'SHAPE_DATA'; }
@@ -372,18 +371,18 @@ separator: NEWLINE | SEMI | EOF ;
vertexStatement: vertexStatement link node SHAPE_DATA vertexStatement: vertexStatement link node SHAPE_DATA
{ console.warn('vs SHAPE_DATA',$vertexStatement.stmt,$node); yy.addLink($vertexStatement.stmt,$node,$link); $$ = { stmt: $node, nodes: $node.concat($vertexStatement.nodes) } } { /* console.warn('vs SHAPE_DATA',$vertexStatement.stmt,$node, $SHAPE_DATA);*/ yy.addVertex($node[0],undefined,undefined,undefined, undefined,undefined, undefined,$SHAPE_DATA); yy.addLink($vertexStatement.stmt,$node,$link); $$ = { stmt: $node, nodes: $node.concat($vertexStatement.nodes) } }
| vertexStatement link node | vertexStatement link node
{ console.warn('vs',$vertexStatement.stmt,$node); yy.addLink($vertexStatement.stmt,$node,$link); $$ = { stmt: $node, nodes: $node.concat($vertexStatement.nodes) } } { /*console.warn('vs',$vertexStatement.stmt,$node);*/ yy.addLink($vertexStatement.stmt,$node,$link); $$ = { stmt: $node, nodes: $node.concat($vertexStatement.nodes) } }
| vertexStatement link node spaceList | vertexStatement link node spaceList
{ /* console.warn('vs',$vertexStatement.stmt,$node); */ yy.addLink($vertexStatement.stmt,$node,$link); $$ = { stmt: $node, nodes: $node.concat($vertexStatement.nodes) } } { /* console.warn('vs',$vertexStatement.stmt,$node); */ yy.addLink($vertexStatement.stmt,$node,$link); $$ = { stmt: $node, nodes: $node.concat($vertexStatement.nodes) } }
|node spaceList {console.warn('vertexStatement: node spaceList', $node); $$ = {stmt: $node, nodes:$node }} |node spaceList { /*console.warn('vertexStatement: node spaceList', $node);*/ $$ = {stmt: $node, nodes:$node }}
|node SHAPE_DATA { |node SHAPE_DATA {
console.warn('vertexStatement: node SHAPE_DATA', $node[0], $SHAPE_DATA); /*console.warn('vertexStatement: node SHAPE_DATA', $node[0], $SHAPE_DATA);*/
yy.addVertex($node[0],undefined,undefined,undefined, undefined,undefined, undefined,$SHAPE_DATA+'\n}\n'); yy.addVertex($node[0],undefined,undefined,undefined, undefined,undefined, undefined,$SHAPE_DATA);
$$ = {stmt: $node, nodes:$node, shapeData: $SHAPE_DATA+'\n}'} $$ = {stmt: $node, nodes:$node, shapeData: $SHAPE_DATA}
} }
|node { console.warn('vertexStatement: single node', $node); $$ = {stmt: $node, nodes:$node }} |node { /* console.warn('vertexStatement: single node', $node); */ $$ = {stmt: $node, nodes:$node }}
; ;
node: styledVertex node: styledVertex
@@ -396,8 +395,6 @@ styledVertex: vertex
{ /* console.warn('nodc', $vertex);*/ $$ = $vertex;} { /* console.warn('nodc', $vertex);*/ $$ = $vertex;}
| vertex STYLE_SEPARATOR idString | vertex STYLE_SEPARATOR idString
{$$ = $vertex;yy.setClass($vertex,$idString)} {$$ = $vertex;yy.setClass($vertex,$idString)}
| vertex idString
{ yy.setClass($vertex,$idString)}
; ;
vertex: idString SQS text SQE vertex: idString SQS text SQE