本文へスキップ
BecomeCoder

Markdownコース · 第3章 図を描く · レッスン9

シーケンス図 ― やりとりの流れ

ローカル実施

導入

シーケンス図 は、複数の登場人物(利用者やシステム)の間で、メッセージが どの順番でやりとりされるか を時間軸に沿って表す図です。API の呼び出し順や、ログイン処理の流れを説明するのにぴったりです。

説明

sequenceDiagram で始め、participant で登場人物を宣言し、矢印 でメッセージのやりとりを上から時系列に並べます。

  • participant 名前 … 登場人物(縦のライフライン)を宣言。
  • A->>B: メッセージ … A から B への 実線の矢印(呼び出し・依頼)。
  • B-->>A: メッセージ … B から A への 点線の矢印(返答・戻り値)。
sequenceDiagram
    participant User as 利用者
    participant App as アプリ
    participant DB as データベース
    User->>App: ログイン要求
    App->>DB: ユーザーを照会
    DB-->>App: ユーザー情報
    App-->>User: ログイン成功

上から下へ時間が流れます。「利用者がアプリに要求 → アプリが DB に照会 → DB が返答 → アプリが利用者に結果を返す」という順番が、そのまま図の上下で読み取れます。

読んでみよう

実線(->>)は「お願い・呼び出し」、点線(-->>)は「その返事」という対応を意識すると、往復のやりとりが一目で追えます。as を使うと User のような短い識別子に「利用者」という表示名を付けられ、図が読みやすくなります。