×

ChatGPT:无代码生成流程图、甘特图等多种图表的两种简便方式

元智汇电子 元智汇电子 发表于2024-01-07 16:48:04 浏览122 评论0

抢沙发发表评论

image.png

人类天生擅长处理图像信息,即使对于复杂的系统,图形呈现也能直观展示细节。

有人喜欢使用GUI界面的流程图工具,例如微软的Visio。这类工具允许用户轻松拖拽软件预设的形状和元素,创建各种复杂的数据流图(DFD)或流程图(FC)。另一些人更喜欢使用文本来构建流程图,因为文本更轻量,支持使用版本控制工具如Git记录修改,并能方便嵌入到Markdown编辑器中,并通过适当的工具渲染。

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

本文将介绍两种方法,让ChatGPT的免费用户和Plus用户都能轻松创建各种图表,无需编写繁琐的代码。


使用 ChatGPT Diagrams 谷歌浏览器插件轻松渲染 ChatGPT 生成的图表

ChatGPT 是一个强大的文本生成工具,通过对话方式生成图表和流程图的基本方法是描述你想要制作的图表,然后让 ChatGPT 生成用于创建流程图的文本或代码。常用的文本方式包括使用 Mermaid.js。

Mermaid.js 是一个基于 JavaScript 的开源库,支持用类似于 Markdown 的方式生成图表和流程图。通过以下方式创建一个提示:

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

ChatGPT 会为你生成相应的流程图代码,但 ChatGPT 本身无法直接渲染代码为图形化图表。不过,不必担心,安装了谷歌浏览器插件 ChatGPT Diagrams 后,ChatGPT 就能够轻松地进行图表渲染了。

image.png

插件会在 ChatGPT 生成的代码上方添加一个名为 “显示图表 (Show Diagram)” 的按钮,点击即可展示渲染出的图表。以下是安装插件的步骤:

  1. 访问 ChatGPT Diagrams 插件安装页面。

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

    image.png

  3. 在谷歌浏览器右上角的拼图形状按钮中查看插件是否已成功安装。

    image.png

使用 ChatGPT 提交你的提示词后,点击黑色代码文本框上方的 “显示图表 (Show Diagram)” 按钮,即可将代码渲染成图形。在此过程中,若遇到 Bug,可尝试刷新页面并返回 ChatGPT 的历史对话界面重新操作。

image.png

如果图表无法显示,或者需要输出图表,可将黑色代码框中的代码复制到 mermaid.live 网站,创建账户并将图表保存为 PNG 或 SVG 格式。

image.png

另一种选择是使用免费网站 draw.io。在菜单栏中点击 "Arrange" -> "Insert" -> "Advances" -> "Mermaid",将代码粘贴到弹出的文本框中,点击 “Insert” 后保存即可。

image.png

image.png

image.png

如果需要修改图表,可在编辑器中进行操作,或与 ChatGPT 对话,告诉它你的需求,然后继续生成新的代码。通过这种方式,你可以轻松创建、渲染和修改各种图表,无需编写繁琐的代码。


使用 ChatGPT 插件 Show Me Diagrams 让 ChatGPT Plus 用户能够轻松生成图表。

如果你是 ChatGPT Plus 用户,你可以通过安装第三方插件 Show Me Diagrams 来方便地创建各种图表。确保你已经激活了 ChatGPT 插件功能后,前往 ChatGPT 插件商店进行插件的安装。

image.pngimage.pngimage.pngimage.png

在插件商店搜索框中输入关键词 "show me diagram",然后点击 "Install" 安装插件。安装完成后,切换到 ChatGPT4 模式,并在 ChatGPT4 按钮下方的下拉菜单中找到刚刚安装的 "Show Me Diagrams" 插件并勾选。

image.png

image.pngimage.pngimage.png


之后,你可以输入提示词来生成图表,例如:

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

"Show me a diagram explaining the process of DNA replication."

image.png

image.png

ChatGPT 会回复并附上一个超链接,点击它可以在新标签页中查看图表的大图,并进行保存。如果需要修改图表,点击相应的链接即可在线编辑。

image.png

ChatGPT 还提供了关键短语,如 "显示想法" 和 "探索图表",用于优化和探索不同类型的图表。输入这些关键短语可以得到 ChatGPT 的建议,帮助你改进图表或者尝试其他类型的图表。

image.png

image.png

总体而言,使用 ChatGPT 插件 Show Me Diagrams,不仅使图表生成更加便捷,还提供了丰富的定制和探索选项,满足用户对图表的不同需求。


结论

有了 ChatGPT,绘制图表变得简单易行。通过谷歌浏览器扩展程序 "ChatGPT Diagrams" 和 ChatGPT 插件 "Show Me Diagrams",只需点击几下,就能将复杂的概念转化为直观的视觉语言。关键在于流畅的沟通和充分利用这些工具,因此,不要犹豫,立即开始将你的思想转化为图表吧!


群贤毕至

访客