From 46419f7bfe7a08aaef79bbef01ad74402a585ccc Mon Sep 17 00:00:00 2001 From: Sparsh Prashant Mishra Date: Wed, 2 Oct 2024 12:38:11 -0500 Subject: [PATCH 1/3] Added section about merging blocks horizontally. --- packages/mermaid/src/docs/syntax/block.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/mermaid/src/docs/syntax/block.md b/packages/mermaid/src/docs/syntax/block.md index 7c5907dc7e..431038faa5 100644 --- a/packages/mermaid/src/docs/syntax/block.md +++ b/packages/mermaid/src/docs/syntax/block.md @@ -85,6 +85,15 @@ block-beta This syntax instructs Mermaid to arrange the blocks 'a', 'b', 'c', and 'd' across three columns, wrapping to the next row as needed. This feature is particularly useful for representing layered or multi-tiered systems, such as network layers or hierarchical structures. +**Merging Blocks Horizontally:** +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 + columns 1 + a["A label"] b c d +``` + These basic building blocks of Mermaid's block diagrams provide a foundation for more complex diagramming. The simplicity of the syntax allows for quick creation and iteration of diagrams, making it an efficient tool for visualizing ideas and concepts. In the next section, we'll explore advanced block configuration options, including setting block widths and creating composite blocks. ## 3. Advanced Block Configuration From 2cebf09cf24215d3ce9ffa2aea2f4fcb5c35b3f6 Mon Sep 17 00:00:00 2001 From: Sparsh Prashant Mishra Date: Wed, 2 Oct 2024 12:48:17 -0500 Subject: [PATCH 2/3] Updated code to show nested blocks and added it to the correct section. --- packages/mermaid/src/docs/syntax/block.md | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/packages/mermaid/src/docs/syntax/block.md b/packages/mermaid/src/docs/syntax/block.md index 431038faa5..6483c0ed5c 100644 --- a/packages/mermaid/src/docs/syntax/block.md +++ b/packages/mermaid/src/docs/syntax/block.md @@ -85,15 +85,6 @@ block-beta This syntax instructs Mermaid to arrange the blocks 'a', 'b', 'c', and 'd' across three columns, wrapping to the next row as needed. This feature is particularly useful for representing layered or multi-tiered systems, such as network layers or hierarchical structures. -**Merging Blocks Horizontally:** -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 - columns 1 - a["A label"] b c d -``` - These basic building blocks of Mermaid's block diagrams provide a foundation for more complex diagramming. The simplicity of the syntax allows for quick creation and iteration of diagrams, making it an efficient tool for visualizing ideas and concepts. In the next section, we'll explore advanced block configuration options, including setting block widths and creating composite blocks. ## 3. Advanced Block Configuration @@ -162,6 +153,18 @@ block-beta 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. +**Merging Blocks Horizontally:** +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 + columns 1 + a["A label"] b c d + end +``` +In this example, the width of the merged block dynamically adjusts to the width of the largest child block. + With these advanced configuration options, Mermaid's block diagrams can be tailored to represent a wide array of complex systems and structures. The flexibility offered by these features enables users to create diagrams that are both informative and visually appealing. In the following sections, we will explore further capabilities, including different block shapes and linking options. ## 4. Block Varieties and Shapes From d50a6cf75c6cc28e234edec5c27e4d01325e266a Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Wed, 2 Oct 2024 17:58:15 +0000 Subject: [PATCH 3/3] [autofix.ci] apply automated fixes --- docs/syntax/block.md | 21 +++++++++++++++++++++ packages/mermaid/src/docs/syntax/block.md | 1 + 2 files changed, 22 insertions(+) diff --git a/docs/syntax/block.md b/docs/syntax/block.md index df367fab1e..d11d2285c8 100644 --- a/docs/syntax/block.md +++ b/docs/syntax/block.md @@ -211,6 +211,27 @@ block-beta 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. +**Merging Blocks Horizontally:** +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 + columns 1 + a["A label"] b c d + end +``` + +```mermaid +block-beta + block + columns 1 + a["A label"] b c d + end +``` + +In this example, the width of the merged block dynamically adjusts to the width of the largest child block. + With these advanced configuration options, Mermaid's block diagrams can be tailored to represent a wide array of complex systems and structures. The flexibility offered by these features enables users to create diagrams that are both informative and visually appealing. In the following sections, we will explore further capabilities, including different block shapes and linking options. ## 4. Block Varieties and Shapes diff --git a/packages/mermaid/src/docs/syntax/block.md b/packages/mermaid/src/docs/syntax/block.md index 6483c0ed5c..b281a8b195 100644 --- a/packages/mermaid/src/docs/syntax/block.md +++ b/packages/mermaid/src/docs/syntax/block.md @@ -163,6 +163,7 @@ block-beta a["A label"] b c d end ``` + In this example, the width of the merged block dynamically adjusts to the width of the largest child block. With these advanced configuration options, Mermaid's block diagrams can be tailored to represent a wide array of complex systems and structures. The flexibility offered by these features enables users to create diagrams that are both informative and visually appealing. In the following sections, we will explore further capabilities, including different block shapes and linking options.