marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-25 11:16:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

#3358 Support for adding tests and fixed issues for some shapes

Browse Source
This commit is contained in:
Knut Sveidqvist
2024-01-08 11:49:34 +01:00
parent 818cb2fd76
commit 809c450164
4 changed files with 355 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

304
cypress/integration/rendering/block.spec.ts Normal file
View File

@@ -0,0 +1,304 @@
import { imgSnapshotTest } from '../../helpers/util';
describe('Block diagram', () => {
it('BL1: should calculate the block widths', () => {
imgSnapshotTest(
`block-beta
columns 2
block
id2["I am a wide one"]
id1
end
id["Next row"]
`,
{}
);
});
it('BL2: should handle colums statement in sub-blocks', () => {
imgSnapshotTest(
`block-beta
id1["Hello"]
block
columns 3
id2["to"]
id3["the"]
id4["World"]
id5["World"]
end
`,
{}
);
});
it('BL3: should align block widths and handle colums statement in sub-blocks', () => {
imgSnapshotTest(
`block-beta
block
columns 1
id1
id2
id2.1
end
id3
id4
`,
{}
);
});
it('BL4: should align block widths and handle colums statements in deeper sub-blocks then 1 level', () => {
imgSnapshotTest(
`block-beta
columns 1
block
columns 1
block
columns 3
id1
id2
id2.1(("XYZ"))
end
id48
end
id3
`,
{}
);
});
it('BL5: should align block widths and handle colums statements in deeper sub-blocks then 1 level (alt)', () => {
imgSnapshotTest(
`block-beta
columns 1
block
id1
id2
block
columns 1
id3("Wider then")
id5(("id5"))
end
end
id4
`,
{}
);
});
it('BL6: should handle block arrows and spece statements', () => {
imgSnapshotTest(
`block-beta
columns 3
space:3
ida idb idc
id1 id2
blockArrowId<["Label"]>(right)
blockArrowId2<["Label"]>(left)
blockArrowId3<["Label"]>(up)
blockArrowId4<["Label"]>(down)
blockArrowId5<["Label"]>(x)
blockArrowId6<["Label"]>(y)
blockArrowId6<["Label"]>(x, down)
`,
{}
);
});
it('BL7: should handle different types of edges', () => {
imgSnapshotTest(
`block-beta
columns 3
A space:5
A --o B
A --> C
A --x D
`,
{}
);
});
it('BL8: should handle sub-blocks without columns statements', () => {
imgSnapshotTest(
`block-beta
columns 2
C A B
block
D
E
end
`,
{}
);
});
it('BL9: should handle edges from blocks in sub blocks to other blocks', () => {
imgSnapshotTest(
`block-beta
columns 3
B space
block
D
end
D --> B
`,
{}
);
});
it('BL10: should handle edges from composite blocks', () => {
imgSnapshotTest(
`block-beta
columns 3
B space
block BL
D
end
BL --> B
`,
{}
);
});
it('BL11: should handle edges to composite blocks', () => {
imgSnapshotTest(
`block-beta
columns 3
B space
block BL
D
end
B --> BL
`,
{}
);
});
it('BL12: edges should handle labels', () => {
imgSnapshotTest(
`block-beta
A
space
A -- "apa" --> E
`,
{}
);
});
it('BL13: should handle block arrows in different directions', () => {
imgSnapshotTest(
`block-beta
columns 3
space blockArrowId1<["down"]>(down) space
blockArrowId2<["right"]>(right) blockArrowId3<["Sync"]>(x, y) blockArrowId4<["left"]>(left)
space blockArrowId5<["up"]>(up) space
blockArrowId6<["x"]>(x) space blockArrowId7<["y"]>(y)
`,
{}
);
});
it('BL14: should style statements and class statements', () => {
imgSnapshotTest(
`block-beta
A
B
classDef blue fill:#66f,stroke:#333,stroke-width:2px;
class A blue
style B fill:#f9F,stroke:#333,stroke-width:4px
`,
{}
);
});
it('BL15: width alignment - D and E should share available space', () => {
imgSnapshotTest(
`block-beta
block
D
E
end
db("This is the text in the box")
`,
{}
);
});
it('BL16: width alignment - C should be as wide as the composite block', () => {
imgSnapshotTest(
`block-beta
block
A("This is the text")
B
end
C
`,
{}
);
});
it('BL16: width alignment - blocks shold be equal in width', () => {
imgSnapshotTest(
`block-beta
A("This is the text")
B
C
`,
{}
);
});
it('BL17: block types 1 - square, rounded and circle', () => {
imgSnapshotTest(
`block-beta
A["square"]
B("rounded")
C(("circle"))
`,
{}
);
});
it('BL18: block types 2 - odd, diamond and hexagon', () => {
imgSnapshotTest(
`block-beta
A>"rect_left_inv_arrow"]
B{"diamond"}
C{{"hexagon"}}
`,
{}
);
});
it('BL19: block types 3 - stadium', () => {
imgSnapshotTest(
`block-beta
A(["stadium"])
`,
{}
);
});
it('BL20: block types 4 - lean right, lean left, trapezoid and inv trapezoid', () => {
imgSnapshotTest(
`block-beta
A[/"lean right"/]
B[\"lean left"\]
C[/"trapezoid"\]
D[\"trapezoid alt"/]
`,
{}
);
});
it('BL21: block types 1 - square, rounded and circle', () => {
imgSnapshotTest(
`block-beta
A["square"]
B("rounded")
C(("circle"))
`,
{}
);
});
});

