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安装 | — | ★★★☆☆ |
来源: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方案部署更轻量。
来源: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驱动的内容理解+自动布局能力是核心差异化。
来源: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。两者互补而非替代。
来源:社区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更擅长数据驱动型可视化(柱状图、折线图、散点图)。两者定位不同。
来源:xxsong5/draw-skills
安装:npx skills add xxsong5/draw-skills
text-logic-diagram的核心能力是将一段文本论述自动拆解为逻辑结构,生成精准的SVG逻辑关系图。它支持六种逻辑关系类型:递进、流程、循环、层次、对比、矩阵。
使用场景非常明确:当你有一篇文章、一段论述、一份方案需要可视化逻辑结构时,粘贴文本,Skill自动识别其中的论点关系、因果链条、对比维度,然后生成对应的SVG图。支持中文,一次可拆解生成多张图。
这个Skill的独特价值在于它不是从零开始画图,而是从已有文字中提炼逻辑——这对知识工作者来说是高频需求。将一篇3000字的方案浓缩为一张清晰的逻辑图,比从空白画布开始画图效率高得多。
与Mermaid生成器相比,text-logic-diogram不需要用户理解图表语法,而是自动从文字推断逻辑关系。与思维导图工具相比,它的输出更强调逻辑严谨性而非发散性。
来源: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,定位更专业也更窄。
来源: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的中文特化已是这一趋势的早期案例。
[!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 等场景全覆盖。
