marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-14 04:49:44 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' into knsv/mindmap-refactoring

Browse Source
This commit is contained in:
darshanr0107
2025-08-13 14:07:02 +05:30
committed by GitHub
parent a6d26ef6c3 bf3ca9d1ef
commit a906adce26
56 changed files with 1157 additions and 432 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
docs/syntax/block.md
View File

@@ -9,7 +9,7 @@
## Introduction to Block Diagrams
```mermaid-example
block-beta
block
columns 1
db(("DB"))
blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
@@ -26,7 +26,7 @@ columns 1
```
```mermaid
block-beta
block
columns 1
db(("DB"))
blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(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<["&nbsp;&nbsp;&nbsp;"]>(down)
@@ -523,7 +523,7 @@ columns 1
```
```mermaid
block-beta
block
columns 1
db(("DB"))
blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(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;

5
docs/syntax/pie.md
View File

@@ -37,6 +37,11 @@ Drawing a pie chart is really simple in mermaid.
- Followed by `:` colon as separator
- Followed by `positive numeric value` (supported up to two decimal places)
**Note:**
> Pie chart values must be **positive numbers greater than zero**.\
> **Negative values are not allowed** and will result in an error.
\[pie] \[showData] (OPTIONAL)
\[title] \[titlevalue] (OPTIONAL)
"\[datakey1]" : \[dataValue1]

22
docs/syntax/sankey.md
View File

@@ -23,7 +23,7 @@ config:
sankey:
showValues: false
---
sankey-beta
sankey
Agricultural 'waste',Bio-conversion,124.729
Bio-conversion,Liquid,0.597
@@ -101,7 +101,7 @@ config:
sankey:
showValues: false
---
sankey-beta
sankey
Agricultural 'waste',Bio-conversion,124.729
Bio-conversion,Liquid,0.597
@@ -175,7 +175,7 @@ Wind,Electricity grid,289.366
## Syntax
The idea behind syntax is that a user types `sankey-beta` keyword first, then pastes raw CSV below and get the result.
The idea behind syntax is that a user types `sankey` keyword first, then pastes raw CSV below and get the result.
It implements CSV standard as [described here](https://www.ietf.org/rfc/rfc4180.txt) with subtle **differences**:
@@ -187,7 +187,7 @@ It implements CSV standard as [described here](https://www.ietf.org/rfc/rfc4180.
It is implied that 3 columns inside CSV should represent `source`, `target` and `value` accordingly:
```mermaid-example
sankey-beta
sankey
%% source,target,value
Electricity grid,Over generation / exports,104.453
@@ -196,7 +196,7 @@ Electricity grid,H2 conversion,27.14
```
```mermaid
sankey-beta
sankey
%% source,target,value
Electricity grid,Over generation / exports,104.453
@@ -209,7 +209,7 @@ Electricity grid,H2 conversion,27.14
CSV does not support empty lines without comma delimiters by default. But you can add them if needed:
```mermaid-example
sankey-beta
sankey
Bio-conversion,Losses,26.862
@@ -219,7 +219,7 @@ Bio-conversion,Gas,81.144
```
```mermaid
sankey-beta
sankey
Bio-conversion,Losses,26.862
@@ -233,14 +233,14 @@ Bio-conversion,Gas,81.144
If you need to have a comma, wrap it in double quotes:
```mermaid-example
sankey-beta
sankey
Pumped heat,"Heating and cooling, homes",193.026
Pumped heat,"Heating and cooling, commercial",70.672
```
```mermaid
sankey-beta
sankey
Pumped heat,"Heating and cooling, homes",193.026
Pumped heat,"Heating and cooling, commercial",70.672
@@ -251,14 +251,14 @@ Pumped heat,"Heating and cooling, commercial",70.672
If you need to have double quote, put a pair of them inside quoted string:
```mermaid-example
sankey-beta
sankey
Pumped heat,"Heating and cooling, ""homes""",193.026
Pumped heat,"Heating and cooling, ""commercial""",70.672
```
```mermaid
sankey-beta
sankey
Pumped heat,"Heating and cooling, ""homes""",193.026
Pumped heat,"Heating and cooling, ""commercial""",70.672

16
docs/syntax/xyChart.md
View File

@@ -13,7 +13,7 @@
## Example
```mermaid-example
xychart-beta
xychart
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
@@ -22,7 +22,7 @@ xychart-beta
```
```mermaid
xychart-beta
xychart
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
@@ -40,7 +40,7 @@ xychart-beta
The chart can be drawn horizontal or vertical, default value is vertical.
```
xychart-beta horizontal
xychart horizontal
...
```
@@ -51,7 +51,7 @@ The title is a short description of the chart and it will always render on top o
#### Example
```
xychart-beta
xychart
title "This is a simple example"
...
```
@@ -98,10 +98,10 @@ A bar chart offers the capability to graphically depict bars.
#### Simplest example
The only two things required are the chart name (`xychart-beta`) and one data set. So you will be able to draw a chart with a simple config like
The only two things required are the chart name (`xychart`) and one data set. So you will be able to draw a chart with a simple config like
```
xychart-beta
xychart
line [+1.3, .6, 2.4, -.34]
```
@@ -176,7 +176,7 @@ config:
xyChart:
titleColor: "#ff0000"
---
xychart-beta
xychart
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
@@ -195,7 +195,7 @@ config:
xyChart:
titleColor: "#ff0000"
---
xychart-beta
xychart
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000