ChatGPT两种方式无代码生成流程图甘特图等图表

人类天生就更擅长处理图像信息，即使很复杂的系统，通过图形也容易被直观地呈现出来。

有些人喜欢用GUI界面的流程图工具，比如微软的Visio，只需要拖拽软件预设好的形状和元素就可以轻松创建各种复杂的数据流图（DFD）或者流程图（FC）。另一些人更喜欢使用文本来创建流程图，因为文本更轻量，可以使用Git这样的版本控制工具来记录各种改动，也更容易嵌入到Markdown编辑器并用适当的工具渲染出来。

然而各种用来创建流程图的文本，比如Mermaid.js，都有一套语法需要学习，对于初学者来说也并不直观。ChatGPT的横空出世解决了这个问题，你现在可以通过对话的方式直接生成各种图表—流程图，时序图 (Sequence Diagram)，甘特图，Git graph，用户旅程图 (User Journey Diagram)，象限图 (Quadrant Chart) ，饼图，思维导图等等。

本文将介绍两种方法，让ChatGPT免费用户和Plus用户都可以轻松创建各种图表。

使用谷歌浏览器插件ChatGPT Diagrams

使用ChatGPT来创建图表和流程图的基本方式就是通过对话。你只需要描述你要制作的图表，然后让ChatGPT帮你生成用于创建流程图的文本或代码。比较流行的基于文本方式就是使用Mermaid.js.

Mermaid.js是一个基于Javascript的开源库，可以用类似于Markdown的方式生成图表和流程图。所以你可以这样来写一个Prompt：

渲染一个流程图，说明处理和完成客户订单的步骤，包括下单、库存检查、付款处理和发货。使用mermaid.js。

这样ChatGPT就会为你生成你想要的流程图的代码。但是ChatGPT本身是无法把代码直接渲染成为图形化的图表的。别担心，装了谷歌浏览器插件ChatGPT Diagrams，ChatGPT就可以渲染了。

它会在ChatGPT生成的代码上方添加一个按钮“显示图表 (Show Diagram)”，点击该按钮就可以展示渲染出的图表了。

我们来看下怎样一步步实现该功能。

首先访问以下网址进入ChatGPT Diagrams插件的安装界面。

点击“添加到Chrome (Add to Chrome)”安装该插件。

点击谷歌浏览器右上角的拼图形状的按钮打开谷歌浏览器插件列表查看插件是否已经被安装。

我们看到它已经出现在谷歌浏览器的插件列表里了。

然后我们就可以开始让ChatGPT给我们生成图表了，比如把刚才的提示词提交给ChatGPT：所以你可以这样来写一个Prompt：

渲染一个流程图，说明处理和完成客户订单的步骤，包括下单、库存检查、付款处理和发货。使用mermaid.js。

然后点击黑色代码文本框上方的“显示图表 (Show Diagram)”来把代码渲染成图形。我这里出现了一个Bug，提示文本中有语法错误，但是你未必能遇到。不过没关系，我们刷新一下页面，然后点击ChatGPT的历史对话回到刚才的界面。

然后再点击一下按钮“显示图表 (Show Diagram)”就可以成功显示图表了。

如果你显示不出图表，或者想输出这个图表，可以把黑色代码框里的代码拷贝到这个网站：

然后创建一个账户就可以把图表输入为PNG或者SVG格式啦。

也可以用另一个非常流行的免费网站draw.io，打开这个网址： https://app.diagrams.net/

然后依次点击菜单栏的”Arrange” -> “Insert” -> “Advances” -> “Mermaid”。

把代码粘贴到弹出的文本框里，然后点击“Insert”。

再点击保存按钮即可。

如果想要修改这个图表，可以直接在编辑器里进行。或者可以跟ChatGPT对话，告诉它你的需求，然后继续让ChatGPT帮你生成代码。

使用ChatGPT插件Show Me Diagrams

ChatGPT Plus用户可以用第三方插件Show Me Diagrams来生成图表。

要使用这个插件，首先确保已经激活了ChatGPT插件的功能。

然后去ChatGPT插件商店搜索插件进行安装。

然后搜索关键词”show me diagram”并点击”Install“进行安装。

