diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index 22820680d..8c6bf8a63 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -65,10 +65,47 @@ 
 block-beta
-  a space:2 c
-  a-- "b" --> c
+columns 3
+a:3
+block:e:3
+f
+end
+g
+
     
+block-beta
+  block:e:4
+    columns 2
+      f
+      g
+  end
+
+
+ 
+block-beta
+  block:e:4
+    columns 2
+      f
+      g
+      h
+  end
+
+
+ 
+block-beta
+  columns 4
+  a b c d
+  block:e:4
+    columns 2
+      f
+      g
+      h
+  end
+  i:4
+
+
+ 
 flowchart LR
   X-- "y" -->z
diff --git a/docs/syntax/block.md b/docs/syntax/block.md index c33f31301..638aa34b6 100644 --- a/docs/syntax/block.md +++ b/docs/syntax/block.md @@ -181,22 +181,22 @@ In diagrams with varying block sizes, Mermaid automatically adjusts the column w ```mermaid-example block-beta -columns 3 -a:3 -block:e:3 -f -end -g + columns 3 + a:3 + block:e:3 + f + end + g ``` ```mermaid block-beta -columns 3 -a:3 -block:e:3 -f -end -g + columns 3 + a:3 + block:e:3 + f + end + 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. @@ -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<["  "]>(right) Backend - space:2 down<["  "]>(down) - Disk left<["  "]>(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<["  "]>(right) Backend - space:2 down<["  "]>(down) - Disk left<["  "]>(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<["  "]>(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<["  "]>(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")) diff --git a/packages/mermaid/src/diagrams/block/layout.ts b/packages/mermaid/src/diagrams/block/layout.ts index f3ecd0254..629d87083 100644 --- a/packages/mermaid/src/diagrams/block/layout.ts +++ b/packages/mermaid/src/diagrams/block/layout.ts @@ -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:', diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts index f5647e3c3..4a383b68d 100644 --- a/packages/mermaid/src/docs/.vitepress/config.ts +++ b/packages/mermaid/src/docs/.vitepress/config.ts @@ -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' }, ], }, diff --git a/packages/mermaid/src/docs/syntax/block.md b/packages/mermaid/src/docs/syntax/block.md index 9186d68c6..c80492a2f 100644 --- a/packages/mermaid/src/docs/syntax/block.md +++ b/packages/mermaid/src/docs/syntax/block.md @@ -138,12 +138,12 @@ In diagrams with varying block sizes, Mermaid automatically adjusts the column w ```mermaid-example block-beta -columns 3 -a:3 -block:e:3 -f -end -g + columns 3 + a:3 + block:e:3 + f + end + 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. @@ -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<["  "]>(right) Backend - space:2 down<["  "]>(down) - Disk left<["  "]>(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<["  "]>(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"))