{"id":11559,"date":"2024-09-15T00:01:00","date_gmt":"2024-09-14T22:01:00","guid":{"rendered":"https:\/\/u-labs.de\/portal\/?p=11559"},"modified":"2024-09-15T00:14:21","modified_gmt":"2024-09-14T22:14:21","slug":"virtuelles-whiteboard-mit-excalidraw","status":"publish","type":"post","link":"https:\/\/u-labs.de\/portal\/virtuelles-whiteboard-mit-excalidraw\/","title":{"rendered":"Virtuelles Whiteboard: Handgezeichnete Skizzen\/Diagramme mit Excalidraw"},"content":{"rendered":"

Ein Bild sagt mehr als tausend Worte – das gilt um so mehr bei IT und Technik, wo uns eine Zeichnung die Zusammenh\u00e4nge 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\u00fcrden.<\/p>\n

Dieser Beitrag stellt Excalidraw vor und zeigt, wie du damit (wahlweise handgezeichnete) Diagramme oder Skizzen erstellst. Auch der eigenst\u00e4ndige Betrieb auf Basis von Docker ist enthalten.<\/p>\n

Excalidraw sieht handgezeichnet aus, ohne von Hand zeichnen zu m\u00fcssen<\/h2>\n

Daf\u00fcr verwendet man vorgefertigte Objekte wie z.B. K\u00e4sten 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\u00fcnftig aus, unabh\u00e4ngig von den Zeichenk\u00fcnsten des Nutzers. Selbst wenn diese vorhanden sind, erspart man sich teure\/inkompatible spezielle Hardware. Oder alternativ den Weg der Digitalisierung.<\/p>\n

Cloud ist m\u00f6glich, aber ohne Zwang<\/h2>\n

An sich ist das keine neue Idee, es gibt verschiedene Dienste, die so etwas anbieten. Entsprechend des Trends zu mehr Abh\u00e4ngigkeit und damit Umsatz sind es jedoch oft propriet\u00e4re Webanwendungen. Excalidraw versucht hier zumindest einen Mittelweg zu finden, in dem es eine Basisversion kostenfrei und als quelloffene Software jedem frei zur Verf\u00fcgung stellt. Man kann den Dienst also selbst betreiben und ist damit unabh\u00e4ngig von Clouddiensten. Wer das nicht m\u00f6chte, hat alternativ auch die M\u00f6glichkeit, den offiziell gehosteten Dienst zu verwenden.1<\/a><\/sup> Damit ist man zwar vom Anbieter abh\u00e4ngig, kann jedoch eine Abogeb\u00fchr vermeiden. Kurzum l\u00e4sst man dem Nutzer die Wahl zwischen Cloud und selbst hosten.<\/p>\n

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<\/a><\/sup> Wer also beispielsweise mit Kollegen gemeinsam zeichnen m\u00f6chte oder Folien f\u00fcr eine Pr\u00e4sentation in der Schule\/Uni vorbereitet, muss mit Einschr\u00e4nkungen rechnen.<\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

Was kann Excalidraw?<\/h2>\n
\"\"<\/a><\/figure>\n

Dennoch ist die kostenfreie Version durchaus n\u00fctzlich, um beispielsweise ansprechende Schaubilder zu erstellen. Die Leiste im oberen Bereich enth\u00e4lt die wichtigsten daf\u00fcr n\u00f6tigen Werkzeuge: Mit der Hand l\u00e4sst sich das Board verschieben. So m\u00fcsst ihr euch keine Gedanken darum machen, wo ihr platztechnisch als n\u00e4chstes weiter macht. Auch bei gr\u00f6\u00dferen Zeichnungen ist das hilfreich zur Navigation. Hier macht es ggf. zus\u00e4tzlich Sinn, links unten mit dem Zoom die Ansicht zu vergr\u00f6\u00dfern oder verkleinern.<\/p>\n

Der Zeiger erm\u00f6glicht 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\u00fcgt werden. Wer mutig ist, kann \u00fcber den Stift frei Hand zeichnen. Hat man einen Fehler gemacht, hilft der Radiergummi – oder alternativ die [ENTF]<\/code> Taste, nachdem mit dem Auswahlwerkzeug das Objekt angeklickt wurde. Alle Werkzeuge lassen sich alternativ mit der Tastatur ansteuern, etwa die 1 f\u00fcr ein Rechteck. Meist stehen die Tasten rechts unten im Eck. Sie erscheinen (mit alternativen Belegungen) zudem, wenn man die Maus darauf bewegt.<\/p>\n

Ein Teil ist in das \u00dcberhangmen\u00fc (letzter Knopf mit drei geometrischen Figuren) gewandert: Das Frame Tool<\/em> kann einen Kasten erzeugen, um Elemente sichtbar zu gruppieren. Ich habe ihn im Beispiel oben f\u00fcr die Box Docker Container<\/em> eingesetzt. Das ist aber nicht nur ein optisches Element. Alle Elemente in einem solchen Rahmen lassen sich geb\u00fcndelt verschieben, ohne sie einzeln mit gedr\u00fcckter [STRG] <\/code>Taste anklicken zu m\u00fcssen.<\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

F\u00fcr einige Werkzeuge (etwa die Formen) erscheint nach der Aktivierung links eine Box mit zus\u00e4tzlichen Einstellungen. So kann beispielsweise die Hintergrundfarbe und Art der F\u00fcllung bearbeitet werden oder die Ecken lassen sich scharfkantig statt abgerundet darstellen. Wem der h\u00e4ndische Zeichenstil zu spielerisch wirkt, der kann unter Sloppiness<\/em> diesen in drei Stufen ver\u00e4ndern. Ganz links verschwindet er komplett.<\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n
\n
\"\"<\/a><\/figure>\n<\/div>\n

M\u00f6chte man Elemente verbinden, muss man den Pfeil nur bis in die N\u00e4he 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.<\/p>\n

Praktisch: H\u00e4lt man die [Shift]<\/code> Taste gedr\u00fcckt, wird der Winkel nicht mehr 100% frei platziert, sondern in etwas gr\u00f6\u00dferen Schritten. Die standardm\u00e4\u00dfige 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]<\/code> Taste wird das erleichtert.<\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

Grafiken sind ebenfalls kein Problem, verschiedene Formate inklusive SGV lassen sich per Drag & Drop auf die Arbeitsfl\u00e4che ziehen. Vergr\u00f6\u00dfern und verkleinern geschieht automatisch proportional. F\u00fcr die meisten F\u00e4lle ist das sicher hilfreich. Falls im Einzelfall doch mal etwas unproportional angepasst werden sollte, habe ich daf\u00fcr allerdings keine M\u00f6glichkeit gefunden – auch [SHIFT]\/[STRG]<\/code> gedr\u00fcckt halten hilft nicht.<\/p>\n

Bibliotheken bringen mehr vorgefertigte Objekte<\/h2>\n

Mit diesen grundlegenden Werkzeugen kann man einfache Diagramme erstellen oder komplexere Dinge selbst zeichnen. Letzteres ist m\u00fchsam, praktischerweise gibt es Bibliotheken (Libraries<\/em>): Jede Instanz hat seine eigene, standardm\u00e4\u00dfig ohne Inhalt. Jeder kann eigene Objekte erstellen, in einer Bibliothek b\u00fcndeln und unter libraries.excalidraw.com anderen kostenfrei zur Verf\u00fcgung stellen. Dort finden sich zahlreiche, meist handgezeichnete Grafiken von eigenen Symbolen \u00fcber 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\u00fcck.<\/p>\n

Der Vorteil gegen\u00fcber h\u00e4ndisch eingef\u00fcgten Grafiken: Die Meisten sind selbst gezeichnet und passen daher besser zum Stil von Excalidraw. Au\u00dferdem lassen sich viele bearbeiten. Selbst wenn manche nicht ganz f\u00fcr den eigenen Zweck passen, ist das ggf. einfacher, als komplett selbst zu zeichnen.<\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

Speichern und Exportieren<\/h2>\n

Die \u00c4nderungen speichert Excalidraw im Browser ab. Man kann den Reiter einfach schlie\u00dfen und sp\u00e4ter wieder aufrufen, um mit dem Stand weiterzuarbeiten, an dem aufgeh\u00f6rt wurde. Zum Arbeiten mag das in Ordnung sein. Sp\u00e4testens, wenn man eine weitere Grafik erstellen m\u00f6chte, muss die vorherige zuvor gespeichert werden – ansonsten geht ihr Inhalt beim Anlegen einer neuen Leinwand verloren.<\/p>\n

Wer auf Nummer Sicher gehen oder das fertige Bild exportieren m\u00f6chte, kann dies oben links \u00fcber das Hamburger Men\u00fc tun. Beim Speichern l\u00e4sst sich eine .excalidraw Datei herunterladen. Dabei handelt es sich um ein JSON-Dokument, in dem alle Objekte mit ihrer Position und Gr\u00f6\u00dfe definiert sind. Bilder werden Base64 kodiert eingebettet. Sie kann mit Open<\/em> geladen werden. Serverseitiges abspeichern ist nur im Cloud-Abo mit Excalidraw+ m\u00f6glich. Alternativ l\u00e4sst sich auch mit der kostenfreien, selbst gehosteten Version an dieser Stelle zumindest ein Link erstellen, mit dem andere das Board lesend einsehen k\u00f6nnen.<\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

Vor dem Export k\u00f6nnen 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\u00fcr gr\u00f6\u00dfere Zeichnungen, welche man vielleicht in eine Pr\u00e4sentation einbauen und zur besseren Lesbarkeit vergr\u00f6\u00dfern m\u00f6chte. Daf\u00fcr sollten ggf. eingebaute Bilder passend gew\u00e4hlt werden, am besten Vektorgrafiken.<\/p>\n

Mit Embed scene<\/em> werden die Rohdaten zur Bearbeitung (das JSON-Dokument beim Speichern) an die Grafik angeheftet. F\u00fcr Anzeigeprogramme sind sie unsichtbar. Zum einbetten auf Webseiten ist das wenig sinnvoll, weil so die Datei unn\u00f6tig aufgebl\u00e4ht wird. Ansonsten hat das den Vorteil, dass die Grafik sichtbar ist: Die .excalidraw Datei l\u00e4sst 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\u00fcr Excalidraw notwendigen Informationen enthalten, um sie Bearbeiten zu k\u00f6nnen. Das ist eine Alternative zur Verwendung von zwei getrennten Dateien.<\/p>\n

Zusammenarbeit mit anderen<\/h2>\n

Mittlerweile wurde eine Funktion eingebaut, um in Echtzeit mit anderen an einer Zeichnung arbeiten zu k\u00f6nnen. Ihr findet die Funktion im Hamburger Men\u00fc links oben:<\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

Leider ist sie derzeit lediglich in der Cloud-Version verf\u00fcgbar, die von Excalidraw betrieben wird. In der selbst betriebenen fehlen die Funktionalit\u00e4ten zum Teilen & mit anderen arbeiten.3<\/a><\/sup> Neben dem <\/p>\n

Wir probieren es trotzdem<\/h3>\n

Dabei wird Ende-zu-Ende-Verschl\u00fcsselung 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:<\/p>\n

\n

Uncaught (in promise) TypeError: window.crypto.subtle is undefined<\/p>\n<\/blockquote>\n

Dies liegt nicht an einer fehlenden oder unvollst\u00e4ndigen Unterst\u00fctzung im Browser, sondern ist in der Spezifikation der WebCrypto-Schnittstelle4<\/a><\/sup> so vorgesehen, wenn sie in einem unsicheren Kontext<\/em> genutzt wird:<\/p>\n

\n

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.<\/p>\n<\/blockquote>\n

Dabei scheint localhost ausgenommen zu sein. Wer allerdings beispielsweise einen Testserver im lokalen Netz verwendet, kann keine Live-Sitzung starten. Hierf\u00fcr 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<\/a>.<\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

Nachdem dieses Problem gel\u00f6st ist, verbindet sich Excalidraw allerdings weiterhin zum Websocket-Server aus deren Cloud – oder besser gesagt versucht es. Aufgrund von Beschr\u00e4nkungen durch CORS kann es ohnehin nicht funktionieren. Derzeit fehlt noch die M\u00f6glichkeit, den Websocket-Server selbst zu betreiben und die Adresse f\u00fcr die Anwendung setzen zu k\u00f6nnen – schade. Allerdings betont das Team, man arbeite daran. Ein Zeithorizont ist derzeit nicht bekannt. <\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

Installation<\/h2>\n

Auf X86-Systemen k\u00f6nnt ihr das offizielle Image verwenden.5<\/a><\/sup> Dies besitzt allerdings keine Tags mit semantischer Versionierung, sodass automatische Aktualisierungen (z.B. per Watchtower)<\/a> nur \u00fcber den „latest“ Tag m\u00f6glich sind. Dabei verliert ihr jedoch die Kontrolle.<\/p>\n

Die docker-compose.yml<\/code> f\u00e4llt sehr \u00fcberschaubar aus und ben\u00f6tigt nur wenige MB an Ressourcen, da die Dateiverarbeitung komplett im Browser erfolgt. Auf dem Server wird lediglich der schlanke Nginx Webserver gestartet.<\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

Folgendes Beispiel macht den Dienst auf Port 5000 erreichbar. Dieser kann frei angepasst werden. Zur produktiven Nutzung empfiehlt sich ein Reverse Proxy wie Traefik<\/a>, der die Nutzung sprechender DNS-Namen wie z.B. Subdomains erm\u00f6glicht.<\/p>\n

services:\n  excalidraw:\n    image: excalidraw\/excalidraw:latest\n    ports:\n      - 5000:80\n    restart: always\n    mem_limit: 128MB<\/code><\/pre>\n
docker compose up<\/code><\/pre>\n
Alternativ kann das Image selbst gebaut werden. Auf diesem Weg l\u00e4sst sich Excalidraw auch auf dem Raspberry Pi und anderen ARM-Systemen betreiben: Das Projekt setzt auf NodeJS und ist damit grunds\u00e4tzlich plattformunabh\u00e4ngig. Daher hat bereits jemand versucht, die Images \u00fcber einen Pull-Request auch f\u00fcr die ARM-Architektur zu erstellen.6<\/a><\/sup> Dieser ist bisher offen, da es zu verschiedenen Problemen gekommen ist: So sind die Buildjobs recht langsam & es fehlt an Docker-Erfahrung.<\/p>\n
git clone https:\/\/github.com\/excalidraw\/excalidraw.git\ncd excalidraw\ndocker compose up<\/code><\/pre>\n
Erreichbar ist der Dienst anschlie\u00dfend \u00fcber http:\/\/serverIp:3000.<\/p>\n
\n
\"\"<\/a><\/figure>\n<\/div>\n
Fazit<\/h2>\n
In wenigen Minuten hat man mit Excalidraw ein ansprechendes Schaubild erstellt – das wahlweise mehr, weniger oder gar nicht nach handgezeichnet aussieht. Egal wof\u00fcr man sich entscheidet: Auch der schlechteste Zeichner kann etwas ansprechend aussehendes zusammen klicken. Auch Designentw\u00fcrfe sind m\u00f6glich, etwa eine erste Aufteilung von Benutzeroberfl\u00e4chen oder Webseiten. Schon in der kostenfreien Version l\u00e4sst sich einiges machen, die zudem selbst betrieben werden kann und quelloffen ist.<\/p>\n
Beim arbeiten habe ich wenig vermisst. Die M\u00f6glichkeit zur Zusammenarbeit k\u00f6nnte f\u00fcr einige sicher praktisch sein. Schade, dass dies derzeit lediglich in der Cloudversion verf\u00fcgbar ist. Es w\u00e4re schon, wenn dies zeitnah auch auf der selbst betriebenen verf\u00fcgbar ist. Zum selbst verwenden ist  Excalidraw bereits eine Empfehlung wert. Ich habe es bereits in vielen Beitr\u00e4gen genutzt: Etwa der Kaufberatung f\u00fcr Mini-PCs & Raspberry Pis<\/a>, die Verdeutlichung von YouTubes neuer Anti-Werbeblocker Strategie f\u00fcr Sponsorblocks<\/a>, oder der Sicherung mit Borg<\/a> sind nur einige Beispiele.<\/p>\n
Quellen<\/h2>\n
    \n
  1. https:\/\/excalidraw.com\/ \u21a9\ufe0e<\/a><\/li>\n
  2. https:\/\/plus.excalidraw.com\/excalidraw-plus-vs-excalidraw\/ \u21a9\ufe0e<\/a><\/li>\n
  3. https:\/\/docs.excalidraw.com\/docs\/introduction\/development \u21a9\ufe0e<\/a><\/li>\n
  4. https:\/\/www.chromium.org\/blink\/webcrypto\/ \u21a9\ufe0e<\/a><\/li>\n
  5. https:\/\/github.com\/excalidraw\/excalidraw \u21a9\ufe0e<\/a><\/li>\n
  6. https:\/\/github.com\/excalidraw\/excalidraw\/pull\/3937 \u21a9\ufe0e<\/a><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
    Ein Bild sagt mehr als tausend Worte – das gilt um so mehr bei IT und Technik, wo uns eine Zeichnung die Zusammenh\u00e4nge 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 …<\/p>\n","protected":false},"author":5,"featured_media":14010,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"[{\"content\":\"https:\/\/excalidraw.com\/\",\"id\":\"6eeafa58-ada2-43f1-823f-7d7cb5b9313c\"},{\"content\":\"https:\/\/plus.excalidraw.com\/excalidraw-plus-vs-excalidraw\/\",\"id\":\"e2863d84-aa4e-4ab3-b2ef-fae118a05bf5\"},{\"content\":\"https:\/\/docs.excalidraw.com\/docs\/introduction\/development\",\"id\":\"3d63bf15-3fa1-4dda-a739-0afe79422b09\"},{\"content\":\"https:\/\/www.chromium.org\/blink\/webcrypto\/\",\"id\":\"7976d4bf-9899-495b-b767-cb8ab5b44403\"},{\"content\":\"https:\/\/github.com\/excalidraw\/excalidraw\",\"id\":\"f7677a79-6a73-4d1b-b69c-eace40d199f9\"},{\"content\":\"https:\/\/github.com\/excalidraw\/excalidraw\/pull\/3937\",\"id\":\"d13627e5-2951-4618-a9c0-7005a1df9b5f\"}]"},"categories":[78],"tags":[960,961],"class_list":["post-11559","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software","tag-open-source-2","tag-quelloffene-software"],"_links":{"self":[{"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/posts\/11559","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/comments?post=11559"}],"version-history":[{"count":17,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/posts\/11559\/revisions"}],"predecessor-version":[{"id":14015,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/posts\/11559\/revisions\/14015"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/media\/14010"}],"wp:attachment":[{"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/media?parent=11559"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/categories?post=11559"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/tags?post=11559"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}