## 当文本变成图像：一场Prompt到像素的七引擎拉力赛 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 | --- ## 一、diagram-architect：HTML架构图的工业级标准 **来源**: [lohasle/diagram-architect.skill](https://github.com/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公司文档团队、咨询公司的架构审计服务。 --- ## 二、chart-craft-plus：35种图表的中文视觉工厂 **来源**: [zephyrwang6/draw-skill](https://github.com/zephyrwang6/draw-skill/blob/main/chart-craft-plus/SKILL.md) **安装**: 将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分钟让学员独立完成一个综合仪表盘。适合产品经理、数据分析师、运营人员的技术能力提升训练营。 --- ## 三、baoyu-infographic：信息图设计的组合爆炸 **来源**: [JimLiu/baoyu-skills](https://github.com/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的布局丰富度远超另外两个。 --- ## 四、archflow：代码库到动态架构动画的逆向工程 **来源**: [rafaelolsr/archflow](https://github.com/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自动化程度是核心差异化。 --- ## 五、fireworks-tech-graph：出版级SVG技术图表 **来源**: [yizhiyanhua-ai/fireworks-tech-graph](https://github.com/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）三个差异化定位。 --- ## 六、excalidraw-diagram：可视化论证而非装饰 **来源**: [coleam00/excalidraw-diagram-skill](https://github.com/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/次。 --- ## 七、canvas-design：Anthropic官方的艺术画布 **来源**: 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制作发布海报。 --- ## 生态分类思维导图 ```mermaid 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 | ### 按上手速度排名 1. **canvas-design** — 官方集成，零安装成本，5分钟出图 2. **diagram-architect** — 一行安装，描述即可生成 3. **fireworks-tech-graph** — npm一键安装，自然语言输入 4. **excalidraw-diagram** — 安装简单，但需要Excalidraw环境 5. **chart-craft-plus** — 中文友好，但图表类型选择需要学习 6. **baoyu-infographic** — 自动推荐降低门槛，手动调优需要经验 7. **archflow** — 需要理解代码库结构，学习曲线最陡 --- ## 关键发现与趋势判断 **发现一：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"模式正在成为高级用户的标配实践。 --- ## 参考来源 1. [diagram-architect — Claude Code Skill](https://lohasle.github.io/diagram-architect.skill/) — diagram-architect官方文档，包含5种主题预览和安装指南 2. [I Built 63 Design Skills For Claude](https://marieclairedean.substack.com/p/i-built-63-design-skills-for-claude) — Marie Claire Dean的63个设计Skills集合，视觉生成生态的重要参考 3. [Fighting 'AI Slop': How Claude Code Skills Transform Frontend Design](https://claude-blog.setec.rs/blog/frontend-design-skills-fighting-ai-slop) — 前端设计Skills的反AI同质化运动深度分析 4. [archflow: Claude Code Skill for Architecture Diagrams](https://github.com/rafaelolsr/archflow) — archflow代码库，包含完整的代码分析到架构动画的Pipeline 5. [Fireworks Tech Graph: Production-Ready SVG Diagrams](https://pasqualepillitteri.it/en/news/2333/fireworks-tech-graph-claude-code-skill-uml-diagrams-svg-png) — fireworks-tech-graph的详细评测，SVG输出质量对比 > [!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 等场景全覆盖。