Starten Sie mit einem Beispiel oder fügen Sie eine Mermaid-Definition ein. Rendern und prüfen Sie die Grafik für Ihre Dokumentation.
Läuft lokal in deinem BrowserVerwenden Sie ausschließlich Mermaid-Syntax. HTML-Beschriftungen werden bereinigt: Skripte und Event-Handler werden entfernt.
Bewahren Sie die Mermaid-Definition beim Code auf, rendern Sie sie hier zur Prüfung und laden Sie die Ausgabe bei Bedarf als portable Grafik herunter. Das Werkzeug verwendet keine Remote-Themes, keinen Cloudspeicher und keine Tracking-Links.
Fügen Sie eine Mermaid-Definition ein, und die Seite zeichnet sie mit einem mitgelieferten Mermaid-11.17.1-Renderer; anschließend können Sie das SVG-Markup kopieren oder als kivtools-diagram.svg herunterladen. Die drei Beispiele (Flussdiagramm, Sequenzdiagramm, ER-Modell) sind Ausgangspunkte: Im Test wurden auch Zustandsdiagramme, Klassendiagramme und Gantt-Diagramme gerendert, da der Parser die vollständige Mermaid-Grammatik akzeptiert.
Parsing, Layout und Styling laufen in diesem Browser-Tab. Der Diagrammtext wird nicht hochgeladen, das Rendern funktioniert nach dem Laden der Seite auch offline, und das exportierte SVG bringt seine Stile selbst mit, statt auf externe Dateien zu verweisen.
Die erste Zeile wählt die Grammatik: flowchart LR, sequenceDiagram, erDiagram, stateDiagram-v2, classDiagram, gantt und die übrigen Mermaid-11-Typen wurden im Test gerendert. Ein unbekanntes erstes Schlüsselwort stoppt den Parser sofort, und eine aus einem anderen Werkzeug kopierte Definition kann Syntax verwenden, die diese Version nicht mehr akzeptiert.
Der Editor ist reiner Text: Es gibt keine Autovervollständigung und keine Live-Vorschau, also rendern Sie nach jeder Änderung und nutzen die Statuszeile als einzige Rückmeldung. Das erneute Laden des Beispiels ist der schnellste Weg zurück zu einem Dokument, das nachweislich geparst wird.
Der Renderer läuft im strikten Mermaid-Modus. Im Test kam eine Beschriftung mit <img src=x onerror=...> ohne den Event-Handler zurück, script-Tags wurden nicht ausgeführt, javascript:-Links verworfen und click-Direktiven erzeugten keine externen Links. Beschriftungen dürfen sichere HTML-Elemente wie Fettschrift und Zeilenumbrüche enthalten.
Verstehen Sie das als Bereinigungszusage, nicht als HTML-Verbot: Das Werkzeug entfernt ausführbare Inhalte aus Beschriftungen, lehnt die Definition aber nicht ab. Vermeiden Sie trotzdem sensible Daten im Text — die Seite ist lokal, das exportierte SVG ist jedoch eine Datei, die Sie weitergeben können.
SVG kopieren legt das SVG-Markup in die Zwischenablage; SVG herunterladen speichert dasselbe Markup als kivtools-diagram.svg. Beide Schaltflächen bleiben deaktiviert, bis ein Diagramm gerendert wurde, und Leeren deaktiviert sie wieder. Die exportierte Datei lässt sich eigenständig öffnen und in Markdown, eine HTML-Seite oder einen Pull Request einbetten.
Ein Syntaxfehler leert die Bühne nicht: Die letzte erfolgreiche Vorschau bleibt sichtbar, während die Statuszeile die Parser-Meldung mit Zeilennummer anzeigt. Prüfen Sie diese Zeile, bevor Sie das SVG kopieren — besonders wenn das Diagramm in Eile bearbeitet wurde.