Diagram Gallery

Curated Mermaid.js examples organized by real-world use case. Copy any example and open it directly in the editor.

This gallery contains production-ready diagram templates covering the most common scenarios in software development, project management, and system design. Each example includes the complete Mermaid.js code you can paste directly into the SimpleMermaid editor. If you are new to Mermaid syntax, start with the Learn page for a full reference. For guidance on structuring your diagrams, see our Best Practices guide.

Software Architecture

Diagrams for documenting system structure, service boundaries, and communication patterns.

Microservices Architecture

Use this template when you need to document the boundaries between services, their communication protocols, and shared infrastructure. It is ideal for architecture reviews, onboarding new team members, or creating documentation for a service catalog.

flowchart TB
    Client[Client App] --> Gateway[API Gateway]
    Gateway --> Auth[Auth Service]
    Gateway --> Users[User Service]
    Gateway --> Orders[Order Service]
    Gateway --> Products[Product Service]

    Users --> DB1[(User DB)]
    Orders --> DB2[(Order DB)]
    Products --> DB3[(Product DB)]

    Orders --> Queue{Message Queue}
    Queue --> Notifications[Notification Service]
    Queue --> Analytics[Analytics Service]

    subgraph Infrastructure
        Gateway
        Queue
    end

Try it in Editor

API Gateway Pattern

Visualize how client requests are routed through a centralized gateway to backend services. Useful for API design discussions, rate limiting documentation, and illustrating authentication flows in distributed systems.

flowchart LR
    Mobile[Mobile App] --> GW[API Gateway]
    Web[Web App] --> GW
    Partner[Partner API] --> GW

    GW --> RL{Rate Limiter}
    RL --> Auth{Auth Check}
    Auth -->|Valid| Router{Router}
    Auth -->|Invalid| Reject[401 Rejected]

    Router --> V1[/v1/users/]
    Router --> V2[/v1/orders/]
    Router --> V3[/v1/products/]

    V1 --> UserSvc[User Service]
    V2 --> OrderSvc[Order Service]
    V3 --> ProductSvc[Product Service]

Try it in Editor

Event-Driven Architecture

Map out event producers, consumers, and the event bus that connects them. This diagram pattern is essential for documenting asynchronous workflows, CQRS implementations, and systems where components communicate through events rather than direct API calls.

flowchart TB
    subgraph Producers
        WebApp[Web Application]
        MobileApp[Mobile App]
        CronJob[Scheduled Jobs]
    end

    subgraph Event Bus
        Kafka[Apache Kafka]
    end

    subgraph Consumers
        OrderProcessor[Order Processor]
        EmailService[Email Service]
        InventoryService[Inventory Service]
        AuditLog[Audit Logger]
    end

    WebApp -->|OrderCreated| Kafka
    MobileApp -->|UserSignedUp| Kafka
    CronJob -->|ReportGenerated| Kafka

    Kafka -->|OrderCreated| OrderProcessor
    Kafka -->|UserSignedUp| EmailService
    Kafka -->|OrderCreated| InventoryService
    Kafka -->|All Events| AuditLog

Try it in Editor

Project Management

Planning, scheduling, and tracking diagrams for agile and traditional project workflows.

Sprint Planning Gantt Chart

Model a two-week sprint with task dependencies and milestones. Gantt charts are valuable during sprint planning ceremonies, progress reviews, and when communicating timelines to stakeholders who prefer visual schedules over backlog lists.

gantt
    title Sprint 24 - Q1 2026
    dateFormat  YYYY-MM-DD
    axisFormat  %b %d

    section Backend
    API Design           :a1, 2026-01-06, 2d
    Database Migration    :a2, after a1, 3d
    Service Implementation :a3, after a2, 4d
    Unit Tests           :a4, after a3, 2d

    section Frontend
    UI Mockups           :b1, 2026-01-06, 2d
    Component Build      :b2, after b1, 4d
    Integration          :b3, after b2, 2d

    section QA
    Test Plan            :c1, 2026-01-08, 2d
    Integration Testing  :c2, after a4, 3d
    UAT                  :c3, after c2, 2d

    section Milestones
    Sprint Review        :milestone, 2026-01-17, 0d

Try it in Editor

Product Roadmap

Lay out quarterly objectives and feature milestones across multiple workstreams. Product roadmaps are essential for aligning engineering, product, and design teams on shared priorities and for communicating strategy to leadership.

gantt
    title Product Roadmap 2026
    dateFormat  YYYY-MM-DD
    axisFormat  %b

    section Core Platform
    Performance Optimization :2026-01-01, 90d
    Plugin Architecture      :2026-04-01, 60d
    API v2 Launch            :milestone, 2026-06-01, 0d

    section User Experience
    Dashboard Redesign       :2026-01-15, 75d
    Mobile App MVP           :2026-04-01, 90d
    Accessibility Audit      :2026-07-01, 30d

    section Growth
    Self-serve Onboarding    :2026-02-01, 60d
    Analytics Dashboard      :2026-05-01, 45d
    Enterprise Features      :2026-07-01, 90d

Try it in Editor

Database Design

