marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-25 02:09:50 +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>
<pre id="diagram" class="mermaid">
block-beta
a space:2 c
a-- "b" --> c
columns 3
a:3
block:e:3
f
end
g
</pre>
<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
X-- "y" -->z
</pre>

74
docs/syntax/block.md
View File

@@ -326,7 +326,7 @@ block-beta
Parallelogram and trapezoid shapes are perfect for inputs/outputs and transitional processes:
```mermaid-example
flowchart TD
block-beta
id1[/"This is the text in the box"/]
id2[\"This is the text in the box"\]
A[/"Christmas"\]
@@ -334,7 +334,7 @@ flowchart TD
```
```mermaid
flowchart TD
block-beta
id1[/"This is the text in the box"/]
id2[\"This is the text in the box"\]
A[/"Christmas"\]
@@ -346,12 +346,12 @@ flowchart TD
For highlighting critical or high-priority components, a double circle can be effective:
```mermaid-example
flowchart TD
block-beta
id1((("This is the text in the circle")))
```
```mermaid
flowchart TD
block-beta
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:
```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
block-beta
space:3
@@ -435,21 +451,6 @@ block-beta
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.
### 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.
### 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:
```mermaid-example
@@ -575,9 +557,9 @@ Illustrating a simple software system architecture with interconnected component
```mermaid-example
block-beta
columns 3
Frontend blockArrowId6<["&nbsp;&nbsp;"]>(right) Backend
space:2 down<["&nbsp;&nbsp;"]>(down)
Disk left<["&nbsp;&nbsp;"]>(left) Database[("Database")]
Frontend blockArrowId6<[" "]>(right) Backend
space:2 down<[" "]>(down)
Disk left<[" "]>(left) Database[("Database")]
classDef front fill:#696,stroke:#333;
classDef back fill:#969,stroke:#333;
@@ -588,9 +570,9 @@ block-beta
```mermaid
block-beta
columns 3
Frontend blockArrowId6<["&nbsp;&nbsp;"]>(right) Backend
space:2 down<["&nbsp;&nbsp;"]>(down)
Disk left<["&nbsp;&nbsp;"]>(left) Database[("Database")]
Frontend blockArrowId6<[" "]>(right) Backend
space:2 down<[" "]>(down)
Disk left<[" "]>(left) Database[("Database")]
classDef front fill:#696,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
columns 3
Start(("Start")) space:2
down<["&nbsp;&nbsp;"]>(down) space:2
down<[" "]>(down) space:2
Decision{{"Make Decision"}} right<["Yes"]>(right) Process1["Process A"]
downAgain<["No"]>(down) space r3<["Done"]>(down)
Process2["Process B"] r2<["Done"]>(right) End(("End"))
@@ -622,7 +604,7 @@ block-beta
block-beta
columns 3
Start(("Start")) space:2
down<["&nbsp;&nbsp;"]>(down) space:2
down<[" "]>(down) space:2
Decision{{"Make Decision"}} right<["Yes"]>(right) Process1["Process A"]
downAgain<["No"]>(down) space r3<["Done"]>(down)
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;
// 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) {
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) {
if (child.size) {
child.size.width = childWidth;
@@ -264,7 +264,8 @@ function layoutBlocks(block: Block, db: BlockDB) {
const { px, py } = calculateBlockPosition(columns, columnPos);
if (py != rowPos) {
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(
'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: 'Quadrant Chart', link: '/syntax/quadrantChart' },
{ 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: 'Mindmaps 🔥', link: '/syntax/mindmap' },
{ text: 'Timeline 🔥', link: '/syntax/timeline' },
{ text: 'Zenuml 🔥', link: '/syntax/zenuml' },
{ text: 'Sankey 🔥', link: '/syntax/sankey' },
{ text: 'Mindmaps', link: '/syntax/mindmap' },
{ text: 'Timeline', link: '/syntax/timeline' },
{ text: 'Zenuml', link: '/syntax/zenuml' },
{ text: 'Sankey', link: '/syntax/sankey' },
{ text: 'XYChart 🔥', link: '/syntax/xyChart' },
{ text: 'Block Diagram 🔥', link: '/syntax/block' },
{ text: 'Other Examples', link: '/syntax/examples' },
],
},

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

@@ -233,7 +233,7 @@ block-beta
Parallelogram and trapezoid shapes are perfect for inputs/outputs and transitional processes:
```mermaid-example
flowchart TD
block-beta
id1[/"This is the text in the box"/]
id2[\"This is the text in the box"\]
A[/"Christmas"\]
@@ -245,7 +245,7 @@ flowchart TD
For highlighting critical or high-priority components, a double circle can be effective:
```mermaid-example
flowchart TD
block-beta
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:
```mermaid-example
block-beta
columns 3
a space b
c d e
```
or
```mermaid-example
block-beta
space:3
@@ -306,15 +315,6 @@ block-beta
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.
### 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.
### 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:
```mermaid-example
@@ -403,9 +390,9 @@ Illustrating a simple software system architecture with interconnected component
```mermaid
block-beta
columns 3
Frontend blockArrowId6<["&nbsp;&nbsp;"]>(right) Backend
space:2 down<["&nbsp;&nbsp;"]>(down)
Disk left<["&nbsp;&nbsp;"]>(left) Database[("Database")]
Frontend blockArrowId6<[" "]>(right) Backend
space:2 down<[" "]>(down)
Disk left<[" "]>(left) Database[("Database")]
classDef front fill:#696,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
columns 3
Start(("Start")) space:2
down<["&nbsp;&nbsp;"]>(down) space:2
down<[" "]>(down) space:2
Decision{{"Make Decision"}} right<["Yes"]>(right) Process1["Process A"]
downAgain<["No"]>(down) space r3<["Done"]>(down)
Process2["Process B"] r2<["Done"]>(right) End(("End"))