ホワイトボードでシステム構成のブロック図を20分で描く方法と、AIが役立つ場面

システム構成図に描くべきもの

システム構成図は、あるソフトウェアについての1つの問いに、特定の読み手に向けて答えるものです。「決済はチェックアウトから銀行までどう流れるか」は問いです。「プラットフォームのすべて」は問いではなく、それに答えようとした図は誰も読めない40個の箱で終わります。

ほとんどのブロック図には次の3つが必要です。

• 箱。 それぞれが動いているもの、またはデータを保存するものです。Webアプリ、API、ワーカー、データベース、キューなど。
• 矢印。 それぞれが方向と動詞を持つ関係です。「注文を送る」「から読む」「イベントを発行する」など。
• システムの境界。 システムを使う人と、依存している外部システムです。決済サービスやメール配信サービスなど。

通常は不要なのが、インフラの詳細(ロードバランサー、サブネット、アベイラビリティゾーン)と、コードの詳細(クラス、関数)です。前者はデプロイについての問い、後者は1つのコンポーネントについての問いの場合だけ描きます。

C4の4つのレベルと、ホワイトボードに向いたレベル

Simon Brownが考案し、c4model.comで解説されているC4モデルは、どこまで描くかを決めるうえで私たちが知る限り最も役立つ方法です。システムを4段階のズームで表し、加えてシステムランドスケープ、動的な振る舞い、デプロイの補助図を定義しています。

実際には、プロジェクトのキックオフの最初の5分でレベル1を描き、残りの時間をレベル2に使います。レベル3は、議論が必要なほど複雑なコンテナがあるときに登場します。レベル4を手で描くことはほとんどありません。

ホワイトボードでブロック図を20分で描く方法

この方法は、物理的なホワイトボードでも、オンラインのキャンバスでも、紙でも使えます。時間配分は、Webフロントエンド、API、バックグラウンドジョブ、いくつかの外部サービスを持つSaaSプロダクトのような中規模システムを想定しています。

0〜3分:一番上に問いを書く

ボードの一番上に、この図が何に、誰のために答えるのかを1文で書きます。「予約がどう作成され確定されるか。新しいバックエンド開発者向け」で十分です。あとで加える箱はすべて、この1文に答える助けにならなければなりません。

3〜8分:人と外部システムを描く

周囲に、人(顧客、スタッフ、管理者)と外部システム(決済サービス、メール配信、カレンダーAPI)を描きます。自分たちが所有していないものは別の形か色にします。これがシステムコンテキストで、誰かが忘れていた依存関係がここで見つかることがよくあります。

8〜14分:コンテナを描く

中央に、動いているアプリケーションやデータストアごとに1つの箱を描きます。各箱には3行書きます。名前、括弧内に技術、役割を1文。「Booking API(Node.js)- 予約を作成・確定する」は、「API」とだけ書いた箱よりずっと役立ちます。箱は12個程度に抑えます。それ以上必要なら、2枚の図を描こうとしています。

14〜18分:動詞つきの矢印を描く

関係ごとに1本の矢印で箱をつなぎ、リクエストやデータの流れる方向に向けます。すべての矢印に動詞を書き、必要なら通信方式も添えます。「確認メールを送る(SMTP)」「空き状況を読む(HTTPS経由のJSON)」など。ラベルのない矢印こそ誤解の温床です。

18〜20分:凡例、タイトル、日付を加える

形、色、線種を説明する小さな凡例、どのC4レベルかを示すタイトル、今日の日付を書きます。日付は見た目以上に大事です。日付のない図は、事実でなくなったあとも長く信じられてしまいます。

ブロック図を読みやすく保つ表記ルール

• 種類ごとに形を1つ。 アプリケーションは長方形、データベースは円柱、人は人型アイコン。意味を混ぜないこと。
• 色は所有を表し、飾りではない。 たとえば自社のシステムは1色、外部システムはグレー。
• 矢印は一方向。 2つの箱が双方向にやり取りするなら、2本の矢印に2つの動詞を書きます。
• 孤立した箱を作らない。 すべての箱に少なくとも1本の矢印を。なければこの図には不要です。
• 近さではなく境界でまとめる。 自分のシステムに含まれるものを破線で囲み、境界をはっきりさせます。
• 略語ではなくラベルを書く。 「PSP」は部屋にいる人ごとに意味が違います。

具体例:予約プロダクトのコンテナレベル図

シンプルな予約プロダクトについて私たちが描くレベル2の図を、言葉で説明します。読みながら一緒に描いてみてください。

一番上:「予約がどう作成され確定されるか。新しいバックエンド開発者向け。C4コンテナレベル。2026年10月28日」

左側に人:顧客。右側にグレーの外部システムを3つ:決済サービス、メール配信サービス、Google カレンダー。

「予約システム」と名付けた破線の境界の中に、5つの箱:

1. Webアプリ(Next.js) - 空き状況を表示し、予約を受け付ける。
2. Booking API(Node.js) - 予約を検証し作成する。
3. ワーカー(Node.js) - 確認を送り、カレンダーを同期する。
4. データベース(PostgreSQL) - 予約、顧客、空き状況を保存する。
5. キュー(Redis) - ワーカーのジョブを保持する。

矢印:顧客「で枠を予約する」Webアプリ、Webアプリ「経由で予約を作成する(HTTPS)」Booking API、Booking API「を読み書きする」データベース、Booking API「で決済する」決済サービス、Booking API「に確認ジョブを積む」キュー、ワーカー「からジョブを取る」キュー、ワーカー「でメールを送る」メール配信サービス、ワーカー「に予定を作る」Google カレンダー。

