Kom igång med Excalidraw

Vad ni får ut av det här

Excalidraw är en oändlig whiteboard i webbläsaren. Allt ni 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 ni 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 ni behöver vara uppkopplade. Sidan går att installera som en app på både Windows och Linux Mint, och den fungerar då även utan nätverk. Era 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 ni en äldre Firefox, eller Microsoft Store-versionen som behöver version 150, fungerar sidan ändå precis som vanligt, ni får bara ingen egen ikon. Vill ni vara säkra 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 ni 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 ni ändå kontrollera att ni 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å ni 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 ni 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 ni 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 ni ritade den.

Rita tillsammans, och vad som faktiskt skickas

Klicka på Live collaboration uppe till höger och sedan på Start session. Ni 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 ni är klara. Behöver ni 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 er yta.

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

Excalidraw sparar automatiskt i webbläsaren på den dator ni 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 ni ritat något ni vill ha kvar: öppna menyn och välj Save to disk. Ni 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 ni en bild och inget mer.

Köra Excalidraw på en egen server

Det här steget är frivilligt och bara intressant om ni ä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 ni 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 ni veta innan ni tror att ni 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 er egen installation för att rita ensam men inte för att rita tillsammans. Behöver ni 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 ni 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 ni ritat följer med när rutan flyttas.
• Ni 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 ni ö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. Ni 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 ni ritar. Antingen står ni 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. Ni skapade en fristående textruta. Radera den, dubbelklicka i stället inne i rutan och skriv där.

Vad ni 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 ni skriva ner det ni kom fram till, inte rita det, titta på Joplin.