Drawio Impl Architecture

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.

C4 Model Reference

Color Conventions

| Element | fillColor | strokeColor | fontColor | |---------|-----------|-------------|-----------| | Person | #08427b | #073763 | #ffffff | | Software System (internal) | #1168bd | #0b4884 | #ffffff | | External System | #999999 | #8A8A8A | #ffffff | | Container | #438dd5 | #3C7FC0 | #ffffff | | Component | #85bbf0 | #78A8D8 | #000000 |

C4 Shape Styles

Person

shape=mxgraph.c4.person2;whiteSpace=wrap;html=1;align=center;metaEdit=1;points=[[0.5,0,0],[1,0.5,0],[1,0.75,0],[0.75,1,0],[0.5,1,0],[0.25,1,0],[0,0.75,0],[0,0.5,0]];fillColor=#08427b;fontColor=#ffffff;strokeColor=#073763;fontSize=11;

Dimensions: 200 x 180.

Software System (Internal)

rounded=1;whiteSpace=wrap;html=1;fillColor=#1168bd;fontColor=#ffffff;strokeColor=#0b4884;fontSize=11;align=center;

Dimensions: 300 x 150.

External System

rounded=1;whiteSpace=wrap;html=1;fillColor=#999999;fontColor=#ffffff;strokeColor=#8A8A8A;fontSize=11;align=center;

Dimensions: 240 x 150.

Container

rounded=1;whiteSpace=wrap;html=1;fillColor=#438dd5;fontColor=#ffffff;strokeColor=#3C7FC0;fontSize=11;align=center;

Dimensions: 240 x 150.

Component

rounded=1;whiteSpace=wrap;html=1;fillColor=#85bbf0;fontColor=#000000;strokeColor=#78A8D8;fontSize=11;align=center;

Dimensions: 200 x 120.

C4 Relationship Style

endArrow=classic;html=1;strokeColor=#707070;fontColor=#707070;fontSize=10;

ALWAYS include a value attribute describing the relationship (e.g., "Makes API calls to", "Reads from").

C4 Label Format

Every C4 element MUST use this HTML label pattern:

Element Name[Type Tag]Description of what this element does

The type tag MUST be one of: [Person], [Software System], [External System], [Container: Technology], [Component: Technology].

Cloud Architecture Stencils

AWS (mxgraph.aws4.*)

| Resource | Style | Dimensions | |----------|-------|-----------| | EC2 Instance | shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.ec2; | 60 x 60 | | RDS Database | shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.rds; | 60 x 60 | | S3 Bucket | shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.s3; | 60 x 60 | | Lambda | shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.lambda; | 60 x 60 | | ALB | shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.elastic_load_balancing; | 60 x 60 | | CloudFront | shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.cloudfront; | 60 x 60 | | SQS | shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.sqs; | 60 x 60 | | SNS | shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.sns; | 60 x 60 |

AWS resource icons use a two-part style: shape=mxgraph.aws4.resourceIcon sets the frame, resIcon=mxgraph.aws4. sets the icon.

AWS Group Containers

| Group | Style | strokeColor | |-------|-------|-------------| | Region | shape=mxgraph.aws4.group;grIcon=mxgraph.aws4.group_region; | #00A4A6 | | VPC | shape=mxgraph.aws4.group;grIcon=mxgraph.aws4.group_vpc; | #8C4FFF | | Public Subnet | shape=mxgraph.aws4.group;grIcon=mxgraph.aws4.group_subnet; | #7AA116 | | Private Subnet | shape=mxgraph.aws4.group;grIcon=mxgraph.aws4.group_subnet; | #147EBA | | Availability Zone | shape=mxgraph.aws4.group;grIcon=mxgraph.aws4.group_availability_zone; | #007CBC |

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.;.

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:

sketch=0;html=1;whiteSpace=wrap;verticalLabelPosition=bottom;verticalAlign=top;align=center;

Deployment Diagram Pattern

Deployment diagrams use nested containers to represent environments, servers, and runtime artifacts.

Deployment Node (Environment)

shape=cube;whiteSpace=wrap;html=1;size=10;container=1;fillColor=#f5f5f5;strokeColor=#666666;fontStyle=1;verticalAlign=top;

Dimensions: 300+ x 200+ (must be large enough to contain child nodes).

Deployment Node (Server)

shape=cube;whiteSpace=wrap;html=1;size=10;container=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontStyle=1;verticalAlign=top;

Nested inside the environment node. Set parent="".

Artifact (Application)

shape=note;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;

Dimensions: 120 x 60. Set parent="".

Artifact (Database)

shape=cylinder3;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;size=10;

Dimensions: 100 x 80. Set parent="".

Nesting Hierarchy

Environment (cube, container=1)
  +-- Server (cube, container=1, parent=environment)
  |     +-- Application (note, parent=server)
  |     +-- Database (cylinder3, parent=server)
  +-- Server (cube, container=1, parent=environment)
        +-- Application (note, parent=server)

ALWAYS use relative coordinates for child elements within containers.

Complete C4 System Context Example

Checklist: Before Outputting an Architecture Diagram

1. Every C4 element uses the correct fillColor from the color conventions table.
2. Every C4 element label follows the three-line format: Name, [Type], Description.
3. Only one C4 abstraction level per diagram page.
4. C4 relationships use endArrow=classic (NEVER endArrow=none).
5. Cloud stencils use the correct namespace (aws4, azure, gcp2).
6. Cloud provider stencils from different vendors are in separate zone containers.
7. Deployment nodes use container=1 and child artifacts set the correct parent.
8. All shapes include whiteSpace=wrap;html=1;.
9. Stencil shapes include sketch=0;.
10. Both structural cells (id="0" and id="1") are present.
11. Cell IDs are unique across the entire diagram.
12. All edges have source and target pointing to valid cell IDs.

Cross-References

• XML fundamentals: See drawio-core-xml-format for file structure and structural cells.
• Style syntax: See drawio-syntax-styles for the complete style property reference.
• Connection details: See drawio-syntax-connections for edge routing and waypoints.
• Cloud network stencils: See drawio-impl-network for Cisco stencils, zone boundaries, and network topology patterns.
• Geometry: See drawio-core-geometry for coordinate system and positioning.

Reference Links

• [Complete Reference](references/methods.md)
• [Working Examples](references/examples.md)
• [Anti-Patterns](references/anti-patterns.md)

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: Impertio-Studio
• Source: Impertio-Studio/Draw.io-Claude-Skill-Package
• License: MIT

Install and usage instructions live in the source repository linked above.