シーケンス図の書き方 — 処理の流れを可視化する

設計書に文章だけを書き連ねても、処理の流れは伝わりにくいものです。 「どの順番で」「誰が」「何をするか」を一目で把握するために、図を使います。

この章では、代表的な3つの図——フローチャート、スイムレーン図、シーケンス図——の使い分けと、Mermaidでの書き方を整理します。

フローチャート — 分岐ロジックの可視化

フローチャートは処理のステップと分岐を直線的に表現します。 1つのシステム・1人のアクターの処理を追うのに向いています。

フローチャートは分岐の全体像を俯瞰するのに適していますが、「誰が」その処理をしているかが見えにくいという弱点があります。 1つのフローの中に「フロントの処理」「バックエンドの処理」「DBの処理」が混在すると、責任の所在が曖昧になります。

いつフローチャートを使うか

• 分岐条件が多いビジネスロジック（割引計算、ステータス遷移など）
• 単一コンポーネント内の処理手順
• エラーハンドリングの全体像

スイムレーン図 — 「誰が何をするか」を明確にする

スイムレーン図は、フローチャートにアクター（担当者・システム）のレーンを加えたものです。 複数のアクターが関わる処理では、フローチャートよりも「責任の所在」が一目で分かります。

レーンの境界がそのまま責任の境界になるため、「ここまではフロントの仕事、ここからはバックエンド」と視覚的に合意できます。

いつスイムレーン図を使うか

• フロントエンド・バックエンド・外部サービスなど複数システムが連携する処理
• 設計レビューで「どこまでがどのレイヤーの責任か」を合意したいとき
• マイクロサービス間の連携フロー

シーケンス図 — 時系列のメッセージ交換

このセクションは現在執筆中です。

• シーケンス図の基本記法（ライフライン、メッセージ、アクティベーション）
• MermaidのsequenceDiagram構文
• 同期・非同期メッセージの書き分け
• ループ・条件分岐の表現（alt / loop / opt）

フローチャート・スイムレーン・シーケンス図の使い分け

図	焦点	適するケース
フローチャート	処理の分岐	単一コンポーネントのロジック、分岐条件の整理
スイムレーン図	責任の所在	複数アクターの連携、責任分界点の合意
シーケンス図	時系列のやりとり	リクエスト→レスポンスの往復、非同期処理の順序

ちゃんと使うためのポイント

• フローチャートは分岐ロジックの整理に、スイムレーンは責任分界点の明確化に使う
• 複数アクターが絡む処理をフローチャートだけで書くと「誰の責任か」が曖昧になる
• シーケンス図はリクエスト→レスポンスの往復を時系列で示したいときに最適
• すべての処理を図にする必要はない——分岐が多い処理や複数システムが連携する処理に絞る

次の章では、ユーザーの操作に伴うページ間の移動を設計する画面遷移図を解説します。