概述

图表生成是Claude Code Skills生态中最拥挤的赛道之一。从Mermaid文本渲染到原生.drawio可编辑文件，从纯HTML+CSS静态布局到SVG+PNG双输出，至少有15个以上的Skill声称能"用自然语言画图"。本篇聚焦7个代表性引擎——mermaid-skill、chart-craft-plus、draw.io官方Skill、Cocoon-AI架构图生成器、diagram-architect、fireworks-tech-graph、architecture-diagram-zh——进行同条件实测对比，覆盖渲染质量、可编辑性、中文支持、变现空间四个实战维度，给出按场景的选型建议。

七引擎评测总表

逐个深度评测

1. mermaid-skill（WH-2099）

来源: github.com/WH-2099/mermaid-skill 安装: npx skills add WH-2099/mermaid-skill

这是目前覆盖Mermaid图类型最全的Claude Code Skill，支持全部23种Mermaid原生图表——flowchart、sequenceDiagram、classDiagram、stateDiagram、ER图、gantt、pie、mindmap、timeline、gitgraph、sankey、block遥graph等。它的核心策略是把Mermaid语法当"中间代码"，Claude生成.mmd文件后由Mermaid引擎渲染。

核心优势在于覆盖面——当你不确定需要什么图时，mermaid-skill几乎都能接住。语法约束强，生成成功率在90%以上，因为Mermaid本身的语法校验能及时发现错误。但劣势同样明显：Mermaid的视觉表现力受限于引擎自身的渲染能力，复杂布局（如多层嵌套架构图）经常出现节点重叠或线交叉，且样式自定义空间有限。中文渲染依赖系统字体配置，在部分环境下中文字符会出现乱码。

评测维度：

变现分析：mermaid-skill的变现天花板较低，因为Mermaid本身就是免费工具。但如果将其包装为"Mermaid语法顾问"服务——帮助客户将现有文档批量转化为Mermaid图表——可以按文档数量或图表数量收费。适合作为训练营的入门级Skill教学案例。

2. chart-craft-plus（zephyrwang6）

来源: github.com/zephyrwang6/draw-skill 安装: npx skills add zephyrwang6/draw-skill@chart-craft-plus

chart-craft-plus是chart-craft的增强版，来自zephyrwang6的draw-skill系列（该系列共包含5个图表Skill）。它的核心思路完全不同：不用Canvas、不用JS，纯HTML+CSS（Flexbox/Grid布局）生成图表。这意味着输出结果在任何浏览器中都能完美渲染，且截图/打印效果锐利。

支持35+种图表类型：流程图、架构图、ER图、商业模式画布、用户旅程图、思维导图、竞品分析图、SWOT分析、产品路线图、组织架构图、鱼骨图、漏斗图、雷达图、矩阵图、关系图等。内置3种视觉风格，支持"Stripe风格"、"Notion风格"等品牌适配。对于中文用户，它使用系统字体栈确保中文渲染质量。

杀手锏是"通用图表"能力——你不需要指定图表类型，只需要描述内容，Skill会自动推荐最适合的可视化方式。这在实际使用中省去了大量试错时间。

评测维度：

变现分析：chart-craft-plus的HTML输出天然适合二次开发。可以将其包装为"一键生成商业分析报告"工具——输入行业数据，输出包含SWOT、竞品分析、用户旅程的完整HTML报告。按报告复杂度收费，单份报告定价空间在50-200元。训练营中可作为"AI+商业分析"模块的核心工具。

3. draw.io官方Skill（jgraph）

来源: github.com/jgraph/drawio-mcp 安装: npx skills add jgraph/drawio-mcp@skill-cli

这是draw.io官方团队（JGraph）发布的第一方Skill，在图表Skills生态中地位特殊——它是唯一生成原生.drawio格式文件的Skill。这意味着输出文件可以直接在draw.io编辑器中打开、拖拽、修改、重新布局，完全可编辑。

支持生成流程图、架构图、网络拓扑、UML图、泳道图、时序图等所有draw.io支持的图表类型。输出格式可选.drawio、PNG、SVG、PDF（嵌入draw.io元数据，可反向编辑）。依赖一个轻量CLI工具@drawio/mcp进行格式转换。

独特价值在于解决了AI生成图表的"最后一公里"问题——大多数Skills生成的是"成品图"（HTML/SVG），修改需要改代码。而draw.io Skill生成的是"工程文件"，非技术人员也能在可视化编辑器中调整。这对于需要反复迭代的架构设计场景至关重要。

评测维度：

