Basic definition
A flowchart is composed of nodes (geometric shapes) and links (arrows or lines). The Mermaid code defines how nodes and links are constructed, and supports multiple arrow types, multi-directional arrows, and arbitrary links to subgraphs.
Warning If you use the word "end" in a flowchart node, capitalize the first letter or the whole word (for example: "End" or "END"); entering "end" in all lowercase will cause the flowchart to fail.
Warning If you use the letter "o" or "x" as the first character when connecting flowchart nodes, add a space before the letter or capitalize the letter (for example: "dev--- ops", "dev---Ops").
A node (default)
Copy
Embed
---
title: Node
---
flowchart LR
id
The id is the content displayed in the box.
For the flowchart creation syntax, in addition to using flowchart, you can also use graph.
A node with custom text
You can also set text for a box that differs from the id. If you do this several times, the system uses the text specified last for that node. Furthermore, if a link is defined for the node later, the text definition can be omitted; the previously defined text will be used when rendering the box.
Copy
Embed
---
title: Node with text
---
flowchart LR
id1[This is the text in the box]
Unicode text
Wrap the Unicode text in double quotes.
Copy
Embed
flowchart LR
id["This ❤ Unicode"]
Markdown format
Wrap the Markdown text in double quotes and backticks
Copy
Embed
flowchart LR
markdown["`This **is** _Markdown_`"]
newLines["`Line1
Line 2
Line 3`"]
markdown --> newLines
Direction
Declares the direction of the flowchart
Indicates that the flowchart is arranged from top to bottom (TD or TB)
Copy
Embed
flowchart TD
Start --> Stop
Flowchart directions include:
- TB - Top to bottom
- TD - Top-down (same as top to bottom)
- BT - Bottom to top
- RL - Right to left
- LR - Left to right
Node shapes
Rounded rectangle
Copy
Embed
flowchart LR
id1(This is the text in the box)
Stadium shape
Copy
Embed
flowchart LR
id1([This is the text in the box])
Subprocess
Copy
Embed
flowchart LR
id1[[This is the text in the box]]
Database
Copy
Embed
flowchart LR
id1[(Database)]
Circle
Copy
Embed
flowchart LR
id1((This is the text in the circle))
Asymmetric shape
Copy
Embed
flowchart LR
id1>This is the text in the box]
Diamond
Copy
Embed
flowchart LR
id1{This is the text in the box}
Hexagon
Copy
Embed
flowchart LR
id1{{This is the text in the box}}
Parallelogram
Copy
Embed
flowchart TD
id1[/This is the text in the box/]
Reverse parallelogram
Copy
Embed
flowchart TD
id1[\This is the text in the box\]
Trapezoid
Copy
Embed
flowchart TD
A[/ProcessOn\]
Inverted trapezoid
Copy
Embed
flowchart TD
B[\ProcessOn/]
Double circle
Copy
Embed
flowchart TD
id1(((This is the text in the circle)))
Mermaid flowchart node shape extensions
Mermaid introduces 30 new shapes to enhance the flexibility and precision of flowchart creation. These new shapes provide more options for visually representing processes, decisions, events, data storage, and other elements in a flowchart, thereby improving clarity and semantic meaning.
New syntax for shape definition
Mermaid now supports a general syntax for defining shape types to accommodate the growing number of shapes. This syntax allows you to specify a particular shape for a node using a clear and flexible format.
Copy
Embed
A@{ shape: rect }
This syntax creates node A as a rectangle. It renders the same way as [A] or A.
Complete list of node shapes
The following is a complete list of the newly introduced node shapes along with their corresponding meanings, short names, and aliases:
| Semantic name | Graph syntax | Syntax short name | Syntax alternative | Detailed description |
|---|---|---|---|---|
| Card | Notched Rectangle | notch-rect | card, notched-rectangle | Represents a card |
| Sort | Hourglass | hourglass | collate | Represents a sort operation |
| Communication link | Lightning Bolt | bolt | com-link, lightning-bolt | Communication link |
| Note | Curly Brace | brace | brace-l, comment | Adds a note |
| Note on the right | Curly Brace | brace-r | Adds a note | |
| Note with braces on both sides | Curly Braces | braces | Adds a note | |
| Data input or output | Lean Right | lean-r | in-out, lean-right | Represents input or output |
| Data input or output | Lean Left | lean-l | lean-left, out-in | Represents output or input |
| Database | Cylinder | cyl | cylinder, database, db | Database storage |
| Decision | Diamond | diam | decision, diamond, question | Decision step |
| Delay | Half-Rounded Rectangle | delay | half-rounded-rectangle | Represents a delay |
| Direct access storage | Horizontal Cylinder | h-cyl | das, horizontal-cylinder | Direct access storage |
| Disk storage | Lined Cylinder | lin-cyl | disk, lined-cylinder | Disk storage |
| Display | Curved Trapezoid | curv-trap | curved-trapezoid, display | Represents information displayed on a screen, terminal, or similar device |
| Split process | Divided Rectangle | div-rect | div-proc, divided-process, divided-rectangle | Split process shape |
| Document | Document | doc | document | Represents a document |
| Event | Rounded Rectangle | rounded | event | Represents an event |
| Extract | Triangle | tri | extract, triangle | Extraction process |
| Fork/merge | Filled Rectangle | fork | join | A fork or merge in a flowchart |
| Internal storage | Window Pane | win-pane | internal-storage, window-pane | Internal storage |
| Connection point | Filled Circle | f-circ | filled-circle, junction | Connection point |
| Document with line | Lined Document | lin-doc | lined-document | Document with line |
| Line/shadow process | Lined Rectangle | lin-rect | lin-proc, lined-process, lined-rectangle, shaded-process | A process shape with lines |
| Loop limit | Trapezoidal Pentagon | notch-pent | loop-limit, notched-pentagon | Loop limit step |
| Manual file | Flipped Triangle | flip-tri | flipped-triangle, manual-file | Manual file operation |
| Manual input | Sloped Rectangle | sl-rect | manual-input, sloped-rectangle | Manual input step |
| Manual operation | Trapezoid Base Top | trap-t | inv-trapezoid, manual, trapezoid-top | Represents a manual task |
| Multi-document | Stacked Document | docs | documents, st-doc, stacked-document | 多个文档 |
| Multi-process | Stacked Rectangle | st-rect | processes, procs, stacked-rectangle | 多个进程 |
| Irregular shape | Odd | odd | Irregular shape | |
| Paper tape | Flag | flag | paper-tape | Paper tape |
| Prepare conditional | Hexagon | hex | hexagon, prepare | Prepare or conditional step |
| Priority action | Trapezoid Base Bottom | trap-b | priority, trapezoid, trapezoid-bottom | Priority action |
| Process | Rectangle | rect | proc, process, rectangle | Standard process shape |
| Start | Circle | circle | circ | Start point |
| Start | Small Circle | sm-circ | small-circle, start | Small circle start |
| Stop | Double Circle | dbl-circ | double-circle | Represents a stop point |
| Stop | Framed Circle | fr-circ | framed-circle, stop | Represents a stop point |
| Stored data | Bow Tie Rectangle | bow-rect | bow-tie-rectangle, stored-data | Stored data |
| Subprocess | Framed Rectangle | fr-rect | framed-rectangle, subproc, subprocess, subroutine | Subprocess, subroutine |
| Summary | Crossed Circle | cross-circ | crossed-circle, summary | Summary |
| Tagged document | Tagged Document | tag-doc | tagged-document | Tagged document |
| Standard process | Tagged Rectangle | tag-rect | tag-proc, tagged-process, tagged-rectangle | 已标准进程 |
| End point | Stadium | stadium | pill, terminal | End point |
| Text block | Text Block | text | Text block |
The following is a flowchart code example using the newly introduced shapes:
Copy
Embed
flowchart RL
A@{ shape: manual-file, label: "File Handling"}
B@{ shape: manual-input, label: "User Input"}
C@{ shape: docs, label: "Multiple Documents"}
D@{ shape: procs, label: "Process Automation"}
E@{ shape: paper-tape, label: "Paper Records"}
Process
Copy
Embed
flowchart TD
A@{ shape: rect, label: "This is a process" }
Event
Copy
Embed
flowchart TD
A@{ shape: rounded, label: "This is an event" }
Subprocess
Copy
Embed
flowchart TD
A@{ shape: subproc, label: "This is a subprocess" }
Database (cylinder)
Copy
Embed
flowchart TD
A@{ shape: cyl, label: "Database" }
Start (circle)
Copy
Embed
flowchart TD
A@{ shape: circle, label: "Start" }
Irregular shape
Copy
Embed
flowchart TD
A@{ shape: odd, label: "Odd shape" }
Decision (diamond)
Copy
Embed
flowchart TD
A@{ shape: diamond, label: "Decision" }
Prepare conditional (hexagon)
Copy
Embed
flowchart TD
A@{ shape: hex, label: "Prepare conditional" }
Data input/output (tilted right)
Copy
Embed
flowchart TD
A@{ shape: lean-r, label: "Input/Output" }
Data input/output (tilted left)
Copy
Embed
flowchart TD
A@{ shape: lean-l, label: "Input/Output" }
Priority action (trapezoid)
Copy
Embed
flowchart TD
A@{ shape: trap-b, label: "Priority action" }
Manual operation (inverted trapezoid)
Copy
Embed
flowchart TD
A@{ shape: trap-t, label: "Manual operation" }
Stop (double circle)
Copy
Embed
flowchart TD
A@{ shape: dbl-circ, label: "Stop" }
Text block
Copy
Embed
flowchart TD
A@{ shape: text, label: "This is a text block" }
Card (notched rectangle)
Copy
Embed
flowchart TD
A@{ shape: notch-rect, label: "Card" }
Line/shadow process
Copy
Embed
flowchart TD
A@{ shape: lin-rect, label: "Lined process" }
Start (small circle)
Copy
Embed
flowchart TD
A@{ shape: sm-circ, label: "Small start" }
Stop (circle with frame)
Copy
Embed
flowchart TD
A@{ shape: framed-circle, label: "Stop" }
Fork/merge (long rectangle)
Copy
Embed
flowchart TD
A@{ shape: fork, label: "Fork or Join" }
Sort (hourglass)
Copy
Embed
flowchart TD
A@{ shape: hourglass, label: "Collate" }
Note (braces)
Copy
Embed
flowchart TD
A@{ shape: comment, label: "Comment" }
Note right (brace on the right)
Copy
Embed
flowchart TD
A@{ shape: brace-r, label: "Comment" }
Note (braces on both sides)
Copy
Embed
flowchart TD
A@{ shape: braces, label: "Comment" }
Communication link (lightning)
Copy
Embed
flowchart TD
A@{ shape: bolt, label: "Communication link" }
Document
Copy
Embed
flowchart TD
A@{ shape: doc, label: "Document" }
Delay (half rounded rectangle)
Copy
Embed
flowchart TD
A@{ shape: delay, label: "Delay" }
直接存取存储（水平圆柱）
Copy
Embed
flowchart TD
A@{ shape: das, label: "Direct access to storage" }
Disk storage (cylinder with slot)
Copy
Embed
flowchart TD
A@{ shape: lin-cyl, label: "Disk storage" }
Display (display shape)
Copy
Embed
flowchart TD
A@{ shape: curv-trap, label: "Display" }
Split process (split rectangle)
Copy
Embed
flowchart TD
A@{ shape: div-rect, label: "Divided process" }
Extract (small triangle)
Copy
Embed
flowchart TD
A@{ shape: tri, label: "Extract" }
Internal storage (window pane)
Copy
Embed
flowchart TD
A@{ shape: win-pane, label: "Internal storage" }
Connection point (solid circle)
Copy
Embed
flowchart TD
A@{ shape: f-circ, label: "Connect" }
Document with line
Copy
Embed
flowchart TD
A@{ shape: lin-doc, label: "Lined document" }
Loop limit (notched pentagon)
Copy
Embed
flowchart TD
A@{ shape: notch-pent, label: "Loop limit" }
Manual file (flipped triangle)
Copy
Embed
flowchart TD
A@{ shape: flip-tri, label: "Manual file" }
Manual input (right trapezoid)
Copy
Embed
flowchart TD
A@{ shape: sl-rect, label: "Manual input" }
Multi-document (stacked documents)
Copy
Embed
flowchart TD
A@{ shape: docs, label: "Multi-document" }
Multi-process (stacked rectangles)
Copy
Embed
flowchart TD
A@{ shape: processes, label: "Multiple processes" }
Paper tape (flag)
Copy
Embed
flowchart TD
A@{ shape: flag, label: "Paper tape" }
Stored data (bow-tie rectangle)
Copy
Embed
flowchart TD
A@{ shape: bow-rect, label: "Data stored" }
Summary (circle with cross)
Copy
Embed
flowchart TD
A@{ shape: cross-circ, label: "Summary" }
Tagged document
Copy
Embed
flowchart TD
A@{ shape: tag-doc, label: "Tagged document" }
Marked process
Copy
Embed
flowchart TD
A@{ shape: tag-rect, label: "Tagged process" }
Special shapes in Mermaid flowcharts
Mermaid also introduces images to enhance your flowcharts, allowing you to include images directly in a flowchart and thereby provide more visual context and clarity.
Image shape
You can use image to insert an image into a flowchart. The syntax for defining an image is as follows:
Copy
Embed
flowchart TD
A@{ img: "https://www.processon.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }
Parameter
- img: the URL of the image to display.
- label: the text label associated with the image; it can be any string. If undefined, no label is displayed.
- pos: the position of the label. If undefined, the label defaults to the bottom of the image.
- w: the width of the image. If undefined, it defaults to the natural width of the image.
- h: the height of the image. If undefined, it defaults to the natural height of the image.
- constraint: determines whether the image constrains the node size. This setting also ensures that the image keeps its original aspect ratio and adjusts its height based on the width. If undefined, it defaults to off.
Images provide additional flexibility and visual appeal to your flowcharts, making them more informative and engaging.
Connections between nodes
Nodes can be connected with links and arrows. There are different types of links, and a text string can also be attached to a link.
Link with arrow
Copy
Embed
flowchart LR
A-->B
An open link
Copy
Embed
flowchart LR
A --- B
Link with text
Copy
Embed
flowchart LR
A-- This is the text! ---B
Or
Copy
Embed
flowchart LR
A --- | This is the text| B
Link with arrow and text
Copy
Embed
flowchart LR
A-->|text|B
Or
Copy
Embed
flowchart LR
A-- text -->B
Dashed link
Copy
Embed
flowchart LR
A-.->B;
Dashed link with text
Copy
Embed
flowchart LR
A-. text .->B;
Thick link
Copy
Embed
flowchart LR
A ==> B
Thick link with text
Copy
Embed
flowchart LR
A == |text| ==> B
Invisible link
Copy
Embed
flowchart LR
A ~~~ B
Chaining of links
Copy
Embed
flowchart LR
A -- text --> B -- text2 --> C
You can also declare multiple node links on the same line, as shown below:
Copy
Embed
flowchart LR
a --> b & c--> d
You can also describe dependencies, as in the following code:
Copy
Embed
flowchart LR
a --> b & c--> d & e--> f
Describing the same graph using the basic syntax requires 8 lines. Keep in mind that overusing this approach can make a Markdown-formatted flowchart harder to read.
Copy
Embed
flowchart TB
a --> b
a --> c
b --> d
b --> e
c --> d
c --> e
d --> f
e --> f
Adding an ID to a link
Mermaid now supports adding an ID to a link, similar to attaching an ID and metadata to a node. This feature lays the foundation for more advanced styling, classes, and animation features on links.
Syntax:To add an ID to a link, prefix the link syntax with the ID followed immediately by the @ character. For example:
Copy
Embed
flowchart LR
A e1@--> B
In this example, e1 is the ID of the link connecting A and B. You can use this ID in subsequent definitions or style statements, just like a node.
Enable animation
After adding an ID to a link, you can enable the animation of the link by defining its properties:
Copy
Embed
flowchart LR
A e1@==> B
e1@{ animate: true }
This tells Mermaid that the link e1 is animated.
Choose the animation type
In the initial version, two animation speeds are supported: fast and slow. Choosing a specific animation type is a convenient way to enable animation and set the animation speed at once.
Copy
Embed
flowchart LR
A e1@--> B
e1@{ animation: fast }
这相当于 e1@{ animate: true, animation: fast }。
Animating with the classDef statement
You can also animate a link by assigning it a class and then defining animation properties in a classDef statement. For example:
Copy
Embed
flowchart LR
A e1@--> B
classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate
In this code:
- e1@--> 创建了一个 ID 为 e1 的连接线
- classDef animate defines a class named animate with styling and animation properties.
- class e1 animate applies the animate class to the link e1.
A note about escaping commas: when setting the stroke-dasharray property, remember to escape commas as , because commas are used as separators in Mermaid style definitions.
New arrow types
Supports new arrow types
- Link with a solid circle
- Link with a cross marker
Link with a solid circle
Copy
Embed
flowchart LR
A --o B
Link with a cross marker
Copy
Embed
flowchart LR
A --x B
Multi-directional arrow
Multi-directional arrows can be used, for example:
Copy
Embed
flowchart LR
A o--o B
B <--> C
C x--x D
Link length
Each node in a flowchart is assigned to a rank in the rendered graph based on the nodes it is connected to, i.e. a vertical or horizontal level (depending on the flowchart direction). By default, links can span any number of ranks, but you can require a link to be longer than others by adding extra dashes in the link definition.
In this example, two extra dashes are added to the link from node B to node E, making it span two more ranks than a normal link:
Copy
Embed
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
When a link label is written in the middle of a link, extra dashes must be added on the right side of the link. This example is equivalent to the previous one:
Copy
Embed
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B -- No ----> E[End]
For dotted lines or thick links, the character to add is an equals sign or a dot, as shown in the table below:
| Length | 1 | 2 | 3 |
|---|---|---|---|
| Normal link | --- | ---- | ----- |
| Normal link with arrow | --> | ---> | ----> |
| Thick link | === | ==== | ===== |
| Thick link with arrow | ==> | ===> | ====> |
| Dotted line | -.- | -..- | -...- |
| Dotted line with arrow | -.- | -..-> | -...-> |
Special characters
Text can be placed inside quotes to render more troublesome characters. As shown in the example below:
Copy
Embed
flowchart LR
id1["This is the (text) in the box"]
Entity codes for escaping characters
You can use the syntax in the example to escape characters.
Copy
Embed
flowchart LR
A["A double quote:#quot;"] --> B["A dec char:#9829;"]
The numbers given are decimal, so # can be encoded as #35. HTML character names are also supported.
Subgraph
Copy
Embed
subgraph title
graph definition
end
Here is an example:
Copy
Embed
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
You can also set an id for a subgraph.
Copy
Embed
flowchart TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
Flowchart
With the flowchart chart type, you can also set links to and from subgraphs, as in the flowchart below.
Copy
Embed
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
Subgraph direction
When using the flowchart type, you can use a direction statement to set the rendering direction of a subgraph, as shown below:
Copy
Embed
flowchart LR
subgraph TOP
direction TB
subgraph B1
direction RL
i1 -->f1
end
subgraph B2
direction BT
i2 -->f2
end
end
A --> TOP --> B
B1 --> B2
Limitations
If any node of a subgraph is connected to the outside, the subgraph's direction is ignored. Otherwise, the subgraph inherits the direction of the parent graph:
Copy
Embed
flowchart LR
subgraph subgraph1
direction TB
top1[top] --> bottom1[bottom]
end
subgraph subgraph2
direction TB
top2[top] --> bottom2[bottom]
end
%% ^ These subgraphs are identical, except for the links to them:
%% Link *to* subgraph1: subgraph1 direction is maintained
outside --> subgraph1
%% Link *within* subgraph2:
%% subgraph2 inherits the direction of the top-level graph (LR)
outside ---> top2
Markdown strings
Markdown strings enhance flowcharts and mind maps by providing a more flexible string type, supporting text formatting options such as bold and italic, and the ability to automatically wrap text within labels.
Copy
Embed
flowchart LR
subgraph "One"
a("`The **cat**
in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}}
end
subgraph "`**Two**`"
c("`The **cat**
in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog")
end
- To bold text, use two asterisks (**) before and after the text.
- Italic uses a single asterisk (*) placed before and after the text.
- For traditional strings, you need to add a <br> tag to make text wrap within a node. However, Markdown strings automatically wrap when the text is too long, and you can start a new line simply by using a line break instead of a <br> tag.
This feature applies to node labels, link labels, and subgraph labels
Automatic wrapping can be disabled by using a specific syntax
Copy
Embed
---
config:
markdownAutoWrap: false
---
graph LR
Note
Comments can be entered in a flowchart and will be ignored by the editor. Comments must be on their own line and must begin with a double percent sign (%%). Any text from the start of the comment to the next line will be treated as a comment, including any flow syntax.
Copy
Embed
flowchart LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
Styling and classes
Link styling
Links can be styled. For example, you may want to style a link that moves backward in the flow. Since links do not have IDs like nodes, the style to use for a link must be determined in another way. Use the order number from when the link was defined, or use the default value to apply to all links.
Copy
Embed
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
You can also add styling to multiple links by separating the link numbers with commas in a single statement:
Copy
Embed
linkStyle 1,2,7 color:blue;
Setting the link curve style
If the default method does not meet your needs, you can set a curve style for the links between items. The available curve styles include basis, bumpX, bumpY, cardinal, catmullRom, linear, monotoneX, monotoneY, natural, step, stepAfter, and stepBefore.
In the example below, a left-to-right chart uses the stepBefore curve style.
Copy
Embed
%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
graph LR
Setting node styles
A node can be given specific styling, such as a thicker border or a different background color.
Copy
Embed
flowchart LR
id1(Start)-->id2(Stop)
style id1 fill:#f99,stroke:#33d,stroke-width:4px
style id2 fill:#bfc,stroke:#f96,stroke-width:2px,color:#000,stroke-dasharray: 5 5
Class
More convenient than defining styles each time is to define a style class and attach that class to the nodes that need a different appearance.
A class is defined as shown below:
Copy
Embed
classDef className fill:pink,stroke:#333,stroke-width:4px;
In addition, you can define styles for multiple classes in a single statement:
Copy
Embed
classDef firstClassName,secondClassName font-size:12pt;
Attaching a class to a node works as follows:
Copy
Embed
class nodeId1 className;
You can also attach a class to a list of nodes in a single statement:
Copy
Embed
class nodeId1,nodeId2 className;
To add a class, you can use the ::: operator to attach a class name to a node, as shown below:
Copy
Embed
flowchart LR
A:::someclass --> B
classDef someclass fill:#f96
This form can be used when declaring multiple links between nodes:
Copy
Embed
flowchart LR
A:::foo & B:::bar --> C:::foobar
classDef foo stroke:#f00
classDef bar stroke:#0f0
classDef foobar stroke:#00f
- In graph declarations, statements can now also end without a semicolon. After version 0.2.16, ending a graph statement with a semicolon is only optional. Therefore, the graph declaration below is just as valid as the old graph declaration.
- A space is allowed between a vertex and a link. However, there should be no space between a vertex and its text, or between a link and its text. The old graph declaration is also still valid, so this new feature is optional and is intended to improve readability.
Below is the new link declaration, which is just as valid as the old link declaration.
Copy
Embed
flowchart LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
