AWS Cloud Architecture — Reladraw template

云上三层 Web 应用. Copy the source, paste into the official playground, done. No coordinates — every position is stated relative to something else.

Preview

Users CloudFront ALB web-1 web-2 RDS https

Source (.reladraw)

node users "Users"
node cf "CloudFront"  below users
node alb "ALB"  below cf
node web1 "web-1"  below-left of alb
node web2 "web-2"  below-right of alb
node rds "RDS"  below web1  level with web2
edge users -> cf "https"
edge cf -> alb
edge alb -> web1
edge alb -> web2
edge web1 -> rds  from: bottom  to: top
edge web2 -> rds  from: bottom  to: top

How to use

  1. Open the Reladraw playground
  2. Paste the source above — the diagram re-solves live
  3. Export SVG from the playground, or render locally: npx reladraw aws-architecture.reladraw -o out.svg

When to use this template

An AWS architecture diagram is the first thing a reviewer asks for: security audits, cost reviews, onboarding docs. This template shows the classic edge-to-database path — CDN, load balancer, two app servers, one database — which covers most three-tier web apps.

Use it when you need a clean picture of how traffic flows through your AWS setup, or when documenting a compliance boundary.

How to customize

  1. Rename to your real components. Edit the quoted labels: node cf "CloudFront" becomes node cf "CloudFront + WAF" — the node id stays, only the label changes.
  2. Add a second availability zone. Copy the two web lines and shift one pair down: node web3 "web-3" below web1 level with web2, then wire edge alb -> web3.
  3. Show the read replica. Add node rds-ro "RDS replica" right of rds and edge rds -> rds-ro "replication" — placement stays correct automatically.

FAQ

How do I draw an AWS diagram in Reladraw?

Declare each AWS component as a node with a label, then state where each one sits relative to its neighbor (below, right of). Connect them with edge statements. The template on this page is a working three-tier example you can paste directly into the playground.

Does Reladraw have built-in AWS icons?

Not yet. The common convention is short labels like ALB, RDS, CF inside plain nodes. If you need official icons, export the SVG and swap shapes in a vector editor — the layout will not break because positions are already solved.

Can I show multiple VPCs in one diagram?

Yes. Give nodes compound ids like pub.alb and priv.app to group them into visual containers, and place clusters against each other. See the VPC network zones template for a worked example.

Related templates

Kubernetes ClusterMicroservices ArchitectureDatabase ER Diagram