# 文到图：Claude Code 可视化图表七引擎实测 2026年6月，Claude Code Skills生态中悄然崛起了一个新物种——**可视化图表面板引擎**。它们不再满足于生成Mermaid代码块，而是直接产出可交互的HTML文件、可编辑的Excalidraw JSON、可嵌入PPT的SVG矢量图。从架构师画拓扑图、产品经理做竞品分析、到自媒体博主生成小红书信息图，可视化引擎们正在用"一句话出图"的方式重新定义开发者的日常。本期评测横跨Excalidraw、信息图、架构图、逻辑图、知识图谱、图表生成、小红书图卡七大品类，选取七个最具代表性的Skill进行实测，逐维度打分，看谁能真正把"文字"变成"作品"。 ## 评测总览 | Skill名称 | 类型 | 输出格式 | 安装方式 | 社区热度 | 综合评分 | |-----------|------|---------|---------|---------|---------| | excalidraw-diagram | 白板图表 | .excalidraw JSON | GitHub安装 | ⭐4.7K Star | ★★★★★ | | baoyu-infographic | 专业信息图 | HTML/SVG/PNG | npm/skills | ⭐19.5K Star | ★★★★★ | | architecture-diagram-zh | 系统架构图 | HTML+SVG双主题 | GitHub | ⭐4.5K Star | ★★★★☆ | | chart-craft-plus | 全能图表 | HTML 35+类型 | skills安装 | — | ★★★★☆ | | text-logic-diagram | 逻辑关系图 | SVG矢量图 | GitHub | — | ★★★★☆ | | chart-visualization (AntV) | 数据可视化 | HTML/Canvas | npm安装 | ⭐4.3K Star | ★★★★☆ | | graphify | 知识图谱 | JSON + 可视化 | npm安装 | — | ★★★☆☆ | --- ## 一、excalidraw-diagram：白板图表的标杆之作 **来源**：[coleam00/excalidraw-diagram-skill](https://github.com/coleam00/excalidraw-diagram-skill) **安装**：`npx skills add coleam00/excalidraw-diagram-skill` ### 核心功能 excalidraw-diagram是当前Claude Code生态中**知名度最高**的可视化Skill，由Cole Medin（coleam00）开发维护。它将自然语言描述转化为Excalidraw格式的JSON文件，产出的图表可在[excalidraw.com](https://excalidraw.com)中直接打开编辑。其设计理念是"visual argumentation"——不仅画图，更强调图表的论证逻辑。 支持流程图、架构图、序列图、类图、ER图等主流图表类型。输出文件为标准`.excalidraw` JSON，兼容Excalidraw全平台编辑器。核心亮点在于自动布局算法——多节点图表的连线、对齐、分组均由Skill自动完成，无需手动调整。 ### 评测维度 - **功能完整度** ★★★★★：开箱即用，覆盖绝大多数技术图表场景。支持从代码仓库自动扫描生成架构图，支持增量更新已有图表。 - **上手难度** ★★★★★：只需一句自然语言描述，零配置启动。Excalidraw本身也是开发者最熟悉的白板工具之一。 - **变现潜力** ★★★★☆：可作为企业文档自动化工具的基础组件。与CI/CD集成后自动生成架构文档，企业版定价空间$50-200/月/团队。 - **训练营适用性** ★★★★★：理想的"AI+可视化"教学素材。从安装到出图，完整教学可在1小时内完成。 - **社区活跃度** ★★★★★：GitHub 4.7K+ Star，18个开放PR，社区贡献持续活跃。 ### 竞品对比 与原生Mermaid图表相比，Excalidraw输出可二次编辑、视觉风格更贴近手绘原型，适合需要**人机协作微调**的场景。与draw.io MCP方案相比，无需额外启动MCP Server，纯Skill方案部署更轻量。 --- ## 二、baoyu-infographic：信息图工业化生产线 **来源**：[JimLiu/baoyu-skills](https://github.com/JimLiu/baoyu-skills) **安装**：`npx skills add JimLiu/baoyu-skills` ### 核心功能 baoyu-infographic是宝玉（JimLiu）开源的baoyu-skills工具包中的核心Skill，当前整个仓库已收获**19.5K GitHub Star**，是Claude Code中文生态中热度最高的项目之一。它采用"布局×风格"双维度矩阵，提供**20种布局类型**和**17种视觉风格**，可生成340种组合的专业信息图。 布局类型包括：时间线、对比、流程、层级、列表、矩阵、循环、故事板等。视觉风格覆盖：扁平极简、渐变科技、手绘插画、杂志风、暗色高端等。用户只需输入一篇文章或一段文字描述，Skill自动分析内容结构，推荐最佳布局×风格组合，然后生成publication-ready的信息图。 ### 评测维度 - **功能完整度** ★★★★★：340种布局风格组合覆盖了信息图的绝大多数场景。支持中文排版，对国内自媒体创作者极为友好。 - **上手难度** ★★★★☆：需要理解布局和风格的组合逻辑，但Skill内置了智能推荐，初学者可直接采纳。 - **变现潜力** ★★★★★：直接对标Canva等设计工具，可作为SaaS产品的核心功能。单用户定价$10-30/月合理。小红书/公众号创作者付费意愿强。 - **训练营适用性** ★★★★☆：内容创作类训练营的理想实践项目。教学时长约2小时（含布局理论+实操）。 - **社区活跃度** ★★★★★：19.5K Star，22个Skill，持续更新。已衍生出Hermes Agent适配版本。 ### 竞品对比 与chart-craft-plus相比，baoyu-infographic更侧重**信息图的叙事表达**而非数据图表，在内容创作者市场定位更精准。与Canva等传统工具相比，AI驱动的内容理解+自动布局能力是核心差异化。 --- ## 三、architecture-diagram-zh：双主题架构图的中国方案 **来源**：[Cocoon-AI/architecture-diagram-generator](https://github.com/Cocoon-AI/architecture-diagram-generator) **安装**：`npx skills add Cocoon-AI/architecture-diagram-generator` ### 核心功能 architecture-diagram-zh（架构图生成器中文版）是Cocoon AI团队开源的专业架构图Skill，GitHub已近**4.5K Star**。它的核心差异化是生成**独立的HTML文件**，内嵌SVG图形，支持**深色/浅色双主题一键切换**。 输入一段系统描述或粘贴架构说明文字，Skill自动解析组件关系、连接拓扑、数据流向，生成完整的HTML文件。打开后直接呈现专业级架构图，右上角主题切换按钮可在亮色和暗色间无缝切换——这对技术文档撰写者来说是刚需，因为文档可能嵌入白底PPT也可能嵌入暗色Wiki。 特别值得一提的是对**中文标注的原生支持**。组件标签、连线说明、注释文字均可使用中文，字体渲染无乱码，这对国内开发者是决定性优势。 ### 评测维度 - **功能完整度** ★★★★☆：架构图场景覆盖充分，但不支持序列图/类图等UML图表。双主题切换是亮点。 - **上手难度** ★★★★★：一句描述即可生成，零学习成本。HTML输出可在任何浏览器打开。 - **变现潜力** ★★★★☆：可作为技术文档SaaS的功能模块。企业版可增加批量生成+CI集成。 - **训练营适用性** ★★★★★：架构设计课程的绝佳辅助工具。15分钟可完成从安装到出图的教学演示。 - **社区活跃度** ★★★★☆：4.5K Star，352 Fork，更新频率中等。 ### 竞品对比 与excalidraw-diagram相比，architecture-diagram-zh产出的HTML文件**无需第三方编辑器**即可查看和分享，传播成本更低。但二次编辑灵活性不如Excalidraw。两者互补而非替代。 --- ## 四、chart-craft-plus：35种图表一台戏 **来源**：社区Skill（可通过skills平台安装） **安装**：`npx skills add chart-craft-plus` ### 核心功能 chart-craft-plus定位为**AI全能图表生成器**，号称一键生成35+种设计美观的图表HTML文件。覆盖五大类别：技术架构图、流程逻辑图、业务战略图、数据可视化图、信息展示图。 具体支持的图表类型包括：流程图、时序图、甘特图、漏斗图、桑基图、用户旅程图、商业模式画布、SWOT分析、竞品分析、产品路线图、组织架构图、ER图、C4图、BPMN、状态机、决策树、泳道图、部署图、网络拓扑、威胁建模图、价值链、OKR树、韦恩图、热力图、KPI看板、信息图、概念图等。 内置三种视觉风格：黑白简约、深色暗调、Claude暖色。支持品牌风格扩展——用户可定义企业VI色彩方案。 ### 评测维度 - **功能完整度** ★★★★★：35+图表类型的广度在同类Skill中首屈一指。触发词覆盖全面，几乎任何"画个XX图"的需求都能命中。 - **上手难度** ★★★★☆：触发词丰富但需要记住图表类型名称。首次使用建议对照支持列表。 - **变现潜力** ★★★★☆：作为企业内部工具的"图表万能钥匙"，可打包进知识管理SaaS。定价$15-50/月/用户。 - **训练营适用性** ★★★★☆：适合"数据可视化"主题训练营。教学时长约3小时（含图表选型理论+各类图实操）。 - **社区活跃度** ★★★☆☆：作为社区Skill，独立Star数据不突出，但使用面广。 ### 竞品对比 与AntV chart-visualization相比，chart-craft-plus的图表类型更偏向**业务和管理场景**（SWOT、OKR、竞品分析），而AntV更擅长**数据驱动型可视化**（柱状图、折线图、散点图）。两者定位不同。 --- ## 五、text-logic-diagram：文字到逻辑图的精准拆解 **来源**：[xxsong5/draw-skills](https://github.com/xxsong5/draw-skills) **安装**：`npx skills add xxsong5/draw-skills` ### 核心功能 text-logic-diagram的核心能力是将一段**文本论述**自动拆解为逻辑结构，生成精准的SVG逻辑关系图。它支持六种逻辑关系类型：**递进、流程、循环、层次、对比、矩阵**。 使用场景非常明确：当你有一篇文章、一段论述、一份方案需要可视化逻辑结构时，粘贴文本，Skill自动识别其中的论点关系、因果链条、对比维度，然后生成对应的SVG图。支持中文，一次可拆解生成多张图。 这个Skill的独特价值在于它不是从零开始画图，而是**从已有文字中提炼逻辑**——这对知识工作者来说是高频需求。将一篇3000字的方案浓缩为一张清晰的逻辑图，比从空白画布开始画图效率高得多。 ### 评测维度 - **功能完整度** ★★★★☆：六种逻辑类型覆盖了论述结构的主流模式。SVG输出可嵌入任何文档。但对复杂嵌套逻辑的处理有待优化。 - **上手难度** ★★★★★：只需粘贴文字，无需任何图表知识。是所有评测Skill中门槛最低的。 - **变现潜力** ★★★★☆：可作为知识管理工具的插件。咨询行业和培训行业付费意愿高。 - **训练营适用性** ★★★★★：逻辑思维训练的绝佳工具。教学时长30分钟即可完成演示。 - **社区活跃度** ★★★☆☆：独立仓库规模较小，但draw-skills集合在持续更新。 ### 竞品对比 与Mermaid生成器相比，text-logic-diogram不需要用户理解图表语法，而是**自动从文字推断逻辑关系**。与思维导图工具相比，它的输出更强调逻辑严谨性而非发散性。 --- ## 六、chart-visualization（AntV）：数据可视化的专业之选 **来源**：[antvis/chart-visualization-skills](https://github.com/antvis/chart-visualization-skills) **安装**：`npx skills add antvis/chart-visualization-skills` ### 核心功能 由蚂蚁集团AntV团队出品，chart-visualization-skills是**唯一由大厂可视化团队官方维护**的Claude Code Skill。它将AntV多年积累的可视化设计经验蒸馏为Skill指令，让Claude具备专业级数据可视化能力。 提供50+模板，包括列表、序列图、流程图、架构图等。核心优势在于**视觉设计质量**——AntV团队的G2、S2、L7等可视化库在国内数据可视化领域有极高声誉，这些设计规范直接体现在Skill的输出中。图表配色、字体层级、间距节奏均达到出版级水准。 ### 评测维度 - **功能完整度** ★★★★☆：50+模板覆盖面广，但主要聚焦数据图表而非架构图/业务图。在数据可视化细分领域堪称最专业。 - **上手难度** ★★★☆☆：需要一定的数据可视化基础才能选对图表类型。但Skill内置了图表选型指导。 - **变现潜力** ★★★★★：大厂背书+专业品质，可作为BI工具的AI插件。企业级定价空间$100-500/月。 - **训练营适用性** ★★★★☆：适合"数据可视化"专业课程。教学时长约4小时（含AntV设计规范+实操）。 - **社区活跃度** ★★★★★：AntV品牌背书，4.3K+ GitHub Star，持续迭代。 ### 竞品对比 在数据可视化领域，AntV Skill的**设计品质明显领先**其他通用图表Skill。但广度不及chart-craft-plus，定位更专业也更窄。 --- ## 七、graphify：代码仓库秒变知识图谱 **来源**：[safishamsi/graphify](https://github.com/safishamsi/graphify) **安装**：`npx skills add safishamsi/graphify` ### 核心功能 graphify的独特定位是：输入一个文件夹（代码、文档、PDF、图片、视频），输出一个**可查询的知识图谱**。它不是画传统意义上的图表，而是将非结构化信息转化为结构化的图数据库。 执行`/graphify`命令后，Skill扫描整个项目目录，建立文件间的引用关系、代码依赖图、概念关联网络，输出为JSON格式的知识图谱。后续Claude可直接查询这个图谱来回答"这个模块依赖哪些文件"、"这个概念在哪里被使用"等问题。 ### 评测维度 - **功能完整度** ★★★☆☆：知识图谱构建能力强，但可视化展示依赖外部工具。当前版本偏"数据准备"而非"最终呈现"。 - **上手难度** ★★★☆☆：需要理解知识图谱的基本概念。首次配置需要安装graphifyy Python包。 - **变现潜力** ★★★★☆：代码理解/代码搜索是企业刚需。可作为代码智能平台的底层能力。 - **训练营适用性** ★★★☆☆：偏基础设施层，不适合入门教学。适合AI+代码分析方向的进阶课程。 - **社区活跃度** ★★★☆☆：项目较新，社区正在成长中。 ### 竞品对比 与架构图Skill相比，graphify不做"画图"而做"建图"——它构建的是语义级别的图谱，而非视觉级别的拓扑图。定位互补。 --- ## 可视化引擎生态全景 ```mermaid mindmap root((可视化引擎生态)) 白板图表 excalidraw-diagram 手绘风格 可二次编辑 社区最活跃 信息图 baoyu-infographic 20布局×17风格 中文原生支持 自媒体场景 baoyu-xhs-images 小红书专用 卡片系列 架构图 architecture-diagram-zh HTML双主题 SVG内嵌 中文标注 Cocoon-AI原版 英文版 图表生成 chart-craft-plus 35+类型 三种风格 业务导向 AntV chart-visualization 50+模板 大厂品质 数据驱动 逻辑图 text-logic-diagram 六种关系 文字→SVG 零门槛 知识图谱 graphify 代码→图谱 语义查询 基础设施 Mermaid生态 mermaid-generator Obsidian集成 文本→图表 生态最广 ``` ## 推荐排行榜 ### 按场景推荐 | 使用场景 | 首选Skill | 备选Skill | |---------|----------|----------| | 画系统架构图 | architecture-diagram-zh | excalidraw-diagram | | 做自媒体信息图 | baoyu-infographic | baoyu-xhs-images | | 画业务分析图表 | chart-craft-plus | AntV chart-visualization | | 论文/方案逻辑图 | text-logic-diagram | mermaid-generator | | 代码结构可视化 | graphify | excalidraw-diagram | | 技术文档流程图 | excalidraw-diagram | mermaid-generator | | 数据分析报告 | AntV chart-visualization | chart-craft-plus | ### 综合评分排行 | 排名 | Skill | 功能 | 上手 | 变现 | 训练营 | 社区 | 加权总分 | |-----|-------|------|------|------|-------|------|---------| | 1 | excalidraw-diagram | 5 | 5 | 4 | 5 | 5 | **4.75** | | 2 | baoyu-infographic | 5 | 4 | 5 | 4 | 5 | **4.65** | | 3 | architecture-diagram-zh | 4 | 5 | 4 | 5 | 4 | **4.35** | | 4 | chart-craft-plus | 5 | 4 | 4 | 4 | 3 | **4.10** | | 5 | AntV chart-visualization | 4 | 3 | 5 | 4 | 5 | **4.10** | | 6 | text-logic-diagram | 4 | 5 | 4 | 5 | 3 | **4.15** | | 7 | graphify | 3 | 3 | 4 | 3 | 3 | **3.25** | ### 单项冠军 - **开箱即用之王**：excalidraw-diagram — 一句话出图，零配置，社区生态最成熟 - **变现潜力之王**：baoyu-infographic — 19.5K Star背书，340种组合直接对标Canva - **设计品质之王**：AntV chart-visualization — 大厂可视化团队出品，出版级设计规范 - **上手门槛最低**：text-logic-diagram — 粘贴文字即出图，无需任何图表知识 - **图表类型最全**：chart-craft-plus — 35+类型横跨技术和业务双域 - **中文体验最佳**：architecture-diagram-zh — 双主题切换+中文标注原生支持 ## 变现路径分析 可视化引擎Skills的商业化路径清晰且多元： **路径一：SaaS工具化。** baoyu-infographic和chart-craft-plus可直接包装为在线图表生成工具，按月订阅收费。对标Canva（$12.99/月）和Lucidchart（$7.95/月），AI驱动的自动布局能力是核心卖点。 **路径二：企业文档自动化。** excalidraw-diagram和architecture-diagram-zh可集成到企业CI/CD流水线，代码提交后自动更新架构文档。按团队规模收费，$50-200/月/团队。 **路径三：训练营课程。** 所有七个Skill都可作为"AI+可视化"线下/线上训练营的教学内容。两天课程定价2,000-5,000元/人，材料成本几乎为零。 **路径四：定制化服务。** 基于这些Skill为企业定制内部可视化工具，单项目报价5-20万元。特别是金融、咨询、科技行业有大量架构图和业务图表的自动化需求。 ## 趋势判断 可视化引擎Skills正在经历从"能画图"到"画好图"的质变。三个趋势值得关注： **趋势一：多格式融合。** 未来一个Skill将同时输出Excalidraw（可编辑）、SVG（可嵌入）、PNG（可分享）、HTML（可交互）四种格式，覆盖从创作到传播的完整链路。baoyu-skills已开始朝这个方向演进。 **趋势二：实时协作集成。** 与Figma、Miro、Notion等协作工具的MCP集成将使可视化Skill产出的图表直接进入团队工作流，而非停留在本地文件。Mermaid官方已推出Claude Connector，这是方向信号。 **趋势三：领域特化。** 通用的"画流程图"将分化为"画5G网络拓扑图"、"画Kubernetes部署图"、"画金融风控流程图"等垂直场景Skill。architecture-diagram-zh的中文特化已是这一趋势的早期案例。 --- ## 参考来源 1. [excalidraw-diagram-skill - GitHub](https://github.com/coleam00/excalidraw-diagram-skill) — Cole Medin开发的Excalidraw图表生成Skill，4.7K+ Star 2. [baoyu-skills - GitHub](https://github.com/JimLiu/baoyu-skills) — 宝玉开源的内容创作Skills全家桶，19.5K Star 3. [AI diagrams in 2026: mermaid vs drawio vs excalidraw skills](https://aipptskill.com/blog/ai-diagram-skills-guide/) — 三大AI图表技能横向对比指南 4. [The Excalidraw Diagram Skill — Teaching Coding Agents Visual Argumentation](https://ice-ice-bear.github.io/posts/2026-04-01-excalidraw-skill/) — Excalidraw Skill深度技术分析 5. [Analyzing the Best Diagramming Tools for the LLM Age](https://dev.to/akari_iku/analyzing-the-best-diagramming-tools-for-the-llm-age-based-on-token-efficiency-5891) — LLM时代图表工具的Token效率分析 > [!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 等场景全覆盖。