#diagram/mermaid #diagram
first you should checkout [[Mermaid - diagramming tool]]
## Flowchat
### Node
```mermaid
---
title: Node
---
flowchart LR
id
```
```mermaid
---
title: Node with text
---
flowchart LR
id1[This is the text in the box]
```
unicode text
```mermaid
flowchart LR
id["This ❤ Unicode"]
```
markdown in a node
```mermaid
flowchart LR
markdown["`This **is** _Markdown_`"]
newLines["`Line1
Line 2
Line 3`"]
markdown --> newLines
```
Direction
```mermaid
flowchart LR
Start --> Stop
```
```mermaid
flowchart TD
Start --> Stop
```
round node
```mermaid
flowchart LR
id1(This is the text in the box)
```
fully rounded node
```mermaid
flowchart LR
id1([This is the text in the box])
```
subroutine node
```mermaid
flowchart LR
id1[[This is the text in the box]]
```
cylindrical shape
```mermaid
flowchart LR
id1[(Database)]
```
full circle shape
```mermaid
flowchart LR
id1((This is the text in the circle))
```
asymmetrical shape
```mermaid
flowchart LR
id1>This is the text in the box]
```
rhombus
```mermaid
flowchart LR
id1{This is the text in the box}
```
hexagon
```mermaid
flowchart LR
id1{{This is the text in the box}}
```
parallelogram
```mermaid
flowchart TD
id1[/This is the text in the box/]
```
parallelogram alt
```mermaid
flowchart TD
id1[\This is the text in the box\]
```
trapezoid
```mermaid
flowchart TD
A[/Christmas\]
```
trapezoid alt
```mermaid
flowchart TD
B[\Go shopping/]
```
double circle
```mermaid
flowchart TD
id1(((This is the text in the circle)))
```
### Links
normal link
```mermaid
flowchart LR
A-->B
```
open link
```mermaid
flowchart LR
A --- B
```
link with text
```mermaid
flowchart LR
A-- This is the text! ---B
```
```mermaid
flowchart LR
A-- text -->B
```
dotted link
```mermaid
flowchart LR
A-.->B;
```
thick link
```mermaid
flowchart LR
A ==> B
```
invisible link
```mermaid
flowchart LR
A ~~~ B
```
chaining
```mermaid
flowchart LR
A -- text --> B -- text2 --> C
```
```mermaid
flowchart LR
a --> b & c--> d
```
```mermaid
flowchart TB
A & B--> C & D
```
bidirectional link and arrow types
```mermaid
flowchart LR
A o--o B
B <--> C
C x--x D
```
minimal length of link
```mermaid
flowchart TD
A[Start] --> B{Is it?}
B -- Yes --> C[OK]
C --> D[Rethink]
D --> B
B -- No ----> E[End]
```
For dotted or thick links, the characters to add are equals signs or dots, as summed up in the following table:
| Length | 1 | 2 | 3 |
| ----------------- | ------ | ------- | -------- |
| Normal | `---` | `----` | `-----` |
| Normal with arrow | `-->` | `--->` | `---->` |
| Thick | `===` | `====` | `=====` |
| Thick with arrow | `==>` | `===>` | `====>` |
| Dotted | `-.-` | `-..-` | `-...-` |
| Dotted with arrow | `-.->` | `-..->` | `-...->` |
### Subgraph
```mermaid
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
```
subgraph title
```mermaid
flowchart TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
```
link with node inside subgraph
```mermaid
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
```
Direction in subgraph
```mermaid
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
```
> [!warning]- Limitation
> If any of a subgraph's nodes are linked to the outside, subgraph direction will be ignored. Instead the subgraph will inherit the direction of the parent graph. For example, subgraph 2 inherit `LR` from parent.
> ```mermaid
> 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 mantained
> outside --> subgraph1
> %% Link *within* subgraph2:
> %% subgraph2 inherits the direction of the top-level graph (LR)
> outside ---> top2
> ```
### Interaction
when click B, go to github
```mermaid
flowchart LR
A-->B
click B "https://www.github.com" "This is a tooltip for a link"
```
```mermaid
flowchart LR
A[self]-->B[blank]
B-->C
C-->D
D-->E
click A "https://www.github.com" _self
click B "https://www.github.com" "Open this in a new tab" _blank
click C href "https://www.github.com" _blank
click D href "https://www.github.com" "Open this in a new tab" _blank
```
custom css class
```mermaid
flowchart LR
A-->B[AAA<span>BBB</span>]
B-->D
class A cssClass
```