architecture-diagram-generator — AI Skill by Cocoon-AI

Last updated: 2026-05-13 · Indexed by AgentSkillsHub · Auto-synced every 8h

About architecture-diagram-generator

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) Download Go to claude.ai → Customize → Skills Click the + button → + Create skill → Upload a skill, then upload the zip file 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: Op

Quick Facts

Stars	4,960
Forks	374
Language	HTML
Category	AI Skill
License	MIT
Quality Score	68.0283046435236/100
Last Updated	2026-05-13
Created	2025-12-22
Platforms	claude-code
Est. Tokens	~38k

Compatible Skills

These tools work well together with architecture-diagram-generator for enhanced workflows:

huashu-design — semantic(0.18)+complementary+same_lang+similar_pop+shared_platform (51%)
archify — semantic(0.45)+complementary+same_lang+shared_platform (51%)
fireworks-tech-graph — semantic(0.28)+complementary+similar_pop+shared_platform (50%)
drawio-skill — semantic(0.18)+complementary+similar_pop+shared_platform (46%)
wewrite — semantic(0.31)+complementary+similar_pop+shared_platform (46%)

More AI Skill Tools

Explore other popular ai skill tools:

View all AI Skill tools →

Popular HTML Agent Tools

douyin-mcp-server ⭐ 708 · MCP Server
N8N2MCP ⭐ 132 · MCP Server
mcp-memory ⭐ 126 · MCP Server
XActions ⭐ 346 · MCP Server
superdesign-mcp-claude-code ⭐ 68 · MCP Server

Frequently Asked Questions

What is architecture-diagram-generator?

architecture-diagram-generator is Generate beautiful dark-themed system architecture diagrams as standalone HTML/SVG files. Works as a Claude AI skill.. It is categorized as a AI Skill with 5.0k GitHub stars.

What programming language is architecture-diagram-generator written in?

architecture-diagram-generator is primarily written in HTML.

How do I install or use architecture-diagram-generator?

You can find installation instructions and usage details in the architecture-diagram-generator GitHub repository at github.com/Cocoon-AI/architecture-diagram-generator. The project has 5.0k stars and 374 forks, indicating an active community.

What license does architecture-diagram-generator use?

architecture-diagram-generator is released under the MIT license, making it free to use and modify according to the license terms.

View on GitHub → Browse AI Skill tools