Excalidraw: schetsen in je browser

Excalidraw is een samentrekking van het mythische zwaard Excalibur en ‘draw’, maar de naam bevat ook hints naar ‘excellent’ en naar ‘calli’, wat mooi betekent. Hoe het ook zij, deze toepassing draait volledig in je browser, maar kun je ook als een soort desktop-app (PWA, Progressive Web App) installeren – in Chrome via de knop Installeren, rechts van de adresbalk. Excalidraw laat je zowel visueel brainstormen als stroomdiagrammen en andere ontwerpen, zoals wireframes (voor een website of web-app) en mindmaps schetsen. Dit gebeurt bovendien in een kenmerkende, charmante handgetekende stijl.

De app is gratis voor individueel gebruik, je hebt niet noodzakelijk een account nodig en je tekeningen worden automatisch in de lokale browseropslag bewaard. Omdat deze weleens onverwacht kan worden leeggemaakt, bewaar of exporteer je je ontwerpen bij voorkeur regelmatig op schijf. Met het hands-on traject uit dit artikel gebruik je Excalidraw in een mum van tijd als een pro.

Ga met je favoriete browser naar www.excalidraw.com. Je krijgt meteen een leeg, oneindig canvas te zien. Het thema, de taal en de achtergrondkleur bepaal je vanuit het uitklapmenu via de knop linksboven.

Bovenaan staat een knoppenbalk met een dozijn tekentools. De knop uiterst rechts geeft toegang tot een zevental extra opties, zoals Frame tool, Web Embed, Laseraanwijzer en Lasso selectie, plus enkele tools om een diagram te genereren of code uit een diagram af te leiden, met behulp van AI. Zodra je een vorm tekent en selecteert, verschijnen in het zijpaneel aangepaste opties voor onder meer kleur, lijnen, transparantie, lettertype, lagen en acties als dupliceren.

Een object tekenen is eenvoudig: selecteer de gewenste vorm, zoals rechthoek, ruit of ovaal, en teken deze met een ingedrukte linkermuisknop op het canvas. Houd Shift ingedrukt tijdens het slepen om perfecte vierkanten of cirkels te maken. Dubbelklik op een specifieke plek in zo’n vorm om daar meteen tekst te plaatsen. Je zult merken dat na je actie de tool standaard terugkeert naar de selectiemodus (witte pijl in de knoppenbalk), tenzij je dit vergrendelt (hangslotje in de knoppenbalk).

Wil je bijvoorbeeld een stroomdiagram tekenen, plaats dan eerst de nodige rechthoeken en geef deze het gewenste label. Met de pijltool uit de menubalk sleep je vervolgens een pijl van het ene naar het andere vak. Je zult zien dat de pijl zich vastgrijpt aan de vormen. Versleep je daarna zo’n vak, dan rekken de pijlen automatisch mee en blijven ze netjes verbonden. Foutje gemaakt? Met Ctrl+Z keer je meteen een stap terug.

Verplaats je een object deels over een ander en wil je dit op de z-as verplaatsen, klik dan met rechts op zo’n object en geef de gewenste verschuiving aan in het contextmenu, zoals Breng naar Voren of Stuur naar achtergrond. Je vindt hier ook opties om horizontaal of verticaal te spiegelen.

Met het scrolwiel van de muis versleep je het canvas verticaal of, met ingedrukte Shift, horizontaal. Of je houdt Ctrl ingedrukt om in en uit te zoomen.

Naast vormen zoals rechthoeken, ovalen en pijlen kun je nog andere objecten toevoegen. Zo laat de lijntool je met een soort Bézier-curves werken. Plaats het eerste punt en klik opnieuw om extra punten toe te voegen. Dubbelklik of druk op Enter om de lijn te beëindigen. Dit kan ook een vlak zijn, want Excalidraw beschouwt een gesloten omtrek als een vorm, met achtergrond en invulling.

Wil je de vorm later aanpassen, selecteer dan de lijn en dubbelklik erop om alle knooppunten te zien. Je kunt de witte ankerpunten verslepen, maar ook de paarse invoegpunten gebruiken. Klik je op deze laatste, dan voeg je nieuwe knooppunten toe om de curve nauwkeuriger te tekenen.

Onder de knop Meer tools zitten nog enkele handige extra’s. Met Web Embed kun je bepaalde web-inhoud, zoals een interactief element, rechtstreeks in je ontwerp insluiten. Teken het kader voor de web-embed en vul daarna de url naar dat element in. Dat kan bijvoorbeeld een embed-url naar een YouTube-video zijn, een Figma-ontwerp of een OSM-kaartje. In dit menu vind je ook een Laseraanwijzer, vooral nuttig tijdens een livepresentatie (zie verder). Met Frame tool kun je een afgebakend stuk van je canvas framen: selecteer de framerand, open het menu en kies Exporteer afbeelding, waarbij je Alleen geselecteerd inschakelt.

Wanneer je diagrammen uitgebreider worden, wil je natuurlijk het overzicht bewaren. Gelukkig bevat Excalidraw enkele slimme functies om elementen overzichtelijk en bewerkbaar te houden.

