Mermaid zu SVG: Sequenzdiagramme für Dokumente und Folien exportieren
Mermaid als SVG für Dokumente und Folien exportieren. Ein kurzes Sequenzdiagramm mit echten SVG- und PNG-Dateien hilft bei der Anzeigeprüfung.
Ein Diagramm kann im Editor gut lesbar sein und auf einer großen Folie unscharf wirken. Mit einem SVG-Export erhältst du eine Vektordatei, die sich für Dokumentation und Präsentationen skalieren lässt. Öffne den Mermaid-Bildkonverter und behalte den Quelltext zusammen mit dem Export.
- Öffne das Werkzeug und klicke auf das Diagramm, um den Quelltext zu bearbeiten.
- Füge den Mermaid-Code ein und klicke außerhalb des Editors, um das Ergebnis zu sehen.
- Öffne die Einstellungen, wähle Ausgabe und dann SVG.
- Schließe die Einstellungen und klicke auf Bild herunterladen. Öffne die SVG-Datei im Browser und teste sie anschließend im vorgesehenen Dokument oder auf der Folie.
Der Editor erwartet Mermaid-Quelltext. Steht er in einem Markdown-Codeblock, kopiere nur dessen Inhalt.
Das Beispiel zeigt vier Nachrichten zwischen Autor, Editor und Exportdienst. Kurze Beschriftungen lassen genug Platz für die Pfeile. Füge den Code in das Werkzeug ein, um das Diagramm nachzustellen.
```mermaid
sequenceDiagram
participant Writer
participant Editor
participant Exporter
Writer->>Editor: Paste diagram source
Editor-->>Writer: Show preview
Writer->>Exporter: Choose SVG
Exporter-->>Writer: Download diagram
```
SVG herunterladen · PNG öffnen
Beide Dateien wurden aus derselben Quelle über die Exportfunktionen des Werkzeugs heruntergeladen. Prüfe im SVG die drei Teilnehmernamen, vier Nachrichten und den Markenhinweis unter dem Diagramm. Für längere Abläufe hilft die Mermaid-Anleitung für Sequenzdiagramme.
Öffne die Datei vor der Fertigstellung im Zielprogramm. Kontrolliere Schrift, Pfeilspitzen und Beschriftungen sowie den unteren Bildrand. Vergrößere das Diagramm für die Detailprüfung und betrachte es danach in der geplanten Anzeigegröße.
Akzeptiert das Veröffentlichungswerkzeug nur Rasterbilder, wähle in denselben Ausgabeeinstellungen PNG und exportiere erneut. Prüfe auch dieses Bild in der vorgesehenen Größe. Lange Abläufe bleiben mit kürzeren Beschriftungen oder mehreren kleineren Diagrammen leichter lesbar.
Speichere den Mermaid-Text zusammen mit dem Bild. Ändert sich eine Nachricht, passe die Quelle an und exportiere ein neues SVG. Eine kurze Bildunterschrift erklärt, worauf es im Ablauf ankommt. Hier kannst du ein SVG-Diagramm erstellen.