箱が9つ、矢印が8本。新しい開発者でも1分かからずに読めます。

ホワイトボードかAI生成か:Miro AI、Eraser DiagramGPT、tldrawの比較

「ブロック図 ホワイトボード AI」の検索が増えているのは、テキストから下書きを生成するツールがいくつも出てきたからです。生成された下書きで省けるのは描く時間であって、考える時間ではありません。問い、レベル、箱はやはり自分で決める必要があります。以下は2026年10月時点の各社ページによる情報です。

Miro AI

MiroのAI図解ジェネレーターは、プロンプト、またはボード上の付箋のまとまりから、完全に編集可能な図を作ります。1回の生成で1クレジットを使い、Miroの料金ページではFreeが月10クレジット、Starterが1メンバー25、Businessが50となっています。C4やアーキテクチャ専用の種類はなく、フローチャートやUMLの選択肢と多少の手直しで仕上げます。チームがすでに使っているワークショップ用ボードの一部として図を描くなら良い選択です。

Eraser DiagramGPT

EraserのDiagramGPTは、3つの中で最もエンジニアリング寄りです。5種類の図の1つにクラウド構成図があり、結果は図形としても、Eraserのダイアグラム・アズ・コード構文でも編集できます。ラベルをテキストで直したほうが早いときに便利です。Eraserの料金ページでは無料プランのAIクレジットは3。試すには十分ですが、頼るには足りません。

tldraw

tldrawは、手描き風の見た目を持つ高速で無料のホワイトボードで、初期のスケッチに向いています。AIの取り組みは開発者向けで、tldraw SDKにはキャンバスを読んで編集するAIを作るためのエージェントのスターターキットがあり、tldrawのライセンスページではSDKの価格は要問い合わせです。tldraw.com自体に組み込まれたAI図解ジェネレーターは、提供元のページでは確認できなかったため、ここでは評価していません。

Visual ParadigmやLLMに書かせるMermaidも含めたより広い比較は、AIブロック図ツールの比較をご覧ください。

Atrixのホワイトボードの位置づけと、できないこと

Atrixは私たちが作っているツールなので、まず制限から書きます。Atrixのページには、Excalidrawのホワイトボードをブロックとして入れられます。白紙からでも、アーキテクチャやフローチャートを含む13種類のテンプレートからでも始められます。描くのは手作業で、Atrixのホワイトボードにはテキストから図を生成する機能はありません。その代わり、図はそれを説明する段落のすぐ下に置かれ、プロジェクトにひもづいたページの中で、リアルタイム共同編集、コメント、版の履歴とともに扱えます。

AtrixのAIが担うのは描画ではなく文章です。Developの実行はブリーフから要件、アーキテクチャドキュメント、計画された課題を作ります。アーキテクチャドキュメントはテキストなので、私たちはそれをもとに同じページのホワイトボードでコンテナ図を描きます。ホワイトボードで何ができるかはドキュメントとホワイトボードのページに、Developの実行で何が作られるかはAIエージェントのページに正確に書いています。プロンプトから図を描くツールが欲しいなら、Miro AIかEraserを使い、その結果をドキュメントからリンクしてください。

図の周りに置くドキュメントについては、AIでアーキテクチャドキュメントを書く方法をご覧ください。

よくある質問

ソフトウェアアーキテクチャにおけるブロック図とは何ですか?

ブロック図は、システムの主要な部分を箱で、その関係を矢印で示す図で、実装の詳細は含みません。C4の用語でいえば、ソフトウェアのブロック図の多くはシステムコンテキスト図かコンテナ図です。

ホワイトボードで構成図を描く最良の方法は?

図が答える問いを書き、先に人と外部システムを描き、次に中央にコンテナ、続いてラベルつきの矢印を描き、最後に凡例と日付を加えます。詳細度は1つのレベルに保ち、箱は10個前後にします。

AIでシステム構成図を描けますか?

下書きとしてなら描けます。Miro AIとEraser DiagramGPTはプロンプトから編集可能な図を生成し、どのLLMでもMermaidのコードを書いて別の場所で表示できます。ただし下書きは説明した内容しか反映しないので、箱と矢印はすべて確認が必要です。

C4モデルとは何ですか?

Simon BrownによるC4モデルは、ソフトウェアアーキテクチャをシステムコンテキスト、コンテナ、コンポーネント、コードの4つのレベルで表します。各レベルは1つ上のレベルを拡大したものです。システムランドスケープ、動的な振る舞い、デプロイの補助図も定義されています。

Atrixはテキストから図を生成できますか?

できません。Atrixのページにはアーキテクチャのテンプレートを含むExcalidrawのホワイトボードがあり、描くのは手作業です。AIエージェントはアーキテクチャドキュメントをテキストで書くので、同じページのホワイトボードでそれを図にできます。

次のステップ

ページを開き、アーキテクチャのテンプレートでホワイトボードを入れ、20分の手順でシステムのコンテナ図を描いてみてください。ページとホワイトボードの組み合わせ方はドキュメントとホワイトボードのページで紹介しています。

出典

2026年10月に確認:C4モデル、Miro AI図解ジェネレーター、Miroの料金、Eraser DiagramGPT、Eraserの料金、tldraw、tldrawのライセンス。