DevToy

Mermaid-Diagrammeditor

Schreiben und prüfen Sie Diagramme lokal und exportieren Sie SVG oder PNG.

Renderer wird geladen

Mermaid Code-Editor

Echtzeit-Vorschau

No diagram to render.

Was ist Mermaid?

Mermaid wandelt Textdefinitionen in Diagramme um. Teams können die Quelle in Pull Requests prüfen, Änderungen mit Git verfolgen und Diagramme neben der Dokumentation pflegen.

Der Editor rendert Fluss-, Sequenz-, Klassen-, ER- und Gantt-Diagramme lokal. Beginnen Sie mit einer Vorlage und exportieren Sie SVG oder PNG.

Das passende Diagramm wählen

  • Flussdiagramme erklären Entscheidungen und Abläufe.
  • Sequenzdiagramme zeigen Nachrichten im Zeitverlauf.
  • ER-Diagramme dokumentieren Entitäten und Beziehungen.
  • Klassendiagramme beschreiben Typen und Vererbung.
  • Gantt-Diagramme vermitteln Zeitpläne.

Minimales Flussdiagramm

flowchart LR
  Anfrage --> Prüfen{Gültig?}
  Prüfen -->|Ja| Veröffentlichen
  Prüfen -->|Nein| Überarbeiten

Sicheres lokales Rendering

Die Quelle bleibt im localStorage und wird nicht von DevToy hochgeladen. Mermaid verwendet den strikten Sicherheitsmodus.

Häufig gestellte Fragen

Welches Exportformat ist richtig?

Verwenden Sie SVG für Dokumentation und PNG, wenn das Ziel kein SVG akzeptiert.

Warum schlägt scheinbar gültige Syntax fehl?

Prüfen Sie Startschlüsselwort, Einrückung, reservierte Wörter, Anführungszeichen und Mermaid-Version.

Wird mein Diagramm gespeichert?

Die aktuelle Quelle wird auf diesem Gerät gespeichert und beim Löschen des Browser-Speichers entfernt.