mcpField
A
architecture-diagram

architecture-diagram

github.com/pedronauck開発646303 回インストール1 週間前に更新
リポジトリ

architecture-diagram について

自己完結型 HTML のアーキテクチャ図を作成するスキルです。技術文書やシステム設計向けに、視覚スタイル、レイアウト、出力要件を定めています。

主な機能

  1. 01SVG と CSS の埋め込み
  2. 02コンポーネント別の配色
  3. 03矢印と境界の描画指針
  4. 04間隔と凡例配置のルール
  5. 053 枚の概要カードとフッター

活用シーン

  1. 01システムアーキテクチャの文書化
  2. 02サービスやデータフローの図示
  3. 03セキュリティ境界を含む図の作成

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/pedronauck/skills --skill architecture-diagram

インストール後、Claude Code で/architecture-diagramを入力して読み込まれたか確認します。

同梱ファイルassets/template.html

詳細

アーキテクチャ図スキル

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

デザインシステム

カラーパレット

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

コンポーネントの種類塗り（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. フッター - 最小限のメタデータ行
コンポーネントボックスのパターン
<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>

テンプレート

assets/template.html のテンプレートをコピーしてカスタマイズします。主なカスタマイズ箇所は次のとおりです。

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

出力

常に、次の条件を満たす自己完結型の単一の .html ファイルを生成してください。

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

最新のブラウザーで直接開いたときに、正しく表示されるファイルにしてください。

コメント

Markdown 対応