In this article, we’ll explore how Chatgpt can be combined with Mermaid, a popular diagramming library, to generate diagrams easily. Whether you’re a project manager, developer, or content creator, this powerful duo can help streamline your work and unlock new possibilities in visual communication. Let’s dive in and discover how ChatGPT and Mermaid can revolutionize the way you create diagrams.

Mermaid: Your New Diagramming BFF

Before we explore the powerful combination of ChatGPT and Mermaid, let’s take a closer look at Mermaid itself. Mermaid is an open-source diagramming library that allows you to create a diverse range of diagrams using a simple, text-based syntax. Its user-friendly approach has made it popular among developers, designers, and content creators.

Mermaid streamlines the process of generating diagrams, making them accessible to users of all skill levels. With just a few lines of code, you can create professional-looking diagrams in no time.

To get a sense of Mermaid’s capabilities, visit their website (https://mermaid.js.org/) and browse through examples and documentation. You’ll find that Mermaid supports various diagram types, including flowcharts, sequence diagrams, Gantt charts, and more. Additionally, Mermaid offers extensive customization options, allowing you to create diagrams that perfectly fit your needs.

Now that we’ve introduced you to Mermaid, let’s move on to discover how to integrate it with ChatGPT and begin generating diagrams.

Effortless Diagramming with Mermaid: Mastering Text Syntax

Creating a diagram in Mermaid using text syntax is incredibly straightforward. In this section, we’ll provide you with an example of a flowchart, demonstrating just how easy it is to create visually appealing diagrams using Mermaid. To follow along, you can open the Mermaid Live Editor (https://mermaid-js.github.io/mermaid-live-editor/) and try creating this flowchart yourself.

Flowchart Example:

To create a flowchart in Mermaid, follow this syntax structure.

flowchart TD
    A[Start] --> B{Is it?}
    B -- Yes --> C[OK]
    C --> D[Rethink]
    D --> B
    B -- No ----> E[End]

In this example, we have five nodes (A, B, C, D, and E) connected by arrows, representing a flow of information or processes. The decision node (B) branches the flowchart based on “Yes” or “No” responses. You can quickly generate a clean and professional-looking flowchart by inputting this code into the Mermaid Live Editor.

Pie Chart Example:

To create a pie chart in Mermaid, follow this syntax structure.

pie title Employees hired in the first quarter
    "Band 6" : 386
    "Band 5" : 85
    "Band 4" : 15
    "Band 3" : 54

This pie chart represents the number of employees hired in the first quarter, categorized by their respective bands. The data is divided into four bands (Band 6, Band 5, Band 4, and Band 3), each representing a specific level or tier within the organization.

Generating Mermaid Syntax with ChatGPT

One of the coolest features of ChatGPT is its ability to generate code, including Mermaid syntax for diagrams. In this section, let me demonstrate how to use ChatGPT to create a flowchart for a user registration flow in a web application.

To get started, simply prompt ChatGPT with a clear request, like:

Can you generate a Mermaid flowchart for a user registration flow of a web application?

ChatGPT will generate the Mermaid code for you, which you can then use to render the flowchart in a Mermaid-compatible editor or Markdown file. For example, the generated code might look like this:

flowchart TB
  A[Start]
  A --> B[Visit Registration Page]
  B --> C[Fill out Registration Form]
  C --> D{Validation}
  D -- Valid Input --> E[Create Account]
  E --> F[Send Confirmation Email]
  F --> G[Confirm Email]
  G --> H[Account Activated]
  D -- Invalid Input --> I[Show Error Message]
  I --> C

This flowchart represents the typical steps involved in a user registration process. You can modify the generated code as needed or ask ChatGPT for additional details or customizations.

While ChatGPT is an incredibly powerful tool, it’s important to remember that the generated Mermaid syntax might not always be 100% accurate. As a user, you may need to review and adjust the code to better suit your needs. This also means that you can customize the generated flowchart to fit your requirements.

If you find that ChatGPT doesn’t generate the exact diagram you’re looking for, you can always provide an example syntax to guide the AI in the right direction. This will help ChatGPT understand your requirements better and generate a more accurate diagram.

Let’s take a look at another example. Say you want to create a Mermaid mind map related to Streams in Java. You can prompt ChatGPT with a request like:

Can you generate a Mermaid mind map that depicts the concept of Streams in Java?

ChatGPT provided me with an initial diagram syntax, but it wasn’t correct. To help ChatGPT understand my requirements better, I provided a sample syntax of a Mermaid mind map taken from the Mermaid documentation.

With this example in hand, ChatGPT was able to correctly generate the desired mind map:

mindmap
  root((Java Streams))
    Stream Creation
      From Collection
      From Arrays
      From I/O Channels
    Stream Operations
      Intermediate Operations
        Filter
        Map
        FlatMap
      Terminal Operations
        ForEach
        Reduce
        Collect

This experience of working with ChatGPT to generate diagrams highlights the iterative nature of the process. By supplying examples or fine-tuning your prompt, you can steer ChatGPT toward generating results that are both more accurate and relevant to your needs.

In conclusion, generating accurate Mermaid diagram syntax with ChatGPT is a breeze when you use the right prompts and embrace the iterative process. As you continue to experiment with and refine your prompts, you’ll find that ChatGPT can be an invaluable tool for visualizing complex concepts, processes, and workflows.

Remember that effective communication is key to unlocking ChatGPT’s full potential. Don’t be afraid to iterate and provide guidance when necessary. With a bit of practice and patience, you’ll be creating impressive Mermaid diagrams in no time. Happy diagramming!

Resources

Intro to mermaid: https://mermaid.js.org/intro/

Mermaid Live Editor: https://mermaid.live/edit

👋 If you find this helpful, please click the clap 👏 button below a few times to show your support for the author 👇

🚀Join FAUN Developer Community & Get Similar Stories in your Inbox Each Week

Effortless Diagrams Unlocked: Streamline Diagram Creation with ChatGPT & Mermaid was originally published in FAUN Publication on Medium, where people are continuing the conversation by highlighting and responding to this story.