Cloud Architecture Diagram Generator
Quick Start: Choose cloud provider → Add service icons from stencil library → Group services in regions/VPCs → Connect with data flow arrows → Wrap in ```drawio fence.
⚠️ IMPORTANT: Always use
```drawiocode fence. NEVER use```xml— it will NOT render as a diagram.
Critical Rules
🔗 This is a drawio-derived skill. All structure, layout, and edge routing rules inherit from drawio SKILL.md. Read the base rules first.
Cloud-specific additions:
- Check stencils/README.md for exact cloud stencil names (e.g.,
mxgraph.aws4.*,mxgraph.gcp2.*) - Use
fillColor=none;for VPC/region containers to avoid covering child services
Cloud Architecture Types
| Type | Purpose | Stencil Library | Example |
|---|---|---|---|
| AWS | Amazon Web Services architecture | mxgraph.aws4.* (1031 icons) | aws-basic.md |
| AWS Serverless | Event-driven serverless architecture | mxgraph.aws4.* | aws-serverless.md |
| Azure | Microsoft Azure architecture | mxgraph.azure.*, mxgraph.mscae.*, mxgraph.office.* | azure-hybrid-network.md |
| GCP | Google Cloud Platform architecture | mxgraph.gcp2.* (297 icons) | gcp-log-processing.md |
| Alibaba Cloud | Alibaba Cloud architecture | mxgraph.alibaba_cloud.* (310 icons) | alibaba-web-app.md |
| IBM Cloud | IBM Cloud architecture | mxgraph.ibm.*, mxgraph.ibm_cloud.* (118 icons) | ibm-kubernetes.md |
| Kubernetes | Container orchestration | mxgraph.kubernetes.* (40 icons) | kubernetes-microservices.md |
| OpenStack | Private cloud infrastructure | mxgraph.openstack.* (18 icons) | openstack-basic.md |