Cloud Provider Service Visualization

I'll create a React Flow visualization that shows the hierarchical structure of services across AWS, Azure, and GCP, focusing on container orchestration and compute services.

Cloud Provider Hierarchy Visualization

This React Flow visualization displays a hierarchical structure of cloud services across AWS, Azure, and GCP. The visualization is organized as follows:

Top Level: Cloud Provider Accounts

• AWS Account: Shown in orange
• Azure Account: Shown in blue
• GCP Account: Shown in green

Second Level: Services

For each cloud provider, I've included their container orchestration and compute services:

AWS Services:

• EKS (Elastic Kubernetes Service) - Container orchestration
• EC2 (Elastic Compute Cloud) - Virtual machines

Azure Services:

• AKS (Azure Kubernetes Service) - Container orchestration
• Virtual Machines - Compute instances

GCP Services:

• GKE (Google Kubernetes Engine) - Container orchestration
• Compute Engine - Virtual machines

Third Level: Workloads

For each service, I've included example workloads:

Container Services (EKS/AKS/GKE):

• Production Cluster
• Development Cluster

Compute Services (EC2/VM/Compute Engine):

• Web Servers
• Database Servers

Features

• Interactive diagram with pan and zoom capabilities
• Color-coded nodes based on cloud provider
• Animated connections between cloud accounts and services
• Mini-map for navigation
• Legend showing cloud provider colors

You can interact with the diagram by:

• Dragging nodes to rearrange them
• Zooming in/out with the mouse wheel
• Panning by dragging the background
• Using the controls in the bottom-right corner

This visualization provides a clear comparison of similar services across the three major cloud providers and shows how workloads are organized within each service.