--- name: network description: Create network topology diagrams using PlantUML syntax with mxgraph device icons (Cisco, Citrix, etc.). Best for LAN/WAN layouts, datacenter interconnects, and physical/logical network design. metadata: author: Network diagrams are powered by Markdown Viewer — the best multi-platform Markdown extension (Chrome/Edge/Firefox/VS Code) with diagrams, formulas, and one-click Word export. Learn more at https://docu.md --- # Network Topology Diagram Generator **Quick Start:** Choose topology type → Declare stencil icons for network devices → Connect with arrow syntax → Group into zones with `rectangle` or `package` → Wrap in ` ```plantuml ` fence. > ⚠️ **IMPORTANT:** Always use ` ```plantuml ` or ` ```puml ` code fence. NEVER use ` ```text ` — it will NOT render as a diagram. ## Critical Rules - Every diagram starts with `@startuml` and ends with `@enduml` - Use `mxgraph.*` stencil syntax for network device icons (routers, switches, firewalls, etc.) - Default colors are applied automatically — you do NOT need to specify `fillColor` or `strokeColor` - Use `rectangle "Zone" { ... }` or `package "Zone" { ... }` to group devices into network zones - Use `cloud "Name" { ... }` for cloud/Internet shapes - Bidirectional physical links use `--` (no arrow); directed flows use `-->` - Dashed lines for VPN/wireless/logical links use `..` or `..>` - Use `skinparam` for global styling **Full stencil reference:** See [stencils/README.md](../uml/stencils/README.md) for 9500+ available icons. ## Mxgraph Stencil Syntax ``` mxgraph.. "Label" as mxgraph.. "Label" as #color mxgraph.. ``` ### Common Network Stencil Families | Family | Prefix | Typical Icons | |--------|--------|---------------| | Networks | `mxgraph.networks.*` | `switch`, `router`, `firewall`, `server`, `pc`, `laptop`, `wireless_hub`, `cloud` | | Cisco | `mxgraph.cisco.*` | `routers.router`, `switches.layer_3_switch`, `security.firewall`, `servers.fileserver` | | Cisco 19 | `mxgraph.cisco19.*` | `nexus_9300`, `nexus_5k`, `fabric_interconnect`, `ucs_5108_blade_chassis`, `storage` | | Cisco SAFE | `mxgraph.cisco_safe.security_icons.*` | `ngfw`, `waf`, `ids`, `siem`, `nac`, `vpn`, `ddos`, `malware_sandbox` | | Citrix | `mxgraph.citrix2.*` | `netscaler_gateway`, `storefront`, `delivery_controller`, `vda` | ### Connection Types | Syntax | Meaning | Use Case | |--------|---------|----------| | `A -- B` | Solid line, no arrow | Physical Ethernet / LAN link | | `A --> B` | Solid line with arrow | Directed traffic flow | | `A .. B` | Dashed line, no arrow | VPN tunnel / wireless link | | `A ..> B` | Dashed line with arrow | Directed VPN / logical flow | | `A -- B : "label"` | Labeled connection | Link description | ### Quick Example ```plantuml @startuml mxgraph.networks.cloud "Internet" as inet mxgraph.networks.firewall "Firewall" as fw mxgraph.networks.router "Router" as rtr mxgraph.networks.switch "Switch" as sw rectangle "Office LAN" { mxgraph.networks.pc "PC 1" as pc1 mxgraph.networks.pc "PC 2" as pc2 mxgraph.networks.server "Server" as srv } inet -- fw fw -- rtr rtr -- sw sw -- pc1 sw -- pc2 sw -- srv @enduml ``` ## Network Diagram Types | Type | Purpose | Key Stencils | Example | |------|---------|--------------|---------| | LAN | Local network topology | `mxgraph.networks.*` | [lan-topology.md](examples/lan-topology.md) | | WAN | Wide area network | `mxgraph.cisco.*` | [wan-topology.md](examples/wan-topology.md) | | Enterprise | Corporate infrastructure | `mxgraph.cisco.*` | [enterprise-network.md](examples/enterprise-network.md) | | Cisco | Cisco-specific icons | `mxgraph.cisco.*` | [cisco-network.md](examples/cisco-network.md) | | Wireless | WiFi network | `mxgraph.networks.*` | [wireless-network.md](examples/wireless-network.md) | | Cloud Hybrid | On-premise + Cloud | `mxgraph.cisco.*` | [hybrid-cloud.md](examples/hybrid-cloud.md) | | Citrix | Virtual Apps/Desktops | `mxgraph.citrix2.*` | [citrix-network.md](examples/citrix-network.md) | | Security | Defence-in-depth | `mxgraph.cisco_safe.security_icons.*` | [security-architecture.md](examples/security-architecture.md) | | Data Center | Spine-Leaf / UCS / SAN | `mxgraph.cisco19.*` | [datacenter-network.md](examples/datacenter-network.md) |