Kom igång med Excalidraw

Vad du får ut av det här

Excalidraw är en oändlig whiteboard i webbläsaren. Allt du ritar ser ut att vara ritat för hand med tuschpenna, lite skevt och medvetet oputsat, och det är hela poängen. En skiss som ser färdig ut får folk att tycka till om färgerna. En skiss som ser slarvig ut får dem att tycka till om innehållet.

För ett företag är det verktyget du tar fram när fem personer ska tänka högt samtidigt: idékläckning inför en lansering, en snabb bild på hur butiken ska möbleras, en förklaring av produkten som ska in i en presentation i morgon. Flera kan rita i samma yta samtidigt och se varandras markörer.

Programmet är gratis och öppen källkod under MIT-licens. Det finns en betaltjänst som heter Excalidraw+, men den gratis versionen på excalidraw.com räcker gott för de flesta företag.

Det finns inget program att installera, och det är med flit

Excalidraw körs i webbläsaren. Det fanns en gång ett skrivbordsprogram byggt på Electron, men projektet självt märkte det som avvecklat redan 2020 och det har inte uppdaterats sedan dess. Ladda inte ner det. Allt som finns i det finns i webbläsarversionen, och den är den som utvecklas.

Det betyder inte att du behöver vara uppkopplad. Sidan går att installera som en app på både Windows och Linux Mint, och den fungerar då även utan nätverk. Dina teckningar sparas automatiskt i webbläsaren på just den datorn, inte hos Excalidraw.

Installera som app på Windows

Öppna excalidraw.com i Chrome eller Edge. I adressfältet, längst till höger, dyker en liten ikon upp som ser ut som en skärm med en pil. Klicka på den och välj Installera. Finns ikonen inte, öppna menyn med tre punkter och leta efter Appar och sedan Installera den här webbplatsen som en app.

Excalidraw hamnar då i Startmenyn som vilket program som helst, öppnas i ett eget fönster utan adressfält och startar även när nätet ligger nere.

Firefox på Windows kan sedan version 143 också installera webbsidor som appar, via en liten ikon för att lägga till fliken i aktivitetsfältet. Har du en äldre Firefox, eller Microsoft Store-versionen som behöver version 150, fungerar sidan ändå precis som vanligt, du får bara ingen egen ikon. Vill du vara säker på att det fungerar oavsett version, använd Chrome eller Edge för installationen.

Installera som app på Linux Mint

Samma sak, med Chrome, Chromium eller Edge. Öppna excalidraw.com, klicka på installationsikonen i adressfältet och bekräfta. Appen läggs till i menyn under Grafik.

Kör du Mints förinstallerade Firefox gäller samma begränsning som på Windows: sidan fungerar, men den går inte att installera. Chromium installeras i så fall enklast från Programhanteraren.

Ingen del av det här kräver terminalen. Vill du ändå kontrollera att du har en webbläsare som klarar det, räcker det att titta efter installationsikonen i adressfältet.

Rita något på fem minuter

Verktygsraden ligger överst. Siffrorna 1 till 9 på tangentbordet väljer verktyg, och de två du använder mest är 2 för rektangel och 5 för pil.

1. Tryck 2 och dra ut en ruta. Dubbelklicka i den och skriv. Texten fastnar i rutan och följer med när du flyttar den.
2. Tryck 5 och dra från kanten av en ruta till kanten av en annan. Pilen fäster i båda och böjer sig när rutorna flyttas.
3. Markera något och använd panelen till vänster för färg, fyllning, linjetjocklek och teckensnitt.
4. Håll ner mellanslag och dra för att flytta hela ytan. Ytan är oändlig, så det gör inget att det blir trångt.
5. Tryck Ctrl och Z när något blir fel. Det fungerar hela vägen tillbaka.

Under menyn uppe till vänster finns Canvas background, där du byter bakgrundsfärg. Uppe till höger finns en egen knapp, Library, med ett bibliotek av färdiga figurer som andra har lagt upp. Biblioteket är värt fem minuter innan mässan: det finns färdiga mobiler, personer, molnsymboler och pilar som gör en skiss läsbar för någon som inte var med när du ritade den.

Rita tillsammans, och vad som faktiskt skickas

