architecture-diagram

アーキテクチャ図

確定した設計、つまりコンポーネントとその接続をまとめたリストを、洗練された自己完結型の HTML + SVG 図に変換します。コンポーネントはボックス、矢印は通信／データフロー、破線の境界はリージョンまたは信頼ゾーンを表します。これはプラグイン全体の図作成エンジンです。図を描く段階になったら、オーケストレーターと構成要素からここに引き継ぎます。

自己完結型になるよう設計されています。インライン SVG と CSS を含む単一の HTML ファイルで、システムの等幅フォントを使用するため、Web フォントの取得は不要です。また、描画に依存関係はなく、完全オフラインで動作します。唯一の外部呼び出しは、オプションの PNG／PDF エクスポートに使用する、バージョン固定かつ SRI で保護された 2 つの CDN スクリプトです。これらを削除しても図は引き続き表示され、エクスポートボタンだけが使えなくなります。

このスキルを使うタイミング

推論ループのステップ 3（高レベル設計）とステップ 6（詳細設計）、および設計を図にできるほど明確になったタイミングで使います。つまり、コンポーネントのリストとその接続がわかっている状態です。障害時のフロー図（ステップ 5）にも使います。劣化時のフローを示すことも設計の一部です。

使わないタイミング

設計がまだ確定していない段階では使いません。まだ必要性が定まっていないボックスは描かないでください（これは失敗モード #7 です）。初期検討では、会話中に手早く ASCII でスケッチしても構いません。コンポーネントを採用する根拠が固まってから、このスキルで図を作成します。

図の作成方法

1. 設計から仕様を集めます。コンポーネント（それぞれの種類を含む）のリスト、方向付きの接続（プロトコル／ラベルを含む）、およびリージョン／境界のグループをまとめます。system-design の設計ドキュメントで、すでにこれらが作成されています。
2. テンプレートをコピーします。assets/template.html を作業用ファイルにコピーします。ダークテーマ、グリッド背景、フォント、エクスポートツールバー、サマリーカードのレイアウトが含まれているため、そのまま維持してください。
3. 各コンポーネントを意味的な種類（色）に対応付けます。下の表を使います。
4. ボックスを配置して矢印を描きます。配置と間隔のルールは references/design-system.md に従います（矢印はボックスの後ろに配置されるよう先に描画します。半透明の塗りつぶしで矢印をマスクします。垂直方向には 40px 以上の間隔を空けます。凡例は境界ボックスの外側に配置します）。
5. フローにラベルを付けます。リクエストの順序がわかるよう矢印に番号を付けます。非同期／レプリケーション／フォールバックには破線の矢印を使い、リージョンやセキュリティグループには破線の境界を使います。
6. サマリーカードに入力します。主要な決定事項とトレードオフ（設計ドキュメントに関連する内容）を記載し、タイトルとフッターを更新します。
7. 開いて確認します。open <file>.html で表示できます。ツールバーから PNG／PDF をエクスポートできます。

意味的な色（コンポーネントを種類に対応付け）

これらの色は、構成要素がシステムをどう捉えるかに合わせています。

コンポーネントの種類	塗り（rgba）	線	用途
フロントエンド／クライアント	rgba(8,51,68,0.4)	#22d3ee	Web／モバイルクライアント、エッジ
バックエンド／サービス	rgba(6,78,59,0.4)	#34d399	アプリ／API サービス、ワーカー
データベース／ストア	rgba(76,29,149,0.4)	#a78bfa	SQL／NoSQL、オブジェクトストア
キャッシュ	rgba(8,51,68,0.4)	#38bdf8	Redis／Memcached、CDN キャッシュ
メッセージバス／キュー	rgba(251,146,60,0.3)	#fb923c	Kafka、SQS、キュー、ストリーム
クラウド／マネージド	rgba(120,53,15,0.3)	#fbbf24	マネージドサービス、リージョン
セキュリティ／認証	rgba(136,19,55,0.4)	#fb7185	ゲートウェイ、認証、ファイアウォール
外部／汎用	rgba(30,41,59,0.5)	#94a3b8	サードパーティ、DNS

