Mermaidでシーケンス図を書く方法
シーケンス図は、誰が誰に、どの順番で話しかけるかを示します。mermaidでは、口で説明するのとほぼ同じ時間で書けるため、コードベースの中で最も長く生き残る図の種類です。以下はすべてエディタにそのまま貼り付けられます。
最小構成
図の種類を宣言し、1メッセージにつき1行を書きます。参加者は初めて登場した順に、その場で作成されます。
sequenceDiagram
User->>API: POST /orders
API->>DB: INSERT order
DB-->>API: order id
API-->>User: 201 Created初出順ではなく特定の左右順にしたい場合は、participant Userで参加者を明示的に宣言します。
矢印の種類
| 構文 | 意味 |
|---|---|
A->>B: text | リクエスト ― 実線、塗りつぶし矢じり |
A-->>B: text | レスポンス ― 破線、塗りつぶし矢じり |
A->B: text | 実線、白抜き矢じり |
A-)B: text | 非同期メッセージ ― 白抜き矢じり、返信を期待しない |
A-xB: text | 失敗または破棄されたメッセージ |
覚えておく価値がある慣習: 呼び出しは実線、戻りは破線。これだけで、ラベルを1つも読まずにリクエストとレスポンスを区別できます。
参加者とエイリアス
sequenceDiagram
participant U as Browser
participant A as API gateway
participant S as Order service
U->>A: GET /orders
A->>S: list(userId)
S-->>A: orders
A-->>U: 200 OKparticipantの代わりにactor U as Browserを使うと棒人間が描かれます ― 認証フローの左端に立つ人間を表すのに向いています。
アクティベーションバー
アクティベーションバーは、参加者がどれだけの間ビジー状態かを示します。activate/deactivateで明示的にマークするか、矢印に+と-を付ける方法があります。後者の方が短く、バランスも崩れにくいです。
sequenceDiagram
User->>+API: POST /pay
API->>+Bank: charge
Bank-->>-API: authorised
API-->>-User: receiptループ、条件分岐、並行処理
sequenceDiagram
User->>API: POST /import
loop every row
API->>DB: upsert row
end
alt all rows valid
API-->>User: 200 OK
else some failed
API-->>User: 422 with errors
end
par notify
API->>Email: send summary
and audit
API->>Log: write entry
endloop <label>…end― 繰り返し。alt <label>…else <label>…end― 互いに排他的な分岐。opt <label>…end― 単に起こらないこともある分岐。par <label>…and <label>…end― 同時に起こること。critical/break― 中断してはならない区間と、早期終了。
ノート
sequenceDiagram
User->>API: POST /login
Note right of API: Rate limited<br>5 per minute
API-->>User: token
Note over User,API: Token is valid for 30 daysNote over A,Bは2つの参加者にまたがり、どちらか一方ではなく相互作用そのものに属する制約を書くのに適した場所です。
完全な実例
sequenceDiagram
actor U as User
participant A as App
participant P as Provider
U->>+A: Click "Sign in"
A-->>-U: Redirect to provider
U->>+P: Authorise
P-->>-U: Redirect back with code
U->>+A: GET /callback?code=…
A->>+P: Exchange code for token
P-->>-A: access token
Note right of A: Session cookie set here
A-->>-U: Signed inこの図を編集する
コードタブに貼り付けて1行変更してみてください ― 入力するたびにプレビューが再描画されます。
よくある質問
メッセージに番号を振るには?
sequenceDiagramの直後の行にautonumberを置きます。すべてのメッセージに連番が振られ、レビューコメントで図について話すのがずっと楽になります。
参加者は自分自身にメッセージを送れますか?
はい ― 両側に同じ名前を書きます: API->>API: retry。mermaidは同じライフラインに戻るループを描画します。
参加者が破棄されたことを示すには?
終了させるメッセージの前にdestroy <name>を使うか、図の途中で登場させたい場合はcreate participant <name>を使います。
シーケンス図はビジュアルキャンバスで編集できますか?
ビジュアルキャンバスが編集するのはフローチャートです。シーケンス図はコードタブで書き、プレビューにリアルタイムで描画されます ― シーケンス図は本質的に行のリストなので、通常こちらの方が速いです。