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中的预览如下，

classDiagram
    class 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
        +