Cloud Architecture Diagram: VPC, Load Balancer, Database

Mermaid code

architecture-beta
    group vpc(cloud)[Production VPC]
    group web(cloud)[Web tier] in vpc
    group data(cloud)[Data tier] in vpc
    service users(internet)[Users]
    service lb(server)[Load balancer] in web
    service app1(server)[App server A] in web
    service app2(server)[App server B] in web
    service db(database)[Primary DB] in data
    service replica(database)[Read replica] in data
    service backup(disk)[Backups] in data
    users:R --> L:lb
    lb:R --> L:app1
    lb:B --> T:app2
    app1:R --> L:db
    app2:R --> L:db
    db:B --> T:replica
    db:R --> L:backup

Paste this into any tool that renders Mermaid, or into the editor to change the theme and export PNG or SVG. Syntax reference: Architecture guide.

What this diagram shows

The outer group is the Production VPC, with two nested groups for the Web tier and Data tier. Users sit outside the VPC with the internet icon. Traffic flows from the Load balancer to two app servers, both of which write to the Primary DB. The database replicates down to a Read replica and out to Backups on disk. Each edge names the side of the box it leaves and enters (users:R --> L:lb), which is how you steer the layout.

Compared with a flowchart, this type gives you icons and nested boundaries without extra styling, which is exactly what an infrastructure overview needs. It is a beta syntax, so check that your renderer runs mermaid 11 or later.

How to adapt it

• Rename groups to match your environments (Staging VPC, Shared services) and add a group for each additional subnet or availability zone.
• Icons are limited to cloud, database, disk, internet, and server by default; register an icon pack if you want vendor-specific symbols.
• Add a cache tier by declaring service cache(database)[Cache] in web and connecting it from both app servers.
• Reverse an edge with <-- or make it bidirectional with <--> to show replication direction.

FAQ