Kreativ zusammenarbeiten: Handgezeichnete Diagramme mit Excalidraw erstellen
Im Rahmen unseres Seminars Wissenschaftliches Arbeiten tauschen wir uns mit Studierenden regelmäßig zu Tools und Methoden aus, die im Studienalltag genutzt werden. Auch dieses Jahr ging es dabei um Werkzeuge zum Skizzieren und Weiterdenken von Ideen. Erwähnt wurde das eine oder andere Mal u. a. Excalidraw. Gehört habe ich den Namen schon öfters, über einen längeren Zeitraum ausprobiert hatte ich Excalidraw bisher aber noch nicht. Anlass genug, dies nun endlich nachzuholen.
Kurz zusammengefasst ist Excalidraw ein Open-Source-Whiteboard. Alleine oder gemeinsam mit anderen können hier zum Beispiel Diagramme erstellt, Skizzen entworfen sowie Notizen zusammengefasst und visuell aufbereitet werden. Von den Studierenden wurden als Use Case neben dem Zeichnen von Diagrammen konkret Wireframes und die Abbildung von Softwarearchitektur erwähnt.
Ein Hauptunterscheidungsmerkmal gegenüber Programmen mit teilweise ähnlichen Funktionen wie zum Beispiel Diagrams.net (ehemals Draw.io) ist vor allem der handschriftliche Look von Visualisierungen. Mir persönlich gefällt die Handhabung von Excalidraw nach längerem Ausprobieren sehr. Auch die Möglichkeit, synchron ohne viel Aufwand gemeinsam an Inhalten zu arbeiten, funktioniert gut. Zu ausgewählten Basisfunktionen habe ich daher eine kurze Übersicht aufgeschrieben. Die Abbildungen lassen sich durch einen Mausklick vergrößern.
1. Grundfunktionen
Rufen wir https://excalidraw.com auf, so gelangen wir direkt auf die Oberfläche von Excalidraw. Es gibt keine umständliche Registrierung. Kein Warten auf Bestätigungsemails. Keine ausufernde virtuelle Einführungstour. Wir sehen ein leeres Whiteboard und können es direkt nutzen.
Mittig am oberen Fensterrand befindet sich die Werkzeugleiste. Ausgewählt werden können hier Einstellungen, Werkzeuge und vor allem Formen, die für die Arbeit auf dem Whiteboard genutzt werden können. Letztere lassen sich mit einem Klick auf das entsprechende Symbol oder das jeweilige Tastaturkürzel aktivieren.
In der aktuellen Version (Stand: 17.08.2023) sind enthalten:
- Auswahl (V oder 1)
- Rechteck (R oder 2)
- Raute (D oder 3)
- Ellipse (O oder 4)
- Pfeil (A oder 5)
- Linie (L oder 6)
- Zeichnen (P oder 7)
- Text (T oder 8)
- Bild einfügen (9)
- Radierer (E oder 0)
- Weitere Werkzeuge (Rahmenwerkzeuge Web-Einbettung)
Die Bedienoberfläche ist insgesamt sehr übersichtlich gestaltet. Solange noch keine Funktion ausgewählt wurde, weisen kurze Infotexte auf einige Optionen hin.
2. Erste Schritte
Die verschiedenen Formen lassen sich nach Auswahl per Klick und Ziehen des Elements – wie von vielen Computerprogrammen mit Formwerkzeugen gewohnt – auf dem Whiteboard platzieren. Gut veranschaulichen lassen sich die Anpassungsmöglichkeiten direkt mithilfe der Formwerkzeuge. Für diesen Beitrag nehme ich die in der Werkzeugliste zuerst aufgeführte Form Rechteck (R oder 2 auf der Tastatur). Dieses platziere ich in der gewünschten Größe auf dem Whiteboard mittels Maus. Das Rechteck lässt sich nun über das am linken Bildschirmrand erschienene Menü formatieren.
Anpassen lassen sich hier u. a. neben der Farbe von Linien oder dem Hintergrundmuster der Form auch Strichstärke, Konturstil und Sauberkeit.
2.1 Strich (Stroke)
Die Farbe der von uns erstellten Form lässt sich über einen Klick auf „Strich“ am linken Bildschirmrand anpassen.
2.2 Hintergrund (Background) & Füllung (Fill)
Die Formhintergründe lassen sich durch die Auswahl von „Hintergrund“ farblich füllen. Sobald wir eine Farbe gewählt haben, lässt sich auch die Form der Füllung anpassen. Als voreingestelltes Muster ist „Schraffiert“ (Hachure) ausgewählt. Über das Menü „Füllung“ an der linken Bildschirmseite stehen zusätzlich die Optionen „Kreuzschraffiert“ (cross-hatch) und „Deckend“ (solid) zur Verfügung. Die drei Optionen werden nachfolgend in unterschiedlichen Farben dargestellt:
2.3 Strichstärke & Konturstil (Stroke width & Stroke Style)
Die Strichstärke von Excalidraw bietet die Optionen „Dünn“, „Fett“ und „Extra Fett“. Beim Konturstil kann zwischen „Durchgezogen“, „Gestrichelt“ und „Gepunktet“ ausgewählt werden.
2.4 Sauberkeit (Sloppiness)
Im Gegensatz zu anderen Anwendungen ist vor allem der Menüpunkt „Sauberkeit“ mit den Optionen „Architekt“, „Künstler“ und „Karikaturist“ ungewöhnlich. Hier können wir die Art, in welcher Formen gezeichnet werden, verändern. „Architekt“ sorgt für saubere, klare Linien, während „Künstler“ und „Karikaturist“ die Linien jeweils lockerer bzw. skizzenhafter wirken lassen.
2.5 Kanten (Edges)
Bei der Auswahl von Objekten wie Rechteck, Linien und Pfeilen gibt es gegenüber der Ellipse noch die zusätzliche Option, Kanten auf „Scharfkantig“ oder „Rund“ zu setzen.
Über die genannten Möglichkeiten hinaus bietet das Menü an der linken Bildschirmseite auch noch Optionen für die Deckkraft von Objekten oder die Arbeit auf verschiedenen Ebenen.
2.6 Weitere Werkzeuge
Excalidraw bietet in der Werkzeugleiste hinter der Option „Weitere Werkzeuge“ mit dem „Rahmenwerkzeug“ und „Web Embed“ noch weitere Optionen für das Whiteboard.
Das Rahmenwerkzeug ermöglicht u. a. zusätzliche Organisationsoptionen sowie künstlerisch kreative Möglichkeiten. Zum einen lassen sich zum Beispiel Inhalte wie Texte, Illustrationen oder Aufgaben, die in Abhängigkeit zueinanderstehen, einem Frame zuordnen. Wie eine Präsentationsfolie oder Karteikarte bleiben diese Elemente zusammen, können frei verschoben oder inhaltlich innerhalb des Frames weiter bearbeitet werden. Unterschiedliche Frames können auf dem Whiteboard auch miteinander verbunden werden. Eine Option, die also bspw. in Lehrveranstaltungen und Workshops unterstützen kann, den roten Faden nicht zu verlieren bzw. visuell zu verdeutlichen.
Gestalterisch ermöglicht die Frame-Option darüber hinaus auch „Cut-outs“. Dabei können Formen und Farben so übereinander gelegt, kombiniert oder abgeschnitten werden, dass zum Beispiel neue Muster, Bilder oder Designelemente entstehen. Nachfolgend ist diese Möglichkeit stark vereinfacht mithilfe einiger (abgeschnittener) Formen abgebildet:
Durch Web Embed lassen sich die Einsatzmöglichkeiten des Whiteboards für weitere Szenarien erweitern. In der aktuellen Excalidraw-Browservariante (Stand: 17.08.2023) lassen sich bspw. bislang Inhalte von Youtube, Vimeo, Figma, Github oder eben Platzhalter einbinden. Plug-ins von Excalidraw sind hier zum Teil schon einen Schritt weiter. Innerhalb von Obsidian – ein Markdowneditor, der u. a. das Verlinken von Dokumenten hin zu einem Ideennetzwerk ermöglicht und durch Erweiterungen auf individuelle Bedürfnisse beim Wissensmanagement angepasst werden kann – kann mithilfe eines Excalidraw-Plug-ins bereits ohne (bisher zumindest von mir wahrgenommene) Einschränkungen jeder Webinhalt eingebunden werden. So lassen sich Videos, Texte, Webseiten oder auch interaktive Lehr-Lernmaterialien (bspw. H5P-Elemente) direkt auf dem Whiteboard nutzen. Ohne Excalidraw zu verlassen kann somit direkt ein externer Inhalt kommentiert und diskutiert werden. Hier ist zu hoffen, dass zukünftig auch in der Browserversion weitere Webangebote eingebunden werden können.
3. Gemeinsam arbeiten
Um gemeinsam auf einem Whiteboard zu arbeiten, bietet Excalidraw oben rechts auf der Benutzeroberfläche die Option „Live Zusammenarbeit …“ (Personen-Symbol).
Sobald ein Whiteboard über diesen Button gestartet wird, gibt es die Möglichkeit einen Zugangslink zu kopieren, der mit Personen geteilt werden kann.
Alle aktiven Personen auf einem Board sind durch Farben und frei wählbare Namen unterscheidbar. Ein gezielter Sprung zur Position einer Person ist über einen Klick auf das jeweilige Namenskürzel am oberen rechten Bildschirmrand möglich.
Wenn eine Person ein kollaboratives Excalidraw-Whiteboard verlässt, nimmt diese den aktuellen Status des gemeinsam bearbeiteten Whiteboards mit und kann lokal weiter an den Inhalten arbeiten.
4. Eigene Beispiele
Für den Einstieg in Excalidraw habe ich zunächst eine Abbildung aus älteren Powerpoint-Foliensätzen von mir als Vorlage genommen (Thema Selbstmanagement). So wollte ich ohne viel Aufwand sehen, wie schnell und im Vergleich ggf. ansehnlich sich Mindmaps mit Excalidraw umsetzen lassen:
Als zweiten Testballon habe ich eine eigene Abbildung der Eisenhower-Matrix genutzt (Methode zur Priorisierung von Aufgaben nach Kategorien), die ich in Corona-Zeiten kurzfristig für eine Veranstaltung erstellt hatte. Diese wollte ich schon länger gerne in einer saubereren, aber dennoch eher „handgemachten“ Form haben. Zum Vergleich kann in der nachfolgenden Abbildung der Regler nach links und rechts verschoben werden:
Da die Erstellung der Matrix sehr gut von der Hand ging, ist neben der theoretischen Abbildung des Eisenhower-Prinzips auch eine zusätzliche Abbildung mit konkreteren Handlungsschritten entstanden, die auch im Blogbeitrag Wichtig und dringend? Aufgaben priorisieren mit dem Eisenhower-Prinzip verwendet wurde.
5. Fazit
Wie bereits eingangs erwähnt, mir gefällt Excalidraw. Überlegungen zu einem Thema oder reduzierte Zeichnungen lassen sich schnell und einfach umsetzen. Auch die Arbeit im Team hat bisher ohne Verzögerungen oder andere technische Probleme geklappt. Fairerweise muss aber gesagt werden, dass wir in einer Gruppe mit bis zu vier Leuten „natürlich“ gearbeitet haben. Einen gezielten Stresstest durch das Einbinden unzähliger Videos oder Ähnliches haben wir also nicht durchgeführt.
Darüber hinaus gibt es viele weitere (hier nicht genannte oder nur angedeutete) Features und Möglichkeiten, Excalidraw einzusetzen. Dazu zählen u. a. eine aktive Community, gute Funktionalität über Smartphone und Tablet, eine Element-Bibliothek mit brauchbaren Formvorlagen oder auch ein integrierter Color-Picker. Inhalte lassen sich lokal im Excalidraw-Format speichern, per Link teilen oder als PNG bzw. SVG exportieren. Schade finde ich allerdings, dass das (optionale) Speichern und Organisieren von Whiteboardinhalten im Programm selbst Nutzer*innen des kostenpflichtigen Excalidraw+ vorbehalten zu sein scheint.
Alles in allem kann ich allen (auch nur entfernt) interessierten Menschen guten Gewissens empfehlen, Excalidraw zumindest einmal mit einem einfachen Sketch auszuprobieren. Der Einstieg ist unkompliziert und eine Mindmap zu typischen To-dos eines Arbeitstages, die Abbildung von regelmäßigen Arbeitsschritten und Prozessketten oder eine einfache Pro-Contra-Liste zu Ideen/gelesenen Texten ist schnell umgesetzt. Im Idealfall ist die eigene Toolbox für Arbeit und Studium so ohne großen Aufwand am Ende um ein nützliches Open-Source-Werkzeug reicher.
Weiternutzung als OER ausdrücklich erlaubt: Dieses Werk und dessen Inhalte sind – sofern nicht anders angegeben – lizenziert unter CC BY 4.0. Nennung gemäß TULLU-Regel bitte wie folgt: „Kreativ zusammenarbeiten: Handgezeichnete Diagramme mit Excalidraw erstellen“ von Florian Hagen, Lizenz: CC BY 4.0. Der Beitrag und dazugehörige Materialien stehen auch im Markdownformat und als PDF zum Download zur Verfügung.
