Using AI to Generate Diagrams with Draw.io and Mermaid.js – Line.do Infographics Reports Slides Online

In today’s digital landscape, visual representation of ideas, workflows, and processes is more crucial than ever. Diagrams not only enhance understanding but also facilitate communication among team members and stakeholders. With the advent of Artificial Intelligence (AI), creating these visual tools has become significantly easier. In this article, we will explore how to leverage AI, specifically through tools like ChatGPT, to generate diagrams using two popular platforms: Draw.io and Mermaid.js.

Who Am I?

My name is Juan Carlos Jaramillo Ceballos, a Software Developer and FullStack Developer experienced in technologies such as Laravel, Node.js, Angular, Vue, SuiteCRM, SQL, NoSQL, and AWS. My goal is to help developers and professionals streamline their workflow and enhance productivity through effective visual communication. This guide is based on my experience and aims to provide you with a step-by-step approach to diagram creation.

Understanding Mermaid.js and Draw.io

Before diving into the step-by-step process, let’s briefly understand what Mermaid.js and Draw.io are and how they differ.

Mermaid.js

Mermaid.js is a JavaScript-based diagramming and charting tool that allows you to create flowcharts, sequence diagrams, Gantt charts, and more using simple textual descriptions. This tool is particularly useful for developers who prefer writing code over dragging and dropping elements in a graphical interface. With its straightforward syntax, users can quickly generate diagrams directly from their descriptions.

Draw.io

Draw.io, also known as diagrams.net, is a web-based diagramming tool that offers a rich graphical user interface (GUI) for creating various types of diagrams, including flowcharts, organizational charts, UML diagrams, and more. Draw.io is user-friendly and allows for easy manipulation of diagram elements, making it a popular choice among both technical and non-technical users.

Generating Diagrams with Mermaid.js

Step 1: Create the Diagram Code in ChatGPT

To begin creating a diagram using Mermaid.js, we will use ChatGPT to generate the code. Here’s how to do it:

Describe the Diagram in Text:
Start by thinking about how you want your flowchart to appear. For instance, you might describe it as follows:

“I want a flowchart with a start node, an action A, an action B, and a decision that leads to two possible outcomes: C or D.”

Request ChatGPT to Generate the Mermaid Code:
Ask ChatGPT to produce the Mermaid code based on your description. For example, you can say:

“Please generate the Mermaid code for the flowchart I described.”

Review and Adjust the Code:
Once ChatGPT provides the code, review it carefully. Ensure it aligns with your vision of the diagram. Make adjustments if necessary.
Save the Generated Code:
Copy the Mermaid code into your clipboard or save it in a text file for later use.

Example of Mermaid Code

Here’s a simple example of what the Mermaid code might look like for our flowchart:

graph TD
    A[Start] --> B[Action A]
    A --> C[Action B]
    B --> D{Decision}
    D -->|Option 1| E[Outcome C]
    D -->|Option 2| F[Outcome D]

Step 2: Load the Code into Mermaid

Now that you have your Mermaid code, the next step is to visualize it.

Access the Mermaid Tool:
Open a compatible Mermaid editor in your web browser. This could be the official Mermaid site or an integrated editor within Visual Studio Code using the Mermaid Preview extension.
Paste the Generated Code:
In the Mermaid editor, paste the code you generated earlier.
Render the Flowchart:
After pasting the code, the editor will automatically render your flowchart. You should see your nodes and connections as specified in the code.
Save the Diagram:
If you’re using Visual Studio Code, you can save the file with a “.mmd” extension to keep your Mermaid diagram for future reference.

Generating Diagrams with Draw.io

If you prefer a more graphical approach, Draw.io is an excellent choice. Here’s how you can generate diagrams in Draw.io using ChatGPT.

Step 1: Generate the XML of the Diagram with ChatGPT

Create the Diagram Description:
Similar to Mermaid, start by describing the diagram you want to create in terms of its elements and relationships. For example:

