架构图也能"聊"出来？深度对比两款主流 AI 绘图技能库
在 AI 辅助开发的时代，画架构图这件事也变得更加智能了。你只需要用自然语言描述系统结构，AI 就能帮你生成专业的架构图——听起来很美好，但市面上的工具那么多，该怎么选？
本文将深入对比两个流行的 AI 架构图生成方案：Architecture Diagram Generator 和 Markdown Viewer Skills。它们各有千秋，适用场景也大不相同。读完这篇文章，你就能找到最适合自己工作流的那一款。
一、核心差异一览
在深入细节之前，先来看看这两个工具的核心区别：
| 特性 | Architecture Diagram Generator | Markdown Viewer Skills |
|---|---|---|
| 作者 | Cocoon AI | markdown-viewer |
| 平台 | Claude.ai (Web) | Claude Code, Codex, Cursor, VS Code |
| 技能数量 | 1 个专用技能 | 14 个技能，覆盖 5 种渲染引擎 |
| 输出格式 | 独立 HTML 文件 | Markdown 内嵌 (SVG/HTML) |
| 渲染引擎 | 自定义 HTML/CSS/SVG | PlantUML, Vega, HTML/CSS |
| 使用门槛 | 免费（Claude.ai 免费版可用） | 免费，支持多种编辑器 |
简单来说，Architecture Diagram Generator 专注于生成精美的独立架构图文件，而 Markdown Viewer Skills 则是一个功能丰富的图表工具箱，能在文档中直接嵌入各种类型的图表。
二、方案一：Architecture Diagram Generator
2.1 这是什么？
这是由 Cocoon AI 开发的 Claude.ai 专用技能，核心理念很简单：用说的，不用画的。你只需要用自然语言描述系统架构，AI 就能生成一张专业的架构图，输出为独立的 HTML 文件，随时可以分享或嵌入到文档中。
GitHub： github.com/Cocoon-AI/a…
2.2 为什么选择它？
- 🎨 零学习成本 — 不需要学习任何图表语法，用自然语言描述即可
- ⚡ 快速迭代 — 想加个组件？想调整布局？直接说就行
- 📤 开箱即用 — 输出的 HTML 文件完全独立，无需任何依赖
- 🌙 视觉精美 — 内置暗色主题（Slate-950 背景 + 网格图案），设计感十足
更重要的是，Claude.ai 免费版就能用，不需要付费订阅。
2.3 如何安装？
方式一：Web 界面上传（最简单）
- 从 GitHub Releases 下载
architecture-diagram.zip - 访问 claude.ai，进入 Settings → Capabilities → Skills
- 点击 + Add 上传 zip 文件，开启技能开关
方式二：本地安装
# 全局安装（所有项目可用）
unzip architecture-diagram.zip -d ~/.claude/skills/
# 项目本地安装（仅当前项目）
unzip architecture-diagram.zip -d ./.claude/skills/
方式三：Project Knowledge
直接把 zip 文件上传到 Claude.ai 项目的 Project Knowledge 中。
2.4 实战：三步生成架构图
第一步：准备架构描述（三种方式任选）
让 AI 分析代码库：
分析这个代码库的架构。列出所有主要组件、它们如何连接、使用什么技术，以及任何云服务或集成。
自己手写描述：
- React 前端与 Node.js API 通信
- PostgreSQL 数据库
- Redis 缓存
- 部署在 AWS，使用 CloudFront CDN
询问典型架构：
一个 SaaS 应用的典型架构是什么样的？
第二步：生成架构图
使用你的架构图技能，根据以下描述创建架构图：[粘贴架构描述]
第三步：迭代优化
- "请添加一个负载均衡器"
- "把数据库改成 MySQL"
- "调整布局，让前端在左边"
2.5 设计系统：颜色语言
这个工具使用了一套清晰的颜色系统来区分不同类型的组件：
| 组件类型 | 颜色 | 用途 |
|---|---|---|
| 前端 | Cyan (青色) | 客户端应用、UI |
| 后端 | Emerald (绿色) | 服务器、API |
| 数据库 | Violet (紫色) | 数据库、存储 |
| 云/AWS | Amber (琥珀色) | 云服务 |
| 安全 | Rose (玫瑰色) | 认证、加密 |
| 外部 | Slate (石板色) | 外部系统 |
2.6 输出特性
- ✅ 完全独立的 HTML 文件
- ✅ 内嵌 CSS 和内联 SVG
- ✅ 无需 JavaScript
- ✅ 响应式设计
- ✅ 可直接打印或导出 PDF
三、方案二：Markdown Viewer Skills
3.1 这是什么？
如果说 Architecture Diagram Generator 是一把精准的手术刀，那 Markdown Viewer Skills 就是一个功能齐全的工具箱。它提供了 14 个不同的图表生成技能，覆盖从 UML 图到数据可视化、从云架构到网络拓扑的各种场景，图表直接嵌入 Markdown 文档，与内容融为一体。
GitHub： github.com/markdown-vi…
3.2 为什么选择它？
- 📊 功能全面 — 14 个技能，5 种渲染引擎，几乎覆盖所有图表需求
- 🔧 多平台支持 — 支持 Claude Code、Codex、Cursor、VS Code 等多种编辑器
- 📝 文档友好 — 图表直接嵌入 Markdown，与文档融为一体
- 🆓 完全免费 — 无需任何付费订阅
3.3 如何安装？
通用安装（推荐）
npx skills add markdown-viewer/skills
支持：Claude Code, Codex, Cursor 等多种 AI 编码代理
Claude Code 手动安装
cp -r skills/<skill-name> ~/.claude/skills/
VS Code / GitHub Copilot：将技能文件放在 .github/skills/ 目录下自动检测。
claude.ai：将 SKILL.md 内容粘贴到对话，或添加到 Project Knowledge。
3.4 技能全景图
数据可视化类
| 技能 | 引擎 | 代码围栏 | 最佳场景 |
|---|---|---|---|
| vega | Vega-Lite/Vega | ```vega-lite /vega | 柱状图、折线图、散点图、热力图 |
| infographic | 独立 | ```infographic | KPI 卡片、时间线、SWOT、漏斗图 |
| canvas | JSON Canvas | ```canvas | 思维导图、知识图谱、概念图 |
HTML/CSS 直接嵌入类
| 技能 | 模板数 | 特点 | 最佳场景 |
|---|---|---|---|
| architecture | 13 布局 × 12 样式 | 分层架构图 | 系统分层、微服务、企业应用 |
| infocard | 13 布局 × 14 样式 | 杂志级排版 | 知识总结、数据高亮、公告 |
PlantUML 系列（9 个专业技能）
| 技能 | 图标数量 | 专业领域 | 最佳场景 |
|---|---|---|---|
| uml | 9500+ | 软件建模 | 流程图、时序图、类图、状态机 |
| cloud | 多厂商 | 云架构 | AWS/Azure/GCP/阿里云/IBM |
| network | Cisco/Citrix | 网络拓扑 | LAN/WAN、企业网络、数据中心 |
| security | 安全专用 | 安全架构 | 威胁模型、零信任、合规审计 |
| archimate | ArchiMate | 企业架构 | 业务/应用/技术层建模 |
| bpmn | BPMN 标准 | 业务流程 | 工作流自动化、EIP、价值流 |
| data-analytics | 数据专用 | 数据工程 | ETL 管道、数据仓库、ML 工作流 |
| iot | IoT 专用 | 物联网 | 智能家居、边缘计算、数字孪生 |
| mindmap | PlantUML | 思维导图 | 头脑风暴、学习大纲、决策图 |
四、如何选择？场景决定工具
选择 Architecture Diagram Generator：
- ✅ 主要使用 Claude.ai Web 界面
- ✅ 需要生成独立的、可分享的 HTML 文件
- ✅ 追求精美视觉效果，偏好暗色主题
- ✅ 不想学习图表语法，自然语言交互即可
选择 Markdown Viewer Skills：
- ✅ 使用 Claude Code、Cursor 或 VS Code
- ✅ 需要在 Markdown 文档中直接嵌入图表
- ✅ 需要多种类型的图表（UML、云架构、网络拓扑等）
- ✅ 希望图表和文档一起纳入版本控制
按图表类型快速选择：
| 需求 | 推荐工具 | 具体技能 |
|---|---|---|
| 系统架构图 | 两者皆可 | ADG 或 architecture |
| UML 图 | Markdown Viewer | uml |
| 云架构图 | Markdown Viewer | cloud |
| 网络拓扑 | Markdown Viewer | network |
| 数据图表 | Markdown Viewer | vega |
| 思维导图 | Markdown Viewer | mindmap / canvas |
| 信息卡片 | Markdown Viewer | infocard |
| 流程图 | Markdown Viewer | bpmn / uml |
按平台快速选择：
| 平台 | 推荐工具 |
|---|---|
| Claude.ai Web | Architecture Diagram Generator |
| Claude Code | Markdown Viewer Skills |
| Cursor | Markdown Viewer Skills |
| VS Code + Copilot | Markdown Viewer Skills |
| 独立编辑器 | Markdown Viewer Skills |
五、实战对比：同一个需求，不同的实现
以生成一个包含 React 前端、Node.js API、PostgreSQL、Redis 和 JWT 认证的 Web 应用架构图为例：
使用 Architecture Diagram Generator：
创建一个 Web 应用的架构图，包含：
- React 前端
- Node.js/Express API
- PostgreSQL 数据库
- Redis 缓存
- JWT 认证
输出： 独立 HTML 文件，暗色主题，视觉精美，可直接分享
使用 Markdown Viewer (architecture 技能)：
使用 architecture 技能创建一个分层架构图：
- 前端层：React
- 应用层：Node.js/Express API
- 数据层：PostgreSQL, Redis
- 安全：JWT 认证
输出： 嵌入 Markdown 的 HTML 代码块，与文档融为一体
使用 Markdown Viewer (cloud 技能)：
@startuml
!include <aws/common>
!include <aws/Compute/EC2/EC2>
!include <aws/Database/RDS/RDS>
!include <aws/Database/ElastiCache/ElastiCache>
EC2(frontend, "React Frontend", "S3/CloudFront")
EC2(api, "Node.js API", "EC2/ECS")
RDS(db, "PostgreSQL", "RDS")
ElastiCache(cache, "Redis", "ElastiCache")
frontend --> api
api --> db
api --> cache
@enduml
输出： PlantUML 渲染的 SVG 图，含 AWS 官方图标，专业感十足
六、综合评分
| 维度 | Architecture Diagram Generator | Markdown Viewer Skills |
|---|---|---|
| 易用性 | ⭐⭐⭐⭐⭐ 自然语言描述 | ⭐⭐⭐⭐ 需要学习语法 |
| 美观度 | ⭐⭐⭐⭐⭐ 精美暗色主题 | ⭐⭐⭐⭐ 多样风格 |
| 灵活性 | ⭐⭐⭐ 单一用途 | ⭐⭐⭐⭐⭐ 14 种技能 |
| 可移植性 | ⭐⭐⭐⭐⭐ 独立 HTML | ⭐⭐⭐⭐ Markdown 嵌入 |
| 成本 | ⭐⭐⭐⭐⭐ 免费使用 | ⭐⭐⭐⭐⭐ 免费 |
| 生态系统 | ⭐⭐ 单一工具 | ⭐⭐⭐⭐⭐ 丰富多样 |
最终建议：
- 初学者 / 快速原型 → Architecture Diagram Generator
- 专业文档 / 多种图表 → Markdown Viewer Skills
- 团队协作 / 代码仓库 → Markdown Viewer Skills
- 精美展示 / 独立分享 → Architecture Diagram Generator
七、写在最后
AI 辅助绘图工具的出现，让架构图的创建变得前所未有的简单。两个工具都是免费的，不妨都试试，找到最适合你工作流的那一个。毕竟，工具只是手段，高效表达架构思想才是目的。
八、相关资源
- Architecture Diagram Generator： github.com/Cocoon-AI/a…
- Markdown Viewer Skills： github.com/markdown-vi…
- Agent Skills 格式规范： agentskills.io/
- Markdown Viewer 扩展： docu.md
