architecture-diagram

アーキテクチャ図スキル

インライン SVG グラフィックを含む、プロフェッショナルなダークテーマの技術アーキテクチャ図を、単体の HTML ファイルとして生成します。外部ツールも API キーもレンダリングライブラリも必要ありません。HTML ファイルを書いてブラウザーで開くだけです。

対象範囲

最適な用途：

• ソフトウェアシステムアーキテクチャ（フロントエンド／バックエンド／データベースの各レイヤー）
• クラウドインフラストラクチャ（VPC、リージョン、サブネット、マネージドサービス）
• マイクロサービス／サービスメッシュのトポロジー
• データベースと API のマップ、デプロイ図
• ダークでグリッドを基調としたデザインに適した、技術インフラ関連のあらゆる題材

先にほかの方法を検討してください：

• 物理学、化学、数学、生物学などの科学分野
• 物理的なオブジェクト（乗り物、ハードウェア、解剖図、断面図）
• 間取り図、物語に沿った図、教育用／教科書風のビジュアル
• 手描きのホワイトボード風スケッチ（excalidraw を検討してください）
• アニメーションによる解説（アニメーションスキルを検討してください）

題材に特化したスキルが利用できる場合は、そちらを優先してください。適したものがない場合、このスキルは汎用的な SVG 図の代替手段としても使用できます。ただし、出力には以下で説明するダークな技術系のデザインが適用されます。

Cocoon AI の architecture-diagram-generator（MIT）をベースにしています。

ワークフロー

1. ユーザーがシステムアーキテクチャ（コンポーネント、接続、テクノロジー）を説明します
2. 以下のデザインシステムに従って HTML ファイルを生成します
3. write_file で .html ファイルに保存します（例：~/architecture-diagram.html）
4. ユーザーは任意のブラウザーで開けます。オフラインでも動作し、依存関係はありません

出力先

ユーザー指定のパスに図を保存します。指定がない場合は、現在の作業ディレクトリに保存します：

./[project-name]-architecture.html

プレビュー

保存後、ユーザーにファイルを開くよう案内します：

# macOS
open ./my-architecture.html
# Linux
xdg-open ./my-architecture.html

デザインシステムとビジュアル言語

カラーパレット（意味上のマッピング）

コンポーネントを分類するために、rgba の塗りつぶし色と 16 進数の線色を指定します：

コンポーネントの種類	塗りつぶし（rgba）	線色（Hex）
フロントエンド	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）

タイポグラフィと背景

• フォント： Google Fonts から読み込む JetBrains Mono（Monospace）
• サイズ： 12px（名前）、9px（サブラベル）、8px（注釈）、7px（小さなラベル）
• 背景： Slate-950（#020617）に控えめな 40px のグリッドパターン

<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 です。半透明の塗りつぶし越しに矢印が表示されるのを防ぐため、二重長方形マスキング技法を使用します：

1. 不透明な背景の長方形（#0f172a）を描画します
2. その上に半透明のスタイル付き長方形を描画します

接続ルール

• Z 順序： 矢印がコンポーネントのボックスの背後に描画されるよう、SVG 内で早い段階（グリッドの後）に描画します
• 矢印の先端： SVG マーカーで定義します
• セキュリティフロー： ローズ色（#fb7185）の破線を使用します
• 境界：
  • セキュリティグループ： ローズ色の破線（4,4）
  • リージョン： アンバー色の大きな破線（8,4）、rx="12"

間隔とレイアウトのロジック

• 標準の高さ： 60px（サービス）、80～120px（大きなコンポーネント）
• 垂直方向の間隔： コンポーネント間に最低 40px
• メッセージバス： サービスと重ねず、サービス間の隙間に配置する必要があります
• 凡例の配置： 重要。 すべての境界ボックスの外側に配置する必要があります。すべての境界のうち最も低い Y 座標を求め、その 20px 以上下に凡例を配置します。

ドキュメント構造

生成される HTML ファイルは、4 部構成のレイアウトに従います。

1. ヘッダー: 脈動するドットインジケーター付きのタイトルとサブタイトル
2. メイン SVG: 角丸のボーダーカード内に配置された図
3. サマリーカード: 図の下に配置された、高レベルの詳細を示す 3 枚のカードのグリッド
4. フッター: 最小限のメタデータ

情報カードのパターン

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

出力要件

• 単一ファイル: 自己完結型の .html ファイル 1 つ
• 外部依存なし: すべての CSS と SVG はインラインである必要があります（Google Fonts を除く）
• JavaScript なし: アニメーション（脈動するドットなど）には純粋な CSS を使用してください
• 互換性: あらゆるモダンな Web ブラウザーで正しくレンダリングされる必要があります

テンプレートリファレンス

正確な構造、CSS、SVG コンポーネントの例については、完全な HTML テンプレートを読み込んでください。

skill_view(name="architecture-diagram", file_path="templates/template.html")

テンプレートには、すべてのコンポーネントタイプ（フロントエンド、バックエンド、データベース、クラウド、セキュリティ）、矢印スタイル（標準、破線、曲線）、セキュリティグループ、リージョン境界、凡例の動作する例が含まれています。図を生成する際の構造上のリファレンスとして使用してください。