## 概述 当"画一张架构图"从拖拽Visio一小时变成输入一句话三十秒，Claude Code可视化类Skills已经悄然成为2026年开发者工具链中增长最快的品类之一。本轮评测聚焦六大图表/架构图生成类Skills——从3144 Star的Excalidraw Diagram Skill到5110 Star的Architecture Diagram Generator，从Mermaid代码化图表到Baoyu信息图大师，覆盖手绘风、暗色主题、PNG导出、布局校验等全部工程细节。评测发现：**可视化Skills已形成清晰的"输入方式×输出格式×美学风格"三维竞争格局**，单一Skill难以覆盖所有场景，组合使用才是最优解。 ## 评测总览 | Skill | 来源 | Star | 输出格式 | 核心定位 | 综合评分 | |-------|------|------|---------|---------|---------| | Excalidraw Diagram Skill | coleam00 | 3144 | .excalidraw JSON | 手绘风格论证型图表 | ★★★★☆ | | Architecture Diagram Generator | Cocoon-AI | 5110 | 自包含HTML/SVG | 暗色主题系统架构图 | ★★★★★ | | Mermaid Skill | WH-2099 | 51 | Mermaid代码块 | 23种标准图表类型 | ★★★★☆ | | Baoyu Infographic | JimLiu | 18711(仓库) | 光栅图片(PNG/JPG) | 专业信息图21×22组合 | ★★★★★ | | Excalidraw Diagrams | robtaylor | 25 | .excalidraw JSON | 程序化Excalidraw图 | ★★★☆☆ | | Visualize Skill | peterparker78 | 1 | .excalidraw + PNG | 教育型六类图+布局校验 | ★★★☆☆ | ## 逐个深度评测 --- ### 1. Excalidraw Diagram Skill（coleam00） **安装：** `npx skills add coleam00/excalidraw-diagram-skill` **核心功能：** 这是目前社区认可度最高的Excalidraw生成Skill，3144 Star、401 Fork，由Cole Medin（coleam00）开发。它的核心哲学是"**图表应该论证（ARGUE），而不仅仅是展示（DISPLAY）**"——要求生成的图表即使去掉所有文字，结构本身也能传达信息。 该Skill要求在生成技术图表前**必须先做Research**——查阅真实API名称、协议格式、事件名称，禁止使用"Protocol → Frontend"这种泛化占位符，而是必须输出"AG-UI streams events (RUN_STARTED, STATE_DELTA, A2UI_UPDATE)"这样的具体细节。这种"证据工件（Evidence Artifacts）"机制包括代码片段、JSON示例、事件序列、UI模拟、真实输入内容六类，确保图表的教育价值。 颜色管理通过单一文件`references/color-palette.md`控制，企业用户可以自定义品牌色。支持深度评估机制——简单概念用抽象形状，技术架构图必须包含具体示例。 | 维度 | 评分 | 说明 | |------|------|------| | 功能完整度 | ★★★★☆ | 哲学完备，证据工件机制创新，但依赖外部Excalidraw编辑器查看 | | 上手难度 | ★★★☆☆ | 需理解"论证型图表"概念，学习曲线中等 | | 变现潜力 | ★★★★☆ | 品牌色定制+技术文档可视化可打包为企业服务 | | 训练营适用性 | ★★★★★ | 教学型设计哲学天然适合课程 | | 社区活跃度 | ★★★★★ | 3144 Star，25个Open Issue，持续迭代 | **竞品对比：** 相比robtaylor的excalidraw-diagrams，本Skill更注重图表的"论证性"而非单纯的程序化生成；相比Visualize Skill，本Skill的技术深度更强但上手门槛更高。 --- ### 2. Architecture Diagram Generator（Cocoon-AI） **安装：** 从GitHub下载`architecture-diagram.zip`，上传至claude.ai → Customize → Skills **核心功能：** 本轮评测的Star之王——5110 Star，由Cocoon AI团队的jamie-cocoon开发。它的杀手级特性是**零依赖输出**：生成的架构图是自包含HTML文件，内嵌SVG图形和CSS样式，任何浏览器直接打开，无需安装任何软件。 2026年5月9日发布的v1.1版本新增了内置导出工具栏——每个图表自带Copy/PNG/PDF三个导出按钮，彻底解决了"生成好看但导出困难"的痛点。暗色主题设计语言统一，视觉风格接近专业云厂商（AWS/Azure）的技术博客插图。 使用方式极其简单：用户只需用自然语言描述系统架构（"React前端→Node.js API→PostgreSQL→Redis缓存→AWS CloudFront"），Skill自动生成专业级架构图。支持三种输入方式：AI分析代码库生成描述、手写组件列表、让Claude生成典型架构模板。 | 维度 | 评分 | 说明 | |------|------|------| | 功能完整度 | ★★★★★ | 零依赖+内置导出+迭代修改，开箱即用 | | 上手难度 | ★★★★★ | 三步完成，无需任何设计基础 | | 变现潜力 | ★★★★☆ | 可作为技术咨询交付物标准化工具 | | 训练营适用性 | ★★★★★ | 最佳入门Skill，5分钟即可产出成果 | | 社区活跃度 | ★★★★★ | 5110 Star，中文社区大量实战教程 | **工程实践要点：** 在知乎、CSDN、51CTO等平台均有大量部署案例。典型工作流是：用Cursor/Claude Code分析代码库→生成架构描述→粘贴到claude.ai→触发Skill生成→迭代修改。有团队已将其集成到CI/CD流程，每次代码变更自动更新架构图。 --- ### 3. Mermaid Skill（WH-2099） **安装：** `git clone https://github.com/WH-2099/mermaid-skill.git && cp -r mermaid-skill/.claude/skills/mermaid ~/.claude/skills/` **核心功能：** 支持23种Mermaid图表类型的"文档驱动"生成器。工作流是：分析需求→读取对应图表类型的语法文档→生成代码→应用主题样式。这种"先查文档再生成"的机制确保了语法正确性。 覆盖范围极广：流程图、时序图、类图、ER图、甘特图、饼图、思维导图、时间线、Git图、象限图、需求图、C4架构图、桑基图、XY图表、块图、包图、看板、架构图、雷达图、树图、用户旅程图、ZenUML共23种。还包含GitHub Action每周自动同步官方mermaid-js文档，保持语法参考的最新性。 | 维度 | 评分 | 说明 | |------|------|------| | 功能完整度 | ★★★★☆ | 23种图表+自动文档同步，但输出为代码需自行渲染 | | 上手难度 | ★★★★☆ | `/mermaid`命令触发，但需理解Mermaid语法才能调优 | | 变现潜力 | ★★★☆☆ | Mermaid生态本身免费且成熟，变现空间有限 | | 训练营适用性 | ★★★★☆ | 可结合Mermaid Live Editor做交互式教学 | | 社区活跃度 | ★★★☆☆ | 51 Star，12 Fork，社区规模较小 | **工程实践要点：** 最大的工程价值在于**代码审查中的图表嵌入**——Mermaid代码块可以直接渲染在GitHub README、GitLab、Notion等平台中，无需导出图片。适合技术文档、API设计、数据库Schema的可视化需求。 --- ### 4. Baoyu Infographic（JimLiu） **安装：** `npx skills add JimLiu/baoyu-skills baoyu-infographic` **核心功能：** 本评测中最重量级的存在——所属仓库baoyu-skills高达18711 Star、590次commit。Baoyu Infographic是一个**双维度信息图生成系统**：21种布局（Layout）× 22种视觉风格（Style）= 462种组合。 布局包括：bento-grid、timeline-vertical、comparison-split、pyramid-layered、flow-horizontal等21种，覆盖信息展示的几乎所有结构需求。视觉风格从craft-handmade（手工风）、technical-schematic（技术蓝图风）到cyberpunk（赛博朋克风）、neo-brutalism（新野兽派）共22种。 独特的设计决策：**严禁用SVG/HTML/Canvas替代光栅图片渲染**——SKILL.md明确写道"Never substitute SVG, HTML, canvas, or other code-based rendering for raster image generation"，强制使用真正的图片生成后端（如Codex的imagegen或baoyu-imagine）。生成前必须写prompt文件到`prompts/`目录，确保可复现、可切换后端。 支持参考图模式（`--ref`），可从用户提供的参考图中提取风格、调色板、构图信息。支持direct/style/palette三种参考图使用方式。 | 维度 | 评分 | 说明 | |------|------|------| | 功能完整度 | ★★★★★ | 462种组合+参考图+多后端+prompt文件化，极其完备 | | 上手难度 | ★★★☆☆ | 参数多（layout/style/aspect/lang/ref），需要试错找最佳组合 | | 变现潜力 | ★★★★★ | 直接对标Canva/创客贴，可打包为SaaS信息图服务 | | 训练营适用性 | ★★★★☆ | 适合内容创作者训练营，2小时可掌握基础 | | 社区活跃度 | ★★★★★ | 18711 Star仓库，590 commits，持续迭代到v1.58.0 | **竞品对比：** 与Architecture Diagram Generator的"单一场景深度优化"不同，Baoyu走的是"多场景广度覆盖"路线。前者适合技术架构文档，后者适合市场营销、社交媒体、知识传播等全场景。两者互补性极强。 --- ### 5. Excalidraw Diagrams（robtaylor） **安装：** `git clone https://github.com/robtaylor/excalidraw-diagrams ~/.claude/skills/excalidraw-diagrams` **核心功能：** 轻量级Excalidraw生成器，25 Star。支持三种安装模式：个人Skill（`~/.claude/skills/`）、项目Skill（`.claude/skills/` git submodule）、Claude.ai网页端（zip上传）。提供Python脚本打包capability zip。 输出为标准`.excalidraw` JSON文件，可通过excalidraw.com拖拽打开、VS Code Excalidraw扩展编辑、导出PNG/SVG。CI自动生成[在线图表画廊](https://robtaylor.github.io/excalidraw-diagrams/)展示生成效果。 | 维度 | 评分 | 说明 | |------|------|------| | 功能完整度 | ★★★☆☆ | 功能基础，无高级特性 | | 上手难度 | ★★★★★ | 安装最简单，零配置 | | 变现潜力 | ★★☆☆☆ | 功能基础，差异化不足 | | 训练营适用性 | ★★★★☆ | 适合Excalidraw入门教学 | | 社区活跃度 | ★★☆☆☆ | 25 Star，社区规模小 | --- ### 6. Visualize Skill（peterparker78） **安装：** 复制`skill/`目录到`~/.claude/skills/visualize/` **核心功能：** 聚焦"教育型图表"的小众Skill，仅支持六种图表类型：流程图、思维导图、对比图、层级图、循环图、时间线。独特卖点是内置`validate_layout.py`脚本，自动检查：形状重叠、线条穿越形状、文字与形状重叠、箭头重叠四类布局问题。支持2x Retina质量的PNG渲染。 | 维度 | 评分 | 说明 | |------|------|------| | 功能完整度 | ★★★☆☆ | 六类图表+布局校验，范围有限但校验有特色 | | 上手难度 | ★★★★★ | `/visualize`触发，极简 | | 变现潜力 | ★★☆☆☆ | 范围太窄 | | 训练营适用性 | ★★★★★ | 教育定位精确，布局校验可做教学质量控制 | | 社区活跃度 | ★☆☆☆☆ | 1 Star，几乎无社区 | --- ## 可视化Skills生态分类  > *图表 1* ## 工程实践：组合部署方案 在实际项目中，这六个Skill并非互斥，而是可以按场景组合使用： **方案A：技术团队标准配置** ``` ~/.claude/skills/ ├── excalidraw-diagram-skill/ # 技术架构论证图 ├── mermaid/ # README内嵌图表 └── architecture-diagram/ # 客户演示用暗色主题图 ``` **方案B：内容团队配置** ``` ~/.claude/skills/ ├── baoyu-infographic/ # 主力信息图工具 ├── visualize/ # 快速教育图表 └── architecture-diagram/ # 技术博客配图 ``` **方案C：全栈配置（推荐）** ``` ~/.claude/skills/ ├── excalidraw-diagram-skill/ # 复杂技术论证 ├── architecture-diagram/ # 对外交付物 ├── mermaid/ # 文档内嵌 └── baoyu-infographic/ # 营销传播 ``` 工程实践中需要注意的要点：Excalidraw类Skill生成的`.excalidraw`文件需要团队成员统一安装编辑器（推荐VS Code Excalidraw扩展）；Architecture Diagram Generator的HTML输出虽然零依赖，但Git追踪时注意`.gitignore`排除临时生成文件；Baoyu Infographic需要配置图片生成后端（Codex环境用`imagegen`，其他环境需安装`baoyu-imagine`）。 ## 推荐排行榜 ### 按场景推荐 | 排名 | 场景 | 推荐Skill | 理由 | |------|------|----------|------| | 1 | 技术架构文档 | Architecture Diagram Generator | 零依赖HTML输出+内置导出+暗色主题 | | 2 | 代码内嵌图表 | Mermaid Skill | 23种图表+语法文档驱动+GitHub原生渲染 | | 3 | 技术论证/教学 | Excalidraw Diagram Skill | 论证哲学+证据工件+品牌色定制 | | 4 | 营销信息图 | Baoyu Infographic | 462种组合+参考图+多后端 | | 5 | 快速原型 | Visualize Skill | 布局校验+PNG直出 | ### 按变现潜力排名 | 排名 | Skill | 变现路径 | 预估定价空间 | |------|-------|---------|------------| | 1 | Baoyu Infographic | SaaS信息图平台（对标Canva） | $19-49/月 | | 2 | Architecture Diagram Generator | 技术咨询交付物标准化工具 | $9-29/月 | | 3 | Excalidraw Diagram Skill | 企业品牌定制+技术文档服务 | $500+/项目 | | 4 | Mermaid Skill | Mermaid-as-a-Service API | 免费/开源 | | 5 | Visualize Skill | 教育机构内容工具 | 免费/开源 | ### 按训练营适用性排名 | 排名 | Skill | 建议课时 | 教学重点 | |------|-------|---------|---------| | 1 | Architecture Diagram Generator | 2小时 | 30分钟安装+60分钟实战+30分钟迭代 | | 2 | Mermaid Skill | 4小时 | 各图表类型语法+Live Editor实操 | | 3 | Baoyu Infographic | 3小时 | 布局×风格组合策略+参考图技巧 | | 4 | Excalidraw Diagram Skill | 6小时 | 论证型图表哲学+证据工件方法论 | | 5 | Visualize Skill | 1小时 | 六类图表速览+布局校验原理 | ## 关键发现与趋势 **发现一：可视化Skills正在分化为两个阵营**——"自包含输出派"（Architecture Diagram Generator的HTML/SVG、Baoyu的PNG）和"工具链依赖派"（Excalidraw JSON需要编辑器、Mermaid需要渲染器）。前者更适合非技术用户和快速分享，后者更适合技术团队迭代修改。 **发现二：中文社区是可视化Skills的重要推手**——Architecture Diagram Generator在知乎、CSDN、51CTO、掘金等平台有大量实战教程，Cocoon-AI团队还专门维护了中文版仓库（Lionad-Morotar/architecture-diagram-generator-cn）。Baoyu Infographic本身就是中文生态的核心Skill。 **发现三：布局校验将成为标配**——Visualize Skill的`validate_layout.py`虽然简单，但代表了AI生成图表的一个关键问题：**AI生成的图表好看但布局可能不合理**。未来所有可视化Skill都需要内置布局质量检查。 **发现四：证据工件方法论值得推广**——Excalidraw Diagram Skill的"Research Mandate"机制（生成前先查阅真实规范）可以迁移到任何技术文档生成场景，而不仅限于图表。这种"先验证再生成"的思路是避免AI幻觉的有效工程实践。 --- ## 参考来源 1. [coleam00/excalidraw-diagram-skill - GitHub](https://github.com/coleam00/excalidraw-diagram-skill) — 3144 Star的Excalidraw图表生成Skill，核心"论证型图表"哲学发源地 2. [Cocoon-AI/architecture-diagram-generator - GitHub](https://github.com/Cocoon-AI/architecture-diagram-generator) — 5110 Star的暗色主题架构图生成器，自包含HTML输出 3. [一句话生成专业架构图，Claude Skill新玩法 - 知乎](https://zhuanlan.zhihu.com/p/2029688294024169088) — 中文社区Architecture Diagram Generator实战教程 4. [Best Claude Code Skills in 2026: 349 Agent Skills Ranked - OpenAIToolsHub](https://www.openaitoolshub.org/en/blog/best-claude-code-skills-2026) — 2026年Claude Code Skills完整排名 5. [Baoyu Infographic SKILL.md - GitHub](https://github.com/JimLiu/baoyu-skills/blob/main/skills/baoyu-infographic/SKILL.md) — 462种组合信息图生成器完整技术文档 > [!tip] 51学通信知识星球 > **星主：爱卫生**（微信：gprshome201101）——公众号「51学通信」创办者，19 年通信行业运维与讲师经验，著有《GPRS网络信令实例详解》《EPC原理与实践》《5G核心网原理与实践》三本纸质书（各大电商平台有售）。 > **星球定位**：深耕 5G 核心网、IMS、NFV/AI、云原生等 ICT 领域，主打运维岗位与信令分析。 > **当前规模**：5200 篇主题 / 990 个回答，198 元/年。 > **加入福利**：加入星球后请加爱卫生微信，拉您进知识星球年度陪伴与答疑群——不限量回复您的各种问题，另有群内分享。 > **AI 加持**：51学通信知识星球已作为 skill 接入 WorkBuddy，使用 deepseek-4-flash 在海量星球帖子中精准找贴、找视频、找 FAQ 和案例，做总结、找文档和 PPT 等场景全覆盖。