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)

1. ALWAYS use the C4 color conventions exactly — Person=#08427b, System=#1168bd, External=#999999, Container=#438dd5, Component=#85bbf0. NEVER use arbitrary colors.
2. ALWAYS include the three-line label format for C4 elements — Name (bold), [Type], Description. NEVER omit the type tag or description.
3. ALWAYS keep one C4 abstraction level per diagram page — NEVER mix system context elements with container-level details on the same page.
4. ALWAYS use container=1;collapsible=0; for deployment nodes — Deployment environments and server nodes MUST be containers so child artifacts move with them.
5. ALWAYS include whiteSpace=wrap;html=1; in every shape style — Without it, labels overflow and do not wrap.
6. 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.
7. ALWAYS use sketch=0; on stencil shapes — This prevents hand-drawn rendering mode that distorts stencil icons.
8. ALWAYS use endArrow=classic for C4 relationships — C4 relationships are directed. NEVER use endArrow=none.
9. ALWAYS set fontColor=#ffffff on dark-filled C4 shapes — Person, System, External, and Container shapes have dark backgrounds. Without white text, labels are unreadable.
10. NEVER use generic rectangles for cloud resources — ALWAYS use the appropriate stencil shape from the correct namespace.