スタイル、矢印マーカー、マスキング、間隔、凡例のルールについて詳しくは references/design-system.md を参照してください。

出力ルール

• 自己完結型の .html ファイルを 1 つ作成します。CSS と SVG はインラインで記述し、外部画像は使いません。
• バージョン固定された 2 つの CDN スクリプト（html2canvas + jsPDF）は、SRI ハッシュとともに維持してください。これらはコピー／PNG／PDF エクスポートにのみ使用します。スクリプトがなくても図は完全に表示され、エクスポート時だけ必要になります。
• SVG の <foreignObject> は使わないでください（html2canvas で一貫して描画されないため）。代わりに <rect>／<text> を使います。
• 高レベルの図ではコンポーネントを 8～15 個程度に抑えます。すべてを 1 枚に詰め込むのではなく、詳細設計では 1 つのサブシステムに焦点を当てます。

すべきこと・すべきでないこと

すべきこと：

• 設計が安定してからのみ図を描き、設計ドキュメントですでに作成されたコンポーネント一覧と接続を描画します。
• すべてのボックスを色の表にあるセマンティック型に対応付け、一目で図を読み取れるようにします。
• ボックスより先に矢印を描いて背面に配置し、リクエスト順に番号を付けます。また、破線の矢印は非同期処理、レプリケーション、フォールバックに限って使います。
• コンポーネントは約8～15個にとどめます。全体を詰め込んだ図にするのではなく、サブシステムを1つ選んで詳細を掘り下げます。
• オフラインでも描画できるよう、インラインCSS／SVGとシステムの等幅フォントを使い、外部画像を使わず、ファイルを自己完結させます。

すべきでないこと：

• Mermaidを埋め込んだり、別の図の規約を作ったりしないでください。このスキルを唯一のエンジンとして使います。
• SVGの<foreignObject>は使わないでください（html2canvasでの描画に一貫性がありません）。プレーンな<rect>／<text>を使います。
• 固定されたCDNスクリプトのSRIハッシュを削除したり書き換えたりしないでください。バージョンを上げる場合にのみ再計算します。
• 境界ボックス内に凡例を置いたり、コンポーネント同士の間隔を40px未満にしたりしないでください。どちらも重なりの原因になります。
• 特定のClaude送信手段へのハード依存を追加しないでください。既定の方法は自己完結型の「プロンプトをコピー」ボタンです。

インタラクティブ／共同作業モード（任意）

ユーザーと一緒に反復して作業する場合は、レイヤーの切り替え、接続タイプのフィルター、ズーム、クリックしてコメントを追加する機能を備えたインタラクティブ版を使えます。コメントから「コピー」ボタン付きのフィードバック用プロンプトを作成できます。references/interactive.mdを参照してください。機能を利用できない場合も適切に動作し、「プロンプトをコピー」ボタンは常に使えます。「Claudeに送信」ボタンをリアルタイムで使えるのは、別途プロンプト転送プラグイン（例：playground-sync）がインストールされている場合に限られます。このプラグインは、そのようなプラグインを必要とせず、同梱もしません。

関連する構成要素

• system-design — オーケストレーターが「図を描く」ステップで呼び出します。図に何を描くかは、その設計メモに基づきます。
• 任意の構成要素 — 「Diagram」セクションに「architecture-diagramで描画」と記されている構成要素が呼び出します。このスキルはすべての構成要素の図を描画します。図の生成を担い、各構成要素は独自の仕組みを提供する代わりにここを参照します。

参考資料

• references/design-system.md — 色、矢印マーカー、重ね合わせ順／マスキング、間隔、凡例の配置、エクスポートツールバーの内部構造を説明しています。描画前に読んでください。
• references/interactive.md — インタラクティブ／コメント可能な図のパターンと、任意のClaude送信手段について説明しています。インタラクティブなマップを作成する場合にのみ読んでください。

アセット

• assets/template.html — エクスポートツールバーを備えた、ダークテーマの自己完結型HTML+SVGのひな形です。コピーしてカスタマイズしてください。