diff --git a/cypress/integration/rendering/block.spec.ts b/cypress/integration/rendering/block.spec.ts
new file mode 100644
index 000000000..d43c8db10
--- /dev/null
+++ b/cypress/integration/rendering/block.spec.ts
@@ -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"))
+ `,
+ {}
+ );
+ });
+});
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 5dc87325c..d84557ffe 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -64,184 +64,45 @@
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"))
+
+
+block-beta
+ A>"rect_left_inv_arrow"]
+ B{"diamond"}
+ C{{"hexagon"}}
+
+
+block-beta
+ A(["stadium"])
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"]
+
+block-beta
+ A[/"lean right"/]
+ B[\"lean left"\]
+ C[/"trapezoid"\]
+ D[\"trapezoid"/]
+
+
flowchart
B
style B fill:#f9F,stroke:#333,stroke-width:4px
-
-block-beta
- columns 3
- classDef green fill:#9f6,stroke:#333,stroke-width:2px;
- A
- space
- block
- E
- F
- end
- E -- "apa" --> A
-
-
-block-beta
- columns 3
- C space A space B
- B --> A
- B --> C
- block
- D
- E
- end
- E --> A
-
-
-block-beta
- columns 2
- C A B
- block
- D
- E
- end
-
-
-block-beta
- columns 2
- A B C D
- A --o B
- A --> C
-
-
-
-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)
-
-
-block-beta
- columns 1
- block
- id1
- id2
- block
- columns 1
- id3("Wider then")
- id5(("id5"))
- end
- end
- id4
-
-
-
-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
-
-
-block-beta
- block
- columns 1
- id1
- id2
- %%id2.1
- end
- id3
-%% id3
-%% id4
- %% block
- %% columns 2
- %% id2
- %% id3
- %% end
-
flowchart LR
a1 -- apa --> b1
-
-block-beta
- id1["Hello"]
- block
- columns 3
- id2["to"]
- id3["the"]
- id4["World"]
- id5["World"]
- end
-
-
-block-beta
- columns 2
- block
- id2["I am a wide one"]
- id1
- end
- id[Next row]
-
-
flowchart RL
subgraph "`one`"
diff --git a/packages/mermaid/src/diagrams/block/parser/block.jison b/packages/mermaid/src/diagrams/block/parser/block.jison
index 86faa1d84..be4bed809 100644
--- a/packages/mermaid/src/diagrams/block/parser/block.jison
+++ b/packages/mermaid/src/diagrams/block/parser/block.jison
@@ -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
+"(((" { this.popState();yy.getLogger().info('Lex: (('); return "NODE_DEND"; }
+")))" { this.popState();yy.getLogger().info('Lex: (('); return "NODE_DEND"; }
+[\)]\) { this.popState();yy.getLogger().info('Lex: ))'); return "NODE_DEND"; }
+"}}" { this.popState();yy.getLogger().info('Lex: (('); return "NODE_DEND"; }
+"}" { this.popState();yy.getLogger().info('Lex: (('); return "NODE_DEND"; }
+"(-" { this.popState();yy.getLogger().info('Lex: (-'); return "NODE_DEND"; }
+"-)" { this.popState();yy.getLogger().info('Lex: -)'); return "NODE_DEND"; }
+"((" { this.popState();yy.getLogger().info('Lex: (('); return "NODE_DEND"; }
+"]]" { this.popState();yy.getLogger().info('Lex: ]]'); return "NODE_DEND"; }
+"(" { this.popState();yy.getLogger().info('Lex: ('); return "NODE_DEND"; }
+"])" { this.popState();yy.getLogger().info('Lex: ])'); return "NODE_DEND"; }
+"\\]" { this.popState();yy.getLogger().info('Lex: /]'); return "NODE_DEND"; }
+"/]" { this.popState();yy.getLogger().info('Lex: /]'); return "NODE_DEND"; }
+")]" { this.popState();yy.getLogger().info('Lex: )]'); return "NODE_DEND"; }
+[\)] { this.popState();yy.getLogger().info('Lex: )'); return "NODE_DEND"; }
+\]\> { this.popState();yy.getLogger().info('Lex: ]>'); return "NODE_DEND"; }
+[\]] { 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'; }
<> { 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
[^"]+ { yy.getLogger().debug('LEX: NODE_DESCR:', yytext); return "NODE_DESCR";}
["] {yy.getLogger().debug('LEX POPPING');this.popState();}
-// Node end of shape
-\]\> { this.popState();yy.getLogger().info('Lex: ]>'); return "NODE_DEND"; }
-[\)]\) { this.popState();yy.getLogger().info('Lex: ))'); return "NODE_DEND"; }
-[\)] { this.popState();yy.getLogger().info('Lex: )'); return "NODE_DEND"; }
-[\]] { this.popState();yy.getLogger().info('Lex: ]'); return "NODE_DEND"; }
-"}}" { this.popState();yy.getLogger().info('Lex: (('); return "NODE_DEND"; }
-"(-" { this.popState();yy.getLogger().info('Lex: (-'); return "NODE_DEND"; }
-"-)" { this.popState();yy.getLogger().info('Lex: -)'); return "NODE_DEND"; }
-"((" { this.popState();yy.getLogger().info('Lex: (('); return "NODE_DEND"; }
-"(" { this.popState();yy.getLogger().info('Lex: ('); return "NODE_DEND"; }
-"])" { this.popState();yy.getLogger().info('Lex: ])'); return "NODE_DEND"; }
-"]]" { this.popState();yy.getLogger().info('Lex: ]]'); return "NODE_DEND"; }
-"/]" { this.popState();yy.getLogger().info('Lex: /]'); return "NODE_DEND"; }
-")]" { this.popState();yy.getLogger().info('Lex: )]'); return "NODE_DEND"; }
-
"]>"\s*"(" { yy.getLogger().debug('Lex: =>BAE'); this.pushState('ARROW_DIR'); }
","?\s*right\s* { yytext = yytext.replace(/^,\s*/, ''); yy.getLogger().debug('Lex (right): dir:',yytext);return "DIR"; }
","?\s*left\s* { yytext = yytext.replace(/^,\s*/, ''); yy.getLogger().debug('Lex (left):',yytext);return "DIR"; }
diff --git a/packages/mermaid/src/diagrams/block/renderHelpers.ts b/packages/mermaid/src/diagrams/block/renderHelpers.ts
index 130f031ca..117959796 100644
--- a/packages/mermaid/src/diagrams/block/renderHelpers.ts
+++ b/packages/mermaid/src/diagrams/block/renderHelpers.ts
@@ -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':