← すべての Skills · 画像

Architecture Diagrammer

コンポーネントと接続のプレーンテキスト仕様から、検証済みのSVGアーキテクチャ図を生成します。未知のエッジを破棄し、重複IDを拒否し、孤立要素と循環を指摘するレポート付きです。

対応： Claude Code, Codex, Cursor, Muse · バージョン 1.0.0 · 必要なもの： アーキテクチャ仕様（spec.txt：[components]は id: ラベル | 種別、[connections]は a -> b: ラベル）。

Premium でこの Skill を入手 プランを見る

プレビュー

出力サンプル

この Skill が生成するものの例です。サンプルコンテンツであり、説明用に表示しています。

Architecture Diagrammer report — sample

Diagram report: Shop API

Components: 5 | Edges drawn: 5 | Columns: 4

Components: Web App (client, column 0); API Server (service, column 1); Redis Cache (cache, column 2); Job Worker (service, column 2); Postgres (database, column 3).

Edges: Web App -> API Server: HTTPS; API Server -> Redis Cache: GET; API Server -> Postgres: SQL; API Server -> Job Worker: Enqueue; Job Worker -> Postgres: SQL.

Errors: none. Warnings: none.

Messy draft check: 5 components, 3 edges drawn, 2 errors (duplicate api id; edge to unknown ghost dropped), 4 warnings (unknown type, 2 orphans, cycle api -> db -> api).

得られるもの

• 検証済みSVG図：依存関係の列配置、ラベル付き矢印、循環は下方に迂回
• 図レポート：コンポーネント表・エッジ表とすべてのエラー・警告
• 描画前の検証：未知エッジの破棄と重複IDの拒否
• 図と一緒に管理できる仕様フォーマット

この Skill について

プレーンテキスト仕様（[components]にID・ラベル・種別、[connections]にラベル付き矢印）を読み取り、依存関係の列に配置したSVG図とdiagram-report.mdを出力します。レポートにはコンポーネント表・エッジ表・各要素の列・すべてのエラーと警告が含まれます。未知の要素を指す接続は描かれず破棄され、重複IDは最初の定義が残り、孤立要素と循環は隠さず報告されます。ローカル実行のみ、標準ライブラリのみ。図に現れるのは仕様に書かれたものだけで、補完のための推測はしません。

試してみる

この仕様から Shop API のアーキテクチャ図を描いてください。

こんな方に最適

• README・ドキュメント・PRレビュー用にシステムを記録する
• 共有前に手書きのアーキテクチャ草案を検証する
• 図を正直に保つ：書かれたものだけを描く

向いていない用途

• コードベースから図を逆生成すること——仕様は自分で書きます
• 欠けた要素・ストア・接続を推測で補完すること
• アーキテクチャ自体の正しさの証明——レポートがきれいでも仕様と一致しているだけです

インストール方法

1. インストールプロンプトをあなたのエージェントにコピーしてください： Read https://skillu.dev/install/agent.md, then install the Architecture Diagrammer skill (architecture-diagrammer).
2. または、公開後にこのページから Skill パッケージをダウンロードし、そのフォルダをエージェントの skills ディレクトリに配置します。
3. スラッシュコマンドで呼び出します。例：/architecture-diagrammer。あとは欲しいものをそのまま言葉で伝えるだけです。

よくある質問

Premium を入手 他の Skills を見る