Kom igång med draw.io

Vad du får ut av det här

Med jämna mellanrum ska du förklara hur något hänger ihop. Hur en beställning går från kundens mobil till paketet som lämnas ut. Vem i företaget som bestämmer vad. Hur du tänker att pengarna rör sig mellan dig, leverantören och kunden. Du kan skriva en halv sida text om det, och ingen läser den. Eller så ritar du en bild på tio minuter, och då fattar alla direkt.

draw.io är verktyget för den sortens bilder. Rutor, pilar, text. Ingen konst, ingen designutbildning, ingen prenumeration. Programmet finns både som en sida i webbläsaren och som ett program du installerar, och filerna du gör är dina egna.

Namnet är förvirrande, så ta det direkt: programmet heter draw.io, sidan heter app.diagrams.net och företaget bakom heter JGraph. Det är samma sak. Bilderna du gör i det ena öppnas i det andra.

Två sätt att köra det, välj ett

I webbläsaren. Gå till app.diagrams.net. Ingenting installeras, och programmet frågar direkt var filen ska sparas: på datorn, i Google Drive, i OneDrive eller i din egen filyta. Det här är rätt val på en dator där du av policyskäl inte får installera något.

Som program på datorn. Ladda ner draw.io Desktop från projektets releasesida på GitHub. Programmet är byggt för att vara avskilt från internet: enligt utvecklarnas egen beskrivning skickas ingen diagramdata ut, och den enda anslutning programmet gör av sig självt är en kontroll av om det finns en nyare version. Det gör skrivbordsversionen till ett bra val när innehållet i skissen inte ska ligga hos någon annan, till exempel när du ritar en produktidé som ännu inte ska visas utåt.

Programmet är gratis under Apache 2.0, både i webbläsaren och på datorn. Det finns betalversioner, men de är insticksmoduler till Confluence och Jira, alltså system du inte kommer i närheten av i ett företag.

Installera på Windows

På releasesidan ligger flera Windows-filer, och skillnaden mellan dem avgör om installationen går igenom på din dator.

• draw.io-VERSION-windows-installer.exe installerar programmet för hela datorn i Program Files och kräver administratörsrättigheter.
• draw.io-VERSION.msi installerar det för din egen användare och kräver inga administratörsrättigheter.
• draw.io-VERSION-windows.zip är en bärbar version. Packa upp zip-filen och starta programmet direkt utan att installera det. Den registrerar inga filkopplingar, alltså öppnas inte en .drawio-fil automatiskt när du dubbelklickar på den. En ren no-installer.exe-fil finns bara för ARM64.

Sitter du på en dator där du inte är administratör: ta msi-filen. Den är gjord för precis det fallet. Fungerar inte heller det, kör den bärbara versionen från en usb-sticka eller använd webbläsarversionen.

Har du en dator med ARM-processor, alltså en del av de nyare bärbara med Windows 11, finns egna ARM64-filer med arm64 i namnet. De körs snabbare än x64-versionen, som annars startar i emulering.

Installera på Linux Mint

draw.io finns inte i Mints egna programförråd, så det blir någon av tre vägar.

Enklast: Flatpak via Programhanteraren. Mint har Flathub förkonfigurerat. Sök efter draw.io i Programhanteraren och installera. Vill du hellre skriva det i Terminal:

flatpak install flathub com.jgraph.drawio.desktop

Deb-filen från projektet. Ladda ner drawio-amd64-VERSION.deb från releasesidan, öppna Terminal i mappen där filen hamnade och kör:

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

Byt ut versionsnumret mot det på filen du laddade ner. Punkten och snedstrecket framför filnamnet är inte en skrivfel utan det som talar om för apt att paketet ligger i mappen och inte i ett förråd. Uppdateringar sköter du själv genom att ladda ner nästa deb-fil.

AppImage. En enda fil du gör körbar och startar. Har du AppImageLauncher installerat sedan tidigare krävs version 3.0 av det, annars vägrar draw.io starta med ett felmeddelande om squashfs image: Bad address. AppImageLauncher behövs inte för att köra filen, så det enklaste är att avinstallera det om felet dyker upp.

Ditt första diagram, en kvart

Starta programmet och välj att skapa en ny fil. Spara den med en gång, i företagets gemensamma mapp, med ett namn som säger vad det är: bestallningsflode.drawio och inte skiss3.drawio.

