3-tier web app (with cache + DB)
Browser → web → app → cache + Postgres. Real cylinders for DB / cache, cloud for CDN.
Rendering…
Make it your own.
{
"nodes": [
{ "id":"u","type":"ellipse","label":"Browser","x":40,"y":180,"fill":"#dbeafe","stroke":"#2563eb" },
{ "id":"cdn","type":"cloud","label":"CDN","x":240,"y":40,"fill":"#e0f2fe","stroke":"#0369a1" },
{ "id":"lb","type":"hexagon","label":"Load balancer","x":240,"y":180,"fill":"#fef3c7","stroke":"#a16207" },
{ "id":"w1","type":"rect","label":"Web 1","x":480,"y":80,"fill":"#dbeafe","stroke":"#2563eb" },
{ "id":"w2","type":"rect","label":"Web 2","x":480,"y":180,"fill":"#dbeafe","stroke":"#2563eb" },
{ "id":"w3","type":"rect","label":"Web 3","x":480,"y":280,"fill":"#dbeafe","stroke":"#2563eb" },
{ "id":"app","type":"rect","label":"App tier","x":720,"y":180,"fill":"#ede9fe","stroke":"#6d28d9" },
{ "id":"cache","type":"cylinder","label":"Redis","x":960,"y":80,"fill":"#fee2e2","stroke":"#b91c1c" },
{ "id":"db","type":"cylinder","label":"Postgres (HA)","x":960,"y":280,"fill":"#fef3c7","stroke":"#a16207" },
{ "id":"note","type":"callout","label":"Write-through cache","x":1200,"y":80,"fill":"#fef9c3" }
],
"edges": [
{ "id":"e1","source":"u","target":"cdn","label":"static" },
{ "id":"e2","source":"u","target":"lb" },
{ "id":"e3","source":"lb","target":"w1" },
{ "id":"e4","source":"lb","target":"w2" },
{ "id":"e5","source":"lb","target":"w3" },
{ "id":"e6","source":"w1","target":"app" },
{ "id":"e7","source":"w2","target":"app" },
{ "id":"e8","source":"w3","target":"app" },
{ "id":"e9","source":"app","target":"cache" },
{ "id":"e10","source":"app","target":"db" },
{ "id":"e11","source":"note","target":"cache" }
]
}