ChatGPT+Mermaid 语言实现技术概念可视化

本文旨在介绍如何使用 ChatGPT 和 Mermaid 语言生成流程图的技术。在现代软件开发中，流程图是一种重要的工具，用于可视化和呈现各种流程和结构。结合 ChatGPT 的自然语言处理能力和 Mermaid 的简单语法，可以轻松地将文本描述转化为图形表示，使技术文档更具可读性和易懂性。

在软件开发中，我们经常遇到需要描述复杂流程和系统架构的情况。传统的手绘图形和图表工具可能需要花费大量时间和精力，而使用 ChatGPT 和 Mermaid 语言可以快速生成流程图，节省了时间和精力。

我们将介绍如何使用 ChatGPT 和 Mermaid 语言来解决这个问题。通过将文本描述转化为 Mermaid 语言的图形表示，我们可以简化文档的编写过程，并提高文档的可读性和易懂性。

Mermaid 语言介绍

Mermaid 是一种用于创建流程图、时序图、甘特图和其他各种图表的开源工具。它使用简单的文本描述语言，将图表定义为纯文本，并自动生成相应的图形表示。

Mermaid 的语法简洁易懂，使用者只需编写简单的文本描述即可生成图表。

这里是 Mermaid 官方提供的技术文档

解决方案

ChatGPT 和 Mermaid 语言结合使用可以实现将文本描述转化为流程图的功能。具体步骤如下：

使用 ChatGPT 模型解析文本描述：将需要转化为流程图的文本描述输入 ChatGPT 模型中，获取模型生成的对应的 Mermaid 语言代码。

使用 Mermaid 语言生成流程图：将 ChatGPT 生成的 Mermaid 代码嵌入到 Markdown 文档中，并使用 Mermaid 的渲染引擎将其转化为图形表示。

技术样例

以 TCP 协议的连接方式为例，首先向 GPT 提问：

将代码粘贴到 Mermaid Live Editor 中，得到的效果图如下：

显然，这次尝试不能很好的体现出握手过程的时序特点，调整问题，重新给出流程：

继续使用 Live Editor，得到的流程图如下：

可见，调整后的图片更加符合实际情况。

多重方案对比

在生成流程图的过程中，除了 ChatGPT+Mermaid 语言的方案外，还有其他可选方案，如手动绘制图形、使用专业图表软件等。下面是对比这些方案的优缺点：

手动绘制图形：需要耗费大量时间和精力，容易出现错误，并且难以修改和更新。

使用专业图表软件：虽然提供了丰富的功能和样式，但学习曲线较陡峭，操作复杂，并且需要额外的软件安装。

综合考虑，ChatGPT+Mermaid 语言方案简单易用，生成的流程图效果优秀，是一种高效的解决方案。

作者：CCO 体系 迟焕宇

来源：京东云开发者社区