Excalidraw in Obsidian: Handgezeichnete Diagramme in Notizen

Wie bereits erwähnt, liegen Canvas-Dateien im .canvas-Format vor und existieren getrennt von .md-Dateien – sie müssen unabhängig verwaltet werden und können nicht mit Notizen in derselben Datei kombiniert werden. Dieses Kapitel stellt ein Tool vor, das dieses Problem löst: das Excalidraw-Plugin.

Was ist Excalidraw und wie unterscheidet es sich von Canvas?

Was ist Excalidraw?

Excalidraw ist ein kostenloses und quelloffenes Online-Zeichenwerkzeug mit einer eigenständigen Webversion (excalidraw.com), die du direkt im Browser nutzen kannst, ohne dich anmelden zu müssen. Der handgezeichnete Stil eignet sich perfekt für Flussdiagramme, Mindmaps, Architekturdiagramme und ähnliche Inhalte.

In Obsidian verwenden wir die Third-Party-Plugin-Version – sie wird von Community-Entwicklern gepflegt, nicht offiziell von Obsidian, und muss daher manuell installiert werden. Die Kernfunktionen sind dieselben wie in der Webversion, jedoch mit zusätzlicher tiefer Integration in Obsidian.

Unterschiede zu Canvas

Beide scheinen „Zeichnen auf einer Leinwand“ zu sein, aber das Dateiformat ist völlig unterschiedlich – das ist der Kernunterschied:

• Canvas: Erzeugt eine .canvas-Datei. Dies ist eine eigenständige JSON-Datei, die getrennt von deinen .md-Notizen existiert und unabhängig verwaltet werden muss.
• Excalidraw: Die Zeichnungsdaten können komprimiert und am Ende einer .md-Datei eingebettet werden – eine Datei, Text und Zeichnung koexistieren, keine separate Verwaltung nötig.

Die beiden folgenden Screenshots stammen aus derselben Datei:

Deshalb empfehle ich Excalidraw: Wenn du eine Datei öffnest, siehst du den Text; mit einem Umschalter siehst du die Zeichnung. Beide Inhaltsarten an einem Ort.

Installation des Excalidraw-Plugins

Excalidraw ist ein Drittanbieter-Plugin und muss manuell installiert werden.

Pfad: Einstellungen → Drittanbieter-Plugins → Community-Plugins → Suche nach „Excalidraw“ → Installieren → Aktivieren

Nach der Installation aktiviere das Plugin, und in der linken Seitenleiste erscheint ein Excalidraw-Symbol.

Erstellen und Verwenden von Excalidraw

Wie erstelle ich eine neue Datei?

Es gibt zwei Möglichkeiten:

1. Befehlspalette: Cmd+P (Mac) oder Strg+P (Windows), suche nach „Excalidraw: Neue Zeichnung“, drücke Enter.
2. Linke Seitenleiste: Klicke auf das Excalidraw-Symbol, um direkt eine neue zu erstellen.

Standardmäßig wird eine neue Datei als .excalidraw (nicht .md) erstellt. Keine Sorge – wie man sie zu einem Teil einer .md-Datei macht, ist der Schwerpunkt des Abschnitts „Zwei in einem“ weiter unten.

Häufige Operationen und Tastenkürzel

In der Excalidraw-Symbolleiste hat jedes Werkzeug eine Zahl darunter – das ist die Tastenkombination. Drücke die Zahl, um das Werkzeug direkt zu wechseln, ohne auf die Symbolleiste klicken zu müssen:

Eine zusätzliche Funktion im Vergleich zu Canvas: Excalidraw hat ein spezielles Freihand-Werkzeug (Tastenkürzel 7), mit dem du frei mit der Maus oder dem Trackpad zeichnen kannst – das kann Canvas nicht.

Tastatur-Workflow: Zeichnen ohne die Tastatur zu verlassen

Excalidraw unterstützt auch einen reinen Tastatur-Workflow, ideal zum schnellen Erstellen von Knoten, Verbinden und Schreiben von Inhalten:

Grundlegende Navigation (im Auswahlmodus):

Inhalte zur Leinwand hinzufügen

