Most of you who use AI tools every day know that ChatGPT or any other AI tool sucks at creating diagrams. It’s something they are not trained to do. Clear diagrams with labels are something no AI can handle effectively. It’s like an Achilles heel for AI chatbots. Diagrams require time and effort. They need expertise and extensive experience. So, the question arises: what can be done to generate beautiful, clean diagrams with AI? Or more specifically, how can we save time and money with diagrams? One way is to use Figjam by Figma. However, it is a time-consuming task to build a diagram from scratch, and it’s mostly limited to mind maps or diagrams like a fishbone diagram. It’s limited, and it’s quite a lot of work!

The answer lies in this tutorial. We will show you how to utilize ChatGPT, Mermaid Code, and Excalidraw to create stunning diagrams with labels with minimal effort. 

In this tutorial, you will learn how to use ChatGPT to create a logic tree, ask ChatGPT to generate Mermaid code, and use ExcaliDraw to generate a diagram. 

By the end of this tutorial, you’ll know how to:

• Create a logic tree
• Ask ChatGPT to generate Mermaid code
• Use ExcaliDraw to generate a diagram
• Review the diagram and Iterate

So what are you waiting for? Let’s dive right into it!

Step 1 - Create a logic tree

The first step is to determine the concept that the diagram represents. What exactly do you want, and which diagram do you want to create? Once you've figured that out, open ChatGPT and log in to an account (a paid account is preferable).  

‍

Change the AI model to GPT-5 Thinking. 

Now we must create a logic tree. A logic tree is like a map of reasoning. Each branch represents a logical step, choice, or factor that flows from the previous one. 

Let’s say you want to create a complex logic tree diagram for an AI chatbot that answers questions related to hotel customer service.  Use the following hypothetical prompt. 

Prompt:

Create a logic tree for a hotel customer service AI chatbot. The job of the AI chatbot is to ask guests questions to understand their needs, so that real people can provide better assistance. The logic tree should include questions, answers, and follow-up questions based on the responses. 

The questions are categorized into common queries. To understand the whole flow clearly, instruct ChatGPT to categorize the follow-up questions clearly. 

Prompt:

Categorize the follow-up questions for each category by specifying a header for follow-up questions. 

That looks good. Let’s use this logic tree to generate Mermaid code. 

Step 2 - Ask ChatGPT to generate Mermaid code

Mermaid is a JavaScript-based diagramming tool. It helps visualize the complex decision tree. Since Mermaid can provide us with code that we can use to generate the diagram, we can use ChatGPT to do so. 

Prompt:

Generate Mermaid code for the logic tree you created above. 

Check the code and see if anything is amiss. As an additional measure, ask ChatGPT to review and debug the code. 

Prompt:

Review the Mermaid code to identify any errors. I would like to export this code to ExcaliDraw or Figma. Ensure that it doesn’t throw any errors. 

Click ‘Copy code’ to copy the contents for the logic tree diagram and head over to ExcaliDraw. 

Step 3 - Use ExcaliDraw to generate a diagram.

ExcaliDraw is like Figjam. It’s a diagramming tool that allows you to create intricate and complex diagrams. It’s a great tool for developers to map out the entire app-building process. The best part is that ExcaliDraw is free to use for anyone. It doesn’t even require a login!

Go to ExcaliDraw—no need to log in. The entire app is ready for you to use. 

Click the ‘More Tools’ button and select ‘Mermaid to ExcaliDraw. 

Paste the code in the text area. As you can see, it threw an error. Let’s go back to ChatGPT and ask it to fix this error. 

ChatGPT will  correct the error and generate a new code. Copy that code and paste it into the Mermaid syntax box. 

Success! Click ‘Insert’ to finalize the diagram creation process. 

Here's how it look like as a whole.

If you want to import the Mermaid code into FigJam, open FigJam and right-click the blank workspace. 

That’s it for this tutorial, diagram nerds! Remember to follow the steps carefully. ChatGPT might generate code full of errors. Copy/paste all errors in ChatGPT and ask it to debug and generate the code again.