[{"data":1,"prerenderedAt":179},["ShallowReactive",2],{"build-logs-sketch-infographic":3,"build-log-sketch-infographic-":177},[4],{"id":5,"title":6,"body":7,"date":142,"description":143,"draft":144,"extension":145,"faq":146,"meta":159,"navigation":160,"path":161,"project":62,"readingTime":162,"seo":163,"seoKeywords":164,"stem":172,"summary":173,"tags":174,"updated":177,"__hash__":178},"builds\u002Fbuilds\u002Fsketch-infographic\u002F2026-09-21-why-handdrawn-code-diagrams.md","AI 画架构图别只会 Mermaid：一个可小修、能进 Git 的手绘风 Agent Skill",{"type":8,"value":9,"toc":132},"minimark",[10,18,23,26,29,32,36,39,42,45,48,52,64,67,70,76,79,95,98,102,105,111,114,117,120,123,126,129],[11,12,13],"p",{},[14,15],"img",{"alt":16,"src":17},"汇报图在好看难改、能改难看和代码手绘三条路之间的对比","\u002Fb\u002Fsketch-infographic\u002Fdilemma.png",[19,20,22],"h2",{"id":21},"改了-5-轮图还是不对","改了 5 轮，图还是不对",[11,24,25],{},"最近几次给非技术同事讲流程，卡的不是内容，是图。",[11,27,28],{},"有一版我用 Mermaid。节点写得清楚，对方看完只记住一排方块。我换成白板，第一眼舒服多了。下一轮同事说「这里再强调一下风险」，图标、业务物件、那个变窄变厚的形状都不好动，我只好整张重画。前后大概 5 轮。",[11,30,31],{},"我想要的其实很小：人看得懂，别太工程师，改一处不用从头来。",[19,33,35],{"id":34},"第一版不难第二版才烦","第一版不难，第二版才烦",[11,37,38],{},"白板，或者直接让 AI 出一张图，第一版常常能看。烦的是后面。自定义弱，个性化图标和业务物件很难说改就改。",[11,40,41],{},"Mermaid 能进文档，能改文字，也能进版本管理。工程师之间传没问题。拿去汇报，讲给非技术同事，就硬了。",[11,43,44],{},"我给自己记过要求：看起来别像一堵拓扑墙，改标注、挪节点别整图重来。还得能画「包裹」「人」「特征变窄变厚」，不能永远是 Box1 指向 Box2。",[11,46,47],{},"还有一笔账。AI 把想法画成第一版很快，可每次微调都重画一遍，Token 实在肉疼。",[19,49,51],{"id":50},"后来写成了一个-agent-skill","后来写成了一个 Agent Skill",[11,53,54,55,63],{},"于是有了 ",[56,57,62],"a",{"href":58,"rel":59,"target":61},"https:\u002F\u002Fgithub.com\u002FMorvanZhou\u002Fsketch-infographic",[60],"nofollow","_blank","sketch-infographic","，我叫它「手绘信息图」。",[11,65,66],{},"开源的 Agent Skill。装好直接说要什么图，Agent 去选型、画图。出来是一张手绘图，也能存成普通图片。",[11,68,69],{},"第一版交给 AI。后面改颜色、改标注，我在本地重渲，不再去调图像模型。",[11,71,72],{},[14,73],{"alt":74,"src":75},"口头需求经 Agent Skill 出第一版，再小修并留下版本的工作流","\u002Fb\u002Fsketch-infographic\u002Fedit-loop.png",[11,77,78],{},"我现在大概是这么用的：",[80,81,82,86,89,92],"ol",{},[83,84,85],"li",{},"口述「把这个流程讲清楚」",[83,87,88],{},"Agent 画出第一版手绘图",[83,90,91],{},"下一轮只改颜色、标注和位置，让它重画这一处",[83,93,94],{},"改动留得下来。画错了还能退回上一版",[11,96,97],{},"全量重画才费 Token。平常我只动要改的那一处，再让它重画一遍。",[19,99,101],{"id":100},"他们记住的是包裹不是步骤名","他们记住的是「包裹」，不是步骤名",[11,103,104],{},"只画方框连线，Mermaid 够用。我还是想要自定义，因为非技术同事记不住「步骤 C」，记得住图上那个「包裹」，还有那个人。",[11,106,107],{},[14,108],{"alt":109,"src":110},"左侧仅节点名的方框流程，右侧叠层形态与业务物件入图的对比","\u002Fb\u002Fsketch-infographic\u002Fbeyond-boxes.png",[11,112,113],{},"skill 里我写了默认倾向：别一上来就排一排等宽卡片。读者要看形态怎么变，就用圆、叠层，或者补一个自己的形状。要看谁依赖谁，再用方框。常用图标是内置的。遇到业务里才有的物件，让 AI 画一个补进去就行。",[11,115,116],{},"教人画架构图的文章，我看到的大多是「用 Mermaid」或者「打开白板」。我是被那 5 轮汇报图逼的，才做成现在这样：看起来像手绘，图能改、能留版本，第一版让 AI 画，之后小修不用整张重来。",[19,118,119],{"id":119},"先说它干不了什么",[11,121,122],{},"大规模数据探索、能点能筛的统计图，别找它。照片级插画和封面也不是这份工作。团队已经统一 Mermaid，而且只要最简流程，就继续用 Mermaid。",[11,124,125],{},"我拿它画的是研究框架、教学示意、服务拓扑、业务路径、架构汇报。这些图要讲给别人听，而且一定会改很多轮。",[11,127,128],{},"装上这个 skill，直接让 Agent 画就行。打算一直改的图，把图留在项目里。之后改颜色、改标注、留下这一版，跟改一份文档一样。",[11,130,131],{},"这是第一篇构建日志。我先用它扛自己的汇报。哪张图改起来还别扭，再往 skill 里补。",{"title":133,"searchDepth":134,"depth":134,"links":135},"",3,[136,138,139,140,141],{"id":21,"depth":137,"text":22},2,{"id":34,"depth":137,"text":35},{"id":50,"depth":137,"text":51},{"id":100,"depth":137,"text":101},{"id":119,"depth":137,"text":119},"2026-09-21","用 Agent Skill 画流程图和架构图时，白板好看难改，Mermaid 能改却干瘪。sketch-infographic 用代码生成手绘风 SVG：能小修、能进 Git，小改不重烧 Token。",false,"md",[147,150,153,156],{"q":148,"a":149},"sketch-infographic 和 Mermaid 有什么区别？","Mermaid 适合工程文档里的极简流程，节点名清楚但视觉偏干瘪，不太适合汇报和非技术沟通。sketch-infographic 输出白板手绘风 SVG，既能画拓扑方框，也能用圆、叠层、自定义形表达「像什么」，同时图定义是代码，可以小修和进 Git。",{"q":151,"a":152},"为什么不用 Excalidraw 或直接让 AI 出图？","白板工具和图像模型容易做出好看的第一版，但改一处常要整张重来，自定义能力也偏弱。我更需要图能持续小修、能版本管理，还要能画业务物件等个性化图形。代码生成 SVG 后，本地重渲即可，不必反复调图像模型。",{"q":154,"a":155},"sketch-infographic 怎么安装和使用？","它是开源 Agent Skill。一行命令安装：npx skills add morvanzhou\u002Fsketch-infographic。装好后直接让 Agent「画一张某某架构图」即可。需要长期改的图，留在项目里，之后只改要动的地方，在本地重画或导出图片。",{"q":157,"a":158},"这个工具不适合做什么？","不适合大规模数据探索、交互式统计图表，也不适合照片级插画或封面。若团队只需要极简流程图且已统一用 Mermaid，也不必替换。它更适合研究、教学、架构、业务分析和汇报里的结构示意。",{},true,"\u002Fbuilds\u002Fsketch-infographic\u002F2026-09-21-why-handdrawn-code-diagrams",6,{"title":6,"description":143},[165,166,167,168,169,170,171],"手绘信息图","代码生成 SVG","Agent Skill 画图","架构图汇报","Mermaid 替代","可版本管理示意图","AI 生成流程图","builds\u002Fsketch-infographic\u002F2026-09-21-why-handdrawn-code-diagrams","给非技术同事讲流程时，白板一改就得重画，Mermaid 能改但太干。sketch-infographic 用代码生成手绘风 SVG，支持小修、Git 和自定义图形，AI 出第一版，日常改图靠本地重渲。",[175,176],"独立开发","产品思考",null,"RTGG8LEPceJjT7IsFVfc4Kfwmt4USe62JCHhcacWyGA",1793028248146]