187
cypress/platform/knsv2.html
View File

@@ -64,184 +64,45 @@
<body>
<pre id="diagram" class="mermaid2">
block-beta
columns 3
space blockArrowId1<["down"]>(down) space
blockArrowId2<["right"]>(right) blockArrowId3<["Sync"]>(x, y) blockArrowId4<["left"]>(left)
space blockArrowId5<["up"]>(up) space
blockArrowId6<["x"]>(x) space blockArrowId7<["y"]>(y)
A["square"]
B("rounded")
C(("circle"))
</pre>
<pre id="diagram" class="mermaid2">
block-beta
A>"rect_left_inv_arrow"]
B{"diamond"}
C{{"hexagon"}}
</pre>
<pre id="diagram" class="mermaid2">
block-beta
A(["stadium"])
</pre>
<pre id="diagram" class="mermaid">
block-beta
columns 3
space Browser space
space:3
A
B
C
space:3
space
db{{"This is the text in the box"}}
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
style B fill:#f9F,stroke:#333,stroke-width:4px
class A green
Browser --> A
Browser --> B
Browser --> C
A --> db
B --> db
C--> db
block
D
E
end
%% A[["subroutine"]]
%% B[("cylinder")]
C>"surprise"]
</pre>
<pre id="diagram" class="mermaid2">
block-beta
A[/"lean right"/]
B[\"lean left"\]
C[/"trapezoid"\]
D[\"trapezoid"/]
</pre>
<pre id="diagram" class="mermaid2">
flowchart
B
style B fill:#f9F,stroke:#333,stroke-width:4px
</pre>
<pre id="diagram" class="mermaid2">
block-beta
columns 3
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
A
space
block
E
F
end
E -- "apa" --> A
</pre>
<pre id="diagram" class="mermaid2">
block-beta
columns 3
C space A space B
B --> A
B --> C
block
D
E
end
E --> A
</pre>
<pre id="diagram" class="mermaid2">
block-beta
columns 2
C A B
block
D
E
end
</pre>
<pre id="diagram" class="mermaid2">
block-beta
columns 2
A B C D
A --o B
A --> C
</pre>
<pre id="diagram" class="mermaid2">
block-beta
columns 3
space:3
ida idb idc
id1 id2
blockArrowId<["Label"]>(right)
blockArrowId2<["Label"]>(left)
blockArrowId3<["Label"]>(up)
blockArrowId4<["Label"]>(down)
blockArrowId5<["Label"]>(x)
blockArrowId6<["Label"]>(y)
blockArrowId6<["Label"]>(x, down)
</pre>
<pre id="diagram" class="mermaid2">
block-beta
columns 1
block
id1
id2
block
columns 1
id3("Wider then")
id5(("id5"))
end
end
id4
</pre>
<pre id="diagram" class="mermaid2">
block-beta
columns 1
block
columns 1
block
columns 3
id1
id2
id2.1(("XYZ"))
%%id2.2
end
id48
end
id3
%% id3
%% id4
%% block
%% columns 2
%% id2
%% id3
%% end
</pre>
<pre id="diagram" class="mermaid2">
block-beta
block
columns 1
id1
id2
%%id2.1
end
id3
%% id3
%% id4
%% block
%% columns 2
%% id2
%% id3
%% end
</pre>
<pre id="diagram" class="mermaid2">
flowchart LR
a1 -- apa --> b1
</pre>
<pre id="diagram" class="mermaid2">
block-beta
id1["Hello"]
block
columns 3
id2["to"]
id3["the"]
id4["World"]
id5["World"]
end
</pre>
<pre id="diagram" class="mermaid2">
block-beta
columns 2
block
id2["I am a wide one"]
id1
end
id[Next row]
</pre>
<pre id="diagram" class="mermaid2">
flowchart RL
subgraph "`one`"

