Agent Skills by ALSEL
Anthropic Claudeソフトウェア開発⭐ リポ 0品質スコア 50/100

architecture-diagram

システム・インフラ・クラウド・セキュリティ・ネットワークトポロジーなどの構成図を、洗練されたダークテーマのHTML+SVGファイルとして生成します。ユーザーがアーキテクチャ図や構成図の作成を依頼した際に使用します。

description の原文を見る

Create polished dark-themed architecture diagrams as self-contained HTML+SVG files. Use when the user asks for system, infrastructure, cloud, security, or network topology diagrams.

SKILL.md 本文

アーキテクチャ図スキル

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

Version 1.1 · MIT License · Authored by Cocoon AI

デザインシステム

カラーパレット

コンポーネントタイプごとにこれらのセマンティックカラーを使用してください:

コンポーネントタイプフィル (rgba)ストローク
Frontendrgba(8, 51, 68, 0.4)#22d3ee (cyan-400)
Backendrgba(6, 78, 59, 0.4)#34d399 (emerald-400)
Databasergba(76, 29, 149, 0.4)#a78bfa (violet-400)
AWS/Cloudrgba(120, 53, 15, 0.3)#fbbf24 (amber-400)
Securityrgba(136, 19, 55, 0.4)#fb7185 (rose-400)
Message Busrgba(251, 146, 60, 0.3)#fb923c (orange-400)
External/Genericrgba(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>

矢印のz順: 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
  • インラインコネクタ (メッセージバス): コンポーネント間のギャップ内に配置、オーバーラップさせない

垂直レイアウトの例:

コンポーネント A: y=70,  height=60  → y=130で終了
ギャップ:         y=130 to y=170   → 40pxギャップ, バスをy=140に配置 (20px高)
コンポーネント B: y=170, height=60  → y=230で終了

間違い: コンポーネント B が y=170 で始まるときにメッセージバスを y=160 に配置 (オーバーラップの原因) 正解: メッセージバスを y=140 に配置, 40px ギャップ (y=130 to y=170) の中央に配置

凡例の配置

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

  • すべての境界が終了する位置を計算 (y位置 + 高さ)
  • 凡例を最も低い境界より少なくとも20px下に配置
  • 必要に応じて SVG viewBox 高さを拡張

例:

Kubernetes クラスタ: y=30, height=460 → y=490で終了
凡例は以下から開始: y=510以降
SVG viewBox 高さ: 凡例に対応するため最低560

間違い: y=470の凡例が y=490で終了するクラスタ境界内 正解: クラスタ境界より下のy=510に凡例を配置, viewBox高さを拡張

レイアウト構造

  1. ヘッダー - パルス点インジケーター付きタイトル、サブタイトル、エクスポートツールバー
  2. メイン SVG 図 - 丸角ボーダーカード内に配置
  3. サマリーカード - 図下部の主要詳細3枚のカードグリッド
  4. フッター - 最小限のメタデータ行

エクスポートツールバー (組み込み)

すべての図には、ヘッダーに控えめな ⋯ トグルが付属しています。これをクリックすると3つのボタンが表示されます — 📋 Copy (高DPI PNG をクリップボードに, スケール: 2), 🖼️ PNG (高DPI PNG ダウンロード), 📄 PDF (jsPDF経由で1ページPDFに埋め込まれたPNG)。ツールバーはデフォルトではアイコンに折りたたまれるため、図を散らかしません。3つのすべての形式は同じ html2canvas キャプチャを使用するため (ツールバー除外, コンテンツの周りに32pxパディング), PDFはブラウザの印刷ダイアログを経由することなくダークテーマを保持します。

新しい図を生成する際、テンプレートに以下を保持します:

  • <head> 内の2つのCDNスクリプト (ピン留めされたバージョン, Subresource Integrity ハッシュと crossorigin="anonymous"付き):
    • https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js — integrity="sha384-ZZ1pncU3bQe8y31yfZdMFdSpttDoPmOZg2wguVK9almUodir1PghgT0eY7Mrty8H"
    • https://cdn.jsdelivr.net/npm/jspdf@2.5.2/dist/jspdf.umd.min.js — integrity="sha384-en/ztfPSRkGfME4KIm05joYXynqzUgbsG5nMrj/xEFAHXkeZfO3yMK8QQ+mP7p1/"
    • SRI は生成された図をCDN侵害に対する改ざん防止を保証します。ハッシュを変更しないでください; バージョンがバンプされる場合、新しいハッシュは新たに計算される必要があります。
  • 最も外側の .container div の id="report-container" (キャプチャされるもの)
  • @media print { .toolbar { display: none !important; } } を含む .toolbar マークアップ (.toolbar-actions デフォルトで折りたたまれ, .toolbar-toggle は ⋯ ボタン)
  • .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 ファイルを生成し、以下を含みます:

  • 埋め込み CSS (Google Fonts 以外に外部スタイルシートなし)
  • インライン SVG (外部画像なし)
  • JavaScript は不要 (純粋 CSS アニメーション)

ファイルはあらゆるモダンブラウザで直接開いて正しくレンダリングされる必要があります。エクスポートツールバーは2つのCDNスクリプト (html2canvas と jsPDF) を使用します — 他の JavaScript 依存関係はありません。

ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ

詳細情報

作者
cocoon-ai
リポジトリ
cocoon-ai/architecture-diagram-generator
ライセンス
MIT
最終更新
不明
GitHubで原本を見る →フィードバックを送る

Source: https://github.com/cocoon-ai/architecture-diagram-generator / ライセンス: MIT

関連スキル

汎用ソフトウェア開発⭐ リポ 39,967

doubt-driven-development

重要な判断はすべて、本番環境への展開前に新しい視点から対抗的レビューを実施します。速度より正確性が重要な場合、不慣れなコードを扱う場合、本番環境・セキュリティに関わるロジック・取り消し不可の操作など影響度が高い場合、または後でバグを修正するよりも今検証する方が効率的な場合に活用してください。

by addyosmani
汎用ソフトウェア開発⭐ リポ 1,175

apprun-skills

TypeScriptを使用したAppRunアプリケーションのMVU設計に関する総合的なガイダンスが得られます。コンポーネントパターン、イベントハンドリング、状態管理（非同期ジェネレータを含む）、パラメータと保護機能を備えたルーティング・ナビゲーション、vistestを使用したテストに対応しています。AppRunコンポーネントの設計・レビュー、ルートの配線、状態フローの管理、AppRunテストの作成時に活用してください。

by yysun
OpenAIソフトウェア開発⭐ リポ 797

desloppify

コードベースのヘルスチェックと技術負債の追跡ツールです。コード品質、技術負債、デッドコード、大規模ファイル、ゴッドクラス、重複関数、コードスメル、命名規則の問題、インポートサイクル、結合度の問題についてユーザーが質問した場合に使用してください。また、ヘルススコアの確認、次の改善項目の提案、クリーンアップ計画の作成をリクエストされた際にも対応します。29言語に対応しています。

by Git-on-my-level
汎用ソフトウェア開発⭐ リポ 39,967

debugging-and-error-recovery

テストが失敗したり、ビルドが壊れたり、動作が期待と異なったり、予期しないエラーが発生したりした場合に、体系的な根本原因デバッグをガイドします。推測ではなく、根本原因を見つけて修正するための体系的なアプローチが必要な場合に使用してください。

by addyosmani
汎用ソフトウェア開発⭐ リポ 39,967

test-driven-development

テスト駆動開発により実装を進めます。ロジックの実装、バグの修正、動作の変更など、あらゆる場面で活用できます。コードが正常に動作することを証明する必要がある場合、バグ報告を受けた場合、既存機能を修正する予定がある場合に使用してください。

by addyosmani
汎用ソフトウェア開発⭐ リポ 39,967

incremental-implementation

変更を段階的に実施します。複数のファイルに影響する機能や変更を実装する場合に使用してください。大量のコードを一度に書こうとしている場合や、タスクが一度では完結できないほど大きい場合に活用します。

by addyosmani
本サイトは GitHub 上で公開されているオープンソースの SKILL.md ファイルをクロール・インデックス化したものです。 各スキルの著作権は原作者に帰属します。掲載に問題がある場合は info@alsel.co.jp または /takedown フォームよりご連絡ください。
原作者: cocoon-ai · cocoon-ai/architecture-diagram-generator · ライセンス: MIT