手绘信息图 · 用代码生成可维护的白板风示意图
汇报图不该在好看难改和能改难看之间二选一。sketch-infographic 用 Agent Skill 生成手绘风 SVG：局部小修、进 Git 版本管理，还能画包裹、叠层等图形化物件。
假二选一
好看，难改
白板工具和图像模型第一版好看，改一处却常要整张重来，自定义业务物件也弱。
能改，难看
Mermaid 能进文档、能版本管理，但视觉偏干瘪，拿去汇报或讲给非技术同事不够用。
第三条路
汇报图不该在「好看难改」和「能改难看」之间二选一。手绘观感、代码可维护、AI 可接管、局部小修不重渲——四件事可以同时成立。
真正需要的三件事
不像拓扑墙
白板手绘风，给非技术同事也能一眼看懂「像什么」。
改不必整图重来
改标注、挪节点只动几行坐标，本地重渲即可，不烧 Token。
能画图形化物件
包裹、人、叠层变窄变厚……不只是 Box1 → Box2。
核心特性
手绘风 SVG
白板手绘观感，适合汇报、教学和跨职能沟通，不像冷冰冰拓扑墙。
代码即可维护
图定义是 JavaScript，可小修、可 diff、可进 Git 版本管理。
自定义图形
圆、叠层、path、svgGlyph；内置 Lucide，也能让 AI 画业务物件。
AI 出骨架省 Token
AI 负责第一版；日常微调本地重渲，不必反复调图像模型。
工作流程
口述需求
告诉 Agent「把这个流程讲清楚」或「画一张架构图」。
生成图定义
Agent 写出 figures.mjs，本地渲染出手绘风 SVG。
局部小修
下一轮只改坐标、颜色、标注，node render.mjs 重渲。
进 Git
diff 可回滚、可复现；日常迭代贵的是几行坐标，不是 Token。
为什么要画「像什么」
非技术同事记不住「步骤 C」，却记得住「包裹」和「人」。形态与变换用圆/叠层/自定义形；依赖关系再用拓扑方框。
适合 / 不适合
更适合
- 研究框架、教学示意
- 服务拓扑、业务路径
- 架构汇报、跨职能沟通
- 需要反复改的结构图
不太适合
- 大规模数据探索 / 交互统计图
- 照片级插画和封面
- 团队已统一且只需极简 Mermaid 流程
触发短语
"画一张某某架构图"
"把这个流程讲清楚"
"画一张手绘风示意图"
"用 sketch-infographic 画图"
安装
$npx skills add morvanzhou/sketch-infographic在终端运行此命令，或直接告诉你的 AI 助手执行此命令即可完成安装。
说出你的需求，AI 帮你实现
这是一个由用户共同打造的网站 —— 你提的需求，将会被 AI 转化成真正的功能。看看大家都在期待什么，投票、关注、一起推动它实现。
常见问题
- Mermaid 适合工程文档里的极简流程，节点名清楚但视觉偏干瘪。sketch-infographic 输出白板手绘风 SVG，既能画拓扑方框，也能用圆、叠层、自定义形表达「像什么」，同时图定义是代码，可以小修和进 Git。