用 ChatGPT Image 2.0 做技术配图：一次从“能看”到“能交付”的实践

文章摘要作者分享了使用AI生成技术文档配图的实用经验。通过拆解需求为流程解释图、状态变化图和场景示意图三类强调技术配图应服务于内容理解而非美观度。文章提供了详细的Prompt编写方法建议将图片生成分为构图、风格定型、人工校对三个阶段并列出验收标准。作者总结了AI图像生成适用于技术插图但需人工校验文字准确性的原则推荐从低风险任务入手让AI承担视觉草稿功能人工负责最终内容把关。最近给一个内部工具写说明文档时我遇到一个很小但很烦的问题文字已经写清楚了流程图也有但页面一放到知识库里读起来还是干。尤其是给非研发同事看的部分如果只有接口字段、状态流转和几张截图理解成本会比较高。我试着用 ChatGPT Image 2.0 做一组技术配图不是做艺术海报而是做“能放进文档里的解释型图片”。为了方便在同一套输入下观察不同模型的输出差异我这次用的是一个多模型调用环境https://ouai.me它可以在同一界面切换 ChatGPT、Claude、Gemini、Grok 等模型适合处理文档、写 Prompt、拆任务和对比输出效果。这篇文章记录的是一次比较实际的工作流如何把一个模糊的配图需求拆成可描述、可生成、可验收的图片任务。重点不是炫效果而是尽量让图片服务于技术说明。一开始的需求其实很模糊同事最初给我的话只有一句能不能给这篇接口说明配几张图看起来别太像纯文档这个需求看似简单实际很难直接做。因为“别太像纯文档”不是一个可执行标准。如果直接把这句话丢给图像模型结果大概率会变成几类一张很泛的科技感背景图一张放了很多抽象线条的系统架构图一张视觉不错但和业务关系不大的插画一张文字很多但容易出错的说明图。前两类看着热闹但放进技术文档里意义不大。后两类更麻烦尤其是图片里的文字一旦错一个字段名反而会误导读者。所以我后来没有直接生成“大图”而是先把图片任务拆小。先拆任务这张图到底解决什么问题我把这次技术配图分成三种类型图片类型目的适合放在哪里流程解释图帮读者理解一次请求如何流转接口调用说明前状态变化图展示对象从创建到完成的状态状态字段说明旁场景示意图让非研发同事理解功能使用背景文档开头或总结处这一步很关键。图像生成不是越精美越好而是要先确认“读者看完这张图应该少问哪一个问题”。比如接口说明里有一个状态字段pending - processing - success / failed如果只写成文字产品、测试、运营同事都能看懂但读得比较慢。换成一张状态流转图理解速度会快很多。不过这里也有一个边界状态名称最好不要直接让图片模型渲染成复杂文字。我的做法是图片里只做结构和视觉关系关键字段仍然放在正文或 Markdown 表格里。视觉控制参数别只写“科技感”第一次生成时我写过一个很常见的描述生成一张科技感的接口流程图适合放在技术文档中。结果不算差但很泛。画面里有服务器、线条、发光节点看起来像很多云计算文章的头图但没有体现这个文档要解释的东西。后来我把 Prompt 改成了更具体的参数生成一张用于技术文档的横向流程解释图。 画面内容 - 左侧是用户终端 - 中间是 API 网关 - 右侧是业务服务和数据存储 - 用简洁箭头表示请求流向 - 不要在图片中生成大段文字 - 只保留少量英文标签如 Client、Gateway、Service、Storage。 视觉风格 - 白色或浅灰背景 - 线条清晰 - 扁平化矢量风格 - 不要复杂光效 - 不要真实人物 - 不要夸张的未来科幻风 - 适合放在 CSDN 技术文章和内部文档中。 输出比例 - 16:9 - 留出上下边距 - 画面中心不要太拥挤。这次输出就稳定多了。这里有个小经验图像 Prompt 里不要只写风格词最好同时写清楚“内容、布局、限制、比例、使用场景”。尤其是技术配图限制条件比形容词更重要。一个非常见任务给“异常兜底流程”做示意图常见技术配图一般是系统架构、接口流程、部署拓扑。为了避免图片过于套路我这次选了一个不太常见的小任务给“异常兜底流程”做示意图。背景是这样的接口调用失败后系统不会立刻中断而是会进入一个简化处理路径正常请求进入主服务主服务失败后写入待处理队列定时任务重新处理仍然失败时生成待人工确认记录运维或业务同事在后台查看。这类流程用纯文字写会显得长用传统流程图又比较正式。我希望图片能表达“主路径 兜底路径”的关系但不要像严肃的 UML 图。Prompt 大概是这样生成一张技术文档插图用来解释异常兜底流程。 画面结构 - 主流程在上方从左到右 - 兜底流程在下方用较浅颜色表示 - 主流程包含请求、业务处理、返回结果三个节点 - 兜底流程包含队列、重试、人工确认三个节点 - 用箭头表示主流程失败后进入兜底流程 - 图片中不要出现复杂代码 - 不要生成密集文字 - 节点可以用简单图标表示。 视觉要求 - 扁平化 - 清爽 - 适合技术博客 - 背景干净 - 不使用夸张警示符号 - 整体看起来像文档配图而不是广告图。这张图最后没有直接原样使用我做了两处调整删掉了一些模型生成的小字用制图工具重新标了关键节点名称。这也是我目前比较推荐的方式让 ChatGPT Image 2.0 负责画面结构和视觉草稿最终文字和字段名由人工补上。图片验收标准不能只看好不好看技术配图最容易出现一个问题大家讨论半天“好不好看”但没人检查“准不准确”。我后来给自己列了一个很短的验收表检查项通过标准业务关系图里表达的流程和正文一致结构清晰读者能看出主次关系文字可靠关键字段不依赖图片自动生成风格统一和文档截图、流程图不冲突信息密度一张图只解释一个重点可修改后续能用工具补字或裁剪发布边界不包含真实用户、真实数据和内部标识这个表比“好看不好看”有用。尤其是文字可靠这一项。图像模型在文字渲染上已经进步不少但如果是接口名、状态码、字段名我仍然不建议完全交给图片生成结果。更稳的做法是图片里少放文字文字放在正文、表格或后期标注中。我会把图片分成三轮生成如果一次性追求成图很容易返工。现在我一般分三轮。第一轮只看构图这一轮不纠结细节只看左右关系是否对主流程是否清楚是否有足够留白画面是否适合放进文档。Prompt 可以短一点但要写明比例和用途。第二轮固定风格选中一张构图后再补充风格要求扁平化还是线框风背景明暗图标复杂度是否需要阴影是否适合浅色文档页面。这一步主要是让同一篇文章里的几张图看起来像一套而不是每张都来自不同模板。第三轮人工校对和补字最后一步我不会再依赖模型。会把图片放到 Figma、PPT 或其他制图工具里手动补充节点名称字段说明箭头标签编号文档标题。这样做慢一点但可控。如果是要放在公司知识库、产品说明或对外文章里这一步最好不要省。一段比较稳定的 Prompt 模板下面这个模板可以直接改请生成一张用于技术文档的解释型配图。 图片目的 解释【这里写要说明的流程或概念】。 画面内容 - 主要对象包括【对象 A】、【对象 B】、【对象 C】 - 它们之间的关系是【关系说明】 - 用箭头或分层结构表达关系 - 一张图只表达一个重点。 视觉要求 - 扁平化矢量风格 - 背景简洁 - 线条清晰 - 信息密度适中 - 不使用真实人物 - 不生成大段文字 - 不出现真实品牌标识 - 适合放在技术博客或项目文档中。 输出要求 - 比例 16:9 - 留出边距 - 便于后期添加文字标注。这个模板不复杂但足够稳定。如果你想做的是文章头图可以把“解释型配图”改成“轻量技术主题封面图”如果是流程说明就保留箭头和分层结构。哪些图片任务适合哪些不太适合这次用下来我觉得 ChatGPT Image 2.0 比较适合下面几类任务技术文章封面图接口流程示意图状态流转配图产品功能场景图教程中的步骤解释图抽象概念的视觉化表达文档里的章节分隔图。但有些任务要谨慎高精度 UI 截图带大量字段名的接口图需要严格品牌规范的宣传图需要精确产品结构的商品图包含真实人物、机构或场景的图片会影响用户判断的功能效果图。一句话越需要精确越要人工接管。图像模型适合帮你从 0 到 1 起草视觉表达不适合替代最后的校对和确认。图像生成前的数据处理如果配图涉及真实项目最好先把材料处理一下。比如下面这些内容不建议直接放进 Prompt内部项目名真实客户名称真实账号订单号访问地址未公开产品截图带业务数据的报表公司内部流程细节。可以替换成真实项目名 - Project A 客户名称 - Client X 内部接口 - Internal API 真实路径 - example_path 业务数据 - sample data这一步对技术社区作者也有用。很多人写博客时会顺手贴日志、截图、流程图如果里面带了内部标识后面处理起来会比较麻烦。我最后保留下来的工作流这次实践后我基本固定了一个流程先写清楚图片要解决的问题把图片拆成流程图、状态图、场景图等类型用 Prompt 控制布局、比例、风格和限制让模型生成 2 到 4 个草稿选结构最清楚的一张而不是最炫的一张用人工方式补充文字和关键字段发布前检查版权、标识、数据和准确性。这个流程不复杂但能减少很多返工。以前我做技术配图经常是最后一刻随便找一张图或者临时画一张流程图。现在多了一步图像生成反而能更早发现文档哪里没讲清楚。因为如果一件事没法画出来通常说明文字描述也还不够清楚。几个容易踩的小坑1. 不要让一张图承载太多信息技术文档里最常见的问题是把架构、流程、异常、角色全塞进一张图。结果图片很满读者还是看不懂。更好的方式是拆开一张图只讲一个重点。2. 不要完全相信图片里的文字如果图片里出现字段名、状态名、接口名最好逐个核对。重要文字建议后期手动添加。3. 不要把草稿当成最终稿模型生成的图可以很快给方向但最终是否能发还要看内容准确性、版权边界、平台规范和项目要求。4. 不要追求过强的视觉风格技术文章里的图清楚通常比惊艳重要。尤其是 CSDN 这类平台读者更关心图能不能帮助理解而不是像不像海报。结尾从低风险配图开始用如果你想把 ChatGPT Image 2.0 用到日常技术写作里我建议先从低风险任务开始给教程做一张流程示意图给接口文档做状态流转图给项目介绍做轻量封面图给复杂概念做一张解释型插图。不要一开始就做高精度 UI、真实产品图或强依赖文字的图片。先让它承担“视觉草稿”和“结构表达”的工作再由人工补充关键文字和最终检查。对技术作者和开发者来说图像生成真正有用的地方不是把文章包装得更热闹而是把原本难解释的流程、关系和状态用更低成本表达清楚。只要记住这一点它就会成为一个很实用的辅助工具。