Playground

DrawDiff

{
  "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"]}
  ]
}