Kom igång med draw.io

Vad ni får ut av det här

Med jämna mellanrum ska ni 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 ni tänker att pengarna rör sig mellan er, leverantören och kunden. Ni kan skriva en halv sida text om det, och ingen läser den. Eller så ritar ni 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 ni installerar, och filerna ni gör är era 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 ni 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 er egen filyta. Det här är rätt val på en dator där ni 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 ni 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 ni 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å er 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 er 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 ni dubbelklickar på den. En ren no-installer.exe-fil finns bara för ARM64.

Sitter ni på en dator där ni 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 ni 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 ni 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 ni 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 ni själva genom att ladda ner nästa deb-fil.

AppImage. En enda fil ni gör körbar och startar. Har ni 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.

Ert 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 ni flyttar dem.
3. Markera en ruta och titta på panelen till höger. Där byter ni 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 ni 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 er 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 ni 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 ni 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 ni exporterar PNG. Då bakas originalet in i bildfilen, och om ni tappar bort .drawio-filen kan ni ö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 er egen filyta om ni kör Nextcloud.

Webbläsarversionen kan spara direkt till Drive och OneDrive, då slipper ni 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 ni 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 ni att det funkade

• Programmet startar och ni får upp en tom yta.
• En pil ni ritat följer med när ni flyttar rutan den sitter i.
• Filen är sparad på ett ställe där minst två i företaget kommer åt den.
• Ni har exporterat en PNG som ser skarp ut inklistrad i rapporten.
• Ni 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. Ni 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. Ni 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.

Ni 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 ni gör härnäst

Rita upp det ni redan har bestämt, inte det ni 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 ni 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.