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.
---
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.<namespace>.<icon> "Label" as <alias>
mxgraph.<namespace>.<icon> "Label" as <alias> #color
mxgraph.<namespace>.<icon> <alias>
```
### 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) |
Creator's repository · markdown-viewer/skills