配图「精确>好看」：技术文章为什么用代码生成图

现状之痛：给技术文章配图，两种常见坑——要么是密密麻麻的截图直接贴上去，读者看不清；要么是 AI 画了一张很漂亮的插画，但谁也看不懂它在讲什么。

读完你将：理解「配图精确 > 好看」的原则，以及为什么代码生成图是技术文章的最佳选择——在精确的基础上，还能做到好看。

---

〇、配图的本质：把意思讲清楚

技术文章的配图，不是装饰，是信息载体。

一张好的技术配图：读者扫一眼，就能抓到「这个流程怎么走」「这个对比差在哪」「这个架构分几层」。

一张坏的技术配图：很漂亮，但读者看完更糊涂。

---

一、两种配图方式

方式A：AI 文生图（让模型画）

输入：一段描述 → 输出：一张 AI 生成的图
优点：视觉质感好（3D材质/杂志感）
风险：⚠️ 文字可能错/糊/裁剪（AI画字不可控）
     ⚠️ 数据可能改错（图表语义重画）

方式B：代码生成图（SVG 渲染）

输入：结构化数据 → 代码生成 SVG → 渲染 PNG
优点：✅ 文字100%精确（代码渲染）
     ✅ 数据100%精确（数值可控）
     ✅ 免费 + 完全可复现
风险：⚠️ 视觉质感需要设计（模板决定）

---

二、为什么「精确 > 好看」

技术文章的特殊性

普通文章配图：好看就行（情绪/氛围）
技术文章配图：精确是底线（信息/逻辑）

流程标签错了 → 读者照着做，做错
数据画错了 → 读者信了，全盘皆错

技术文章的一张错图，可以毁掉全文的信任。

一个例子

假设画「Agent 工作流」：

• 文生图：AI 可能把「用户输入」画成「系统输入」，标签糊了读者猜
• 代码生成：标签「用户输入」「AI 执行」「结果检查」精确到像素

---

三、我的方案：精确为主，好看为辅

我的配图体系是：代码生成（SVG）为主，借鉴文生图的视觉质感。

SVG 代码生成（保证精确）
  + 材质化3D风格（借鉴好看）
  + 短标签（2-5字，图内只放标签）
  + QA检查（标签可读/数据正确/无裁剪）
  = 精确且好看的配图

具体做法：

1. 精确：SVG 代码渲染，文字/数据 100% 可控
2. 好看：材质化视觉（柔和阴影/IKB蓝/Swiss构图）——从 AI 文生图风格里学「质感」，不用它的「不可控」
3. 短标签：图内文字 ≤6字，「结果检查」不是「检查执行结果」
4. QA：生成后检查标签/数据/裁剪

---

四、为什么不用 AI 文生图做正文配图

澄清：AI 文生图不是不好——它做封面、做 Banner、做装饰性插画非常合适。

我的选择是按用途分工：

用途	方式	原因
正文概念图/流程图	代码生成（SVG）	文字/数据必须精确
封面/Banner	AI 文生图	装饰性，无文字要求
真实截图/命令输出	实拍截图	真实性铁律

---

五、此刻的你

此刻的你，已经不再为「一张漂亮的图」买单——你开始为「一张讲清楚的图」付费。

你正在成为那个——看图先问「它讲清楚了吗」，再问「它好看吗」的严格读者。

记住：配图精确 > 好看。技术文章的图是信息载体，不是装饰品——但在精确的基础上，可以更好看。

---

实体：SVG配图, 代码生成, AI文生图, 短标签

价值：信息准确, 信任建立, 视觉质感, 配图效率

认知：配图精确>好看——图是信息载体不是装饰品，但在精确基础上可以更好看

---

关于作者 无记——AI / Agent / 数智化转型实践者。 只写亲手跑通的东西，不聊概念。关注我，一起把认知变现。