Mermaidシーケンス図 — 参加者、メッセージ、ループ
Mermaidシーケンス図の構文をマスターしましょう。参加者、同期・非同期メッセージ、ループ、altブロック、ノートを使ったAPI連携のモデリングを解説します。
Diagram Types
詳細な説明
シーケンス図とは?
シーケンス図は、異なるアクターやシステムが時間経過とともにどのように相互作用するかを示します。垂直のライフライン間をメッセージが左から右に流れ、APIコール、認証フロー、マイクロサービス通信の図解に最適です。
参加者の定義
参加者はダイアグラムの上部にボックスとして表示されます。明示的に宣言して順序を制御できます:
sequenceDiagram
participant Browser
participant API
participant DB as Database
asキーワードで表示名のエイリアスを設定できます。participantの代わりにactorを使うと、棒人間アイコンで描画されます。
メッセージタイプ
Mermaidは異なるコミュニケーション方式を表す複数の矢印スタイルをサポートしています:
| 構文 | 意味 |
|---|---|
->> |
同期リクエスト(実線矢印) |
-->> |
非同期/戻り(点線矢印) |
-) |
非同期ファイア&フォーゲット(開放矢印) |
--) |
非同期ファイア&フォーゲット戻り(点線開放) |
アクティベーションとディアクティベーション
参加者が処理中であることをactivate / deactivateまたは省略形+ / -で示します:
sequenceDiagram
Browser->>+API: POST /login
API->>+DB: SELECT user
DB-->>-API: user record
API-->>-Browser: 200 OK + JWT
ループ、代替、オプション
制御フローブロックで条件付きロジックと繰り返しをモデル化できます:
sequenceDiagram
participant Client
participant Server
Client->>Server: Request resource
alt Cache hit
Server-->>Client: 304 Not Modified
else Cache miss
Server->>Server: Generate response
Server-->>Client: 200 OK + payload
end
loop Every 30 seconds
Client->>Server: Heartbeat ping
Server-->>Client: pong
end
ノート
メッセージに沿ってコンテキストノートを追加します:
sequenceDiagram
Alice->>Bob: Hello
Note right of Bob: Bob thinks about it
Bob-->>Alice: Hi back!
Note over Alice, Bob: They are now friends
ノートはright of、left of、またはoverで1つ以上の参加者に対して配置できます。
ユースケース
セキュリティレビューのためにOAuth 2.0認可コードフローをドキュメント化するバックエンドエンジニアのケース。シーケンス図がブラウザ、認可サーバー、リソースサーバー間のトークン交換を示し、各リダイレクトとAPIコールの発生場所を明確にします。