Skip to content
Weave templates

System Context

User → Web App → API → Database with an external 3rd-party service.

Template previewWeave
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" }
  ]
}