Graphviz-Vorschau in VS Code

Installieren Sie Graphviz Viewer, öffnen Sie eine .dot- oder .gv-Datei und drücken Sie Strg+K V (Cmd+K V auf dem Mac). Der Graph erscheint neben dem Text und wird beim Tippen neu gezeichnet, und weil Graphviz 16.1 als WebAssembly in der Erweiterung steckt, brauchen Sie keine eigene Graphviz-Installation. Vorschau, Fehleranzeige, Knotensuche und der Export des offenen Graphen als SVG oder PNG sind kostenlos. Zovo Pro (einmalig 19 USD) ergänzt den PDF-Export, den Export aller Graphen im Arbeitsbereich und den Export beim Speichern, und jedes dieser Werkzeuge können Sie dreimal kostenlos ausprobieren.

In VS Code installieren Marketplace-Seite Open VSX (Cursor, Windsurf, VSCodium)

Kostenlos, MIT-Lizenz. Extension ID zovo.zovo-graphviz-preview.

Schritte in VS Code

Installieren Sie Graphviz Viewer aus dem Marketplace, oder drücken Sie Ctrl+P (Cmd+P unter macOS) und führen Sie ext install zovo.zovo-graphviz-preview aus.
Öffnen Sie eine .dot- oder .gv-Datei und klicken Sie auf das Vorschausymbol in der Editor-Titelleiste, oder drücken Sie Strg+K V (Cmd+K V).
Die Vorschau zeichnet den Graphen 300 ms nach Ihrer letzten Eingabe neu, ohne dass Sie speichern müssen. Die Statuszeile zeigt die Zahl der Knoten und Kanten, das Layoutverfahren und die Layoutzeit.
Syntaxfehler werden im Editor unterstrichen und in der Ansicht „Probleme“ aufgeführt. Die Vorschau behält bis zur Korrektur die letzte fehlerfreie Zeichnung, und ein Klick auf die Fehlermeldung setzt den Cursor an die Fehlerstelle.
Verschieben Sie den Graphen durch Ziehen, und zoomen Sie mit Strg oder Cmd und dem Mausrad an der Mausposition. Mit „Find node“ suchen Sie Knoten, und ein Klick auf einen Knoten oder eine Kante springt zur passenden Zeile im Quelltext.
Wählen Sie in der Werkzeugleiste das Layoutverfahren (dot, neato, fdp, sfdp, circo oder twopi) und speichern Sie den Graphen als SVG oder PNG.

In Cursor, Windsurf und VSCodium

Diese Editoren installieren Erweiterungen aus Open VSX. Öffnen Sie die Extensions-Ansicht (Ctrl+Shift+X), suchen Sie nach zovo.zovo-graphviz-preview und klicken Sie auf Install. Die Seite auf Open VSX ist zovo/zovo-graphviz-preview. Danach funktioniert alles wie in VS Code.

Was kostenlos ist

Kostenlos sind die Live-Vorschau, die Fehleranzeige im Editor und in „Probleme“, Zoomen, Knotensuche, der Sprung zur Quellzeile, alle sechs Layoutverfahren und der Export des offenen Graphen als SVG oder PNG (doppelte Auflösung, weißer Hintergrund). Codeblöcke mit der Sprache dot, graphviz oder gv in Markdown-Dateien erscheinen als Grafik in der Markdown-Vorschau von VS Code. Im dunklen Farbschema übernehmen schwarze Standardlinien und Texte die Farben Ihres Farbschemas, selbst gesetzte Farben bleiben erhalten. Die Layouts laufen in einem eigenen Thread mit Zeitlimit, sodass ein sehr großer Graph VS Code nicht einfrieren kann. „Graphviz: Get Started“ in der Befehlspalette öffnet eine kurze Einführung.

Was Zovo Pro hinzufügt

