C4 Container Diagram
C4 model — container view with users, systems and external integrations.
Rendering…
Make it your own.
{
"nodes": [
{ "id":"u","type":"user","label":"Customer","x":40,"y":160 },
{ "id":"box","type":"container","label":"SaaS platform","x":200,"y":40,"w":620,"h":380 },
{ "id":"web","type":"rect","label":"Web App\n(Next.js)","x":240,"y":100,"fill":"#dbeafe" },
{ "id":"api","type":"rect","label":"API\n(Node.js)","x":480,"y":100,"fill":"#dbeafe" },
{ "id":"db","type":"database","label":"Postgres","x":700,"y":100 },
{ "id":"cache","type":"database","label":"Redis","x":700,"y":260,"fill":"#fce7f3" },
{ "id":"worker","type":"server","label":"Worker","x":480,"y":260 },
{ "id":"queue","type":"parallelogram","label":"SQS","x":300,"y":260 },
{ "id":"stripe","type":"cloud","label":"Stripe","x":900,"y":80 },
{ "id":"ses","type":"cloud","label":"SES email","x":900,"y":260 }
],
"edges": [
{ "id":"a","source":"u","target":"web","label":"HTTPS" },
{ "id":"b","source":"web","target":"api","label":"REST" },
{ "id":"c","source":"api","target":"db" },
{ "id":"d","source":"api","target":"cache" },
{ "id":"e","source":"api","target":"queue" },
{ "id":"f","source":"queue","target":"worker" },
{ "id":"g","source":"worker","target":"stripe","style":"dashed" },
{ "id":"h","source":"worker","target":"ses","style":"dashed" }
]
}