This project provides an AI-powered solution for generating system architecture diagrams, targeting developers and technical users who need to visualize complex systems quickly. It leverages Claude AI as a skill to transform plain English descriptions into professional, dark-themed, standalone HTML/SVG diagrams, eliminating the need for manual design effort and simplifying sharing.

How It Works

The core approach integrates with Claude AI as a specialized skill. Users provide a textual description of their system architecture, which Claude processes using the skill. The skill then generates a self-contained HTML file containing an SVG diagram. This method prioritizes ease of use, allowing users to iterate on designs simply by chatting with Claude, and offers a clean, dark-themed aesthetic with semantic color coding for different component types.

Quick Start & Requirements

• Primary install: Download architecture-diagram.zip, navigate to claude.ai → Settings → Capabilities → Skills, click + Add, upload the zip file, and toggle the skill on.
• Prerequisites: Requires a Claude Pro, Max, Team, or Enterprise plan.
• Getting Architecture Description: Analyze a codebase using tools like Cursor or Claude Code, write a manual list of components and connections, or ask Claude to generate a typical architecture.
• Generate Diagram: Prompt Claude with: "Use your architecture diagram skill to create an architecture diagram from this description: [PASTE YOUR ARCHITECTURE DESCRIPTION HERE]".
• Links: Official guide for using Skills in Claude: https://claude.ai/help/using-skills-in-claude (Note: This link is inferred from the text, not directly browsed).

Highlighted Details

• Features a beautiful dark theme with a Slate-950 background and subtle grid pattern.
• Employs semantic color coding for component types (Frontend, Backend, Database, Cloud, Security).
• Outputs a single, self-contained HTML file with embedded CSS and inline SVG, requiring no external dependencies.
• Utilizes professional typography with JetBrains Mono and smart layering for clean arrow rendering.

Maintenance & Community

Developed by Cocoon AI (hello@cocoon-ai.com). Suggestions and improvements are welcomed via GitHub issues for bugs/feature requests or pull requests for enhancements.

Licensing & Compatibility

The project is released under the MIT License, permitting free use, modification, and distribution. This license is compatible with commercial use and linking within closed-source projects.

Limitations & Caveats

This tool is dependent on having a paid subscription to a Claude Pro, Max, Team, or Enterprise plan. Its functionality is exclusively tied to the Claude AI platform's skill system, meaning it is not a standalone application or library that can be run independently. The quality and accuracy of the generated diagrams rely on the AI's interpretation of the user-provided text descriptions.