Mermaid flowchart diagrams with AI

Instead of asking AI to produce a flow chart for you, you can ask it to generate a Mermaid diagram.

This method generates a text-only version of your diagram, which you can drop into the Playground at Mermaid Chart and export an image from there. You can also view Mermaid diagrams straight in VS Code, Obsidian, Google Docs, Microsoft Word and PowerPoint, and more.

As an example, here’s a prompt that I used to generate a diagram for an AV setup for our upcoming company meet up:

I'm setting up AV for an event. I have three TVs that will be connected to a laptop via HDMI:

—2 will mirror the laptop screen
—1 will be on the floor to display Presenter view from Google Slides

The TVs will be set up on either side of the presenter and will be at least 30' apart. Create a Mermaid diagram that details the necessary connections and cables. What other info is needed to complete this task?

Claude generated this output:

graph TB
    subgraph Source
        L[Laptop Screen<br/>Display 1: Presentation]
    end
    
    subgraph "Display Setup"
        subgraph "Mirrored Displays (Audience View)"
            TV1[TV 1 - Mirrored<br/>Left Side<br/>Display 1: Presentation]
            TV2[TV 2 - Mirrored<br/>Right Side<br/>Display 1: Presentation]
        end
        
        subgraph "Presenter Display"
            TV3[TV 3 - Floor<br/>Display 2: Presenter View<br/>Google Slides]
        end
    end
    
    subgraph "Signal Distribution"
        SPL[HDMI Splitter<br/>1 Input → 3 Outputs<br/>1-to-3 Splitter]
    end
    
    L -->|"HDMI Cable<br/>(Length: TBD)"| SPL
    SPL -->|"HDMI Cable<br/>(30'+ minimum)"| TV1
    SPL -->|"HDMI Cable<br/>(30'+ minimum)"| TV2
    SPL -->|"HDMI Cable<br/>(Return to Laptop)<br/>OR keep laptop open"| L
    L -.->|"Second HDMI Output<br/>OR USB-C to HDMI adapter<br/>(Length: TBD)"| TV3
    
    Note1[Note: Laptop configured as<br/>'Duplicate Display 1' for mirrored view<br/>'Extend to Display 2' for Presenter View]
    
    classDef laptop fill:#e1f5ff,stroke:#0066cc,stroke-width:2px
    classDef tv fill:#fff4e6,stroke:#ff9800,stroke-width:2px
    classDef equipment fill:#f3e5f5,stroke:#9c27b0,stroke-width:2px
    classDef note fill:#ffffcc,stroke:#666,stroke-width:1px,stroke-dasharray: 5 5
    
    class L laptop
    class TV1,TV2,TV3 tv
    class SPL equipment
    class Note1 note

And this is the result from dropping it into Mermaid Charts:

I found this approach advantageous because it gives me a diagram that I can actually edit and if I would like, versus having a static image that may not meet my requirements.

Plus, it’s super fast. LLMs are great at generating text, and even though the image capabilities are more impressive than ever, I prefer having something malleable. If I wanted more visual editing capabilities, I could simply import the Mermaid code into Draw.io and edit things there. In this case, I was able to obtain working schematics for two possible AV configurations within a few minutes.

Part of the UNIX philosophy is "Write programs to handle text streams, because that is a universal interface." Applying that idea to LLM prompting by requesting a text-based version of a diagram in Mermaid can yield powerful and useful flow charts in a snap.