Sample web app
Three tiers on AWS
AWS us-west-2
sg-api · :443 / :8000
Users
Browser and mobile
Auth provider
OAuth 2.0
CloudFront
CDN
Load balancer
HTTPS
:443
API server
FastAPI
:8000
Redis
Read-through cache
:6379
PostgreSQL
Primary
:5432
S3
Static assets
SQS
Job queue
Worker
Async jobs
HTTPS
static
verify JWT
read-through
SQL
enqueue
diagram.html#The link keeps the view, selection, route and playback.
About this diagram
Components and what they call: services, stores and the infrastructure between them.
Ask for one like it
Make an architecture diagram of this repository, backed by evidence from the code.
The JSON
{ "kind": "architecture", "density": "compact", "title": "Sample web app", "subtitle": "Three tiers on AWS", "direction": "RIGHT", "groups": [ { "id": "region", "label": "AWS us-west-2" }, { "id": "sg-api", "label": "sg-api · :443 / :8000", "parent": "region", "tone": "security" } ], "nodes": [ { "id": "users", "type": "client", "card": { "title": "Users", "subtitle": "Browser and mobile" } }, { "id": "auth", "type": "security", "card": { "title": "Auth provider", "subtitle": "OAuth 2.0" } }, { "id": "cdn", "type": "gateway", "group": "region", "card": { "title": "CloudFront", "subtitle": "CDN" } }, { "id": "lb", "type": "gateway", "group": "sg-api", "card": { "title": "Load balancer", "subtitle": "HTTPS", "tag": ":443" } }, { "id": "api", "type": "service", "group": "sg-api", "card": { "title": "API server", "subtitle": "FastAPI", "brand": "fastapi", "tag": ":8000" } }, { "id": "cache", "type": "cache", "group": "region", "card": { "title": "Redis", "subtitle": "Read-through cache", "brand": "redis", "tag": ":6379" } }, { "id": "db", "type": "database", "group": "region", "card": { "title": "PostgreSQL", "subtitle": "Primary", "brand": "postgresql", "tag": ":5432" } }, { "id": "s3", "type": "storage", "group": "region", "card": { "title": "S3", "subtitle": "Static assets" } }, { "id": "queue", "type": "queue", "group": "region", "card": { "title": "SQS", "subtitle": "Job queue" } }, { "id": "worker", "type": "service", "group": "region", "card": { "title": "Worker", "subtitle": "Async jobs" } } ], "edges": [ { "id": "e1", "from": "users", "to": "cdn", "label": "HTTPS", "tone": "main" }, { "id": "e2", "from": "cdn", "to": "lb", "tone": "main" }, { "id": "e3", "from": "cdn", "to": "s3", "label": "static", "kind": "async" }, { "id": "e4", "from": "lb", "to": "api", "tone": "main" }, { "id": "e5", "from": "auth", "to": "api", "label": "verify JWT", "tone": "security" }, { "id": "e6", "from": "api", "to": "cache", "label": "read-through" }, { "id": "e7", "from": "api", "to": "db", "label": "SQL", "tone": "main" }, { "id": "e8", "from": "api", "to": "queue", "label": "enqueue", "kind": "async" }, { "id": "e9", "from": "queue", "to": "worker" } ], "notes": [ { "title": "Edge", "items": [ "CloudFront fronts all traffic", "S3 serves static assets" ] }, { "title": "Security", "items": [ "OAuth 2.0 with JWT and PKCE", "API and load balancer isolated in a security group" ] } ]}More architecture examples
All examples- Production deployment ownershipArchitecture12 nodes
- Food Delivery PlatformArchitecture16 nodesWritten by an agent“Draw our food-delivery platform. Customers use an iOS app and a React web app. Both go through an API gateway (Kong) to four services: accounts, restaurants, orders and a dispatch service that assigns couriers. Orders and accounts use a shared Postgres cluster (one primary, two read replicas); restaurants has its own MongoDB. Orders publishes events to Kafka; dispatch and a notifications worker consume them. Notifications sends push through Firebase and SMS through Twilio. Sessions and rate limits live in Redis. Payments go from orders to Stripe. Auth is Auth0. Add a view for the order path.”
- Production VPCArchitecture9 nodesWritten by an agent“Turn this Mermaid into a stackmap diagram.”
- BookshopArchitecture10 nodesWritten by an agent“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.”