Generate High‑Quality Architecture Diagrams in One Sentence with This Claude Skill

Creating architecture diagrams manually is often tedious: using draw.io requires dragging components, while Mermaid demands extensive syntax and positioning, resulting in sub‑par visuals that many skip altogether. The author discovered a Claude AI Skill that solves this problem.

What the Skill Produces

The Skill, hosted at Cocoon-AI/architecture-diagram-generator on GitHub, generates a dark‑theme diagram where frontend, backend, database, and external services are color‑coded, layers are clear, and arrows are clean. The output is a self‑contained HTML file with inline SVG, viewable in any browser without third‑party tools.

The diagram uses JetBrains Mono for text, favoring an engineering aesthetic over bright UI styles.

Design System Details

Semantic color layers : Frontend – Cyan, Backend – Emerald, Database – Violet, Cloud – Amber, Security – Rose.

Arrow rendering order : Connections are drawn before component boxes, and a solid mask prevents arrows from being obscured by semi‑transparent layers.

Legend placement constraint : The legend is positioned outside all bounding boxes, with a 20 px margin calculated from the lowest boundary.

These explicit rules in SKILL.md enable the AI to produce consistent, high‑quality diagrams.

Installation Methods

Two approaches are offered:

Manual installation : Download architecture-diagram.zip from the repository and unzip it into the Claude skills directory (global or project‑level).

# Global install
unzip architecture-diagram.zip -d ~/.claude/skills/

# Project‑level install
unzip architecture-diagram.zip -d ./.claude/skills/

Skills Hub installation : Use the Skills Hub desktop app to search for cocoon-ai/architecture-diagram-generator and install with a single click, which syncs the Skill to Claude, Cursor, and other tools.

Usage

After installation, the Skill can be invoked with a simple prompt. The most recommended usage is to let the AI analyze a codebase and generate an architecture diagram:

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.

The AI returns a complete HTML file that can be opened directly in a browser.

The Skill also supports iterative refinement: after the initial diagram, users can ask the AI to move Redis, change the database layer color, or add a message‑queue node, and the HTML updates accordingly without a full regeneration.

Other Scenarios

Beyond code analysis, the Skill can create diagrams from textual descriptions, e.g.:

Create an architecture diagram for:
- React frontend
- Node.js/Express API
- PostgreSQL database
- Redis cache
- JWT authentication

Or generate a “typical SaaS architecture” template for further customization.

Conclusion

By turning a one‑minute prompt into a polished, editable HTML diagram, this Claude Skill dramatically reduces the effort required to produce architecture visuals, making it a practical addition for any project documentation.

Skill repository:

https://github.com/Cocoon-AI/architecture-diagram-generator