结合 AI 生成 mermaid、plantuml 等图表

AI 画图

AI 画图并不是真的让 AI 画一个图片，而是让 AI 根据你的需求，生成对应的需求文本，再根据 “文本画图” 来生成图片。

Mermaid

mermaid 支持流程图、时序图、架构图等等多种图片绘制。当然最终生成的效果和样式会根据不同的“文本代码”渲染编辑器而不同。

流程图示例

举一个例子，先把如下需求告诉 AI （比如我这里使用 ChatGPT）：

请用Mermaid语法帮我画一个用户登录流程图，包含以下步骤：
1.用户输入账号密码
2.前端校验格式
3.发送请求到后端
4.后端验证用户信息
5.如果验证成功，生成token返回
6.如果失败，返回错误信息
7.前端根据结果跳转页面或显示错误

然后 AI 会生成代码（文本代码）：

graph TDA[用户输入账号密码] --> B[前端校验格式]B -->|格式正确| C[发送请求到后端]B -->|格式错误| H[前端提示格式错误]C --> D[后端验证用户信息]D -->|验证成功| E[生成 Token 并返回]D -->|验证失败| F[返回错误信息]E --> G[前端跳转页面]F --> I[前端显示错误信息]

然后把 mermaid 代码放到渲染工具中。

markdown 文本中使用：将 markdown 代码格式标注为 mermaid 语言，即可看到对应图片：

飞书中 mermaid 使用步骤：先输入 / ，唤出快捷指令，然后输入搜索并选择文本绘图，将代码写到左侧，右侧即可生成所需图片，之后根据需要导出即可。

语雀中用法和飞书基本相同：

如果想要修改 AI 生成的图片，那么只需要对文本代码进行修改，图片也会跟着改变。

时序图示例

AI 提示词：

请用Mermaid画一个订单支付的时序图，展示用户、前端、后端、支付网关之间的交互。

然后把生成的代码渲染一下，即可获得图片：

PlantUML

PlantUML 最擅长绘制 uml 图，绘制的图片更加专业规范(当然不同的文本代码编辑器，生成效果也是不同的，可以从上网众多生成图片中找到自己满意的)。此外，时序图、结构图等等，plantuml 都是支持的。

依旧是举一个例子，ai 提示词如下：

请用PlantUML语法帮我画一个订单系统的类图，包含：
-Order类：订单D、用户ID、总金额、状态、创建时间
-Orderltem类：商品ID、数量、单价
-User类：用户ID、用户名、邮箱
-Product类：商品ID、名称、价格、库存
展示它们之间的关联关系

然后生成代码：

@startuml
class Order {
- orderId: String
- userId: String
- totalAmount: Float
- status: String
- createdAt: DateTime
}class OrderItem {
- productId: String
- quantity: int
- unitPrice: Float
}class User {
- userId: String
- username: String
- email: String
}class Product {
- productId: String
- name: String
- price: Float
- stock: int
}' 关联关系
User "1" -- "0..*" Order : places
Order "1" -- "1..*" OrderItem : contains
OrderItem "*" -- "1" Product : refers to
@enduml

draw.io

drawio 和之前的两种类似，都可以根据文本代码绘图，只是文本代码所需的格式不同而已。

这里我想要根据我之前写的文章 https://blog.csdn.net/XiugongHao/article/details/136355713 ，来生成对应的图片。然后我给ai提示词为：

根据下列内容，生成一个 draw.io 格式的 《节流防抖学习流程图》代码：// 这里直接把原文的 md 格式文本粘贴上去。。。

然后ai 给我生成了一个 xml 格式的代码：

<mxfile host="app.diagrams.net"><diagram name="节流防抖学习流程图" id="NQJhnU1h2lAv_GsA7Ybg"><mxGraphModel dx="1562" dy="752" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0"><root><mxCell id="0"/><mxCell id="1" parent="0"/><!-- 开始 --><mxCell id="start" value="节流防抖学习流程图" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=16;fontStyle=1;" vertex="1" parent="1"><mxGeometry x="300" y="20" width="300" height="50" as="geometry"/></mxCell><!-- 防抖 --><mxCell id="debounce" value="防抖 debounce" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;fontSize=14;" vertex="1" parent="1"><mxGeometry x="100" y="100" width="200" height="60" as="geometry"/></mxCell><!-- 防抖适用场景 --><mxCell id="debounce_scenario" value="适用场景:\n- resize/input事件\n- 操作DOM/发请求\n- 最后一次触发才执行" style="shape=note;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="100" y="180" width="200" height="100" as="geometry"/></mxCell><!-- 防抖实现方式 --><mxCell id="debounce_method" value="实现方式:\n1. 清除旧定时器\n2. 设置新定时器\n\n使用库: lodash.debounce(func, wait, options)" style="shape=note;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="100" y="300" width="200" height="120" as="geometry"/></mxCell><!-- 节流 --><mxCell id="throttle" value="节流 throttle" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=14;" vertex="1" parent="1"><mxGeometry x="500" y="100" width="200" height="60" as="geometry"/></mxCell><!-- 节流适用场景 --><mxCell id="throttle_scenario" value="适用场景:\n- scroll/timeupdate等高频事件\n- 每隔一段时间执行一次" style="shape=note;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="500" y="180" width="200" height="100" as="geometry"/></mxCell><!-- 节流实现方式 --><mxCell id="throttle_method" value="实现方式:\n1. 是否存在定时器\n2. 无则设置定时器\n3. 执行后重置标记\n\n使用库: lodash.throttle(func, wait, options)" style="shape=note;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="500" y="300" width="200" height="120" as="geometry"/></mxCell><!-- 箭头连接 --><mxCell id="edge1" style="endArrow=block;html=1;" edge="1" parent="1" source="start" target="debounce"><mxGeometry relative="1" as="geometry"/></mxCell><mxCell id="edge2" style="endArrow=block;html=1;" edge="1" parent="1" source="start" target="throttle"><mxGeometry relative="1" as="geometry"/></mxCell><mxCell id="edge3" style="endArrow=open;html=1;" edge="1" parent="1" source="debounce" target="debounce_scenario"><mxGeometry relative="1" as="geometry"/></mxCell><mxCell id="edge4" style="endArrow=open;html=1;" edge="1" parent="1" source="debounce_scenario" target="debounce_method"><mxGeometry relative="1" as="geometry"/></mxCell><mxCell id="edge5" style="endArrow=open;html=1;" edge="1" parent="1" source="throttle" target="throttle_scenario"><mxGeometry relative="1" as="geometry"/></mxCell><mxCell id="edge6" style="endArrow=open;html=1;" edge="1" parent="1" source="throttle_scenario" target="throttle_method"><mxGeometry relative="1" as="geometry"/></mxCell></root></mxGraphModel></diagram>
</mxfile>

然后将代码直接粘贴到 drawio 中，没错，就是直接粘贴，然后他会自动生成所需的图：

其他

当然，还有很多可以绘图的工具，比如 xmind 绘制思维导图 等等，还有 svg，canvas 等格式的图片也可以自由生成 logo、图片。