Kostenloser Online-Mermaid-Editor von Bee Tools. Unterstützt Flussdiagramme, Sequenz-, Gantt-, Klassen- und ER-Diagramme. Live-Vorschau, SVG/PNG-Export. Wird zu 100 % in Ihrem Browser gerendert.
Erstellen Sie professionelle Diagramme mit textbasierter Syntax und sehen Sie sofortige Vorschauen. Beschreiben Sie ein beliebiges Diagramm in der deklarativen Mermaid-Syntax und Bee Tools rendert es lokal in Ihrem Browser als scharfe Vektorgrafik. Exportieren Sie es für Dokumente, Folien und Blogs nach PNG oder SVG.
Mermaid-Spickzettel
Was ist Mermaid
Mermaid wurde 2014 von Knut Sveidqvist als deklarative, Markdown-ähnliche Sprache zur Beschreibung von Diagrammen erstellt. Im Vergleich zu Drag-and-Drop-Werkzeugen lässt Mermaid Ihre Diagramme in versionierten Quelldateien leben.
Kurzreferenz
flowchart TD/LR — Flussdiagramme. A-->B ist eine Verbindung, A{?} ist eine Entscheidung, A([Start]) ist eine Stadionform.
sequenceDiagram — Sequenz. Alice->>Bob: Hello sendet eine synchrone Nachricht; Bob-->>Alice: Hi ist die Antwort.
gantt — Gantt-Diagramme. Deklarieren Sie dateFormat und beschreiben Sie dann Aufgaben mit Startdaten und Dauern.
classDiagram — Klassendiagramme. Definieren Sie Klassen und Beziehungen wie Vererbung Animal <|-- Dog.
stateDiagram-v2 — Zustandsautomaten, großartig für UI-/Bestell-/Pipeline-Flows.
pie — Kreisdiagramme über "Label" : Wert-Paare.
Praktische Tipps
Halten Sie Knotenbeschriftungen kurz — lange Beschriftungen zerstören das Layout.
Verwenden Sie Subgraphen, um komplexe Diagramme in lesbare Stücke zu zerlegen.
Passen Sie Farben mit classDef für bessere Lesbarkeit an.
Streuen Sie %% comments ein, um die Quelle wartbar zu halten.
Bearbeiten Sie das Beispiel links und beobachten Sie das gerenderte Diagramm rechts.
FAQs
Was ist Mermaid?
Mermaid ist eine von Knut Sveidqvist erstellte JavaScript-basierte Diagrammsprache. Mit Markdown-ähnlichem Text erzeugt sie Flussdiagramme, Sequenzdiagramme, Gantt-Diagramme und mehr. Native Unterstützung ist in GitHub, GitLab, Docusaurus und Obsidian eingebaut.
Welche Diagrammtypen werden unterstützt?
Wir unterstützen out of the box flowchart, sequenceDiagram, gantt, classDiagram, stateDiagram-v2, pie, erDiagram, gitGraph und requirementDiagram.
Werden meine Diagramme gespeichert oder hochgeladen?
Nein. Das Zeichnen geschieht vollständig innerhalb Ihres Browsers. Das Schließen des Tabs löscht alles.
Geht bei SVG/PNG-Export die Qualität verloren?
SVG ist ein Vektor – scharf bei jeder Zoomstufe. PNG wird mit 2× Auflösung gerastert, gut genug für die meisten Dokumente und Folien.
Wie bette ich Mermaid in Markdown ein?
Umschließen Sie den Code mit einem `mermaid` gefenced-Block. GitHub, GitLab, Hugo, Hexo und Obsidian rendern ihn automatisch.