概述
原来制作配图都是用 mermaid，在 markdown 里插个代码块就出图，这是没问题的，AI 也比较擅长使用mermaid。
但 mermaid 的表现有限，如果要好的展现，需要使用网上的画图软件去画，画下来人工成本太高。
本文探索一下，怎么用 AI 制作配图。
核心诉求
- 能用文字描述图片，AI 根据这个描述生图；
- 生图效果要稳定，不要每次给人惊喜------同一份描述跑出来的图应当一致，改一个字只影响该影响的地方；
- 本地生图，不要费Token。
网络探索
探索了一下，找到5种办法：
Rough.js绘制
原理：
Rough.js 是个手绘风格的绘图库，配上小赖字体，往 canvas 上画矩形和直线时自动加抖动，出来就是手绘草图的样子。
描述：
// 每个框的 x / w 都是手算的
box(doc, 30, 60, 150, 130, 'gray', '上电开机', ['内核 + init']);
box(doc, 227, 60, 195, 130, 'gray', '启动脚本', ['/etc/init.d/codesyscontrol']);
box(doc, 469, 60, 225, 130, 'blue', 'runtime 进程', ['codesyscontrol.bin']);
//省略两个
arrow(doc, 181, 125, 221, 125);生成的效果：
优点：
每一处都能精确控制，想怎么构图就怎么摆，不受排版引擎限制。
本文的配图用的就是这个。
rough.js + 自动布局
原理：
画法和上一种一样，区别在坐标不写死：先量出每个框里文字有多宽，框宽自动定，整排自动居中。
描述：
// 只写内容，位置和框宽都没有
flowRow(doc, [
{ tone: 'gray', title: '上电开机', sub: ['内核 + init'] },
{ tone: 'gray', title: '启动脚本', sub: ['/etc/init.d/codesyscontrol'] },
{ tone: 'blue', title: 'runtime 进程', sub: ['codesyscontrol.bin'] },
{ tone: 'orange', title: '读启动应用目录', sub: ['.app + .crc'] },
{ tone: 'green', title: '校验并加载', sub: ['进入周期任务'] },
]);生成的效果：
优点：
改文案不用重排坐标，框会自己加宽；文字撑破框、一排超出画布还会直接报错，不靠人眼看图找毛病。
D2 --sketch
原理：
D2 是一门专门画图的描述语言，写清有哪些节点、怎么连线，布局引擎负责排版，--sketch 模式再给线条加上手绘抖动，导出 SVG 转 PNG。坑集中在字体和中文行距上。
描述：
direction: right
power: "上电开机\n内核 + init" { shape: rectangle; style.fill: "#f1f3f5"; style.stroke: "#495057" }
script: "启动脚本\n/etc/init.d/\ncodesyscontrol" { shape: rectangle; style.fill: "#f1f3f5" }
rt: "runtime 进程\ncodesyscontrol.bin" { shape: rectangle; style.fill: "#e7f5ff"; style.stroke: "#1971c2" }
... （另外两个框略）
power -> script -> rt -> read -> load生成的效果：
优点：
自动排版能力五种里最完整，几行 DSL 就能得到排好的图，结构复杂也不用自己算位置。
HTML/CSS + 截图
原理：
把方框写成 HTML 元素，位置交给 CSS 的 flex 自动排，再用 Playwright 这类无头浏览器把这块元素截成 PNG。代价是要装一个浏览器。
描述：
<div class="flow">
<div class="node" style="border-color:#495057;background:#f1f3f5">
<div class="t">上电开机</div>
<div class="s">内核 + init</div>
</div>
<svg class="arrow">...</svg>
<div class="node">...</div>
</div>
.flow { display: flex; align-items: center; gap: 6px; } /* 位置全交给 flex */生成的效果：
优点：
排版能力就是网页的能力，文字换行、间距、圆角都和网页一致，改样式就是改 CSS，还能直接在浏览器里调。
Mermaid handDrawn
原理：
mermaid 自带手绘主题（look: handDrawn），写 mermaid 代码块，布局引擎自动排。缺点是中文标签一长布局容易塌，得额外调参数。
描述：
flowchart LR
power["上电开机<br/>内核 + init"]:::tgray
script["启动脚本<br/>/etc/init.d/<br/>codesyscontrol"]:::tgray
rt["runtime 进程<br/>codesyscontrol.bin"]:::tblue
... （另外两个框略）
power --> script --> rt --> read --> load
classDef tgray fill:#f1f3f5,stroke:#495057
classDef tblue fill:#e7f5ff,stroke:#1971c2生成的效果：
优点：
最省事------不用装任何东西，Markdown 里写个代码块就出图，AI 对它也最熟。
五种写的不是一种东西，共同点是图都由代码生成，差别只在谁来算坐标、风格能控制到什么程度。
博客使用
上述五种是方式的原理介绍，实际使用的时候，我还是"懒人模式"。
懒人模式
写博客时，我会先写好 concept.md（概念文章），将文章开头，各章节，以及思维链条用最简单的文字（词语）描述出来。（构思一遍）
然后AI填充文字，需要生图的地方，会加上生图描述：画什么、什么布局、重点强调什么
如：
生图
- 内容：写博客到出图的完整流程，共 5 步
- 形式：横向 5 个方框，箭头串联
- 要点：突出「人工审阅」这一步，它是唯一的人工环节；宽 1200px然后人工审阅修改。
再后AI再生图，替换这段描述，变成图片：
实例：
写上面的文字时，我就是截图这么写的：
然后AI就生成了上面的图片。
生图效果
这样的生图效果还好，我试验了一下，可以生成这样的配图：
这样的配图，如果用Mermaid去画，效果估计不怎么样；
如果去在线网站上"拖拉拽"，也有点费手指头。
或者让AI去调用大模型生图，一是会费token，二是修改时经常给人惊喜；
使用这种本地的方式，因为最终是本地的文件，出了问题可以手动修改下（ReRender即可），或者动动嘴说下改成啥，下次生成还是很稳定的。
集成
生图可以做成技能，也可以加进Agents.md中，反正这个生图的流程，能按照你期望的方式就好。
附件
五种办法的完整代码都在附件里，让AI看看应该会弄。
附件 five-methods.zip。
最近刚刚尝试这块，如果有更好的建议可以给出，也学习一下。