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 draw.io. 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.

Setup

Mermaid

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:

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

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

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

Here is an example:

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]

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.

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

    A --> B
    B --> C
    C -->|num_a > num_b| D
    C -->|num_a < num_b| D
    D --> E

Using mermaid in design software such as Draw.io

Another way that you can leverage the power of ChatGPT and mermaid is when you are using a software designing tool such as Draw.io 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 Draw.io and click Arrange >> Insert >> Advanced >> Mermaid

Input your mermaid code

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

Conclusion

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.