Forget Visio, Let’s Go Swimming: How to Build Flow Diagrams with Mermaid” 🧜‍♂️💻

Visio is handy for drawing flows quickly, but licenses are not freely available and getting connectors to look professional can be quite time consuming and sometimes frustrating - especially if it cannot locate your shapes/stencil folder for the icon based rendering.

This is where Mermaid.live comes in, using Mermadi you can design diagrams right in your browser and iterate instantly. And if you want to take it further, export high-quality images for blogs, documentation, or presentations with Mermaid.ai — this requires signing up for a free account, but it’s straightforward.

Note on AI : AI is good at writing code in Mermaid but is not good at drawing those diagrams, you will have never-ending battles with the inaccuracies and the rendering engines and while ChatGPT does nice diagrams they are very inaccurate the more complex they need to be - however remember to get the data right and ask the right questions before asking AI.

In this post, we’ll build a realistic “User to Web Server” flow diagram, step-by-step. By the end, you’ll have a professional, accurate diagram with TLS, firewalls, DNS, and optional proxies — all without touching Visio.

Step-by-Step Mermaid Guide

We’ll progressively build a network flow diagram showing a user interacting with a website, step by step and it will all make sense at the end.

Step 1 – Start simple

flowchart LR
    user["👤 User"]

This will then show the User node:

Step 2 – Add the browser

flowchart LR
    user["👤 User"]
    browser["🌐 Web Browser"]

    user -->|Types URL| browser

The user never talks to the internet directly but to the browser:

Step 3 – Introduce the OS networking layer

flowchart LR
    user["👤 User"]
    browser["🌐 Web Browser"]
    netstack["🧠 OS Network Stack"]

    user --> browser
    browser -->|Socket API| netstack

This models the real path of packets and then adds the OS Network Stack as below:

Step 4 – Add the gateway

flowchart LR
    netstack["🧠 OS Network Stack"]
    gateway["🚪 Default Gateway"]

    netstack -->|Forward packets| gateway

This then adds the gateway as you can see below:

Step 5 – Include DNS resolution

flowchart LR
    netstack["🧠 OS Network Stack"]
    gateway["🚪 Default Gateway"]
    dns["📘 DNS Resolver"]

    netstack -->|Name lookup| dns
    netstack --> gateway

DNS happens separately before the actual request, so lets add that:

Step 6 – Internet transit

flowchart LR
    gateway["🚪 Default Gateway"]
    internet["☁️ Internet Backbone"]

    gateway -->|Routed traffic| internet

This will then add the Internet as an object:

Step 7 – Web server request

flowchart LR
    internet["☁️ Internet Backbone"]
    server["🖥️ Web Server"]

    internet -->|HTTP/HTTPS request| server

Then we need the web server request as below:

Step 8 – Return path

flowchart LR
    server["🖥️ Web Server"]
    internet["☁️ Internet Backbone"]
    gateway["🚪 Default Gateway"]
    netstack["🧠 OS Network Stack"]
    browser["🌐 Web Browser"]

    server -->|HTTP response| internet
    internet --> gateway
    gateway --> netstack
    netstack --> browser

Next we need the return path so lets add that in from the code above you then get this:

Step 9 – Add a firewall (always inline)

flowchart LR
    netstack["🧠 OS Network Stack"]
    firewall["🔥 Firewall"]
    gateway["🚪 Default Gateway"]

    netstack --> firewall
    firewall --> gateway

This will add the firewall into the diagram

Step 10 – TLS handshake

flowchart LR
    browser["🌐 Web Browser"]
    server["🖥️ Web Server"]

    browser <-->|TLS Handshake| server

TLS is a process, not a device. This is the correct way to show encrypted traffic, so lets cover that section visually:

Step 11 – Optional proxy

flowchart LR
    firewall["🔥 Firewall"]
    gateway["🚪 Default Gateway"]

    subgraph Optional["Optional Component"]
        proxy["🛡️ HTTPS Proxy"]
    end

    firewall -.->|Optional path| proxy
    proxy -.-> gateway

Dashed lines and dashed subgraphs indicate optional components, as you can see below:

Step 12 – TLS with or without proxy

flowchart LR
    browser["🌐 Web Browser"]
    proxy["🛡️ Proxy"]
    server["🖥️ Web Server"]

    browser <-->|TLS Direct| server
    browser <-->|TLS Client->Proxy| proxy
    proxy <-->|TLS Proxy->Server| server

This will then create the visual for TLS with or without the proxy, which means via proxy or direct:

Step 13 – Final professional diagram

flowchart LR
    classDef client fill:#e3f2fd,stroke:#1565c0
    classDef security fill:#fff3e0,stroke:#ef6c00
    classDef network fill:#e8f5e9,stroke:#2e7d32
    classDef server fill:#fce4ec,stroke:#c2185b

    %% Nodes
    user["👤 User"]
    browser["🌐 Web Browser"]
    netstack["🧠 OS Network Stack"]
    firewall["🔥 Firewall"]
    gateway["🚪 Default Gateway"]
    dns["📘 DNS Resolver"]
    internet["☁️ Internet Backbone"]
    server["🖥️ Web Server"]

    subgraph OptionalProxy["Optional Component"]
        proxy["🛡️ HTTPS Proxy"]
    end

    %% User path
    user -->|Types URL| browser
    browser -->|Socket API call| netstack

    %% OS network path
    netstack -->|Forward packets| firewall
    netstack -->|DNS lookup| dns

    %% Firewall and gateway
    firewall -->|Allowed traffic| gateway
    firewall -.->|Optional interception| proxy
    proxy -.-> gateway

    %% Internet transit and server
    gateway -->|Routed traffic| internet
    internet -->|HTTP/HTTPS request| server
    server -->|HTTP/HTTPS response| internet
    internet --> gateway
    gateway --> netstack
    netstack --> browser

    %% TLS interactions
    browser <-->|TLS Direct| server
    browser <-->|TLS Client->Proxy| proxy
    proxy <-->|TLS Proxy->Server| server

    %% Apply styles
    class user,browser,netstack client
    class firewall,proxy security
    class gateway,internet,dns network
    class server server

This diagram is accurate, professional, and ready for documentation. Optional proxies and TLS paths are explicitly modeled.

This is where you can take logic and ask Mermaid to complete all the hard work for you, you can even ask AI to create Mermaid diagrams from technical text, but before you do ensure that data is correct and accurate - as if you get rubbish in you will get rubbish out.