運用のドキュメントに載せる図は、構成図だけではありません。切り分けの手順、処理の流れ、作業スケジュール、台帳の構造と、形の違う図がいくつも要ります。
これらを別々のツールで描くと、更新のたびにどのファイルを開くか思い出すところから始まります。Mermaidなら全部同じ記法のテキストで書けて、手順書と同じリポジトリに置いておけます。
この記事では、構成図以外の5種類をコピーして使える形で載せます。構成図についてはMermaidでインフラ構成図を書くを参照してください。検証は Mermaid 11 で行いました。
1. 切り分けフロー（flowchart）
障害対応の手順書に載せる図です。菱形 {} が判断、矢印のラベルが分岐の条件になります。
flowchart TD
S([pingが通らない]) --> Q1{自分のIPは<br/>正しいか}
Q1 -- いいえ --> A1[IP設定を直す]
Q1 -- はい --> Q2{同じセグメント内は<br/>通るか}
Q2 -- いいえ --> A2[ケーブル・ポート・<br/>VLANを確認]
Q2 -- はい --> Q3{デフォルトゲートウェイ<br/>まで通るか}
Q3 -- いいえ --> A3[ルーティングを確認]
Q3 -- はい --> Q4{名前解決は<br/>できるか}
Q4 -- いいえ --> A4[DNSを確認]
Q4 -- はい --> A5[相手側の<br/>ファイアウォールを疑う]
切り分けフローは「下へ進むほど切り分けが進む」形にすると読みやすくなります。TD（上から下）のまま、はい／いいえを左右に振り分けるのがおすすめです。
判断を5つ以上積むと縦に長くなりすぎます。 そのときはフェーズごとに図を分けてください。1枚で全部を表現しようとすると、結局読まれません。
2. シーケンス図（sequenceDiagram）
認証やAPI連携の流れを説明するときに使います。誰と誰がどの順でやり取りするかを表す図です。
sequenceDiagram
autonumber
actor U as 利用者
participant APP as 業務アプリ
participant AD as ADサーバー
participant FS as ファイルサーバー
U->>APP: ID／パスワードを入力
APP->>AD: LDAP バインド要求
AD-->>APP: 認証OK＋所属グループ
alt 権限あり
APP->>FS: 共有フォルダへアクセス
FS-->>APP: ファイル一覧
APP-->>U: 画面に表示
else 権限なし
APP-->>U: アクセス拒否を表示
end
Note over AD,FS: どちらもKerberosチケットを参照する
覚える記法は4つだけです。
| 記法 | 意味 |
|---|---|
A->>B: | 実線の矢印（要求） |
A-->>B: | 点線の矢印（応答） |
alt / else / end | 条件分岐 |
Note over A,B: | 補足のふせん |
autonumber を頭に置くと各やり取りに番号が振られます。手順書で「3番で失敗する場合は」と書けるので、入れておくと説明が楽になります。
actor にすると人型、participant だと四角で描かれます。人とシステムを区別したいときに使い分けます。
3. ガントチャート（gantt）
移行や構築のスケジュールです。Excelの工程表をテキストで置き換えられます。
gantt
title サーバー移行スケジュール
dateFormat YYYY-MM-DD
axisFormat %m/%d
section 準備
現行調査 :done, t1, 2026-10-01, 7d
移行計画の作成 :done, t2, after t1, 5d
機器手配 :active, t3, after t2, 10d
section 構築
OS導入 : t4, after t3, 3d
ミドルウェア設定 : t5, after t4, 4d
データ移行リハーサル : t6, after t5, 3d
section 切替
本番データ移行 :crit, t7, after t6, 2d
切替作業 :crit, t8, after t7, 1d
並行稼働 : t9, after t8, 7d
便利なのが after による相対指定です。after t1 と書けば前のタスクの翌日から始まります。前倒しや遅延が出たとき、最初の日付を1か所直すだけで後ろが全部ずれます。
状態は3つ覚えれば足ります。
done… 完了（グレー）active… 進行中crit… クリティカル（赤）
縦の赤い線は今日です。進捗報告にそのまま貼れます。
4. 状態遷移図（stateDiagram-v2）
サーバーや申請フローの状態を整理する図です。どの状態からどの状態へ行けるかを明示できます。
stateDiagram-v2
direction LR
[*] --> 停止中
停止中 --> 起動処理中 : 電源ON
起動処理中 --> 稼働中 : 全サービス起動
起動処理中 --> 異常停止 : 起動失敗
稼働中 --> メンテナンス中 : 計画停止
メンテナンス中 --> 稼働中 : 作業完了
稼働中 --> 異常停止 : ハード障害
異常停止 --> 起動処理中 : 復旧作業
稼働中 --> 停止中 : 電源OFF
異常停止 --> [*] : 機器撤去
[*] が開始と終了です。矢印のラベルにはイベント（何が起きたら遷移するか）を書きます。
状態遷移図の利点は、書いているうちに抜けに気づけることです。「異常停止から直接メンテナンス中へは行けるのか」のような問いが、図にすると自然に出てきます。運用設計のレビュー資料に向いています。
5. ER図（erDiagram）
資産管理台帳やデータベースの構造を表します。
erDiagram
機器 ||--o{ ネットワークIF : "搭載する"
機器 ||--o{ ライセンス : "割り当てる"
機器 }o--|| ラック : "設置される"
機器 }o--|| 管理担当者 : "担当する"
ネットワークIF }o--|| VLAN : "所属する"
機器 {
string 資産番号 PK
string ホスト名
string 機種
date 保守期限
}
ネットワークIF {
string MACアドレス PK
string IPアドレス
string 資産番号 FK
}
ラック {
string ラック番号 PK
string 設置場所
}
関連を表す記号は、両端それぞれが「いくつ対応するか」を示します。
|| ちょうど1
o{ 0以上の複数
|{ 1以上の複数
o| 0または1機器 ||--o{ ネットワークIF は「1台の機器に、ネットワークIFが0枚以上」という意味になります。読む向きは記号のある側からで、慣れるまでは迷いますが、組み合わせは上の4つだけです。
属性は書かなくても図になります。関連だけ先に書いて、重要なテーブルにだけ属性を足すのが現実的です。
6. 書くときに踏んだ点
6.1 erDiagram ではエイリアス記法が使えない
フローチャートでは A["表示名"] と書いてIDと表示名を分けられますが、ER図では通りません。
機器["資産"] ||--o{ ネットワークIF : "搭載する"Parse error on line 2
Expecting 'EOF', 'NEWLINE', 'STYLE_SEPARATOR', 'BLOCK_START', ...日本語のエンティティ名はそのまま書けば動きます。 本記事の例も 機器 ネットワークIF のように直接書いています。
6.2 ガント図は描画先の幅に依存する
ガント図はコンテナの幅に合わせて横幅が決まります。幅が取れない環境で画像化すると、極端に小さい図になりました（実測で 412×572）。
mermaid.initialize({
gantt: { useWidth: 1400 }
});useWidth を指定すると幅が固定されます。CIやスクリプトで画像化するときに効きます。手で書いてブラウザで見るぶんには気にしなくて構いません。
6.3 図の種類で向きの指定方法が違う
flowchart は1行目に flowchart LR と書きますが、stateDiagram-v2 は2行目に direction LR を置きます。記法が揃っていないので、ここは都度調べることになります。
7. まとめ
構成図以外の5種類について整理します。
- 切り分けフロー … 菱形が判断。判断5つを超えたら図を分ける
- シーケンス図 …
->>と-->>の2本とalt/Noteだけ覚える。autonumberを付けると手順書で参照しやすい - ガントチャート …
afterの相対指定が効く。日付を1か所直せば後ろが全部ずれる - 状態遷移図 … 書いているうちに遷移の抜けに気づける
- ER図 … 関連の記号は4つだけ。属性は重要なテーブルにだけ書く
どれもテキストなので、手順書と同じリポジトリに置いて一緒に差分管理できます。図だけ古いまま残る、という事態を防げるのが実務での一番の効果だと思います。
コメント