stackmapstackmap
Install

Bookshop

Web storefront and order pipeline

Architecture10 nodes · 10 connectionsWritten by an agent

diagram.html#The link keeps the view, selection, route and playback.

What the agent was asked

“Update the bookshop diagram: we added a search service (search-api) that the shop API queries over HTTP, backed by Elasticsearch. Put Stripe into a new 'Third parties' group, and add search to the checkout path view since the storefront uses it before buying.”

Written by a coding agent in the skill’s eval: it read the request, wrote the JSON, validated it and delivered the file.

Read about architecture diagrams

The JSON

bookshop/diagram.json171 lines
{  "kind": "architecture",  "title": "Bookshop",  "subtitle": "Web storefront and order pipeline",  "direction": "DOWN",  "groups": [    { "id": "edge", "label": "Edge" },    { "id": "app", "label": "App tier" },    { "id": "data", "label": "Data tier" },    { "id": "third-parties", "label": "Third parties" }  ],  "nodes": [    {      "id": "web",      "type": "client",      "card": {        "title": "Storefront",        "subtitle": "Next.js",        "brand": "nextdotjs"      }    },    {      "id": "cdn",      "type": "gateway",      "group": "edge",      "card": {        "title": "CDN",        "subtitle": "Cloudflare",        "brand": "cloudflare"      }    },    {      "id": "api",      "type": "service",      "group": "app",      "card": {        "title": "shop-api",        "subtitle": "REST API · Node.js",        "brand": "nodedotjs",        "rows": [          { "label": "Instances", "value": "3" },          { "label": "Port", "value": ":8080", "mono": true }        ],        "footer": {          "left": { "text": "eu-west-1", "icon": "region" },          "right": { "text": "HTTPS", "icon": "secure" }        }      },      "evidence": [        {          "file": "services/api/src/server.ts",          "line": 12,          "note": "Express app and routes"        }      ]    },    {      "id": "worker",      "type": "service",      "group": "app",      "card": { "title": "order-worker", "subtitle": "Fulfilment jobs" }    },    {      "id": "jobs",      "type": "queue",      "group": "app",      "card": {        "title": "jobs",        "subtitle": "RabbitMQ",        "brand": "rabbitmq"      }    },    {      "id": "search-api",      "type": "service",      "group": "app",      "card": { "title": "search-api", "subtitle": "Search service" }    },    {      "id": "elasticsearch",      "type": "database",      "group": "data",      "card": {        "title": "Elasticsearch",        "subtitle": "Search index",        "brand": "elasticsearch"      }    },    {      "id": "db",      "type": "database",      "group": "data",      "card": {        "title": "Orders DB",        "subtitle": "PostgreSQL",        "brand": "postgresql",        "stats": [          { "value": "1", "label": "Primary" },          { "value": "2", "label": "Replicas" }        ],        "statsNote": "Streaming replication"      }    },    {      "id": "cache",      "type": "cache",      "group": "data",      "card": {        "title": "Sessions",        "subtitle": "Redis",        "brand": "redis"      }    },    {      "id": "stripe",      "type": "external",      "group": "third-parties",      "card": {        "title": "Stripe",        "subtitle": "Payments API",        "brand": "stripe"      }    }  ],  "edges": [    { "id": "web-cdn", "from": "web", "to": "cdn", "label": "HTTPS" },    { "id": "cdn-api", "from": "cdn", "to": "api" },    { "id": "api-db", "from": "api", "to": "db" },    { "id": "api-cache", "from": "api", "to": "cache" },    {      "id": "api-jobs",      "from": "api",      "to": "jobs",      "kind": "async",      "label": "enqueue"    },    {      "id": "jobs-worker",      "from": "jobs",      "to": "worker",      "kind": "async"    },    { "id": "worker-db", "from": "worker", "to": "db" },    { "id": "api-stripe", "from": "api", "to": "stripe" },    {      "id": "api-search",      "from": "api",      "to": "search-api",      "label": "HTTP"    },    {      "id": "search-elasticsearch",      "from": "search-api",      "to": "elasticsearch"    }  ],  "views": [    {      "id": "checkout",      "label": "Checkout path",      "caption": "What a purchase touches",      "nodes": ["web", "cdn", "api", "search-api", "stripe", "db"]    },    {      "id": "state",      "label": "State",      "caption": "Where data lives",      "nodes": ["db", "cache", "jobs"]    }  ]}

More architecture examples

All examples