A service grows a gateway

A flow diff. The API server becomes a gateway, the mail sender goes, and a cache, a job queue, an email worker and an SMTP relay join; the unchanged boxes keep their rows and their order.

The API server becomes a gateway, the mail sender goes, and a cache, a job queue, an email worker and an SMTP relay join; the unchanged boxes keep their rows and their order

                          ┌────────────┐
                          │ Web Client │
                          └────────────┘
                                 │
                                 │
                                 ▼
                        ┌────────────────┐
                        │ Load Balancer  │
                        └────────────────┘
                                 │
                                 │
                                 ▼
                        ┌────────────────┐
                        │ ~ API Gateway  │
                        └────────────────┘
                          │  │   │  │  │
                          │  │   │  │  │
          ┌───────────────┘  │   │  │  └────────────────────────────────────────────────┐
          │                  │   │  └─────────────────────────────┐                     │
          │                  │   └──────────┐                     │                     │
          ▼                  │              ▼                     ▼                     ▼
  ┌──────────────┐           │     ╒════════════════╕     ┌──────────────┐     ┌────────────────┐
  │ Auth Service │           │     │ + Redis Cache  │     │ + Job Queue  │     │ - Mail Sender  │
  └──────────────┘           │     └────────────────┘     └──────────────┘     └────────────────┘
          │                  │                                    │
          │                  │                                    │
          └─────────────┐    │                                    │
                        ▼    ▼                                    ▼
                     ╒══════════╕                        ┌────────────────┐
                     │ Postgres │                        │ + Email Worker │
                     └──────────┘                        └────────────────┘
                                                                  │
                                                                  │
                                                                  ▼
                                                          ┌──────────────┐
                                                          │ + SMTP Relay │
                                                          └──────────────┘

flow-service-v1.json → flow-service-v2.json
added: node Redis Cache
added: node Job Queue
added: node Email Worker
added: node SMTP Relay
added: edge API Gateway -> Redis Cache
added: edge API Gateway -> Job Queue
added: edge Job Queue -> Email Worker
added: edge Email Worker -> SMTP Relay
removed: node Mail Sender
removed: edge API Server -> Mail Sender
changed: node API Gateway: label "API Server" → "API Gateway"

The version before the change: Web Client, Load Balancer, API Server, Auth Service, Postgres and Mail Sender. — Before

The version after the change: Web Client, Load Balancer, API Gateway, Auth Service, Postgres, Redis Cache, Job Queue, Email Worker and SMTP Relay. — After

Spec

{
  "type": "flow",
  "direction": "DOWN",
  "nodes": [
    {"id": "client", "label": "Web Client"},
    {"id": "lb", "label": "Load Balancer"},
    {"id": "api", "label": "API Server"},
    {"id": "auth", "label": "Auth Service"},
    {"id": "db", "label": "Postgres", "shape": "cylinder"},
    {"id": "mail", "label": "Mail Sender"}
  ],
  "edges": [
    {"from": "client", "to": "lb"},
    {"from": "lb", "to": "api"},
    {"from": "api", "to": "auth"},
    {"from": "api", "to": "db"},
    {"from": "auth", "to": "db"},
    {"from": "api", "to": "mail"}
  ]
}

{
  "type": "flow",
  "direction": "DOWN",
  "nodes": [
    {"id": "client", "label": "Web Client"},
    {"id": "lb", "label": "Load Balancer"},
    {"id": "api", "label": "API Gateway"},
    {"id": "auth", "label": "Auth Service"},
    {"id": "db", "label": "Postgres", "shape": "cylinder"},
    {"id": "cache", "label": "Redis Cache", "shape": "cylinder"},
    {"id": "queue", "label": "Job Queue"},
    {"id": "worker", "label": "Email Worker"},
    {"id": "smtp", "label": "SMTP Relay"}
  ],
  "edges": [
    {"from": "client", "to": "lb"},
    {"from": "lb", "to": "api"},
    {"from": "api", "to": "auth"},
    {"from": "api", "to": "db"},
    {"from": "auth", "to": "db"},
    {"from": "api", "to": "cache"},
    {"from": "api", "to": "queue"},
    {"from": "queue", "to": "worker"},
    {"id": "worker-out", "from": "worker", "to": "smtp"}
  ]
}

Draw it yourself

diago diff service-change.v1.json service-change.v2.json > service-change.diff.svg

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