Appearance
脑子里的架构清晰，但打开draw.io就开始拖框。拖了一小时，发现对齐不对。这个痛，做过技术文档的人都懂。好消息是：这件事现在可以交给Claude Code做了。
六种方法概览
| 方法 | 上手难度 | 视觉效果 | 最适合场景 |
|---|---|---|---|
| Mermaid | ⭐极低 | ★★★ | 工程文档 |
| PlantUML | ⭐⭐低 | ★★★ | 正式规范 |
| SVG/HTML | ⭐⭐低 | ★★★★★ | 定制配图 |
| fireworks Skill | ⭐极低 | ★★★★★ | 内容发布 |
| D2语言 | ⭐⭐⭐中 | ★★★★ | 颜值优先 |
| Excalidraw+MCP | ⭐⭐⭐中 | ★★★★ | 团队协作 |
方法一：Mermaid + Claude Code（最推荐入门）
Mermaid是目前和Claude Code配合最顺畅的架构图工具。几乎所有主流平台都原生支持Mermaid渲染，零额外工具。
mermaid
graph LR
A["输入手机号"] --> B["发送验证码"]
B --> C["验证成功"]
C --> D["创建账户"]
D --> E["跳转首页"]支持的图类型：流程图、时序图、类图、ER图、甘特图、状态机图
| 优点 | 缺点 |
|---|---|
| 上手零成本 | 视觉效果偏简单 |
| Git友好（纯文本可diff） | 颜色样式自定义能力有限 |
| Claude生成成功率最高 | 不适合对外发布的精美配图 |
方法二：PlantUML + Claude Code（企业级首选）
PlantUML是正经做UML图的工具，覆盖最完整的图类型，是很多大厂技术文档的标准格式。
优点：
- UML图类型最全
- 语义精确，符合国际标准
- 适合需要严格规范的架构文档
缺点：
- 本地运行需要Java环境
- 视觉风格偏老派
方法三：Claude Code直接生成SVG/HTML（零依赖最灵活）
不装任何工具，Claude Code直接帮你生成SVG文件或自包含HTML文件，用浏览器打开就是一张图。
bash
"帮我用SVG画一个三层架构图：前端层（React）→ API层（Node.js）→ 数据层（PostgreSQL），用深色主题"优点：零依赖、完全定制（颜色/字体/动画都能控制）、单文件直接分享
缺点：复杂架构图代码量可能很大，后续修改靠提示词描述差异
方法四：fireworks-tech-graph Skill（AI配图神器）
GitHub上5.4k Stars的项目，专门做成Claude Code Skill。
bash
npx skills add yizhiyanhua-ai/fireworks-tech-graph然后直接说：
"画一个RAG检索增强生成架构图，科技风格，深色背景"它会输出1920px高清PNG，直接可以发公众号、放进PPT。
| 特点 | 说明 |
|---|---|
| 7种视觉风格 | 科技感、简洁白底、手绘风格、渐变色等 |
| 14种图类型 | 系统架构、流程图、UML序列图、数据流图、部署图全覆盖 |
优点：输出即可发布的高清图，AI领域专业知识内建
缺点：主要针对技术架构和AI场景，通用业务流程图不是强项
方法五：D2语言 + Claude Code（颜值最高的代码方案）
D2是专门为图表设计的语言，由前Stripe工程师开发，视觉效果是代码生成类工具里最好的。
txt
direction: right
用户 -> API网关: HTTP请求
API网关 -> 认证服务: 验证Token
API网关 -> 业务服务: 转发请求
业务服务 -> 数据库: 查询优点：视觉效果最佳（代码类工具中）、布局算法智能、支持主题定制
缺点：生态相对小众，需要单独安装D2 CLI
方法六：Excalidraw + MCP（2026年最大趋势）
通过MCP协议，让Claude Code直接操控Excalidraw画布。
功能：
- 直接在画布上创建、移动、连接节点
- 根据描述实时修改图的结构
- 分析代码库，自动生成对应的架构图
优点：手绘风格深受团队喜爱、AI可实时编辑画布、支持团队协作
缺点：MCP配置有一定门槛，复杂架构的生成质量不稳定
快速选择指南
| 场景 | 推荐方案 |
|---|---|
| 写README / 团队文档 | Mermaid + Claude Code |
| 正式技术规范 / 企业文档 | PlantUML + Claude Code |
| 快速定制配图 | Claude Code直接生成SVG |
| 技术博客 / 公众号配图 | fireworks-tech-graph Skill |
| 追求视觉效果 | D2语言 + Claude Code |
| 团队协作 / 探索设计 | Excalidraw + MCP |
我的选择建议
- 工程师，写技术文档为主 → 从Mermaid开始，够用且零成本
- 技术内容创作（公众号、技术博客、演讲PPT） → 直接上fireworks-tech-graph Skill
- 需要一次性精美配图 → Claude Code直接生成SVG
- 团队协作 → 关注Excalidraw + MCP的进展，这是2026年最值得期待的方向
架构图的本质是沟通工具，不是艺术品。让Claude Code帮你生成初稿，你只需要审查和调整。
