Mermaid-Vorschau in VS Code

Installieren Sie Mermaid Viewer, öffnen Sie eine .mmd- oder .mermaid-Datei und führen Sie „Mermaid Viewer: Open Diagram Editor (Text + Live Preview)“ aus. Text und Diagramm stehen nebeneinander, und das Diagramm wird beim Tippen neu gezeichnet. Vorschau, Bearbeiten von mermaid-Blöcken in Markdown, Vorlagen und der Export einzelner Diagramme als PNG oder SVG sind kostenlos. Zovo Pro (einmalig 19 USD) ergänzt ein PDF mit Titelseite, den Export aller Diagramme 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.mermaid-viewer.

Schritte in VS Code

Installieren Sie Mermaid Viewer aus dem Marketplace, oder drücken Sie Ctrl+P (Cmd+P unter macOS) und führen Sie ext install zovo.mermaid-viewer aus.
Öffnen Sie eine .mmd- oder .mermaid-Datei und führen Sie in der Befehlspalette „Mermaid Viewer: Open Diagram Editor (Text + Live Preview)“ aus. Alternativ öffnet Strg+K V (Cmd+K V auf dem Mac) die Vorschau neben dem Text.
In Markdown-Dateien steht über jedem mermaid-Block „Edit diagram“. Der Block öffnet sich neben einer Live-Vorschau, beim Speichern wandert der Text zurück in die Markdown-Datei, und Rückgängig in dieser Datei nimmt die Änderung wieder zurück.
Beim Tippen schlägt die Erweiterung Diagrammtypen, Schlüsselwörter, Pfeile und Formen vor, und fehlerhafte Zeilen werden rot unterstrichen. Ein neues Diagramm beginnen Sie mit „Mermaid Viewer: New Diagram from Template“ aus 15 Vorlagen.
Exportieren Sie ein Diagramm als PNG in genauer Breite oder Höhe oder mit 1x, 2x oder 4x, oder als SVG. Die Option „Text labels for wikis“ schreibt Beschriftungen als reinen SVG-Text, den zum Beispiel Wikis in Azure DevOps und GitHub richtig anzeigen. PNG und SVG können Sie auch direkt in die Zwischenablage kopieren.
Die Ansicht „Mermaid Diagrams“ im Explorer listet alle Diagramme der geöffneten Datei auf. Mit „Go to Diagram“ springen Sie zu einem Diagramm.

In Cursor, Windsurf und VSCodium

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

Was kostenlos ist

Kostenlos sind die Live-Vorschau, das Bearbeiten von mermaid-Blöcken in Markdown, Vervollständigung und Fehlermarkierung, die 15 Vorlagen, die Diagrammliste im Explorer, Farbschemas und Hintergründe sowie der Export einzelner Diagramme als PNG oder SVG samt Kopieren in die Zwischenablage. Mermaid 12.3.0 steckt in der Erweiterung, deshalb funktioniert die Vorschau auch hinter einem Firmenproxy oder ohne Internetverbindung, ohne Konto und ohne Anmeldung. Die Vorschau hat keinen Netzwerkzugriff, und es gibt keine Telemetrie.

Was Zovo Pro hinzufügt

Export All Diagrams in Workspace schreibt jedes Diagramm aus allen .mmd-, .mermaid- und Markdown-Dateien des Ordners als SVG, PNG oder in beiden Formaten in den Ordner mermaid-export, mit derselben Ordnerstruktur wie die Quellen. Diagramme, die sich nicht zeichnen lassen, werden am Ende aufgelistet. So müssen Sie die Bilder für Ihre Dokumentation nicht einzeln exportieren. Außerdem gibt es Export Diagrams to PDF with a Title Page, das alle Diagramme einer Datei in ein PDF mit einer Titelseite schreibt, die alle Diagramme auflistet, und Export on Save, das bei jedem Speichern SVG- oder PNG-Dateien neben der Quelle aktuell hält.

So funktioniert Export All Diagrams in Workspace (SVG/PNG)

Öffnen Sie Ihren Projektordner und führen Sie in der Befehlspalette „Mermaid Viewer: Export All Diagrams in Workspace (SVG/PNG) (Pro)“ aus.
Wählen Sie SVG, PNG oder beides.
Die Diagramme landen im Ordner mermaid-export, mit derselben Ordnerstruktur wie die Quellen.

Export All Diagrams in Workspace (SVG/PNG) 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

Diagramme mit mehr als 500.000 Zeichen oder mehr als 2.000 Verbindungen werden nicht gezeichnet, und das Zeichnen bricht nach 10 Sekunden ab.
Symbolpakete aus dem Internet werden nicht geladen, eingebaute Symbole funktionieren. Formeln in Beschriftungen ($$...$$) sehen unter Umständen nicht richtig aus.
Die Erweiterung hängt sich nicht in die eingebaute Markdown-Vorschau von VS Code ein. Diagramme erscheinen in ihrer eigenen Vorschau.
Als Mermaid-Dateien gelten nur .mmd und .mermaid.

Fragen

Ist der PDF-Export kostenlos?

Nein. Der Export einzelner Diagramme als PNG oder SVG ist kostenlos, das PDF mit Titelseite, der Export aller Diagramme 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 Fenstersitzung als ein Versuch.

Funktioniert das auch in Cursor?

Ja. Cursor installiert Erweiterungen aus Open VSX. Suchen Sie in der Erweiterungsansicht nach zovo.mermaid-viewer und installieren Sie sie.

Funktioniert die Vorschau ohne Internet?

Ja. Mermaid 12.3.0 ist in der Erweiterung enthalten, die Vorschau zeichnet also auch offline. Ein Konto brauchen Sie nicht.

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

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