Flussdiagramm
Entscheidungen und Prozesse mit Knoten, Pfeilen und Mermaid-Formen wie abgerundeten Boxen und Rauten darstellen.
Mermaid Viewer online
Fügen Sie links Ihren Mermaid-Code ein – rechts wird das Diagramm sofort gerendert. Mermaid-Syntax analysieren und mit einem Klick reparieren, Code optimieren und das Ergebnis als PNG, SVG oder PDF exportieren — kostenlos, privat, ohne Anmeldung.
- 100 % kostenlos
- Ohne Anmeldung
- Läuft komplett im Browser
- Über 12 Diagrammtypen
Live-Mermaid-Editor & Chart-Viewer
Dieser Mermaid-Chart-Viewer aktualisiert die Vorschau bei jeder Eingabepause — ein einfaches Mermaid-Diagramm zu zeichnen ist damit so leicht wie Textschreiben. Wenn etwas kippt, findet der integrierte Mermaid-Fixer das Problem und repariert die häufigsten Syntaxfehler automatisch — inklusive Vollbreitzeichen, unsichtbarer Unicode-Zeichen und typografischer Anführungszeichen.
–
Diagnostics
Your diagram renders here as you type.
Could not render this diagram
100%
Everything runs locally in your browser — your diagram code never leaves this page.
Diese Mermaid-Diagrammtypen können Sie rendern
Vom Flussdiagramm bis zur Timeline funktioniert jeder Mermaid-Diagrammtyp sofort — der einfachste Weg, Mermaid-Diagramme zu zeichnen, ohne etwas zu installieren. Jede Vorschau unten wird live von derselben Engine wie im Viewer erzeugt; laden Sie eine Vorlage, um sie weiter zu bearbeiten.
Sequenzdiagramm
Zeigen Sie den Nachrichtenaustausch zwischen Teilnehmern über die Zeit — mit Schleifen, Alternativen und Aktivierungen.
ER-Diagramm
Modellieren Sie Datenbank-Entitäten, Attribute und Beziehungen in Krallenfuß-Notation.
Klassendiagramm
Beschreiben Sie Klassen, Schnittstellen, Member und Vererbung für den Softwareentwurf.
Zustandsdiagramm
Verfolgen Sie Zustände eines Systems und die Übergänge dazwischen.
Gantt-Diagramm
Planen Sie Projekte mit Aufgaben, Meilensteinen, Abhängigkeiten und Terminen.
Kuchendiagramm
Verwandeln Sie ein paar Zahlen in ein Anteils-Kuchendiagramm.
User Journey
Bilden Sie eine User Journey mit Aufgaben und Zufriedenheitswerten ab.
Timeline
Halten Sie Ereignisse auf einer vertikalen Zeitachse fest — ideal für Geschichte und Roadmaps.
Mindmap
Brainstormen Sie als verzweigte Mindmap — reiner Text rein, Hierarchie raus.
Git-Graph
Visualisieren Sie Branches, Commits und Merges eines Git-Repositories.
Quadrantendiagramm
Ordnen Sie Elemente auf zwei Achsen in vier Quadranten an, z. B. Priorität vs. Aufwand.
Mermaid-Syntax: die Grundlagen
Mermaid-Syntax ist reiner Text: eine Anweisung pro Zeile, Knoten durch Pfeile verbunden. Diese Mermaid-Formen decken die meisten Diagramme ab — klicken Sie auf ein Beispiel, um es im Viewer zu öffnen und weiterzubearbeiten.
| Syntax | Zeichnet |
|---|---|
A[Text] | Rechteck (Prozess) |
A(Text) | Abgerundete Box |
A{Text} | Raute (Entscheidung) |
A([Text]) | Stadionform |
A[(Text)] | Zylinder (Datenbank) |
A((Text)) | Kreis |
A-->B | Pfeil (Verbindung) |
A-->|Text|B | Pfeil mit Beschriftung |
A---B | Einfache Linie |
subgraph Titel … end | Knotengruppe |
Mini-Vorlagen
Mermaid-Diagramm online in ein Bild umwandeln
Sie fragen sich, wie man ein Mermaid-Diagramm online in ein Bild umwandelt? Drei Schritte: Code einfügen, Vorschau rendern lassen, dann in der Symbolleiste auf PNG, SVG oder PDF klicken. Alles läuft im Browser — keine Datei-Uploads.
Mermaid zu PNG
Export mit bis zu 4-facher Auflösung — gestochen scharfe Diagramme für Folien, Dokumente und Messenger.
Mermaid zu SVG
Eine echte Vektordatei: beliebig zoombar, in Figma oder Illustrator bearbeitbar, perfekt für Druck und hochauflösende Bildschirme.
Mermaid zu PDF
Ein Klick erzeugt eine PDF-Seite in der Größe Ihres Diagramms — ideal für Berichte, Tickets und Archive.
Häufige Fragen
Was ist ein Mermaid-Viewer?
Ein Mermaid-Viewer nimmt Diagramm-Code in Mermaid-Syntax und rendert daraus ein echtes Diagramm. Dieser hier vereint Chart-Viewer, Maker und Fixer auf einer Seite: live rendern während Sie tippen, Syntaxprobleme erkennen, automatisch reparieren und das Ergebnis als PNG, SVG oder PDF exportieren.
Wie repariere ich ungültige Mermaid-Syntax?
Code einfügen und auf Reparieren klicken. Der Mermaid-Fixer behebt typografische Anführungszeichen und unsichtbare Unicode-Zeichen, Vollbreit-Zeichen, unpaarige Klammern, reservierte Wörter wie „end“, fehlende „end“ bei subgraphs und Schleifen, versehentlich eingefügte Markdown-Zäune und mehr. Jede Änderung wird in der Diagnoseliste erklärt.
Wie konvertiere ich Mermaid nach PNG, SVG oder PDF?
Rendern Sie Ihr Diagramm im Viewer oben und klicken Sie dann in der Vorschau-Symbolleiste auf PNG, SVG oder PDF. PNG lädt eine hochauflösende Bitmap, SVG eine Vektordatei, PDF ein druckfertiges Dokument. Kostenlos, unbegrenzt und komplett im Browser.
PlantUML oder Mermaid — was soll ich nehmen?
Mermaid rendert direkt im Browser, deshalb unterstützen GitHub, GitLab und die meisten Markdown-Wikis es nativ; für Dokumentation ist es die leichtere Wahl. PlantUML deckt mehr der UML-2-Spezifikation ab, braucht aber Java oder einen Server zum Rendern. Für textfirst-Diagramme in Docs und Web-Seiten ist Mermaid meist der einfachere Weg.
Was bedeutet „Mermaid“ — woher kommt der Name?
Das Tool ist nach der mythischen Meerjungfrau benannt — die Idee, dass reiner Text wie der Gesang einer Meerjungfrau ein wunderschönes Diagramm „ersingen“ kann. Bei Diagrammen steht Mermaid für Code-als-Zeichnung: Sie beschreiben Knoten und Pfeile als Text, und die Bibliothek zeichnet das Diagramm für Sie.
Welche Arten von Mermaid-Diagrammen gibt es?
Am häufigsten genutzt: Flussdiagramme, Sequenzdiagramme, ER-Diagramme, Klassendiagramme, Zustandsdiagramme, Gantt-Diagramme, Kuchendiagramme, User Journeys, Timelines und Mindmaps — die vollständige Galerie finden Sie oben. Jeder Typ beginnt mit einer Schlüsselwortzeile wie „flowchart TD“ oder „sequenceDiagram“, gefolgt von einer Anweisung pro Zeile.
Wird mein Diagramm-Code irgendwo hochgeladen?
Nein. Rendern, Reparieren, Optimieren und Exportieren laufen lokal in Ihrem Browser. Nichts wird an einen Server gesendet oder dort gespeichert — nach dem Laden der Seite funktioniert der Viewer sogar offline.