stack-diagramとは？
stack-diagramは、テクノロジースタックの自然言語による説明をアーキテクチャ図に変換するAIエージェントスキルです。アイコンの配置や接続線の描画を手動で行う代わりに、サービス、関係、プロトコル、デプロイフローを1文または短い段落で説明します。
たとえば、次のプロンプトでは、Webアプリケーション、そのAPI、データサービス、デプロイパイプラインを説明しています。
スタックを図示してください。Vercel上でNext.jsとHono APIを使用。Neon上にPostgres、認証にClerk、決済にStripe。GitHub Actionsでデプロイします。
このスキルは、Claude Code、Codex、Cursor、およびAgent Skills形式に対応するその他のエージェントで使用できます。
主な機能
- 自然言語入力：図の構文を書かずにアーキテクチャを説明できます。
- 公式ロゴ：SVGL、Devicon、gilbarbara/logos、公式ブランドリポジトリ、AWS Architecture Iconsパッケージなどのソースからロゴを取得します。
- 慎重なコネクタのルーティング：ラベルを避けて線を引くため、矢印がテキストを通過しません。
- ライトテーマとダークテーマ：すべての図を両方のテーマでレンダリングします。元のブランドカラーを維持するため、ロゴタイルは白のままです。
- 複数の出力形式：自己完結型HTMLファイル、PNG画像、依存関係のないReactコンポーネント、または共有可能なArtifactを生成できます。
- ポータブルHTML：フォントとロゴをインライン化するため、生成されたHTMLファイルはネットワーク接続なしで表示できます。
要件
スキルを使用する前に、環境が次の条件を満たしていることを確認してください。
- Python 3.9以降。
- ロゴの取得中にネットワークへ接続できること。
- 図をPNGファイルとして書き出す際の、Chromium対応Playwright。
- スキルに対応するAIコーディングエージェントまたはアプリケーション。
完成したHTML出力はオフラインで動作しますが、ロゴはスキルに同梱されずビルド時にダウンロードされるため、生成時にはネットワーク接続が必要です。
stack-diagramをインストールする
対応するコーディングエージェントにインストールする
ターミナルから次のコマンドを実行します。
npx skills add caru-ini/stack-diagramこれにより、Claude Code、Codex、Cursorなど、スキルエコシステムに対応するエージェントにスキルがインストールされます。
Claudeアプリにインストールする
アップロードしたスキルを受け付けるClaudeアプリでは、プロジェクトの最新リリースを開き、stack-diagram.zipをダウンロードして、そのZIPファイルをスキルとしてアップロードします。
最初のアーキテクチャ図を作成する
インストール後、エージェントにスタックの描画を依頼します。役立つプロンプトでは、主なテクノロジー、それらが実行される場所、相互の連携方法を指定します。
スタックを図示してください。Vercel上でNext.jsとHono APIを使用します。
Neon上にPostgres、認証にClerk、決済にStripeを使用します。
GitHub Actionsでデプロイします。この説明により、フロントエンド、API、データベース、認証プロバイダー、決済プロバイダー、デプロイワークフローを表現するために十分な情報がエージェントに伝わります。
関係を明示する
より正確な結果を得るには、重要なプロトコルやインタラクションの種類を含めます。ブラウザがHTTPS経由でアプリケーションにアクセスすること、APIがSQL経由でデータベースにクエリを実行すること、あるいはサービスがRPC呼び出しを行うことなどを指定できます。
ユーザーがHTTPS経由でVercel上のNext.jsにアクセスする構成を描いてください。
Next.jsはRPC経由でHono APIを呼び出します。
APIはSQL経由でNeonにクエリを実行し、セッションにはClerkを使用します。
GitHub Actionsでアプリケーションをデプロイします。プロジェクトは結果をレンダリングし、返す前に図を検査します。これにより、コネクタがラベルを横切るのを防ぎやすくなります。
図の開発ツール
stack-diagramはクラウドインフラストラクチャに限定されません。モノレポ、ローカルツール、テストランナー、コミットフック、継続的インテグレーション、パッケージ公開も可視化できます。
モノレポのツール構成を描いてください。Turborepo、Biome、Vitest、Lefthookを含むpnpmワークスペースです。GitHub ActionsでCIを実行し、npmに公開します。
この種のプロンプトでは、ワークスペースの境界、その内部で動作するツール、CIと公開を担う外部自動化を指定します。
AIアプリケーションを図示する
AIアプリケーションの図には、Webフレームワーク、モデルプロバイダー、ベクトルデータベース、バックグラウンドジョブ、コンテンツソースを組み合わせられます。対話的なリクエスト経路と、スケジュールされた取り込み処理の両方を説明してください。
ドキュメントチャットボットを描いてください。Vercel上のNext.jsがSupabase pgvectorを検索し、Claudeで回答します。Inngestが毎晩Notionを同期します。
ここでは、プロンプトによってユーザー向けの質問と回答のフローと、毎晩の同期処理が区別されています。
AWSインフラストラクチャを図示する
AWSアーキテクチャでは、サービスとネットワーク境界を直接指定します。stack-diagramはAWS公式のアーキテクチャアイコンを使用します。
AWS上のアプリを描いてください。パブリックサブネットでは、S3とALBの前段にCloudFrontを配置します。プライベートサブネットにはFargate、RDS、ElastiCacheを配置します。
この説明から、ルーティング層、静的ストレージ、ロードバランサー、パブリックサブネットとプライベートサブネットの分離が伝わります。
出力形式を選択する
デフォルトの結果は、自己完結型のHTMLファイルです。プロンプトで、サポートされている別の形式を直接指定することもできます。
- HTML： リポジトリ、社内ドキュメント、Wikiに最適です。フォントとロゴが1つのファイルに埋め込まれます。
- PNG： プレゼンテーションやドキュメントに便利です。PNGのエクスポートには、Chromiumを含むPlaywrightが必要です。
- Reactコンポーネント： Reactプロジェクトへの統合に適した、依存関係のないコンポーネントです。
- Artifact： Claudeを通じた公開や共有に適しています。
このスタックの図を、自己完結型のHTMLファイルとして作成してください：
Vercel上のNext.jsがHono APIを呼び出し、Hono APIがNeonにデータを保存します。PNGファイルとReactコンポーネントは同じ基盤HTMLファイルから生成されるため、出力形式間の一貫性を保ちやすくなります。
ライトテーマとダークテーマを使用する
各図はライトテーマとダークテーマで生成されます。公式ロゴが元の色を保てるよう、テクノロジータイルは白のままにし、グループラベルはダークテーマに適したブランドロゴへ切り替えられます。
リポジトリやWikiで出力を公開する場合、読者が異なるインターフェースの配色設定を使用する可能性があるなら、両方のテーマを利用できるようにしてください。
高度なプロンプトのヒント
トラフィックの方向を説明する
プロダクトの一覧からはスタックに何が含まれるかが分かりますが、方向を示す表現からはどのように動作するかが分かります。呼び出す、クエリを実行する、提供する、公開する、デプロイする、同期するなどの動詞を使いましょう。
境界と配置場所に名前を付ける
コンポーネントが同じデプロイメントを共有するのか、ワークスペースに属するのか、パブリックサブネットとプライベートサブネットのどちらに配置されるのかを明記してください。これらの詳細により、図で関連するコンポーネントを正しくグループ化しやすくなります。
スケジュールと自動化を含める
プロセスが毎晩、コミットごと、またはデプロイ中に実行される場合は、その情報を含めてください。バックグラウンドのワークフローとメインのリクエスト経路を区別するのに役立ちます。
必要な成果物を指定する
デフォルトのHTML形式ではなく、HTML、PNG、React、またはArtifactが必要な場合は、その形式を指定してください。共有しやすく、オフラインでも利用できる結果を求める場合は、自己完結型のHTMLファイルを指定してください。
ブランドアセットを変更しない
このプロジェクトはロゴの色変更や描き直しを行いません。ブランド名とロゴはそれぞれの所有者の商標であり、図に含まれていることは推奨や支持を意味しません。
ライセンスに関する考慮事項
このプロジェクトのコードとドキュメントにはMITライセンスが適用されます。付属フォントにはSIL Open Font License 1.1が適用されます。ロゴは同梱されておらず、生成時にサポート対象のロゴコレクション、AWS、Lucide、または公式ブランドのソースやリポジトリからダウンロードされます。
まとめ
stack-diagramを使うと、簡潔なアーキテクチャの説明を、公式ロゴ、分かりやすい経路表示、テーマ対応、複数のエクスポートオプションを備えた洗練されたビジュアルへすばやく変換できます。スキルをインストールし、コンポーネントと関係を明確に説明して、ドキュメントや共有のワークフローに合った出力形式を指定してください。