GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00
Code Issues Projects Releases Wiki Activity

Less picky syntax, fix for multiline strings

Browse Source
This commit is contained in:
Knut Sveidqvist 2024-08-13 13:20:58 +02:00
parent 4d401c127d
commit c673cf22bd
3 changed files with 90 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/mermaid/src/diagrams/flowchart/flowDb.ts
View File

@ -135,15 +135,9 @@ export const addVertex = function (
yamlData = yamlData.substring(0, lastPos) + '\n';
}
}
// console.log('yamlData', yamlData);
const doc = yaml.load(yamlData, { schema: yaml.JSON_SCHEMA });
// console.log('yamlData doc', doc);
if (doc?.shape) {
//check if shape has a trailing `,` and remove it
if (doc.shape.endsWith(',')) {
doc.shape = doc.shape.slice(0, -1);
}
vertex.type = doc?.shape;
}
if (doc?.label) {

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

@ -28,7 +28,7 @@ describe('when parsing directions', function () {
D@{shape: rounded }@`);
const data4Layout = flow.parser.yy.getData();
console.log(data4Layout.nodes);
expect(data4Layout.nodes.length).toBe(1);
expect(data4Layout.nodes[0].shape).toEqual('rounded');
expect(data4Layout.nodes[0].label).toEqual('D');
@ -39,7 +39,7 @@ describe('when parsing directions', function () {
D@{ shape: rounded }@`);
const data4Layout = flow.parser.yy.getData();
console.log(data4Layout.nodes);
expect(data4Layout.nodes.length).toBe(1);
expect(data4Layout.nodes[0].shape).toEqual('rounded');
expect(data4Layout.nodes[0].label).toEqual('D');
@ -50,7 +50,7 @@ describe('when parsing directions', function () {
D@{ shape: rounded }@`);
const data4Layout = flow.parser.yy.getData();
console.log(data4Layout.nodes);
expect(data4Layout.nodes.length).toBe(1);
expect(data4Layout.nodes[0].shape).toEqual('rounded');
expect(data4Layout.nodes[0].label).toEqual('D');
@ -60,7 +60,7 @@ describe('when parsing directions', function () {
D@{ shape: rounded , label: "DD" }@`);
const data4Layout = flow.parser.yy.getData();
console.log(data4Layout.nodes);
expect(data4Layout.nodes.length).toBe(1);
expect(data4Layout.nodes[0].shape).toEqual('rounded');
expect(data4Layout.nodes[0].label).toEqual('DD');
@ -132,7 +132,21 @@ describe('when parsing directions', function () {
const res = flow.parser.parse(`flowchart TB
A@{
label: |
"This is a
This is a
multiline string
icon: "clock"
}@
`);
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 a\nmultiline string\n');
});
it('Multi line strings should be supported', function () {
const res = flow.parser.parse(`flowchart TB
A@{
label: "This is a
multiline string"
icon: "clock"
}@
@ -143,4 +157,43 @@ describe('when parsing directions', function () {
expect(data4Layout.nodes[0].shape).toEqual('squareRect');
expect(data4Layout.nodes[0].label).toEqual('This is a<br/>multiline string');
});
it(' should be possible to use } in strings', function () {
const res = flow.parser.parse(`flowchart TB
A@{
label: "This is a string with }"
icon: "clock"
}@
`);
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 a string with }');
});
it(' should be possible to use @ in strings', function () {
const res = flow.parser.parse(`flowchart TB
A@{
label: "This is a string with @"
icon: "clock"
}@
`);
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 a string with @');
});
it(' should be possible to use @ in strings', function () {
const res = flow.parser.parse(`flowchart TB
A@{
label: "This is a string with }@"
icon: "clock"
}@
`);
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 a string with }@');
});
});

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

@ -24,6 +24,7 @@
%x callbackname
%x callbackargs
%x shapeData
%x shapeDataStr
%x shapeDataEndBracket
%%
@ -36,10 +37,23 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multilin
<acc_descr_multiline>[^\}]* return "acc_descr_multiline_value";
// <acc_descr_multiline>.*[^\n]* { return "acc_descr_line"}
\@\{ { console.log('Pushing state shapeData!'); this.pushState("shapeData"); }
<shapeDataEndBracket>[@] { console.log('This is the end: ', yytext); this.popState();this.popState(); }
<shapeDataEndBracket>[^@]* { console.log('SHAPE_DATA: ', yytext); return 'SHAPE_DATA'; }
<shapeData>@ { console.log('End bracket found: ', yytext); this.pushState("shapeDataEndBracket");}
\@\{ { this.pushState("shapeData"); yytext=""; return 'SHAPE_DATA' }
<shapeData>["] {
this.pushState("shapeDataStr");
return 'SHAPE_DATA';
}
<shapeDataStr>["] { this.popState(); return 'SHAPE_DATA'}
<shapeDataStr>[^\"]+ {
const re = /\n\s*/g;
yytext = yytext.replace(re,"<br/>");
return 'SHAPE_DATA'}
<shapeData>[^@^"]+ {
return 'SHAPE_DATA';
}
<shapeData>\@+ {
this.popState();
}
/*
---interactivity command---
@ -56,10 +70,11 @@ Function arguments are optional: 'call <callbackname>()' simply executes 'callba
<callbackargs>\) this.popState();
<callbackargs>[^)]* return 'CALLBACKARGS';
<md_string>[^`"]+ { return "MD_STR";}
<md_string>[`]["] { this.popState();}
<*>["][`] { this.begin("md_string");}
<string>[^"]+ return "STR";
<string>[^"]+ { return "STR"; }
<string>["] this.popState();
<*>["] this.pushState("string");
"style" return 'STYLE';
@ -365,18 +380,24 @@ statement
separator: NEWLINE | SEMI | EOF ;
shapeData:
shapeData SHAPE_DATA
{ $$ = $1 + $2; }
| SHAPE_DATA
{ $$ = $1; }
;
vertexStatement: vertexStatement link node SHAPE_DATA
{ /* 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: vertexStatement link node shapeData
{ /* console.warn('vs shapeData',$vertexStatement.stmt,$node, $shapeData);*/ yy.addVertex($node[0],undefined,undefined,undefined, undefined,undefined, undefined,$shapeData); yy.addLink($vertexStatement.stmt,$node,$link); $$ = { stmt: $node, nodes: $node.concat($vertexStatement.nodes) } }
| vertexStatement link node
{ /*console.warn('vs',$vertexStatement.stmt,$node);*/ yy.addLink($vertexStatement.stmt,$node,$link); $$ = { stmt: $node, nodes: $node.concat($vertexStatement.nodes) } }
| vertexStatement link node spaceList
{ /* 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 SHAPE_DATA {
/*console.warn('vertexStatement: node SHAPE_DATA', $node[0], $SHAPE_DATA);*/
yy.addVertex($node[0],undefined,undefined,undefined, undefined,undefined, undefined,$SHAPE_DATA);
$$ = {stmt: $node, nodes:$node, shapeData: $SHAPE_DATA}
|node shapeData {
/*console.warn('vertexStatement: node shapeData', $node[0], $shapeData);*/
yy.addVertex($node[0],undefined,undefined,undefined, undefined,undefined, undefined,$shapeData);
$$ = {stmt: $node, nodes:$node, shapeData: $shapeData}
}
|node { /* console.warn('vertexStatement: single node', $node); */ $$ = {stmt: $node, nodes:$node }}
;