システム設計の際、「図を作るのはいいけど、修正や管理が面倒……」と感じることは多いですよね。
そんな時に便利なのが 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は、今回紹介した構文を組み合わせるだけで、実務で使う大体の図を書くことができます。「どう書くんだっけ？」となった際に、この記事を逆引き辞書として活用していただければ幸いです。