Visuelles Denken mit Excalidraw

Mit der integrierten Mermaid-Erweiterung lassen sich leicht verschiedene Diagramme erstellen, die flankierend zu einem Text Daten oder Abläufe visuell verdeutlichen. Mit der zweiten Erweiterung, dem Obsidian Canvas, hast du mehr Freiheit, Objekte auf einer endlosen Fläche zu platzieren und zu verbinden. Für viele Zwecke reichen beide Werkzeuge völlig aus. Falls du jedoch noch mehr kreativen Spielraum oder Automatisierung brauchst, bietet sich die Community-Erweiterung Obsidian Excalidraw an.

Obsidian Excalidraw ist eine Implementierung von Excalidraw, einer Whiteboard-Webanwendung, die seit 2020 sowohl in einer kostenlosen Version als auch als kostenpflichtiges Abo verfügbar ist. Der Entwickler Zsolt Viczián nutzt für die Obsidian-Erweiterung den Open-Source-Kern von Excalidraw und hat ihn um Funktionen erweitert, die nur innerhalb von Obsidian Sinn ergeben, etwa die direkte Integration von Notizen und Verknüpfungen im Vault. Im Prinzip können die erstellten Dateien in beiden Varianten geladen und weiterbearbeitet werden. Reine Webfunktionen wie die Echtzeit-Kollaboration bleiben dabei natürlich der Webanwendung vorbehalten.

Zsolt ist ein überzeugter Verfechter des visuellen Denkens und nutzt die Erweiterung auch, um diesen Ansatz weiterzutragen. Auf seiner Webseite finden sich dazu jede Menge Informationen, Workshops und Videos, außerdem hat er das lesenswerte Buch Sketch your Mind geschrieben. Eine zentrale These ist, dass Menschen Information auf unterschiedlichen Wegen in Wissen verwandeln und dass es hilft, dabei nicht nur einen einzigen Weg zu gehen. Wenn du also ohnehin deine Gedanken in Notizen verankerst, kannst du mit Excalidraw eine zweite Ebene hinzufügen, auf der Zusammenhänge sichtbar werden, die im reinen Text vielleicht verborgen bleiben.

Anmerkung

Wenn ich im Folgenden von Excalidraw spreche, meine ich immer die Obsidian-Erweiterung, nicht die Webanwendung unter excalidraw.com. Wo ich die Webanwendung meine, kennzeichne ich das ausdrücklich.

Excalidraw installieren

Zsolt sah sich aus verschiedenen Gründen, die er in diesem Video darlegt, gezwungen, die Excalidraw-Erweiterung aufzuteilen, und zwar in die eigentliche Excalidraw-Erweiterung und die davon abhängige Excalidraw-Extras-Erweiterung. Im Moment brauchst du nur die Excalidraw-Erweiterung zu installieren. In die Extras-Erweiterung wurden einige große, speicherintensive Funktionen ausgegliedert, etwa die Integration von Mermaid-Diagrammen und eine Bibliothek, die LaTeX-Dateien in SVG-Grafiken umwandelt. Du kannst diese Erweiterung bei Bedarf später installieren.

Die Benutzeroberfläche von Excalidraw

Nachdem du Excalidraw installiert hast, kannst du eine neue Zeichnung erstellen, indem du entweder auf das Icon (1) im Ribbon klickst oder in der Befehlspalette den Befehl Excalidraw: Create new drawing - IN A NEW TAB ausführst. Die Befehlspalette bietet noch weitere Optionen zum Anlegen einer neuen Zeichnung, die du gerne ausprobieren kannst.

Nachdem der Befehl ausgeführt wurde, erscheint eine Arbeitsfläche mit mehreren Werkzeugleisten und einer Willkommensmitteilung. Dort findest du auch Links zu Hilfeseiten. Die Mitteilung verschwindet aber sofort, sobald du ein Werkzeug auswählst. Das lässt sich in den Einstellungen der Erweiterung unter Einstellungen → Externe Erweiterungen → Excalidraw → Basic → Show splash screen in new drawings ausschalten.

(1) Das Excalidraw-Icon im Ribbon am linken Fensterrand öffnet eine neue, leere Zeichnung.

(2) Die Werkzeugleiste oben in der Mitte enthält alles, was du zum Zeichnen brauchst. Von links nach rechts findest du dort die Hand zum Verschieben der Fläche, das Auswahlwerkzeug, Rechteck, Raute, Kreis, Pfeil, Linie, Bleistift für Freihandzeichnungen, Text und Radierer. Jedes Werkzeug hat ein Tastaturkürzel, das direkt am Icon angezeigt wird.

(3) Bilder und Einbettungen lassen sich über die beiden Icons rechts neben der Werkzeugleiste einfügen, darunter externe Bilddateien und Inhalte aus dem Vault, aber auch die oben erwähnte Integration von Mermaid und LaTeX. Diese Integrationen sind nur mit der installierten Extras-Erweiterung verfügbar.

(4) Das Obsidian-Menü oben rechts gibt dir Zugriff auf Exportoptionen, Einstellungen und weitere Obsidian-spezifische Funktionen, die über das hinausgehen, was die reine Arbeitsfläche bietet.

(5) Die rechte Leiste enthält Zusatzwerkzeuge, darunter die persönliche Bibliothek mit wiederverwendbaren Elementen sowie Optionen für die Ansicht.

(6) Die untere Leiste enthält ganz links das Hamburger-Menü mit weiteren globalen Einstellungen für die aktuelle Zeichnung, daneben Undo und Redo sowie die Zoomsteuerung mit Anzeige des aktuellen Zoomgrads.

Neben den Werkzeugleisten nutzt Excalidraw auch das Kontextmenü, das du mit der rechten Maustaste öffnest.

Ein erstes Diagramm mit Excalidraw

Excalidraw hat viele Funktionen, aber für einfache Aufgaben brauchst du davon zunächst nur einen kleinen Teil. Um das zu zeigen, erstellst du ein kleines Flussdiagramm, das einen schlichten Entscheidungsprozess darstellt, etwa die Frage, ob eine neue Aufgabe sofort erledigt werden soll oder besser auf eine Liste kommt.

