🐴 How to create hand-drawn like diagrams with AI
Speed up the process to under a minute
Over a year ago, I saw an engineer presenting some nice hand-drawn diagrams in a org-wide meeting. Out of curiosity, I found his name on Slack and asked him what tools he used. He said Excalidraw, an open-source tool.
A few months later, I had this tricky task to tackle. It involved figuring out a complex decision tree and turning it into a diagram. I played around with ChatGPT, Mermaid.js, and Excalidraw.
Although I had to make minor revisions after the first generation, I discovered a new workflow and got the result.
Today, I'll walk you through how I managed to do all that.
Tools that I used
ChatGPT
Mermaid code (A JavaScript-based tool to connect the prompt and Excalidraw)
Excalidraw
Step 1: Ask ChatGPT to help create the logic tree
Since my task was about creating a complex logic tree diagram of a chatbot, I decided to ask ChatGPT for help.
For demo purposes, I am using a hypothetical prompt.
After asking for minor revisions, this is the result I got:
I was satisfied with the result, but that was a lot…
How to create a diagram out of it?
It would have taken me a significant amount of time to create it manually.
A mentor taught me many years ago that if I had to spend a lot of time dealing with repetitive tasks, it was the time to find a smarter workflow.
After some research, I learned that Mermaid (a JavaScript-based diagramming tool) could help me visualize the complex decision tree.
Step 2: Ask ChatGPT to generate Mermaid code
I had no idea how to write Mermaid code, so instead of me learning the language, I asked ChatGPT to generate the code for me.
It worked!
Step 3: Generate the diagram in Excalidraw
I copied the code from ChatGPT, then opened up excalidraw.com. In the menu bar, there was an option named Mermaid to Excalidraw. Then I pasted the code in the Mermaid tab.
However, an unexpected thing happened—an error showed up.
Without debugging or overthinking, I asked ChatGPT again for help.
ChatGPT fixed it right away with a new code:
I copied the code and pasted into Excalidraw again.
No error this time. Amazing!
Problem solved by asking ChatGPT to debug for me.
The result reflected the complex logic tree. Visually, the diagram certainly required some polish, but it was a great starting point for team collaboration given how fast the diagram creation was.
In Nov. 2023, AI features were released in FigJam. I could use FigJam AI to create similar diagrams too, based on the same logic tree, shown as below. The process and visual presentation are different through. I’ll talk about FigJam in another issue.
Takeaways
My biggest learning of this experiment was less about the result, but more about the process. Beyond Excalidraw, the process also included leveraging ChatGPT to create logic tree, generate code, and fix errors for me—each of the task was performed under a minute. It could have cost me hours of time, had I had to do everything manually, even more so with a more complex flow.
The experiment also inspired me to explore ideas to optimize lengthy workflow with the power of AI.
That’s a wrap. Thanks for reading.
In the next issue, I’ll talk about my successes and failures gathering insights and resources online with AI.
Stay tuned.
—Xinran
P.S. Questions? Thoughts? Just reply to this newsletter. I’d love to hear from you.