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 ofleft of、またはoverで1つ以上の参加者に対して配置できます。

ユースケース

セキュリティレビューのためにOAuth 2.0認可コードフローをドキュメント化するバックエンドエンジニアのケース。シーケンス図がブラウザ、認可サーバー、リソースサーバー間のトークン交換を示し、各リダイレクトとAPIコールの発生場所を明確にします。

試してみる — Mermaid Diagram Editor

フルツールを開く