Drawio Impl Network

Draw.io Network Diagram Implementation

Purpose

This skill enables correct generation of network topology diagrams, infrastructure layouts, and cloud architecture diagrams in Draw.io mxGraph XML. It enforces the use of proper stencil namespaces for vendor-specific icons and prevents the most common AI mistakes: wrong shape namespaces, directed arrows for physical links, and missing zone boundaries.

Critical Rules (Memorize These)

1. ALWAYS use mxgraph.cisco19.* for modern Cisco icons — NEVER use the legacy mxgraph.cisco.* namespace. The cisco19 stencils are the current set with updated iconography.
2. ALWAYS use endArrow=none for physical network links — Physical connectivity is bidirectional. NEVER use directed arrows (endArrow=classic) for cables, fibers, or wireless links.
3. ALWAYS use containers for network zones — Zones (DMZ, LAN, WAN, subnets) MUST use container=1;collapsible=0; so child devices move with the zone boundary.
4. ALWAYS include whiteSpace=wrap;html=1; in every shape style — Without it, labels overflow and do not wrap.
5. ALWAYS include sketch=0; on stencil shapes — This prevents the hand-drawn rendering mode that distorts stencil icons.
6. ALWAYS add verticalLabelPosition=bottom;verticalAlign=top;align=center; on icon-style shapes — Without it, the label overlaps the icon graphic.
7. NEVER mix cloud provider stencils in the same zone — AWS, Azure, and GCP icons MUST be separated into distinct zone containers when depicting multi-cloud.
8. NEVER use generic rectangles for network devices — ALWAYS use the appropriate stencil shape from the correct namespace.

Stencil Namespace Reference

Cisco (Modern: cisco19)

| Device | Style | Dimensions | |--------|-------|-----------| | Router | shape=mxgraph.cisco19.rect;prIcon=mxgraph.cisco19.router; | 78 x 53 | | Switch L2 | shape=mxgraph.cisco19.rect;prIcon=mxgraph.cisco19.switch; | 78 x 53 | | Switch L3 | shape=mxgraph.cisco19.rect;prIcon=mxgraph.cisco19.layer_3_switch; | 78 x 53 | | Firewall | shape=mxgraph.cisco19.rect;prIcon=mxgraph.cisco19.firewall; | 78 x 53 | | Server | shape=mxgraph.cisco19.rect;prIcon=mxgraph.cisco19.server; | 50 x 65 | | Wireless AP | shape=mxgraph.cisco19.rect;prIcon=mxgraph.cisco19.access_point; | 50 x 50 | | Laptop | shape=mxgraph.cisco19.rect;prIcon=mxgraph.cisco19.laptop; | 50 x 40 | | IP Phone | shape=mxgraph.cisco19.rect;prIcon=mxgraph.cisco19.ip_phone; | 50 x 50 | | Load Balancer | shape=mxgraph.cisco19.rect;prIcon=mxgraph.cisco19.load_balancer; | 78 x 53 |

Cisco (Legacy: for reference ONLY)

The mxgraph.cisco.* namespace (without 19) is the legacy stencil set. It still renders in Draw.io but uses outdated iconography. ALWAYS prefer mxgraph.cisco19.*.

Legacy format: shape=mxgraph.cisco.routers.router; — note the nested category path.

AWS (v4)

| 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 | | VPC (group) | shape=mxgraph.aws4.group;grIcon=mxgraph.aws4.group_vpc; | container | | Region (group) | shape=mxgraph.aws4.group;grIcon=mxgraph.aws4.group_region; | container | | Subnet (group) | shape=mxgraph.aws4.group;grIcon=mxgraph.aws4.group_subnet; | container | | ALB | shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.elastic_load_balancing; | 60 x 60 |

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

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 |

GCP (v2)

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

Generic Network Shapes (No Stencil Required)

| Shape | Style | Purpose | |-------|-------|---------| | Cloud | shape=cloud;whiteSpace=wrap;html=1; | Internet / external network | | Cylinder | shape=cylinder3;whiteSpace=wrap;html=1; | Database or storage | | Rectangle | rounded=1;whiteSpace=wrap;html=1; | Generic device or service |

