最初の行が流れを決めます。TD と TB は同じ、LR と RL は横に走ります。
flowchart LR
A[Start] --> B[Middle] --> C[End]
図を拡大入力した括弧がそのまま形になります。ここにある 5 つは Mernyx がふつうの箱として描くものです。
flowchart LR
A[Rectangle] --> B(Rounded)
B --> C([Stadium])
C --> D[[Subroutine]]
D --> E[(Database)]
図を拡大ふつうの形の残りです。円、判断のひし形、六角形、斜めの形。
flowchart LR
A((Circle)) --> B(((Double circle)))
B --> C{Diamond}
C --> D{{Hexagon}}
D --> E>Asymmetric]
図を拡大平行四辺形と台形です。スラッシュは片側に傾け、バックスラッシュは反対へ傾けます。
flowchart LR
A[/Parallelogram/] --> B[\Alternate\]
B --> C[/Trapezoid\]
C --> D[\Inverted/]
図を拡大2 つのノードをつなぐ方法は 4 つ。実線、点線、開いた線、太い線です。
flowchart LR
A[Solid] --> B[Target]
A -.-> C[Dotted]
A --- D[Open]
A ==> E[Thick]
図を拡大書き方は 2 つ。長いラベルならパイプを使う形が読みやすい。
flowchart LR
A[Start] -->|Yes| B[Continue]
A -- No --> C[Stop]
図を拡大ノードは 1 行につないで並べられます。ダッシュを足すと、そのノードは遠くなります。
flowchart LR
A[One] --> B[Two] --> C[Three]
B ----> D[Further away]
図を拡大サブグラフは、中でインデントしたノードを囲む、ラベルのついた箱です。
flowchart TB
subgraph Backend
API[API] --> DB[(Database)]
end
subgraph Frontend
UI[UI] --> API
end
図を拡大style は 1 つのノードだけを変えます。classDef は使い回せるスタイルに名前をつけます。
flowchart LR
A[Normal] --> B[Highlighted]
style B fill:#ee421d,color:#ffffff,stroke:#b32c0c
classDef quiet fill:#f0f0f3,stroke:#d4d4d8
class A quiet
図を拡大ラベルをバッククォートで包むと、太字・斜体・コードにできます。
flowchart LR
A["`**Bold** text`"]
B["``inline code``"]
図を拡大Font Awesome Free を Mermaid の書き方で。名前をラベルに書けば、Mernyx が字形を描きます。認識できないアイコンは、図を失敗させるのではなく、アイコン 1 つ分の幅の空白を残します。
flowchart LR
A([fa:fa-user User]) --> B([fa:fa-server Server])
B --> C([fa:fa-database Database])
図を拡大