marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-25 10:20:06 +02:00
Code Issues Packages Projects Releases Wiki Activity

#3358 Adjusting docs and a bug fix for nested blocks

Browse Source
This commit is contained in:
Knut Sveidqvist
2024-01-22 14:14:54 +01:00
parent d96425d19e
commit fe89b9510d
5 changed files with 110 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
cypress/platform/knsv2.html
View File

@@ -65,10 +65,47 @@
<body> <body>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
block-beta block-beta
a space:2 c columns 3
a-- "b" --> c a:3
block:e:3
f
end
g
</pre> </pre>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
block-beta
block:e:4
columns 2
f
g
end
</pre>
<pre id="diagram" class="mermaid">
block-beta
block:e:4
columns 2
f
g
h
end
</pre>
<pre id="diagram" class="mermaid">
block-beta
columns 4
a b c d
block:e:4
columns 2
f
g
h
end
i:4
</pre>
<pre id="diagram" class="mermaid2">
flowchart LR flowchart LR
X-- "y" -->z X-- "y" -->z
</pre> </pre>

98
docs/syntax/block.md
View File

@@ -181,22 +181,22 @@ In diagrams with varying block sizes, Mermaid automatically adjusts the column w
```mermaid-example ```mermaid-example
block-beta block-beta
columns 3 columns 3
a:3 a:3
block:e:3 block:e:3
f f
end end
g g
``` ```
```mermaid ```mermaid
block-beta block-beta
columns 3 columns 3
a:3 a:3
block:e:3 block:e:3
f f
end end
g g
``` ```
This example demonstrates how Mermaid dynamically adjusts the width of the columns to accommodate the widest block, in this case, 'a' and the composite block 'e'. This dynamic adjustment is essential for creating visually balanced and easy-to-understand diagrams. This example demonstrates how Mermaid dynamically adjusts the width of the columns to accommodate the widest block, in this case, 'a' and the composite block 'e'. This dynamic adjustment is essential for creating visually balanced and easy-to-understand diagrams.
@@ -326,7 +326,7 @@ block-beta
Parallelogram and trapezoid shapes are perfect for inputs/outputs and transitional processes: Parallelogram and trapezoid shapes are perfect for inputs/outputs and transitional processes:
```mermaid-example ```mermaid-example
flowchart TD block-beta
id1[/"This is the text in the box"/] id1[/"This is the text in the box"/]
id2[\"This is the text in the box"\] id2[\"This is the text in the box"\]
A[/"Christmas"\] A[/"Christmas"\]
@@ -334,7 +334,7 @@ flowchart TD
``` ```
```mermaid ```mermaid
flowchart TD block-beta
id1[/"This is the text in the box"/] id1[/"This is the text in the box"/]
id2[\"This is the text in the box"\] id2[\"This is the text in the box"\]
A[/"Christmas"\] A[/"Christmas"\]
@@ -346,12 +346,12 @@ flowchart TD
For highlighting critical or high-priority components, a double circle can be effective: For highlighting critical or high-priority components, a double circle can be effective:
```mermaid-example ```mermaid-example
flowchart TD block-beta
id1((("This is the text in the circle"))) id1((("This is the text in the circle")))
``` ```
```mermaid ```mermaid
flowchart TD block-beta
id1((("This is the text in the circle"))) id1((("This is the text in the circle")))
``` ```
@@ -389,6 +389,22 @@ block-beta
Space blocks can be used to create intentional empty spaces in the diagram, which is useful for layout and readability: Space blocks can be used to create intentional empty spaces in the diagram, which is useful for layout and readability:
```mermaid-example
block-beta
columns 3
a space b
c d e
```
```mermaid
block-beta
columns 3
a space b
c d e
```
or
```mermaid-example ```mermaid-example
block-beta block-beta
space:3 space:3
@@ -435,21 +451,6 @@ block-beta
This example illustrates a direct connection from block 'A' to block 'B', using a straightforward arrow. This example illustrates a direct connection from block 'A' to block 'B', using a straightforward arrow.
**Example - Open Link:**
For connections that are less direct or to represent a different type of relationship, an open link (without an arrowhead) can be used:
```mermaid-example
block-beta
A space B
A --- B
```
```mermaid
block-beta
A space B
A --- B
```
This syntax creates a line connecting 'A' and 'B', implying a relationship or connection without indicating a specific direction. This syntax creates a line connecting 'A' and 'B', implying a relationship or connection without indicating a specific direction.
### Text on Links ### Text on Links
@@ -473,25 +474,6 @@ block-beta
This example show how to add descriptive text to the links, enhancing the information conveyed by the diagram. This example show how to add descriptive text to the links, enhancing the information conveyed by the diagram.
### Advanced Link Types
Mermaid also supports various advanced link types, such as dotted lines, thick links, and different arrowheads, to represent different kinds of relationships or interactions.
**Example - Dotted and Thick Links**
A dotted link can be used to represent a weaker or less formal relationship:
```mermaid-example
block-beta
A space:2 B
A-.->B
```
```mermaid
block-beta
A space:2 B
A-.->B
```
Example - Edges and Styles: Example - Edges and Styles:
```mermaid-example ```mermaid-example
@@ -575,9 +557,9 @@ Illustrating a simple software system architecture with interconnected component
```mermaid-example ```mermaid-example
block-beta block-beta
columns 3 columns 3
Frontend blockArrowId6<["&nbsp;&nbsp;"]>(right) Backend Frontend blockArrowId6<[" "]>(right) Backend
space:2 down<["&nbsp;&nbsp;"]>(down) space:2 down<[" "]>(down)
Disk left<["&nbsp;&nbsp;"]>(left) Database[("Database")] Disk left<[" "]>(left) Database[("Database")]
classDef front fill:#696,stroke:#333; classDef front fill:#696,stroke:#333;
classDef back fill:#969,stroke:#333; classDef back fill:#969,stroke:#333;
@@ -588,9 +570,9 @@ block-beta
```mermaid ```mermaid
block-beta block-beta
columns 3 columns 3
Frontend blockArrowId6<["&nbsp;&nbsp;"]>(right) Backend Frontend blockArrowId6<[" "]>(right) Backend
space:2 down<["&nbsp;&nbsp;"]>(down) space:2 down<[" "]>(down)
Disk left<["&nbsp;&nbsp;"]>(left) Database[("Database")] Disk left<[" "]>(left) Database[("Database")]
classDef front fill:#696,stroke:#333; classDef front fill:#696,stroke:#333;
classDef back fill:#969,stroke:#333; classDef back fill:#969,stroke:#333;
@@ -608,7 +590,7 @@ Representing a business process flow with decision points and multiple stages:
block-beta block-beta
columns 3 columns 3
Start(("Start")) space:2 Start(("Start")) space:2
down<["&nbsp;&nbsp;"]>(down) space:2 down<[" "]>(down) space:2
Decision{{"Make Decision"}} right<["Yes"]>(right) Process1["Process A"] Decision{{"Make Decision"}} right<["Yes"]>(right) Process1["Process A"]
downAgain<["No"]>(down) space r3<["Done"]>(down) downAgain<["No"]>(down) space r3<["Done"]>(down)
Process2["Process B"] r2<["Done"]>(right) End(("End")) Process2["Process B"] r2<["Done"]>(right) End(("End"))
@@ -622,7 +604,7 @@ block-beta
block-beta block-beta
columns 3 columns 3
Start(("Start")) space:2 Start(("Start")) space:2
down<["&nbsp;&nbsp;"]>(down) space:2 down<[" "]>(down) space:2
Decision{{"Make Decision"}} right<["Yes"]>(right) Process1["Process A"] Decision{{"Make Decision"}} right<["Yes"]>(right) Process1["Process A"]
downAgain<["No"]>(down) space r3<["Done"]>(down) downAgain<["No"]>(down) space r3<["Done"]>(down)
Process2["Process B"] r2<["Done"]>(right) End(("End")) Process2["Process B"] r2<["Done"]>(right) End(("End"))

