System Context
User → Web App → API → Database with an external 3rd-party service.
Rendering…
Make it your own.
{
"nodes": [
{ "id": "vpc", "type": "container", "label": "Cloud Platform · VPC", "x": 150, "y": 0, "width": 900, "height": 470, "fill": "rgba(241,245,249,0.4)", "stroke": "#475569" },
{ "id": "pub", "type": "container", "label": "Public subnet", "x": 300, "y": 60, "width": 290, "height": 380, "fill": "rgba(220,252,231,0.16)", "stroke": "#15803d" },
{ "id": "prv", "type": "container", "label": "Private subnet", "x": 640, "y": 60, "width": 380, "height": 380, "fill": "rgba(219,234,254,0.16)", "stroke": "#1d4ed8" },
{ "id": "users", "type": "icon", "iconId": "mdi:account-group", "label": "Users", "x": 20, "y": 200, "fill": "transparent" },
{ "id": "cdn", "type": "cloud", "label": "CloudFront CDN", "x": 160, "y": 205, "fill": "#e0f2fe", "stroke": "#0369a1" },
{ "id": "lb", "type": "icon", "iconId": "mdi:scale-balance", "label": "Load Balancer", "x": 330, "y": 120, "fill": "transparent" },
{ "id": "api", "type": "icon", "iconId": "mdi:api", "label": "API Gateway", "x": 460, "y": 120, "fill": "transparent" },
{ "id": "web", "type": "icon", "iconId": "mdi:application", "label": "Web App", "x": 395, "y": 300, "fill": "transparent" },
{ "id": "svc", "type": "icon", "iconId": "mdi:cog", "label": "App Service", "x": 670, "y": 120, "fill": "transparent" },
{ "id": "db", "type": "icon", "iconId": "mdi:database", "label": "Database", "x": 880, "y": 120, "fill": "transparent" },
{ "id": "cache", "type": "icon", "iconId": "mdi:memory", "label": "Cache", "x": 670, "y": 300, "fill": "transparent" },
{ "id": "queue", "type": "icon", "iconId": "mdi:tray-full", "label": "Queue", "x": 880, "y": 300, "fill": "transparent" }
],
"edges": [
{ "id": "e1", "source": "users", "target": "cdn", "label": "HTTPS" },
{ "id": "e2", "source": "cdn", "target": "lb" },
{ "id": "e3", "source": "lb", "target": "api" },
{ "id": "e4", "source": "api", "target": "web" },
{ "id": "e5", "source": "web", "target": "svc" },
{ "id": "e6", "source": "svc", "target": "db" },
{ "id": "e7", "source": "svc", "target": "cache" },
{ "id": "e8", "source": "svc", "target": "queue", "style": "dashed" }
]
}