Entity relationships and data flow diagrams for schema documentation and design reviews.

E-Commerce ERD

Document the core entities, attributes, and relationships for an online store. ERDs are indispensable during database design reviews, when onboarding new backend engineers, or when refactoring a data model to support new features.

erDiagram
    CUSTOMER ||--o{ ORDER : places
    CUSTOMER {
        int id PK
        string name
        string email UK
        date created_at
    }
    ORDER ||--|{ ORDER_ITEM : contains
    ORDER {
        int id PK
        int customer_id FK
        date order_date
        string status
        decimal total
    }
    ORDER_ITEM }o--|| PRODUCT : references
    ORDER_ITEM {
        int id PK
        int order_id FK
        int product_id FK
        int quantity
        decimal unit_price
    }
    PRODUCT ||--o{ PRODUCT_CATEGORY : "belongs to"
    PRODUCT {
        int id PK
        string name
        decimal price
        int stock_qty
    }
    PRODUCT_CATEGORY {
        int id PK
        string name
        string description
    }

Try it in Editor

Data Pipeline Flow

Trace data from ingestion through transformation to consumption. This pattern is useful for documenting ETL pipelines, data warehouse architectures, and the flow of events through streaming platforms.

flowchart LR
    subgraph Sources
        App[Application DB]
        Logs[Log Files]
        API[Third-party APIs]
    end

    subgraph Ingestion
        Kafka[Kafka Streams]
        Batch[Batch Import]
    end

    subgraph Processing
        Spark[Apache Spark]
        Transform[Data Transform]
    end

    subgraph Storage
        DW[(Data Warehouse)]
        Lake[(Data Lake)]
    end

    subgraph Consumption
        BI[BI Dashboard]
        ML[ML Pipeline]
        Reports[Reports]
    end

    App --> Kafka
    Logs --> Kafka
    API --> Batch
    Kafka --> Spark
    Batch --> Transform
    Spark --> DW
    Transform --> Lake
    DW --> BI
    DW --> Reports
    Lake --> ML

Try it in Editor

Security

Threat models, authentication flows, and security architecture diagrams.

OAuth 2.0 Authorization Code Flow

Document the step-by-step authorization code grant type used in most web applications. This sequence diagram is valuable during security reviews, when explaining auth architecture to auditors, or when onboarding developers to a project with OAuth integration.

sequenceDiagram
    participant User
    participant Browser
    participant App as App Server
    participant AuthZ as Auth Server
    participant API as Resource API

    User->>Browser: Click "Login"
    Browser->>AuthZ: GET /authorize?response_type=code
    AuthZ->>Browser: Show login page
    User->>AuthZ: Enter credentials
    AuthZ->>Browser: Redirect with auth code
    Browser->>App: GET /callback?code=abc123
    App->>AuthZ: POST /token (code + client_secret)
    AuthZ->>App: Access token + refresh token
    App->>API: GET /resource (Bearer token)
    API->>App: Protected data
    App->>Browser: Render page

Try it in Editor

API Threat Model

Identify attack surfaces and potential threats against a REST API. Threat model diagrams are a key artifact in security design reviews, penetration test scoping, and compliance documentation for frameworks like SOC 2 or ISO 27001.

flowchart TD
    Attacker[Threat Actor] --> |Injection| API[API Endpoint]
    Attacker --> |DDoS| LB[Load Balancer]
    Attacker --> |Credential Stuffing| Auth[Auth Layer]

    API --> |SQL Injection| DB[(Database)]
    API --> |SSRF| Internal[Internal Services]
    Auth --> |Brute Force| Tokens[Token Store]

    subgraph Mitigations
        WAF[Web App Firewall]
        RateLimit[Rate Limiting]
        InputVal[Input Validation]
        Encryption[TLS + Encryption]
    end

    LB --> WAF --> API
    API --> InputVal
    Auth --> RateLimit
    DB --> Encryption

Try it in Editor

DevOps

CI/CD pipelines, deployment architectures, and infrastructure diagrams.

CI/CD Pipeline

Visualize the complete delivery pipeline from code commit to production deployment. This diagram type is frequently used in DevOps runbooks, new hire onboarding docs, and architecture decision records that document how code reaches production.

flowchart LR
    Dev[Developer] --> |git push| Repo[GitHub Repo]
    Repo --> |webhook| CI[CI Server]

    subgraph CI Pipeline
        CI --> Lint[Lint & Format]
        Lint --> Test[Unit Tests]
        Test --> SAST[Security Scan]
        SAST --> Build[Docker Build]
    end

    Build --> Registry[Container Registry]
    Registry --> Staging[Deploy to Staging]
    Staging --> IntTest[Integration Tests]
    IntTest --> |Approve| Prod[Deploy to Production]

    subgraph Monitoring
        Prod --> Metrics[Prometheus]
        Prod --> Logs[ELK Stack]
        Prod --> Alerts[PagerDuty]
    end

Try it in Editor

Want to explore more?

The SimpleMermaid editor includes 45+ built-in examples covering every Mermaid.js diagram type. Open the editor and browse the examples dropdown, or check out the Use Cases guide for scenario-based recommendations.

Open the Editor