Effortlessly Create Diagrams Using ChatGPT, Mermaid, and Excalidraw

Diagrams are invaluable in software development — they can turn convoluted, abstract concepts into clear, visual narratives that are much easier to grasp. But let’s be honest: creating them can be time-consuming and often challenging. Planning how concepts link together, mapping information flows, and ensuring everything fits cohesively requires careful thought. And if you’re like me, you might find the whole process boring. Over the past few months, I’ve been using AI tools like ChatGPT in conjunction with Mermaid and Excalidraw to streamline diagram creation.

I’ll share how you can effortlessly create detailed diagrams using these powerful tools.

Understanding the Tools

Before we get started, get familiar with the tools we’ll be using.

ChatGPT (or another LLM)

ChatGPT is an advanced language model developed by OpenAI that can understand and generate human-like text based on the prompts it receives. It’s capable of assisting with a wide range of tasks, from answering questions and providing explanations to generating code snippets and solving problems.

How ChatGPT Enhances Diagram Creation:
ChatGPT helps by converting your plain English descriptions into a syntax that can be parsed by a computer. Instead of manually writing the code for your diagrams, you can simply describe what you need, and ChatGPT will generate the corresponding Mermaid code for you. This significantly reduces the time and effort required to create detailed diagrams.

Mermaid

Mermaid is a “JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.” It allows you to create complex diagrams via a DSL, which Mermaid then converts into visual diagrams.

Mermaid Syntax Basics

Mermaid’s syntax is intuitive and easy to learn. For example, to create a simple flowchart:

flowchart TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Option 1]
    B -->|No| D[Option 2]

This code produces a flowchart where a decision point leads to two possible options based on “Yes” or “No” paths.

Benefits in Diagram Creation

By using Mermaid, you remove the need to manually draw diagrams. Instead, you define the structure and relationships between components using text, which is ideal for versioning and collaboration.

Excalidraw

Excalidraw is a virtual collaborative whiteboard tool that lets you create sketches easily. It’s known for its hand-drawn style, making diagrams feel more approachable and less formal. Excalidraw is excellent for brainstorming sessions, wireframing, and refining diagrams generated from Mermaid.

Enhancing Diagrams with Excalidraw

After generating the initial diagram using ChatGPT and Mermaid, you can import it into Excalidraw for further refinement. Excalidraw enables you to:

• Add Annotations: Insert comments, notes, or explanations directly onto the diagram.
• Customize Styles: Adjust colors, fonts, and shapes to match your preferences or branding.
• Organize Layouts: Rearrange elements for better clarity and visual appeal.
• Collaborate with Team Members: Share the diagram with others for feedback or collaborative editing.

Prerequisites

Before diving into diagram creation, ensure you have access to the following:

An AI Language Model Interface

You’ll need a way to interact with ChatGPT or another Large Language Model (LLM) to generate Mermaid code from your descriptions. Here are some options:

• OpenAI’s ChatGPT Website: The easiest way is to use the official interface at chat.openai.com.
• Alternate Frontends with API Key: You can use third-party applications or custom frontends that connect to OpenAI’s API using your API key. This method offers more flexibility and integration options. Here are a few example options.
  • ChatBox
  • Msty
  • Typing Mind
• Other AI Chat Services: If you have access to other AI chatbots, such as Anthropic’s Claude or Google’s Gemini, they can also serve the purpose.

Mermaid Editor or Viewer

While ChatGPT generates Mermaid code, you’ll need a way to visualize and possibly edit this code:

• Mermaid Live Editor: An online tool available at mermaid.live, where you can paste Mermaid code and see the rendered diagram instantly.
• Integrated Tools: Some platforms like VS Code have extensions (e.g., Mermaid Editor) that render Mermaid diagrams within the editor.

Excalidraw

Excalidraw is a free, open-source tool that you’ll use to refine and enhance your diagrams:

• Web Application: Access Excalidraw directly in your browser at excalidraw.com.
• Integration Plugins: If you use note-taking apps like Obsidian, you can install plugins that integrate Excalidraw directly into your workflow.

Creating a Diagram With ChatGPT and Mermaid

Now that we have our tools set up, we can create a diagram! To demonstrate let’s walk through an example of creating a diagram. For our example, we will create a diagram for choosing an investment strategy

Step 1. Generate the Initial Diagram with ChatGPT

Begin by providing ChatGPT with a simple, high-level prompt:

“Create a diagram using mermaid for choosing an Investment Strategy”

ChatGPT’s Response

