2026年5月，Claude Code Skills生态中最拥挤的赛道不是代码生成，也不是自动化部署，而是视觉生成——从一段自然语言描述到一张可直接使用的图表、信息图、架构图或艺术画布。diagram-architect凭借5套专业主题在GitHub周榜冲顶，baoyu-infographic以20种布局×17种视觉风格的组合矩阵成为内容创作者标配，archflow甚至能将整个代码库逆向为动态HTML架构动画。这一期，我们把七种定位各异的视觉生成Skills放进同一个测试场，从输出质量到变现路径做一次彻底横评。
| 排名 | Skill名称 | 来源 | 输出格式 | 功能完整度 | 上手难度 | 变现潜力 | 训练营适用性 | 社区活跃度 | 综合评分 |
|---|---|---|---|---|---|---|---|---|---|
| 1 | diagram-architect | lohasle (GitHub) | HTML | ★★★★★ | ★★★★★ | ★★★★☆ | ★★★★☆ | ★★★★☆ | 4.6 |
| 2 | chart-craft-plus | zephyrwang6 (GitHub) | HTML | ★★★★★ | ★★★★☆ | ★★★★☆ | ★★★★★ | ★★★☆☆ | 4.3 |
| 3 | baoyu-infographic | JimLiu (GitHub) | HTML | ★★★★★ | ★★★★☆ | ★★★★★ | ★★★★☆ | ★★★★☆ | 4.4 |
| 4 | archflow | rafaelolsr (GitHub) | HTML动画 | ★★★★☆ | ★★★★☆ | ★★★★★ | ★★★☆☆ | ★★★★☆ | 4.2 |
| 5 | fireworks-tech-graph | yizhiyanhua-ai (GitHub) | SVG/PNG | ★★★★☆ | ★★★★★ | ★★★★☆ | ★★★★☆ | ★★★☆☆ | 4.0 |
| 6 | excalidraw-diagram | coleam00 (GitHub) | JSON | ★★★★☆ | ★★★★☆ | ★★★☆☆ | ★★★★☆ | ★★★★★ | 3.9 |
| 7 | canvas-design | Anthropic官方 | PNG/PDF | ★★★☆☆ | ★★★★★ | ★★★★☆ | ★★★★☆ | ★★★★★ | 4.0 |
来源: lohasle/diagram-architect.skill
安装: npx skills add lohasle/diagram-architect.skill
diagram-architect是目前视觉生成Skills中完成度最高的作品。它的核心策略极为简洁——不做元数据解析，不做AI推理，直接用精心设计的HTML+CSS模板把架构描述渲染成可交互的网页图表。内置5套专业主题（暗色科技风、浅色企业风、蓝图风、极简风、渐变风），每套主题的颜色、字体、间距、阴影都经过像素级调优。
核心功能演示: 输入"绘制一个微服务架构图，包含API Gateway、3个后端服务、Redis缓存、PostgreSQL数据库和Kafka消息队列"，diagram-architect会在30秒内生成一个完整的HTML文件，包含可点击的节点、悬停tooltip、连接线动画，以及响应式布局适配。5种主题一键切换，无需任何手动调整。
评分详解: - 功能完整度 ★★★★★ — 架构图、流程图、时序图全覆盖，5种主题开箱即用 - 上手难度 ★★★★★ — 只需描述架构，零配置生成 - 变现潜力 ★★★★☆ — 可包装为企业技术文档SaaS，但竞争门槛不高 - 训练营适用性 ★★★★☆ — 1小时可完成基础教学，但进阶自定义需要CSS知识 - 社区活跃度 ★★★★☆ — GitHub周榜上榜，持续更新
与竞品对比: 相比fireworks-tech-graph的SVG输出，diagram-architect的HTML格式在浏览器中展示更灵活，支持交互和动画。但SVG在打印和文档嵌入方面更优。archflow的动画效果更酷炫，但diagram-architect在稳定性和多场景适用性上更胜一筹。
变现路径分析: diagram-architect的直接变现空间在于将技术文档可视化服务包装为订阅制SaaS。定价参考：个人开发者月费$9（含50次生成），团队月费$49（含500次+自定义主题API）。潜在客户群体包括技术博客作者、SaaS公司文档团队、咨询公司的架构审计服务。
来源: zephyrwang6/draw-skill
安装: 将SKILL.md放入~/.claude/skills/chart-craft-plus/目录
chart-craft-plus是目前图表类型覆盖最广的中文Skills。5大类别（技术架构、流程逻辑、业务战略、数据可视化、信息展示）共35+种图表类型，3种内置视觉风格（黑白简约、深色暗调、Colorful），每种风格都有独立的配色体系和排版规则。
核心功能演示: 输入"用甘特图展示一个8周敏捷开发计划"，chart-craft-plus不仅生成标准的甘特图HTML，还会自动标注关键路径、里程碑节点、Sprint边界和依赖关系。输入"对比React、Vue、Svelte三个框架的性能数据"，它会生成雷达图+柱状图组合仪表盘，附带交互式筛选器。
评分详解: - 功能完整度 ★★★★★ — 35+图表类型远超同类，3种风格满足大部分需求 - 上手难度 ★★★★☆ — 中文指令友好，但35种图表类型的选择逻辑需要学习 - 变现潜力 ★★★★☆ — 商业报告可视化服务潜力大，但需与Excel/BI工具竞争 - 训练营适用性 ★★★★★ — 图表类型分类清晰，非常适合数据可视化教学 - 社区活跃度 ★★★☆☆ — 主要在中文社区传播，国际化不足
与竞品对比: 相比chart-craft（基础版10种图表），Plus版的35+种覆盖了从ER图到商业模式画布的完整图谱。相比baoyu-infographic的信息图定位，chart-craft-plus更偏向数据驱动的分析图表。两者互补性大于竞争性。
训练营适用性: 可设计2小时工作流——前30分钟讲解5大图表类别和适用场景，中间60分钟实机操作从数据到图表的完整流程，最后30分钟让学员独立完成一个综合仪表盘。适合产品经理、数据分析师、运营人员的技术能力提升训练营。
来源: JimLiu/baoyu-skills
安装: npx skills add jimliu/baoyu-skills/baoyu-infographic
baoyu-infographic的设计哲学是"二维组合矩阵"——20种布局类型（线性递进、二元对比、层级嵌套、循环闭环、矩阵网格等）× 17种视觉风格 = 340种排列组合。Skill会自动分析输入内容的语义结构，推荐最优布局+风格组合，然后生成完整的HTML信息图。
核心功能演示: 输入一篇关于"5G网络切片技术"的科普文本，baoyu-infographic会：①识别出"分层递进"的内容结构 → 推荐层级嵌套布局；②检测到技术主题 → 推荐深色科技风格；③自动提取关键数据点、流程步骤、对比要素；④生成包含封面、核心内容、数据可视化、总结4个区块的完整信息图。
评分详解: - 功能完整度 ★★★★★ — 340种组合覆盖绝大多数信息图场景 - 上手难度 ★★★★☆ — 自动推荐降低门槛，但手动调优需要理解布局体系 - 变现潜力 ★★★★★ — 内容营销信息图服务的定价空间最高，$50-200/张 - 训练营适用性 ★★★★☆ — 适合内容营销课程，但340种组合的教学成本高 - 社区活跃度 ★★★★☆ — 在多个Skill分发平台（SkillsMP、Skillstore、SkillKit）均有收录
变现路径深度分析: baoyu-infographic是目前变现天花板最高的视觉Skill。三条路径：①自媒体信息图服务 — 与微信公众号、小红书等平台的内容创作者合作，按张计费；②企业品牌信息图订阅 — 为SaaS公司、咨询公司提供月度信息图包，$500-2000/月；③信息图模板市场 — 将340种组合抽取为可编辑模板，在创意市场（类似Canva模板）出售，$5-15/模板。
与竞品对比: knowledge-card-pro专注于16:9横屏知识卡片视频，baoyu-infographic则面向静态信息图。markdown-to-image专注3:4社交媒体图片。三者覆盖不同尺寸和用途，但baoyu-infographic的布局丰富度远超另外两个。
来源: rafaelolsr/archflow
安装: npx skills add rafaelolsr/archflow
archflow是本次评测中概念最独特的产品。它不接收文本描述作为输入，而是直接读取代码库目录结构和关键文件，自动分析模块依赖关系、数据流向、服务层级，然后生成一个带动画效果的HTML架构图。动画包含：数据流向动画、模块展开/折叠、依赖关系高亮、缩放平移交互。
核心功能演示: 在一个Spring Boot微服务项目根目录运行archflow，它会：①扫描pom.xml/build.gradle识别服务边界；②分析import语句构建依赖图；③检测配置文件（application.yml）提取服务注册和路由信息；④生成一个完整的HTML报告，包含带动画的架构图、可点击的模块详情面板、以及PDF导出按钮。
评分详解: - 功能完整度 ★★★★☆ — 代码到图的自动化程度高，但仅支持后端项目分析 - 上手难度 ★★★★☆ — 需要理解代码库结构，不适合非技术用户 - 变现潜力 ★★★★★ — 企业架构审计和代码文档自动化是高价值场景 - 训练营适用性 ★★★☆☆ — 概念先进但适用场景窄，主要面向架构师 - 社区活跃度 ★★★★☆ — GitHub活跃，Alpha Signal推荐
变现路径分析: archflow最适合包装为企业架构文档自动化平台。Target客户：正在做微服务迁移的传统企业、需要定期更新架构文档的技术团队。定价模型：按项目计费$99-299/项目（含HTML+PDF报告），或年度订阅$999/团队（无限项目）。竞品包括Structurizr、C4模型工具，但archflow的AI自动化程度是核心差异化。
来源: yizhiyanhua-ai/fireworks-tech-graph
安装: npx @yizhiyanhua-ai/fireworks-tech-graph 或 npx skills add yizhiyanhua-ai/fireworks-tech-graph
fireworks-tech-graph的定位极其精确——生成可出版的SVG技术图表，同时导出1920px宽的高清PNG。它专注于UML类图、时序图、组件图、部署图等软件工程标准图表，遵循UML 2.5规范。输出品质对标PlantUML和Mermaid的Pro版。
核心功能演示: 输入"绘制一个用户注册流程的时序图，包含Client、API Gateway、Auth Service、User DB、Email Service五个参与者"，fireworks-tech-graph生成标准UML时序图SVG，包含：参与者生命线、同步/异步消息箭头、激活框、alt/opt组合片段、注释框。SVG代码干净，可直接嵌入Confluence、GitBook或学术论文。
评分详解: - 功能完整度 ★★★★☆ — UML图表类型完整，但不支持非技术类图表 - 上手难度 ★★★★★ — 自然语言描述即可，无需UML语法知识 - 变现潜力 ★★★★☆ — 技术文档和学术论文市场稳定但规模有限 - 训练营适用性 ★★★★☆ — UML教学场景天然适配，2小时可覆盖主要图表类型 - 社区活跃度 ★★★☆☆ — 相对新，npm包下载量还在增长期
与竞品对比: 相比diagram-architect的HTML输出，fireworks-tech-graph的SVG在矢量缩放、打印质量、文档嵌入方面具有天然优势。但在交互性和动画效果上不如HTML。archflow的自动代码分析能力是fireworks不具备的。三者形成"手工描述→SVG"（fireworks）、"手工描述→HTML"（diagram-architect）、"自动分析→HTML"（archflow）三个差异化定位。
来源: coleam00/excalidraw-diagram-skill
安装: npx skills add coleam00/excalidraw-diagram-skill
excalidraw-diagram的独特之处在于它的设计哲学——"make visual arguments, not just display information"（做视觉论证，不只是展示信息）。它生成的是Excalidraw JSON格式文件，可以直接在Excalidraw（或Obsidian+Excalidraw插件）中打开编辑。手绘风格让图表看起来像白板讨论的产物，降低了技术文档的距离感。
核心功能演示: 输入"对比REST和GraphQL的架构差异"，excalidraw-diagram不会生成标准的对比表格，而是创建一个左右分栏的白板图：左侧REST架构用蓝色线条连接，右侧GraphQL用绿色线条，中间用虚线标注关键差异点。每个节点都有手写风格的注释，整体看起来像一位资深架构师在白板前的思考过程。
评分详解: - 功能完整度 ★★★★☆ — Excalidraw格式可编辑性强，但输出需要Excalidraw环境 - 上手难度 ★★★★☆ — 自然语言输入简单，但Excalidraw编辑需要额外学习 - 变现潜力 ★★★☆☆ — 手绘风格受众较窄，主要用于技术讨论和文档 - 训练营适用性 ★★★★☆ — 非常适合白板设计思维和架构讨论工作坊 - 社区活跃度 ★★★★★ — coleam00是知名Claude社区贡献者，Star数高
变现路径: excalidraw-diagram的变现路径在于技术咨询服务而非直接售卖。架构师可以用它快速产出咨询报告中的白板图，搭配excalidraw-diagram的"论证导向"设计，让客户讨论更聚焦。间接变现方式：架构咨询套餐中包含的视觉文档服务，$200-500/次。
来源: Anthropic官方Skills库
安装: 随Claude Code默认安装，或从anthropics/skills仓库获取
canvas-design是Anthropic官方提供的视觉创作Skill，定位是"博物馆级别的画布艺术"。它不生成图表或架构图，而是专注于海报、封面、社交卡片等艺术性视觉内容。输出格式为PNG和PDF，支持图层系统、排版网格、调色板管理。
核心功能演示: 输入"为一家AI创业公司设计一张产品发布会邀请函，风格极简、科技感、黑金色系"，canvas-design会：①建立设计网格和视觉层次；②选择匹配的字体组合（显示字体+正文字体）；③构建黑金配色系统（主色、辅助色、强调色）；④安排信息层级（标题→副标题→日期→CTA按钮）；⑤输出PNG预览和PDF印刷文件。
评分详解: - 功能完整度 ★★★☆☆ — 艺术设计能力强，但缺乏数据可视化和图表能力 - 上手难度 ★★★★★ — 官方Skill，集成度最高，开箱即用 - 变现潜力 ★★★★☆ — 社交媒体营销和品牌设计市场巨大 - 训练营适用性 ★★★★☆ — 设计基础教学的好起点 - 社区活跃度 ★★★★★ — 官方维护，更新频率和稳定性最高
与竞品对比: canvas-design与baoyu-infographic的定位差异明显——前者是"设计师的画布"，后者是"数据到信息图的管道"。canvas-design更适合创意性视觉，baoyu更适合内容性视觉。两者在营销场景可以串联使用：baoyu生成信息图内容，canvas-design制作发布海报。
mindmap
root((视觉生成Skills))
技术架构类
diagram-architect
HTML输出
5种专业主题
交互式节点
archflow
代码库自动分析
HTML动画
依赖关系图
fireworks-tech-graph
SVG矢量输出
UML标准规范
PNG高清导出
excalidraw-diagram
JSON可编辑格式
手绘白板风格
Obsidian集成
数据可视化类
chart-craft-plus
35+图表类型
3种视觉风格
中文原生支持
信息图类
baoyu-infographic
20×17组合矩阵
自动布局推荐
内容语义分析
艺术设计类
canvas-design
PNG/PDF输出
图层排版系统
官方维护
跨界融合
knowledge-card-pro
16:9视频卡片
STEM科普定位
markdown-to-image
3:4社交图片
播客摘要转图
| 使用场景 | 首选Skill | 理由 |
|---|---|---|
| 技术文档架构图 | diagram-architect | 5种主题+交互节点，文档团队首选 |
| 数据报告图表 | chart-craft-plus | 35+类型覆盖，中文友好 |
| 社交媒体信息图 | baoyu-infographic | 340种组合，自动推荐最优布局 |
| 代码库架构可视化 | archflow | 唯一支持自动代码分析的方案 |
| 学术论文UML图 | fireworks-tech-graph | SVG矢量输出，符合出版标准 |
| 白板架构讨论 | excalidraw-diagram | 手绘风格，可编辑JSON |
| 品牌营销海报 | canvas-design | 官方维护，艺术品质最高 |
| 排名 | Skill | 最佳变现路径 | 预估月收入（成熟期） |
|---|---|---|---|
| 1 | baoyu-infographic | 企业信息图订阅服务 | $3,000-8,000 |
| 2 | archflow | 架构文档自动化SaaS | $2,000-5,000 |
| 3 | diagram-architect | 技术文档可视化API | $1,500-4,000 |
| 4 | chart-craft-plus | 商业报告图表服务 | $1,000-3,000 |
| 5 | canvas-design | 品牌设计自动化工具 | $1,000-3,000 |
| 6 | fireworks-tech-graph | 技术出版物图表API | $500-2,000 |
| 7 | excalidraw-diagram | 架构咨询视觉工具 | $300-1,000 |
发现一：HTML正在成为视觉输出的"容器格式"。七个Skills中有四个以HTML为输出格式，这不是巧合。HTML提供了SVG不具备的交互性（悬停、点击、动画），同时比PNG/PDF更易迭代修改。diagram-architect和archflow证明了HTML格式完全可以达到"可交付"的品质标准。
发现二："视觉论证"取代"视觉展示"。excalidraw-diagram的"make visual arguments"理念正在影响整个赛道。新生代的视觉Skill不再满足于把数据变成图形，而是试图通过布局、颜色、连接线来传达观点和因果关系。baoyu-infographic的语义分析推荐引擎和diagram-architect的信息层级设计都体现了这一趋势。
发现三：中文Skills的垂直化优势。chart-craft-plus和baoyu-infographic都是中文原生Skills，在中文内容生态（微信公众号、小红书、B站）中有天然优势。这种本地化不是简单的语言翻译，而是从布局逻辑到视觉风格的深度适配——中文字体的排版规则、中文内容的密度特征、中文社交媒体的图片规格都做了针对性优化。
发现四：代码到图的自动化是下一个突破口。archflow证明了"输入代码→输出架构图"的可行性。这个方向一旦成熟，将彻底改变技术文档的维护方式——架构图不再需要手动更新，而是与代码库自动同步。预计2026年下半年会有更多"代码到视觉"的Skills出现。
发现五：Skill之间的串联效应开始显现。这七个Skill并非孤立使用。实际工作流中，用户可能先用archflow分析代码库生成架构草图，再用diagram-architect精修为正式文档图，同时用chart-craft-plus生成配套的数据仪表盘，最后用canvas-design制作发布海报。这种"Skill Pipeline"模式正在成为高级用户的标配实践。
[!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 等场景全覆盖。