Klicka på Live collaboration uppe till höger och sedan på Start session. Du får en länk att skicka till resten av företaget. Alla som har länken ser samma yta och kan rita i den samtidigt, och ni ser varandras markörer med namn.

Enligt projektets egen dokumentation är samarbetsläget krypterat från ände till ände. Nyckeln ligger i den del av länken som kommer efter tecknet #, och den delen skickas aldrig till servern. Servern vidarebefordrar alltså krypterade paket utan att kunna läsa dem.

Det praktiska att förstå av det: länken är lösenordet. Den som får länken vidarebefordrad kommer in i ytan. Lägg inte upp den i en öppen chatt och avsluta sessionen när du är klar. Behöver du bara dela en ögonblicksbild utan att fler ska rita i realtid, använd Shareable link i stället. Mottagaren får en egen fristående kopia att titta i och kan redigera den, men ändringarna delas aldrig tillbaka till din yta.

Spara, och den fälla som kostar en kväll

Excalidraw sparar automatiskt i webbläsaren på den dator du sitter vid. Det räcker från förmiddag till eftermiddag. Det räcker inte på lång sikt, för det försvinner när någon rensar webbläsardata, byter dator eller använder ett privat fönster.

Gör så här i stället, varje gång du ritat något du vill ha kvar: öppna menyn och välj Save to disk. Du får en fil med ändelsen .excalidraw, som är ren text i JSON-format. Lägg den i företagets delade mapp. Filen öppnas sedan med Open i vilken webbläsare som helst.

Ska bilden in i ett dokument, välj Export image. PNG för presentationer och rapporter, SVG när bilden ska tryckas stort. Kryssa i Embed scene vid export, då bakas originalet in i bildfilen och den går att öppna och redigera igen i Excalidraw. Utan den kryssrutan får du en bild och inget mer.

Köra Excalidraw på en egen server

Det här steget är frivilligt och bara intressant om du ändå håller på med Docker. Det finns en färdig avbild, och den startas med ett kommando:

docker run -d --name excalidraw -p 5001:80 excalidraw/excalidraw

Sedan öppnar du http://localhost:5001. Kommandot är kört och kontrollerat på en Linux-maskin med Docker installerat, och sidan svarar direkt efter start.

En sak ska du veta innan du tror att du har flyttat hem allt: samarbete i realtid ingår inte i den här avbilden. Det kräver en separat tjänst som heter excalidraw-room, och utan den fungerar din egen installation för att rita ensam men inte för att rita tillsammans. Behöver du samarbetet är excalidraw.com det enklare valet, och krypteringen gör att innehållet ändå inte är läsbart för servern.

Docker på egen dator går igenom i guiden Installera Docker.

Så vet du att det funkade

• Excalidraw startar i ett eget fönster från Startmenyn eller programmenyn.
• Ytan fungerar även med nätverket avstängt.
• En pil du ritat följer med när rutan flyttas.
• Du har en .excalidraw-fil sparad i företagets delade mapp, inte bara i webbläsaren.
• En exporterad PNG med Embed scene går att öppna i Excalidraw igen.

Om det krånglar

Teckningen är borta när du öppnar på en annan dator. Det är väntat. Excalidraw sparar lokalt i webbläsaren. Spara till fil och lägg filen i den delade mappen.

Ingen installationsikon syns i adressfältet. Du sitter i Firefox, eller i ett privat fönster. Byt till Chrome, Chromium eller Edge i ett vanligt fönster.

Någon i företaget ser inte det du ritar. Antingen står du i en vanlig yta i stället för i en session, eller så har personen öppnat en delningslänk som bara går att titta i. Starta Live collaboration och skicka länken därifrån.

Pilen fäster inte i rutan. Dra från kanten av rutan, inte från mitten, och släpp när rutan blir markerad.

Texten hamnar bredvid rutan i stället för i den. Du skapade en fristående textruta. Radera den, dubbelklicka i stället inne i rutan och skriv där.

Vad du gör härnäst

Boka en halvtimme med hela företaget, starta en session och rita upp veckan som kommer. Det tar bort fler missförstånd än ett möte gör.

Ska bilden i stället hålla länge och vara exakt, till exempel ett flödesschema som ska användas om och om igen, är draw.io rätt verktyg. Och behöver du skriva ner det du kom fram till, inte rita det, titta på Joplin.