Examples / AI

How do you diagram a Cloudflare Workers architecture?

Updated

Browser -> Pages -> Workers -> |KV, R2, D1| with a Workers -> Browser return line. Chartado draws Cloudflare icons for Pages, Workers, KV, R2 and D1, and the |…| choice animates the Worker reaching a different store on each pass: key-value, object storage or SQL, depending on the request.
Cloudflare Workers Architecture Diagram: Pages, KV, R2 and D1. The whole application runs at the edge, and the stores are a choice, not a broadcast. Services drawn: Browser, Pages, Workers, KV, R2, D1.
A still of the animation above. Every export embeds the diagram source.

THE TEXT THAT DRAWS IT

Browser -> Pages -> Workers -> |KV, R2, D1|
Workers -> Browser

Edit it in the box above and the diagram redraws as you type. Export it as an animated GIF, WebM or WebP, or a still PNG. Every format embeds this text, so the file can be read back into the editor.

WHAT IT SHOWS

This is the shape of a full application on Cloudflare’s developer platform. The Browser loads the static half from Pages, the dynamic half runs in Workers, and each request touches one of three stores: KV for config and sessions, R2 for objects, D1 for relational data.

The pipes carry the argument. A Worker does not fan out to every store on every request; it reads the one the request needs. Watch two passes of the animation and a different branch lights each time, which is the round-robin a choice plays. Braces would draw a broadcast, and that is the most common way an edge-architecture diagram overstates what a request costs.

The second line is the reply. Workers -> Browser retraces the route back through Pages rather than drawing one long arrow home, so the outbound request finishes before the response starts its way back. Order is the thing an edge diagram most needs to show, because the entire pitch of this platform is what happens between those two passes.

What the diagram cannot claim: geography. Workers run in hundreds of locations and this drawing has no way to say so. Every box here exists once, while the real deployment exists everywhere. The animation shows the request’s order, not its distance. If the reason you chose Cloudflare is the map, no flow diagram will show you the map.

Also not drawn: a Durable Object coordinating stateful work, and a Cloudflare Tunnel reaching back into private infrastructure. Both have icons and both draw. They are left out because this page shows the request path of the common case, and the common case is stateless.

QUESTIONS

Why are KV, R2 and D1 a choice rather than a broadcast?
A real request touches the store it needs, not all three. The |KV, R2, D1| choice plays one store per pass, which is how the application actually behaves.
Does Workers conflict with Lambda workers in the AWS icon set?
No. Cloudflare terms are matched first and matching is whole-word, so Workers gets the Cloudflare icon while Lambda Worker still resolves to the AWS Lambda icon.

Also on this site: Serverless REST API diagram, Pub/sub fan-out diagram, Queue worker diagram, Event pipeline diagram, RAG pipeline diagram, Multi-agent router diagram, ReAct tool-calling diagram, Human-in-the-loop diagram and MCP architecture diagram. See all 10 patterns.

Chartado is a text-to-diagram tool: you type lines like A -> B, it draws the architecture and animates the flow.