# Drawio Impl Network

> >

- **Type:** Skill
- **Install:** `agentstack add skill-impertio-studio-draw-io-claude-skill-package-drawio-impl-network`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [Impertio-Studio](https://agentstack.voostack.com/s/impertio-studio)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [Impertio-Studio](https://github.com/Impertio-Studio)
- **Source:** https://github.com/Impertio-Studio/Draw.io-Claude-Skill-Package/tree/main/skills/source/drawio-impl/drawio-impl-network

## Install

```sh
agentstack add skill-impertio-studio-draw-io-claude-skill-package-drawio-impl-network
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

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

```xml

  

```

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

```xml

  

```

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:

```xml

  

  

  

```

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:

```xml

  

  

  

```

## Complete Example: LAN Topology

```xml

  
    
    

    
    
      
    

    
    
      
    

    
    
      
    

    
    
      
    

    
    
      
    

    
    
      
    

    
    
      
    

    
    
      
    

    
    
      
    

    
    
      
    

    
    
      
    

    
    
      
    
    
      
    
    
      
    
    
      
    
    
      
    
    
      
    
    
    
      
    
  

```

## IP Address Labeling

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

```xml

  
    
  

```

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](https://github.com/Impertio-Studio)
- **Source:** [Impertio-Studio/Draw.io-Claude-Skill-Package](https://github.com/Impertio-Studio/Draw.io-Claude-Skill-Package)
- **License:** MIT

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-impertio-studio-draw-io-claude-skill-package-drawio-impl-network
- Seller: https://agentstack.voostack.com/s/impertio-studio
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.