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

WIP

Browse Source
This commit is contained in:
Knut Sveidqvist
2024-09-12 12:10:41 +02:00
parent 8bb70ea493
commit 8b6fb94835
4 changed files with 99 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
cypress/platform/knsv2.html
View File

@@ -421,6 +421,10 @@ flowchart LR
</pre>
<pre id="diagram4" class="mermaid">
flowchart
D@{ shape: circle, label: "circle" } & E
</pre>
<script type="module">
import mermaid from './mermaid.esm.mjs';
import layouts from './mermaid-layout-elk.esm.mjs';

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

@@ -123,10 +123,10 @@ export const addVertex = function (
if (shapeData !== undefined) {
let yamlData;
// detect if shapeData contains a newline character
console.log('shapeData', shapeData);
if (!shapeData.includes('\n')) {
// console.log('yamlData shapeData has no new lines', shapeData);
yamlData = '{\n' + shapeData + '\n';
yamlData = '{\n' + shapeData + '\n}';
} else {
// console.log('yamlData shapeData has new lines', shapeData);
yamlData = shapeData + '\n';
@@ -136,6 +136,7 @@ export const addVertex = function (
yamlData = yamlData.substring(0, lastPos) + '\n';
}
}
console.log('yamlData', yamlData);
const doc = yaml.load(yamlData, { schema: yaml.JSON_SCHEMA }) as NodeMetaData;
// console.log('yamlData doc', doc);
if (doc?.shape) {

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

@@ -15,7 +15,16 @@ describe('when parsing directions', function () {
it('should handle basic shape data statements', function () {
const res = flow.parser.parse(`flowchart TB
D@{ shape: rounded }@`);
D@{ shape: rounded}`);
const data4Layout = flow.parser.yy.getData();
expect(data4Layout.nodes.length).toBe(1);
expect(data4Layout.nodes[0].shape).toEqual('rounded');
expect(data4Layout.nodes[0].label).toEqual('D');
});
it('should handle basic shape data statements', function () {
const res = flow.parser.parse(`flowchart TB
D@{ shape: rounded }`);
const data4Layout = flow.parser.yy.getData();
expect(data4Layout.nodes.length).toBe(1);
@@ -23,9 +32,69 @@ describe('when parsing directions', function () {
expect(data4Layout.nodes[0].label).toEqual('D');
});
it('should handle basic shape data statements with &', function () {
const res = flow.parser.parse(`flowchart TB
D@{ shape: rounded } & E`);
const data4Layout = flow.parser.yy.getData();
expect(data4Layout.nodes.length).toBe(2);
expect(data4Layout.nodes[0].shape).toEqual('rounded');
expect(data4Layout.nodes[0].label).toEqual('D');
expect(data4Layout.nodes[1].label).toEqual('E');
});
it('should handle shape data statements with edges', function () {
const res = flow.parser.parse(`flowchart TB
D@{ shape: rounded } --> E`);
const data4Layout = flow.parser.yy.getData();
expect(data4Layout.nodes.length).toBe(2);
expect(data4Layout.nodes[0].shape).toEqual('rounded');
expect(data4Layout.nodes[0].label).toEqual('D');
expect(data4Layout.nodes[1].label).toEqual('E');
});
it('should handle basic shape data statements with amp and edges 1', function () {
const res = flow.parser.parse(`flowchart TB
D@{ shape: rounded } & E --> F`);
const data4Layout = flow.parser.yy.getData();
expect(data4Layout.nodes.length).toBe(3);
expect(data4Layout.nodes[0].shape).toEqual('rounded');
expect(data4Layout.nodes[0].label).toEqual('D');
expect(data4Layout.nodes[1].label).toEqual('E');
});
it('should handle basic shape data statements with amp and edges 2', function () {
const res = flow.parser.parse(`flowchart TB
D@{ shape: rounded } & E@{ shape: rounded } --> F`);
const data4Layout = flow.parser.yy.getData();
expect(data4Layout.nodes.length).toBe(3);
expect(data4Layout.nodes[0].shape).toEqual('rounded');
expect(data4Layout.nodes[0].label).toEqual('D');
expect(data4Layout.nodes[1].label).toEqual('E');
});
it('should handle basic shape data statements with amp and edges 3', function () {
const res = flow.parser.parse(`flowchart TB
D@{ shape: rounded } & E@{ shape: rounded } --> F & G@{ shape: rounded }`);
const data4Layout = flow.parser.yy.getData();
expect(data4Layout.nodes.length).toBe(4);
expect(data4Layout.nodes[0].shape).toEqual('rounded');
expect(data4Layout.nodes[0].label).toEqual('D');
expect(data4Layout.nodes[1].label).toEqual('E');
});
it('should handle basic shape data statements with amp and edges 4', function () {
const res = flow.parser.parse(`flowchart TB
D@{ shape: rounded } & E@{ shape: rounded } --> F@{ shape: rounded } & G@{ shape: rounded }`);
const data4Layout = flow.parser.yy.getData();
expect(data4Layout.nodes.length).toBe(4);
expect(data4Layout.nodes[0].shape).toEqual('rounded');
expect(data4Layout.nodes[0].label).toEqual('D');
expect(data4Layout.nodes[1].label).toEqual('E');
});
it('should no matter of there are no leading spaces', function () {
const res = flow.parser.parse(`flowchart TB
D@{shape: rounded }@`);
D@{shape: rounded}`);
const data4Layout = flow.parser.yy.getData();
@@ -36,7 +105,7 @@ describe('when parsing directions', function () {
it('should no matter of there are many leading spaces', function () {
const res = flow.parser.parse(`flowchart TB
D@{ shape: rounded }@`);
D@{ shape: rounded}`);
const data4Layout = flow.parser.yy.getData();
@@ -47,7 +116,7 @@ describe('when parsing directions', function () {
it('should be forgiving with many spaces before teh end', function () {
const res = flow.parser.parse(`flowchart TB
D@{ shape: rounded }@`);
D@{ shape: rounded }`);
const data4Layout = flow.parser.yy.getData();
@@ -57,7 +126,7 @@ describe('when parsing directions', function () {
});
it('should be possible to add multiple properties on the same line', function () {
const res = flow.parser.parse(`flowchart TB
D@{ shape: rounded , label: "DD" }@`);
D@{ shape: rounded , label: "DD"}`);
const data4Layout = flow.parser.yy.getData();
@@ -70,7 +139,7 @@ describe('when parsing directions', function () {
A --> D@{
shape: circle
icon: "clock"
}@
}
`);
@@ -89,11 +158,11 @@ describe('when parsing directions', function () {
B@{
shape: circle
icon: "clock"
}@
}
C[Hello]@{
shape: circle
icon: "clock"
}@
}
`);
const data4Layout = flow.parser.yy.getData();
@@ -105,12 +174,12 @@ describe('when parsing directions', function () {
expect(data4Layout.nodes[2].shape).toEqual('circle');
expect(data4Layout.nodes[2].label).toEqual('Hello');
});
it('should use handle bracket end (}) character inside the shape data', function () {
it.only('should use handle bracket end (}) character inside the shape data', function () {
const res = flow.parser.parse(`flowchart TB
A@{
label: "This is }"
icon: "clock"
}@
}
`);
const data4Layout = flow.parser.yy.getData();
@@ -135,7 +204,7 @@ describe('when parsing directions', function () {
This is a
multiline string
icon: "clock"
}@
}
`);
const data4Layout = flow.parser.yy.getData();
@@ -149,7 +218,7 @@ describe('when parsing directions', function () {
label: "This is a
multiline string"
icon: "clock"
}@
}
`);
const data4Layout = flow.parser.yy.getData();
@@ -162,7 +231,7 @@ describe('when parsing directions', function () {
A@{
label: "This is a string with }"
icon: "clock"
}@
}
`);
const data4Layout = flow.parser.yy.getData();
@@ -175,7 +244,7 @@ describe('when parsing directions', function () {
A@{
label: "This is a string with @"
icon: "clock"
}@
}
`);
const data4Layout = flow.parser.yy.getData();
@@ -186,14 +255,14 @@ describe('when parsing directions', function () {
it(' should be possible to use @ in strings', function () {
const res = flow.parser.parse(`flowchart TB
A@{
label: "This is a string with }@"
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 }@');
expect(data4Layout.nodes[0].label).toEqual('This is a string with}');
});
});

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

@@ -39,12 +39,12 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multilin
\@\{ { this.pushState("shapeData"); yytext=""; return 'SHAPE_DATA' }
<shapeData>["] {
<shapeData>["] {
this.pushState("shapeDataStr");
return 'SHAPE_DATA';
}
<shapeDataStr>["] { this.popState(); return 'SHAPE_DATA'}
<shapeDataStr>[^\"]+ {
<shapeDataStr>["] { this.popState(); return 'SHAPE_DATA'}
<shapeDataStr>[^\"]+ {
const re = /\n\s*/g;
yytext = yytext.replace(re,"<br/>");
return 'SHAPE_DATA'}
@@ -404,8 +404,10 @@ vertexStatement: vertexStatement link node shapeData
node: styledVertex
{ /*console.warn('nod', $styledVertex);*/ $$ = [$styledVertex];}
| node shapeData spaceList AMP spaceList styledVertex
{ yy.addVertex($node[0],undefined,undefined,undefined, undefined,undefined, undefined,$shapeData); $$ = $node.concat($styledVertex); console.warn('pip2', $node[0], $styledVertex, $$); }
| node spaceList AMP spaceList styledVertex
{ $$ = $node.concat($styledVertex); /* console.warn('pip', $node[0], $styledVertex, $$); */ }
{ $$ = $node.concat($styledVertex); console.warn('pip', $node[0], $styledVertex, $$); }
;
styledVertex: vertex