45
packages/mermaid/src/diagrams/block/parser/block.jison
View File

@@ -86,27 +86,49 @@ accDescr\s*"{"\s* { this.pushState("acc_descr_mul
.*direction\s+RL[^\n]* return 'direction_rl';
.*direction\s+LR[^\n]* return 'direction_lr';
// Node end of shape
<NODE>"(((" { this.popState();yy.getLogger().info('Lex: (('); return "NODE_DEND"; }
<NODE>")))" { this.popState();yy.getLogger().info('Lex: (('); return "NODE_DEND"; }
<NODE>[\)]\) { this.popState();yy.getLogger().info('Lex: ))'); return "NODE_DEND"; }
<NODE>"}}" { this.popState();yy.getLogger().info('Lex: (('); return "NODE_DEND"; }
<NODE>"}" { this.popState();yy.getLogger().info('Lex: (('); return "NODE_DEND"; }
<NODE>"(-" { this.popState();yy.getLogger().info('Lex: (-'); return "NODE_DEND"; }
<NODE>"-)" { this.popState();yy.getLogger().info('Lex: -)'); return "NODE_DEND"; }
<NODE>"((" { this.popState();yy.getLogger().info('Lex: (('); return "NODE_DEND"; }
<NODE>"]]" { this.popState();yy.getLogger().info('Lex: ]]'); return "NODE_DEND"; }
<NODE>"(" { this.popState();yy.getLogger().info('Lex: ('); return "NODE_DEND"; }
<NODE>"])" { this.popState();yy.getLogger().info('Lex: ])'); return "NODE_DEND"; }
<NODE>"\\]" { this.popState();yy.getLogger().info('Lex: /]'); return "NODE_DEND"; }
<NODE>"/]" { this.popState();yy.getLogger().info('Lex: /]'); return "NODE_DEND"; }
<NODE>")]" { this.popState();yy.getLogger().info('Lex: )]'); return "NODE_DEND"; }
<NODE>[\)] { this.popState();yy.getLogger().info('Lex: )'); return "NODE_DEND"; }
<NODE>\]\> { this.popState();yy.getLogger().info('Lex: ]>'); return "NODE_DEND"; }
<NODE>[\]] { this.popState();yy.getLogger().info('Lex: ]'); return "NODE_DEND"; }
// Start of nodes with shapes and description
"-)" { yy.getLogger().info('Lexa: -)'); this.pushState('NODE');return 'NODE_DSTART'; }
"(-" { yy.getLogger().info('Lexa: (-'); this.pushState('NODE');return 'NODE_DSTART'; }
"))" { yy.getLogger().info('Lexa: ))'); this.pushState('NODE');return 'NODE_DSTART'; }
")" { yy.getLogger().info('Lexa: )'); this.pushState('NODE');return 'NODE_DSTART'; }
"(((" { yy.getLogger().info('Lex: ((('); this.pushState('NODE');return 'NODE_DSTART'; }
"((" { yy.getLogger().info('Lexa: )'); this.pushState('NODE');return 'NODE_DSTART'; }
"{{" { yy.getLogger().info('Lexa: )'); this.pushState('NODE');return 'NODE_DSTART'; }
"(" { yy.getLogger().info('Lexa: )'); this.pushState('NODE');return 'NODE_DSTART'; }
"[" { yy.getLogger().info('Lexa: ['); this.pushState('NODE');return 'NODE_DSTART'; }
"{" { yy.getLogger().info('Lexa: )'); this.pushState('NODE');return 'NODE_DSTART'; }
">" { yy.getLogger().info('Lexc: >'); this.pushState('NODE');return 'NODE_DSTART'; }
"([" { yy.getLogger().info('Lexa: (['); this.pushState('NODE');return 'NODE_DSTART'; }
"(" { yy.getLogger().info('Lexa: )'); this.pushState('NODE');return 'NODE_DSTART'; }
"[[" { this.pushState('NODE');return 'NODE_DSTART'; }
"[|" { this.pushState('NODE');return 'NODE_DSTART'; }
"[(" { this.pushState('NODE');return 'NODE_DSTART'; }
"(((" { this.pushState('NODE');return 'NODE_DSTART'; }
")))" { this.pushState('NODE');return 'NODE_DSTART'; }
"[\\" { this.pushState('NODE');return 'NODE_DSTART'; }
"[/" { this.pushState('NODE');return 'NODE_DSTART'; }
"[\\" { this.pushState('NODE');return 'NODE_DSTART'; }
"[" { yy.getLogger().info('Lexa: ['); this.pushState('NODE');return 'NODE_DSTART'; }
"<[" { this.pushState('BLOCK_ARROW');yy.getLogger().debug('LEX ARR START');return 'BLOCK_ARROW_START'; }
[^\(\[\n\-\)\{\}\s\<]+ { yy.getLogger().info('Lex: NODE_ID', yytext);return 'NODE_ID'; }
[^\(\[\n\-\)\{\}\s\<\>]+ { yy.getLogger().info('Lex: NODE_ID', yytext);return 'NODE_ID'; }
<<EOF>> { yy.getLogger().info('Lex: EOF', yytext);return 'EOF'; }
// Handling of strings in node
@@ -119,21 +141,6 @@ accDescr\s*"{"\s* { this.pushState("acc_descr_mul
<string>[^"]+ { yy.getLogger().debug('LEX: NODE_DESCR:', yytext); return "NODE_DESCR";}
<string>["] {yy.getLogger().debug('LEX POPPING');this.popState();}
// Node end of shape
<NODE>\]\> { this.popState();yy.getLogger().info('Lex: ]>'); return "NODE_DEND"; }
<NODE>[\)]\) { this.popState();yy.getLogger().info('Lex: ))'); return "NODE_DEND"; }
<NODE>[\)] { this.popState();yy.getLogger().info('Lex: )'); return "NODE_DEND"; }
<NODE>[\]] { this.popState();yy.getLogger().info('Lex: ]'); return "NODE_DEND"; }
<NODE>"}}" { this.popState();yy.getLogger().info('Lex: (('); return "NODE_DEND"; }
<NODE>"(-" { this.popState();yy.getLogger().info('Lex: (-'); return "NODE_DEND"; }
<NODE>"-)" { this.popState();yy.getLogger().info('Lex: -)'); return "NODE_DEND"; }
<NODE>"((" { this.popState();yy.getLogger().info('Lex: (('); return "NODE_DEND"; }
<NODE>"(" { this.popState();yy.getLogger().info('Lex: ('); return "NODE_DEND"; }
<NODE>"])" { this.popState();yy.getLogger().info('Lex: ])'); return "NODE_DEND"; }
<NODE>"]]" { this.popState();yy.getLogger().info('Lex: ]]'); return "NODE_DEND"; }
<NODE>"/]" { this.popState();yy.getLogger().info('Lex: /]'); return "NODE_DEND"; }
<NODE>")]" { this.popState();yy.getLogger().info('Lex: )]'); return "NODE_DEND"; }
<BLOCK_ARROW>"]>"\s*"(" { yy.getLogger().debug('Lex: =>BAE'); this.pushState('ARROW_DIR'); }
<ARROW_DIR>","?\s*right\s* { yytext = yytext.replace(/^,\s*/, ''); yy.getLogger().debug('Lex (right): dir:',yytext);return "DIR"; }
<ARROW_DIR>","?\s*left\s* { yytext = yytext.replace(/^,\s*/, ''); yy.getLogger().debug('Lex (left):',yytext);return "DIR"; }

2
packages/mermaid/src/diagrams/block/renderHelpers.ts
View File

@@ -71,7 +71,7 @@ function getNodeFromBlock(block: Block, db: BlockDB, positioned = false) {
case 'inv_trapezoid':
_shape = 'inv_trapezoid';
break;
case 'odd_right':
case 'rect_left_inv_arrow':
_shape = 'rect_left_inv_arrow';
break;
case 'circle':