AI制作配图

概述

原来制作配图都是用 mermaid，在 markdown 里插个代码块就出图，这是没问题的，AI 也比较擅长使用mermaid。

但 mermaid 的表现有限，如果要好的展现，需要使用网上的画图软件去画，画下来人工成本太高。

本文探索一下，怎么用 AI 制作配图。

核心诉求

1. 能用文字描述图片，AI 根据这个描述生图；
2. 生图效果要稳定，不要每次给人惊喜——同一份描述跑出来的图应当一致，改一个字只影响该影响的地方；
3. 本地生图，不要费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。

最近刚刚尝试这块，如果有更好的建议可以给出，也学习一下。