Flowchart

API Gateway Service Flow

Visualize a styled API gateway flow with rate limits, auth, route resolution, services, databases, and providers.

Edit this template Browse all templates

Use Cases

Document API gateway behavior for platform teams

Explain request rejection paths such as 429 and 401 responses

Map service dependencies across databases and external providers

Review which services depend on payment, email, push, or data storage providers

How This Workflow Works

Step	Purpose
Client app	Starts the request from a frontend, mobile app, integration, or other API consumer.
Rate limit check	Rejects abusive or over-quota traffic before it reaches auth or domain services.
Auth middleware	Separates invalid requests from valid requests before routing to internal services.
Route resolver	Chooses the correct service boundary for user, order, payment, or notification work.
Downstream services	Shows how services connect to databases and external providers to complete the request.

How To Customize

Replace the service nodes with your bounded contexts

Update the error branches to match your gateway response policy

Add provider nodes for queues, billing, email, storage, or analytics

Add retry, circuit breaker, or dead-letter paths for unreliable downstream systems

Use class definitions to make internal services, external APIs, and errors visually distinct

Edit This Template Visually

Open this template in the editor to work from the rendered diagram and the Mermaid source together. Click a node in supported flowchart and sequence diagrams to locate the matching code, select source lines to find the related shape, or ask AI to rename, expand, restyle, or rewrite the selected part of the workflow.

Mermaid Source

%%{init: {
  "theme": "base",
  "flowchart": {
    "curve": "basis",
    "htmlLabels": true,
    "nodeSpacing": 50,
    "rankSpacing": 70
  },
  "themeVariables": {
    "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
    "fontSize": "15px",
    "primaryTextColor": "#172033",
    "lineColor": "#8A94A6"
  }
}}%%

flowchart TD

    Client["Client App"]:::client
    Gateway["API Gateway"]:::gateway

    RateLimit{"Rate Limit<br/>Check"}:::decision
    Auth{"Auth<br/>Middleware"}:::decision
    Router["Route Resolver"]:::router

    R429["429<br/>Too Many Requests"]:::error
    R401["401<br/>Unauthorized"]:::error

    UserSvc["User Service"]:::service
    OrderSvc["Order Service"]:::service
    PaymentSvc["Payment Service"]:::service
    NotifSvc["Notification Service"]:::service

    UserDB[("Users DB")]:::database
    OrderDB[("Orders DB")]:::database
    PayDB[("Payments DB")]:::database

    Stripe["Stripe API"]:::external
    Email["Email Provider"]:::external
    Push["Push Notifications"]:::external

    Client --> Gateway
    Gateway --> RateLimit

    RateLimit -->|Exceeded| R429
    RateLimit -->|OK| Auth

    Auth -->|Invalid| R401
    Auth -->|Valid| Router

    Router --> UserSvc
    Router --> OrderSvc
    Router --> PaymentSvc
    Router --> NotifSvc

    UserSvc --> UserDB
    OrderSvc --> OrderDB

    PaymentSvc --> Stripe
    PaymentSvc --> PayDB

    NotifSvc --> Email
    NotifSvc --> Push

    classDef client fill:#EAF2FF,stroke:#3B82F6,stroke-width:2px,color:#0F2A5F;
    classDef gateway fill:#EEF6FF,stroke:#2563EB,stroke-width:2px,color:#123C69;
    classDef decision fill:#FFF4D6,stroke:#F59E0B,stroke-width:2px,color:#4A3000;
    classDef router fill:#F1EAFE,stroke:#8B5CF6,stroke-width:2px,color:#32146B;

    classDef service fill:#F5EDFF,stroke:#A855F7,stroke-width:2px,color:#3B0764;
    classDef database fill:#E9F9EF,stroke:#22C55E,stroke-width:2px,color:#064E3B;
    classDef external fill:#E6FAFA,stroke:#14B8A6,stroke-width:2px,color:#064E4F;
    classDef error fill:#FFE8E8,stroke:#EF4444,stroke-width:2px,color:#7F1D1D,font-weight:bold;

    linkStyle default stroke:#7C8798,stroke-width:1.8px;