Hands‑On Review of 9 AI Architecture Diagram Tools – From Mermaid Beautifier to GPT‑Image2

Problem and motivation

Engineers frequently need architecture diagrams for technical documentation, design reviews, and presentations. Traditional drag‑and‑drop tools (Visio, draw.io) are quick to use but costly to maintain because any change requires redrawing. Code‑based DSLs (Mermaid, PlantUML) are versionable and can be embedded in Markdown, yet their default styling is often unsuitable for direct inclusion in slides.

With AI programming assistants such as Claude Code and Codex becoming daily collaborators, the question arises: can AI take over the creation of architecture diagrams?

Two diagramming approaches

AI agents excel with text‑based DSLs because they can read, modify, and re‑render source code, unlike static PNG images. This makes DSLs the preferred representation for AI‑driven diagram generation.

Tool overview

The following nine open‑source tools (Stars 809 – 33.9k) were evaluated in Claude Code and grouped into three categories.

Skill‑based generation : beautiful‑mermaid, fireworks‑tech‑graph, archify, drawio‑skill, architecture‑diagram‑generator, next‑ai‑draw‑io, lanshu‑animated‑architecture, awesome‑gpt‑image‑2, GPT‑Image2‑Skill.

AI‑assisted application : next‑ai‑draw‑io.

Prompt‑engineered image generation : awesome‑gpt‑image‑2, GPT‑Image2‑Skill.

beautiful‑mermaid

Keywords: Mermaid beautification, 6 diagram types, 13 themes, SVG + ASCII output.

Re‑renders standard Mermaid diagrams with improved colors, fonts, and spacing, outputting SVG, ASCII/Unicode, and the original Mermaid source.

用 beautiful-mermaid 渲染一张 Flowchart，先生成 Mermaid 代码，再渲染为 SVG 和 Unicode。图中包含 User、Frontend、API Gateway、Auth Service、Order Service、Database，重点展示用户下单请求链路。主题使用 tokyo-night，背景透明，字体使用 Inter。

Suitable for : users already using Mermaid who need prettier diagrams for docs or wikis.

Limitation : cannot handle C4, cloud, or agent topology diagrams.

fireworks‑tech‑graph

Keywords: 14 diagram types, GIF animation, 5 output formats, 14 themes.

Extends Mermaid with UML, C4, cloud, agent, network, and data‑flow diagrams. Supports SVG, PNG, GIF, HTML, JSON. Provides five output formats (SVG, PNG, GIF, HTML, JSON) and a rich theme library (Flat Icon, Dark Terminal, Blueprint, Notion, Glassmorphism, Claude/OpenAI official, Dark Luxury, C4 Review Canvas, Cloud Fabric, Event Transit, Ops Pulse).

用 fireworks-tech-graph 画一张 Agentic RAG 架构图，包含 Query、Planner、Search Tool、VectorDB、LLM、Response，使用 Dark Terminal 风格，输出 SVG、PNG。

Suitable for : users who need a single tool covering most diagram types and want interactive HTML or GIF output.

Limitation : none reported for the covered diagram categories.

archify

Keywords: HTML‑first, strong interaction, code‑base analysis.

Generates an interactive HTML technical map that can be zoomed, clicked, and traced. It can read the current codebase to produce runtime architecture diagrams, making it ideal for documenting legacy systems.

用 archify 生成一张支付系统运行时架构图，基于当前代码库，聚焦下单到支付完成链路，使用 Blueprint 风格，输出 HTML、PNG、SVG。

Suitable for : teams needing interactive demos or quick documentation of legacy codebases.

Limitation : does not produce static PNG/SVG‑only outputs without the HTML wrapper.

drawio‑skill

Keywords: editable source files, draw.io ecosystem, long‑term maintenance.

Outputs a .drawio file that can be further edited in draw.io or diagrams.net. Supports inputs from natural language, codebase, SQL DDL (generates ER diagrams), Terraform/Kubernetes/docker‑compose (generates deployment diagrams), and OpenAPI/Swagger (generates API diagrams). Supports 10 professional diagram types and multiple themes (default, corporate, dark, handdrawn, colorblind‑safe, etc.).