Formen und Text: Wähle eine Form aus der Symbolleiste und klicke auf die Leinwand, um sie zu zeichnen. Mit dem Textwerkzeug klicken und tippen – chinesische Schriftzeichen werden unterstützt.

Pfeilverbindungen: Wenn ein Rechteck ausgewählt ist, erscheinen beim Überfahren des Randes grüne Verbindungspunkte. Ziehe einen Pfeil von einem dieser Punkte zu einer anderen Form, und er rastet ein.

Vorhandene Notizen: Ziehe Notizen direkt aus der Obsidian-Dateibaum in die Excalidraw-Leinwand – sie werden als Notizvorschaukarten eingebettet.

Bilder: Ziehe Bilddateien auf die Leinwand, um sie direkt anzuzeigen.

Wichtiger Punkt! Excalidraw mit KI zeichnen

Ähnlich wie im Abschnitt „Canvas mit KI zeichnen“ weiter oben kann Excalidraw auch direkt von Claude Code generiert werden.

Hintergrund

Wir haben bereits Claude Code und das Skill-System vorgestellt. Canvas verwendet den json-canvas-Skill, und Excalidraw hat ebenfalls einen eigenen Skill: excalidraw-diagram. Natürlich gibt es viele MCPs und Skills rund um Excalidraw – du kannst auswählen, was du brauchst.

Er wurde von axtonliu erstellt und auf GitHub als Open Source veröffentlicht:

https://github.com/axtonliu/axton-obsidian-visual-skills/tree/main/excalidraw-diagram

Nach dem Herunterladen lege ihn wie andere Skills auch im Verzeichnis ~/.claude/skills/ ab.

Dieser Skill erzeugt eigenständige .excalidraw-Dateien, geeignet für Szenarien, in denen du nur die Zeichnung benötigst und sie nicht mit Notiztext vermischen möchtest.

Wenn du die Zeichnung direkt in eine .md-Datei einbetten möchtest (das später beschriebene Zwei-in-eins-Format), habe ich einen erweiterten Skill geschrieben: obsidian-excalidraw, der genau dafür gedacht ist – das Ergebnis wird komprimiert und am Ende der .md-Datei eingebettet, ohne zusätzliche Dateien. Die beiden Skills haben unterschiedliche Zwecke; wähle nach Bedarf.

Verwendung

Gib in Claude Code /excalidraw-diagram ein, wähle diesen Skill aus, drücke Tab und beschreibe dann, was du zeichnen möchtest. Claude Code generiert die entsprechende Excalidraw-Datei.

Live-Demo

Ich habe den Inhalt dieses Kapitels als Demo verwendet – ich sagte zu Claude Code: „Zeichne ein Flussdiagramm der Kapitelstruktur dieses Excalidraw-Inhalts und zeige die Beziehungen zwischen den Abschnitten.“

Claude Code las den Inhalt und generierte automatisch ein Strukturdiagramm, das direkt am Ende der .md-Datei eingebettet wurde. Wechsle in den Excalidraw-Modus, um es zu sehen. Kein manuelles Ziehen von Knoten oder Verbinden von Linien nötig – viel schneller als von Hand zeichnen.

Wichtiger Punkt! Excalidraw in .md-Dateien einbetten (Zwei in einem)

Lass es uns klarstellen: Standardmäßig erstellt das Excalidraw-Plugin .excalidraw-Dateien, die getrennt von .md-Dateien sind und unabhängig verwaltet werden müssen, genau wie Canvas.

Die „Zwei-in-eins“-Funktion ist nicht das Standardverhalten; sie erfordert zusätzliche Konfiguration. Nach der Konfiguration werden neue Dateien im .md-Format erstellt, wobei die Zeichnungsdaten komprimiert am Ende der Datei gespeichert werden, sodass beide in derselben Datei koexistieren.

Canvas kann das nicht, aber Excalidraw schon – nach der Konfiguration kann dieselbe .md-Datei sowohl als normale Notiz als auch als Zeichenbrett dienen, alles in einer Datei. Das ist der wertvollste Teil dieses Artikels.

Im Folgenden habe ich es in 5 Schritte unterteilt.

