🧜Mermaid-Flowchart
Cheat Sheet for Mermaid.
1. Flowcharts
A flowchart is a type of diagram that represents an algorithm, workflow or process. The flowchart shows the steps as boxes of various kinds, and their order by connecting the boxes with arrows. This diagrammatic representation illustrates a solution model to a given problem.
1.1 Graph
Possible directions are:
TB
- top bottomBT
- bottom topRL
- right leftLR
- left rightTD
- same as TB
TB
graph TB;
A-->B;
BT
graph BT;
A-->B;
RL
graph RL;
A-->B;
LR
graph LR;
A-->B;
TD
graph TD;
A-->B;
1.2 Nodes & shapes
Node(Default)
8a37b9ee03f84af584d9b57b1aac8f69
Node with Text
graph LR;
id1[This is the text in the box]
Node with Round Edges
graph LR;
id1(This is the text in the box)
Node in Circle Form
graph LR;
id1((This is the text in the circle))
Node in Asymmetric Shape
graph LR;
id1>This is the text in the box]
Node in Rhombus Form
graph LR;
id1{This is the text in the box}
1.3 Links Between Nodes
Link with Arrow Head
graph LR;A-->B
graph LR;
A-->B
Open Link
graph LR;A---B
graph LR;
A---B
Text on Links(1)
graph LR;A-- This is the text ---B
graph LR;
A-- This is the text ---B
Text on Links(2)
graph LR;A---|This is the text|B
graph LR;
A---|This is the text|B
Link with Arrow Head and Text(1)
graph LR;A-->|text|B
graph LR;
A-->|text|B
Link with Arrow Head and Text(2)
graph LR;A-- text -->B
graph LR;
A-- text -->B
Dotted Link
graph LR;A-.->B;
graph LR;
A-.->B;
Dotted Link with Text
graph LR;A-. text .-> B
graph LR;
A-. text .-> B
Thick Link
graph LR;A ==> B
graph LR;
A ==> B
Thick link with text
graph LR;A == text ==> B
graph LR;
A == text ==> B
1.4 Subgraphs
Syntax:
subgraph title
graph definition
end
Example:
graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
4. Demos
4.1 Basic Flowchart
---
title: Basic Flowchart
---
graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B --> D{Rhombus}
C --> D
4.2 Flowchart with Decision
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
4.3 Larger Flowchart with Some Styling
graph TB
sq[Square shape] --> ci((Circle shape))
subgraph A
od>Odd shape]-- Two line<br/>edge comment --> ro
di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
di==>ro2(Rounded square shape)
end
%% Notice that no text in shape are added here instead that is appended further down
e --> od3>Really long text with linebreak<br>in an Odd shape]
%% Comments after double percent signs
e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
cyr[Cyrillic]-->cyr2((Circle shape Начало));
classDef green fill:#9f6,stroke:#333,stroke-width:2px
classDef orange fill:#f96,stroke:#333,stroke-width:4px
class sq,e green
class di orange
graph TB
sq[Square shape] --> ci((Circle shape))
subgraph A
od>Odd shape]-- Two line<br/>edge comment --> ro
di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
di==>ro2(Rounded square shape)
end
%% Notice that no text in shape are added here instead that is appended further down
e --> od3>Really long text with linebreak<br>in an Odd shape]
%% Comments after double percent signs
e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-\*ز)
cyr[Cyrillic]-->cyr2((Circle shape Начало));
classDef green fill:#9f6,stroke:#333,stroke-width:2px
classDef orange fill:#f96,stroke:#333,stroke-width:4px
class sq,e green
class di orange
5. References
Last updated
Was this helpful?