Get started with draw.io

What you get out of this

Every now and then you need to explain how something fits together. How an order goes from the customer's phone to the package being handed over. Who in the company decides what. How you think the money moves between you, the supplier and the customer. You can write half a page about it, and nobody reads it. Or you can draw a picture in ten minutes, and then everyone understands right away.

draw.io is the tool for that kind of picture. Boxes, arrows, text. No art, no design education, no subscription. The program exists both as a page in the browser and as a program you install, and the files you make are your own.

The name is confusing, so let's get it straight: the program is called draw.io, the site is called app.diagrams.net and the company behind it is called JGraph. It is the same thing. The pictures you make in one open in the other.

Two ways to run it, pick one

In the browser. Go to app.diagrams.net. Nothing is installed, and the program immediately asks where the file should be saved: on your computer, in Google Drive, in OneDrive or in your own file storage. This is the right choice on a computer where policy prevents you from installing anything.

As a program on your computer. Download draw.io Desktop from the project's releases page on GitHub. The program is built to be disconnected from the internet: according to the developers' own description, no diagram data is sent out, and the only connection the program makes on its own is a check for a newer version. That makes the desktop version a good choice when the content of the sketch should not sit with anyone else, for example when you are drawing a product idea that should not be shown externally yet.

The program is free under Apache 2.0, both in the browser and on your computer. There are paid versions, but they are plugins for Confluence and Jira, systems you will not come near in a small company.

Install on Windows

On the releases page there are several Windows files, and the difference between them determines whether the installation goes through on your computer.

• draw.io-VERSION-windows-installer.exe installs the program for the whole computer in Program Files and requires administrator rights.
• draw.io-VERSION.msi installs it for your own user and requires no administrator rights.
• draw.io-VERSION-windows.zip is a portable version. Unpack the zip file and start the program directly without installing it. It registers no file associations, so a .drawio file does not open automatically when you double-click it. A pure no-installer.exe file exists only for ARM64.

If you are on a computer where you are not an administrator: take the msi file. It is made for exactly that case. If that does not work either, run the portable version from a USB stick or use the browser version.

If you have a computer with an ARM processor, meaning some of the newer laptops with Windows 11, there are separate ARM64 files with arm64 in the name. They run faster than the x64 version, which otherwise starts in emulation.

Install on Linux Mint

draw.io is not in Mint's own software repository, so there are three ways to go.

Easiest: Flatpak via the Software Manager. Mint has Flathub preconfigured. Search for draw.io in the Software Manager and install. If you would rather type it in the Terminal:

flatpak install flathub com.jgraph.drawio.desktop

The deb file from the project. Download drawio-amd64-VERSION.deb from the releases page, open Terminal in the folder where the file ended up and run:

cd ~/Hämtningar
sudo apt install ./drawio-amd64-31.4.5.deb

Replace the version number with the one on the file you downloaded. The dot and the slash in front of the file name are not a typo but what tells apt that the package is in the folder and not in a repository. You handle updates yourself by downloading the next deb file.

AppImage. A single file that you make executable and start. If you already have AppImageLauncher installed, version 3.0 of it is required, otherwise draw.io refuses to start with an error message about squashfs image: Bad address. AppImageLauncher is not needed to run the file, so the easiest thing is to uninstall it if the error shows up.

Your first diagram, in a quarter of an hour

Start the program and choose to create a new file. Save it right away, in the company's shared folder, with a name that says what it is: bestallningsflode.drawio and not skiss3.drawio.

1. Drag a rectangle from the panel on the left. Double-click and type in it. That is the whole basic principle.
2. Hover the mouse pointer over the edge of the box until four blue arrows appear. Drag from one of them to the next box. Now the arrow is attached to both boxes and follows when you move them.
3. Select a box and look at the panel on the right. There you change color, border and shape.
4. Select two boxes at the same time with shift and click Arrange in the right panel to line them up. A sketch where the boxes are evenly placed immediately looks three times more thought through.
5. If you need a symbol that is not in the panel, click More Shapes at the bottom. There are ready-made sets for networks, premises, flowcharts and much more.

One tip that saves you time later: draw five small diagrams rather than one big one. A diagram that is meant to explain everything explains nothing, and it cannot go into a presentation without the text becoming unreadable.

Export the image to the report

The file you work in has the extension .drawio and is basically a text file. No one else can open it in Word, so when the image is going into the report or presentation, you export it.

Go to File and then Export as. Choose PNG for something that will go into a document or a presentation, PDF for something that will be printed, and SVG when the image will be printed large, for example on a roll-up for a trade fair. SVG never becomes blurry no matter how much it is enlarged.

Check Include a copy of my diagram when you export PNG. The original is then baked into the image file, and if you lose the .drawio file you can open the PNG image in draw.io and keep editing. It sounds like a detail. It is, until the day someone in the company has cleared their downloads folder.

Raise the resolution to 200 percent or more in the export dialog if the image will be printed. The default value looks good on screen and grainy on paper.

Where the file should be stored

The most common loss in a company is not a hacked server but a computer that broke down on an ordinary Tuesday. Put the .drawio files where the whole company can reach them: in Google Drive, in OneDrive, or in your own file area if you run Nextcloud.

The browser version can save directly to Drive and OneDrive, so you do not have to upload by hand every time. The desktop version saves to a folder on the computer, so put that folder in the synced folder instead of in Documents.

Two people should not edit the same file at the same time in the desktop version or in a locally synced folder. draw.io does not merge the changes then, and whoever saves last overwrites the other. If you instead open the file directly from Google Drive or OneDrive in the browser version, collaboration happens in real time, much like in Google Docs, and then it works fine to be several people at once.

How you know it worked

• The program starts and you get an empty canvas.
• An arrow you have drawn moves with the box it is attached to when you move the box.
• The file is saved in a place where at least two people in the company can access it.
• You have exported a PNG that looks sharp when pasted into the report.
• You can open the exported PNG file in draw.io again and see the boxes, not just the image.

If something goes wrong

The arrow does not stay attached but remains when the box is moved. You dragged from a point inside the box instead of from the edge. Delete the arrow, hover over the edge until the blue arrows appear and drag from there.

Nothing can be selected or moved. You are probably in a locked layer. Open Extras and then Edit Diagram to check that the content is still there, or look in the layer panel and unlock the layer.

The image becomes blurry in the presentation. PNG at standard resolution. Export again at a higher resolution or use SVG.

The AppImage version does not start on Mint and mentions squashfs. AppImageLauncher is too old. Uninstall it or update to a 3.0 version.

You are not allowed to install anything on the shared computer. Run the msi file, the portable version or the browser version. All three give you the same program.

What you do next

Draw what you have already decided, not what you are going to decide. A diagram of how orders actually flow today takes twenty minutes and usually shows where the leaks are.

If you need something freer and more sketch-like, with a hand-drawn feel and real-time collaboration, look at Excalidraw. draw.io is better when the picture needs to be exact and last all year, Excalidraw is better when five people need to think out loud at the same time.