Creating Hand-drawn Flowcharts with ChatGPT and Excalidraw

✔︎ Last updated on November 4th, 2023

I have a soft spot for hand-drawn illustrations and flowcharts over computer-generated ones. There’s something inviting about hand-drawn designs that impart a human touch, unlike the sterile, precise lines of computer-made diagrams.

While tidy flowcharts with perfectly straight lines look organized, they often lack that personal, hand-drawn vibe that connects with people. That’s one reason I always make my illustrations look like they have been drawn by me.

However, drawing flowcharts by hand isn’t always the most practical or feasible solution. For one, it takes too much time, and second, I always keep on fiddling with its color, shapes, and stroke width to get that perfect look, it further eats up the bulk of my time.

But thankfully, I discovered a tool that could create flowcharts resembling hand-drawn sketches. Enter Excalidraw, an open-source project that makes this a reality.

An example of what Excalidraw output looks like is shown here:

Now, Excalidraw is great but wouldn’t drawing all these objects and arrows get tedious pretty quickly? Yup, it would.

Thankfully, you don’t have to draw any of these. There’s a tool called Mermaid.js which allows you to describe flowcharts using special code and syntax. This code is then translated into a flowchart or a diagram.

Also Read: Awesome Excalidraw Keyboard Shortcuts (With Printable PDF)

The Mermaid.js code for the flowchart shown above looks like this:

flowchart TD
    A((Start)) -->|Step 1| B(Step 1)
    B -->|Step 2| C(Step 2)
    C -->|Step 3| D(Step 3)
    D -->|End| E((End))

We will soon see what this code means. Let’s get started.

📗 Learning Mermaid.js Syntax

The syntax of Mermaid.js is pretty easy to get started with. The first word in the first line describes the type of diagram we want to draw and the second word defines its direction.

Other than flowcharts, Mermaid can also draw sequence diagrams, Gantt charts, Pie charts, Data flow diagrams, Network topologies, and much more.

Creating flowcharts with Mermaid involves using a simple text-based syntax to define the elements, connections, and styles of your flowchart. Here’s a more detailed guide on how to create flowcharts using Mermaid:

1. Start the Flowchart: To start a flowchart, you need to specify the direction in which the flowchart will flow. You can choose one of the following options:

• graph TD; for a top-to-bottom flowchart (TD stands for “top-down”).
• graph LR; for a left-to-right flowchart (LR stands for “left to right”).
• graph BT; for a bottom-to-top flowchart (TB stands for “bottom-up”).

2. Create Nodes: Nodes represent different elements or steps in your flowchart. You can create nodes using double square brackets [[...]]. Inside the brackets, provide a name and an optional description for the node, like this:

graph LR
   A[Start] --> B[Process 1]

Here, A and B are nodes, and “Start” and “Process 1” are their respective descriptions. Here’s its output:

3. Connect Nodes: Use arrows --> to connect nodes. Arrows show the flow or sequence between nodes. For example:

graph LR
   A --> B

This means that the flow goes from node A to node B.

4. Adding Labels and Notes: You can add labels or notes to connections or nodes using the -->|...| syntax. For example:

graph LR
   A -->|Label| B

This adds a label “Label” to the arrow between nodes A and B. Here’s what it looks like:

The full Mermaid tutorial is out of the scope of this article. To learn more about Mermaid’s syntax, you can follow the excellent tutorial on Mermaid.Js’s own website.

Once you’ve created your flowchart using Mermaid syntax, you can easily modify and customize it by editing the text-based code. You can use the mermaid.live to see a live preview while you edit your code.

Also read: Awesome Excalidraw Tips and Tricks

Now that you have had a basic idea of the Mermaid syntax, let’s now supercharge your flowchart game with ChatGPT.

Where to Paste the Mermaid code in Excalidraw

Copy your Mermaid code to the clipboard, then go to https://excalidraw.com. Then, go to More Tools -> Mermaid to Excalidraw.

This will show you a textbox where you can paste your Mermaid code. Excalidraw shows its preview to the right and also shows any errors if there are any. Once you are satisfied, you can click insert, and your flowchart will be inserted into the canvas.

That’s all great but isn’t this method too manual to be any faster? Also, you now need to learn the Mermaid syntax to use it. Thankfully, in a world where ChatGPT is free, you don’t have to.

🚀 Using ChatGPT + Mermaid + Excalidraw

Since Mermaid code is text and ChatGPT is the master of text, we can use ChatGPT to write Mermaid.js code which can be fed to Excalidraw to create hand-drawn flowcharts and other diagrams.

👉 Use with caution: ChatGPT often produces incorrect algorithms, so double-check every output for accuracy.

Below are a few examples of diagrams created using ChatGPT + Mermaid + Excalidraw:

Flowchart for user journey:

Pie chart for monthly expenses:

Basic Network Topology Diagram:

Sequence diagram for messaging application:

Decision tree for the loan approval process:

Instagram’s user flow:

And much more.

ChatGPT prompts to create flowcharts

Now that you have seen what ChatGPT + Excalidraw do with the help of Mermaid.js, let’s see what prompts can we give to ChatGPT to get great results.

In the following images of flowcharts, I have cleaned them up and rearranged the elements a little. Often, when there are too many objects in a flowchart or if there’s a loop, the output by Excalidraw gets a little messy. So, they require a little tune-up.

Prompt for Flowchart for Prime numbers

Write me a Mermaid code to create a flowchart for finding prime numbers using Seive of Eratosthenes.

Output:

ChatGPT prompt for a flowchart showing a user browsing Twitter

Write Mermaid code for a flowchart of a user browsing Twitter

OUTPUT:

Prompt for a Recipe of a Tandoori Chicken

Write Mermaid code for a flowchart of the Tandoori Chicken Recipe

Project Management Process

Write Mermaid code for a flowchart outlining a project management process, from ideation to completion.

OUTPUT:

Social Media Marketing Strategy

The possibilities are endless. You just have to ask ChatGPT to give you the mermaid code for any process/algorithm/series of steps. Once you get the code, copy it and and paste it to Excalidraw. You will get your diagram.

Note that if the flowchart contains too many elements, you may need to tweak it a little. Keyboard shortcuts like shift+V and shift+H come in quite handy when cleaning up these flowcharts. You can find more nifty little Excalidraw tricks in this article.

Remember, not all types of diagrams are editable in Excalidraw. Some of them (like a pie chart) come out as images that you can’t edit.

🧵 Wrap up

Who knew computers could one day create hand-drawn diagrams and flowcharts?

Creating flowcharts with Excalidraw is as simple as it can get. Throw in the ChatGPT too and you have in your hands tools that can make you 10 times as productive as before.

The combination of ChatGPT + Mermaid + Excalidraw is a godsend, especially if you work in education or if you create instructional content. Not only do hand-drawn diagrams look personalized, they also feel more intuitive to comprehend and understand.

Remember, when using ChatGPT, be sure to double-check everything. ChatGPT has a tendency to produce code that either doesn’t work sometimes or is just plain wrong in substance.