结合 AI 生成 mermaid、plantuml 等图表

news2025/6/6 1:28:53

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、名称、价格、库存
展示它们之间的关联关系

然后生成代码：

@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>