architecture-diagram

アーキテクチャ図のスキル

インライン SVG グラフィックと CSS スタイリングを使用した、自己完結型の HTML ファイルとして、プロフェッショナルな技術アーキテクチャ図を作成します。

Version 1.1 · MIT License · 作成者：Cocoon AI

デザインシステム

カラーパレット

コンポーネントの種類に応じて、以下のセマンティックカラーを使用します。

コンポーネントの種類	塗りつぶし（rgba）	ストローク
フロントエンド	rgba(8, 51, 68, 0.4)	#22d3ee（cyan-400）
バックエンド	rgba(6, 78, 59, 0.4)	#34d399（emerald-400）
データベース	rgba(76, 29, 149, 0.4)	#a78bfa（violet-400）
AWS／クラウド	rgba(120, 53, 15, 0.3)	#fbbf24（amber-400）
セキュリティ	rgba(136, 19, 55, 0.4)	#fb7185（rose-400）
メッセージバス	rgba(251, 146, 60, 0.3)	#fb923c（orange-400）
外部／汎用	rgba(30, 41, 59, 0.5)	#94a3b8（slate-400）

タイポグラフィ

すべてのテキストに JetBrains Mono を使用します（等幅フォント、技術的な印象）。

<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">

フォントサイズ：コンポーネント名は 12px、サブラベルは 9px、注釈は 8px、小さなラベルは 7px です。

ビジュアル要素

背景： #020617（slate-950）に控えめなグリッドパターンを重ねます。

<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
  <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/>
</pattern>

コンポーネントボックス： 角丸の長方形（rx="6"）を使用し、ストロークは 1.5px、塗りつぶしは半透明にします。

セキュリティグループ： 破線のストローク（stroke-dasharray="4,4"）と透明な塗りつぶしを使用し、色はローズにします。

リージョン境界： より大きな破線のストローク（stroke-dasharray="8,4"）を使用し、色はアンバー、rx="12" にします。

矢印： 矢印の先端には SVG マーカーを使用します。

<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
  <polygon points="0 0, 10 3.5, 0 7" fill="#64748b" />
</marker>

矢印の重ね順： 接続矢印は SVG 内で早い段階（背景グリッドの後）に描画し、コンポーネントボックスの背後に表示されるようにします。SVG 要素はドキュメント順に描画されるため、先に描画した矢印は、後から描画する図形の背後に表示されます。

半透明の塗りつぶしの背後にある矢印を隠す： コンポーネントボックスの塗りつぶしには半透明の色（rgba(..., 0.4)）を使用するため、背後の矢印が透けて見えます。矢印を完全に隠すには、半透明のスタイル付き長方形を描画する前に、同じ位置に不透明な背景の長方形（例：fill="#0f172a"）を描画します。

<rect x="X" y="Y" width="W" height="H" rx="6" fill="#0f172a"/>

<rect x="X" y="Y" width="W" height="H" rx="6" fill="rgba(76, 29, 149, 0.4)" stroke="#a78bfa" stroke-width="1.5"/>

認証／セキュリティフロー： ローズ色（#fb7185）の破線を使用します。

メッセージバス／イベントバス： サービス間に小さなコネクター要素を配置します。オレンジ色（ストロークは #fb923c、塗りつぶしは rgba(251, 146, 60, 0.3)）を使用します。

<rect x="X" y="Y" width="120" height="20" rx="4" fill="rgba(251, 146, 60, 0.3)" stroke="#fb923c" stroke-width="1"/>
<text x="CENTER_X" y="Y+14" fill="#fb923c" font-size="7" text-anchor="middle">Kafka / RabbitMQ</text>

間隔のルール

重要： コンポーネントを縦に並べる場合は、重なりを避けるため適切な間隔を確保します。

• 標準的なコンポーネントの高さ： サービスは 60px、大型コンポーネントは 80～120px
• コンポーネント間の最小垂直間隔： 40px
• インラインコネクター（メッセージバス）： コンポーネントと重ならないよう、コンポーネント間の隙間に配置します

垂直レイアウトの例：

Component A: y=70,  height=60  → ends at y=130
Gap:         y=130 to y=170   → 40px gap, place bus at y=140 (20px tall)
Component B: y=170, height=60  → ends at y=230

誤り： コンポーネント B が y=170 から始まるのに、メッセージバスを y=160 に配置する（重なりが発生します） 正しい例： 40px の隙間（y=130～y=170）の中央となる y=140 にメッセージバスを配置します

凡例の配置

重要： 凡例はすべての境界ボックス（リージョン境界、クラスター境界、セキュリティグループ）の外側に配置します。

• すべての境界が終わる位置（y 位置 + 高さ）を計算します
• 最も下にある境界から少なくとも 20px 下に凡例を配置します
• 必要に応じて SVG の viewBox の高さを広げます

例：

Kubernetes Cluster: y=30, height=460 → ends at y=490
Legend should start at: y=510 or below
SVG viewBox height: at least 560 to fit legend

