ChatGPT与Excalidraw：一分钟完成逻辑树、代码生成与修复

一年多前，在一次全公司的会议上，一位工程师展示了一些漂亮的手绘图表。在场的人都不认识这位工程师，但好奇之下，有人在Slack上找到了他，问用了什么工具——答案是Excalidraw，一个开源工具。

几个月后，一个棘手的任务出现了：要设计一个复杂的决策树，并将其转化为图表。尝试了ChatGPT、Mermaid.js和Excalidraw。虽然第一次生成后不得不做了一些小修改，但最终发现了一个新的工作流程，结果正是想要的。

今天就来拆解这个流程：如何用三个工具的组合，在一分钟内完成从逻辑树到可视化图表的全流程。

工具

• ChatGPT
• Mermaid代码（基于Ja vaScript的图表工具，用于连接提示和Excalidraw）
• Excalidraw

步骤 1：请ChatGPT帮助创建逻辑树

任务是要创建一个聊天机器人的复杂逻辑树图表。干脆直接请ChatGPT帮忙。为了演示，用一个假设的提示。

在要求进行一些小的修改后，得到了如下结果：

结果满意，但内容很多——如何从中创建图表？手动创建将花费大量时间。多年前一位导师曾教导：如果不得不花费大量时间处理重复性任务，是时候找到一个更智能的工作流程了。经过研究，了解到Mermaid（一个基于Ja vaScript的图表工具）可以帮助将复杂的决策树可视化。

步骤 2：请ChatGPT生成Mermaid代码

完全不知道如何编写Mermaid代码，所以没有去学习这门语言，而是请ChatGPT生成代码。结果有效！

步骤 3：在Excalidraw中生成图表

从ChatGPT复制代码，打开excalidraw.com。菜单栏中有一个Mermaid to Excalidraw的选项，将代码粘贴到Mermaid选项卡中。

然而，意外发生了——显示了一个错误。没有进行调试或多想，再次请ChatGPT帮忙。

ChatGPT立刻用一个新代码修复了问题：

复制代码，再次粘贴到Excalidraw中。这次没有错误。太棒了！通过请ChatGPT调试，问题得到解决。

结果反映了复杂的逻辑树。从视觉上看，图表确实需要一些修饰，但考虑到图表创建的速度，这是团队协作的一个很好的起点。

2023年11月，FigJam发布了AI功能。也可以使用FigJam AI根据相同的逻辑树创建类似的图表，过程和视觉呈现有所不同——这部分留到另一期讨论。

收获

这个实验最大的启示不是结果，而是过程。除了Excalidraw，整个过程包括利用ChatGPT来创建逻辑树、生成代码和修复错误——每个任务都在一分钟内完成。如果手动完成所有这些工作，尤其是更复杂的流程，可能会花费数小时。

这个实验还激发了一个想法：探索利用AI优化冗长工作流程的可能性。