Microservices Architecture Diagrams

Why Use Mermaid

• Version-controlled architecture — Diagrams live in your repo, updated in PRs
• Service dependency visualization — See which services talk to each other
• Onboarding tool — New engineers understand the system at a glance
• Design reviews — Add architecture diagrams to RFCs and design docs
• GitHub rendering — Diagrams render directly in your README and wiki

Example Diagram

flowchart TB
    subgraph Client Layer
        WEB[Web App]
        MOBILE[Mobile App]
    end

    subgraph API Gateway
        GW[API Gateway / Load Balancer]
    end

    subgraph Services
        AUTH[Auth Service]
        USER[User Service]
        ORDER[Order Service]
        PRODUCT[Product Service]
        NOTIFY[Notification Service]
    end

    subgraph Data Stores
        AUTHDB[(Auth DB)]
        USERDB[(User DB)]
        ORDERDB[(Order DB)]
        PRODUCTDB[(Product DB)]
        CACHE[(Redis Cache)]
    end

    subgraph Messaging
        QUEUE[[Message Queue]]
    end

    WEB --> GW
    MOBILE --> GW
    GW --> AUTH
    GW --> USER
    GW --> ORDER
    GW --> PRODUCT

    AUTH --> AUTHDB
    USER --> USERDB
    ORDER --> ORDERDB
    PRODUCT --> PRODUCTDB

    AUTH --> CACHE
    USER --> CACHE

    ORDER --> QUEUE
    QUEUE --> NOTIFY
    QUEUE --> PRODUCT

Copy this code and paste it into the editor to see it rendered live.

Frequently Asked Questions