// Create cloud provider architecture diagrams using PlantUML syntax with official AWS, Azure, GCP, and Alibaba Cloud service icons. Best for multi-service cloud topologies and migration blueprints.
| name | cloud |
| description | Create cloud provider architecture diagrams using PlantUML syntax with official AWS, Azure, GCP, and Alibaba Cloud service icons. Best for multi-service cloud topologies and migration blueprints. |
| metadata | {"author":"Cloud diagrams are powered by Markdown Viewer — the best multi-platform Markdown extension (Chrome/Edge/Firefox/VS Code) with diagrams, formulas, and one-click Word export. Learn more at https://docu.md"} |
Quick Start: Choose cloud provider → Declare stencil icons → Group into VPC/region zones → Connect with arrow syntax → Wrap in ```plantuml fence.
⚠️ IMPORTANT: Always use
```plantumlor```pumlcode fence. NEVER use```text— it will NOT render as a diagram.
@startuml and ends with @endumlleft to right direction for typical cloud architectures (data flows left→right)mxgraph.* stencil syntax for cloud service iconsfillColor or strokeColorrectangle "VPC" { ... } or package "Region" { ... } for cloud containerscloud "Name" { ... } for cloud boundary shapes-->, async/event-driven flows use ..> (dashed)Full stencil reference: See stencils/README.md for 9500+ available icons.
mxgraph.<provider>.<icon> "Label" as <alias>
| Family | Prefix | Typical Icons |
|---|---|---|
| AWS | mxgraph.aws4.* | lambda_function, ec2, rds_instance, s3, api_gateway, cloudfront, dynamodb |
| Azure | mxgraph.azure.* | virtual_machine, azure_load_balancer, sql_database, azure_active_directory, storage |
| GCP | mxgraph.gcp2.* | compute_engine_2, cloud, process, repository, cloud_monitoring |
| Alibaba | mxgraph.alibaba_cloud.* | ecs_elastic_compute_service, slb_server_load_balancer_01, polardb, oss_object_storage_service |
| IBM | mxgraph.ibm_cloud.* | ibm-cloud--kubernetes-service, load-balancer--application, database--postgresql |
| Kubernetes | mxgraph.kubernetes.* | pod, svc, deploy, ing, sts, pvc, cm, secret |
| OpenStack | mxgraph.openstack.* | nova_server, neutron_router, cinder_volume, swift_container |
| Syntax | Meaning | Use Case |
|---|---|---|
A --> B | Solid arrow | Sync API call / data flow |
A ..> B | Dashed arrow | Async event / trigger / replication |
A -- B | Solid line, no arrow | Physical / bidirectional link |
A --> B : "label" | Labeled connection | Describe the data flow |
@startuml
left to right direction
mxgraph.aws4.users "Users" as users
mxgraph.aws4.cloudfront "CloudFront" as cf
mxgraph.aws4.application_load_balancer "ALB" as alb
rectangle "VPC" {
mxgraph.aws4.ec2 "EC2" as ec2
mxgraph.aws4.rds_instance "RDS" as rds
}
users --> cf
cf --> alb
alb --> ec2
ec2 --> rds
@enduml
| Type | Purpose | Key Stencils | Example |
|---|---|---|---|
| AWS | Amazon Web Services | mxgraph.aws4.* | aws-basic.md |
| AWS Serverless | Event-driven serverless | mxgraph.aws4.* | aws-serverless.md |
| Azure | Microsoft Azure | mxgraph.azure.* | azure-hybrid-network.md |
| GCP | Google Cloud Platform | mxgraph.gcp2.* | gcp-log-processing.md |
| Alibaba Cloud | Alibaba Cloud | mxgraph.alibaba_cloud.* | alibaba-web-app.md |
| IBM Cloud | IBM Cloud | mxgraph.ibm_cloud.* | ibm-kubernetes.md |
| Kubernetes | Container orchestration | mxgraph.kubernetes.* | kubernetes-microservices.md |
| OpenStack | Private cloud | mxgraph.openstack.* | openstack-basic.md |
Create editorial-style information cards using HTML/CSS in Markdown. Best for knowledge summaries, data highlights, event announcements, and single-topic content cards with magazine-quality typography.
Create template-based infographics with space-separated key-value syntax (NOT YAML). Best for KPI dashboards, timelines, roadmaps, SWOT analysis, funnels, comparisons, and org charts with quick visual impact.
Create ArchiMate enterprise architecture diagrams using PlantUML stdlib macros. Best for TOGAF viewpoints, layered EA modeling (Business/Application/Technology), motivation analysis, and migration planning.
Create layered system architecture diagrams using HTML/CSS templates with color-coded tiers and grid layouts. Best for technology stacks, microservices topology, and multi-tier application design.
Create business process diagrams using PlantUML syntax with BPMN, EIP, and Lean Mapping stencil icons. Best for workflow automation, approval chains, message-based integration patterns, and value stream mapping.
Create spatial diagrams with free-positioned nodes using JSON format. Best for concept maps, knowledge graphs, and planning boards requiring precise x/y coordinate control.