draw.io: The Diagram Editor That Never Sees Your Diagrams

Most diagramming tools want three things from you before you can draw a rectangle: an email address, a workspace name, and eventually a card. draw.io wants none of them. You open the page, it asks where you would like to keep your files, and then you are looking at a canvas and a shape palette.

That opening question is the whole philosophy in one dialog. draw.io is not offering to store your work. It is asking which of your own drives it should write to.

What you get after that is not a stripped-back freebie either. It is a serious diagram editor — UML, network topologies, floor plans, org charts, AWS architecture — that happens to cost nothing and to have been maintained by the same people for over two decades.

What is draw.io?

draw.io is a browser-based diagramming application, also distributed as a desktop app, made by a small British company. Its lineage runs a long way back: Gaudenz Alder began the JGraph diagramming library in 2000 as part of a master’s thesis at ETH Zurich, released the mxGraph JavaScript library in 2006, and put a web editor on top of it in 2011 under the name Diagramly. That became draw.io in 2012, and in February 2020 the app moved to the diagrams.net domain — a precautionary move, the company said, after a security incident involving the .io top-level domain. Both names are still used for the same thing.

The whole editor is open source under the Apache 2.0 licence, which is unusual for something this polished, and it means the app can be self-hosted or embedded in other products. That is exactly what has happened: the draw.io editor turns up inside Confluence, Jira, Notion, Nextcloud, MediaWiki and a widely used VS Code extension.

The part people notice second is the shape situation. The default palette covers general shapes, flowchart, UML, entity relationship and BPMN, and behind the “More Shapes” button sits a large catalogue of enabled-on-demand libraries: AWS icon sets going back several generations plus the isometric ones, Azure, Google Cloud, IBM, Cisco, Salesforce, Citrix, networking and rack equipment. If your job involves drawing an architecture that a colleague has to recognise at a glance, the official icons are already there.

What can you do with draw.io?

• Draw without an account. No sign-up, no trial clock, no seat limit. The first screen is a storage picker, not a registration form.
• Keep the file where you keep everything else. Local disk, Google Drive, OneDrive, Dropbox, GitHub or GitLab. The diagram is a file you own, in a folder you chose.
• Work fully offline. The desktop app is built to be isolated from the internet apart from its update check, which you can switch off with --disable-update or the DRAWIO_DISABLE_UPDATE environment variable.
• Turn on the icon set you need. More Shapes exposes cloud, network, rack, mockup and industry libraries; enable a few, ignore the rest.
• Paste in Mermaid and get real shapes. Arrange > Insert > Mermaid takes text-defined diagrams and lays them out as editable draw.io shapes, keeping the source attached so you can re-edit and regenerate.
• Save one file that is both image and document. .drawio.png and .drawio.svg render as ordinary images anywhere while remaining fully editable when dropped back on the canvas.
• Edit diagrams inside your editor. The VS Code extension opens .drawio, .dio, .drawio.svg and .drawio.png files in the real editor, and lets you flip to the underlying XML in a synchronised view.
• Export properly. SVG, PNG, JPEG, PDF and embeddable HTML, with the underlying format being plain XML that survives diffing and source control.

Tips to get the most out of it

1. Choose the storage deliberately on day one. Everything downstream — sharing, version history, whether a diagram survives a laptop rebuild — is decided by that first dialog, not by anything draw.io does afterwards.
2. Default to .drawio.png for anything you will paste somewhere. It removes the classic failure where the exported image in the wiki is six months older than the source file nobody can find.
3. Commit .drawio.svg files into repositories. GitHub renders them as images in READMEs with no export step, and the next person can edit them instead of redrawing them.
4. Use Mermaid for the first draft, draw.io for the final one. Type the structure as text, insert it, then drag things around. You skip the tedious part of laying out twenty boxes by hand.
5. Prune the shape panel. Turning off libraries you never use makes the search box far more useful, because it stops returning four versions of the same cloud icon.
6. Learn Ctrl/Cmd+Shift+H. Fit page to window is the shortcut you will use hundreds of times once a diagram outgrows the screen.
7. Install the desktop app for anything sensitive. Same editor, no browser, no network, and an easy answer when someone asks where the architecture diagram was drawn.
8. Remember the PDF caveat. PDF export is the one path that sends your diagram to a server for conversion. Export SVG or PNG instead if that matters to you.

If you like draw.io, also try…

• Excalidraw: the opposite temperament — an infinite canvas where everything comes out hand-drawn, better for thinking out loud than for the diagram that goes in the documentation.
• Mermaid Live Editor: diagrams defined purely as text, with the layout done for you. Faster to write, less control over the result, and the source of the Mermaid you can paste into draw.io.
• CryptPad: the same instinct applied to documents and spreadsheets — real editing, encrypted, with no interest in owning your files.
• Cheatography: for the moment you want a printed one-pager instead of a canvas.

Browse more things worth bookmarking in our Productivity collection.