A Game-Changing Open-Source Diagramming Skill That Beats draw.io

Introduction

architecture-diagram-generator

is an open‑source skill for AI coding assistants such as Claude, Cursor, and Windsurf. It creates system architecture diagrams from a textual description in seconds.

Features

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

Rapid iteration : adding components, adjusting layout, or changing style is done with a single AI prompt.

Cost‑free sharing : the output is a standalone HTML file viewable in any browser.

Built‑in export : the diagram includes copy, PNG, and PDF export buttons.

Installation

Download the zip package from the GitHub releases page:

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

In Claude Desktop select Custom → Skill → Upload Skill and upload the extracted package.

Usage

Generating an Architecture Diagram

Example prompt for a mall e‑commerce project:

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

The generated diagram shows a clear layered structure with a modern dark theme, visually superior to typical draw.io diagrams. The result is an HTML file with copy, PNG, and PDF export buttons.

Generating a Process Flow Diagram

Use the companion skill process-flow-diagram-generator (GitHub repository: https://github.com/Cocoon-AI/process-flow-diagram-generator).

Example prompt for the order confirmation flow in the same mall project:

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

The output is a clear flowchart of the confirmation process, and a more complex order generation flowchart can be produced similarly.

Comparison with draw.io

Compared with draw.io, the skill requires no design expertise, enables faster AI‑driven edits, and produces modern dark‑theme diagrams that are easier to share and export.

Conclusion

architecture-diagram-generator

generates high‑quality dark‑theme architecture diagrams from textual descriptions, outputs a standalone HTML file, and provides built‑in export options, making it a practical alternative to traditional diagramming tools.

Project URL

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