Mit mermaid-cli exportierst du Mermaid-Diagramme als SVG oder PDF.
Mermaid erzeugt Diagramme aus Text und eignet sich damit gut für Dokumentation unter Versionskontrolle. Soll das Ergebnis in ein Manuskript, eine Präsentation oder auf ein Poster, musst du Format und Größe bewusst wählen. Hat ein exportiertes PNG zu wenige Pixel, kann es in der vorgesehenen Druckgröße unscharf wirken.
Export über die Kommandozeile
@mermaid-js/mermaid-cli. Nach der Installation steht der Befehl mmdc zur Verfügung:npm install -g @mermaid-js/mermaid-cli
mmdc -i diagram.mmd -o diagram.svg # vector, preferred
mmdc -i diagram.mmd -o diagram.pdf # vector PDF
mmdc -i diagram.mmd -o diagram.png -s 3 # raster at 3x scale| Format | Vektorformat | Geeignet für | Ungeeignet, wenn |
|---|---|---|---|
| SVG | Container für Vektorgrafiken | Web und weitere Bearbeitung | Das Ziel keine SVG-Dateien unterstützt |
| Container für Vektorgrafiken | Manuskripte, Druck und Präsentationen | Das verwendete Bearbeitungsprogramm die benötigten Elemente nicht erhält | |
| PNG | Nein | Vorschauen und Ziele, die Rasterbilder verlangen | Die Pixelmaße für die endgültige Größe nicht ausreichen |
KI-Abbildungsgenerierung in Aktion erleben
Sehen Sie, wie Forscher aus Textbeschreibungen publikationsreife wissenschaftliche Abbildungen erstellen.
Werkzeug erkundenWeitere Wege zum Export
mmdc ein Kommandozeilenwerkzeug ist, lässt sich das Rendern als Build-Schritt einbinden. Ein gängiger Ansatz: Du versionierst die .mmd-Quelldateien und erzeugst die Bilder beim Build der Dokumentation. So bleiben die Abbildungen auf dem Stand ihrer Quellen.- run: npm install -g @mermaid-js/mermaid-cli
- run: mmdc -i docs/architecture.mmd -o docs/architecture.svg
Das Erscheinungsbild anpassen
Mermaids Standardeinstellungen sind auf Dokumentation ausgerichtet. Für eine Publikation lohnt sich ein Blick auf drei Einstellungen:
- Themes. Setze
theme: neutralim YAML-Frontmatter des Diagramms unterconfig. Prüfe die Vorschau in der vorgesehenen Größe, bevor du dich für ein Theme für den Druck entscheidest. - Schriften. Lege über
fontFamilyeine Schrift fest und stelle sicher, dass sie in der Renderingumgebung verfügbar ist. - Richtung.
graph LRundgraph TDführen zu unterschiedlichen Seitenverhältnissen. Das kann entscheidend sein, wenn ein Diagramm in eine Spalte passen muss.
---
config:
theme: neutral
fontFamily: Helvetica
---
graph LR
A[Sample collection] --> B[Extraction]
B --> C[Sequencing]
C --> D[Analysis]
Wann Mermaid an seine Grenzen stößt
Mermaid berechnet das Layout automatisch; auf die genaue Anordnung hast du nur begrenzten Einfluss. Für Dokumentation ist das praktisch. Bei wissenschaftlichen Abbildungen, in denen die Anordnung selbst etwas vermittelt, kann es zum Hindernis werden.
Nutze ein anderes Werkzeug, wenn du Elemente räumlich präzise anordnen musst, eine Abbildung den Gestaltungsvorgaben einer Fachzeitschrift entsprechen soll oder Positionen reale Zusammenhänge wie anatomische Lage oder zeitliche Abfolge ausdrücken. Ein möglicher Kompromiss: Erzeuge die Struktur mit Mermaid, exportiere sie als SVG und bearbeite sie anschließend in einem Vektoreditor. Die manuelle Nachbearbeitung lässt sich dann allerdings nicht mehr allein aus dem Mermaid-Quelltext reproduzieren.
Tipp
.mmd-Quelldatei zusammen mit dem exportierten Bild. Änderungen am Quelltext lassen sich im Review nachvollziehen, und das Diagramm lässt sich bei Bedarf neu erzeugen. Das Bild wiederum zeigt das Ergebnis auf einen Blick. Bewahrst du nur eine der beiden Dateien auf, fehlt dir entweder die nachvollziehbare Änderungshistorie oder die sofort nutzbare Abbildung.Jetzt wissenschaftliche Abbildungen erstellen
Beschreiben Sie Ihre wissenschaftliche Abbildung in natürlicher Sprache - erhalten Sie publikationsreife Illustrationen in Minuten.
Kostenlos testenWeiterführende Artikel
Weiterführende Lektüre: Forschung sofort visualisieren mit KI Text-zu-Abbildung, 10 beste wissenschaftliche Illustrationswerkzeuge 2026.
