Mermaid einfügen. Diagramm sehen. Sofort.

Mermaid einfügen, sofort ansehen, SVG/PNG exportieren, Dateien hochladen, ziehen zum Schwenken und per URL teilen.

Schnellvorlagen
Mermaid-Datei öffnenEinfach irgendwo ablegen — .mmd · .mermaid · .md · .txt · MMD-Datei öffnen
Mermaid wird geladen...Z 1, Sp 1
Tipp: In der Vorschau kannst du klicken-und-ziehen (oder berühren), um zu schwenken. Dateien auf die Vorschau ziehen, um sie zu laden.

Was ist Mermaid?

Mermaid ist ein JavaScript-basiertes Diagramm- und Charting-Tool, das Markdown-inspirierte Textdefinitionen verwendet, um Diagramme dynamisch zu erstellen und zu verändern. Es ist ein Open-Source-Projekt, mit dem du Diagramme aus einfachen Textbeschreibungen generieren kannst.

Statt komplexer Zeichenwerkzeuge schreibst du eine codeähnliche Syntax, die dein Diagramm beschreibt, und Mermaid rendert es als visuelles Diagramm. Dieser Ansatz macht Diagramme versionskontrollierbar, leicht zu aktualisieren und ideal für die Dokumentation.

Mermaid lässt sich nahtlos in Dokumentationsplattformen, Wikis und Markdown-Dateien integrieren und ist daher ein beliebtes Werkzeug für Entwickler:innen und technische Redakteur:innen.

Warum Mermaid verwenden?

  • Versionskontrolle: Diagramme sind Textdateien und können in Git zusammen mit deinem Code nachverfolgt werden
  • Schnelle Updates: Ändere ein paar Zeilen Text statt ganze Diagramme neu zu zeichnen
  • Konsistenz: Mermaid übernimmt automatisch Layout und Styling und sorgt für konsistente Diagramme
  • Keine Design-Tools nötig: Kein Visio, Lucidchart oder andere teure Tools erforderlich
  • Dokumentation als Code: Halte Diagramme im selben Repository wie deine Dokumentation
  • Plattformübergreifend: Läuft im Browser und in Node.js und lässt sich in viele Plattformen integrieren
  • Kostenlos und Open Source: Keine Lizenzkosten, aktive Community
  • Mehrere Diagrammtypen: Unterstützt Flussdiagramme, Sequenzdiagramme, Klassendiagramme und mehr

Flussdiagramm

Erstellen Sie professionelle Flussdiagramme mit einfacher textbasierter Syntax. Sofortige Vorschau, Export zu SVG/PNG und Teilen per URL - alles kostenlos.

Sequenzdiagramm

Entwerfen Sie UML-Sequenzdiagramme zur Visualisierung von Interaktionen zwischen Systemkomponenten. Perfekt für API-Dokumentation und Systemdesign.

Gantt-Diagramm

Planen und visualisieren Sie Projekt-Zeitstrahlen mit Gantt-Diagrammen. Verfolgen Sie Aufgaben, Abhängigkeiten und Meilensteine mit einfacher Textsyntax.

Klassendiagramm

Entwerfen Sie objektorientierte Systeme mit UML-Klassendiagrammen. Definieren Sie Klassen, Attribute, Methoden und Beziehungen mit einfachem Text.

Zustandsdiagramm

Visualisieren Sie Zustandsmaschinen und Systemverhalten mit Zustandsdiagrammen. Modellieren Sie Zustände, Übergänge und Ereignisse mit einfachem Text.

ER-Diagramm

Entwerfen Sie Datenbankschemas mit Entity-Relationship-Diagrammen. Definieren Sie Entitäten, Attribute und Beziehungen mit einfacher Textsyntax.

Werbung

Vollständiger Leitfaden zu Mermaid-Diagrammen

Lerne, wie du professionelle Diagramme mit einfacher, textbasierter Syntax erstellst

Häufig gestellte Fragen

Häufige Fragen zur Nutzung des Mermaid Viewers und zur Erstellung von Diagrammen

