フローチャート
フローチャートは、ワークフローやプロセスを表現する図です。Mermaid はテキストによる記述からフローチャートを生成することができます。
構文
ノードの種類
id[テキスト]- 四角形ノードid(テキスト)- 角丸四角形ノードid([テキスト])- スタジアム形ノードid[[テキスト]]- サブルーチン形ノードid>テキスト]- 非対称ノードid{テキスト}- ひし形ノードid- 六角形ノードid[/テキスト/]- 平行四辺形ノードid[\テキスト\]- 逆平行四辺形ノード
接続線
-->- 矢印線---- 実線-.->- 点線矢印==>- 太線矢印--テキスト-->- テキスト付き矢印線--テキスト---- テキスト付き実線==テキスト==>- テキスト付き太線矢印
基本例
コード:
mermaid
flowchart TD
A[開始] --> B{続行?}
B -->|はい| C[確認]
C --> D[再考]
D --> B
B ---->|いいえ| E[終了]
応用例
様々なノードタイプと接続方法を示す複雑なフローチャート：
コード:
mermaid
flowchart LR
A[/入力/] --> B(処理)
B --> C{判断}
C -->|選択1| D[結果 1]
C -->|選択2| E[結果 2]
D --> F([出力])
E --> F
F --> G{{表示}}
G -.-> H>終了]
方向設定
フローチャートの方向を指定できます：
TB- 上から下TD- 上から下（TB と同じ）BT- 下から上RL- 右から左LR- 左から右
サブグラフ
サブグラフを使用して複雑なフローチャートを整理できます：
コード:
mermaid
flowchart TB
subgraph サブグラフ1
a1-->a2
end
subgraph サブグラフ2
b1-->b2
end
subgraph サブグラフ3
c1-->c2
end
c1-->a2
スタイル設定
ノードと接続線にスタイルを適用できます：
コード:
mermaid
flowchart LR
id1(開始)-->id2(終了)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
特殊構文
エスケープ文字
特殊文字を含むテキストには二重引用符を使用します：
コード:
mermaid
flowchart LR
A["これは「特殊」なノードです"]
複数行テキスト
<br> を使用して改行を追加できます：
コード:
mermaid
flowchart TD
A["複数行の<br>テキスト"]
実用的なヒント
- フローチャートはシンプルに保つ
- 類似の要素には一貫したノードタイプを使用
- 接続線には意味のあるラベルを付ける
- フローを最も効果的に示す方向を選択
- サブグラフを使用して複雑なロジックを整理
- スタイルを適切に使用して重要なノードを強調
- 交差する接続を最小限に抑える
- 明確なノード名を使用する
よくある問題の解決
レイアウトの問題
- 図の方向を調整する
- ノード間の接続を減らす
- サブグラフで関連ノードをグループ化
スタイルの問題
- 構文を確認
- カラーコードが正しいか確認
- スタイル属性名を確認
レンダリングの問題
- 構文が正しいか確認
- ノードIDの重複をチェック
- 接続先のノードが存在するか確認