☁️ Building a Multi-Cloud Architecture

Create professional cloud architecture diagrams with AWS, Azure, and GCP services.

What You'll Build

In this tutorial, you'll create a Netlify-style multi-cloud architecture diagram that showcases:

Multi-Cloud Architecture Preview
The final multi-cloud architecture diagram you'll create

Architecture Layers

Layer Components Color
Users Person, Phone, Laptop, Server icons Gray (#f1f5f9)
CDN Edge CloudFront, Azure CDN, GCP CDN Green (#ecfdf5)
AWS Region Lambda, DynamoDB, S3 Orange (#fff7ed)
Azure Region Functions, Cosmos DB, Blob Storage Blue (#eff6ff)
GCP Region Cloud Run, Cloud SQL, GCS Yellow (#fefce8)
Sync Layer Cross-cloud replication Purple (#f3e8ff)

Step 1: Create the Title Section

1

Add Title and Subtitle

Start with a professional title centered at the top:

{
  "type": "text",
  "id": "title",
  "x": 20, "y": 10, "w": 760, "h": 30,
  "text": "Netlify-Style Multi-Cloud Architecture",
  "fontSize": 22,
  "fontWeight": "bold",
  "align": "center",
  "options": { "stroke": "#1e293b" }
}

Step 2: Create the Users Layer

2

Add User Icons with Background

Create a container with device icons representing different user types:

// Background container
{
  "type": "rectangle",
  "id": "users-bg",
  "x": 280, "y": 60, "w": 240, "h": 45,
  "borderRadius": 8,
  "options": { "fill": "#f1f5f9", "stroke": "#94a3b8", "fillStyle": "solid" }
},
// Icons using iconCategory and iconName
{
  "type": "icon",
  "id": "user1",
  "x": 310, "y": 68, "w": 28, "h": 28,
  "iconCategory": "people",
  "iconName": "person"
}

Step 3: Build the CDN Layer

3

Create Edge CDN Container with Provider Cards

Add a green container spanning the width with three CDN provider cards:

// Main CDN container
{
  "type": "rectangle",
  "id": "cdn-bg",
  "x": 50, "y": 135, "w": 700, "h": 80,
  "borderRadius": 10,
  "options": { "fill": "#ecfdf5", "stroke": "#10b981", "strokeWidth": 2 }
},
// AWS CloudFront card with image element
{
  "type": "image",
  "id": "cf-icon",
  "x": 125, "y": 168, "w": 32, "h": 32,
  "src": "aws_icons/.../Arch_Amazon-CloudFront_64.svg"
}
💡 Using Cloud Provider Icons Privacy Sketch includes official AWS, Azure, and GCP icon sets. Use the image element type with the src property pointing to the icon path.

Step 4: Create Cloud Region Containers

4

Build Three Cloud Region Boxes

Each region has a distinct color and contains compute, database, and storage services:

AWS Orange theme (#f97316)

Azure Blue theme (#3b82f6)

GCP Yellow theme (#eab308)

// AWS Region container
{
  "type": "rectangle",
  "id": "aws-region",
  "x": 50, "y": 250, "w": 220, "h": 200,
  "borderRadius": 10,
  "options": { "fill": "#fff7ed", "stroke": "#f97316", "strokeWidth": 2 }
}
// Repeat pattern for Azure (#eff6ff/#3b82f6) and GCP (#fefce8/#eab308)

Step 5: Add Service Cards Inside Regions

5

Create Service Cards with Icons

Each region contains three service cards (compute, database, storage):

// Service card pattern: rectangle + image + text
{
  "type": "rectangle",
  "id": "aws-compute",
  "x": 75, "y": 285, "w": 75, "h": 55,
  "borderRadius": 6,
  "options": { "fill": "#ffffff", "stroke": "#fb923c" }
},
{
  "type": "image",
  "id": "aws-lambda",
  "x": 95, "y": 292, "w": 32, "h": 32,
  "src": "aws_icons/.../Arch_AWS-Lambda_64.svg"
},
{
  "type": "text",
  "id": "aws-compute-t",
  "x": 75, "y": 325, "w": 75, "h": 10,
  "text": "Lambda",
  "fontSize": 9,
  "align": "center"
}

Step 6: Add Data Replication Layer

6

Create Cross-Cloud Sync Layer

Add a purple bar at the bottom to show data replication:

{
  "type": "rectangle",
  "id": "sync-bg",
  "x": 50, "y": 465, "w": 700, "h": 35,
  "borderRadius": 8,
  "options": { "fill": "#f3e8ff", "stroke": "#a855f7", "strokeWidth": 2 }
},
{
  "type": "text",
  "id": "sync-t",
  "x": 60, "y": 475, "w": 680, "h": 14,
  "text": "⟷ Cross-Cloud Data Replication \u0026 Sync Layer ⟷",
  "align": "center",
  "fontWeight": "bold"
}

Key Design Principles

🎨 Pro Tip Use borderRadius consistently (e.g., 10 for containers, 6 for cards) for a polished look.

☁️ Build Your Cloud Architecture

Create professional multi-cloud diagrams for your documentation.

Open Privacy Sketch

Next Steps