首页 › skills-review › 文到图:可视化七引擎实测

文到图: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
安装:npx skills add coleam00/excalidraw-diagram-skill

核心功能

excalidraw-diagram是当前Claude Code生态中知名度最高的可视化Skill,由Cole Medin(coleam00)开发维护。它将自然语言描述转化为Excalidraw格式的JSON文件,产出的图表可在excalidraw.com中直接打开编辑。其设计理念是"visual argumentation"——不仅画图,更强调图表的论证逻辑。

支持流程图、架构图、序列图、类图、ER图等主流图表类型。输出文件为标准.excalidraw JSON,兼容Excalidraw全平台编辑器。核心亮点在于自动布局算法——多节点图表的连线、对齐、分组均由Skill自动完成,无需手动调整。

评测维度

竞品对比

与原生Mermaid图表相比,Excalidraw输出可二次编辑、视觉风格更贴近手绘原型,适合需要人机协作微调的场景。与draw.io MCP方案相比,无需额外启动MCP Server,纯Skill方案部署更轻量。


二、baoyu-infographic:信息图工业化生产线

来源: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的信息图。

评测维度

竞品对比

与chart-craft-plus相比,baoyu-infographic更侧重信息图的叙事表达而非数据图表,在内容创作者市场定位更精准。与Canva等传统工具相比,AI驱动的内容理解+自动布局能力是核心差异化。


三、architecture-diagram-zh:双主题架构图的中国方案

来源: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。

特别值得一提的是对中文标注的原生支持。组件标签、连线说明、注释文字均可使用中文,字体渲染无乱码,这对国内开发者是决定性优势。

评测维度

竞品对比

与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色彩方案。

评测维度

竞品对比

与AntV chart-visualization相比,chart-craft-plus的图表类型更偏向业务和管理场景(SWOT、OKR、竞品分析),而AntV更擅长数据驱动型可视化(柱状图、折线图、散点图)。两者定位不同。


五、text-logic-diagram:文字到逻辑图的精准拆解

来源:xxsong5/draw-skills
安装:npx skills add xxsong5/draw-skills

核心功能

text-logic-diagram的核心能力是将一段文本论述自动拆解为逻辑结构,生成精准的SVG逻辑关系图。它支持六种逻辑关系类型:递进、流程、循环、层次、对比、矩阵。

使用场景非常明确:当你有一篇文章、一段论述、一份方案需要可视化逻辑结构时,粘贴文本,Skill自动识别其中的论点关系、因果链条、对比维度,然后生成对应的SVG图。支持中文,一次可拆解生成多张图。

这个Skill的独特价值在于它不是从零开始画图,而是从已有文字中提炼逻辑——这对知识工作者来说是高频需求。将一篇3000字的方案浓缩为一张清晰的逻辑图,比从空白画布开始画图效率高得多。

评测维度

竞品对比

与Mermaid生成器相比,text-logic-diogram不需要用户理解图表语法,而是自动从文字推断逻辑关系。与思维导图工具相比,它的输出更强调逻辑严谨性而非发散性。


六、chart-visualization(AntV):数据可视化的专业之选

来源: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的输出中。图表配色、字体层级、间距节奏均达到出版级水准。

评测维度

竞品对比

在数据可视化领域,AntV Skill的设计品质明显领先其他通用图表Skill。但广度不及chart-craft-plus,定位更专业也更窄。


七、graphify:代码仓库秒变知识图谱

来源:safishamsi/graphify
安装:npx skills add safishamsi/graphify

核心功能

graphify的独特定位是:输入一个文件夹(代码、文档、PDF、图片、视频),输出一个可查询的知识图谱。它不是画传统意义上的图表,而是将非结构化信息转化为结构化的图数据库。

执行/graphify命令后,Skill扫描整个项目目录,建立文件间的引用关系、代码依赖图、概念关联网络,输出为JSON格式的知识图谱。后续Claude可直接查询这个图谱来回答"这个模块依赖哪些文件"、"这个概念在哪里被使用"等问题。

评测维度

竞品对比

与架构图Skill相比,graphify不做"画图"而做"建图"——它构建的是语义级别的图谱,而非视觉级别的拓扑图。定位互补。


可视化引擎生态全景

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

单项冠军

变现路径分析

可视化引擎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 — Cole Medin开发的Excalidraw图表生成Skill,4.7K+ Star
  2. baoyu-skills - GitHub — 宝玉开源的内容创作Skills全家桶,19.5K Star
  3. AI diagrams in 2026: mermaid vs drawio vs excalidraw skills — 三大AI图表技能横向对比指南
  4. The Excalidraw Diagram Skill — Teaching Coding Agents Visual Argumentation — Excalidraw Skill深度技术分析
  5. Analyzing the Best Diagramming Tools for the LLM Age — 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 等场景全覆盖。

51学通信知识星球海报-扫码加入