Öffne über das Excalidraw-Icon im Ribbon eine neue, leere Zeichnung. Klicke dann auf das Rechteck-Icon oder drücke die Taste 2, um das Rechteckwerkzeug zu aktivieren. Nun ziehe mit der Maus auf der Arbeitsfläche ein Rechteck auf.

Nachdem du das Rechteck aufgezogen hast, ist das Auswahlwerkzeug (1) aktiv und das neue Objekt (3) automatisch ausgewählt. Du kannst es nun vergrößern oder drehen. In der Hinweiszeile unter der Werkzeugleiste (2) werden dir außerdem passende Tastaturkürzel für den nächsten Schritt vorgeschlagen, was besonders am Anfang praktisch ist. So kannst du mit der ⌘-Taste und den Pfeiltasten direkt ein weiteres Rechteck erstellen, das mit dem ersten durch einen Pfeil verbunden wird. Sobald du die ⌘-Taste loslässt, ist das neue Rechteck ausgewählt. Auf diese Weise lassen sich schnell viele gleichartige, miteinander verbundene Objekte erstellen. Mehr dazu findest du weiter unten im Abschnitt Schnelles Erstellen von Flussdiagrammen.

Nun gib dem Rechteck einen Namen. Dazu klickst du doppelt in das Rechteck oder drückst die Eingabetaste, und dann erscheint ein Textcursor. Der Doppelklick muss dabei auf den Rand des Rechtecks oder ziemlich genau in die Mitte erfolgen, damit der Text Teil des Rechtecks wird. Tippe nun „Neue Aufgabe“ und klicke danach irgendwo auf die freie Fläche, um die Texteingabe abzuschließen. Als Nächstes erstellst du unterhalb des Rechtecks eine Raute, indem du die Taste 3 drückst oder das Rauten-Icon anklickst. Die Raute erhält den Text „Gleich erledigen?“.

Nun verbindest du das Rechteck mit der Raute. Dazu drückst du die Taste 5 oder klickst auf das Pfeilwerkzeug. Wenn du jetzt mit dem Mauszeiger über den Rand des Rechtecks fährst, erscheinen kleine Verbindungspunkte. Klicke auf einen davon und ziehe den Pfeil zur Raute, wo er ebenfalls an einem Verbindungspunkt einrastet.
Diese Verbindung ist nicht nur optisch, sondern bleibt beim späteren Verschieben der Objekte automatisch erhalten.

Die Raute steht in einem Flussdiagramm für eine Entscheidung. An dieser Stelle soll es zwei „Ausgänge“ geben, denn die Aufgabe wird entweder sofort erledigt oder kommt auf die Liste. Du benötigst also zwei neue Rechtecke, die du mit den Texten „Jetzt erledigen“ und „Auf die Liste“ versiehst und dann mit der Raute verbindest. Damit klar wird, zu welchem Ausgang die Pfeile gehören, kannst du sie per Doppelklick direkt beschriften, hier mit den möglichen Antworten „Ja“ und „Nein“.

Das Ergebnis ist ein fertiges Flussdiagramm:

Warum sehen die Zeichnungen wie schnelle Skizzen aus?

Du wunderst dich vielleicht, warum der Grafikstil von Excalidraw so skizzenhaft wirkt, als hätte jemand schnell etwas auf eine Serviette gezeichnet. Dieser Stil ist eine bewusste Entscheidung. Eine Zeichnung, die nicht fertig und nicht perfekt wirkt, lädt dazu ein, verändert zu werden. Niemand hat Hemmungen, einen Pfeil zu verschieben oder einen Text umzuschreiben, wenn die ganze Zeichnung ohnehin nach einem ersten Entwurf aussieht. Bei einem sauber gesetzten Diagramm entsteht dagegen schnell das Gefühl, es lieber nicht mehr anzufassen.

Was sonst noch wichtig ist

Es ist dir wahrscheinlich nicht leicht gefallen, die Boxen und Pfeile einigermaßen gerade zueinander zu platzieren, so wie mir in der Abbildung oben. Wie in jedem Grafikprogramm bietet auch Excalidraw Funktionen, um Objekte aneinander auszurichten.

Das Bearbeiten-Menü

Dazu wählst du die drei übereinander stehenden Objekte gemeinsam aus. Nun erscheinen in der unteren Leiste neben dem Hamburger-Menü drei neue Icons zum Bearbeiten (1), Duplizieren (2) und Löschen (3) der Objekte. Außerdem kannst du die letzte Aktion rückgängig machen (4) und wiederherstellen (5).

Um die Objekte auszurichten, klickst du auf das Bearbeiten-Icon. Im nun erscheinenden Bearbeiten-Menü scrollst du nach unten, bis du den Bereich „Ausrichten“ siehst.

Dort klickst du auf das zweite Icon in der oberen Reihe, das wie ein Dönerspieß aussieht. Damit werden die drei ausgewählten Objekte senkrecht ausgerichtet. Dann wählst du noch die Box „Jetzt erledigen“ und die Raute gemeinsam aus und klickst auf den liegenden Dönerspieß, das zweite Icon in der unteren Reihe. Damit werden die beiden Objekte horizontal ausgerichtet. Das Bearbeiten-Menü bleibt so lange aktiv, bis du wieder auf das Icon klickst.

Die Objekte in Excalidraw liegen auf unterschiedlichen Ebenen. Im Bild unten liegt das kleine Rechteck über dem Text des großen Rechtecks.

Im Bearbeiten-Menü kannst du in der Gruppe „Ebenen“ ein oder mehrere Objekte schrittweise oder direkt nach vorne oder hinten verschieben.

Weitere Funktionen kümmern sich um das Aussehen der Objekte. Du kannst Farben, Strichstärken und Konturen der Objekte anpassen sowie bei Texten Schriftfamilie, Schriftgröße und Textausrichtung. Die meisten davon sind selbsterklärend.

Links

