{% mermaid %} flowchart LR A -- text --> B -- text2 --> C {% endmermaid %} {% mermaid %} flowchart LR a --> b & c --> d {% endmermaid %} {% mermaid %} flowchart TB A & B--> C & D {% endmermaid %} {% mermaid %} flowchart TB A --> C A --> D B --> C B --> D {% endmermaid %}
flowchart LR
A -- text --> B -- text2 --> C
flowchart LR
a --> b & c --> d
flowchart TB
A & B--> C & D
flowchart TB
A --> C
A --> D
B --> C
B --> D
New arrow types
1 2 3 4 5
{% mermaid %} flowchart LR A --o B B --x C {% endmermaid %}
flowchart LR
A --o B
B --x C
Multi directional arrows
1 2 3 4 5 6
{% mermaid %} flowchart LR A o--o B B <--> C C x--x D {% endmermaid %}
flowchart LR
A o--o B
B <--> C
C x--x D
Minimum length of a link
you can ask for any link to be longer than the others by adding extra dashes in the link definition.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
{% mermaid %} flowchart TD A[Start] --> B{Is it?} B -->|Yes| C[OK] C --> D[Rethink] D --> B B ---->|No| E[End] {% endmermaid %} {% mermaid %} flowchart TD A[Start] --> B{Is it?} B -- Yes --> C[Ok] C --> D[Rethink] D --> B B -- No ----> E[End] {% endmermaid %}
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
flowchart TD
A[Start] --> B{Is it?}
B -- Yes --> C[Ok]
C --> D[Rethink]
D --> B
B -- No ----> E[End]
Length
1
2
3
Normal
—
----
-----
Normal with arrow
–>
—>
---->
Thick
===
====
=====
Thick with arrow
==>
===>
====>
Dotted
-.-
-…-
-…-
Dotted with arrow
-.->
-…->
-…->
Special characters that break syntax
It is possible to put text within quotes in order to render more troublesome characters.
1 2 3 4
{% mermaid %} flowchart LR id1["This is the (text) in the box"] {% endmermaid %}
flowchart LR
id1["This is the (text) in the box"]
Entity codes to escape characters
1 2 3 4
{% mermaid %} flowchart LR A["A double quote:#quot;"] -->B["A dec char:#9829;"] {% endmermaid %}
flowchart LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"]
Subgraphs
1 2 3
subgraph title graph definition end
1 2 3 4 5 6 7 8 9 10 11 12 13
{% mermaid %} flowchart TB c1-->a2 subgraph one a1-->a2 end subgraph two b1-->b2 end subgraph three c1-->c2 end {% endmermaid %}
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
flowchart TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
flowcharts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
{% 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 {% endmermaid %}
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 subgraphs
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
{% 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 {% endmermaid %}
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
Comments
1 2 3 4 5
{% mermaid %} flowchart LR %% this is a comment A -- text --> B{node} A -- text --> B -- text2 --> C {% endmermaid %}
flowchart LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
Styling links
1 2 3 4 5 6 7 8
{% mermaid %} flowchart TB A --> C A --> D B --> C B --> D linkStyle 3 stroke:#ff3,stroke-width:4px,color:red; {% endmermaid %}
flowchart TB
A --> C
A --> D
B --> C
B --> D
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;