Mermaid Editor

Mermaid Live Editor, visuell und Code an einem Ort

Die meisten Mermaid-Editoren bieten ein Textfeld und eine Vorschau. Dieser hier bietet zusätzlich eine Zeichenfläche: klicken, um einen Block hinzuzufügen, einen Pfeil ziehen, Dinge in Bereichen gruppieren — und der Mermaid-Code schreibt sich von selbst. Zum Code-Tab wechseln und von Hand bearbeiten; die Zeichenfläche folgt.

  • Rendert beim Tippen

    Die echte Mermaid-Engine, neu gezeichnet wenige hundert Millisekunden nach dem letzten Tastendruck.

  • Code und Zeichenfläche synchron

    Beide Seiten bearbeitbar. Die andere zieht nach — kein Kopieren zwischen zwei Tools.

  • 14 Knotenformen

    Rechteck, abgerundet, Pille, Kreis, Raute, Datenbank, Sechseck und mehr, jede mit einem Klick.

  • Kostenlos, ohne Anmeldung

    Keine Testversion, kein Wasserzeichen — der Editor öffnet sofort. Melde dich nur an, wenn du mehr als ein Diagramm möchtest.

Eine Zeichenfläche, nicht nur ein Textfeld

Der visuelle Tab ist ein echter Editor über dem gerenderten Diagramm: Klick auf einen Knoten wählt ihn aus, Doppelklick benennt ihn direkt um, Ziehen an beliebiger Stelle verschiebt die Ansicht.

  • Klicken zum AufbauenBlock hinzufügen, einen Pfeil auf einen anderen richten, den Pfeil beschriften. Keine Syntax, die man vorher lernen muss.

  • Form wählenVierzehn Mermaid-Flowchart-Formen — Entscheidungsrauten, Datenbankzylinder, Subroutinen — aus einer Auswahl.

  • Alles einfärbenAcht Voreinstellungen plus Farbwähler, anwendbar auf einen einzelnen Knoten oder einen ganzen Bereich.

Mermaid-Code, der dir gehört

Der Text-Tab ist reines Mermaid — dieselbe Syntax, die GitHub, GitLab, Notion und Obsidian bereits rendern. Nichts davon ist ein proprietäres Format.

  • Von Hand schreibenMermaid direkt eintippen und beim Rendern zusehen. Sechs fertige Beispiele als Startpunkt.

  • BidirektionalEingefügte Flowcharts werden zurück auf die Zeichenfläche geparst — Knoten, Formen, Farben, Subgraphen, alles.

  • Jeder DiagrammtypFlowchart, Sequenz, Klasse, State, ER, Gantt, Git-Graph, Pie — die Vorschau rendert alles, was Mermaid unterstützt.

Große Diagramme bleiben lesbar

Architekturdiagramme sprengen schnell einen Bildschirm. Pan, Zoom und Gruppierung sind genau dafür gebaut, statt dagegen anzukämpfen.

  • Bereiche und VerschachtelungBlöcke zu Subgraphen gruppieren, einen Bereich in einen anderen verschachteln, einen ganzen Teilbaum mit einer Geste verschieben.

  • Zoom von 2 % bis 1600 %Scrollen zum Verschieben, Strg-Scrollen zum Zoomen, oder mit einem Klick neu zentrieren.

  • Läuft automatisch mitDein Diagramm speichert sich beim Bearbeiten automatisch im Browser. Melde dich an, dann liegt es in deinem Konto und folgt dir auf jedes Gerät.

Exportieren und weitermachen

Nichts ist eingesperrt. Nimm das Bild, nimm die Quelle, oder nimm einen Markdown-Block, fertig zum Einfügen in ein Dokument.

  • Keine PaywallJede Funktion, auch der Export, ist kostenlos. Es gibt keine kostenpflichtige Stufe, auf die man upgraden müsste.

  • Wird in deinem Browser gerendertDas Rendern passiert in deinem Browser; ohne Konto verlässt das Diagramm ihn nie, mit Konto folgt dir das gespeicherte Dokument auf jedes Gerät.

  • SVG, PNG, .mmd, .mdSVG-Markup kopieren, ein 2x-PNG herunterladen, die Mermaid-Quelle speichern oder einen eingebetteten Markdown-Block holen.

Der Vergleich zu den üblichen Optionen

Diagram-as-Code-Tools lassen dich alles von Hand schreiben. Drag-and-Drop-Tools geben dir ein Bild, das du nicht diffen kannst. Dieses Tool weigert sich, eine Seite zu wählen.

