一年多以前，我在一次全公司的会议上看到一位工程师展示了一些漂亮的手绘图表。我不认识那位工程师，但出于好奇，我在Slack上找到了他的名字，并问他使用了什么工具。他说是Excalidraw，这是一个开源工具。
几个月后，我遇到了一个棘手的任务。这个任务涉及到设计一个复杂的决策树 ，并将其转化为图表 。我尝试了ChatGPT、Mermaid.js和Excalidraw。
虽然在第一次生成后我不得不做一些小的修改，但我发现了一个新的工作流程，并得到了我想要的结果。
今天，我将向你们展示我是如何做到这一切的 。
工具
•ChatGPT •Mermaid代码（一个基于JavaScript的工具，用于连接提示和Excalidraw） •Excalidraw
步骤 1：请ChatGPT帮助创建逻辑树
由于我的任务是创建一个聊天机器人的复杂逻辑树图表，我决定请ChatGPT帮忙。
为了演示目的，我使用了一个假设的提示。
在要求进行一些小的修改后，我得到了如下结果：
我对结果很满意，但这是很多内容...
如何从中创建图表？
手动创建它将花费我大量时间。
多年前，一位导师教导我，如果我不得不花费大量时间处理重复性任务，那是时候找到一个更智能的工作流程了。
经过一些研究，我了解到Mermaid（一个基于JavaScript的图表工具） 可以帮助我将复杂的决策树可视化。
步骤 2：请ChatGPT生成Mermaid代码
我完全不知道如何编写Mermaid代码，所以我没有去学习这门语言，而是请ChatGPT为我生成代码。
结果有效！
步骤 3：在Excalidraw中生成图表
我从ChatGPT那里复制了代码，然后打开了excalidraw.com。在菜单栏中，有一个名为Mermaid to Excalidraw 的选项。然后我将代码粘贴到Mermaid选项卡中。
然而，意外发生了——显示了一个错误。
没有进行调试或多想，我再次请ChatGPT帮忙。
ChatGPT立刻用一个新代码修复了问题：
我复制了代码，再次粘贴到Excalidraw中。
这次没有错误。太棒了！
通过请ChatGPT为我调试问题得到解决。
结果反映了复杂的逻辑树。从视觉上看，这个图表确实需要一些修饰，但考虑到图表创建的速度，这是团队协作的一个很好的起点。
2023年11月，FigJam发布了AI功能。我也可以使用FigJam AI根据相同的逻辑树创建类似的图表，如下所示。虽然过程和视觉呈现有所不同。我将在另一期中讨论FigJam。
收获
这个实验给我最大的启示不是结果，而是过程。除了Excalidraw，这个过程还包括利用ChatGPT来创建逻辑树、生成代码和修复错误——每个任务都在一分钟内完成。如果我不得不手动完成所有这些工作，尤其是更复杂的流程，这可能会花费我数小时的时间。
这个实验还激发了我探索利用AI优化冗长工作流程的想法。
到此为止。感谢阅读。
更多信息
本文由笔者花费较多时间翻译整理自：https://bootcamp.uxdesign.cc/how-to-create-hand-drawn-like-diagrams-with-ai-b831ff830976，如对您有帮助，请点赞、转发、关注，谢谢。