结合 AI 生成 mermaid、plantuml 等图表

AI 画图

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

Mermaid

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

流程图示例

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

复制代码

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

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

复制代码

graph TD
    A[用户输入账号密码] --> 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、名称、价格、库存
展示它们之间的关联关系

然后生成代码：

PlantUML 复制代码

@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 格式的代码：

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、图片。