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), right arrow #rarr; and #quot;double quotes#quot;")

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

Style

flowchart TB a --> b  %% style of the first (0) link linkStyle 0 stroke:blue,stroke-width:4px;  %% style the node b style b fill:blue,stroke:red,stroke-width:2px,color:green,stroke-dasharray: 5 5  %% create a class style classDef className fill:blue,stroke:red,stroke-width:4px;  %% apply the class style to nodes class a,b className;

Class diagram

classDiagram  %% direction of the diagram direction LR class Class1 { string Property1 } class Enum1 { <<enum>> One = 1 Two } note for Enum1 "Enum note"  %% link Class1 -- Enum1 : Property2 Parent <|-- Child