Eine weitere Funktion im Bearbeiten-Menü ist das Setzen von Links an einem Objekt. Diese Funktion findest du in der letzten Gruppe „Aktionen“. Alternativ erreichst du sie im Kontextmenü über „Link hinzufügen“ oder mit dem Tastaturkürzel ⌘-K. Wenn du ein einzelnes Objekt ausgewählt hast, kannst du dort einen Link definieren, den du anschließend über das Icon im Bild unten aufrufst. Der Link kann entweder ein interner Wikilink oder ein externer Link sein. Ein Klick auf das Icon öffnet dann die verknüpfte Notiz oder Webseite direkt aus der Zeichnung heraus.

Weitere Hilfen für die Ausrichtung von Objekten

Es gibt noch zwei weitere Funktionen, die dir helfen, Objekte auf der Arbeitsfläche zu positionieren. Das ist zum einen das „Raster“ (englisch „Grid“). Du schaltest es im Kontextmenü, das du mit der rechten Maustaste auf der Arbeitsfläche öffnest, mit dem Befehl „Raster umschalten“ ein. Dann zeichnet Excalidraw ein feines Raster in den Hintergrund, an dem sich die Objekte ausrichten. Damit kannst du auch sicherstellen, dass Objekte die gleiche Breite oder Höhe haben, denn auch bei der Größenänderung orientieren sich die Kanten am Raster.

Die zweite Funktion, die du ebenfalls über das Kontextmenü erreichst, heißt „Einrasten am Objekt“. Damit werden dir beim Erstellen oder Verschieben von Objekten Hilfslinien angezeigt, wenn die Objekte oben, unten, an den Seiten oder mittig ausgerichtet sind. Im Bild unten ist die obere Kante des kleineren Rechtecks bündig mit der oberen Kante des größeren Rechtecks. Die untere Kante endet genau auf Höhe der Mitte des größeren Rechtecks. Die Hilfslinien sind im Bild rot dargestellt.

Die beiden Funktionen schließen einander aus. Du kannst entweder das Raster oder die Hilfslinien nutzen. Das Tastaturkürzel ⌘-' zum Umschalten des Rasters funktioniert in meiner Installation auf macOS nicht, stattdessen klappt ⌘-Ä. Zum Umschalten der Hilfslinien klappt dagegen ⌥-S wie angegeben.

Tastaturkürzel in Excalidraw

Wenn du das Fragezeichen auf der Tastatur drückst oder über das Hamburger-Menü die Hilfe aufrufst, erhältst du eine Liste mit allen Tastaturkürzeln. Leider ist diese Liste nicht ganz korrekt. Ich vermute, dass sie automatisch aus dem Original übernommen wird, das die Basis von Obsidian Excalidraw bildet. So funktioniert die Taste 9 nicht als Befehl zum Hochladen von Bildern, weil das dazugehörige Menü in der Obsidian-Version nicht mehr vorhanden ist. Bilder werden hier über ein Untermenü geladen. Ein weiteres Problem sind unterschiedliche Tastaturlayouts für die Sprachen. Die Original-Implementierung fragt manchmal das Zeichen ab, das auf der Taste gedruckt ist, und manchmal den Tastencode, den die Taste auslöst (siehe hier).

Objekte sperren

Eine weitere Funktion ist das Sperren von Objekten oder Objektgruppen. Wenn du verhindern möchtest, dass du versehentlich eine bestimmte Konstellation von Objekten durch Verschieben veränderst, wählst du diese aus und sperrst sie über das Schloss-Symbol in der rechten Leiste, über das Kontextmenü oder mit dem Tastaturkürzel ⌘-Shift-L. Das Entsperren klappt allerdings weder über die Leiste noch über das Tastaturkürzel, sondern nur mit der Maus über das Schloss-Icon, das oben links am gesperrten Objekt erscheint.

Gruppen vs. Frames

Ich habe nun schon an einigen Stellen Objektgruppen erwähnt. In einer Gruppe fasst du mehrere Objekte zusammen, sodass du sie wie ein Objekt verschieben, aber zum Beispiel auch bearbeiten kannst. Du erstellst eine Gruppe, indem du die Objekte auswählst (mehr dazu im Hinweis weiter unten) und dann ⌘-G drückst. Um die Objekte erscheint dann ein gestrichelter Auswahlrahmen, mit dem du die Gruppe verschieben oder vergrößern kannst. Mit einem Doppelklick auf ein Objekt kannst du es innerhalb der Gruppe anpassen oder verschieben, die Gruppe bleibt dabei erhalten. Du kannst auch die Objekte innerhalb der Gruppe ausrichten, ohne jedes einzelne Objekt auszuwählen. Eine Gruppe ist übrigens unsichtbar, solange du sie nicht auswählst.

Es gibt in Excalidraw noch eine zweite Möglichkeit, Objekte zusammenzufassen, nämlich den sogenannten Rahmen (englisch Frame). Wenn du in der oberen Werkzeugleiste das ganz rechte Icon anklickst und dann den Eintrag „Rahmenwerkzeug“ auswählst, kannst du einen Rahmen auf der Arbeitsfläche aufziehen. Einfacher ist es aber, die Taste F zu drücken, die das Rahmenwerkzeug direkt aktiviert. Du kannst beim Aufziehen schon Objekte einschließen oder später Objekte in den Rahmen ziehen.

Es gibt einige Unterschiede zu den Gruppen.