1. Dra ut en rektangel från panelen till vänster. Dubbelklicka och skriv i den. Det är hela grundprincipen.
2. Håll muspekaren över kanten av rutan tills fyra blå pilar syns. Dra från en av dem till nästa ruta. Nu sitter pilen fast i båda rutorna och följer med när du flyttar dem.
3. Markera en ruta och titta på panelen till höger. Där byter du färg, ram och form.
4. Markera två rutor samtidigt med skift och klicka på Arrange i högerpanelen för att lägga dem i linje. En skiss där rutorna ligger jämnt ser genast tre gånger mer genomtänkt ut.
5. Behöver du en symbol som inte finns i panelen, klicka på More Shapes längst ner. Det finns färdiga uppsättningar för nätverk, lokaler, flödesscheman och mycket annat.

Ett tips som sparar dig tid senare: rita hellre fem små diagram än ett stort. Ett diagram som ska förklara allt förklarar ingenting, och det går inte att lägga in i en presentation utan att texten blir oläslig.

Exportera bilden till rapporten

Filen du arbetar i har ändelsen .drawio och är i grunden en textfil. Den kan ingen annan öppna i Word, så när bilden ska in i rapporten eller presentationen exporterar du den.

Gå till File och sedan Export as. Välj PNG för något som ska in i ett dokument eller en presentation, PDF för något som ska skrivas ut, och SVG när bilden ska tryckas stor, till exempel på en roll-up till en mässa. SVG blir aldrig suddig oavsett hur mycket den förstoras.

Kryssa i Include a copy of my diagram när du exporterar PNG. Då bakas originalet in i bildfilen, och om du tappar bort .drawio-filen kan du öppna PNG-bilden i draw.io och fortsätta redigera. Det låter som en detalj. Det är det tills dagen då någon i företaget har rensat sin nedladdningsmapp.

Höj upplösningen till 200 procent eller mer i exportrutan om bilden ska skrivas ut. Standardvärdet ser bra ut på skärm och grynigt på papper.

Var filen ska ligga

Den vanligaste förlusten i ett företag är inte en hackad server utan en dator som gick sönder en helt vanlig tisdag. Lägg .drawio-filerna där hela företaget kommer åt dem: i Google Drive, i OneDrive eller i din egen filyta om du kör Nextcloud.

Webbläsarversionen kan spara direkt till Drive och OneDrive, då slipper du ladda upp för hand varje gång. Skrivbordsversionen sparar till en mapp på datorn, så lägg den mappen i den synkade mappen i stället för i Dokument.

Två personer bör inte redigera samma fil samtidigt i skrivbordsversionen eller i en lokalt synkad mapp. draw.io slår då inte ihop ändringarna, den som sparar sist skriver över den andra. Öppnar du i stället filen direkt från Google Drive eller OneDrive i webbläsarversionen sker samarbetet i realtid, ungefär som i Google Dokument, och då går det bra att vara flera samtidigt.

Så vet du att det funkade

• Programmet startar och du får upp en tom yta.
• En pil du ritat följer med när du flyttar rutan den sitter i.
• Filen är sparad på ett ställe där minst två i företaget kommer åt den.
• Du har exporterat en PNG som ser skarp ut inklistrad i rapporten.
• Du kan öppna den exporterade PNG-filen i draw.io igen och se rutorna, inte bara bilden.

Om det krånglar

Pilen sitter inte fast utan blir kvar när rutan flyttas. Du drog från en punkt inne i rutan i stället för från kanten. Radera pilen, håll muspekaren över kanten tills de blå pilarna syns och dra därifrån.

Ingenting går att markera eller flytta. Du står troligen i ett låst lager. Öppna Extras och sedan Edit Diagram för att se att innehållet finns kvar, eller titta i lagerpanelen och lås upp lagret.

Bilden blir suddig i presentationen. PNG i standardupplösning. Exportera om i högre upplösning eller ta SVG.

AppImage-versionen startar inte på Mint och nämner squashfs. Det är AppImageLauncher som är för gammal. Avinstallera det eller uppdatera till en 3.0-version.

Du får inte installera något på den delade datorn. Kör msi-filen, den bärbara versionen eller webbläsarversionen. Alla tre ger samma program.

Vad du gör härnäst

Rita upp det du redan har bestämt, inte det du ska bestämma. Ett diagram över hur beställningarna faktiskt går i dag tar tjugo minuter och visar oftast var det läcker.

Behöver du något friare och mer skissartat, med handritad känsla och samarbete i realtid, titta på Excalidraw. draw.io är bättre när bilden ska vara exakt och hålla hela året, Excalidraw är bättre när fem personer ska tänka högt samtidigt.