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.

About this page

Maintained by the Reladraw Templates gallery — an independent, free community resource. Sources are verified against the official Reladraw repository before publishing. Found an issue? Report it and it gets fixed.

Multi-AZ VPN variant

Same three-tier shape, but the entry path is a site-to-site VPN through a Transit Gateway with two availability zones and a replicated database pair.

On-Prem Clients Site-to-Site VPN Transit Gateway app-az1 app-az2 primary standby ipsec replication 
node users "On-Prem Clients"
node vpngw "Site-to-Site VPN"  below users
node tgw "Transit Gateway"  below vpngw
node app1 "app-az1"  below-left of tgw
node app2 "app-az2"  below-right of tgw
node rds1 "primary"  below app1
node rds2 "standby"  below app2
edge vpngw -> tgw  "ipsec"
edge tgw -> app1
edge tgw -> app2
edge app1 -> rds1  from: bottom  to: top
edge app2 -> rds2  from: bottom  to: top
edge rds1 -> rds2  "replication"  from: right  to: left

Reladraw vs draw.io for AWS diagrams

In draw.io the AWS icon set is richer, but the layout is manual: every resize or re-arrange is a drag session, and the .drawio XML is too noisy to review in a pull request. In Reladraw this template is 13 lines of plain text. Rename CloudFront to your real edge service, add node web3 with one line, and the solver re-places everything you already stated. If your AWS diagram lives in git next to the Terraform it documents, text wins; if it is a one-off slide graphic, draw.io wins.

Related templates

Kubernetes ClusterMicroservices ArchitectureDatabase ER Diagram