Network Connection Styles

Physical Links (ALWAYS Bidirectional)

endArrow=none;html=1;strokeWidth=2;

Physical network cables, fibers, and wireless links are ALWAYS bidirectional. NEVER use endArrow=classic.

Backbone / Trunk Links

endArrow=none;html=1;strokeWidth=3;strokeColor=#0066CC;

Use thicker lines (strokeWidth=3) and a distinct color for backbone or trunk connections.

Redundant Links

endArrow=none;html=1;strokeWidth=2;strokeColor=#CC0000;dashed=1;

Use dashed=1 for redundant or standby links to distinguish them from primary paths.

Logical / Data Flow (Directed)

endArrow=classic;html=1;strokeWidth=1;dashed=1;

Use directed arrows ONLY for logical data flow overlays, NEVER for physical topology.

Labeled Links (IP / VLAN)

Use the value attribute on edge cells to label connections with IP addresses or VLAN IDs:

Zone / Segment Boundaries

ALWAYS use container cells for network zones. The pattern:

rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#;strokeWidth=2;dashed=1;verticalAlign=top;fontStyle=1;fontSize=12;fontColor=#;container=1;collapsible=0;

Zone Color Conventions

| Zone | Stroke/Font Color | Purpose | |------|-------------------|---------| | DMZ | #FF0000 (red) | Demilitarized zone | | LAN / Internal | #009900 (green) | Internal trusted network | | WAN / External | #0066CC (blue) | Wide area / external network | | Management | #FF9900 (orange) | Management plane | | Guest / IoT | #9933CC (purple) | Untrusted internal segments |

Zone XML Pattern

Devices inside a zone MUST set parent="" and use coordinates relative to the zone container.

Topology Patterns

Star Topology

One central device (switch/hub) connects to all peripheral devices. Place the central device at the center and distribute endpoints in a circular or grid pattern around it.

Ring Topology

Devices connect in a closed loop. Place devices in a circle and connect each to its neighbor, with the last connecting back to the first.

Mesh Topology

Every device connects to every other device (full mesh) or a subset (partial mesh). Use for core router interconnections.

Three-Tier Architecture

Standard enterprise layout (top-to-bottom):

Internet Cloud (y=20)
    |
Firewall (y=140)
    |
Core Router (y=260)
    |-------------|
Distribution SW   Distribution SW (y=380)
    |                |
Access SW  Access SW  Access SW (y=500)
    |         |         |
Endpoints (y=620)

Vertical spacing: 120px between tiers. Horizontal spacing: 180px between parallel devices.

Rack Diagram Pattern

For server rack representations, use a tall container with stacked elements:

Each rack unit (1U) is approximately 20px in height. Common sizes: 1U = 20px, 2U = 40px, 4U = 80px.

AWS Architecture Diagram Pattern

AWS diagrams use nested group containers for Region > VPC > Subnet hierarchy:

Complete Example: LAN Topology

IP Address Labeling

Use the `` wrapper to attach metadata (IP, VLAN, hostname) to network devices:

The ` element supports custom attributes (ip, hostname, vlan) that appear as tooltip metadata in Draw.io. The label attribute overrides value` and supports HTML.

Checklist: Before Outputting a Network Diagram

1. Every network device uses an appropriate stencil shape (NEVER generic rectangles).
2. Cisco shapes use mxgraph.cisco19.* namespace (NEVER legacy mxgraph.cisco.*).
3. Physical links use endArrow=none (NEVER directed arrows).
4. Network zones use container=1;collapsible=0;dashed=1;fillColor=none;.
5. Devices inside zones have parent="".
6. All shapes include whiteSpace=wrap;html=1;sketch=0;.
7. Icon-style shapes include verticalLabelPosition=bottom;verticalAlign=top;align=center;.
8. Both structural cells (id="0" and id="1") are present.
9. Cell IDs are unique across the entire diagram.
10. All edges have source and target pointing to valid cell IDs.
11. Cloud provider shapes from different vendors are in separate zone containers.

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