Creating Diagrams with ChatGPT and Mermaid.live

It turns out that ChatGPT (and other large language models) are great at generating diagrams as well as text.

If you ask ChatGPT to make a diagram then it might try to use Dall-e and draw one from scratch. Dall-e and other image generators aren't good at diagrams at all. But if you ask ChatGPT right, it can generate a good editable first draft diagram.

ChatGPT has also been trained on the Mermaid Chart syntax. There's lots of tools that can display Mermaid charts but the quickest and easiest is Mermaid.live.

Using Mermaid syntax and Mermaid.live

1. Enter something like mermaid diagram for a user MFA setup process into ChatGPT. Demo
2. Copy the code it generates
3. Paste it into Mermaid.live. Demo
4. Edit it in Mermaid.live. Change themes, download or export

Here's the code it makes:

sequenceDiagram
    participant U as User
    participant S as System
    participant E as Email Server
    participant P as Phone

    U->>S: Access MFA setup page
    S->>U: Request email verification
    U->>E: Check email
    E->>U: Provide verification code
    U->>S: Enter verification code
    S->>U: Email verified, request phone number
    U->>S: Provide phone number
    S->>P: Send SMS with verification code
    P->>U: Receive SMS
    U->>S: Enter SMS code
    S->>U: Phone verified, setup complete

Mermaid supports

• Flowchart
• Sequence Diagram
• Class Diagram
• State Diagram
• Entity Relationship Diagram
• User Journey
• Gantt
• Pie Chart
• Quadrant Chart
• Requirement Diagram
• Gitgraph (Git) Diagram
• C4 Diagram
• Mindmaps
• Timeline
• Sankey
• XYChart
• Block Diagram

Examples

Sequence diagram

mermaid diagram for a user MFA setup process Chart

Flow chart

mermaid flowcahrt for an ecommerce refund process Chart

Gantt chart

mermaid gantt chart for web app project: start today, 5 fortnightly sprints, milestone at the end Chart

My old approach: Using ChatGPT and Python

For completeness, ChatGPT's code interpreter can run Python. This includes access to various Python charting libraries like:

• Matplotlib
• Graphviz
• Pydot
• NetworkX
• Plotly
• Bokeh
• Seaborn

These work fairly well, as ChatGPT is trained on writing Pytnon code to generate these. Graphviz is especially good, as it works with the DOT language, which ChatGPT is trained on.

I generally find these more clunky to edit and iterate on with ChatGPT.