IDE/Mermaid + VSCode + Deepseek 生成可视化流程图和UML图

概述

Mermaid 是一个基于JavaScript的图表和图表工具，在大语言模型的加持下，其优势被加倍凸显出来。本文详细讲解了在 VSCode 平台安装和使用 Mermaid 的方式方法。并结合大语言模型如，DeepSeek、ChatGPT 的使用，粗浅地探讨了 Mermaid 在可视化生成过程中，尤其是在软件设计和开发过程中的重要作用。

@Note
Deepseek的使用、Mermaid的语法并不是本文的重点表述内容，你可以从其他地方学习这方面知识。

什么是 Mermaid ?

--------- mermaid 官网，http://mermaid.js.org/ -------------

Mermaid 是一个基于JavaScript的图表和图表工具，允许用户使用类似Markdown的简单文本语法来创建和修改图表。它支持多种图表类型，如流程图、时序图、甘特图、类图、饼图、状态图等。其主要势在于其易用性和灵活性，用户只需编写简单的文本描述，Mermaid就会自动生成相应的图表。Mermaid 是由 Knut Sveidqvist 创建并维护的，其是一位资深的软件开发者和技术专家，在开源社区的影响力。

是编程语言 ？

Mermaid 是一种图表描述语言，而不是编程语言。当然我们也是可以将 Mermaid 类比为一种“领域特定语言，它专注于图表描述，而不是通用编程。就像 HTML 是一种标记语言（用于描述网页结构），而浏览器使用 C++ 或 JavaScript 来实现 HTML 的渲染功能。类比这来看，Mermaid 是一种工具或库，用于将文本描述的图表语法转换为可视化图表，JavaScript 是实现 Mermaid 功能的编程语言。

Mermaid 的核心功能是通过文本语法描述图表的结构和内容，而不是执行计算或逻辑操作。它的语法类似于 Markdown，专注于定义图表的元素（如节点、连接线、标签等），而不是编写程序。Mermaid 不具备编程语言的完整功能（如变量、循环、条件判断等），因此它不能被视为一种编程语言。

Mermaid 的实现依赖于 JavaScript，它是一个用 JavaScript 编写的工具库。它的核心功能是将 Mermaid 语法解析为图表，并在浏览器或其他支持 JavaScript 的环境中渲染。Mermaid 需要在支持 JavaScript 的环境中运行，例如浏览器、Node.js 或集成了 JavaScript 的工具（如 VSCode、GitHub 等）。它的底层实现使用了 JavaScript 的绘图功能（如 SVG 或 Canvas）来生成图表。

优势在哪里 ?

Mermaid 本身就具有简单易用、动态生成、跨平台支持、开源和可扩展等优势。大模型工具（如 DeepSeek、ChatGPT 等）在自然语言处理、代码生成和数据分析方面表现出色，结合 Mermaid，可以使其发挥更大的作用。随着 AI 技术的不断发展，Mermaid 在可视化生成中的作用将更加突出。一些可见的表现如，

1、用户通过自然语言描述需求，AI 工具自动生成 Mermaid 代码。大幅降低用户编写 Mermaid 代码的门槛，提升效率。
2、AI 工具分析数据后，生成 Mermaid 图表以可视化分析结果。将复杂的数据分析结果以直观的图表形式呈现，便于理解和决策。
3、AI 工具分析代码或文档后，生成 Mermaid 图表以展示逻辑结构或流程。帮助开发者快速理解代码逻辑或文档结构，提升协作效率。
4、AI 工具根据教学内容生成 Mermaid 图表，辅助知识讲解。通过可视化图表增强教学效果，帮助学生更好地理解抽象概念。

VSCode 中安装 Mermaid

为了在本地使用 Mermaid，而非使用在线工具预览，（狗之的是这网站还得翻墙才能访问）。

本章节我们将重点讲述，如何在 VSCode 中部署和使用 Mermaid。但是我觉得，如果网络允许，在线编辑器很好用：

Mermaid 文件类型

我们已经知道 Mermaid 是类似 Markdown 标记语言的，而后者需要编写在后缀是 .md 的文件中。一开始我也是懵逼的，不知道应该把 Mermaid 内容存储在什么后缀的文件中。我在安装 Mermaid 的VSCode插件的过程中，通过插件的相关说明文档，get 到 mermaid 内容是要存在 .md 文件、.mmd 文件、.mermaid 文件中的。

