Mermaid-Live-Editor

Mermaid-Live-Editor

Zeichnen Sie Flussdiagramme, Sequenzdiagramme, Gantt-Diagramme und mehr aus wenigen Zeilen Text. Schreiben Sie links Mermaid-Code, beobachten Sie rechts, wie sich das Diagramm aktualisiert, und exportieren Sie dann SVG oder PNG für Dokumente, Folien oder Markdown. GitHub, GitLab, Notion und viele Notiz-Apps stellen Mermaid-Code ebenfalls direkt dar.

Läuft in Ihrem Browser – Ihre Eingaben werden nicht hochgeladen

Mermaid wird geladen …

So funktioniert es

Wählen Sie ein Diagramm über Vorlage einfügen, oder fügen Sie vorhandenen Mermaid-Code ein.
Bearbeiten Sie den Code links. Die Vorschau wird neu gerendert, sobald Sie beim Tippen pausieren, und Syntaxfehler werden darunter angezeigt.
Wählen Sie ein Design und laden Sie dann SVG oder PNG herunter, oder kopieren Sie den SVG-Code.

Optionen erklärt

Diagrammtypen: Die Vorlagen umfassen Flussdiagramme, Sequenz-, Klassen-, Zustands- und ER-Diagramme, Gantt-Diagramme, Kreisdiagramme und Mindmaps. Andere Mermaid-Typen wie Timelines, Quadrant-Diagramme und Git-Graphen lassen sich direkt schreiben.
Design: Die eingebauten Designs Standard, Neutral, Dunkel und Wald. Neutral ist nahezu schwarz-weiß und eignet sich gut zum Drucken.
Export: SVG ist ein Vektorformat und skaliert ohne Qualitätsverlust. PNG wird in doppelter Größe mit Hintergrundfarbe exportiert, für Chat-Apps und Folien.

Spickzettel für Flussdiagramme

flowchart LR
    A[Rectangle] --> B(Rounded)
    B --> C{Decision}
    C -->|Yes| D[(Database)]
    C -.->|No| E((Circle))

TD von oben nach unten, LR von links nach rechts
--> durchgezogener Pfeil, -.-> gepunktet, ==> dick, -->|Text| mit Beschriftung

Häufig gestellte Fragen

Kann ich Mermaid-Code in GitHub einfügen?

Ja. Setzen Sie ihn in einen ```mermaid-Codeblock in einer Markdown-Datei, einem Issue oder einem Kommentar, und GitHub stellt das Diagramm dar. GitLab, Notion, Obsidian und Typora unterstützen es ebenfalls.

Wird mein Code hochgeladen?

Nein. Mermaid rendert in Ihrem Browser; Code und Diagramm verlassen niemals Ihr Gerät.

Warum funktioniert Markdown-Formatierung innerhalb von Knoten nicht?

Um den PNG-Export zu ermöglichen, werden Knotenbeschriftungen als SVG-Text gezeichnet, der keine HTML-Tags oder manche Rich-Text-Formatierung unterstützt.

Datenschutz

Dieses Tool läuft vollständig in Ihrem Browser. Ihre Dateien und Texte werden auf Ihrem Gerät verarbeitet und nie auf unsere Server hochgeladen.