“I need a flowchart with a start node, two process nodes, and a decision node.”

Request ChatGPT to Generate the XML:
Ask ChatGPT to create the XML representation of the diagram based on your description. For instance:

“Can you generate the XML for a flowchart based on my description?”

Review and Adjust the XML:
Check the generated XML for accuracy and make any necessary adjustments to ensure it represents your desired diagram.
Save the XML:
Save the XML to your device in a file with a “.xml” extension.

Example of XML Code

Here’s a simple example of what the XML code for a flowchart might look like:

<mxfile host="app.diagrams.net">
  <diagram name="Page-1" id="...">
    <mxGraphModel dx="1211" dy="559" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" math="0" shadow="0">
      <root>
        <mxCell id="0" parent="1" />
        <mxCell id="1" value="" style="shape=ellipse;whiteSpace=wrap;html=1;" vertex="1" parent="1">
          <mxGeometry x="180" y="40" width="80" height="30" />
        </mxCell>
        <mxCell id="2" value="Action A" style="shape=box;whiteSpace=wrap;html=1;" vertex="1" parent="1">
          <mxGeometry x="180" y="100" width="80" height="30" />
        </mxCell>
        <mxCell id="3" value="Decision" style="shape=rhombus;whiteSpace=wrap;html=1;" vertex="1" parent="1">
          <mxGeometry x="180" y="160" width="80" height="30" />
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

Step 2: Import the XML into Draw.io

Now that you have your XML file, let’s import it into Draw.io.

Open Draw.io:
Access Draw.io in your web browser or through the application.
Create a New Diagram:
Click on “Create New Diagram” to start a new project.
Import the Generated XML:
Navigate to “File” > “Import From” > “Device” and select the XML file you saved.
Adjust the Imported Diagram:
Once imported, you can adjust the size, position, and style of the diagram using the editing tools available in Draw.io.
Save and Export the Diagram:
After finalizing your diagram, save it by clicking on “File” > “Save.” You can also export the diagram in various formats like PNG, JPEG, or PDF.

Diagram Types Supported by Mermaid.js

Mermaid.js supports a variety of diagram types, allowing for diverse visual representations. Here are some types of diagrams you can create using Mermaid:

Flowcharts: Using graph TD, graph LR, or graph TB to create flowcharts with nodes and connections.
Process Diagrams: Utilizing flowchart for processes with start nodes, actions, decisions, and outcomes.
Gantt Charts: Using gantt for project management with tasks, start dates, and durations.
Sequence Diagrams: Using sequence to represent interactions between objects in a system.
Class Diagrams: Using classDiagram to show class structures and their relationships.
State Diagrams: Utilizing stateDiagram to model states and transitions of an object or system.

Diagram Types Supported by Draw.io

Draw.io also offers a wide range of diagram types, including:

Flowcharts: Create flowcharts with nodes, connections, and decisions using elements like <mxCell>, <mxGeometry>, etc.
Organizational Charts: Represent organizational structures with elements such as <mxCell>, <mxGeometry>, etc.
Network Diagrams: Create network diagrams with nodes, connections, and labels.
UML Diagrams: Represent UML diagrams with elements like <UMLClass>, <UMLPackage>, etc.
Data Flow Diagrams: Use various elements to create data flow diagrams illustrating data movement.
Process Diagrams: Model processes with nodes, decisions, and actions.

Conclusion

The integration of AI tools like ChatGPT with diagramming platforms such as Mermaid.js and Draw.io significantly enhances the efficiency and ease of creating visual representations of ideas and workflows. By following the outlined steps, you can seamlessly generate complex diagrams that cater to your specific needs.

Whether you choose to use the code-based approach with Mermaid.js or the graphical interface of Draw.io, both methods empower you to visualize your concepts effectively. As you embark on your journey of diagram creation, remember that these tools are designed to simplify your workflow, enabling clearer communication and better project management.

Using AI to Generate Diagrams with Draw.io and Mermaid.js