Mermaid

Links

• Mermaid JS
• online editor

Flowchart

Orientation

code	description
TB	top to bottom
TD	top-down/ same as top to bottom
BT	bottom to top
RL	right to left
LR	left to right

flowchart TB a --> b

Node shape

flowchart TB a[square] --> b(rounded) b --> c([stadium-shaped]) c --> d((circle)) d --> e{diamond}

Links between nodes

flowchart TB a --- b b --> c c -->|text| d d --o e e --x f f <--> g

Special characters

flowchart TB a --> b("use (parenthesis) and right arrow #rarr;")

Subgraph

flowchart TB a --> sg1 subgraph sg1[subgraph 1] direction LR b --> c end  %% change the background of sg1 to transparent classDef transparent fill:transparent class sg1 transparent