# draw.io

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.](https://help.gocapable.com/images/e5b9c13c-fb2d-4f6d-aabb-87b23ad9e225.webp)

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.](https://help.gocapable.com/images/3c09931e-3fb4-41ab-b24d-07d2dbded4b8.webp)

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 |

ℹ️

**It is a full draw.io.** Shape libraries, layers, custom styling and the whole shape search all work the same way they do in the standalone tool.

---

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

---

## Related

[ExcalidrawThe sketch that looks like a sketch.](https://help.gocapable.com/diagrams/excalidraw.html)

[BPMNBusiness process notation with real semantics.](https://help.gocapable.com/diagrams/bpmn.html)

[ExamplesWorking diagrams you can copy.](https://help.gocapable.com/diagrams/examples.html)

---

_Learn one properly. Borrow the rest when you need them._