5.1 Zwei wichtige Eigenschaften

Aufmerksame Leser haben diese beiden Frontmatter-Eigenschaften vielleicht bereits in meinen früheren Notiz-Screenshots gesehen:

excalidraw-plugin: parsed
excalidraw-open-md: true

excalidraw-plugin: parsed: Teilt dem Excalidraw-Plugin mit, dass diese .md-Datei Excalidraw-Daten enthält, die analysiert werden müssen. Ohne diese Eigenschaft verarbeitet das Plugin die Datei nicht.

excalidraw-open-md: true: Öffnet die Datei standardmäßig im Markdown-Modus (anstatt direkt in den Zeichenmodus zu wechseln). Auf true gesetzt, siehst du beim Öffnen der Datei zuerst den Text und schaltest manuell um, wenn du zeichnen möchtest. Ohne diese Einstellung springt die Datei jedes Mal direkt zum Zeichenbrett, und du müsstest zurückwechseln, um Text zu lesen – lästig.

Mit diesen beiden Eigenschaften im Frontmatter erhält die Datei die „Dual-Mode“-Fähigkeit.

5.2 Erstellen einer Vorlagendatei

Der Schlüssel zur Zwei-in-eins-Einrichtung besteht darin, diese Konfiguration in einer Vorlagendatei zu speichern, sodass neue Notizen sie automatisch enthalten, ohne dass du sie jedes Mal manuell hinzufügen musst.

Schritte:

1. Erstelle in deinem Vorlagenordner (z. B. 02 Templates/) eine neue .md-Datei und nenne sie „Excalidraw-Vorlage“.
2. Kopiere und füge den folgenden Inhalt ein und speichere ihn.

---
excalidraw-plugin: parsed
excalidraw-open-md: true
---

%%
### Zeichnung
```compressed-json
N4IgLgngDgpiBcIYA8DGBDANgSwCYCd0B3EAGhADcZ8BnbAewDsEAmcm+gV31TkQAswYKDXgB6MSgw4CxAHSp6AWzJJMMJTEZgaCANoBdcuihQAymHRg+oCthhEAQulQBrAOb4ujXAGF6mPT4CCAAxABmkVGqnnhm2ABefIycmJgAvuTh2Oq68MDp6UA
```
%%

Dies ist eine Excalidraw-Vorlage mit einer leeren Leinwand. Die beiden Frontmatter-Eigenschaften (excalidraw-plugin: parsed und excalidraw-open-md: true) teilen dem Plugin mit, dass diese Datei im Zwei-in-eins-Format vorliegt und standardmäßig im Markdown-Modus geöffnet werden soll. Das compressed-json am Ende sind die leeren Leinwanddaten.

5.3 Excalidraw-Plugin-Einstellungen

Eine Vorlagendatei allein reicht nicht – du musst dem Excalidraw-Plugin auch mitteilen, „wo die Vorlage zu finden ist“, und eine Einstellung deaktivieren, die die Dateiverwaltung stört.

Pfad: Einstellungen → Excalidraw

Zwei Dinge müssen geändert werden:

① Vorlagenort festlegen: Suche in den Excalidraw-Einstellungen die Option „Vorlagendatei“ und gib den Pfad zu deiner Vorlage ein, z. B. 02 Templates/Excalidraw-Vorlage. Von nun an verwendet Excalidraw bei jeder neuen Dateierstellung automatisch diese Vorlage, einschließlich der Eigenschaft excalidraw-open-md: true.

② „Datum zu neuem Dateinamen hinzufügen“ deaktivieren: Standardmäßig hängt Excalidraw das Erstellungsdatum an neue Dateinamen an, z. B. Zeichnung 2026-03-12. Das macht Dateinamen lang und inkompatibel mit Obsidians Vorlagenbenennungslogik. Finde diese Option und schalte sie aus.

5.4 Tastenkürzel zuweisen

Das Umschalten zwischen Markdown-Modus und Zeichenmodus über das Rechtsklick-Menü ist zu langsam – weise ein Tastenkürzel für sofortiges Umschalten zu.

Pfad: Einstellungen → Tastenkürzel → Suche nach „Excalidraw“

