Tutorials

Diagramme direkt in VS Code erstellen: Der umfassende Draw.io Guide

Melden

Diagramme und Architekturskizzen gehören zum Entwickleralltag. Statt jedoch ständig zwischen externen Tools (wie der Web-App von diagrams.net/Draw.io) und dem Code-Editor hin- und herzuwechseln, kannst du Diagramme direkt in Visual Studio Code erstellen und bearbeiten.

In dieser Anleitung erfährst du Schritt für Schritt, wie du die Draw.io-Erweiterung in VS Code installierst, optimal nutzt und Versionskontrolle für deine Skizzen meisterst.

Warum Draw.io in VS Code nutzen?

  • Kein Kontextwechsel: Bleibe in deiner gewohnten Entwicklungsumgebung.
  • Offline-fähig: Funktioniert komplett ohne Internetverbindung.
  • Git-Integration: Diagramme liegen direkt im Repository neben dem Code und können versioniert werden.
  • Geheime Superkraft: Du kannst Diagramme als .drawio.svg oder .drawio.png speichern. Diese Dateien sind vollwertige Bilder (z. B. für README.md), lassen sich in VS Code aber trotzdem als bearbeitbare Diagramme öffnen!

1. Installation der Erweiterung

  1. Öffne Visual Studio Code.
  2. Gehe in der linken Seitenleiste auf das Extensions-Symbol (oder drücke Strg + Umschalt + X bzw. Cmd + Shift + X auf dem Mac).
  3. Suche im Suchfeld nach: Draw.io Integration (Ersteller: Henning Dieterichs / hediet.vscode-drawio).
  4. Klicke auf Installieren.

Nach wenigen Sekunden ist das Tool einsatzbereit – ein Neustart von VS Code ist in der Regel nicht erforderlich.

2. Dein erstes Diagramm erstellen

Die Erweiterung reagiert auf bestimmte Dateiendungen. Um ein Diagramm zu starten, erstelle einfach eine neue Datei in deinem Projekt-Explorer:

Die wichtigsten Dateiendungen:

  1. mein-diagramm.drawio
    Das Standardformat (XML-basiert). Ideal für reine Skizzen, die nur im Editor bearbeitet werden sollen.
  2. mein-diagramm.drawio.svg (Empfohlen!)
    Das beste Format für Entwickler. Es ist eine echte SVG-Vektorgrafik, die direkt in Markdown-Dateien oder auf GitHub gerendert wird, bleibt in VS Code aber voll editierbar.
  3. mein-diagramm.drawio.png
    Ähnlich wie SVG, jedoch als Rastergrafik. Praktisch, wenn Plattformen keine SVGs unterstützen.

Tipp: Erstelle für den Start eine Datei namens architektur.drawio.svg. VS Code erkennt die Endung und öffnet sofort die grafische Oberfläche von Draw.io.

3. Die Benutzeroberfläche im Überblick

Wenn du die Datei öffnest, siehst du das vertraute Interface von Draw.io direkt im Editor-Fenster:

  • Linke Leiste (Formen-Bibliothek):
    Hier findest du Standardformen (Rechtecke, Kreise, Pfeile), UML-Elemente, Flussdiagramm-Symbole und Cloud-Icons (AWS, Azure, GCP, Kubernetes).
    • Tipp: Klicke unten links auf „Mehr Shapes“ (More Shapes), um spezifische Bibliotheken wie C4 Modeling, Cisco oder BPMN zu aktivieren.
  • Mittlerer Bereich (Canvas):
    Deine Zeichenfläche. Nutze Drag & Drop, um Formen aus der linken Leiste auf die Fläche zu ziehen.
  • Rechte Leiste (Eigenschaften / Format):
    Passe Farben, Schriftarten, Linienstile und Verbindungen für ausgewählte Elemente an.

4. Wichtige Workflows & Best Practices

Verbindungen und Pfeile zeichnen

  • Fahre mit der Maus über eine Form, bis blaue Richtungspfeile erscheinen.
  • Ziehe von einem dieser Pfeile eine Linie zu einer anderen Form. Die Verbindung dockt automatisch an und bleibt auch bestehen, wenn du die Formen verschiebst.

Diagramme in Markdown (z. B. README.md) einbinden

Wenn du die Datei als diagramm.drawio.svg gespeichert hast, kannst du sie direkt in deine Dokumentation einbetten:

# Projektdokumentation

Hier ist unsere aktuelle Architektur:

![Architekturdiagramm](./diagramm.drawio.svg)

Auf GitHub oder GitLab wird das Diagramm sofort als Bild angezeigt – klonst du das Repo, kannst du es in VS Code mit einem Klick weiterbearbeiten.

Code-Linking (Verlinkung zum Code)

Ein extrem starkes Feature dieser Erweiterung ist das Verlinken von Diagramm-Knoten mit echten Code-Dateien:

  1. Mache einen Rechtsklick auf eine Form im Diagramm.
  2. Wähle Link bearbeiten... (Edit Link).
  3. Gib den relativen Pfad zu einer Datei ein (z. B. src/controllers/auth.ts).
  4. Hältst du nun Alt bzw. Option gedrückt und klickst auf die Form, springt VS Code direkt in die entsprechende Codedatei.

5. Nützliche Einstellungen & Features

Über Datei -> Einstellungen (Settings) kannst du das Verhalten der Extension anpassen (suche nach drawio):

  • Theme (Dark Mode): Standardmäßig passt sich Draw.io deinem VS Code-Farbschema (Hell/Dunkel) an. Du kannst das Theme fest auf dark, kennedy oder min einstellen.
  • Offline-Modus: Die Extension läuft standardmäßig offline und sendet keine Diagrammdaten an externe Server, was für Firmenprojekte bezüglich Datenschutz ideal ist.

Fazit

Mit der Draw.io-Integration wird Visual Studio Code zur All-in-One-Lösung für Dokumentation und Entwicklung. Durch die Verwendung von .drawio.svg-Dateien schlägst du zwei Fliegen mit einer Klappe: Perfekt lesbare Grafiken für Markdown und Git-Repositories, kombiniert mit nativer, schneller Editierbarkeit ohne externe Werkzeuge.

0