安装好以后，在输入任何提示词之前，先切换到ChatGPT4。

鼠标停留在”GPT-4″的按钮上会显示一个下拉菜单，在下拉菜单里的选项里点击“Plugins”这个按钮。

然后在ChatGPT4按钮下方的下拉菜单里找到刚才下载的”Show Me Diagrams”插件并勾选。

然后就可以输入我们的提示词啦，比如：

给我展示一张解释DNA复制过程的图表。

Show me a diagram explaining the process of DNA replication.

ChatGPT的回复如下：

下面是一个解释DNA复制过程的序列图：

Here is a sequence diagram that explains the process of DNA replication:

你可以在一个新的标签中查看此图。

如果你想做任何修改，你可以在线编辑这个图。

该图的类型是Mermaid语言的序列图。

要查看改进该图的想法，请使用关键短语 “显示想法”

要查看其他类型的图表和语言，请使用关键短语 “探索图表”。

点击ChatGPT回复里的带有超链接的句子“你可以在一个新的标签中查看此图”，就在一个新的浏览器标签页查看这个图表的大图并可以进行保存。

点击ChatGPT回复里的带有超链接的句子“如果你想做任何修改，你可以在线编辑这个图”，就在一个新的浏览器标签页在线编辑这个图表。

按照ChatGPT给出的提示输入关键词可以进一步优化图表。比如输入“show ideas”，ChatGPT会这样回复：

改进该图的想法：

1. 增加更多细节： 该图目前提供了一个DNA复制的高层次概述。你可以为每个步骤添加更多的细节，如参与的具体酶和复制的方向。
2. 使用不同的颜色： 对不同类型的分子（如酶、DNA链、RNA引物）使用不同的颜色，可以使该图更容易理解。
3. 包括复制叉：复制叉是DNA解开和复制发生的地方，是整个过程的一个关键部分。在图中包括这一点可以提供更多的背景。

探索以下主题：

1. 默认主题： 这是所有图表的默认主题。
2. 中性： 这个主题很适合将被打印的黑白文件。
3. 深色：该主题与深色元素或深色模式很配。
4. 森林色： 这个主题包含深浅不一的绿色。
5. 基底： 这是唯一可以修改的主题。使用这个主题作为定制的基础。

Show Me Diagrams默认使用的是Mermaid语言来生成图表。根据刚才ChatGPT里的回复，输入短语“explore diagrams”可以探索其他图表类型。

我输入这个短语之后，ChatGPT是这样回复的：

探索同一图表类型的所有语言：

顺序图（Sequence Diagram）： 顺序图用于显示系统中不同部分之间按顺序的相互作用。它们对于可视化系统中的控制流和理解不同部分之间的相互作用是非常好的。你可以在以下语言中探索顺序图： Mermaid, PlantUML, D2.

探索其他类型的图：

1. 类图： 类图通过显示系统的类、属性、操作（或方法）以及对象之间的关系来表示系统的静态结构。你可以在Mermaid, PlantUML, D2, Nomnoml中探索类图。
2. 状态图： 状态图是用来表示一个系统的行为，它可以是整个系统，也可以是其中的一部分。它显示了一个对象在其生命周期内经历的状态序列，以及导致从一个状态过渡到另一个状态的事件。你可以在Mermaid, PlantUML中探索状态图。
3. 实体关系图： 实体-关系图被用来为数据库的逻辑结构建模。它们显示实体（如人、物、地方、事件等），以及这些实体之间存在的关系。你可以在Mermaid, PlantUML, D2, Nomnoml, Graphviz, ERD中探索实体关系图。

其他的图表语言如PlantUML, D2, Nomnoml, Graphviz 和 ERD下方都有超链接，可以点击去它们的官网查看更多相关资料。

总结

总之，有了ChatGPT，创建图表不再是一项艰巨的任务。通过利用谷歌浏览器扩展程序 “ChatGPT图表 “和ChatGPT插件 “Show Me Diagrams “，你只需要点击几下，就可以将复杂的想法转化为视觉语言。请记住，关键在于流畅的沟通和对这些工具的有效利用。所以，不要犹豫了，今天就开始绘制你的想法吧！