AI 时代高效画图的方案——AIGC+PlantUML

一、痛点：为什么直接让 AI "画图"总翻车？

现在谁还没试过这句提示词：

"帮我画一张电商系统的微服务架构图。"

结果呢？AI 要么回一大段文字描述，要么真的生成一张图------但打开一看：框框大小不一、连线交叉、中文文字溢出、箭头指错对象。你还得手动改半天，比自己画还累。

问题不在模型不够聪明，而在于任务形态错了：

精确图形排版（布局、对齐、连线避障）是 AI 的弱项------它吃的是 token，不是画布坐标；
而写代码（尤其是结构化、声明式的 DSL）正是 AI 的强项------GitHub Copilot、Cursor 已经证明了这一点。

所以真正高效的玩法不是"让 AI 直接出图"，而是：让 AI 把图"写"成代码，再用专门的编译器把代码渲染成图。

这正好对应业界 2025 年兴起的一个范式------Diagram-as-Code + AI（代码即图 + 人工智能）。

二、解法：把"画图"变成"写代码"

思路就三步，像极了你平时编程：

复制代码

你（自然语言描述需求） → AI（生成 PlantUML 代码） → 在线渲染器（编译成矢量图）

这里的"代码"指的是 PlantUML ------一款开源的文本化绘图 DSL（由 Arnaud Roques 创建，许可证 MPL 2.0 / LGPL 3.0 / ASL 2.0）。一段图就是一个文本块，用 @startuml 和 @enduml 包裹：

plantuml 复制代码

@startuml
Alice -> Bob: 请求数据
Bob --> Alice: 返回结果
@enduml

为什么这条流水线比"让 AI 直接出图"强得多？四个理由：

扬长避短：AI 只负责它最擅长的"写结构化文本"，布局、对齐、避障交给成熟的渲染引擎；
可版本控制 ：图是纯文本，能进 Git，PR 里直接 diff 出谁改了哪条线；
可一键修改：让 AI "把支付服务拆成两个"改的是代码，重新渲染即出新图，不用重画；
可工程化 ：CI 里自动把 .puml 渲染进文档，架构图永远和代码同步。

渲染原理：文本解析后，类图 / 组件图 / 部署图等底层调用 Graphviz 的 dot 做自动布局，时序图 / 活动图用 PlantUML 自有引擎，最终输出 SVG / PNG / PDF。

三、实操流水线：让 AI 当你的"绘图程序员"

第 1 步：用"黄金提示词模板"喂给 AI

别只说"画个图"。给 AI 一个结构化模板，产出质量直接起飞（5 要素法）：

【工具】+【图类型】+【业务场景】+【模块清单】+【样式要求】+【输出格式】

例："用 PlantUML 画一个时序图 ，场景是用户登录 ，参与者有用户、前端、后端、JWT 服务 ，要求标注成功与失败分支 ，输出完整 @startuml 代码。"

实践里，ChatGPT / 文心一言 / DeepSeek / Kimi / Cursor 都能稳定输出合规的 PlantUML 代码（业内已经有很多"Kimi + PlantUML""Cursor 生成 PlantUML"的成熟案例）。

第 2 步：拿到 AI 生成的代码

下面三张图都是"把提示词丢给 AI"后直接拿到的产物，你可以原样复制去试。

① 时序图（AI 生成的登录流程）

plantuml 复制代码

@startuml 用户登录时序图
actor 用户
participant 前端
participant 后端
participant "JWT 服务" as JWT

用户 -> 前端: 输入账号密码
前端 -> 后端: POST /login
activate 后端
后端 -> JWT: 校验凭证
alt 校验成功
  JWT --> 后端: 签发 token
  后端 --> 前端: 200 + token
  前端 --> 用户: 登录成功
else 校验失败
  JWT --> 后端: 拒绝
  后端 --> 前端: 401
  前端 --> 用户: 提示错误
end
deactivate 后端
@enduml

② 类图（AI 生成的工厂模式）

plantuml 复制代码

@startuml 工厂模式类图
interface Factory {
  + createProduct() : Product
}
class ConcreteFactory implements Factory {
  + createProduct() : Product
}
abstract class Product {
  + operation() : void
}
class ConcreteProduct extends Product {
  + operation() : void
}
ConcreteFactory ..> ConcreteProduct : 创建
@enduml

③ 活动图 / 流程图（AI 生成的审批流）

plantuml 复制代码

@startuml 报销审批流程
start
:提交报销单;
if (金额 > 5000?) then (是)
  :部门主管审批;
  :财务总监审批;
else (否)
  :财务审批;
endif
if (通过?) then (是)
  :打款;
else (否)
  :驳回并通知;
endif
stop
@enduml

第 3 步：丢进在线渲染器，一键出图

把上面任意一段代码粘贴到在线编辑器，左边写文本、右边实时预览，一键导出 SVG / 高清 PNG------这就是整个流水线的终点：

👉 在线 PlantUML 编辑器 ：https://0x0bee.com/zh-CN/tools/plantuml-editor

它基于浏览器运行，支持时序图、类图、用例图、活动图、状态图、组件图、部署图等全部类型；还允许填写自建 / 私有渲染服务地址，把图表内容留在你自己的服务里（涉密图必备）。

四、三种"AI 画图"路线对比

对比项	AI 直接出图（Midjourney/生图）	AI + Mermaid	AI + PlantUML（本文推荐）
图形精度	低（框错位、文字溢出）	中（自动布局）	高（专业 UML 布局）
可编辑性	差（像素图难改）	好（代码可改）	好（代码可改）
版本控制	不支持	支持	支持（diff 友好）
图类型	任意但不可控	较少（够用）	40+（最全）
适合场景	配图 / 概念草图	Markdown 内快速插图	正式 UML / 架构图

一句话结论：要正式架构图、要进代码库长期维护 → AI + PlantUML；只在博客 / README 里插个流程图 → AI + Mermaid；纯概念配图 → 直接生图。

五、进阶：让 AI 一次写对的 3 个避坑技巧

强制包裹标签 ：提示词里写明"代码必须以 @startuml 开头、@enduml 结尾"，避免 AI 漏写导致渲染失败；
特殊字符转义 ：图里出现 <、>、/ 等，提示 AI 用双引号包裹模块名（如 class "Order Service"），或转义 < 为 <；
节点命名去连字符 ：CSDN / 部分渲染器不支持 User-Service 这种节点名，让 AI 用 UserService 驼峰写法。

改图也简单：把现有 .puml 和"把支付服务拆成网关和结算两个"一起丢回 AI，它改的是代码，你重新渲染即可------全程不用碰鼠标排版。

六、总结

AIGC 时代画 UML / 架构图的最优解，不是"让 AI 当画家"，而是**"让 AI 当程序员"**：

你用自然语言描述需求 → AI 输出 PlantUML 代码 → 在线渲染器一键出专业矢量图。

它同时吃到了 AI 的代码能力红利和 PlantUML 的工程化优势：可版本化、可改、可协作、不翻车 。记住三件事：① 提示词用"5 要素模板"；② 代码用 @startuml/@enduml 包裹；③ 渲染交给在线工具，40+ 种图随便画。

经过笔者测试，国内大模型产出PlantUML效果最好的是 DeepSeek，免费网页版就效果很好。