类AI技巧 —— 文字描述+draw.io 自动生成图表

写在前面 ：最近在使用draw.io工具画一些系统架构图，虽然draw.io提供了很多图表类型与选择，但手动画一个复杂的系统框图还是感觉比较麻烦。draw.io有没有类似Napkin AI工具那样可以根据文字描述自动生成图表的辅助工具呢？本人带着疑问做了一些探究，发现draw.io工具能够与Mermaid 代码结合起来，根据描述生成图表。本文跟大家一起来学习一下这种方式，供大家参考。

一、draw.io介绍

二、Mermaid代码介绍

[2.1 Mermaid代码结构](#2.1 Mermaid代码结构)

[2.2 Mermaid代码示例](#2.2 Mermaid代码示例)

三、如何在draw.io中调用Mermaid代码

[3.1 操作步骤](#3.1 操作步骤)

[3.2 简单示例](#3.2 简单示例)

一、draw.io介绍

首先介绍一下draw.io工具。

draw.io（现官方更名为diagrams）是一款免费开源、跨平台、安全优先的专业绘图工具，支持网页与桌面端，覆盖从流程图到系统架构图的全场景可视化。

可在线使用或下载 ： diagrams.net

文件 -> 新建，提供了丰富的图表选择：

二、Mermaid代码介绍

Mermaid 代码，本质是一套类 Markdown 的文本语法规则------ 通过简洁的文本指令定义图形的结构、元素、样式和关系，最终由渲染引擎自动转换成可视化图形。

2.1 Mermaid代码结构

所有 Mermaid 代码都遵循【类型声明 + 元素定义 + 关系描述】的基础范式，基本结构如下：

graph[方向]：方向TD = 从上到下，LR = 从左到右，BT = 从下到上，RL = 从右到左。

关键规则：

节点 ID 必须唯一（如 A、B、ECU0），显示文本可重复；
语法不区分大小写（graph TD 与 Graph td 效果一致）；
支持注释：（仅在线编辑器 / VS Code 生效）；
换行 / 缩进不影响渲染（可按逻辑格式化代码，提升可读性）。

2.2 Mermaid代码示例

以一个流程图为例：

bash 复制代码

graph TD
    %% 注释：5ms任务共享变量（SW_SHARED_Task_5ms）初始化流程
    Start[系统上电] --> InitMem[初始化内存控制器]
    InitMem --> CheckSeg{段类型}
    %% 带标签的分支连线
    CheckSeg -->|.bss/.farbss| ClearSeg[清零SW_SHARED_Task_5ms段]
    CheckSeg -->|.data/.fardata| CopySeg[从Flash拷贝初始化值]
    %% 合并分支
    ClearSeg --> StartTask[启动5ms任务调度]
    CopySeg --> StartTask
    StartTask --> RunTask[执行5ms任务逻辑]
    RunTask --> AccessVar[访问共享变量]
    AccessVar --> End[(任务结束)]

代码解释：

%%是 Mermaid 单行注释（替代****）；
{}表示判断节点，()表示结束节点；
**-->|标签|**给连线添加说明，适合分支逻辑标注。

三、如何在draw.io中调用Mermaid代码

3.1 操作步骤

Step1） 调整图形 -> 插入 -> 高级 -> Mermaid

Step2） 在此处粘贴事先准备好的Mermaid代码，点击插入即可

有童鞋可能会问，如果不会写Mermaid代码或者不想写Mermaid代码怎么办？不必担心，我们可以使用AI聊天工具，只需要输入尽可能准确的提示词 ，让AI帮我们写Mermaid代码（AI聊天工具可以使用豆包、ChatGpt、Cursor、deepSeek等，感兴趣的童鞋可参考作者之前的文章：AI 工具辅助软件开发-CSDN博客）

提示词举例：根据以下描述生成汽车电子 IPB 系统的 Mermaid 架构图代码："分层：传感器层（轮速传感器、加速度传感器）、ECU 层（TriCore 处理器、夹紧力估算模块）、执行层（电机）、通信层（CAN 总线），标注数据流向"

3.2 简单示例

举一个简单的实际例子：车载底盘CAN总线交互图

1）向ChatGpt输入提示词

bash 复制代码

请生成汽车电子CAN总线通信的Mermaid时序图代码，要求如下：
1. 参与者：发动机ECU、CAN总线、仪表ECU、制动ECU；
2. 核心交互逻辑：
   - 发动机ECU向CAN总线发送转速信号（报文ID：0x100）；
   - CAN总线将转速信号转发给仪表ECU；
   - 仪表ECU向CAN总线反馈显示确认信号（报文ID：0x101）；
   - 在CAN总线与发动机ECU之间标注"5ms周期"的备注；
   - CAN总线将显示确认信号转发给发动机ECU；
3. 并行交互场景：
   - 分支1（制动信号传输）：制动ECU向CAN总线发送制动压力信号（报文ID：0x200）；
   - 分支2（故障检测）：发动机ECU向CAN总线发送故障码（报文ID：0x300）；
4. 语法要求：
   - 使用sequenceDiagram语法；
   - 参与者设置别名（如ECU1为发动机ECU）；
   - 主动发送用实线（->>），响应/转发用虚线（-->>）；
   - 并行逻辑用par关键字实现。

2）复制生成的Mermaid代码

bash 复制代码

sequenceDiagram
    %% 定义参与者（可别名）
    participant ECU1 as 发动机ECU
    participant CAN as CAN总线
    participant ECU2 as 仪表ECU
    participant ECU3 as 制动ECU

    %% 基础消息：->（实线，主动发送），-->（虚线，响应）
    ECU1->>CAN: 发送转速信号(0x100)
    CAN-->>ECU2: 转发转速信号
    ECU2->>CAN: 反馈显示确认(0x101)
    %% 延迟标注
    Note over CAN,ECU1: 5ms周期
    CAN-->>ECU1: 转发确认信号
    %% 并行消息
    par 制动信号传输
        ECU3->>CAN: 发送制动压力(0x200)
    and 故障检测
        ECU1->>CAN: 发送故障码(0x300)
    end

3）按照上一节中的步骤在draw.io中插入，获得可编辑的图表（如下图）

（注：此车载底盘CAN总线图并不全面准确，仅供演示。）

写在后面 ：在github上有一款Next AI Draw.io 的开源项目，更具AI特性，感兴趣的童鞋可以去学习，可参考Next AI Draw.io:当AI遇见Draw.io图表绘制-阿里云开发者社区