システム設計の際、「図を作るのはいいけど、修正や管理が面倒……」と感じることは多いですよね。
そんな時に便利なのが Mermaid.js です。
テキストベースで図を描けるため、修正が簡単でGit管理との相性も抜群です。
本記事では、実務でシーケンス図を書くときに「これだけ知っていれば困らない」という頻出の基本構文をまとめました。
備忘録や、書き方をド忘れした時の逆引きとして活用してください。
環境
- VSCode
-
拡張機能：Markdown Preview Enhanced または Mermaid Editor
（Markdownファイル内で```mermaidと記述するだけでプレビュー可能です）
1. 基本：メッセージの線種
メッセージは、オブジェクト間で行われるやり取り（メソッド呼び出しや応答）を指します。矢印の書き方を変えることで、処理の性質を表現します。
| 記述 | 意味 | 線の見た目 | 主な用途 |
|---|---|---|---|
->> |
同期メッセージ | 実線 + 矢印 | 通常のリクエスト、関数呼び出し |
-->> |
応答メッセージ | 点線 + 矢印 | 返り値、レスポンス |
-> |
非同期メッセージ | 実線 + 棒 | 通知、投げっぱなしの処理 |
--x |
非同期（破棄） | 実線 + ×印 | 処理の終了、メッセージの消失 |
```mermaid
sequenceDiagram
actor User
participant Client
participant Server
User ->> Client: ボタンクリック（同期）
Client ->> Server: APIリクエスト
Server -->> Client: レスポンス（返却）
Client -->> User: 画面更新
```
2. 登場人物の定義 (actor / participant)
図に登場する要素を定義します。
- actor：人間や外部システムなど、棒人間アイコンで表示されます
- participant：システムの構成要素（クラス、サーバー、画面など）を四角枠で表示します
- as：エイリアス（別名）を付けることで、コード内では短い変数名を使いつつ、図には日本語を表示できます
```mermaid
sequenceDiagram
actor User as ユーザー
participant Client as ブラウザ
participant Server as サーバー
User ->> Client: フォーム入力
Client ->> Server: POST /data
```
3. 実行仕様 (Activation)
そのオブジェクトが「今、処理を実行中である（活性化している）」状態を表現します。
-
+：メッセージの送り先で実行状態を開始します -
-：メッセージ의送り先で実行状態を終了します - autonumber：図の左側に自動でステップ番号を振ります
```mermaid
sequenceDiagram
autonumber
actor User
participant Client
participant Server
User ->>+ Client: 検索実行
Client ->>+ Server: クエリ送信
Server -->>- Client: 結果返却
Client -->>- User: 結果表示
```
4. 条件分岐：alt
Alternative（代替）の略です。if-elseのような「もし〜ならA、そうでなければB」という排他的な条件分岐を表現します。
```mermaid
sequenceDiagram
actor User
participant Client
participant Server
User ->> Client: ログイン情報を入力
Client ->> Server: 認証リクエスト
alt 成功
Server -->> Client: 200 OK (Token)
Client -->> User: ホーム画面へ遷移
else 失敗
Server -->> Client: 401 Unauthorized
Client -->> User: エラーメッセージ表示
end
```
5. 任意実行：opt
Optional（任意）の略です。条件に合致する場合のみ実行される単一の分岐を表現します。
```mermaid
sequenceDiagram
actor User
participant Client
participant Server
User ->> Client: 保存ボタン押下
Client ->> Server: 保存リクエスト
opt 通知を受け取る設定の場合
Server ->> Server: 通知メール送信予約
end
Server -->> Client: 保存完了
```
6. 並列処理：par
Parallel（並列）の略です。複数の処理が同時に、あるいは順不同で行われる非同期的な動きを表現します。
```mermaid
sequenceDiagram
participant Client
participant API_A
participant API_B
Client ->> Client: ページ読み込み開始
par データの並列取得
Client ->> API_A: ユーザー情報取得
and
Client ->> API_B: 投稿一覧取得
end
API_A -->> Client: ユーザーデータ
API_B -->> Client: 投稿データ
```
7. 繰り返し：loop
特定の処理を繰り返すことを表現します。ループ名として終了条件などを記述するのが一般的です。
```mermaid
sequenceDiagram
participant Client
participant Server
loop 30秒おきに確認（最大5回）
Client ->> Server: ステータス確認
Server -->> Client: 処理継続中...
end
Note over Client, Server: 完了後に次の工程へ
```
8. グループ化：box
論理的な境界線を明示します。
- box [Color] [Label]：指定した色で背景を塗り、ラベルを付けます。フロントエンドやバックエンドといった「層」を分けるのに適しています
```mermaid
sequenceDiagram
box Gray Frontend
actor User
participant Client
end
box LightBlue Backend
participant Server
participant DB
end
User ->> Client: 検索
Client ->> Server: GET /search
Server ->> DB: Query
```
9. 範囲強調：rect
Rectangle（長方形）の略です。特定の処理範囲に色を付けて強調します。
- 色は
rgb(255, 255, 255)形式などで指定でき、重要なフェーズ（決済、認証など）を視覚化するのに便利です
```mermaid
sequenceDiagram
participant Client
participant Server
rect rgb(240, 248, 255)
Note over Client, Server: 認証フェーズ
Client ->> Server: トークン送信
Server -->> Client: 有効性確認完了
end
Client ->> Server: データ取得リクエスト
```
10. ノート：Note
図の中に注釈（コメント）を挿入します。
- Note left of / right of：特定の要素の左右に配置します
- Note over：複数の要素をまたぐように配置します
```mermaid
sequenceDiagram
actor User
participant Client
Note left of User: 認証済み状態
User ->> Client: ログアウト
Note right of Client: セッション情報を破棄
Client -->> User: 完了メッセージ
```
まとめ
Mermaid.jsは、今回紹介した構文を組み合わせるだけで、実務で使う大体の図を書くことができます。「どう書くんだっけ？」となった際に、この記事を逆引き辞書として活用していただければ幸いです。