2025年10月、Anthropic は Claude Skills メカニズムを正式にリリースし、開発者が特定の機能を再利用可能なモジュールとしてパッケージ化できるようにしました。数ヶ月で、Skills エコシステムは急速に拡大しました。多くの人々は、Skills が概念実証の段階を超えて、実際の問題を解決することを期待していました。しかしすぐに、ほとんどの Skill は「使い方」を模索している段階に留まり、実際に実用化・効率化できるものはほとんどないことが明らかになりました。
最近、Architecture Diagram Generator というプロジェクトが GitHub でオープンソース化されました。このプロジェクトは、アーキテクチャ図作成のハードルをほぼゼロに引き下げる、非常に直接的なアプローチを取っています。プロジェクトのスター数はすでに3000を超えています。Skills エコシステムにおいて、これは真に使いやすい最初期のスキルの一つです。
簡単に言うと、Architecture Diagram Generator は Claude AI スキルです。システムのアーキテクチャを自然言語で説明すると、それがプロフェッショナルなアーキテクチャ図を生成し、単独の HTML ファイルとして出力します。このファイルはブラウザで直接閲覧可能です。デザインスキル不要、作図ツールの学習不要、ソフトウェアのインストールすら不要です。Claude で文字を打てるだけで良いのです。
見所1: 自然言語入力、シンタックスを学ぶ必要なし
以前、アーキテクチャ図を作成するには、まずツールを学ぶ必要がありました。Draw.io の操作、Lucidchart のコンポーネントライブラリ、Mermaid の構文ルール— それぞれに学習コストがありました。このスキルのアプローチは、あなたが人間の言葉を話せれば良いだけです。例えば、典型的な Web アプリケーションのアーキテクチャ図を作成したい場合、Claude に直接「React フロントエンド、Node.js API、PostgreSQL データベース、Redis キャッシュ、JWT 認証を含むアーキテクチャ図を作成して」と入力するだけです。Claude がこのスキルを呼び出し、完全な HTML ファイルを生成します。ブラウザで開けば、レイアウトが明確で、色分けされたアーキテクチャ図が表示されます。コンポーネントをドラッグしたり、スタイルを調整したりする必要は一切ありません。頭の中のイメージを言葉で説明するだけで良いのです。
見所2: ダークテーマ、一瞬でプロフェッショナル感
ほとんどのアーキテクチャ図ツールのデフォルトは白背景で、ドキュメントの挿絵のように見えます。このスキルで生成される図表は、Slate-950 のダーク背景、40px のグリッドパターン、JetBrains Mono フォントを使用しており、技術的なダッシュボードのような印象を与えます。このビジュアルスタイルは実用的で、ダーク背景はプレゼンテーションで目立ちやすく、ドキュメント内でも際立ち、技術的な雰囲気を漂わせます。これにより、図表は下書きではなく、正式な成果物のように見えます。
見所3: 単一ファイル出力、共有が非常にシンプルに
生成されるアーキテクチャ図は、単一の独立した HTML ファイルです。すべてのスタイル、フォント、SVG グラフィックが埋め込まれており、外部依存がありません。ファイルを同僚に送るだけで、ダブルクリックして開いて見てもらえます。プラグインのインストールも、アカウントへのログインも不要です。極めてシンプルです。PDF が必要な場合は、ブラウザの印刷機能で PDF にエクスポートできます。共有コストはゼロです。
見所4: 意味的カラーリング、コンポーネントタイプが一目瞭然
このスキルは、コンポーネントのタイプに基づいて自動的に色を割り当てます：
- シアン(Cyan): フロントエンド、クライアント、UI のデザインでよく使われます。
- エメラルド(Emerald): バックエンド、API、サービスのデザインでよく使われます。
- バイオレット(Violet): データベース、ストレージ、AI/ML のデザインでよく使われます。
- アンバー(Amber): クラウドサービス、インフラストラクチャの作図でよく使われます。
- ローズ(Rose): 認証、セキュリティ、暗号化のシナリオにマッチします。
- スレート(Slate): 外部システム、決済、SMS、メールなどのサードパーティサービスのデザインに使われます。
このカラーコーディングは無作為ではなく、コンポーネントの意味的な役割に基づいています。シアンを見ればフロントエンド、紫色を見ればデータ層と分かります。この一貫性により、図表の可読性が大幅に向上します。
見所5: 会話型での繰り返し編集、図の描き直し不要
最初に生成された図表のレイアウトは完璧でないかもしれません。例えば、データベースを右に移動したい、特定の接続にプロトコルラベルを付け加えたいなど。従来のツールでは、コンポーネントを手動でドラッグし、接続を調整する必要がありました。このスキルでは、Claude に対して会話を続けるだけです。「データベースを右側に移動して、API とデータベース間の接続に PostgreSQL プロトコルとラベルを付けて」といった具合です。Claude が HTML を再生成し、変更後の結果をすぐに確認できます。チャットを通じて図表を調整することは、コードを修正するのと同じくらい自然になります。どのボタンがどこにあるかを覚える必要はなく、望む変化を言葉で説明するだけで良いのです。
実際のユースケース:
プロジェクトでは、日常開発、技術検討、コード分析などの場面で想定されるケース例も提供されています。
- AWS Serverless アーキテクチャ: Serverless アプリケーションを設計中で、チームに素早くアーキテクチャ図を見せたいとします。入力例: 「CloudFront CDN、API Gateway、Lambda 関数 (Node.js)、DynamoDB、S3 静的リソース、Cognito 認証を含む AWS Serverless アーキテクチャ図を作成して」。生成された図表は、クラウドサービスコンポーネントをアンバー、フロントエンドをシアン、データベースをバイオレットで自動的にマークアップします。CloudFront が最前面、API Gateway が中央、Lambda と DynamoDB がバックエンドと、階層が明確になります。このような図表は技術設計書にそのまま使用でき、手動作図の30分を節約できます。
- マイクロサービスアーキテクチャ: マイクロサービスアーキテクチャは通常コンポーネント数が多く、接続が複雑で、手書きでは乱雑になりがちです。入力例: 「React Web アプリとモバイルクライアント、Kong API Gateway、User Service (Go)、Order Service (Java)、Product Service (Python)、PostgreSQL、MongoDB、Elasticsearch、Kafka、Kubernetes を含むマイクロサービスアーキテクチャ図を作成して」。生成された図表は、3つのマイクロサービスをグループ化し、データベース層を別途集約し、メッセージキューとオーケストレーション層を明確にラベル付けします。全体のレイアウトはデータフローに基づいて自動的に配置されるため、コンポーネントが重なり合うことはありません。このような複雑なアーキテクチャ図を手動で描くには1、2時間かかるかもしれませんが、このスキルを使えば、数分で下図を生成し、さらに会話で微調整できます。
- コードリポジトリからアーキテクチャ図を生成: 既存のプロジェクトがあり、Claude にコードリポジトリを分析させてアーキテクチャ図を生成させたい場合は、まず他の AI ツールでコードを分析し、その説明を Claude に貼り付けます。例えば、Cursor や Claude Code で「このコードリポジトリを分析し、主要なコンポーネント、接続方法、技術スタック、クラウドサービス統合を含むアーキテクチャを記述し、アーキテクチャ図用の説明リストとしてフォーマットして」と入力します。その出力結果をこのスキルがインストールされた Claude に貼り付け、「アーキテクチャ図スキルでこの説明から図表を生成して」と付け加えます。これで、コードから直接図表へ、手動での整理を挟まずに進むことができます。
使い方:
このスキルを使用するには、Claude Pro、Max、Team、または Enterprise プランが必要です（無料ユーザーは現在 Skills を使用できません）。
- GitHub から
architecture-diagram.zipファイルをダウンロードします。 - claude.ai を開き、Settings（設定） > Capabilities（機能） > Skills に移動します。
- 「+ Add（追加）」をクリックし、ZIP ファイルをアップロードして、スキルを有効にします。
使用方法:
Claude で、以下のようなプロンプトを入力します：「アーキテクチャ図スキルを使用して、次のようなアーキテクチャ図を作成して：[あなたのアーキテクチャ説明]」。Claude が HTML ファイルを生成します。ダウンロードしてブラウザで開きます。初回生成のレイアウトが気に入らない場合は、会話を続けて調整します。例えば、「データベースを右下に移動して」「この接続に HTTPS ラベルを付けて」「これら3つのサービスを1つのセキュリティグループにまとめて」など。
注意点・制限事項:
- プラットフォーム制限: Claude.ai および Claude Code 内でのみ利用可能で、ChatGPT などの他の AI プラットフォームでは使用できません。
- 機能制限: 生成される図表は静的で、マルチユーザーのリアルタイム共同編集はサポートされていません。チームでのオンラインホワイトボード共同作業には、Miro や FigJam を使う必要があります。
- 大規模図表: システムに数十のコンポーネントがある巨大なアーキテクチャ図の場合、SVG ファイルが大きくなる可能性があります。HTML ファイルも大きくなりますが、通常、開く速度には影響しません。
- カスタマイズ: 現在、カラースキームは固定の6色で、カスタムのコンポーネントアイコンや色はサポートされていません。特殊なビジュアル要件がある場合は、生成された HTML ファイルを手動で編集する必要があるかもしれません。
最後に
Visio から Draw.io、Lucidchart から Mermaid へと、「開発者がより簡単にアーキテクチャ図を描けるようにする」というビジョンは何年も語られてきました。しかし、これまでのほとんどのソリューションは、ツールの学習が必要か、手動操作が必要かのどちらかを避けられませんでした。Architecture Diagram Generator は異なる道を歩もうとしています。それは、新しい作図ツールを作るのではなく、Claude Skill として機能をパッケージ化し、ユーザーが慣れ親しんだ会話インターフェース内で作業を完了できるようにします。技術的実装から見ると、単一ファイル HTML 出力、依存関係ゼロ、意味的カラーコーディングといった設計は、ツールの価値を最大化しつつ、使用コストを最小限に抑えています。これが変えるものは、おそらく「アーキテクチャ図」そのものだけでなく、技術文書の生成方法そのものでしょう。あなたはもう、各作図ツールの使い方を学ぶ必要はありません。AI にあなたが何を欲しているかを伝えるだけです。
プロジェクトは MIT ライセンスの下でオープンソース化されており、商用利用や二次開発が可能です。興味のある方は、ぜひ試してみてください。
オープンソースアドレス: https://github.com/Cocoon-AI/architecture-diagram-generator