来在 Markdown Preview Mermaid Support 插件的介绍，

也就是说我们可以在 Markdown 的文档中，像插入 C++ 代码块那样，插入 mermaid 代码块。

如上，若不是混在 Markdown 内使用，而是独立编写，则不需要代码块插入符。相关存储文件的后缀可以是 .mmd 或 .mermaid 格式。

在mmd文件（左）和在md文件（右）中的Mermaid流程图描述，分别如下图，

Mermaid在 VSCode下的插件

我选择安装了3款针对 Mermaid 的 VSCode 插件，分别如下，
Markdown Preview Mermaid Support ---------------------//作用于.md文件中的mermaid内容
Mermaid Markdown Syntax Highlighting -----------------//对md和mmd文件中的mermaid都起作用
Mermaid Editor--------------------------------------------------//作用于.mmd/.mermaid文件中的mermaid内容

Markdown Preview Mermaid Support 功能：

1、在 VSCode 的 Markdown 预览中支持渲染 Mermaid 图表。
2、允许在 Markdown 文件中嵌入 Mermaid 代码块，并直接在预览中查看渲染后的图表。

Mermaid Markdown Syntax Highlighting 功能：

1、为 Markdown 文件中的 Mermaid 代码块提供语法高亮支持。
2、使 Mermaid 代码更易读，提升编辑体验。

Mermaid Editor 功能：

1、提供 Mermaid 图表的实时编辑和预览功能。
2、支持将 Mermaid 图表导出为图像文件（如 png、jpg、webp 和 svg）。
3、支持将图表图像直接复制到剪贴板。
4、允许为单个 Mermaid 图表自定义配置。

补充描述：
这里我最终没有使用 Mermaid Preview 这个插件，主要原因是，其具有的功能可以被 Mermaid Editor 插件包含。另外，我一开始没有安装 Mermaid Editor 而是单独使用 Mermaid Preview 插件时，并不能在VSCode中顺利实现 .mmd 文件的预览，因为 VSCode 此时并不识别 .mmd 类型的文件，你可能需要通过修改 VSCode Settings 文件，以将 .mmd 文件关联为 Markdown 文件，从而启用 Markdown 预览功能。

Mermaid 预览

与 Markdown 预览界面和操作，没有区别，不再赘述。

借助 Mermaid 实现文生图表

Mermaid 作为一种简单而强大的可视化工具，在与 DeepSeek、GPT等大模型工具结合后，不仅降低了可视化生成的门槛，还提升了效率和交互性，可广泛的应用于技术文档、数据分析、代码逻辑展示和教育培训等领域。本章我们将编写几个简单的例子，来说明其应用。我们这里重点关注功能支持情况和使用方法，不去关注实际输出结果的合理性。

Mermaid 流程图示例

Deepseek 提示语 【请帮我生成一个简单的mermaid流程图】，结果如下，

复制上述代码到 VSCode 编辑器（文件类型为 .mmd 或 .md），借助于 Mermaid Editor 插件，预览效果如下，

Mermaid 类图示例

Deepseek 提示语 【 我要实现的功能是，基于UDP实现通信连接管理，并具CUT、LINK、TALK共3种连接状态。请以Mermaid类图的形式输出给我。】 Deepseek 输出结果，VSCode 预览如下，

继续提示：【如果我想使用状态机设计模式，重新输出Mermaid类图。】Deepseek 部分输出结果和在VSCode中的预览如下，