Erste Schritte

IQ Mermaid: Doppelklick auf die Zeichenfläche, und ein Knoten erscheint. Die Syntax kannst du später lernen — oder nie.

Typisches Tool: Erst die Syntaxreferenz lesen, oder ein Zeichentool ohne jede Textdarstellung akzeptieren.

Das Ausgabeformat

IQ Mermaid: Reines Mermaid — derselbe Text, den GitHub, GitLab und Notion nativ rendern.

Typisches Tool: Eine proprietäre Datei, die nur im Tool öffnet, das sie erzeugt hat.

Später bearbeiten

IQ Mermaid: Code ändern oder Blöcke verschieben. Beide Richtungen funktionieren am selben Diagramm.

Typisches Tool: Nur eine Richtung: Code-first-Tools haben keine Zeichenfläche, Zeichenfläche-first-Tools haben keine Quelle.

Preis

IQ Mermaid: Kostenlos — nicht einmal eine E-Mail.

Typisches Tool: Kostenlose Stufe auf wenige Diagramme begrenzt, Export oder Zusammenarbeit hinter einem Abo.

Wo die Daten liegen

IQ Mermaid: In deinem Browser oder in deinem Konto, wenn es dir auf jedes Gerät folgen soll.

Typisches Tool: Ein Konto auf irgendjemandes Server, mit deinen Diagrammen daran hängend.

Mermaid-Editor Fragen

Zum Anfangen musst du nur die Seite öffnen.

Was ist Mermaid?

Mermaid ist eine Textsyntax für Diagramme: Du beschreibst Knoten und Pfeile in wenigen Zeilen, und ein Renderer zeichnet das Bild. GitHub, GitLab, Notion und Obsidian rendern es innerhalb von Markdown, sodass ein Mermaid-Block in einem Pull Request oder einer Wiki-Seite lesbar bleibt.

Ist dieser Mermaid-Editor wirklich kostenlos?

Ja. Jede Funktion, auch der Export nach SVG und PNG, ist kostenlos, und du kannst den Editor nutzen, ohne irgendetwas anzulegen. Ein optionales kostenloses Konto fügt mehr gespeicherte Diagramme und Synchronisierung zwischen Geräten hinzu — es gibt keinen bezahlten Tarif und nichts wird zurückgehalten.

Muss ich die Mermaid-Syntax kennen?

Nein. Starte im visuellen Tab: Doppelklick auf die Zeichenfläche fügt einen Block hinzu, auswählen und einen Pfeil zu einem anderen ziehen. Der Mermaid-Code wird für dich erzeugt, und du kannst ihn jederzeit lesen, um die Syntax zu lernen.

Welche Diagrammtypen werden unterstützt?

Der Code-Tab rendert alles, was Mermaid unterstützt — Flowchart, Sequenz, Klasse, State, Entity-Relationship, Gantt, Git-Graph, Pie und mehr. Die visuelle Zeichenfläche bearbeitet speziell Flowcharts, was die meisten Diagramme ohnehin sind.

Kann ich als PNG oder SVG exportieren?

Ja. Kopiere das SVG-Markup in die Zwischenablage, lade die SVG-Datei herunter, oder lade ein PNG in 2-facher Auflösung für Folien und Dokumente herunter. Du kannst die Mermaid-Quelle auch als .mmd oder als eingebetteten Markdown-Block speichern.

Wo wird mein Diagramm gespeichert?

Ohne Konto wird dein eines Diagramm im Browser gespeichert und ist da, wenn du auf demselben Gerät zurückkommst. Melde dich an, dann liegt es in deinem Konto und kann dir auf ein anderes Gerät folgen. Exportiere den Quelltext, wenn du eine eigene Kopie möchtest.

Kann ich ein bestehendes Mermaid-Diagramm einfügen?

Ja. Füge es in den Code-Tab ein; ein Flowchart wird zurück auf die visuelle Zeichenfläche geparst, mit Knoten, Formen, Farben und Subgraphen intakt. Andere Diagrammtypen rendern in der Vorschau, bleiben aber code-only.

Funktioniert es offline?

Das Rendern erfolgt vollständig im Browser, sodass der Editor nach dem Laden der Seite auch ohne Verbindung funktioniert.

Editor öffnen. Kostenlos — ohne Anmeldung.

Eine leere Zeichenfläche, ein Code-Tab und jede Exportoption — kostenlos, in deinem Browser, sofort.