Ist dieser Mermaid-Editor wirklich kostenlos?
Ja, komplett kostenlos. Du kannst unbegrenzt Diagramme erstellen, als SVG/PNG exportieren, per URL teilen und alle Funktionen ohne Registrierung oder Bezahlung nutzen. Das Tool wird durch unaufdringliche Werbung unterstützt.
Muss ich etwas installieren?
Nein, du musst nichts installieren. Das Tool läuft vollständig im Browser. Öffne einfach die Seite und lege sofort los – auf Desktop, Tablet und Smartphone.
Wie speichere ich meine Diagramme?
Du kannst auf mehrere Arten speichern: 1) als SVG oder PNG exportieren, 2) per URL teilen (der Diagrammcode steckt in der URL), 3) den Mermaid-Code in eigene Dateien kopieren, 4) .mmd- oder .mermaid-Dateien hoch- und herunterladen.
Kann ich die Diagramme in Dokumentationen verwenden?
Ja, absolut. Exportiere dein Diagramm als SVG (skalierbar) oder PNG und nutze es in Doku, Präsentationen oder Websites. Außerdem kannst du den Mermaid-Code direkt in Plattformen wie GitHub, GitLab oder Notion einbetten.
Was ist der Unterschied zwischen SVG und PNG?
SVG ist vektorbasiert, bleibt in jeder Größe scharf und eignet sich ideal für Web und Dokumentation. PNG ist ein Rasterformat, praktisch für schnelle Freigaben, verliert aber beim Skalieren Qualität.
Warum wird mein Diagramm nicht gerendert?
Prüfe deinen Mermaid-Code auf Syntaxfehler. Häufige Ursachen sind nicht geschlossene Anführungszeichen, fehlende Doppelpunkte/Semikolons, falsche Node-IDs oder nicht unterstützte Syntax. Vereinfache das Diagramm schrittweise, um die Stelle zu finden.
Kann ich mit anderen zusammenarbeiten?
Echtzeit-Kollaboration ist nicht eingebaut, aber du kannst Diagramme per URL teilen. Andere können den Link öffnen, bearbeiten und ihre Version zurückteilen. Weil Mermaid textbasiert ist, funktioniert Zusammenarbeit auch gut über Git.
Funktioniert der Viewer auch offline?
Für den ersten Aufruf brauchst du Internet. Danach funktionieren grundlegende Bearbeitungen oft auch offline. Einige Funktionen wie Export können jedoch eine Verbindung benötigen.
Wie lerne ich die Mermaid-Syntax?
Starte mit unserem Mermaid-Guide mit Beispielen zu allen Diagrammtypen. Nutze Vorlagen für schnelle Einstiege und ergänze das mit der offiziellen Dokumentation auf mermaid.js.org.
Kann ich das Aussehen meiner Diagramme anpassen?
Ja. Diagramme folgen dem Website-Thema: Wechsle über den Button „Thema“ in der oberen Leiste zwischen Hell und Dunkel, und das Diagramm wird mit dem passenden Mermaid-Theme neu gerendert. Für erweiterte Anpassungen nutze die %%{init:...}%%-Direktive, um Farben, Schriftarten und weitere Stiloptionen zu definieren.
Welche Diagrammtypen werden unterstützt?
Unterstützt werden alle wichtigen Mermaid-Typen: Flowcharts, Sequence-, Class-, State-, ER-Diagramme, Gantt-Charts, Pie-Charts, Git-Graphen, User-Journey-Diagramme und weitere.
Sind meine Diagrammdaten privat?
Dein Diagrammcode wird nicht an unsere Server gesendet. Das Rendering passiert clientseitig im Browser. Beim Teilen per URL ist der Code in der URL kodiert; wir speichern oder verfolgen deine Inhalte nicht.
Warum textbasierte Diagramme statt Zeichen-Tools?
Textbasierte Diagramme sind versionskontrollierbar (ideal für Git), schnell aktualisierbar, konsistent, durchsuchbar und leichtgewichtig. Sie lassen sich außerdem automatisiert erzeugen und einfacher in Pull Requests prüfen.
Kann ich Mermaid-Diagramme in meine Website einbetten?
Ja. Binde die Mermaid-JavaScript-Bibliothek in deine Website ein und füge Mermaid-Codeblöcke hinzu. Viele Plattformen unterstützen Mermaid bereits nativ, z. B. GitHub, GitLab, Notion und Obsidian.
Wie groß darf ein Diagramm maximal sein?
Es gibt kein hartes Limit, aber sehr große Diagramme (über ca. 100 Knoten) können je nach Gerät langsamer rendern. Für komplexe Systeme sind mehrere kleinere, fokussierte Diagramme meist besser.