1. Ein Rahmen ist immer sichtbar und hat einen editierbaren Titel. Im Bearbeiten-Menü kannst du den Rahmentyp anpassen, entweder eine durchgezogene oder eine gestrichelte Linie.
2. Du kannst den Titel des Rahmens nutzen, um aus einer Notiz heraus direkt die Zeichnung zu öffnen und den Rahmen zu zentrieren, zum Beispiel mit [[Excalidraw/MeineZeichnung.md#^MeinFrame]]. Das ist allerdings nicht zwingend, wie ich weiter unten im Abschnitt Referenzieren auf Objekte, Gruppen oder Rahmen zeige.
3. Die Größe des Rahmens ändert sich nicht, wenn du ein Objekt zum Rand hin bewegst. Solange noch die Hälfte des Objekts innerhalb des Rahmens liegt, werden die Teile außerhalb des Rahmens abgeschnitten, wenn du das Objekt langsam über den Rahmen hinausschiebst.
4. Du kannst die Objekte innerhalb eines Rahmens nicht ausrichten oder sonst ändern, wenn du nur den Rahmen ausgewählt hast, wie es bei einer Gruppe funktioniert. Die Objekte innerhalb eines Rahmens wählst du im Gegensatz zu einer Gruppe mit einem einfachen Klick oder Shift-Klick aus, dann kannst du sie bearbeiten.

Im Bild unten ragt das kleine Rechteck rechts über den Rahmen hinaus und wird dort abgeschnitten.

Anmerkung zum Auswählen von Objekten und Gruppen

Du kannst Objekte auswählen, indem du einen Auswahlrahmen um sie herum ziehst, sie anklickst oder mit Shift-Klick mehrere Objekte nacheinander anklickst. Falls ein Objekt einen transparenten Hintergrund hat, musst du die Kontur anklicken. Sobald aber ein Text oder eine Hintergrundfarbe für das Objekt gewählt wurde, kannst du auch in den Hintergrund klicken, um das Objekt auszuwählen.

Referenzieren auf Objekte, Gruppen oder Rahmen

Wie ich oben bei den Rahmen schon erwähnt habe, kannst du mit einer ähnlichen Syntax wie innerhalb von Notizen Links auf Objekte setzen.

Du kannst ein Objekt auswählen und im Kontextmenü den ersten Eintrag Copy [[link]] for selected element(s) wählen. Nun werden dir je nach Objekttyp verschiedene Link-Optionen angeboten, für ein einfaches Objekt sieht der Dialog so aus.

Als Standardfunktion ist die Erstellung eines Wikilinks mit dem Button „Link“ (3) eingestellt. Damit wird ein Wikilink erstellt, der bei einem Klick die Zeichnung öffnet und das Objekt in der Mitte zentriert. Als Anker wird eine zufällige Zeichenkette generiert (im Beispiel unten ^6MVQfjlM).

Falls du im Eingabefeld (1) einen Namen eingibst, wird er, wie im ersten Beispiel unten, nach einem senkrechten Strich | in den Link eingetragen und in der Notiz als Linktext angezeigt. In diesem Fall hat die Checkbox (2) keine Wirkung. Gibst du keinen Namen ein, wird bei aktiver Checkbox (2) 100% als Alias eingetragen, wie im zweiten Beispiel. Allerdings erscheint 100% dann auch als Linktext, wenn die Notiz im Lesemodus gerendert wird. Ein Klick auf den Link zeigt das Objekt dagegen in 100 % der Originalgröße an.

[[Excalidraw/TestZeichnung.md#^6MVQfjlM|MyImage]]
[[Excalidraw/TestZeichnung.md#^6MVQfjlM|100%]]

Mit dem Button „Area“ (4) werden alle Objekte angezeigt, die im Bereich des ausgewählten Objekts liegen. Im Beispiel liegt eine Raute halb auf dem Rechteck, das als Linkziel ausgewählt war. Die Raute wird an der Kante des Bereichs abgeschnitten.

![[Excalidraw/TestZeichnung.md#^area=6MVQfjlM|100%]]

Mit dem Button „Group“ (5) wird ein entsprechender Link in die Zwischenablage kopiert, der in der Notiz alle Objekte der Gruppe anzeigt. Im Beispiel unten bestand die Gruppe nur aus einem einzigen Objekt. Die Raute, die weiterhin über dem Rechteck lag, wurde deshalb ignoriert.

![[Excalidraw/TestZeichnung.md#^group=6MVQfjlM|100%]]

Wenn du einen Rahmen auswählst, werden im Dialogfenster zwei weitere Buttons angezeigt, „Clipped Frame“ (6) und „Frame“ (7). Außerdem erscheint die Checkbox „Copy frame link by name“, die dafür sorgt, dass im Link der Name des Rahmens statt seiner ID verwendet wird.

„Clipped Frame“ (6) kopiert einen Link, der alles abschneidet, was außerhalb des Rahmens liegt, so wie der Rahmen auch in der Zeichnung angezeigt wird.

![[Excalidraw/TestZeichnung.md#^clippedframe=MeinFrame|100%]]

Der Button „Frame“ (7) erstellt einen Link, in dem alle Objekte vollständig angezeigt werden, auch wenn der Rahmen in der Zeichnung kleiner ist.

![[Excalidraw/TestZeichnung.md#^frame=MeinFrame|100%]]

Schnelles Erstellen von Flussdiagrammen

Falls du häufig Flussdiagramme erstellst, geht das auch mit nur einem initialen Mausklick, mit dem du die erste Box erstellst. Danach kannst du alles mit der Tastatur erledigen.

Mit ⌘-→ erstellst du direkt aus einem ausgewählten Objekt heraus ein neues, verbundenes Objekt. Solange du ⌘ hältst, kannst du mit den anderen Pfeiltasten die Position noch korrigieren. Nach dem Loslassen ist die Position festgelegt und das neue Objekt ausgewählt. Mit Tab wechselst du die Form, mit Enter bestätigst du, auch wenn du die Form nicht ändern möchtest, und tippst den Text. Esc schließt die Eingabe ab. Das Objekt bleibt ausgewählt, sodass du sofort das nächste Objekt anlegen kannst.

Der Ablauf noch einmal als Flussdiagramm.

Stifteingabe

Mit einem digitalen Stift, zum Beispiel mit einem Wacom-Tablet oder mit dem Apple Pencil am iPad, kannst du mit dem Bleistiftwerkzeug auch direkt zeichnen. Mangels entsprechender Hardware konnte ich das unter Windows und Linux nicht testen. Im Apple-Universum hast du die Möglichkeit, direkt in deinem Vault auf dem iPad zu zeichnen, oder aber deinen Mac-Bildschirm mit Sidecar auf das iPad zu übertragen und dann auf der Arbeitsfläche von Excalidraw zu zeichnen.

Weiterverarbeiten von Excalidraw

Du kannst die Zeichnungen oder Teile davon auch kopieren und in Obsidian oder in anderen Grafikprogrammen weiterverarbeiten. Dazu ein kleiner Hintergrund. Beide Versionen von Excalidraw nutzen für die Zeichnungen ein JSON-Format, das in weiten Teilen kompatibel ist. Mit bestimmten Besonderheiten der Obsidian-Version, wie zum Beispiel Wikilinks, kann die Webanwendung nichts anfangen und umgekehrt. Allerdings werden solche Inkompatibilitäten meist ignoriert. Wenn du eine Zeichnung oder eine Auswahl aus einer Zeichnung mit den „einfachen“ Kopierfunktionen (1) kopierst, wird genau dieses JSON in die Zwischenablage geschrieben. Das lässt sich dann nur in eine Excalidraw-Zeichnung einfügen.

Alternativ kannst du die Auswahl als PNG (2) oder als SVG (3) in die Zwischenablage kopieren und an beliebiger Stelle einfügen. Falls die Auswahl auch Text enthält, kann dieser ohne die Grafik als Text in die Zwischenablage (4) kopiert werden.

Du kannst in den Einstellungen der Excalidraw-Erweiterung außerdem festlegen, dass neben der Markdown-Datei, die die JSON-Definition enthält, auch eine SVG- oder PNG-Datei im selben Ordner erstellt wird.

Die entsprechenden Optionen findest du in den Einstellungen der Erweiterung unter Embed Excalidraw into your Notes and Exporting → Export Settings → Auto-Export Settings. Dort stehen die folgenden Einstellungen zur Verfügung.

(A) Ist diese Option aktiviert, werden die Namen der SVG- und PNG-Dateien automatisch angepasst, wenn du die Excalidraw-Datei umbenennst. Wird die Zeichnung gelöscht, löscht die Erweiterung auch die zugehörigen Grafikdateien.

(B) Ist diese Option aktiviert, wird im selben Ordner, in dem die Excalidraw-Datei gespeichert ist, auch eine SVG-Datei erstellt.

(C) Ist diese Option aktiviert, wird zusätzlich eine PNG-Datei mit der Grafik erstellt.

(D) Ist diese Option aktiviert, werden pro Format zwei Dateien exportiert, jeweils eine für das helle und eine für das dunkle Theme.

Falls du eine dieser Optionen nutzt, kannst du die SVG- oder PNG-Dateien statt der Excalidraw-Datei in deine Notizen einfügen. Sie spiegeln immer den aktuellen Stand der Zeichnung wider, sind aber kompatibler, zum Beispiel wenn du wie ich Werkzeuge wie Quartz nutzt, die das Excalidraw-Format nicht unterstützen.

Die Rückseite der Zeichnung

Bisher hast du Excalidraw nur von seiner Schokoladenseite gesehen, der Arbeitsfläche mit ihren Werkzeugen und Formen. Jede Zeichnung hat aber auch eine Rückseite, und die lohnt sich anzuschauen, denn sie erklärt vieles, was sonst wie Zauberei wirkt. Excalidraw-Dateien in Obsidian sind keine eigene, geschlossene Dateiart. Sie sind ganz normale Markdown-Notizen, in denen die eigentliche Zeichnung als strukturierter Text gespeichert ist. Alles, was du über Notizen, Links, Tags und Frontmatter gelernt hast, gilt also auch hier.

Zwei Ansichten, eine Datei

Öffnest du eine Excalidraw-Datei per Klick, landest du automatisch auf der Arbeitsfläche. Das ist aber nur eine von zwei möglichen Ansichten auf dieselbe Datei. Über die Befehlspalette und den Befehl Excalidraw: Switch between Excalidraw and Markdown mode wechselst du jederzeit zur reinen Textansicht. Dort siehst du das Frontmatter, einen Abschnitt mit den Textelementen deiner Zeichnung und, in einem eingeklappten Kommentarblock versteckt, die vollständigen JSON-Daten mit allen Formen, Farben und Positionen.

Für den Alltag reicht dir fast immer die Zeichenansicht. Die Textansicht brauchst du zum Beispiel, wenn du Frontmatter-Eigenschaften von Hand ergänzen willst, wenn du nach einem bestimmten Text in mehreren Zeichnungen suchst und das Ergebnis im Kontext sehen möchtest, oder wenn du bei der Arbeit mit Vorlagen einmal versehentlich in der Textansicht landest und zurück zur Arbeitsfläche willst.

Weil du diesen Wechsel öfter brauchen wirst, als du vielleicht denkst, lohnt sich ein eigenes Tastaturkürzel dafür. Öffne dazu Einstellungen → Tastaturkürzel, suche nach dem genannten Befehl und klicke auf das Plus-Symbol daneben, um eine eigene Kombination festzulegen. Ich selbst nutze ein Kürzel, das ich sonst nirgends belegt habe, damit ich in Sekundenbruchteilen zwischen beiden Ansichten hin und her springen kann.

Was im Frontmatter steckt

Der wichtigste Eintrag im Frontmatter ist zugleich der unscheinbarste. Ohne den Schlüssel excalidraw-plugin würde Obsidian die Datei als gewöhnliche Notiz behandeln und immer in der Textansicht öffnen. Erst dieser Eintrag sorgt dafür, dass ein Klick auf die Datei die Arbeitsfläche öffnet. Er kann die Werte parsed oder raw annehmen. Der Unterschied betrifft nur die Darstellung von Wikilinks in den Textelementen deiner Zeichnung. Mit parsed siehst du die aufgelöste, lesbare Form, mit raw den unveränderten Rohtext samt Klammern. Für den normalen Gebrauch ist parsed die richtige Wahl, raw ist eher etwas für die Fehlersuche.

Eine zweite Gruppe von Eigenschaften beginnt mit excalidraw-export und steuert, wie eine einzelne Zeichnung exportiert wird, unabhängig von den globalen Einstellungen aus dem vorherigen Abschnitt. Mit excalidraw-export-transparent legst du fest, ob der Hintergrund beim Export durchsichtig bleibt, mit excalidraw-export-padding den Rand in Pixeln, der um die Zeichnung freigehalten wird. Für den PNG-Export gibt es zusätzlich excalidraw-export-pngscale für den Skalierungsfaktor (üblich sind Werte zwischen 0,5 und 5) und excalidraw-export-dark für eine Version im dunklen Theme. Möchtest du für eine einzelne Zeichnung vom Auto-Export abweichen, trägst du excalidraw-autoexport ein, mit den möglichen Werten none, both, png oder svg.

Das Praktische an diesen Schlüsseln ist, dass sie beim Anlegen einer neuen Zeichnung aus einer Vorlage automatisch übernommen werden. Richtest du deine Exporteinstellungen einmal in einer Vorlage ein, gelten sie für jede daraus erzeugte Zeichnung. Alles Weitere im Frontmatter ist normales Obsidian-Vokabular. Ein tags-Eintrag macht deine Zeichnungen zum Beispiel über die Suche, über Dataview-Abfragen oder in eigenen Bases-Dashboards auffindbar, genau wie bei jeder anderen Notiz.

Die gesamte Liste möglicher Eigenschaften findest du hier: Obsidian Excalidraw Document Properties

Warum das mehr ist als graue Theorie

Die Textansicht und das Frontmatter erklären fast beiläufig eine ganze Reihe von Dingen, die dir sonst rätselhaft vorkommen könnten. Die Texte innerhalb einer Zeichnung sind über die normale Obsidian-Suche auffindbar, weil sie als echter Text in der Markdown-Datei liegen. Eine Zeichnung kann im Graphen und in den Backlinks auftauchen, weil sie Links und Tags tragen kann wie jede andere Notiz. Eine Vorlage ist am Ende nichts anderes als eine fertig eingerichtete Markdown-Datei, die du kopierst. Und ein Skript der Script Engine, um die es im übernächsten Abschnitt Skripte geht, kann eine Zeichnung nur deshalb lesen und verändern, weil sie lesbarer, strukturierter Text ist und keine geschlossene Blackbox.

Bibliotheken

Im Kontextmenü bleibt noch ein letzter Eintrag zu erklären, nämlich „Zur Bibliothek hinzufügen“ (5). Wenn du grafische Objekte wie Icons, bestimmte geometrische Formen oder Skizzen häufiger in deinen Excalidraw-Zeichnungen nutzen möchtest, kannst du sie zu einer Bibliothek hinzufügen und so jederzeit wieder in Zeichnungen einfügen.

Um ein Objekt zur Bibliothek hinzuzufügen, markierst du das Objekt und wählst im Kontextmenü den Befehl „Zur Bibliothek hinzufügen“ aus.

Wenn du nun mit dem Button (1) die Bibliothek öffnest, findest du das Objekt dort unter „Persönliche Bibliothek“ (2) und kannst es mit einem Klick in deine Zeichnung einfügen.

Du kannst ein neues Objekt auch zur Bibliothek hinzufügen, indem du das Objekt auswählst und dann die Bibliothek öffnest. In diesem Fall wird das ausgewählte Objekt in der Bibliothek angezeigt und kann mit einem Klick auf das Plus (3) hinzugefügt werden.

Du kannst auch vorgefertigte Bibliotheken laden. Dazu öffnest du wie oben beschrieben mit dem Button (1) das rechte Panel und klickst dann auf „Bibliotheken durchsuchen“ (5). Daraufhin wird die Webseite mit den Excalidraw-Bibliotheken geöffnet. Dort kannst du eine Bibliothek aussuchen und herunterladen. Die Funktion „Add to Excalidraw“ funktioniert nur in der Webanwendung von Excalidraw. Über das Menü mit den drei Punkten neben dem Suchfeld kannst du mit dem Eintrag „Öffnen“ (6) die zuvor heruntergeladene Bibliothek importieren.

Das Ganze und noch viel mehr wird dir auch anschaulich in einem englischsprachigen Video erklärt, das du über den Link „How to load libraries“ (4) erreichst.

Du kannst deine gesamte Bibliothek mit dem Menübefehl „Speichern als“ (7) sichern. Mit „Bibliothek zurücksetzen“ im selben Menü löschst du alle Einträge. Wenn du mit dem Mauszeiger über ein Objekt in der Bibliothek fährst, erscheint in der rechten oberen Ecke ein kleines Quadrat, das du anklicken kannst, um das Objekt zu löschen.

Skripte

Neben der Bibliothek bringt Excalidraw noch ein weiteres Werkzeug für wiederkehrende Aufgaben mit, die Script Engine. Damit lassen sich kleine JavaScript-Programme, sogenannte ExcalidrawAutomate-Skripte, direkt auf eine Zeichnung anwenden. Ein Skript kann zum Beispiel ausgewählte Objekte automatisch anordnen, eine ganze Reihe verbundener Boxen erzeugen oder Farben nach einem festen Schema setzen.

Installierte Skripte tauchen als Buttons im rechten Panel unter dem Reiter „Werkzeuge“ auf. Sobald du einem Skript dort ein Tastaturkürzel zuweist, kannst du es auch direkt über die Befehlspalette aufrufen.

Fertige Skripte musst du dir nicht selbst schreiben. In der Erweiterung ist die Script Library integriert, eine wachsende Sammlung fertiger Skripte. Über den Button „Install or update script“ lädst du ein Skript von dort direkt aus GitHub in deinen Vault. Ein Zugriff auf GitHub findet dabei ausschließlich statt, wenn du ihn selbst anstößt.

Alternativ kannst du ein Skript auch von Hand einbinden. Dazu lädst du die Datei aus dem Repository herunter und legst sie in dem Ordner ab, den du in den Einstellungen unter „Script Engine“ als Skriptordner angegeben hast. Willst du mehrere Skripte thematisch gruppieren, legst du dort einfach Unterordner an und verschiebst die passenden Skriptdateien samt einem gegebenenfalls beigelegten SVG-Icon hinein. Im Reiter „Werkzeuge“ erscheinen sie dann automatisch nach Gruppen sortiert.

Manche Skripte bringen eigene Einstellungen mit, die aber erst beim ersten Ausführen des Skripts angelegt werden. Danach findest du sie im Bereich der Einstellungen der Erweiterung unter „Settings for installed Scripts“.

Fertige Skripte lassen sich grob in zwei Kategorien einteilen, nämlich kleine Helferskripte für einzelne Handgriffe und größere, anwendungsartige Skripte mit deutlich größerem Funktionsumfang.

Ein guter Startpunkt für die kleinen Helfer sind einige der Beispielskripte aus dem Ordner ea-scripts im Repository der Erweiterung.

• „Connect selected elements with an arrow“ verbindet zwei ausgewählte Objekte oder Gruppen automatisch mit einem Pfeil und erkennt dabei selbstständig das größere Objekt innerhalb einer Gruppe, um genau dieses zu verbinden.
• „Add box around selected elements“ zieht eine Box um mehrere ausgewählte Objekte, praktisch, um zusammengehörige Bereiche nachträglich zu rahmen, ohne alles neu zu zeichnen.
• „Reverse selected arrows“ dreht die Richtung ausgewählter Pfeile um, ohne dass du sie löschen und neu ziehen musst.
• „Set grid size“ ändert die Rastergröße auf einen von dir gewählten Wert. Diese Einstellung gibt es in der normalen Oberfläche nicht.
• „Set Text Alignment“ und „Set Font Family“ setzen Ausrichtung beziehungsweise Schriftart eines Textobjekts per Tastaturkürzel, ohne den Umweg über das Bearbeiten-Menü.

Daneben gibt es deutlich größere Skripte, die Excalidraw um eine ganze Funktionsebene erweitern. Das bekannteste davon ist der MindMap Builder vom Entwickler der Erweiterung selbst. Er macht aus Excalidraw eine tastaturgesteuerte Mindmapping-Anwendung mit automatischem Layout und Markdown-Import. Skripte dieser Größenordnung würden hier den Rahmen sprengen. Ein eigenes Kapitel dazu folgt später.

Bevor du eigene Skripte schreibst

Für den Einstieg reichen die fertigen Skripte der Script Library meistens völlig aus. Wenn du später eigene Automatisierungen bauen willst, geht das über dieselbe ExcalidrawAutomate-API, mit der auch die fertigen Skripte arbeiten. Das eignet sich eher für ein eigenes, tieferes Kapitel.

Vorlagen

Wenn du in Obsidian eine neue Excalidraw-Zeichnung anlegst, sind das Aussehen und weitere Einstellungen, wie die Hintergrundfarbe, die Ausrichtung der Objekte oder die Pfeiltypen, vorgegeben. Falls du lieber dickere Konturen oder andere Farben bevorzugst, erstellst du eine neue Excalidraw-Zeichnung und nimmst dort die entsprechenden Einstellungen vor. Im Beispiel unten habe ich Hintergrundfarbe, Raster, Farben, Konturen, Pfeiltyp und Schriftart angepasst.

So machst du daraus eine Vorlage.

1. Lösche zunächst alle Objekte aus der Zeichnung, benenne sie um, zum Beispiel in Mein Standard, und speichere sie.
2. Lege im Excalidraw-Ordner einen weiteren Ordner an, den du Templates nennst. Du kannst natürlich auch jeden anderen Namen verwenden.
3. Verschiebe die eben erstellte Zeichnung in diesen Ordner (Befehlspalette → „Datei in anderen Ordner verschieben“).
4. Gib in den Einstellungen der Excalidraw-Erweiterung an, dass diese Vorlage beim Erstellen einer neuen Zeichnung genutzt werden soll. Die Einstellung findest du unter Basic → Excalidraw template file or folder (Groß- und Kleinschreibung beachten).
5. Trage in das Eingabefeld den Dateinamen samt Pfad und der Endung .md ein, also Excalidraw/Templates/Mein Standard.md.

Wenn du nun eine neue Zeichnung erstellst, wird sie mit den Einstellungen deiner Vorlage angelegt. Wie du im Abschnitt Die Rückseite der Zeichnung gesehen hast, ist eine Vorlage nichts anderes als eine normale Excalidraw-Datei, die du einmal einrichtest und danach als Ausgangspunkt für neue Zeichnungen verwendest. Das lohnt sich vor allem, wenn du mit dem Excalidraw-Standard unzufrieden bist und einen eigenen Grundzustand möchtest, etwa mit einer eigenen Hausfarbe, einer anderen Standardschrift oder einem von Anfang an eingeschalteten Raster.

Du kannst eine Vorlage auch mit Objekten versehen, zum Beispiel mit einem Wasserzeichen, einem Copyright-Vermerk am unteren Rand oder einem Namensfeld, das du nur noch ausfüllen musst. Dazu öffnest du die Vorlage im Ordner Templates und platzierst die gewünschten Objekte, zum Beispiel ein Bild. Im Beispiel unten habe ich das Logo mit dem Motto des Guides eingefügt, die Deckkraft des Bildes heruntergesetzt und das Bild über das Kontextmenü gesperrt. Leider wird die Deckkraft dadurch für die gesamte Vorlage heruntergesetzt, das heißt, auch neue Objekte sind nun transparenter. Allerdings gibt es einen Trick. Du musst nur ein neues Objekt auf der Zeichnung platzieren, zum Beispiel ein Rechteck, und dort die Deckkraft wieder auf 100 % stellen. Den Grund dafür erklärt der Hinweis unten.

Nun wird jede neue Zeichnung mit diesem Hintergrundbild erstellt.

Warum sich die Farbe der Objekte plötzlich ändert

Excalidraw merkt sich immer nur einen einzigen aktuellen Stil, also eine Konturfarbe, eine Hintergrundfarbe und so weiter. Neue Objekte übernehmen automatisch genau diesen Stil. Sobald du aber ein vorhandenes Objekt anklickst und seine Farbe änderst, wird nicht nur dieses eine Objekt umgefärbt, sondern die neue Farbe wird gleichzeitig zum aktuellen Stil für alle künftig neu gezeichneten Objekte. Eine Vorlage mit fest definierten Farben für Rechtecke und Rauten bleibt also nur so lange verwendbar, bis du zum ersten Mal die Farbe eines bestehenden Objekts änderst. Ab diesem Moment übernehmen neue Objekte die zuletzt verwendete Farbe statt der ursprünglichen Vorlagenfarbe.

Das Kopieren der Formatierung mit ⌘-⌥-C und ⌘-⌥-V hilft dir dabei nur bedingt, denn dafür brauchst du bereits ein vorhandenes Objekt mit der gewünschten Farbe. Jede andere Farbänderung würde den aktuellen Stil wieder verändern.

Um das Problem zu umgehen, kannst du sofort ein weiteres Objekt erstellen und dort die Änderung wieder auf die Standardeinstellung zurücksetzen. Danach kannst du die zuvor geänderte Formatierung mit ⌘-⌥-C und ⌘-⌥-V auf neue Objekte anwenden, ohne den aktuellen Stil zu ändern.

Baust du diesen Ansatz aus, funktioniert auch eine kleine Palette fertiger Musterobjekte in der Vorlage selbst. Diese Objekte duplizierst du mit ⌘-D, statt neue zu zeichnen, oder du kopierst ihre Formatierung wie oben beschrieben. Der Vorteil beim Kopieren der Formatierung ist, dass du sie auf verschiedene Objekttypen anwenden kannst. Beide Lösungen verändern den aktuellen Stil nicht. Deshalb bleibt die Palette als verlässliche Quelle immer erhalten, egal wie oft du daraus kopierst.

Eine Alternative dazu ist die weiter oben beschriebene Bibliothek. Du erstellst eine Zeichnung mit allen Objekten in ihrem gewünschten Aussehen und legst daraus jeweils ein Objekt in der Bibliothek ab. Der Unterschied zur Palette in der Vorlage ist, dass die Bibliothek nicht an Zeichnungen mit einer bestimmten Vorlage gebunden ist, sondern im gesamten Vault zur Verfügung steht. Falls du mehrere unterschiedliche Vorlagen mit jeweils eigenem Aussehen verwendest, benötigst du dann entsprechend mehrere Bibliothekselemente.

Vorlagen für bestimmte Aufgaben

Vielleicht ist dir aufgefallen, dass ich im Hinweis oben von mehreren Vorlagen schreibe. Denn es ist auch möglich, statt einer einzelnen Vorlage nur den Pfad zum Vorlagenordner, also Excalidraw/Templates, in den Einstellungen anzugeben. So kannst du im Ordner mehrere unterschiedliche Vorlagen ablegen.

Wenn du nur den Vorlagenordner angegeben hast, wird nicht sofort eine neue Zeichnung erstellt. Stattdessen wird dir eine Auswahl aller im Ordner befindlichen Vorlagen angeboten.

Im Beispiel sind es drei Vorlagen, aus denen du auswählen kannst. Falls du keine auswählst und den Dialog stattdessen mit einem Klick außerhalb des Dialogs oder mit einem Klick auf den Schließen-Button in der rechten oberen Ecke verlässt, wird trotzdem eine neue Zeichnung mit der eingebauten Standardvorlage erstellt.

Hier ein Beispiel für die Vorlage „Kanban Vorlage“ mit drei Spalten.

Vorlagen ohne Auswahldialog

Der Auswahldialog ist der eingebaute Weg zu mehreren Vorlagen. Wenn du fertige Formate wie ein Kanban-Board, eine Getting-Things-Done-Struktur oder eine Mindmap-Vorlage ohne diesen Dialog anlegen möchtest, gibt es zwei Alternativen.

Der einfachste Weg ohne zusätzliches Werkzeug ist das Duplizieren von Hand. Du legst dir einen Ordner mit deinen fertigen Vorlagen an, öffnest im Dateiexplorer das Kontextmenü der gewünschten Vorlage und wählst Datei duplizieren. Die Kopie öffnet sich beim ersten Anklicken direkt in der Zeichenansicht, weil sie das komplette Frontmatter und den JSON-Inhalt bereits mitbringt. Du musst sie nur noch umbenennen und bei Bedarf in den richtigen Ordner verschieben.

Etwas komfortabler geht es mit der Erweiterung QuickAdd. Damit legst du dir für jede deiner Vorlagen einen eigenen Befehl an, der beim Aufruf nach einem Titel fragt und danach automatisch eine neue Datei mit dem Inhalt der gewählten Vorlage anlegt. Wichtig dabei ist, dass die hinterlegte Vorlage eine gewöhnliche Markdown-Datei mit dem Excalidraw-Frontmatter und dem JSON-Block ist, genau wie deine anderen Vorlagen.

Der naheliegendere Weg über Templater führt in der Praxis dagegen öfter zu Problemen. Templater legt beim Erstellen einer neuen Notiz zunächst eine leere Datei an und befüllt sie erst danach über ein Skript. In diesem kurzen Zeitfenster erkennt Excalidraw die Datei noch nicht als Zeichnung und öffnet sie in der Textansicht statt auf der Arbeitsfläche. QuickAdd umgeht das Problem, weil die Vorlage direkt beim Erstellen der Datei eingesetzt wird. Landest du doch einmal in der Textansicht, wechselst du wie im Abschnitt Die Rückseite der Zeichnung beschrieben zurück.

Fazit

Du hast jetzt ein gutes Rüstzeug, um Excalidraw für dein visuelles Denken zu nutzen, von der ersten schnellen Skizze über Bibliotheken und Vorlagen bis zu Skripten, die dir wiederkehrende Handgriffe abnehmen. Wichtiger als jedes einzelne Werkzeug ist aber die Grundhaltung von Zsolt Viczián, nämlich dass eine Zeichnung nicht fertig aussehen muss, um nützlich zu sein.

Mit diesem Kapitel habe ich allerdings nur an der Oberfläche der Erweiterung gekratzt. Sie bietet noch viel mehr, was ein eigenes Buch füllen würde.

Der beste Einstieg ist nicht die Lektüre weiterer Absätze, sondern eine leere Arbeitsfläche. Nimm dir eine Notiz vor, an der du gerade arbeitest, und versuche, ihren Kerngedanken als kleine Skizze festzuhalten, ganz ohne Anspruch auf Perfektion. Mit der Zeit merkst du selbst, an welchen Stellen sich eine zweite, visuelle Ebene neben dem Text lohnt und wo der reine Text weiterhin die bessere Wahl ist.