diff --git a/cypress/integration/rendering/block.spec.js b/cypress/integration/rendering/block.spec.js
index 589a30fde..12843f2a2 100644
--- a/cypress/integration/rendering/block.spec.js
+++ b/cypress/integration/rendering/block.spec.js
@@ -16,7 +16,7 @@ describe('Block diagram', () => {
it('BL2: should handle columns statement in sub-blocks', () => {
imgSnapshotTest(
- `block-beta
+ `block
id1["Hello"]
block
columns 3
@@ -32,7 +32,7 @@ describe('Block diagram', () => {
it('BL3: should align block widths and handle columns statement in sub-blocks', () => {
imgSnapshotTest(
- `block-beta
+ `block
block
columns 1
id1
@@ -48,7 +48,7 @@ describe('Block diagram', () => {
it('BL4: should align block widths and handle columns statements in deeper sub-blocks then 1 level', () => {
imgSnapshotTest(
- `block-beta
+ `block
columns 1
block
columns 1
@@ -68,7 +68,7 @@ describe('Block diagram', () => {
it('BL5: should align block widths and handle columns statements in deeper sub-blocks then 1 level (alt)', () => {
imgSnapshotTest(
- `block-beta
+ `block
columns 1
block
id1
@@ -87,7 +87,7 @@ describe('Block diagram', () => {
it('BL6: should handle block arrows and spece statements', () => {
imgSnapshotTest(
- `block-beta
+ `block
columns 3
space:3
ida idb idc
@@ -106,7 +106,7 @@ describe('Block diagram', () => {
it('BL7: should handle different types of edges', () => {
imgSnapshotTest(
- `block-beta
+ `block
columns 3
A space:5
A --o B
@@ -119,7 +119,7 @@ describe('Block diagram', () => {
it('BL8: should handle sub-blocks without columns statements', () => {
imgSnapshotTest(
- `block-beta
+ `block
columns 2
C A B
block
@@ -133,7 +133,7 @@ describe('Block diagram', () => {
it('BL9: should handle edges from blocks in sub blocks to other blocks', () => {
imgSnapshotTest(
- `block-beta
+ `block
columns 3
B space
block
@@ -147,7 +147,7 @@ describe('Block diagram', () => {
it('BL10: should handle edges from composite blocks', () => {
imgSnapshotTest(
- `block-beta
+ `block
columns 3
B space
block BL
@@ -161,7 +161,7 @@ describe('Block diagram', () => {
it('BL11: should handle edges to composite blocks', () => {
imgSnapshotTest(
- `block-beta
+ `block
columns 3
B space
block BL
@@ -175,7 +175,7 @@ describe('Block diagram', () => {
it('BL12: edges should handle labels', () => {
imgSnapshotTest(
- `block-beta
+ `block
A
space
A -- "apa" --> E
@@ -186,7 +186,7 @@ describe('Block diagram', () => {
it('BL13: should handle block arrows in different directions', () => {
imgSnapshotTest(
- `block-beta
+ `block
columns 3
space blockArrowId1<["down"]>(down) space
blockArrowId2<["right"]>(right) blockArrowId3<["Sync"]>(x, y) blockArrowId4<["left"]>(left)
@@ -199,7 +199,7 @@ describe('Block diagram', () => {
it('BL14: should style statements and class statements', () => {
imgSnapshotTest(
- `block-beta
+ `block
A
B
classDef blue fill:#66f,stroke:#333,stroke-width:2px;
@@ -212,7 +212,7 @@ describe('Block diagram', () => {
it('BL15: width alignment - D and E should share available space', () => {
imgSnapshotTest(
- `block-beta
+ `block
block
D
E
@@ -225,7 +225,7 @@ describe('Block diagram', () => {
it('BL16: width alignment - C should be as wide as the composite block', () => {
imgSnapshotTest(
- `block-beta
+ `block
block
A("This is the text")
B
@@ -238,7 +238,7 @@ describe('Block diagram', () => {
it('BL17: width alignment - blocks should be equal in width', () => {
imgSnapshotTest(
- `block-beta
+ `block
A("This is the text")
B
C
@@ -249,7 +249,7 @@ describe('Block diagram', () => {
it('BL18: block types 1 - square, rounded and circle', () => {
imgSnapshotTest(
- `block-beta
+ `block
A["square"]
B("rounded")
C(("circle"))
@@ -260,7 +260,7 @@ describe('Block diagram', () => {
it('BL19: block types 2 - odd, diamond and hexagon', () => {
imgSnapshotTest(
- `block-beta
+ `block
A>"rect_left_inv_arrow"]
B{"diamond"}
C{{"hexagon"}}
@@ -271,7 +271,7 @@ describe('Block diagram', () => {
it('BL20: block types 3 - stadium', () => {
imgSnapshotTest(
- `block-beta
+ `block
A(["stadium"])
`,
{}
@@ -280,7 +280,7 @@ describe('Block diagram', () => {
it('BL21: block types 4 - lean right, lean left, trapezoid and inv trapezoid', () => {
imgSnapshotTest(
- `block-beta
+ `block
A[/"lean right"/]
B[\"lean left"\]
C[/"trapezoid"\]
@@ -292,7 +292,7 @@ describe('Block diagram', () => {
it('BL22: block types 1 - square, rounded and circle', () => {
imgSnapshotTest(
- `block-beta
+ `block
A["square"]
B("rounded")
C(("circle"))
@@ -303,7 +303,7 @@ describe('Block diagram', () => {
it('BL23: sizing - it should be possible to make a block wider', () => {
imgSnapshotTest(
- `block-beta
+ `block
A("rounded"):2
B:2
C
@@ -314,7 +314,7 @@ describe('Block diagram', () => {
it('BL24: sizing - it should be possible to make a composite block wider', () => {
imgSnapshotTest(
- `block-beta
+ `block
block:2
A
end
@@ -326,7 +326,7 @@ describe('Block diagram', () => {
it('BL25: block in the middle with space on each side', () => {
imgSnapshotTest(
- `block-beta
+ `block
columns 3
space
middle["In the middle"]
@@ -337,7 +337,7 @@ describe('Block diagram', () => {
});
it('BL26: space and an edge', () => {
imgSnapshotTest(
- `block-beta
+ `block
columns 5
A space B
A --x B
@@ -347,7 +347,7 @@ describe('Block diagram', () => {
});
it('BL27: block sizes for regular blocks', () => {
imgSnapshotTest(
- `block-beta
+ `block
columns 3
a["A wide one"] b:2 c:2 d
`,
@@ -356,7 +356,7 @@ describe('Block diagram', () => {
});
it('BL28: composite block with a set width - f should use the available space', () => {
imgSnapshotTest(
- `block-beta
+ `block
columns 3
a:3
block:e:3
@@ -370,7 +370,7 @@ describe('Block diagram', () => {
it('BL29: composite block with a set width - f and g should split the available space', () => {
imgSnapshotTest(
- `block-beta
+ `block
columns 3
a:3
block:e:3
diff --git a/demos/block.html b/demos/block.html
index f0957b670..5296126e0 100644
--- a/demos/block.html
+++ b/demos/block.html
@@ -10,7 +10,7 @@
Block diagram demos
-block-beta
+block
columns 1
db(("DB"))
blockArrowId6<[" "]>(down)
@@ -26,7 +26,7 @@ columns 1
style B fill:#f9F,stroke:#333,stroke-width:4px
-block-beta
+block
A1["square"]
B1("rounded")
C1(("circle"))
@@ -36,7 +36,7 @@ block-beta
-block-beta
+block
A1(["stadium"])
A2[["subroutine"]]
B1[("cylinder")]
@@ -48,7 +48,7 @@ block-beta
-block-beta
+block
block:e:4
columns 2
f
@@ -57,7 +57,7 @@ block-beta
-block-beta
+block
block:e:4
columns 2
f
@@ -67,7 +67,7 @@ block-beta
-block-beta
+block
columns 3
a:3
block:e:3
@@ -80,7 +80,7 @@ block-beta
-block-beta
+block
columns 4
a b c d
block:e:4
@@ -97,19 +97,19 @@ flowchart LR
X-- "a label" -->z
-block-beta
+block
columns 5
A space B
A --x B
-block-beta
+block
columns 3
a["A wide one"] b:2 c:2 d
-block-beta
+block
columns 3
a b c
e:3
@@ -117,7 +117,7 @@ columns 3
-block-beta
+block
A1:3
A2:1
diff --git a/docs/syntax/block.md b/docs/syntax/block.md
index d711a2c92..5ca0db719 100644
--- a/docs/syntax/block.md
+++ b/docs/syntax/block.md
@@ -9,7 +9,7 @@
## Introduction to Block Diagrams
```mermaid-example
-block-beta
+block
columns 1
db(("DB"))
blockArrowId6<[" "]>(down)
@@ -26,7 +26,7 @@ columns 1
```
```mermaid
-block-beta
+block
columns 1
db(("DB"))
blockArrowId6<[" "]>(down)
@@ -80,12 +80,12 @@ At its core, a block diagram consists of blocks representing different entities
To create a simple block diagram with three blocks labeled 'a', 'b', and 'c', the syntax is as follows:
```mermaid-example
-block-beta
+block
a b c
```
```mermaid
-block-beta
+block
a b c
```
@@ -101,13 +101,13 @@ While simple block diagrams are linear and straightforward, more complex systems
In scenarios where you need to distribute blocks across multiple columns, you can specify the number of columns and arrange the blocks accordingly. Here's how to create a block diagram with three columns and four blocks, where the fourth block appears in a second row:
```mermaid-example
-block-beta
+block
columns 3
a b c d
```
```mermaid
-block-beta
+block
columns 3
a b c d
```
@@ -130,13 +130,13 @@ In more complex diagrams, you may need blocks that span multiple columns to emph
To create a block diagram where one block spans across two columns, you can specify the desired width for each block:
```mermaid-example
-block-beta
+block
columns 3
a["A label"] b:2 c:2 d
```
```mermaid
-block-beta
+block
columns 3
a["A label"] b:2 c:2 d
```
@@ -153,7 +153,7 @@ Composite blocks, or blocks within blocks, are an advanced feature in Mermaid's
Creating a composite block involves defining a parent block and then nesting other blocks within it. Here's how to define a composite block with nested elements:
```mermaid-example
-block-beta
+block
block
D
end
@@ -161,7 +161,7 @@ block-beta
```
```mermaid
-block-beta
+block
block
D
end
@@ -180,7 +180,7 @@ Mermaid also allows for dynamic adjustment of column widths based on the content
In diagrams with varying block sizes, Mermaid automatically adjusts the column widths to fit the largest block in each column. Here's an example:
```mermaid-example
-block-beta
+block
columns 3
a:3
block:group1:2
@@ -195,7 +195,7 @@ block-beta
```
```mermaid
-block-beta
+block
columns 3
a:3
block:group1:2
@@ -215,7 +215,7 @@ This example demonstrates how Mermaid dynamically adjusts the width of the colum
In scenarios where you need to stack blocks horizontally, you can use column width to accomplish the task. Blocks can be arranged vertically by putting them in a single column. Here is how you can create a block diagram in which 4 blocks are stacked on top of each other:
```mermaid-example
-block-beta
+block
block
columns 1
a["A label"] b c d
@@ -223,7 +223,7 @@ block-beta
```
```mermaid
-block-beta
+block
block
columns 1
a["A label"] b c d
@@ -247,12 +247,12 @@ Mermaid supports a range of block shapes to suit different diagramming needs, fr
To create a block with round edges, which can be used to represent a softer or more flexible component:
```mermaid-example
-block-beta
+block
id1("This is the text in the box")
```
```mermaid
-block-beta
+block
id1("This is the text in the box")
```
@@ -261,12 +261,12 @@ block-beta
A stadium-shaped block, resembling an elongated circle, can be used for components that are process-oriented:
```mermaid-example
-block-beta
+block
id1(["This is the text in the box"])
```
```mermaid
-block-beta
+block
id1(["This is the text in the box"])
```
@@ -275,12 +275,12 @@ block-beta
For representing subroutines or contained processes, a block with double vertical lines is useful:
```mermaid-example
-block-beta
+block
id1[["This is the text in the box"]]
```
```mermaid
-block-beta
+block
id1[["This is the text in the box"]]
```
@@ -289,12 +289,12 @@ block-beta
The cylindrical shape is ideal for representing databases or storage components:
```mermaid-example
-block-beta
+block
id1[("Database")]
```
```mermaid
-block-beta
+block
id1[("Database")]
```
@@ -303,12 +303,12 @@ block-beta
A circle can be used for centralized or pivotal components:
```mermaid-example
-block-beta
+block
id1(("This is the text in the circle"))
```
```mermaid
-block-beta
+block
id1(("This is the text in the circle"))
```
@@ -319,36 +319,36 @@ For decision points, use a rhombus, and for unique or specialized processes, asy
**Asymmetric**
```mermaid-example
-block-beta
+block
id1>"This is the text in the box"]
```
```mermaid
-block-beta
+block
id1>"This is the text in the box"]
```
**Rhombus**
```mermaid-example
-block-beta
+block
id1{"This is the text in the box"}
```
```mermaid
-block-beta
+block
id1{"This is the text in the box"}
```
**Hexagon**
```mermaid-example
-block-beta
+block
id1{{"This is the text in the box"}}
```
```mermaid
-block-beta
+block
id1{{"This is the text in the box"}}
```
@@ -357,7 +357,7 @@ block-beta
Parallelogram and trapezoid shapes are perfect for inputs/outputs and transitional processes:
```mermaid-example
-block-beta
+block
id1[/"This is the text in the box"/]
id2[\"This is the text in the box"\]
A[/"Christmas"\]
@@ -365,7 +365,7 @@ block-beta
```
```mermaid
-block-beta
+block
id1[/"This is the text in the box"/]
id2[\"This is the text in the box"\]
A[/"Christmas"\]
@@ -377,12 +377,12 @@ block-beta
For highlighting critical or high-priority components, a double circle can be effective:
```mermaid-example
-block-beta
+block
id1((("This is the text in the circle")))
```
```mermaid
-block-beta
+block
id1((("This is the text in the circle")))
```
@@ -395,7 +395,7 @@ Mermaid also offers unique shapes like block arrows and space blocks for directi
Block arrows can visually indicate direction or flow within a process:
```mermaid-example
-block-beta
+block
blockArrowId<["Label"]>(right)
blockArrowId2<["Label"]>(left)
blockArrowId3<["Label"]>(up)
@@ -406,7 +406,7 @@ block-beta
```
```mermaid
-block-beta
+block
blockArrowId<["Label"]>(right)
blockArrowId2<["Label"]>(left)
blockArrowId3<["Label"]>(up)
@@ -421,14 +421,14 @@ block-beta
Space blocks can be used to create intentional empty spaces in the diagram, which is useful for layout and readability:
```mermaid-example
-block-beta
+block
columns 3
a space b
c d e
```
```mermaid
-block-beta
+block
columns 3
a space b
c d e
@@ -437,12 +437,12 @@ block-beta
or
```mermaid-example
-block-beta
+block
ida space:3 idb idc
```
```mermaid
-block-beta
+block
ida space:3 idb idc
```
@@ -467,13 +467,13 @@ The most fundamental aspect of connecting blocks is the use of arrows or links.
A simple link with an arrow can be created to show direction or flow from one block to another:
```mermaid-example
-block-beta
+block
A space B
A-->B
```
```mermaid
-block-beta
+block
A space B
A-->B
```
@@ -490,13 +490,13 @@ Example - Text with Links
To add text to a link, the syntax includes the text within the link definition:
```mermaid-example
-block-beta
+block
A space:2 B
A-- "X" -->B
```
```mermaid
-block-beta
+block
A space:2 B
A-- "X" -->B
```
@@ -506,7 +506,7 @@ This example show how to add descriptive text to the links, enhancing the inform
Example - Edges and Styles:
```mermaid-example
-block-beta
+block
columns 1
db(("DB"))
blockArrowId6<[" "]>(down)
@@ -523,7 +523,7 @@ columns 1
```
```mermaid
-block-beta
+block
columns 1
db(("DB"))
blockArrowId6<[" "]>(down)
@@ -552,7 +552,7 @@ Mermaid enables detailed styling of individual blocks, allowing you to apply var
To apply custom styles to a block, you can use the `style` keyword followed by the block identifier and the desired CSS properties:
```mermaid-example
-block-beta
+block
id1 space id2
id1("Start")-->id2("Stop")
style id1 fill:#636,stroke:#333,stroke-width:4px
@@ -560,7 +560,7 @@ block-beta
```
```mermaid
-block-beta
+block
id1 space id2
id1("Start")-->id2("Stop")
style id1 fill:#636,stroke:#333,stroke-width:4px
@@ -574,7 +574,7 @@ Mermaid enables applying styling to classes, which could make styling easier if
#### Example - Styling a Single Class
```mermaid-example
-block-beta
+block
A space B
A-->B
classDef blue fill:#6e6ce6,stroke:#333,stroke-width:4px;
@@ -583,7 +583,7 @@ block-beta
```
```mermaid
-block-beta
+block
A space B
A-->B
classDef blue fill:#6e6ce6,stroke:#333,stroke-width:4px;
@@ -608,7 +608,7 @@ Combining the elements of structure, linking, and styling, we can create compreh
Illustrating a simple software system architecture with interconnected components:
```mermaid-example
-block-beta
+block
columns 3
Frontend blockArrowId6<[" "]>(right) Backend
space:2 down<[" "]>(down)
@@ -621,7 +621,7 @@ block-beta
```
```mermaid
-block-beta
+block
columns 3
Frontend blockArrowId6<[" "]>(right) Backend
space:2 down<[" "]>(down)
@@ -640,7 +640,7 @@ This example shows a basic architecture with a frontend, backend, and database.
Representing a business process flow with decision points and multiple stages:
```mermaid-example
-block-beta
+block
columns 3
Start(("Start")) space:2
down<[" "]>(down) space:2
@@ -653,7 +653,7 @@ block-beta
```
```mermaid
-block-beta
+block
columns 3
Start(("Start")) space:2
down<[" "]>(down) space:2
@@ -682,7 +682,7 @@ Understanding and avoiding common syntax errors is key to a smooth experience wi
A common mistake is incorrect linking syntax, which can lead to unexpected results or broken diagrams:
```
-block-beta
+block
A - B
```
@@ -690,13 +690,13 @@ block-beta
Ensure that links between blocks are correctly specified with arrows (--> or ---) to define the direction and type of connection. Also remember that one of the fundamentals for block diagram is to give the author full control of where the boxes are positioned so in the example you need to add a space between the boxes:
```mermaid-example
-block-beta
+block
A space B
A --> B
```
```mermaid
-block-beta
+block
A space B
A --> B
```
@@ -706,13 +706,13 @@ block-beta
Applying styles in the wrong context or with incorrect syntax can lead to blocks not being styled as intended:
```mermaid-example
- block-beta
+ block
A
style A fill#969;
```
```mermaid
- block-beta
+ block
A
style A fill#969;
```
@@ -721,14 +721,14 @@ Applying styles in the wrong context or with incorrect syntax can lead to blocks
Correct the syntax by ensuring proper separation of style properties with commas and using the correct CSS property format:
```mermaid-example
-block-beta
+block
A
style A fill:#969,stroke:#333;
```
```mermaid
-block-beta
+block
A
style A fill:#969,stroke:#333;
diff --git a/packages/mermaid/src/diagrams/block/blockDetector.ts b/packages/mermaid/src/diagrams/block/blockDetector.ts
index c4da643f0..6122221e8 100644
--- a/packages/mermaid/src/diagrams/block/blockDetector.ts
+++ b/packages/mermaid/src/diagrams/block/blockDetector.ts
@@ -3,7 +3,7 @@ import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-a
const id = 'block';
const detector: DiagramDetector = (txt) => {
- return /^\s*block-beta/.test(txt);
+ return /^\s*block(-beta)?/.test(txt);
};
const loader = async () => {
diff --git a/packages/mermaid/src/diagrams/block/parser/block.jison b/packages/mermaid/src/diagrams/block/parser/block.jison
index 88bdf729e..3aa2759a6 100644
--- a/packages/mermaid/src/diagrams/block/parser/block.jison
+++ b/packages/mermaid/src/diagrams/block/parser/block.jison
@@ -36,10 +36,10 @@ CRLF \u000D\u000A
%%
-"block-beta" { return 'BLOCK_DIAGRAM_KEY'; }
-"block"\s+ { yy.getLogger().debug('Found space-block'); return 'block';}
-"block"\n+ { yy.getLogger().debug('Found nl-block'); return 'block';}
-"block:" { yy.getLogger().debug('Found space-block'); return 'id-block';}
+"block-beta" { yy.getLogger().debug('Found block-beta'); return 'BLOCK_DIAGRAM_KEY'; }
+"block:" { yy.getLogger().debug('Found id-block'); return 'id-block'; }
+"block" { yy.getLogger().debug('Found block'); return 'BLOCK_DIAGRAM_KEY'; }
+
// \s*\%\%.* { yy.getLogger().debug('Found comment',yytext); }
[\s]+ { yy.getLogger().debug('.', yytext); /* skip all whitespace */ }
[\n]+ {yy.getLogger().debug('_', yytext); /* skip all whitespace */ }
@@ -240,7 +240,7 @@ columnsStatement
blockStatement
: id-block nodeStatement document end { yy.getLogger().debug('Rule: id-block statement : ', $2, $3); const id2 = yy.generateId(); $$ = { ...$2, type:'composite', children: $3 }; }
- | block document end { yy.getLogger().debug('Rule: blockStatement : ', $1, $2, $3); const id = yy.generateId(); $$ = { id, type:'composite', label:'', children: $2 }; }
+ | BLOCK_DIAGRAM_KEY document end { yy.getLogger().debug('Rule: blockStatement : ', $1, $2, $3); const id = yy.generateId(); $$ = { id, type:'composite', label:'', children: $2 }; }
;
node
diff --git a/packages/mermaid/src/diagrams/block/parser/block.spec.ts b/packages/mermaid/src/diagrams/block/parser/block.spec.ts
index 4bf3290d8..09f3eb02a 100644
--- a/packages/mermaid/src/diagrams/block/parser/block.spec.ts
+++ b/packages/mermaid/src/diagrams/block/parser/block.spec.ts
@@ -22,7 +22,7 @@ describe('Block diagram', function () {
expect(blocks[0].label).toBe('id');
});
it('a node with a square shape and a label', () => {
- const str = `block-beta
+ const str = `block
id["A label"]
`;
@@ -34,7 +34,7 @@ describe('Block diagram', function () {
expect(blocks[0].type).toBe('square');
});
it('a diagram with multiple nodes', () => {
- const str = `block-beta
+ const str = `block
id1
id2
`;
@@ -50,7 +50,7 @@ describe('Block diagram', function () {
expect(blocks[1].type).toBe('na');
});
it('a diagram with multiple nodes', () => {
- const str = `block-beta
+ const str = `block
id1
id2
id3
@@ -71,7 +71,7 @@ describe('Block diagram', function () {
});
it('a node with a square shape and a label', () => {
- const str = `block-beta
+ const str = `block
id["A label"]
id2`;
@@ -86,7 +86,7 @@ describe('Block diagram', function () {
expect(blocks[1].type).toBe('na');
});
it('a diagram with multiple nodes with edges abc123', () => {
- const str = `block-beta
+ const str = `block
id1["first"] --> id2["second"]
`;
@@ -100,7 +100,7 @@ describe('Block diagram', function () {
expect(edges[0].arrowTypeEnd).toBe('arrow_point');
});
it('a diagram with multiple nodes with edges abc123', () => {
- const str = `block-beta
+ const str = `block
id1["first"] -- "a label" --> id2["second"]
`;
@@ -115,7 +115,7 @@ describe('Block diagram', function () {
expect(edges[0].label).toBe('a label');
});
it('a diagram with column statements', () => {
- const str = `block-beta
+ const str = `block
columns 2
block1["Block 1"]
`;
@@ -126,7 +126,7 @@ describe('Block diagram', function () {
expect(blocks.length).toBe(1);
});
it('a diagram without column statements', () => {
- const str = `block-beta
+ const str = `block
block1["Block 1"]
`;
@@ -136,7 +136,7 @@ describe('Block diagram', function () {
expect(blocks.length).toBe(1);
});
it('a diagram with auto column statements', () => {
- const str = `block-beta
+ const str = `block
columns auto
block1["Block 1"]
`;
@@ -148,7 +148,7 @@ describe('Block diagram', function () {
});
it('blocks next to each other', () => {
- const str = `block-beta
+ const str = `block
columns 2
block1["Block 1"]
block2["Block 2"]
@@ -162,7 +162,7 @@ describe('Block diagram', function () {
});
it('blocks on top of each other', () => {
- const str = `block-beta
+ const str = `block
columns 1
block1["Block 1"]
block2["Block 2"]
@@ -176,7 +176,7 @@ describe('Block diagram', function () {
});
it('compound blocks 2', () => {
- const str = `block-beta
+ const str = `block
block
aBlock["ABlock"]
bBlock["BBlock"]
@@ -204,7 +204,7 @@ describe('Block diagram', function () {
expect(bBlock.type).toBe('square');
});
it('compound blocks of compound blocks', () => {
- const str = `block-beta
+ const str = `block
block
aBlock["ABlock"]
block
@@ -239,7 +239,7 @@ describe('Block diagram', function () {
expect(bBlock.type).toBe('square');
});
it('compound blocks with title', () => {
- const str = `block-beta
+ const str = `block
block:compoundBlock["Compound block"]
columns 1
block2["Block 2"]
@@ -264,7 +264,7 @@ describe('Block diagram', function () {
expect(block2.type).toBe('square');
});
it('blocks mixed with compound blocks', () => {
- const str = `block-beta
+ const str = `block
columns 1
block1["Block 1"]
@@ -291,7 +291,7 @@ describe('Block diagram', function () {
});
it('Arrow blocks', () => {
- const str = `block-beta
+ const str = `block
columns 3
block1["Block 1"]
blockArrow<[" "]>(right)
@@ -315,7 +315,7 @@ describe('Block diagram', function () {
expect(blockArrow.directions).toContain('right');
});
it('Arrow blocks with multiple points', () => {
- const str = `block-beta
+ const str = `block
columns 1
A
blockArrow<[" "]>(up, down)
@@ -338,7 +338,7 @@ describe('Block diagram', function () {
expect(blockArrow.directions).not.toContain('right');
});
it('blocks with different widths', () => {
- const str = `block-beta
+ const str = `block
columns 3
one["One Slot"]
two["Two slots"]:2
@@ -353,7 +353,7 @@ describe('Block diagram', function () {
expect(two.widthInColumns).toBe(2);
});
it('empty blocks', () => {
- const str = `block-beta
+ const str = `block
columns 3
space
middle["In the middle"]
@@ -372,7 +372,7 @@ describe('Block diagram', function () {
expect(middle.label).toBe('In the middle');
});
it('classDef statements applied to a block', () => {
- const str = `block-beta
+ const str = `block
classDef black color:#ffffff, fill:#000000;
mc["Memcache"]
@@ -390,7 +390,7 @@ describe('Block diagram', function () {
expect(black.styles[0]).toEqual('color:#ffffff');
});
it('style statements applied to a block', () => {
- const str = `block-beta
+ const str = `block
columns 1
B["A wide one in the middle"]
style B fill:#f9F,stroke:#333,stroke-width:4px
@@ -406,9 +406,9 @@ columns 1
describe('prototype properties', function () {
function validateProperty(prop: string) {
- expect(() => block.parse(`block-beta\n${prop}`)).not.toThrow();
+ expect(() => block.parse(`block\n${prop}`)).not.toThrow();
expect(() =>
- block.parse(`block-beta\nA; classDef ${prop} color:#ffffff,fill:#000000; class A ${prop}`)
+ block.parse(`block\nA; classDef ${prop} color:#ffffff,fill:#000000; class A ${prop}`)
).not.toThrow();
}
diff --git a/packages/mermaid/src/docs/syntax/block.md b/packages/mermaid/src/docs/syntax/block.md
index ac5b53d5e..985ce1d8c 100644
--- a/packages/mermaid/src/docs/syntax/block.md
+++ b/packages/mermaid/src/docs/syntax/block.md
@@ -8,7 +8,7 @@ outline: 'deep' # shows all h3 headings in outline in Vitepress
## Introduction to Block Diagrams
```mermaid-example
-block-beta
+block
columns 1
db(("DB"))
blockArrowId6<[" "]>(down)
@@ -62,7 +62,7 @@ At its core, a block diagram consists of blocks representing different entities
To create a simple block diagram with three blocks labeled 'a', 'b', and 'c', the syntax is as follows:
```mermaid-example
-block-beta
+block
a b c
```
@@ -78,7 +78,7 @@ While simple block diagrams are linear and straightforward, more complex systems
In scenarios where you need to distribute blocks across multiple columns, you can specify the number of columns and arrange the blocks accordingly. Here's how to create a block diagram with three columns and four blocks, where the fourth block appears in a second row:
```mermaid-example
-block-beta
+block
columns 3
a b c d
```
@@ -101,7 +101,7 @@ In more complex diagrams, you may need blocks that span multiple columns to emph
To create a block diagram where one block spans across two columns, you can specify the desired width for each block:
```mermaid-example
-block-beta
+block
columns 3
a["A label"] b:2 c:2 d
```
@@ -118,7 +118,7 @@ Composite blocks, or blocks within blocks, are an advanced feature in Mermaid's
Creating a composite block involves defining a parent block and then nesting other blocks within it. Here's how to define a composite block with nested elements:
```mermaid-example
-block-beta
+block
block
D
end
@@ -137,7 +137,7 @@ Mermaid also allows for dynamic adjustment of column widths based on the content
In diagrams with varying block sizes, Mermaid automatically adjusts the column widths to fit the largest block in each column. Here's an example:
```mermaid-example
-block-beta
+block
columns 3
a:3
block:group1:2
@@ -157,7 +157,7 @@ This example demonstrates how Mermaid dynamically adjusts the width of the colum
In scenarios where you need to stack blocks horizontally, you can use column width to accomplish the task. Blocks can be arranged vertically by putting them in a single column. Here is how you can create a block diagram in which 4 blocks are stacked on top of each other:
```mermaid-example
-block-beta
+block
block
columns 1
a["A label"] b c d
@@ -181,7 +181,7 @@ Mermaid supports a range of block shapes to suit different diagramming needs, fr
To create a block with round edges, which can be used to represent a softer or more flexible component:
```mermaid-example
-block-beta
+block
id1("This is the text in the box")
```
@@ -190,7 +190,7 @@ block-beta
A stadium-shaped block, resembling an elongated circle, can be used for components that are process-oriented:
```mermaid-example
-block-beta
+block
id1(["This is the text in the box"])
```
@@ -199,7 +199,7 @@ block-beta
For representing subroutines or contained processes, a block with double vertical lines is useful:
```mermaid-example
-block-beta
+block
id1[["This is the text in the box"]]
```
@@ -208,7 +208,7 @@ block-beta
The cylindrical shape is ideal for representing databases or storage components:
```mermaid-example
-block-beta
+block
id1[("Database")]
```
@@ -217,7 +217,7 @@ block-beta
A circle can be used for centralized or pivotal components:
```mermaid-example
-block-beta
+block
id1(("This is the text in the circle"))
```
@@ -228,21 +228,21 @@ For decision points, use a rhombus, and for unique or specialized processes, asy
**Asymmetric**
```mermaid-example
-block-beta
+block
id1>"This is the text in the box"]
```
**Rhombus**
```mermaid-example
-block-beta
+block
id1{"This is the text in the box"}
```
**Hexagon**
```mermaid-example
-block-beta
+block
id1{{"This is the text in the box"}}
```
@@ -251,7 +251,7 @@ block-beta
Parallelogram and trapezoid shapes are perfect for inputs/outputs and transitional processes:
```mermaid-example
-block-beta
+block
id1[/"This is the text in the box"/]
id2[\"This is the text in the box"\]
A[/"Christmas"\]
@@ -263,7 +263,7 @@ block-beta
For highlighting critical or high-priority components, a double circle can be effective:
```mermaid-example
-block-beta
+block
id1((("This is the text in the circle")))
```
@@ -276,7 +276,7 @@ Mermaid also offers unique shapes like block arrows and space blocks for directi
Block arrows can visually indicate direction or flow within a process:
```mermaid-example
-block-beta
+block
blockArrowId<["Label"]>(right)
blockArrowId2<["Label"]>(left)
blockArrowId3<["Label"]>(up)
@@ -291,7 +291,7 @@ block-beta
Space blocks can be used to create intentional empty spaces in the diagram, which is useful for layout and readability:
```mermaid-example
-block-beta
+block
columns 3
a space b
c d e
@@ -300,7 +300,7 @@ block-beta
or
```mermaid-example
-block-beta
+block
ida space:3 idb idc
```
@@ -325,7 +325,7 @@ The most fundamental aspect of connecting blocks is the use of arrows or links.
A simple link with an arrow can be created to show direction or flow from one block to another:
```mermaid-example
-block-beta
+block
A space B
A-->B
```
@@ -342,7 +342,7 @@ Example - Text with Links
To add text to a link, the syntax includes the text within the link definition:
```mermaid-example
-block-beta
+block
A space:2 B
A-- "X" -->B
```
@@ -352,7 +352,7 @@ This example show how to add descriptive text to the links, enhancing the inform
Example - Edges and Styles:
```mermaid-example
-block-beta
+block
columns 1
db(("DB"))
blockArrowId6<[" "]>(down)
@@ -381,7 +381,7 @@ Mermaid enables detailed styling of individual blocks, allowing you to apply var
To apply custom styles to a block, you can use the `style` keyword followed by the block identifier and the desired CSS properties:
```mermaid-example
-block-beta
+block
id1 space id2
id1("Start")-->id2("Stop")
style id1 fill:#636,stroke:#333,stroke-width:4px
@@ -395,7 +395,7 @@ Mermaid enables applying styling to classes, which could make styling easier if
#### Example - Styling a Single Class
```mermaid-example
-block-beta
+block
A space B
A-->B
classDef blue fill:#6e6ce6,stroke:#333,stroke-width:4px;
@@ -420,7 +420,7 @@ Combining the elements of structure, linking, and styling, we can create compreh
Illustrating a simple software system architecture with interconnected components:
```mermaid
-block-beta
+block
columns 3
Frontend blockArrowId6<[" "]>(right) Backend
space:2 down<[" "]>(down)
@@ -439,7 +439,7 @@ This example shows a basic architecture with a frontend, backend, and database.
Representing a business process flow with decision points and multiple stages:
```mermaid-example
-block-beta
+block
columns 3
Start(("Start")) space:2
down<[" "]>(down) space:2
@@ -468,7 +468,7 @@ Understanding and avoiding common syntax errors is key to a smooth experience wi
A common mistake is incorrect linking syntax, which can lead to unexpected results or broken diagrams:
```
-block-beta
+block
A - B
```
@@ -476,7 +476,7 @@ block-beta
Ensure that links between blocks are correctly specified with arrows (--> or ---) to define the direction and type of connection. Also remember that one of the fundamentals for block diagram is to give the author full control of where the boxes are positioned so in the example you need to add a space between the boxes:
```mermaid-example
-block-beta
+block
A space B
A --> B
```
@@ -486,7 +486,7 @@ block-beta
Applying styles in the wrong context or with incorrect syntax can lead to blocks not being styled as intended:
```mermaid-example
- block-beta
+ block
A
style A fill#969;
```
@@ -495,7 +495,7 @@ Applying styles in the wrong context or with incorrect syntax can lead to blocks
Correct the syntax by ensuring proper separation of style properties with commas and using the correct CSS property format:
```mermaid-example
-block-beta
+block
A
style A fill:#969,stroke:#333;