Finde diesen Eintrag: „Excalidraw: Zwischen Excalidraw- und Markdown-Modus umschalten“

Weise ihm Cmd+E (Mac) oder Strg+E (Windows) zu. Überprüfe zuerst, ob diese Tastenkombination bereits belegt ist – Obsidians Standard-Cmd+E ist für Kursivschrift. Wenn du Kursivschrift oft verwendest, wähle eine andere Taste, z. B. Cmd+Umschalt+E.

Nach der Zuweisung kannst du in einer Zwei-in-eins-Datei mit Cmd+E zwischen „Text anzeigen“ und „Zeichnung anzeigen“ umschalten – sehr praktisch.

5.5 Komprimierte Daten am Ende der Datei

Nach der Einrichtung wird jedes Mal, wenn du Zeichnungsinhalte in einer Zwei-in-eins-Datei speicherst, automatisch ein Datenblock am Ende der Datei generiert:

%%
### Zeichnung
```compressed-json
N4IgLgngDgpiBcIYA8DGBDANgSwCYCd0B3EAGhADcZ8BnbAewDsEAmcm+gV31TkQ...
```
%%

Dieser compressed-json-Codeblock ist das Ergebnis der Komprimierung aller Zeichnungsdaten – Koordinaten, Farben, Textinhalte, Verbindungsbeziehungen – alles in diese eine Zeichenfolge komprimiert.

Drei Dinge zu beachten:

• Lösche diesen Inhalt nicht manuell. Wenn du ihn löschst, sind die Zeichnungsdaten weg, und beim Wechsel in den Excalidraw-Modus wird eine leere Leinwand angezeigt.
• %% ist Obsidians Kommentarsyntax. In der Leseansicht ist dieser Inhalt versteckt und wird nicht angezeigt, sodass er die Lesbarkeit der Notiz nicht beeinträchtigt.
• Die compressed-json-Zeile muss eine vollständige einzelne Zeile sein. Wenn sie durch einen Zeilenumbruch unterbrochen wird, führt die Datei zu einem Fehler und lässt sich nicht öffnen.

Zusammenfassung

Was du heute gelernt hast:

1. Excalidraw = kostenloses und quelloffenes Zeichenwerkzeug: Hat eine eigenständige Webversion; Obsidian verwendet die Third-Party-Plugin-Version, mit handgezeichnetem Stil und unendlicher Leinwand.
2. Kernunterschied zu Canvas: Canvas erzeugt separate .canvas-Dateien, die unabhängig verwaltet werden müssen; Excalidraw-Zeichnungsdaten können komprimiert in .md-Dateien eingebettet werden – eine Datei, zwei Verwendungen.
3. Installation: Einstellungen → Drittanbieter-Plugins → Community-Plugins → Suche nach und installiere Excalidraw.
4. Werkzeug-Tastenkürzel: Die Zifferntasten 1-8 und 0 zum Wechseln der Werkzeuge, Esc zum Beenden der Bearbeitung, Tab zum Springen zwischen Elementen, Pfeiltasten zum Bewegen – Kernrhythmus: Zifferntasten für Werkzeuge + Esc/Tab für Navigation.
5. KI-Zeichnung: Der /obsidian-excalidraw-Skill ermöglicht es Claude Code, direkt eingebettete Zeichnungen zu generieren, viel schneller als manuelles Ziehen von Knoten.
6. Zwei-in-eins-Einrichtung: Füge excalidraw-plugin: parsed + excalidraw-open-md: true zum Frontmatter hinzu, konfiguriere über eine Vorlagendatei, lege den Vorlagenpfad in den Excalidraw-Einstellungen fest, weise Cmd+E für schnelles Modusumschalten zu.
7. Dateienddaten: Der ## Zeichnung + compressed-json-Codeblock sind die komprimierten Zeichnungsdaten, eingeschlossen in %%, in der Leseansicht unsichtbar – nicht manuell löschen.

Danksagung: Die „Zwei-in-eins“-Einrichtung in diesem Kapitel bezieht sich auf die Methode des Bilibili-Erstellers Fiveth_ (Video: BV1hyhPzoEcd), hiermit gewürdigt.