变现分析：draw.io是企业中使用最广的图表工具之一。将此Skill包装为"架构文档自动化"服务——扫描代码仓库，自动生成系统架构图（.drawio格式），开发团队直接在此基础上修改。按项目规模收费，单个项目定价空间在500-5000元。这是本篇评测中变现天花板最高的Skill。

4. architecture-diagram-generator（Cocoon-AI）

来源: github.com/Cocoon-AI/architecture-diagram-generator 安装: 直接下载SKILL.md文件到~/.claude/skills/

这是本篇评测中GitHub Star数最高的Skill（接近2000星），在社区中引发了"一句话生成架构图"的热潮。它专门用于生成暗色主题的系统架构图，输出为独立的HTML/SVG文件，视觉效果专业。

核心定位是"非设计师的架构图工具"——输入自然语言描述（如"画一个微服务架构图，包含API网关、用户服务、订单服务、MySQL、Redis"），输出一张深色背景、圆角卡片、清晰连线的架构图。它不追求覆盖所有图表类型，而是把"系统架构图"这一种图做到极致。

亮点：暗色主题在技术博客、GitHub README、技术分享中极受欢迎。生成的HTML文件可以直接嵌入网页，SVG版本适合放在文档中。

评测维度：

变现分析：Cocoon-AI的架构图生成器非常适合作为"技术品牌建设"工具——为开源项目、技术博客、咨询报告批量生成专业架构图。可以包装为GitHub Action，在CI流程中自动更新项目架构图。定价空间中等，但品牌价值高。

5. diagram-architect（lohasle）

来源: github.com/lohasle/diagram-architect.skill 安装: npx skills add lohasle/diagram-architect.skill

diagram-architect定位为"生产级图表生成"，核心差异化在于5种专业主题——Dark Pro、Light Pro、Tech Blue、Warm Earth、Minimal。每种主题不是简单换个背景色，而是包含完整的配色体系：节点填充、边框、连接线、文字颜色、阴影效果都有系统化设计。

输出为独立HTML文件，使用纯CSS实现视觉效果，不依赖外部库。支持架构图、流程图、网络拓扑、时序图等多种类型。特别值得注意的是它的响应式设计——生成的图表会根据容器宽度自适应，这在嵌入文档或网页时非常实用。

与Cocoon-AI的对比：Cocoon-AI专注于暗色架构图（一种风格做到极致），diagram-architect提供5种风格选择（广度取胜）。如果你需要架构图放在浅色背景的文档中，diagram-architect的Light Pro主题比Cocoon-AI的暗色主题更合适。

评测维度：

6. fireworks-tech-graph（yizhiyanhua-ai）

来源: github.com/yizhiyanhua-ai/fireworks-tech-graph 安装: npx skills add yizhiyanhua-ai/fireworks-tech-graph

fireworks-tech-graph走了一条SVG优先的技术路线。它将自然语言描述转化为SVG代码，然后通过内置CLI导出为1920px宽度的PNG。这个技术选择带来了几个独特优势：SVG天然支持无限缩放、可以在Illustrator/Inkscape中编辑、可以嵌入任何网页。

特别专注于UML图表——类图、时序图、组件图、部署图、用例图。如果你的工作流需要生成符合UML规范的图表，fireworks-tech-graph是目前最专业的选择。它还支持架构图、流程图、网络拓扑等常见类型。

技术亮点：内置了SVG优化管线——自动去除冗余路径、合并相似样式、优化字体嵌入。输出的SVG文件体积比同类Skill平均小30-40%，这在批量生成图表时差异明显。

评测维度：

变现分析：UML图表在企业软件工程流程中是"刚需"——需求文档、设计评审、代码审查都需要。将fireworks-tech-graph包装为"代码转UML"服务——扫描Java/Python/Go代码库，自动生成类图和时序图。按代码库规模收费，定价空间在1000-10000元/项目。

7. architecture-diagram-zh（zephyrwang6）

来源: github.com/zephyrwang6/draw-skill 安装: npx skills add zephyrwang6/draw-skill@architecture-diagram-zh

这是zephyrwang6 draw-skill系列中专为中文用户优化的架构图Skill。它的独特之处在于原生中文设计——不是简单地把英文模板翻译成中文，而是从字体栈、行高、字间距、布局密度等维度为中文内容做了专门调优。

输出为独立HTML文件，支持深色/浅色双主题切换。内置了"深色模式（Dark Theme）"和"浅色模式（Light Theme）"两套完整配色方案，通过CSS变量实现一键切换。这对于需要同时输出浅色（文档/PDF）和深色（PPT/网页）版本的场景非常实用。

