Ein Bild sagt mehr als tausend Worte – das gilt um so mehr bei IT und Technik, wo uns eine Zeichnung die Zusammenhänge oft am besten aufzeigen kann. Excalidraw kann dabei helfen: Die kostenfreie & quelloffene Software hat sich auf Diagramme spezialisiert, die wie Handgezeichnet aussehen. Aber eben, ohne Handgezeichnet zu sein, wodurch neue Herausforderungen entstehen würden.
Dieser Beitrag stellt Excalidraw vor und zeigt, wie du damit (wahlweise handgezeichnete) Diagramme oder Skizzen erstellst. Auch der eigenständige Betrieb auf Basis von Docker ist enthalten.
Excalidraw sieht handgezeichnet aus, ohne von Hand zeichnen zu müssen
Dafür verwendet man vorgefertigte Objekte wie z.B. Kästen und Linien, die optisch wie handgezeichnet aussehen. So hat man dieses Aussehen, das ja durchaus seinen eigenen Stil und Charme hat – aber eben mit fertigen Elementen. Die wurden einmal angelegt und sehen garantiert vernünftig aus, unabhängig von den Zeichenkünsten des Nutzers. Selbst wenn diese vorhanden sind, erspart man sich teure/inkompatible spezielle Hardware. Oder alternativ den Weg der Digitalisierung.
Cloud ist möglich, aber ohne Zwang
An sich ist das keine neue Idee, es gibt verschiedene Dienste, die so etwas anbieten. Entsprechend des Trends zu mehr Abhängigkeit und damit Umsatz sind es jedoch oft proprietäre Webanwendungen. Excalidraw versucht hier zumindest einen Mittelweg zu finden, in dem es eine Basisversion kostenfrei und als quelloffene Software jedem frei zur Verfügung stellt. Man kann den Dienst also selbst betreiben und ist damit unabhängig von Clouddiensten. Wer das nicht möchte, hat alternativ auch die Möglichkeit, den offiziell gehosteten Dienst zu verwenden.1 Damit ist man zwar vom Anbieter abhängig, kann jedoch eine Abogebühr vermeiden. Kurzum lässt man dem Nutzer die Wahl zwischen Cloud und selbst hosten.
Ein Teil der Funktionen ist allerdings in der kostenfreien OS-Version nicht enthalten. Dies betrifft vor allem die Zusammenarbeit mit anderen, folgendes Bildschirmfoto zeigt einen Auszug.2 Wer also beispielsweise mit Kollegen gemeinsam zeichnen möchte oder Folien für eine Präsentation in der Schule/Uni vorbereitet, muss mit Einschränkungen rechnen.
Was kann Excalidraw?
Dennoch ist die kostenfreie Version durchaus nützlich, um beispielsweise ansprechende Schaubilder zu erstellen. Die Leiste im oberen Bereich enthält die wichtigsten dafür nötigen Werkzeuge: Mit der Hand lässt sich das Board verschieben. So müsst ihr euch keine Gedanken darum machen, wo ihr platztechnisch als nächstes weiter macht. Auch bei größeren Zeichnungen ist das hilfreich zur Navigation. Hier macht es ggf. zusätzlich Sinn, links unten mit dem Zoom die Ansicht zu vergrößern oder verkleinern.
Der Zeiger ermöglicht die Auswahl & Anpassung von Objekten, welche sich rechts daneben befinden: Rechtecke, Kreise und andere Formate stehen bereit. Sie lassen sich mit Pfeilen und Linien verbinden, auch Text kann eingefügt werden. Wer mutig ist, kann über den Stift frei Hand zeichnen. Hat man einen Fehler gemacht, hilft der Radiergummi – oder alternativ die [ENTF] Taste, nachdem mit dem Auswahlwerkzeug das Objekt angeklickt wurde. Alle Werkzeuge lassen sich alternativ mit der Tastatur ansteuern, etwa die 1 für ein Rechteck. Meist stehen die Tasten rechts unten im Eck. Sie erscheinen (mit alternativen Belegungen) zudem, wenn man die Maus darauf bewegt.
Ein Teil ist in das Überhangmenü (letzter Knopf mit drei geometrischen Figuren) gewandert: Das Frame Tool kann einen Kasten erzeugen, um Elemente sichtbar zu gruppieren. Ich habe ihn im Beispiel oben für die Box Docker Container eingesetzt. Das ist aber nicht nur ein optisches Element. Alle Elemente in einem solchen Rahmen lassen sich gebündelt verschieben, ohne sie einzeln mit gedrückter [STRG] Taste anklicken zu müssen.
Für einige Werkzeuge (etwa die Formen) erscheint nach der Aktivierung links eine Box mit zusätzlichen Einstellungen. So kann beispielsweise die Hintergrundfarbe und Art der Füllung bearbeitet werden oder die Ecken lassen sich scharfkantig statt abgerundet darstellen. Wem der händische Zeichenstil zu spielerisch wirkt, der kann unter Sloppiness diesen in drei Stufen verändern. Ganz links verschwindet er komplett.
Möchte man Elemente verbinden, muss man den Pfeil nur bis in die Nähe des Objektes bewegen, bis ein schwacher Rahmen erscheint. Wird nun geklickt, verankert Excalidraw den Pfeil, sodass eine Verbindung entsteht. Die Software verschiebt sie dadurch automatisch, wenn man die Boxen bewegt.
Praktisch: Hält man die [Shift] Taste gedrückt, wird der Winkel nicht mehr 100% frei platziert, sondern in etwas größeren Schritten. Die standardmäßige freie Platzierung ist zwar flexibel, macht es aber schwieriger, mehrere Pfeile im gleichen horizontalen/vertikalen Winkel zu zeichnen. Man muss genau hinschauen, ob man ein paar Pixel zu weit links/rechts ist. Durch die [Shift] Taste wird das erleichtert.
Grafiken sind ebenfalls kein Problem, verschiedene Formate inklusive SGV lassen sich per Drag & Drop auf die Arbeitsfläche ziehen. Vergrößern und verkleinern geschieht automatisch proportional. Für die meisten Fälle ist das sicher hilfreich. Falls im Einzelfall doch mal etwas unproportional angepasst werden sollte, habe ich dafür allerdings keine Möglichkeit gefunden – auch [SHIFT]/[STRG] gedrückt halten hilft nicht.
Bibliotheken bringen mehr vorgefertigte Objekte
Mit diesen grundlegenden Werkzeugen kann man einfache Diagramme erstellen oder komplexere Dinge selbst zeichnen. Letzteres ist mühsam, praktischerweise gibt es Bibliotheken (Libraries): Jede Instanz hat seine eigene, standardmäßig ohne Inhalt. Jeder kann eigene Objekte erstellen, in einer Bibliothek bündeln und unter libraries.excalidraw.com anderen kostenfrei zur Verfügung stellen. Dort finden sich zahlreiche, meist handgezeichnete Grafiken von eigenen Symbolen über bekannten Logos bis hin zu GPIO-Ports des Raspberry Pi oder einer Arduino Uno Platine. Manche enthalten nur eine Hand voll Elemente, andere bis zu 50 Stück.
Der Vorteil gegenüber händisch eingefügten Grafiken: Die Meisten sind selbst gezeichnet und passen daher besser zum Stil von Excalidraw. Außerdem lassen sich viele bearbeiten. Selbst wenn manche nicht ganz für den eigenen Zweck passen, ist das ggf. einfacher, als komplett selbst zu zeichnen.
Speichern und Exportieren
Die Änderungen speichert Excalidraw im Browser ab. Man kann den Reiter einfach schließen und später wieder aufrufen, um mit dem Stand weiterzuarbeiten, an dem aufgehört wurde. Zum Arbeiten mag das in Ordnung sein. Spätestens, wenn man eine weitere Grafik erstellen möchte, muss die vorherige zuvor gespeichert werden – ansonsten geht ihr Inhalt beim Anlegen einer neuen Leinwand verloren.
Wer auf Nummer Sicher gehen oder das fertige Bild exportieren möchte, kann dies oben links über das Hamburger Menü tun. Beim Speichern lässt sich eine .excalidraw Datei herunterladen. Dabei handelt es sich um ein JSON-Dokument, in dem alle Objekte mit ihrer Position und Größe definiert sind. Bilder werden Base64 kodiert eingebettet. Sie kann mit Open geladen werden. Serverseitiges abspeichern ist nur im Cloud-Abo mit Excalidraw+ möglich. Alternativ lässt sich auch mit der kostenfreien, selbst gehosteten Version an dieser Stelle zumindest ein Link erstellen, mit dem andere das Board lesend einsehen können.
Vor dem Export können noch ein paar Einstellungen zu den Farben und dem Hintergrund festlegen. Besonders praktisch: Die Grafik kann auf bis zu 300% skaliert werden. Das ist hilfreich für größere Zeichnungen, welche man vielleicht in eine Präsentation einbauen und zur besseren Lesbarkeit vergrößern möchte. Dafür sollten ggf. eingebaute Bilder passend gewählt werden, am besten Vektorgrafiken.
Mit Embed scene werden die Rohdaten zur Bearbeitung (das JSON-Dokument beim Speichern) an die Grafik angeheftet. Für Anzeigeprogramme sind sie unsichtbar. Zum einbetten auf Webseiten ist das wenig sinnvoll, weil so die Datei unnötig aufgebläht wird. Ansonsten hat das den Vorteil, dass die Grafik sichtbar ist: Die .excalidraw Datei lässt sich nur durch den Import betrachten. Durch das Einbetten hat man eine Datei, welche mit jedem Bildprogramm angeschaut werden kann und auch im Dateiexplorer eine Vorschau besitzt. Zeitgleich sind darin alle für Excalidraw notwendigen Informationen enthalten, um sie Bearbeiten zu können. Das ist eine Alternative zur Verwendung von zwei getrennten Dateien.
Zusammenarbeit mit anderen
Mittlerweile wurde eine Funktion eingebaut, um in Echtzeit mit anderen an einer Zeichnung arbeiten zu können. Ihr findet die Funktion im Hamburger Menü links oben:
Leider ist sie derzeit lediglich in der Cloud-Version verfügbar, die von Excalidraw betrieben wird. In der selbst betriebenen fehlen die Funktionalitäten zum Teilen & mit anderen arbeiten.3 Neben dem
Wir probieren es trotzdem
Dabei wird Ende-zu-Ende-Verschlüsselung genutzt. In Testumgebungen, die nur HTTP verwenden, lauert dadurch allerdings ein Fallstrick: Statt die Sitzung zu starten, passiert beim Klick auf den Knopf nichts. In der Browser-Konsole taucht dabei eine Fehlermeldung auf:
Uncaught (in promise) TypeError: window.crypto.subtle is undefined
Dies liegt nicht an einer fehlenden oder unvollständigen Unterstützung im Browser, sondern ist in der Spezifikation der WebCrypto-Schnittstelle4 so vorgesehen, wenn sie in einem unsicheren Kontext genutzt wird:
Note: In the spec, crypto.subtle is supposed to be undefined in insecure contexts, whereas in Chrome it is defined however any operation on it fails with NotSupportedError.
Dabei scheint localhost ausgenommen zu sein. Wer allerdings beispielsweise einen Testserver im lokalen Netz verwendet, kann keine Live-Sitzung starten. Hierfür muss eine Umgebung mit HTTPS verwendet werden. Kostenfreie Zertifikate bietet die freie Zertifizierungsstelle Let’s Encrypt. Sie ist z.B. im auf Docker optimierten Reverse Proxy Traefik integriert.
Nachdem dieses Problem gelöst ist, verbindet sich Excalidraw allerdings weiterhin zum Websocket-Server aus deren Cloud – oder besser gesagt versucht es. Aufgrund von Beschränkungen durch CORS kann es ohnehin nicht funktionieren. Derzeit fehlt noch die Möglichkeit, den Websocket-Server selbst zu betreiben und die Adresse für die Anwendung setzen zu können – schade. Allerdings betont das Team, man arbeite daran. Ein Zeithorizont ist derzeit nicht bekannt.
Installation
Auf X86-Systemen könnt ihr das offizielle Image verwenden.5 Dies besitzt allerdings keine Tags mit semantischer Versionierung, sodass automatische Aktualisierungen (z.B. per Watchtower) nur über den „latest“ Tag möglich sind. Dabei verliert ihr jedoch die Kontrolle.
Die docker-compose.yml fällt sehr überschaubar aus und benötigt nur wenige MB an Ressourcen, da die Dateiverarbeitung komplett im Browser erfolgt. Auf dem Server wird lediglich der schlanke Nginx Webserver gestartet.
Folgendes Beispiel macht den Dienst auf Port 5000 erreichbar. Dieser kann frei angepasst werden. Zur produktiven Nutzung empfiehlt sich ein Reverse Proxy wie Traefik, der die Nutzung sprechender DNS-Namen wie z.B. Subdomains ermöglicht.
services:
excalidraw:
image: excalidraw/excalidraw:latest
ports:
- 5000:80
restart: always
mem_limit: 128MBdocker compose upAlternativ kann das Image selbst gebaut werden. Auf diesem Weg lässt sich Excalidraw auch auf dem Raspberry Pi und anderen ARM-Systemen betreiben: Das Projekt setzt auf NodeJS und ist damit grundsätzlich plattformunabhängig. Daher hat bereits jemand versucht, die Images über einen Pull-Request auch für die ARM-Architektur zu erstellen.6 Dieser ist bisher offen, da es zu verschiedenen Problemen gekommen ist: So sind die Buildjobs recht langsam & es fehlt an Docker-Erfahrung.
git clone https://github.com/excalidraw/excalidraw.git
cd excalidraw
docker compose upErreichbar ist der Dienst anschließend über http://serverIp:3000.
Fazit
In wenigen Minuten hat man mit Excalidraw ein ansprechendes Schaubild erstellt – das wahlweise mehr, weniger oder gar nicht nach handgezeichnet aussieht. Egal wofür man sich entscheidet: Auch der schlechteste Zeichner kann etwas ansprechend aussehendes zusammen klicken. Auch Designentwürfe sind möglich, etwa eine erste Aufteilung von Benutzeroberflächen oder Webseiten. Schon in der kostenfreien Version lässt sich einiges machen, die zudem selbst betrieben werden kann und quelloffen ist.
Beim arbeiten habe ich wenig vermisst. Die Möglichkeit zur Zusammenarbeit könnte für einige sicher praktisch sein. Schade, dass dies derzeit lediglich in der Cloudversion verfügbar ist. Es wäre schon, wenn dies zeitnah auch auf der selbst betriebenen verfügbar ist. Zum selbst verwenden ist Excalidraw bereits eine Empfehlung wert. Ich habe es bereits in vielen Beiträgen genutzt: Etwa der Kaufberatung für Mini-PCs & Raspberry Pis, die Verdeutlichung von YouTubes neuer Anti-Werbeblocker Strategie für Sponsorblocks, oder der Sicherung mit Borg sind nur einige Beispiele.