用 drawio-skill 生成一张支付系统架构图，基于当前代码库，聚焦下单到支付完成链路，使用 corporate 主题，输出 .drawio 和 .drawio.png。

Suitable for : scenarios where diagrams need continuous evolution and collaborative editing.

architecture‑diagram‑generator

Keywords: 5 diagram types, single dark theme, single HTML delivery.

Provides a fixed dark‑theme HTML/SVG template that quickly turns natural‑language descriptions into consistent architecture sketches. Supports system, cloud (including serverless), infrastructure, security, and network topology diagrams. Output is a single HTML file that can export PNG or PDF via the built‑in toolbar.

用 architecture-diagram 生成一张支付系统架构图，基于当前代码库的模块结构，聚焦下单到支付完成链路，包含 Web 前端、API Gateway、Order Service、Payment Service、Redis、MySQL、第三方支付网关，展示服务调用关系、缓存路径和安全边界。

Suitable for : quick, uniform drafts where style consistency and single‑file sharing are priorities.

Limitation : limited theming and no interactive HTML.

next‑ai‑draw‑io

GitHub Stars: 33.9k (most popular).

A desktop (and online) draw.io‑based canvas with AI dialogue. Users can generate or modify diagrams via natural language while still manually fine‑tuning. Supports all draw.io shapes, produces native .drawio files, and offers AI‑assisted drafting.

1. 安装桌面应用或打开在线版 (next-ai-drawio.jiang.jp)
2. 在设置里配置模型 (OpenAI / Claude / Gemini)
3. 在画布上选中元素或直接对话，让 AI 生成、扩展、重构图。

Suitable for : users comfortable with draw.io who want AI assistance for drafting and refinement.

lanshu‑animated‑architecture

Keywords: hand‑drawn style, GIF animation, Excalidraw source.

Produces a black‑background hand‑drawn GIF, a static PNG, and an editable .excalidraw source file. The style is highly recognizable in the tech community and is ideal for blog headers, video intros, or eye‑catching presentations.

使用 lanshu-animated-architecture，将以下内容整理成动态架构图。
主题：{图表主题}
目标：{希望图表表达的核心信息}
核心流程：{步骤1} → {步骤2} → {步骤3}
关键判断：{是否需要检查、分支或质量门禁}
要求：
- 输出动态 GIF、静态 PNG 和可编辑 Excalidraw 文件
- 使用中文标签
- 适合技术文章或方案说明使用

Suitable for : technical bloggers, video creators, or anyone needing a 3‑second visual hook.

awesome‑gpt‑image‑2

Keywords: Prompt as Code, 500+ cases, 20+ industrial templates.

Provides a library of reverse‑engineered prompts for stable, production‑grade image generation (infographics, posters, UI, brand, illustration, etc.). The gpt-image-2-style-library skill matches user intent to a template, visual style, and generates a complete prompt (task, layout, style, text, aspect ratio, negative constraints).

使用 gpt-image-2-style-library 技能。请把下面的技术方案编译成一段可直接用于 GPT-Image2 的生产级技术架构图提示词。默认首选模板：Infographic Engine。图主题：AI Agent Workflow。图用途：技术文章封面。图类型：分层架构图。核心模块：用户需求输入、上下文解析、任务规划、工具调用、代码执行、结果验证。必须出现的文字：主标题「AI Agent Workflow」和模块短标签。

Suitable for : creators needing stable, high‑quality visual styles for whitepapers, websites, or article covers.

GPT‑Image2‑Skill

Keywords: Prompt templates + CLI execution layer.

Wraps GPT‑Image2 model calls into a skill that can be invoked by AI agents, turning structured prompts into high‑quality visual assets. It complements awesome-gpt-image-2 by providing the execution layer.

请使用 GPT-Image2-Skill 生成一张技术架构图。图的类型：Agent 工作流图。图的主题：AI Agent 在研发流程中的自动化协作。读者对象：开发者、架构师。核心模块：需求解析、任务规划、工具调用、代码生成、结果验证。视觉风格：深色科技风。输出比例：16:9。文字语言：中文。

Suitable for : teams running local AI agents that need to produce visual diagrams without manual prompt engineering.

Capability matrix (converted from original table)

