Cloudflare · Open source · No account required

Cloudflare architecture diagrams as code.

Draw Workers, R2, D1, Durable Objects, Tunnel, Access, WAF and the rest of your Cloudflare setup from plain text. ArchLex recognizes 92 Cloudflare resources and connects them to origins on AWS, Google Cloud or Kubernetes.

Try it in the playground Cloudflare pack guide

Cloudflare Public Edge to AWS.

Cloudflare DNS, load balancing and WAF capabilities forwarding HTTPS requests to an AWS ALB.

provider cloudflare
direction LR
account cloudflare-production {
  domain: cloudflare.dns["app.example.com"]
  entry: cloudflare.load-balancing["Cloudflare entry point"]
  protection: cloudflare.waf["WAF policy"]
  domain ->|DNS record selects entry point| entry
  protection -[protects]-> entry
}
account aws-production {
  region us-east-1 {
    vpc application {
      subnet public {
        origin: aws.alb["AWS origin"]
      }
    }
  }
}
entry -[proxies]->|HTTPS origin request| origin

See this example in the gallery

Why write Cloudflare diagrams as code?

Edge and origin in one picture. Qualified kinds such as cloudflare.workers, aws.alb and gcp.cloud-run let one diagram show the Cloudflare edge and the origins behind it.
Placement that matches Cloudflare. Cloudflare resources belong at the document root or in a logical account. Putting one inside a region, VPC, subnet, cluster or namespace reports CLOUDFLARE-CONTAINMENT-001 with a fix.
A curated catalog. 92 resources cover compute, storage, AI, networking, security and observability, from Workers and Queues to Access, Gateway and Turnstile.
Bundled product artwork. Icons are bundled from the Cloudflare documentation icon directory under CC BY 4.0, with attribution kept in exported SVG. No CDN request is needed to render.

More Cloudflare architecture examples.

Each example passes ArchLex provider checks and opens in the playground. Browse all examples.

Let your AI agent draw it.

Install the ArchLex skill or connect the MCP server, then ask Claude, Cursor, or Codex to diagram your Cloudflare setup. The agent writes the source, ArchLex validates it, and you get back an SVG.

Agent skill install

npx skills add baires/archlex

Prefer MCP? Follow the MCP server guide.

Render from the command line.

Save the source as a .arch file and render it with the CLI, or call @archlex/core from Node.js or the browser.

npx @archlex/cli render cloudflare-aws-public-edge.arch --output cloudflare-aws-public-edge.svg

Cloudflare diagram questions.

Which Cloudflare products can I draw?

ArchLex recognizes 92 curated Cloudflare resources, including Workers, Pages, R2, D1, KV, Durable Objects, Queues, Workers AI, Tunnel, Access, Gateway, WAF, DNS and Load Balancing. Every ID also has a qualified alias such as cloudflare.workers.

Does ArchLex verify my Cloudflare configuration?

No. It checks explicit placement in the diagram. The graph contains no DNS records, policy configuration or observed health, so it does not verify connectivity, WAF or Access effectiveness, or failover.

Is ArchLex affiliated with Cloudflare?

No. ArchLex is a community project and is not sponsored, endorsed or maintained by Cloudflare. Cloudflare names and trademarks remain with their owners.

Can an AI agent draw Cloudflare diagrams with ArchLex?

Yes. Install the agent skill with npx skills add baires/archlex, or connect the free hosted MCP server at https://mcp.archlex.dev/mcp. Claude Code, Cursor, Codex and other MCP clients can look up Cloudflare resources, validate the source, render SVG and return an editable playground link. No API key or account is required.

Cloudflare service architecture diagrams.

Focused pages for high-search services, each with validated ArchLex source and SVG.

Cloudflare Workers architecture diagram

Other clouds.

Mix providers in one diagram when your architecture does.

Open source · MIT licensed

Diagram your Cloudflare architecture.

Open playground Get started