classDiagramclass UdpConnectionManager {-socket: DatagramSocket-connections: Map~String, UdpConnection~+UdpConnectionManager(port: int)+start() void+stop() void+handleIncomingPackets() void+sendData(address: InetAddress, port: int, data: byte[]) void+addConnection(address: InetAddress, port: int) UdpConnection+removeConnection(address: InetAddress, port: int) void}class UdpConnection {-address: InetAddress-port: int-lastActivity: long-currentState: ConnectionState+UdpConnection(address: InetAddress, port: int)+getAddress() InetAddress+getPort() int+updateActivity() void+isTimedOut(timeout: long) boolean+setState(state: ConnectionState) void+getState() ConnectionState+handlePacket(packet: DatagramPacket) void}class ConnectionState {<<interface>>+handlePacket(connection: UdpConnection, packet: DatagramPacket) void}class CutState {+handlePacket(connection: UdpConnection, packet: DatagramPacket) void}class LinkState {+handlePacket(connection: UdpConnection, packet: DatagramPacket) void}class TalkState {+handlePacket(connection: UdpConnection, packet: DatagramPacket) void}UdpConnectionManager "1" *-- "0..*" UdpConnection : managesUdpConnection "1" --> "1" ConnectionState : currentStateConnectionState <|.. CutStateConnectionState <|.. LinkStateConnectionState <|.. TalkState

上文是 Deepseek生成的结果中的mermaid代码部分，注释部分这里不赘述。上文代码段我是以 (点点点c) 的格式引用到CSDN编辑器中的，如果我以（点点点mermaid）格式来引用，则将直接显示为下图。（CSDN的编辑器，本身就是一个在线的Markdown编辑器）

Mermaid 时序图示例

基于 GPT-4o-Mini模型 提示词 【以 TCP的握手连接过程为需求，生成Mermaid时序图，稍微详细些。】生成的结果如下，mermaid 代码部分，直接以CSDN-Markdown-mermaid 代码块的格式插入本文中，GPT的主要回答内容如下，（哈哈，先不要太关注合理性）

稍详细的TCP三次握手的Mermaid时序图，包括一些附加的信息和注释：

在这个图中：
客户端发送一个 SYN 包，表示请求连接。
服务器接收到请求后，回复一个 SYN-ACK 包，确认连接请求。
客户端收到确认后，发送一个 ACK 包，表示连接建立。

如果领导再让你画出时序图，你可能就不用那么头大了，只需要用结构化语言组织我的设计或需求即可，而不用把时间浪费在画图过程上。更好的结构化表达自己的思路成了重点，而不是绘图软件的使用。即使你嫌弃Mermaid画不漂亮，至少它会给你灵感。

Mermaid 甘特图示例

输入给Deepseek的需求描述： 假设你需要为一个软件开发项目生成甘特图，项目包括以下任务：
需求分析：从 2024-10-01 开始，持续 5 天。
方案设计：从 2024-10-06 开始，持续 5 天，依赖需求分析完成。
开发：从 2024-10-11 开始，持续 10 天，依赖方案设计完成。
测试：从 2024-10-21 开始，持续 5 天，依赖开发完成。
部署：从 2024-10-26 开始，持续 2 天，依赖测试完成。
输出结果：

使用 （点点点mermaid）插入上述代码到CSDN文档中，效果如下，

饼图示例

说明，略。

小总结

Mermaid 本身不支持像 Visio 那样的拖拽式布局修改。Mermaid 的流程图默认使用自动布局算法来排列节点和连接线，用户无法直接通过 Mermaid 语法控制节点的精确位置。不过，Mermaid 提供了一些有限的布局调整选项，同时也有一些工具和方法可以实现类似 Visio 的拖拽式布局修改。以 Mermaid 流程图为例，其支持的有限布局包括：流程图方向（从上到下 graph TD; 从下到上 graph BT; 从左到右 graph LR; 从右到左 graph RL;）、子图对齐、节点样式与连接线等。

我并没有去研究过 Mermaid 的各种图的任何语法，哈哈，可能是最后的坚持吧，不想也不太可能放弃已经熟练的使用VISIO来绘制各种UML图。我们临时可以只是把 Mermaid 当做 Deepseek 文本输出的一种可视化手段，借助它，我能更高效地理解大语言模型的输出结果。

本文通过介绍Mermaid的定义、特点和安装和使用方法，简单开启了一个 “在日常开发中利用Mermaind工具” 的起点。我们可以将 Mermaid 与 VSCode 和 Deepseek/GPT 等结合使用，以便生成可视化流程图和UML图，从而提升文档的可读性和专业性。希望大家能通过大语言模型、Mermaid 等工具的使用为项目带来更直观的视觉表达，进一步提升工作效率与协作效果。