draw.io

Updated
View as text
Open in Confluence
Open in ChatGPT Open in Claude

The draw.io editor is the drag-and-drop one, and it is the right answer whenever the arrangement of the diagram is part of the information: floor plans, network diagrams, cloud architecture with official icons.

The Capable diagram editor creating a new template, with Azure shape categories listed on the left, a diagram of boxes and cloud icons on the canvas, and Style, Text and Arrange tabs on the right.
The surface is the familiar draw.io one, with shape libraries down the left and the style, text and arrange tabs on the right.

It renders in the browser, and its files are ordinary draw.io XML, so they open in any other draw.io-compatible tool.

#What it is good at

The Capable diagram editor showing an AWS architecture diagram with CloudFront, an ELB, two S3 buckets and RDS, a shape palette on the left and a diagram and style panel on the right.
An AWS architecture drawn on the canvas, with the searchable shape palette on the left and the format panel on the right.

  • Anything positional: layouts, plans, elevations, seating.

  • Diagrams needing a specific icon set: AWS, Azure, Google Cloud, ArchiMate, P&ID.

  • Complex diagrams where automatic layout produces a mess.

#Where its files come from and go

File

Behaviour

.drawio, .dio, .xml

Imported and editable

.drawio.png

Imported: the XML travels inside the image

.vsdx

Visio, imported and converted

Export to PNG or SVG

Keeps the XML inside, so the export is still editable later

#A few things that catch people out

  • draw.io renders in the browser, so an anonymous reader sees a stored image rather than a live render.

  • A .png or .svg exported from draw.io still contains its XML, so it can be imported and edited.

  • A plain .xml file is treated as draw.io. A BPMN file must keep its .bpmn20.xml ending.

Learn one properly. Borrow the rest when you need them.