DEV Community

Cover image for Mastering Diagrams: A Professional Approach to Enhancing Visuals with ChatGPT and Mermaid
Adel Shousha
Adel Shousha

Posted on

Mastering Diagrams: A Professional Approach to Enhancing Visuals with ChatGPT and Mermaid

One of the first steps when creating any software is to plan and design you system. This is actually a smart idea because your design can be easily and quickly modified. On the contrary, altering a software implementation can be a far more challenging task.

Software designers can utilise a variety of general diagramming tools, such as Lucid Charts or Although these can help tremendously, it can be rather a frustrating task trying to align and resize your boxes and arrows.

A new way of creating diagrams started to be more popular among programmers, creating diagrams using code. With this approach, you can write code describing your diagrams and the tool handles the visual rendering. This approach not only simplifies the process but also allows for version control and markdown integration. One of the best languages or tools that can help you do this is Mermaid. A JavaScript based diagramming tool that made creating diagrams a much easier and straight forward task.

In this blog post, We'll discuss how to setup mermaid, and see how to leverage the power of ChatGPT to make the software designing a seamless process.

So, let's dive in.



If you want you can use the online mermaid live editor

If you are using VS code all you need is single extension to render the mermaid code in the markdown file:

Image description

You can also use the mermaid syntax highlighter to distinguish between different elements of your diagram:

Image description

All you need is to create a markdown file and add the following block:

Image description

How to leverage the power of ChatGPT while using mermaid

Simple prompt to ChatGPT:

The easiest way to create a UML diagram or a simple flowchart is by simply create a good prompt and leave the heavy lifting to ChatGPT.

A good prompt can be in the following format:

The context of the diagram, the type of diagram, the details of the diagram
Enter fullscreen mode Exit fullscreen mode

Here is an example:

Image description

graph TD
    A[Input Number A] --> B{A > B?}
    B -->|Yes| C[Print A as Max]
    B -->|No| D[Print B as Max]
    C --> E[End]
    D --> E[End]
Enter fullscreen mode Exit fullscreen mode

Image description

Inputting a whole code snippet:

One of the most ways that combining ChatGPT and mermaid can become handy is when you are trying to document your code and you want to create a simple flowchart or any other diagram but you have already created your code and can’t be bothered to create a good prompt. You can simply input your code to ChatGPT to make your desired diagram in mermaid.

Image description

graph TD
    B[Get two numbers from the user]
    C[Compare the numbers]
    D[Print the result]

    A --> B
    B --> C
    C -->|num_a > num_b| D
    C -->|num_a < num_b| D
    D --> E
Enter fullscreen mode Exit fullscreen mode

Image description

Using mermaid in design software such as

Another way that you can leverage the power of ChatGPT and mermaid is when you are using a software designing tool such as and you want to skip the tedious task of creating a diagram from scratch and want to get a push at the begging and save your time for the creative part of the diagram.

First, you can create a prompt to chatgpt explaining the diagram that you are creaitng like we mention before.

Second you can navigate to and click Arrange >> Insert >> Advanced >> Mermaid

Image description

Input your mermaid code

Image description

And here you go a diagram you diagram is ready and you can edit it using the tools

Image description


In summary, good software planning is essential for success. Traditional tools can be slow, but code-based options like Mermaid are faster and more flexible. ChatGPT can make the process even smoother by quickly turning code into diagrams.

Top comments (0)