当"画一张架构图"从拖拽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 | 教育型六类图+布局校验 | ★★★☆☆ |
安装： 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的技术深度更强但上手门槛更高。
安装： 从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流程，每次代码变更自动更新架构图。
安装： 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的可视化需求。
安装： 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走的是"多场景广度覆盖"路线。前者适合技术架构文档，后者适合市场营销、社交媒体、知识传播等全场景。两者互补性极强。
安装： 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自动生成在线图表画廊展示生成效果。
| 维度 | 评分 | 说明 |
|---|---|---|
| 功能完整度 | ★★★☆☆ | 功能基础，无高级特性 |
| 上手难度 | ★★★★★ | 安装最简单，零配置 |
| 变现潜力 | ★★☆☆☆ | 功能基础，差异化不足 |
| 训练营适用性 | ★★★★☆ | 适合Excalidraw入门教学 |
| 社区活跃度 | ★★☆☆☆ | 25 Star，社区规模小 |
安装： 复制skill/目录到~/.claude/skills/visualize/
核心功能： 聚焦"教育型图表"的小众Skill，仅支持六种图表类型：流程图、思维导图、对比图、层级图、循环图、时间线。独特卖点是内置validate_layout.py脚本，自动检查：形状重叠、线条穿越形状、文字与形状重叠、箭头重叠四类布局问题。支持2x Retina质量的PNG渲染。
| 维度 | 评分 | 说明 |
|---|---|---|
| 功能完整度 | ★★★☆☆ | 六类图表+布局校验，范围有限但校验有特色 |
| 上手难度 | ★★★★★ | /visualize触发，极简 |
| 变现潜力 | ★★☆☆☆ | 范围太窄 |
| 训练营适用性 | ★★★★★ | 教育定位精确，布局校验可做教学质量控制 |
| 社区活跃度 | ★☆☆☆☆ | 1 Star，几乎无社区 |
图表 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幻觉的有效工程实践。
[!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 等场景全覆盖。