flowchart TD
A[Start] --> B{What is your investment horizon?}
B -->|"Short-term<br>(Less than 3 years)"| C[Focus on Low-Risk Investments<br>e.g., Savings Accounts, CDs, Money Market Funds]
B -->|"Medium-term<br>(3 to 10 years)"| D{What is your Risk Tolerance?}
B -->|"Long-term<br>(More than 10 years)"| D
D -->|Low| E[Consider Balanced Portfolio<br>e.g., Mix of Bonds and Stocks]
D -->|Medium| F[Consider Growth-Oriented Portfolio<br>e.g., More Stocks than Bonds]
D -->|High| G[Consider Aggressive Portfolio<br>e.g., Stocks, ETFs, Real Estate]
C --> H[Review and Adjust Regularly]
E --> H
F --> H
G --> H

This is a great start, but the diagram is pretty basic. For instance, what if I want to decide between a 401k, IRA, or other investing account?

Step 2: Refine the Prompt for More Detail

To create a more comprehensive diagram, we’ll provide ChatGPT with a more detailed prompt. Including more details and specifics will help ChatGPT create a more detailed diagram

Refined Prompt:

“Create a detailed flowchart using Mermaid that outlines the steps to for choosing an investment strategy. Include tradeoffs such as traditional vs roth investment accounts and IRA vs 401k. Also, be sure to include steps that should be taken before deciding to invest your money , including but not limited to an emergency fund and a budget”

flowchart TD
start([Start]) --> budget{{Do you have a budget?}}
budget -- Yes --> emergency{{"Do you have an emergency fund (3-6 months of expenses)?"}}
budget -- No --> create_budget[Create a budget]
create_budget --> emergency

emergency -- Yes --> debt{{Do you have high-interest debt?}}
emergency -- No --> build_ef[Build an emergency fund]

build_ef --> debt

debt -- Yes --> pay_debt[Pay off high-interest debt]

pay_debt --> employer_plan{{"Does your employer offer a retirement plan (e.g., 401(k))?"}}

debt -- No --> employer_plan



employer_plan -- Yes --> match{{Does your employer offer matching contributions?}}
employer_plan -- No --> roth_vs_trad

match -- Yes --> contribute_match[Contribute enough to get full employer match]
match -- No --> roth_vs_trad

contribute_match --> roth_vs_trad

roth_vs_trad{{Do you expect to be in a higher tax bracket in retirement?}}
roth_vs_trad -- Yes --> roth[Consider Roth accounts]
roth_vs_trad -- No --> trad[Consider Traditional accounts]


roth --> choose_account_type
trad --> choose_account_type

choose_account_type{{Choose Account Type}}
choose_account_type --> choose_ira401k{{"Have you maxed out your 401(k) contributions?"}}

choose_ira401k -- No --> contribute_401k["Contribute to 401(k)"]
choose_ira401k -- Yes --> contribute_ira[Contribute to IRA]

By giving more detail to ChatGPT we’ve received a more detailed process for selecting an investment strategy and account!

Step 3: Tweak The Mermaid Code

Even with the refined output, you might notice areas where further tweaks are needed. For instance:

• Consistency in Node Labels: Ensure that all decision nodes (diamonds) are questions and action nodes (rectangles) are statements.
• Simplifying Language: Replace technical jargon with clearer terms if needed. Although ChatGPT can help with the lions share of the work, it is still useful to have some knowledge of Mermaid’s syntax so you can make edits where necessary.

Step 4: Importing into Excalidraw for Final Edits

Now that the Mermaid diagram is polished, it’s time to import it into Excalidraw for further enhancements and customization. Excalidraw makes this super easy buy including a Mermaid to Excalidraw feature!

In order to do this, take the following steps:

1. Open Excalidraw
2. Click the icon with a triangle, circle, and square
3. Select “Mermaid to Excalidraw”
4. Copy and paste your diagram code into the text box
5. Press insert

If you’re Mermaid is syntactically correct, Excalidraw will generate a diagram for you!

You may be asking yourself why we would even paste a diagram into Excalidraw if we already have a visualized mermaid diagram. Here are just a few reasons:

1. Complicated Mermaid diagrams can have intersections between connectors that are hard to untangle without Excalidraw
2. You can easily collaborate with others in Excalidraw
3. Folks who aren’t familiar with Mermaid syntax can more easily make tweaks to an Excalidraw document.
4. You can easily add icons and images to Excalidraw drawings

Effortlessly Creating Diagrams

By leveraging the combined power of ChatGPT, Mermaid, and Excalidraw, we’ve transformed a potentially tedious task into an efficient and even enjoyable process. This workflow saves time and enhances collaboration and flexibility in diagram creation. Whether you’re a software developer, project manager, or educator, incorporating these tools into your workflow can significantly improve how you visualize and communicate complex information.