Generate Professional Architecture Diagrams with One Sentence Using Claude Skill

Overview

The Architecture Diagram Generator is an open‑source Claude Skill created by the Cocoon AI team (nearly 2,000 GitHub stars). It converts a natural‑language description of a system architecture into a dark‑theme, professional‑looking diagram exported as a single HTML file that can be opened in any browser.

Core Features

Pure natural‑language driven : describe the architecture in English or Chinese, e.g., "a frontend React app, a backend FastAPI service, a PostgreSQL database with Redis cache".

Semantic colour scheme : frontend components appear in cyan, backend in emerald, databases in violet, cloud services in amber, security in rose, all pre‑coloured automatically.

Self‑contained output : the generated HTML embeds CSS and inline SVG, requiring zero JavaScript dependencies.

Iterative dialogue : after generation you can ask Claude to modify parts, such as "replace the database with MongoDB" or "add a message queue".

Professional layout : uses JetBrains Mono font, Slate‑950 background, and a grid pattern for a polished look.

Installation

Three installation methods are provided:

Method 1 – Claude.ai Skill (recommended) : download architecture-diagram.zip from GitHub and upload it via Settings → Capabilities → Skills.

Method 2 – Claude Code CLI :

unzip architecture-diagram.zip -d ~/.claude/skills/

Method 3 – Claude.ai Projects : upload the zip directly to a Project Knowledge base.

Usage

The workflow consists of three steps:

Step 1 : install the Skill.

Step 2 : prepare an architecture description. You can write it manually or let Claude analyse your code to generate it.

Step 3 : start a conversation with Claude.

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

Frontend: React app with Next.js
Backend: FastAPI with Python
Database: PostgreSQL + Redis cache
Auth: Auth0
Deploy: AWS ECS + CloudFront

Claude returns a complete HTML file that can be opened directly in a browser. If the result is unsatisfactory, you can continue the dialogue, e.g., "replace the deployment with Kubernetes" or "add a Kafka message queue"; each round regenerates the full HTML.

Technical Details

The diagram is rendered entirely with SVG; the viewBox spans roughly 1000‑1100 px in width and scales responsively. The background colour is #020617 with a 40 px grid. Arrows are drawn first and then covered by an opaque background, achieving a layering effect where components appear above the connections. No JavaScript is used—only CSS and SVG—making the output extremely lightweight and fast to load, suitable for embedding in static sites or documentation.

Conclusion

The tool is especially useful for:

Technical writers who need quick diagrams without fiddling with draw.io.

Solution architects who want to convey architecture to product or leadership teams efficiently.

Blog authors who need high‑quality, dark‑theme visuals for screenshots.

Limitations include the requirement for a paid Claude plan, a fixed dark theme (white background requires manual CSS changes), and occasional layout adjustments for very large architectures. For roughly 80 % of diagram needs, the author rates it 85 out of 100.

Relevant links:

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

MIT open‑source license