Use when creating C4 model diagrams, software architecture views, or cloud architecture diagrams in Draw.io. Prevents mixing cloud provider stencils in the same view or using wrong C4 color conventions. Covers C4 system context, container, and component diagrams, AWS/Azure/GCP stencil usage, and deployment views. Keywords: C4 model, architecture diagram, system context, container diagram, AWS, Azure, GCP, deployment, software architecture, cloud diagram, system design, infrastructure diagram.
Use when creating C4 model diagrams, software architecture views, or cloud architecture diagrams in Draw.io. Prevents mixing cloud provider stencils in the same view or using wrong C4 color conventions. Covers C4 system context, container, and component diagrams, AWS/Azure/GCP stencil usage, and deployment views. Keywords: C4 model, architecture diagram, system context, container diagram, AWS, Azure, GCP, deployment, software architecture, cloud diagram, system design, infrastructure diagram.
license
MIT
compatibility
Designed for Claude Code. Requires Draw.io / diagrams.net (current).
metadata
{"author":"OpenAEC-Foundation","version":"1.0"}
Draw.io Architecture Diagram Implementation
Purpose
This skill enables correct generation of software architecture diagrams in Draw.io mxGraph XML. It covers the C4 model (system context, container, component), cloud architecture with AWS/Azure/GCP stencils, and deployment diagrams. It enforces C4 color conventions, proper stencil namespaces, and correct nesting patterns.
Critical Rules (Memorize These)
ALWAYS use the C4 color conventions exactly — Person=#08427b, System=#1168bd, External=#999999, Container=#438dd5, Component=#85bbf0. NEVER use arbitrary colors.
— Name (bold), [Type], Description. NEVER omit the type tag or description.
ALWAYS include the three-line label format for C4 elements
ALWAYS keep one C4 abstraction level per diagram page — NEVER mix system context elements with container-level details on the same page.
ALWAYS use container=1;collapsible=0; for deployment nodes — Deployment environments and server nodes MUST be containers so child artifacts move with them.
ALWAYS include whiteSpace=wrap;html=1; in every shape style — Without it, labels overflow and do not wrap.
NEVER mix cloud provider stencils in the same view — AWS (mxgraph.aws4.*), Azure (mxgraph.azure.*), and GCP (mxgraph.gcp2.*) icons MUST be in separate zone containers when depicting multi-cloud.
ALWAYS use sketch=0; on stencil shapes — This prevents hand-drawn rendering mode that distorts stencil icons.
ALWAYS use endArrow=classic for C4 relationships — C4 relationships are directed. NEVER use endArrow=none.
ALWAYS set fontColor=#ffffff on dark-filled C4 shapes — Person, System, External, and Container shapes have dark backgrounds. Without white text, labels are unreadable.
NEVER use generic rectangles for cloud resources — ALWAYS use the appropriate stencil shape from the correct namespace.
All AWS group containers MUST include: container=1;collapsible=0;recursiveResize=0;fillColor=none;verticalAlign=top;align=left;spacingLeft=30;fontStyle=1;fontSize=12;html=1;whiteSpace=wrap;pointerEvents=0;
Azure (mxgraph.azure.*)
Resource
Style
Dimensions
Virtual Machine
shape=mxgraph.azure.virtual_machine;
60 x 60
SQL Database
shape=mxgraph.azure.sql_database;
50 x 60
Virtual Network
shape=mxgraph.azure.virtual_network;
60 x 60
App Service
shape=mxgraph.azure.app_service;
60 x 60
Storage
shape=mxgraph.azure.storage;
60 x 60
Azure Functions
shape=mxgraph.azure.azure_functions;
60 x 60
Key Vault
shape=mxgraph.azure.key_vaults;
60 x 60
Azure stencils use a flat namespace: shape=mxgraph.azure.<service>;.
GCP (mxgraph.gcp2.*)
Resource
Style
Dimensions
Compute Engine
shape=mxgraph.gcp2.compute_engine;
60 x 60
Cloud SQL
shape=mxgraph.gcp2.cloud_sql;
60 x 60
Cloud Storage
shape=mxgraph.gcp2.cloud_storage;
60 x 60
Cloud Functions
shape=mxgraph.gcp2.cloud_functions;
60 x 60
Pub/Sub
shape=mxgraph.gcp2.cloud_pubsub;
60 x 60
Cloud Run
shape=mxgraph.gcp2.cloud_run;
60 x 60
GCP stencils use the gcp2 namespace. NEVER use the legacy gcp namespace.
Cloud Stencil Base Style
ALWAYS append these properties to every cloud stencil shape:
