If you've ever needed to share a network diagram with a teammate who doesn't have the same diagramming software, or you wanted to automate the creation of dozens of switch-and-router layouts, you already know the pain. That's where drawio XML code for creating network topology diagrams comes in. Draw.io (now called diagrams.net) saves every diagram as plain XML, which means you can read it, edit it, generate it programmatically, and version-control it like any other file. Understanding that XML structure turns a simple drawing tool into something far more flexible for network engineers, students, and IT teams.

What does drawio XML actually look like inside a network diagram?

A drawio file (.drawio or .drawml) is just XML wrapped in an <mxGraphModel> element. Each shape a router, switch, firewall, or link becomes an <mxCell> with an id, value (the label text), style (shape type, color, icon), and geometry (x, y position, width, height). Connections between devices are also mxCells with a source and target attribute that reference the IDs of the connected shapes.

A minimal example of a router connected to a switch looks roughly like this:

<mxCell id="1" value="Router" style="shape=mxgraph.cisco.routers.router;" vertex="1" parent="0"><mxGeometry x="100" y="100" width="80" height="40" as="geometry"/></mxCell>

<mxCell id="2" value="Switch" style="shape=mxgraph.cisco.switches.switch;" vertex="1" parent="0"><mxGeometry x="300" y="100" width="80" height="40" as="geometry"/></mxCell>

<mxCell id="3" edge="1" source="1" target="2" parent="0"/>

That last cell is the line connecting the two devices. Every element in a drawio network diagram boils down to these building blocks shapes, labels, positions, and edges. If you want a deeper look at the shape icons themselves, check out our breakdown of what each network topology symbol represents.

Why would anyone write drawio XML by hand instead of using the editor?

Most of the time, you won't. The drag-and-drop editor works fine for one-off diagrams. But there are real situations where editing or generating the XML directly makes sense:

  • Bulk generation. You have a 200-device network inventory in a spreadsheet and need a diagram for every site. A script can loop through that data and produce a .drawio file automatically.
  • Version control. XML diffs cleanly in Git. You can review diagram changes in pull requests just like code changes.
  • Templates. You maintain a base XML template for a standard branch-office topology and clone it for each new location, swapping out IP addresses and hostnames.
  • Automation pipelines. A monitoring tool detects a new device on the network and appends a cell to the diagram XML without human interaction.
  • Exam study. If you're preparing for CCNA certification and need to practice with topology code examples, building XML by hand reinforces your understanding of how devices and links map to data structures.

How do I build a basic network topology from scratch in drawio XML?

Step 1: Set up the XML wrapper

Every drawio file starts with the same skeleton. The outer <mxGraphModel> contains a single <root> element, and all your cells go inside it. Two default cells (id 0 and id 1) represent the root layer and default parent always include them.

<mxfile><diagram name="Network" id="diagram1"><mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/><!-- devices go here --></root></mxGraphModel></diagram></mxfile>

Step 2: Add device shapes

Pick a style string for each device type. Drawio includes stencil libraries for Cisco, AWS, Azure, and generic networking shapes. Common style values include:

  • shape=mxgraph.cisco.routers.router;
  • shape=mxgraph.cisco.switches.workgroup_switch;
  • shape=mxgraph.cisco.firewalls.firewall;
  • shape=mxgraph.cisco.servers.server;
  • shape=ellipse; for generic cloud symbols

Give each cell a unique id number and set vertex="1" to mark it as a shape (not a line). Use the value attribute for the label you want displayed under or inside the icon.

Step 3: Connect devices with edges

For each link, add a cell with edge="1" instead of vertex="1". Set source and target to the IDs of the two devices being connected. You can style the edge line with attributes like dashed=1 for backup links or strokeColor=#FF0000 for a faulted connection.

Step 4: Position and size everything

The <mxGeometry> child of each cell controls where it sits on the canvas. Use x and y for position, width and height for size. Keep your coordinates consistent for example, space routers 200 pixels apart horizontally so the diagram doesn't look cluttered. A grid-based layout also makes programmatic generation easier since you can use formulas instead of hardcoded pixels.

Can I generate drawio XML with a script or library?

Yes, and this is where the format really shines. Because the XML is simple and predictable, you can write a Python, Bash, or PowerShell script that outputs valid .drawio files. Libraries exist that wrap the XML generation so you don't have to deal with string concatenation. For a working example using Python, see our walkthrough on automated network topology diagram generation with Python.

A basic Python approach uses the xml.etree.ElementTree module to build the DOM tree and then writes it out with ElementTree.write(). You loop through your device list, create an mxCell element for each one, set its attributes, and append it to the root. Edges get added the same way after you've defined which devices connect to which.

What are the most common mistakes people make with drawio network XML?

  1. Missing the default parent cells. Every cell needs a parent attribute. For top-level shapes, set parent="1". Forgetting this breaks the rendering silently drawio opens the file but shows a blank canvas.
  2. Duplicate IDs. Each cell must have a unique id. If you clone a device and forget to change the ID, one shape overwrites the other.
  3. Wrong style syntax. The style string uses semicolon-separated key-value pairs. A missing semicolon or an unsupported shape name causes the cell to render as a plain rectangle. Test styles in the editor first, then copy the style string into your XML.
  4. Overlapping geometry. Manual coordinate math is error-prone. Two devices at the same x/y spot look like one. Use a consistent grid or calculate positions programmatically.
  5. Ignoring the mxfile wrapper. If you paste raw <mxGraphModel> XML into a .drawio file without the <mxfile> and <diagram> wrapper, diagrams.net may not open it correctly.

How do I import or export drawio XML for team collaboration?

You can save a .drawio file and commit it to a Git repository. Because the XML is text-based, tools like GitHub and GitLab show meaningful diffs you'll see exactly which device was added or which link changed between commits. This makes drawio XML a practical alternative to binary formats like Visio's .vsdx for teams that already use Git.

To share with someone who doesn't use drawio, export the diagram as SVG or PNG from the editor. The XML is the editable source; the exported image is the presentation layer. Keep both if you need to maintain the diagram long term.

Useful tips for working with drawio XML at scale

  • Store device metadata in XML attributes. You can add custom attributes like data-ip="10.0.1.1" or data-site="NYC" to cells. They're ignored by the renderer but available to your scripts.
  • Use drawio's built-in "Extras > Edit Diagram" menu to paste raw XML directly into an open diagram handy for quick testing.
  • Create XML templates for common topologies (hub-and-spoke, three-tier campus, data center leaf-spine) and parameterize the parts that change per deployment.
  • Validate your XML by opening it in diagrams.net before distributing. A quick visual check catches broken links and misplaced shapes faster than staring at angle brackets.
  • Version your templates. When your standard topology changes, update the template XML and tag the commit so older diagrams can reference the version they were built from.

Practical checklist: your first drawio network topology XML file

  1. Open a blank .drawio file in a text editor.
  2. Add the <mxfile>, <diagram>, <mxGraphModel>, and <root> wrapper with cells 0 and 1.
  3. Define each device as an <mxCell> with a unique ID, a style string, vertex="1", and parent="1".
  4. Define each link as an <mxCell> with edge="1", source, target, and parent="1".
  5. Set <mxGeometry> on every vertex with x, y, width, and height values.
  6. Save the file with a .drawio extension and open it in diagrams.net to verify the layout.
  7. Fix any blank-canvas issues by checking parent attributes and ID uniqueness first.

Start with a three-device test (router, switch, server) and get the structure right before scaling to a full network. Once you've built one file successfully, generating hundreds from a script is just a loop away.