誤り： y=490 で終わるクラスター境界の内側、y=470 に凡例を配置する 正しい例： クラスター境界の下、y=510 に凡例を配置し、viewBox の高さを広げます

レイアウト構成

1. ヘッダー - 脈動するドットインジケーター付きのタイトル、サブタイトル、エクスポートツールバー
2. メイン SVG 図 - 角丸の境界を持つカード内に配置
3. サマリーカード - 図の下に、重要な詳細を記載した 3 枚のカードをグリッド配置
4. フッター - 最小限のメタデータ行

エクスポートツールバー（組み込み）

すべての図には、ヘッダーに目立たない単一の ⋯ 切り替えボタンが付属しています。クリックすると、3 つのボタンが表示されます。📋 コピー（クリップボードに高 DPI PNG をコピー、スケール：2）、🖼️ PNG（高 DPI PNG をダウンロード）、📄 PDF（jsPDF を使用して PNG を 1 ページの PDF に埋め込み）。ツールバーはデフォルトでアイコンに折りたたまれるため、図の邪魔になりません。3 つの形式すべてで同じ html2canvas キャプチャ（ツールバーを除外し、コンテンツの周囲に 32px の余白を追加）を使用するため、PDF はブラウザーの印刷ダイアログを経由せずにダークテーマを保持します。

新しい図を生成する場合は、テンプレート内の以下をそのまま維持してください。

• <head> 内の 2 つの CDN スクリプト（固定バージョン、Subresource Integrity ハッシュ、および crossorigin="anonymous" を設定）：
  • https://cdn.jsdelivr.net/npm/[email protected]/dist/html2canvas.min.js — integrity="sha384-ZZ1pncU3bQe8y31yfZdMFdSpttDoPmOZg2wguVK9almUodir1PghgT0eY7Mrty8H"
  • https://cdn.jsdelivr.net/npm/[email protected]/dist/jspdf.umd.min.js — integrity="sha384-en/ztfPSRkGfME4KIm05joYXynqzUgbsG5nMrj/xEFAHXkeZfO3yMK8QQ+mP7p1/"
  • SRI により、CDN が侵害された場合でも、生成される図が改ざんされにくくなります。ハッシュは変更しないでください。バージョンを上げる場合は、新しいハッシュを改めて計算する必要があります。
• 最も外側の .container div にある id="report-container"（これがキャプチャ対象です）
• .toolbar-actions（デフォルトで折りたたみ）と .toolbar-toggle（⋯ ボタン）を含む .toolbar マークアップ
• .toolbar CSS と @media print { .toolbar { display: none !important; } }
• </body> の前に配置する copyAsImage()、downloadPNG()、および downloadPDF() スクリプト。いずれも getBoundingClientRect() と html2canvas(document.body, { x, y, width, height, ignoreElements }) を使用して、余裕のある余白を確保し、ツールバーを含めずに正確な矩形領域をキャプチャします

注意事項：クリップボード API の使用にはユーザー操作とセキュアなコンテキスト（https/file/localhost）が必要です。SVG の <foreignObject> は html2canvas での描画に一貫性がないため、単純な <svg> 図形と <text> を使用してください。より高解像度で出力するには、scale: 2 を 3 または 4 に変更します。

コンポーネントボックスのパターン

<rect x="X" y="Y" width="W" height="H" rx="6" fill="FILL_COLOR" stroke="STROKE_COLOR" stroke-width="1.5"/>
<text x="CENTER_X" y="Y+20" fill="white" font-size="11" font-weight="600" text-anchor="middle">LABEL</text>
<text x="CENTER_X" y="Y+36" fill="#94a3b8" font-size="9" text-anchor="middle">sublabel</text>

情報カードのパターン

<div class="card">
  <div class="card-header">
    <div class="card-dot COLOR"></div>
    <h3>Title</h3>
  </div>
  <ul>
    <li>• Item one</li>
    <li>• Item two</li>
  </ul>
</div>

テンプレート

resources/template.html にあるテンプレートをコピーしてカスタマイズしてください。主なカスタマイズ箇所：

1. <title> とヘッダーテキストを更新します
2. 必要に応じて SVG の viewBox の寸法を変更します（デフォルト：1000 x 680）
3. コンポーネントボックスを追加、削除、または再配置します
4. コンポーネント間の接続矢印を描画します
5. 3 つのサマリーカードを更新します
6. フッターのメタデータを更新します

出力

以下を満たす、自己完結型の .html ファイルを必ず 1 つ作成してください。

• CSS を埋め込む（Google Fonts 以外の外部スタイルシートは使用しない）
• SVG をインラインで記述する（外部画像は使用しない）
• JavaScript は不要（CSS アニメーションのみ）

このファイルは、最新のブラウザーで直接開いたときに正しく表示される必要があります。エクスポートツールバーでは 2 つの CDN スクリプト（html2canvas と jsPDF）を使用します。それ以外の JavaScript 依存関係はありません。