7
packages/mermaid/src/diagrams/block/layout.ts
View File

@@ -198,10 +198,10 @@ function setBlockSizes(block: Block, db: BlockDB, sieblingWidth = 0, sieblingHei
width = block?.size?.width || 0; width = block?.size?.width || 0;
// Grow children to fit // Grow children to fit
const num = block.children.length; const num = columns > 0 ? Math.min(block.children.length, columns) : block.children.length;
if (num > 0) { if (num > 0) {
const childWidth = (width - num * padding - padding) / num; const childWidth = (width - num * padding - padding) / num;
// log.debug('abc95 (finale calc) width', block.id, width, block.size?.width, childWidth); log.debug('abc95 (growing to fit) width', block.id, width, block.size?.width, childWidth);
for (const child of block.children) { for (const child of block.children) {
if (child.size) { if (child.size) {
child.size.width = childWidth; child.size.width = childWidth;
@@ -264,7 +264,8 @@ function layoutBlocks(block: Block, db: BlockDB) {
const { px, py } = calculateBlockPosition(columns, columnPos); const { px, py } = calculateBlockPosition(columns, columnPos);
if (py != rowPos) { if (py != rowPos) {
rowPos = py; rowPos = py;
startingPosX = block?.size?.x || -padding; startingPosX = block?.size?.x ? block?.size?.x + (-block?.size?.width / 2 || 0) : -padding;
log.debug('New row in layout for block', block.id, ' and child ', child.id, rowPos);
} }
log.debug( log.debug(
'abc89 layout blocks (child) id:', 'abc89 layout blocks (child) id:',

11
packages/mermaid/src/docs/.vitepress/config.ts
View File

@@ -147,13 +147,14 @@ function sidebarSyntax() {
{ text: 'Pie Chart', link: '/syntax/pie' }, { text: 'Pie Chart', link: '/syntax/pie' },
{ text: 'Quadrant Chart', link: '/syntax/quadrantChart' }, { text: 'Quadrant Chart', link: '/syntax/quadrantChart' },
{ text: 'Requirement Diagram', link: '/syntax/requirementDiagram' }, { text: 'Requirement Diagram', link: '/syntax/requirementDiagram' },
{ text: 'Gitgraph (Git) Diagram 🔥', link: '/syntax/gitgraph' }, { text: 'Gitgraph (Git) Diagram', link: '/syntax/gitgraph' },
{ text: 'C4 Diagram 🦺⚠️', link: '/syntax/c4' }, { text: 'C4 Diagram 🦺⚠️', link: '/syntax/c4' },
{ text: 'Mindmaps 🔥', link: '/syntax/mindmap' }, { text: 'Mindmaps', link: '/syntax/mindmap' },
{ text: 'Timeline 🔥', link: '/syntax/timeline' }, { text: 'Timeline', link: '/syntax/timeline' },
{ text: 'Zenuml 🔥', link: '/syntax/zenuml' }, { text: 'Zenuml', link: '/syntax/zenuml' },
{ text: 'Sankey 🔥', link: '/syntax/sankey' }, { text: 'Sankey', link: '/syntax/sankey' },
{ text: 'XYChart 🔥', link: '/syntax/xyChart' }, { text: 'XYChart 🔥', link: '/syntax/xyChart' },
{ text: 'Block Diagram 🔥', link: '/syntax/block' },
{ text: 'Other Examples', link: '/syntax/examples' }, { text: 'Other Examples', link: '/syntax/examples' },
], ],
}, },

55
packages/mermaid/src/docs/syntax/block.md
View File

@@ -138,12 +138,12 @@ In diagrams with varying block sizes, Mermaid automatically adjusts the column w
```mermaid-example ```mermaid-example
block-beta block-beta
columns 3 columns 3
a:3 a:3
block:e:3 block:e:3
f f
end end
g g
``` ```
This example demonstrates how Mermaid dynamically adjusts the width of the columns to accommodate the widest block, in this case, 'a' and the composite block 'e'. This dynamic adjustment is essential for creating visually balanced and easy-to-understand diagrams. This example demonstrates how Mermaid dynamically adjusts the width of the columns to accommodate the widest block, in this case, 'a' and the composite block 'e'. This dynamic adjustment is essential for creating visually balanced and easy-to-understand diagrams.
@@ -233,7 +233,7 @@ block-beta
Parallelogram and trapezoid shapes are perfect for inputs/outputs and transitional processes: Parallelogram and trapezoid shapes are perfect for inputs/outputs and transitional processes:
```mermaid-example ```mermaid-example
flowchart TD block-beta
id1[/"This is the text in the box"/] id1[/"This is the text in the box"/]
id2[\"This is the text in the box"\] id2[\"This is the text in the box"\]
A[/"Christmas"\] A[/"Christmas"\]
@@ -245,7 +245,7 @@ flowchart TD
For highlighting critical or high-priority components, a double circle can be effective: For highlighting critical or high-priority components, a double circle can be effective:
```mermaid-example ```mermaid-example
flowchart TD block-beta
id1((("This is the text in the circle"))) id1((("This is the text in the circle")))
``` ```
@@ -272,6 +272,15 @@ block-beta
Space blocks can be used to create intentional empty spaces in the diagram, which is useful for layout and readability: Space blocks can be used to create intentional empty spaces in the diagram, which is useful for layout and readability:
```mermaid-example
block-beta
columns 3
a space b
c d e
```
or
```mermaid-example ```mermaid-example
block-beta block-beta
space:3 space:3
@@ -306,15 +315,6 @@ block-beta
This example illustrates a direct connection from block 'A' to block 'B', using a straightforward arrow. This example illustrates a direct connection from block 'A' to block 'B', using a straightforward arrow.
**Example - Open Link:**
For connections that are less direct or to represent a different type of relationship, an open link (without an arrowhead) can be used:
```mermaid-example
block-beta
A space B
A --- B
```
This syntax creates a line connecting 'A' and 'B', implying a relationship or connection without indicating a specific direction. This syntax creates a line connecting 'A' and 'B', implying a relationship or connection without indicating a specific direction.
### Text on Links ### Text on Links
@@ -332,19 +332,6 @@ block-beta
This example show how to add descriptive text to the links, enhancing the information conveyed by the diagram. This example show how to add descriptive text to the links, enhancing the information conveyed by the diagram.
### Advanced Link Types
Mermaid also supports various advanced link types, such as dotted lines, thick links, and different arrowheads, to represent different kinds of relationships or interactions.
**Example - Dotted and Thick Links**
A dotted link can be used to represent a weaker or less formal relationship:
```mermaid-example
block-beta
A space:2 B
A-.->B
```
Example - Edges and Styles: Example - Edges and Styles:
```mermaid-example ```mermaid-example
@@ -403,9 +390,9 @@ Illustrating a simple software system architecture with interconnected component
```mermaid ```mermaid
block-beta block-beta
columns 3 columns 3
Frontend blockArrowId6<["&nbsp;&nbsp;"]>(right) Backend Frontend blockArrowId6<[" "]>(right) Backend
space:2 down<["&nbsp;&nbsp;"]>(down) space:2 down<[" "]>(down)
Disk left<["&nbsp;&nbsp;"]>(left) Database[("Database")] Disk left<[" "]>(left) Database[("Database")]
classDef front fill:#696,stroke:#333; classDef front fill:#696,stroke:#333;
classDef back fill:#969,stroke:#333; classDef back fill:#969,stroke:#333;
@@ -423,7 +410,7 @@ Representing a business process flow with decision points and multiple stages:
block-beta block-beta
columns 3 columns 3
Start(("Start")) space:2 Start(("Start")) space:2
down<["&nbsp;&nbsp;"]>(down) space:2 down<[" "]>(down) space:2
Decision{{"Make Decision"}} right<["Yes"]>(right) Process1["Process A"] Decision{{"Make Decision"}} right<["Yes"]>(right) Process1["Process A"]
downAgain<["No"]>(down) space r3<["Done"]>(down) downAgain<["No"]>(down) space r3<["Done"]>(down)
Process2["Process B"] r2<["Done"]>(right) End(("End")) Process2["Process B"] r2<["Done"]>(right) End(("End"))