E-commerce checkout

A flow diagram. Web and mobile clients through an API gateway to the catalog, cart and order services.

                            ┌─ Clients ───────────────────────────────┐
                            │                                         │
                            │  ╭────────────────╮     ╭────────────╮  │
                            │  │ Web Storefront │     │ Mobile App │  │
                            │  ╰────────────────╯     ╰────────────╯  │
                            └───────────┼────────────────────┼────────┘
                                        │ HTTPS              │ HTTPS
                                        │                    │
                                        └───────┐    ┌───────┘
                                                ▼    ▼
                                           ┌──────────────┐
                                           │ API Gateway  │
                                           └──────────────┘
                                              │    │   │
                                              │    │   │
                           ┌──────────────────┘    │   └──────────────────┐
                           │                       │                      │
  ┌─ Services ─────────────┼───────────────────────┼──────────────────────┼─────────┐
  │                        ▼                       ▼                      ▼         │
  │               ┌────────────────┐     ┌──────────────────┐     ┌──────────────┐  │
  │               │ Order Service  │     │ Catalog Service  │     │ Cart Service │  │
  │               └────────────────┘     └──────────────────┘     └──────────────┘  │
  │             charge │      │                    │                      │         │
  │                    │      │                    │                      │         │
  │            ┌───────┘      │                    │                      │         │
  │            ▼              │                    │                      │         │
  │  ┌──────────────────┐     │                    │                      │         │
  │  │ Payment Service  │     │                    │                      │         │
  │  └──────────────────┘     │                    │                      │         │
  └────────────┼──────────────┼────────────────────┼──────────────────────┼─────────┘
               ╎              │                    │                      │
               ╎ API          │                    │                      │
               ╎              └────────────┐    ┌──┘           ┌──────────┘
               ▼                           │    │              │
     ╭──────────────────╮           ┌──────┼────┼──── Data ────┼──────┐
     │ Payment Provider │           │      ▼    ▼              ▼      │
     ╰──────────────────╯           │  ╒════════════╕     ╒════════╕  │
                                    │  │ PostgreSQL │     │ Redis  │  │
                                    │  └────────────┘     └────────┘  │
                                    └─────────────────────────────────┘

Spec

JSON

{
  "type": "flow",
  "direction": "DOWN",
  "nodes": [
    {"id": "web", "label": "Web Storefront", "shape": "rounded"},
    {"id": "mobile", "label": "Mobile App", "shape": "rounded"},
    {"id": "gateway", "label": "API Gateway", "shape": "hexagon"},
    {"id": "catalog", "label": "Catalog Service"},
    {"id": "cart", "label": "Cart Service"},
    {"id": "orders", "label": "Order Service"},
    {"id": "payments", "label": "Payment Service", "color": "orange"},
    {"id": "provider", "label": "Payment Provider", "shape": "rounded", "color": "gray"},
    {"id": "postgres", "label": "PostgreSQL", "shape": "cylinder"},
    {"id": "redis", "label": "Redis", "shape": "cylinder", "color": "red"}
  ],
  "edges": [
    {"id": "e-web-gateway", "from": "web", "to": "gateway", "label": "HTTPS"},
    {"id": "e-mobile-gateway", "from": "mobile", "to": "gateway", "label": "HTTPS"},
    {"id": "e-gateway-catalog", "from": "gateway", "to": "catalog"},
    {"id": "e-gateway-cart", "from": "gateway", "to": "cart"},
    {"id": "e-gateway-orders", "from": "gateway", "to": "orders"},
    {"id": "e-orders-payments", "from": "orders", "to": "payments", "label": "charge"},
    {
      "id": "e-payments-provider",
      "from": "payments",
      "to": "provider",
      "label": "API",
      "style": "dashed"
    },
    {"id": "e-catalog-postgres", "from": "catalog", "to": "postgres"},
    {"id": "e-orders-postgres", "from": "orders", "to": "postgres"},
    {"id": "e-cart-redis", "from": "cart", "to": "redis"}
  ],
  "groups": [
    {"id": "clients", "label": "Clients", "contains": ["web", "mobile"]},
    {"id": "services", "label": "Services", "contains": ["catalog", "cart", "orders", "payments"]},
    {"id": "data", "label": "Data", "contains": ["postgres", "redis"]}
  ]
}

Draw it yourself

diago render ecommerce-checkout.json > ecommerce-checkout.svg

Open it in the playground to edit it in your browser.