杀手功能是"代码库扫描→架构图"——它可以分析现有代码仓库的目录结构、依赖关系，自动生成反映真实代码架构的图表。这个功能在项目文档化、架构评审、新人onboarding场景中价值极高。

评测维度：

变现分析：在中国企业市场，"项目文档自动化"是一个巨大需求。很多企业的项目文档严重滞后于代码，架构图更是稀缺。将architecture-diagram-zh包装为"代码文档化服务"——定期扫描代码仓库，生成/更新架构图并同步到Confluence/飞书。按SaaS订阅收费，年费定价空间在2000-20000元/团队。

图表Skills生态分类

mindmap
  root((图表即代码<br/>Skills生态))
    渲染引擎层
      Mermaid文本渲染
        mermaid-skill
        mermaid-generator
      HTML+CSS布局
        chart-craft
        chart-craft-plus
        diagram-architect
      SVG矢量图形
        fireworks-tech-graph
        architecture-diagram-zh
      原生编辑器格式
        draw.io官方Skill
    场景层
      通用图表
        chart-craft-plus(35+类型)
        mermaid-skill(23类型)
      架构图专精
        Cocoon-AI(~2000 Star)
        architecture-diagram-zh
        diagram-architect
      UML专业
        fireworks-tech-graph
      中文优化
        architecture-diagram-zh
        chart-craft-plus
    输出层
      文本文件(.mmd)
      网页文件(HTML)
      矢量图(SVG)
      位图(PNG)
      编辑器文件(.drawio)
      文档(PDF)

按场景选型推荐

推荐排行榜

最高变现潜力 Top 3： 1. draw.io官方Skill — 原生可编辑文件是企业刚需，可直接集成到文档工作流 2. chart-craft-plus — 35+图表类型+品牌适配，适合包装为商业报告SaaS 3. fireworks-tech-graph — UML图表+SVG输出，企业软件工程流程刚需

最佳中文体验 Top 3： 1. architecture-diagram-zh — 原生中文优化，双主题切换 2. chart-craft-plus — 系统字体栈确保中文渲染，内置中文场景模板 3. diagram-architect — 5种主题均经过中文排版测试

最快上手 Top 3： 1. Cocoon-AI architecture-diagram-generator — 零配置下载即用，5分钟见效 2. architecture-diagram-zh — 中文描述直接生成 3. mermaid-skill — Mermaid语法是通用技能，社区资源丰富

训练营教学价值 Top 3： 1. mermaid-skill — 23种图表类型覆盖全，Mermaid语法可系统化教学 2. chart-craft-plus — "通用图表"自动推荐机制适合讲解AI可视化思维 3. Cocoon-AI architecture-diagram-generator — 最佳入门演示案例

关键发现与趋势

发现一：渲染引擎三分天下

当前图表Skills生态已经形成了三条清晰的技术路线：Mermaid文本渲染（语法约束强、成功率高、视觉上限低）、HTML+CSS布局（灵活度高、截图友好、编辑门槛中等）、SVG原生生成（质量最高、可编辑、需要设计能力）。draw.io官方Skill代表的"原生编辑器格式"是第四条正在崛起的路线——它解决的不是"画图"问题，而是"画完之后怎么改"的问题。

发现二：中文支持仍是差异化壁垒

在15+个图表Skill中，真正做到"中文原生优化"的只有3-4个。大多数Skill的中文支持停留在"能显示中文字符"的层面，字体栈、行高、对齐方式等细节没有针对中文调优。这意味着中文市场仍有蓝海空间。

发现三："代码扫描→图表"是下一个战场

architecture-diagram-zh和draw.io官方Skill都开始支持"从代码库自动生成图表"。这代表了图表Skills的进化方向：从"用户描述→图表"到"代码分析→图表"。后者更准确、更及时、更能反映系统真实状态，是文档自动化的关键拼图。

参考来源

1. Claude Code 生成专业图表的 15 个 Skills：覆盖 7 种渲染引擎的完整指南 — 苏米客对15个图表Skills的7种渲染引擎分类
2. jgraph/drawio-mcp — GitHub — draw.io官方MCP+Skill项目，原生.drawio文件生成
3. Cocoon-AI/architecture-diagram-generator — GitHub — ~2000 Star的架构图生成器
4. 我做了 5 个图表 Skill，覆盖所有你的图表绘制场景 — 知乎 — zephyrwang6对draw-skill系列的设计思路
5. WH-2099/mermaid-skill — GitHub — 支持23种Mermaid图表类型的Skill

[!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 等场景全覆盖。