アーキテクチャ図が必要ですか?AIに作ってもらいましょう。

この特別なスキルを活 Claude.ai かして、数秒でプロフェッショナルな建築図を作成できます。システムを説明すれば、Claudeは美しいダークテーマの図を、どのブラウザでも開けるスタンドアロンのHTMLファイルとして作成します。

• デザインスキルは不要 — 建築をわかりやすい英語で説明すればいい
• 迅速に反復する — Claudeにコンポーネントの追加、レイアウトの変更、スタイルの更新を依頼する
• 簡単に共有できる — 出力は単一のHTMLファイルで、特別なソフトウェアは不要です
• エクスポート機能内蔵 — コピー/PNG / PDFボタンがすべての図に組み込まれています

🚀 クイックスタート(3ステップ)

ステップ1:スキルのインストール

⚠️無料、Pro、Max、Team、Enterpriseプランで利用可能です(コード実行はまず設定→能力で有効化する必要があります)

1. ダウンロード architecture-diagram.zip
2. 「claude.ai →に行く カスタマイズ → スキル
3. **+**ボタンをクリックし→ + スキル作成 → **スキルをアップロードし、その後zipファイルをアップロードします
4. スキルの切り替え

📚 助けが必要ですか?以下の完全なインストールガイドをご覧ください。

ステップ2:アーキテクチャを説明するテキストを入手

システムの説明文があれば十分です。

Architecture Diagram Generator

Need an architecture diagram? Get AI to build you one.

Use Claude.ai with this special skill to generate professional architecture diagrams in seconds. Describe your system, and Claude creates a beautiful, dark-themed diagram as a standalone HTML file you can open in any browser.

• No design skills needed — just describe your architecture in plain English
• Iterate quickly — ask Claude to add components, change layouts, or update styles
• Share easily — output is a single HTML file, no special software required
• Export built in — Copy / PNG / PDF buttons baked into every diagram

🚀 Quick Start (3 Steps)

Step 1: Install the Skill

⚠️ Available on Free, Pro, Max, Team, and Enterprise plans (Code Execution must be enabled in Settings → Capabilities first)

1. Download architecture-diagram.zip
2. Go to claude.ai → Customize → Skills
3. Click the + button → + Create skill → Upload a skill, then upload the zip file
4. Toggle the skill on

📚 Need help? See the full installation guide below.

Step 2: Get Text that Describes Your Architecture

You just need a text description of your system. Pick whichever works for you:

Option A: Have AI analyze your codebase

Open your code in Cursor, Claude Code, Windsurf, or ChatGPT and ask:

Analyze this codebase and describe the architecture. Include all major
components, how they connect, what technologies they use, and any cloud
services or integrations. Format as a list for an architecture diagram.

Option B: Write it yourself

Just list your components and how they connect:

- React frontend talking to a Node.js API
- PostgreSQL database
- Redis for caching
- Hosted on AWS with CloudFront CDN

Option C: Ask for a typical architecture

Don’t have a specific system? Ask Claude for a starting point:

What's a typical architecture for a SaaS application?

Step 3: Generate Your Diagram by Asking Claude to Use the Skill

Take the output from Step 2 and paste it into Claude (with the Architecture Diagram Generator skill installed):

Use your architecture diagram skill to create an architecture diagram from this description:

[PASTE YOUR ARCHITECTURE DESCRIPTION HERE]

That’s it! Claude will generate a beautiful HTML file you can open in any browser.

Then! You can iterate simply by using chat. Ask Claude: Please update XYZ to see your diagram update in real time. You can ask Claude to fix any issues you have with the diagram as well.

---

Example Prompts for Common Scenarios

For a web app:

Create an architecture diagram for a web application with:
- React frontend