Wil je complete delen van een diagram verplaatsen zonder de onderlinge verhoudingen te verliezen, sleep dan eerst met de muis een kader om de gewenste objecten. Je kunt ook Shift ingedrukt houden terwijl je alle nodige objecten afzonderlijk aanklikt. Klik vervolgens met rechts op een geselecteerd object en kies Groeperen in het contextmenu, of gebruik de sneltoets Ctrl+G. Je kunt de volledige groep nu als één object verplaatsen. Om de objecten weer los te koppelen, gebruik je Groep opheffen of de sneltoets Ctrl+Shift+G.

Objecten laten zich ook eenvoudig uitlijnen. Selecteer de objecten die je wilt ordenen en kies in het zijpaneel de gewenste uitlijning bij Uitlijnen – niet bij Uitlijning, want dit heeft betrekking op tekst. Je kunt tekst trouwens op elk moment via het contextmenu van een object loskoppelen en later opnieuw verbinden.

Heb je bijvoorbeeld een bedrijfslogo of een vaste legenda geplaatst en wil je vermijden dat je deze per ongeluk wijzigt, klik dan met rechts op het object en kies Vergrendel. Met Ontgrendel maak je dit weer ongedaan.

Efficiëntie

Gebruik je vaker dezelfde objecten, zoals specifieke pictogrammen of logo’s, in je ontwerpen, dan hoef je deze gelukkig niet telkens opnieuw te maken. Excalidraw ondersteunt namelijk externe bibliotheken met herbruikbare vormen. Zo zijn er gratis communityverzamelingen beschikbaar voor onder meer netwerkdiagrammen, cloudarchitecturen, stokfiguren, UML-schema’s (Unified Modeling Language) en zelfs complete gebruikersinterfaces.

Klik rechtsboven op Bibliotheek en vervolgens op het openboekicoon. Kies Blader door bibliotheken of ga daar rechtstreeks naartoe. Klik bij de gewenste verzameling op Add to Excalidraw of op Download. In het tweede geval importeer je het bijbehorende excalidrawlib-bestand via de knop met de drie puntjes in het bibliotheekvenster. Met de eerste optie gebeurt dit automatisch en meteen. De nieuwe vormen verschijnen in het bibliotheekvenster, waarna je er een of meerdere kunt selecteren of naar je canvas verslepen.

Je kunt ook eigen objecten aan je bibliotheek toevoegen. Selecteer een of meer objecten op het canvas, klik met rechts op je selectie en kies Voeg toe aan bibliotheek in het contextmenu. De objecten zijn nu beschikbaar in het bibliotheekvenster. Je kunt deze eventueel opslaan via de knop met de drie puntjes, leegmaken en opnieuw importeren. Let wel: je bewaarde bibliotheken belanden standaard in de lokale browseropslag. Bewaren in de cloud is voorbehouden aan Excalidraw Plus (vanaf 6 dollar per maand; 14 dagen gratis proefperiode). Hier vind je een uitgebreide vergelijking tussen beide.

Excalidraw houdt je wijzigingen continu bij in de browseropslag, maar dat is niet zonder risico. Wis je bijvoorbeeld cookies of je volledige browsergeschiedenis, dan ben je mogelijk ook je lokale tekeningen kwijt. Bewaar je ontwerpen daarom regelmatig. Open het menu Bestand en kies Sla op. Vul bij Opslaan op schijf een bestandsnaam in en bevestig met Opslaan naar bestand. De tekening krijgt de extensie .excalidraw. Je kunt dit bestand later naar het programmavenster verslepen of laden via de menuknop, bij Open / Laad vanuit bestand.

Is je tekening klaar en wil je deze delen of bijvoorbeeld invoegen in een rapport, kies dan in het menu Exporteer afbeelding. Stel eventueel Achtergrond, Dark mode en de gewenste Schaal in (1x, 2x of 3x). Je kunt hier ook Scène embedden activeren. Excalidraw sluit dan de volledige bewerkbare broncode in de afbeelding in. Open je het bewaarde png- of svg-bestand later opnieuw in Excalidraw, dan herkent de tool de losse vormen en kun je de afbeelding weer aanpassen. Dit vergroot wel de omvang van het opgeslagen bestand.

Excalidraw is vrij rechttoe rechtaan, maar biedt ook enkele workflows die meer op professionele omgevingen zijn gericht.

Zo kun je bijvoorbeeld in een AI-tool als ChatGPT vragen om Mermaid-code voor een stroomdiagram te genereren. Kopieer deze vervolgens naar het klembord, open Meer tools in Excalidraw en kies Mermaid naar Excalidraw. Vervang de voorbeeldcode met Ctrl+V door je AI-code en bevestig met Invoegen. Daarna kun je het diagram verder bewerken.

Ook samenwerken behoort in beperkte mate tot de mogelijkheden van de gratis versie. Klik rechtsboven op de knop Deel en kies Exporteer naar link / Link kopiëren. Of kies Start sessie voor live samenwerking. Bevestig met Link kopiëren en de ontvangers kunnen samen met jou ontwerpen. Je ziet elkaars cursor, inclusief de toegewezen gebruikersnaam, bovendien live over het scherm bewegen.

Excalidraw kun je ook als presentatietool gebruiken. Door slim gebruik te maken van het oneindige canvas bouw je als het ware een visueel verhaal op, bijvoorbeeld met links de probleemstelling, in het midden de analyse en rechts de uitgewerkte oplossing. Tijdens je presentatie zoom en pan je vloeiend van het ene naar het andere onderdeel, waarbij je handig gebruikmaakt van de ingebouwde laserpointer.