beautiful‑mermaid : Mermaid beautification; supports 6 Mermaid diagram types; outputs SVG/ASCII/Source; ✅ editable source; ★★★★ visual completeness.

fireworks‑tech‑graph : All‑round engineering diagrams; supports 14 diagram types (UML, C4, cloud, agent, network, data‑flow); ✅ HTML interaction; ✅ GIF animation; ★★★★★ visual completeness.

archify : Interactive HTML technical maps; supports 5 system diagram types; ✅ HTML interaction (strong); ✗ GIF; ✅ editable source (HTML); ★★★★ visual completeness.

architecture‑diagram‑generator : Fixed‑template quick diagrams; supports 5 system diagram types; ✅ HTML output; ✗ GIF; ✗ editable source; ★★★ visual completeness.

drawio‑skill : Generates .drawio files; supports 10 professional diagram types; ✗ HTML interaction; ✗ GIF; ✅ editable source; ★★★ visual completeness.

next‑ai‑draw‑io : AI‑augmented draw.io canvas; supports all draw.io shapes; ✅ HTML interaction (draw.io); ✗ GIF; ✅ editable source ( .drawio); ★★★★ visual completeness.

lanshu‑animated‑architecture : Black‑hand‑drawn GIF; fixed animation templates; ✗ HTML interaction; ✅ GIF; ✅ editable source ( .excalidraw); ★★★★ visual completeness.

awesome‑gpt‑image‑2 : Prompt library for image generation; unlimited image types; ✗ HTML; ✗ GIF; ✗ editable source; ★★★★★ visual completeness.

GPT‑Image2‑Skill : Model‑call execution layer; unlimited image types; ✗ HTML; ✗ GIF; ✗ editable source; ★★★★★ visual completeness.

Quick selector (30‑second tool selector)

Need prettier Mermaid diagrams → beautiful‑mermaid

All‑round diagram needs (≈80 % coverage) → fireworks‑tech‑graph

Interactive HTML demo for reviews → archify

Quick dark‑theme sketch → architecture‑diagram‑generator

Long‑term editable diagrams → drawio‑skill or next‑ai‑draw‑io

Draw.io workflow with AI assistance → next‑ai‑draw‑io

Need GIF animation → fireworks‑tech‑graph or lanshu‑animated‑architecture

Need black‑hand‑drawn storytelling → lanshu‑animated‑architecture

Require presentation‑grade visual assets → awesome‑gpt‑image‑2 + GPT‑Image2‑Skill

Practical insights

No single silver bullet : combine tools for best results. Typical combos:

Technical docs: beautiful‑mermaid + fireworks‑tech‑graph

Architecture reviews: archify + drawio‑skill

External presentations: fireworks‑tech‑graph GIF + awesome‑gpt‑image‑2 or GPT‑Image2‑Skill

Common pitfalls :

GPT‑Image2 alone often mis‑represents structure – use it after a correct DSL diagram.

Always verify Skill‑generated diagrams for correct node names and connections.

Reserve GIFs for external sharing; use SVG/PNG for internal reviews.

Future directions

Code‑to‑diagram automation : archify and drawio‑skill are moving toward live synchronization with code changes, aiming to keep documentation in lockstep with the codebase.

DSL + image‑generation fusion : Combining Mermaid/PlantUML structural definitions with GPT‑Image2 visual styling (as pioneered by awesome‑gpt‑image‑2) promises high‑quality, style‑consistent diagrams.

Tool links

beautiful‑mermaid: https://github.com/lukilabs/beautiful-mermaid

fireworks‑tech‑graph: https://github.com/yizhiyanhua-ai/fireworks-tech-graph

archify: https://github.com/tt-a1i/archify

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

drawio‑skill: https://github.com/Agents365-ai/drawio-skill

next‑ai‑draw‑io: https://github.com/DayuanJiang/next-ai-draw-io

lanshu‑animated‑architecture: https://github.com/cclank/lanshu-animated-architecture-diagram

awesome‑gpt‑image‑2: https://github.com/freestylefly/awesome-gpt-image-2

GPT‑Image2‑Skill: https://github.com/wuyoscar/GPT-Image2-Skill