【Document】Mermaid記法によるフローチャートの書き方【Mermaid】

Writing

一般的なフローチャートの書き方

基本構文

flowchart TD
A[開始] --> B[処理]
B --> C[終了]
flowchart TD
A[開始] --> B[処理]
B --> C[終了]
  • TD = Top Down（上→下）
  • LR = Left Right（左→右）

ノード形状

flowchart TD
A[四角]
B(丸)
C((二重丸))
D{条件}
E[/入出力/]
F[[サブルーチン]]
flowchart TD
A[四角]
B(丸)
C((二重丸))
D{条件}
E[/入出力/]
F[[サブルーチン]]
記法 意味
[ ] 処理
( ) 開始・終了
(( )) 強調
{ } 条件分岐
[/ /] 入力出力
[[ ]] サブルーチン

条件分岐

flowchart TD
A[開始] --> B{ログイン成功?}

B -- Yes --> C[ダッシュボード]
B -- No --> D[エラー表示]

C --> E[終了]
D --> E
flowchart TD
A[開始] --> B{ログイン成功?}

B -- Yes --> C[ダッシュボード]
B -- No --> D[エラー表示]

C --> E[終了]
D --> E

ループ

flowchart TD
A[開始] --> B{条件}
B -- Yes --> C[処理]
C --> B
B -- No --> D[終了]
flowchart TD
A[開始] --> B{条件}
B -- Yes --> C[処理]
C --> B
B -- No --> D[終了]

ノードIDと表示名

flowchart TD
A[Start]
B[Process]
C[End]

A --> B --> C
flowchart TD
A[Start]
B[Process]
C[End]

A --> B --> C
  • A B C は内部ID
  • [Start] は表示名

矢印

flowchart LR
A --> B
A -.-> C
A ==> D
flowchart LR
A --> B
A -.-> C
A ==> D
記号 意味
--> 通常
-.-> 点線
==> 強調

矢印ラベル

flowchart TD
A -->|成功| B
A -->|失敗| C
flowchart TD
A -->|成功| B
A -->|失敗| C

サブグラフ

業務フロー整理に便利。

flowchart LR

subgraph 営業
A[訪問]
B[提案]
end

subgraph 受注
C[見積]
D[受注]
end

A --> B --> C --> D
flowchart LR

subgraph 営業
A[訪問]
B[提案]
end

subgraph 受注
C[見積]
D[受注]
end

A --> B --> C --> D

シーケンス図

APIや処理フロー説明に便利。

sequenceDiagram
participant User
participant System
participant DB

User ->> System: ログイン
System ->> DB: ユーザ確認
DB -->> System: OK
System -->> User: ログイン成功
sequenceDiagram
participant User
participant System
participant DB

User ->> System: ログイン
System ->> DB: ユーザ確認
DB -->> System: OK
System -->> User: ログイン成功
記号 意味
->> 同期
-->> レスポンス

クラス図

classDiagram

class User {
  +id
  +name
  login()
}

class Order {
  +order_id
  +amount
}

User --> Order
classDiagram

class User {
  +id
  +name
  login()
}

class Order {
  +order_id
  +amount
}

User --> Order

状態遷移図

stateDiagram-v2

[*] --> Idle
Idle --> Processing
Processing --> Done
Done --> [*]
stateDiagram-v2

[*] --> Idle
Idle --> Processing
Processing --> Done
Done --> [*]

ガントチャート

プロジェクト管理

gantt
title 開発スケジュール
dateFormat YYYY-MM-DD

section 設計
要件定義 :2026-01-01, 7d
設計 :7d

section 開発
実装 :10d
テスト :5d
gantt
title 開発スケジュール
dateFormat YYYY-MM-DD

section 設計
要件定義 :2026-01-01, 7d
設計 :7d

section 開発
実装 :10d
テスト :5d

円グラフ

pie
title 市場シェア
"A社" : 40
"B社" : 30
"C社" : 20
"D社" : 10
pie
title 市場シェア
"A社" : 40
"B社" : 30
"C社" : 20
"D社" : 10

スタイル設定

flowchart TD

A[開始] --> B[処理]

style A fill:#9f9
style B fill:#f99
flowchart TD

A[開始] --> B[処理]

style A fill:#9f9
style B fill:#f99

実務でよくある業務フロー例

flowchart TD

A[問い合わせ] --> B{既存顧客?}

B -->|Yes| C[営業対応]
B -->|No| D[新規登録]

C --> E[見積作成]
D --> E

E --> F{受注?}

F -->|Yes| G[受注登録]
F -->|No| H[終了]

G --> I[納品]
flowchart TD

A[問い合わせ] --> B{既存顧客?}

B -->|Yes| C[営業対応]
B -->|No| D[新規登録]

C --> E[見積作成]
D --> E

E --> F{受注?}

F -->|Yes| G[受注登録]
F -->|No| H[終了]

G --> I[納品]

Writing

Posted by junichi