Generate High‑Quality Architecture Diagrams with One AI Skill

Problem: Understanding a multi‑agent collaboration platform

A new project contains dozens of modules, containers, micro‑services, message protocols and an AI gateway. After cloning a 10‑plus‑thousand‑line codebase, the directory layout, startup order, authentication service and external system interactions were unclear. Using Claude to analyse the code produced a lengthy textual description of components, startup sequence and message flow, but the generated ASCII diagram was difficult to read.

用户 → nginx → Bridge → Matrix/MinIO
        ↓
        Manager Agent

Solution: architecture‑diagram‑generator skill

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

The skill accepts a natural‑language system description and returns a self‑contained HTML file. The file contains a dark‑theme SVG vector diagram with interactive export options.

Installation

Send the following prompt to Claude Code:

请帮我安装下面这个skill，https://github.com/Cocoon-AI/architecture-diagram-generator

After installation, asking Claude “帮我画这个项目的架构图” (including the previously discussed context) generates the diagram automatically.

Key characteristics

Dark theme – programmer‑friendly aesthetic suitable for technical documentation.

Semantic colour scheme – design system distinguishes component types without a legend.

One‑click export – a “⋯” button in the top‑right corner copies a high‑resolution PNG to the clipboard, downloads PNG, or downloads PDF.

Single‑file, zero‑dependency – the output is a single .html file with no external CSS or images.

Arrow layering – opaque component backgrounds hide arrows cleanly, avoiding visual artifacts.

Usage workflow (three steps)

Step 1: Obtain an architecture description (3 ways)
    A. Let an AI analyse the codebase and produce a description.
       Prompt example: "Analyze this codebase and describe the architecture. Include all major components, how they connect, technologies used, cloud services or integrations. Format as a list for an architecture diagram."
    B. Write the description manually (list components and connections).
    C. Ask Claude for a typical architecture description.

Step 2: Ask Claude to generate the diagram
    "Use your architecture diagram skill to create an architecture diagram from this description: [your description]"

Step 3: Iterate
    "请把 Redis 换成 Kafka"
    "在 API 层加一个 Rate Limiter"
    "把数据库拆成主从两个节点"

No coordinates, colours or layout need to be specified; the template derives visual styling from the business description.

Effective results require Claude to already understand the project's modules, dependencies and data flow—e.g., via a detailed CLAUDE.md or prior conversations.

The author spent roughly half an hour clarifying modules, dependencies and data flow with Claude before generating the diagram; the resulting output required little or no modification.

Outcome

The generated architecture diagram provides a clear, instantly viewable view of the system, accelerating onboarding to unfamiliar projects.