Mermaid-Vorschau

Ein Beispiel wählen oder Mermaid-Code eingeben, dann rendern (Strg/⌘+Enter im Editor). Nach dem ersten Auftrag folgt Live den Änderungen nach einer kurzen Pause; Live abschalten, um manuell zu rendern. Normales Enter fügt eine neue Zeile ein. Jede Änderung verwirft sofort die vorige Vorschau und den Download.

Die Beispiele zeigen Fluss-, Sequenz-, Klassen-, Gantt-, Kreis-, Zustands- und Entity-Relationship-Diagramme. Ihre Beschriftungen sind bearbeitbare Beispieldaten. Syntaxfehler stehen am Editor, wenn verfügbar mit Zeilennummer. Code korrigieren und erneut rendern.

Breite einpassen verkleinert große Diagramme, ohne kleine aufzublasen. Abschalten für lokale Scrollbereiche in natürlicher Größe. Der SVG-Download enthält das aktuell gültige Diagramm mit viewBox und ausdrücklichen Abmessungen. Es ist eine Vektorgrafik, kein PDF oder bearbeitbares Office-Dokument. Manche SVG-Betrachter unterstützen HTML-Beschriftungen unterschiedlich.

Mermaid 10.9.5 wird beim ersten Rendern von jsDelivr geladen. Die Verarbeitung läuft im Browser; die Bibliotheksanfrage erreicht das CDN, der Diagrammcode wird nicht dorthin gesendet. Bei Verbindungs-/CSP-Fehlern erneut Rendern versuchen; ein im Browser gespeicherter Modulfehler kann ein Neuladen erfordern. Der Entwurf bleibt beim Navigieren nur im Seitenspeicher, nicht nach Neuladen. Maximal 20000 Quellzeichen und 500 Kanten; große Diagramme können dennoch dauern. Keine harte Unterbrechung eines laufenden Layouts. Strikter Modus und bereinigte Ausgabe; externe eingebettete Bilder werden weggelassen.