Export All Graphs in Workspace schreibt in einem Durchgang jede .dot- und .gv-Datei und jeden dot-Block in Markdown-Dateien als SVG, PNG, PDF oder als ein gemeinsames PDF mit allen Graphen. Der Zielordner graphviz-export übernimmt Ihre Ordnerstruktur, sodass Sie die Bilder für die Dokumentation nicht einzeln exportieren müssen. Außerdem gibt es Export to PDF (Vector, Title Page) für ein Vektor-PDF, in dem Text als Text erhalten bleibt, wahlweise in Graphengröße oder als A4 oder Letter mit Titelseite und Lesezeichen, und Export on Save, das SVG, PNG oder PDF neben der Quelldatei bei jedem Speichern aktuell hält.

So funktioniert Export All Graphs in Workspace (SVG/PNG/PDF)

Öffnen Sie Ihren Projektordner und führen Sie in der Befehlspalette „Graphviz: Export All Graphs in Workspace (SVG/PNG/PDF) (Pro)“ aus.
Wählen Sie das Format. Die Dateien landen im Ordner graphviz-export, mit derselben Ordnerstruktur wie die Quellen.

Export All Graphs in Workspace (SVG/PNG/PDF) läuft 3 Mal kostenlos, danach braucht es eine Lizenz. Beim Öffnen einer Datei erscheint kein Pop-up, und es läuft kein Countdown.

Per Karte zahlen, einmalig USD 19

Zovo Pro kostet einmalig USD 19. Es ist kein Abo und schaltet die Pro-Werkzeuge in allen Zovo-Erweiterungen frei. Nach der Zahlung per Karte (Stripe) steht der Lizenzschlüssel auf der nächsten Seite. Führen Sie in VS Code "Enter Zovo Pro license key" aus der Command Palette aus und fügen Sie den Schlüssel ein. Der Schlüssel wird auf Ihrem Rechner geprüft, ohne Netzwerkzugriff.

Ein Team mit 5 Personen zahlt einmalig USD 59, ebenfalls per Karte. Alle Regeln und Pro-Werkzeuge stehen auf der Zovo-Pro-Seite (Englisch).

Was es nicht kann

Der PDF-Export nutzt Standardschriften (Times, Helvetica, Courier). Zeichen außerhalb der westeuropäischen Schriften, etwa Chinesisch oder Kyrillisch, erscheinen im PDF als „?“, in SVG und PNG dagegen richtig.
Bilder über das Attribut image= und Bilder in HTML-Beschriftungen werden nicht gezeichnet.
Graphen über 4096 KB werden nicht berechnet, und ein Layout bricht nach 15 Sekunden ab (graphvizPreview.maxSourceKB, graphvizPreview.renderTimeoutSeconds).
Pro Datei gibt es eine Vorschau, und nach einem Neustart von VS Code wird sie nicht wiederhergestellt. Fehler werden nur angezeigt, solange die Vorschau offen ist.

Fragen

Ist Graphviz Viewer kostenlos?

Ja. Vorschau, Fehleranzeige und der Export des offenen Graphen als SVG oder PNG sind kostenlos. Der PDF-Export, der Export aller Graphen und der Export beim Speichern gehören zu Zovo Pro. Jedes dieser Werkzeuge können Sie dreimal kostenlos ausprobieren, und beim Export beim Speichern zählt eine ganze Fenstersitzung als ein Versuch.

Muss ich Graphviz installieren?

Nein. Graphviz 16.1 steckt als WebAssembly in der Erweiterung. Sie funktioniert deshalb auch auf gesperrten Firmenrechnern, in Containern und ohne Internetverbindung.

Funktioniert das auch in Cursor?

Ja. Die Erweiterung steht auch bei Open VSX bereit und lässt sich deshalb in Cursor, Windsurf und VSCodium installieren.

Alle Funktionen und Einstellungen stehen auf der Seite von Graphviz Viewer (Englisch).

Geprüft mit Version 0.2.3 der Erweiterung am 2026-11-12.