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