シーケンス図 作成
誰が何を呼び出すか、どの順序で呼び出すかをマッピング。Mermaid記法で数行を書くと、APIコール、認証ハンドシェイク、メッセージフローのきれいなシーケンス図が即座にレンダリングされます — ブラウザで変換、アップロードされません。シーケンス図とは相互作用や通信フローを時系列で表した図であり、書き方は簡潔で直感的です。
1行に1ステップ。2スペース字下げすると上の行の下に分岐します。
シーケンス図はタイミングを明らかにする
シーケンス図は時間として上から下へ、参加者として左から右へ読むため、インタラクションを文書化する最も明確な方法です。OAuth ログイン、ウェブフック コールバック、マイクロサービス呼び出しチェーン、またはレース条件の再試行。実線矢印はリクエスト、破線矢印はレスポンス、メモは難しい部分を呼び出します。
各メッセージは1行のテキストなので、図は現実と同期したままです — 行を更新し、再描画し、完了。API文書または設計RFCに存在するはずです。
設計文書とPRのために構築
Mermaidブロックを直接GitHubプルリクエストまたは設計文書に貼り付けると、レビュアーはフローがインラインでレンダリングされるのを見ます。またはSVGをwikiにエクスポートし、PNGをスライドにエクスポート。すべてがデバイスで生成されるため、未発表の内部フローでもマシンから出ません。
シーケンス図とは — 書き方の基本
シーケンス図とは、オブジェクトやシステム間でやり取りされるメッセージを時間の流れに沿って表す UML 図です。縦軸が時間、横軸が参加者(アクター)を表し、上から下へ読むだけで「誰が・いつ・何を呼び出すか」が一目で分かります。ログイン認証、API 呼び出し、Webhook コールバックなど、順序が重要な処理の設計・共有に向いています。
シーケンス図の書き方はシンプルです。先頭に「sequenceDiagram」と書き、participant で登場人物を宣言し、あとは「A->>B: メッセージ」を1行ずつ並べるだけ。実線の矢印(->>)が呼び出し、破線の矢印(-->>)が応答を表します。このページでは入力した Mermaid がその場で描画されるので、書きながら図の形をすぐ確認できます。
よくある質問
シーケンス図とは何ですか？
シーケンス図とは、複数のアクター・オブジェクト間の相互作用やメッセージ交換を時系列で表現した図です。API呼び出し、認証フロー、マイクロサービス間の通信など、「誰が何を呼び出し、どの順序で実行されるか」を明確に示すのに適しています。このツールではMermaid記法を使ってシーケンス図を簡潔に記述できます。
シーケンス図の書き方（作成手順）は?
「sequenceDiagram」で始まり、参加者を宣言し、「A->>B: request」のような1行のメッセージを追加します。実線矢印（「->>」）はリクエスト、破線矢印（「-->>」）はレスポンスを表します。Mermaid記法を使うことで、複雑な相互作用も簡単に図にできます。代替パスには「alt … else … end」、繰り返しには「loop label … end」、メモには「Note over A,B: text」を使用。図がライブレンダリングされ、SVGまたはPNGにエクスポートできます。
代替、ループ、メモを表示できますか?
はい。「alt … else … end」を分岐に、「loop label … end」を繰り返しステップに、「Note over A,B: text」をアノテーションに使用します。上記のチートシートを参照してください。
シーケンス図はアップロードされていますか?
いいえ。Mermaidを使用してブラウザでローカルにレンダリングされるため、図テキスト（内部API詳細を含む）はデバイスから出ません。
メッセージに自動番号を付けることができますか?
はい — 「sequenceDiagram」直後に「autonumber」行を追加すると、すべてのメッセージが連続番号を取得します。これはドキュメント内のステップを参照するときに便利です。
オンラインで使える無料のシーケンス図ツールですか?
はい。インストールも登録も不要で、ブラウザだけで動くシーケンス図ツールです。テキスト(Mermaid)を入力するとその場で図が描画され、SVG / PNG で書き出したり、GitHub README 用の Markdown をコピーしたりできます。図のデータは端末から送信されないので、社内の API フローなど機密性の高い設計にも安心して使えます。