A Game-Changing AI Skill for Instant Architecture Diagrams

Introduction

architecture-diagram-generator

is an open‑source Claude skill that generates system architecture diagrams from a textual description.

Features

Zero design barrier : only a description of the project architecture is required; no knowledge of colors or layout is needed.

Rapid iteration : adding components, adjusting layout, or changing style is done with a single sentence and the AI updates the diagram instantly.

Zero‑cost sharing : the output is a standalone HTML file that can be opened in any browser without additional software.

Built‑in export : the diagram includes copy, PNG, and PDF buttons, eliminating the need for screenshots.

Installation

Download the release zip from the GitHub releases page and upload it as a custom skill in Claude Desktop.

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

In Claude Desktop select Custom → Skills → Upload Skill and choose the zip file.

Usage – Architecture Diagram

Command

/architecture-diagram 画一张mall项目的系统架构图，项目地址：D:\developer\github\mall

The command produces a layered dark‑theme diagram of the Mall e‑commerce project. The result is a standalone HTML file with built‑in copy, PNG, and PDF export buttons.

Process‑flow Diagram

For flowcharts use the companion skill process-flow-diagram-generator (GitHub: https://github.com/Cocoon-AI/process-flow-diagram-generator).

Example prompt:

/process-flow-diagram 根据mall项目中生成确认单流程（generateConfirmOrder方法），画一张业务流程图

The skill generates a clear business‑process flowchart and can also handle more complex order‑generation flows.

Output

Both skills produce an HTML file that can be opened in any browser. The file includes built‑in buttons for copying the diagram, downloading as PNG, or exporting as PDF.

Repository

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