Entwickler / Diagramme
Mermaid Live Editor
Schreibe Mermaid-Code und sieh das Diagramm während der Eingabe: Flussdiagramme, Sequenzdiagramme, Klassendiagramme, Gantt-Diagramme und Kreisdiagramme – als SVG oder PNG herunterladbar.
Mermaid Live Editor: Der Editor zeichnet Diagramme mit Mermaid, einer Open-Source-Bibliothek, die GitHub, GitLab und viele Dokumentationstools für textbasierte Diagramme verwenden. Er läuft im strikten Modus, sodass Code von anderen keine Skripte ausführen oder Click-Handler hinzufügen kann. SVG-Downloads bleiben bei jeder Größe scharf. PNG-Downloads werden auf weißem Hintergrund mit der doppelten Bildschirmgröße erstellt. Läuft zu 100% lokal in deinem Browser, ohne Datei-Uploads zum Server.
- Kategorie
- Entwicklerwerkzeuge
- Ausführungen
- In deinem Browser
- Kosten
- Kostenlos · ohne Anmeldung
- Verfügbarkeit
- Einsatzbereit
Läuft vollständig in deinem Browser
Diagramme werden in deinem Browser mit Mermaid im strikten Modus gezeichnet, sodass der Diagrammcode keine Skripte ausführen kann. Füge denselben Code in GitHub-, GitLab- oder Notion-Markdown in einen mermaid-Codeblock ein, um ihn dort anzuzeigen.
Diagramme als Text
Ein Diagramm aus einem Grafikprogramm veraltet, weil du zum Ändern die Datei erneut öffnen musst. Ein Mermaid-Diagramm besteht aus wenigen Textzeilen, die neben dem beschriebenen Code oder Dokument liegen, im selben Commit geändert werden und in einer Prüfung als gut lesbarer Diff erscheinen.
Jedes Diagramm beginnt mit seinem Typ: flowchart mit einer Richtung wie TD (von oben nach unten) oder LR (von links nach rechts), sequenceDiagram, classDiagram, gantt oder pie. Knoten werden einmal mit ihrer Bezeichnung geschrieben, A[Start], und anschließend über ihren Namen referenziert: A --> B.
Exportieren
SVG hält Linien und Text in jeder Größe scharf und ist die bessere Wahl für Dokumente und Präsentationen; PNG eignet sich für Chat-Apps und Orte, an denen SVG nicht akzeptiert wird. Um das exportierte SVG von Hand zu bearbeiten, öffne es im SVG-Editor.
So benutzt du es
- Starte mit einem Beispiel oder füge deinen eigenen Mermaid-Code ein.
- Bearbeite den Code. Das Diagramm wird während der Eingabe neu gezeichnet oder der Fehler angezeigt.
- Lade das Diagramm als SVG oder PNG herunter oder kopiere den Code.
Datenschutz & Einschränkungen
Die Diagramme werden in deinem Browser gezeichnet, und dein Code wird nur in diesem Browser gespeichert, damit er beim nächsten Mal noch vorhanden ist.
Ähnliche Tools
Häufige Fragen
Was ist Mermaid?
Eine Möglichkeit, Diagramme als Text zu schreiben. Eine Zeile wie A --> B zeichnet zwei durch einen Pfeil verbundene Kästen. So können Diagramme in Markdown-Dateien und Code-Reviews enthalten sein und sich durch eine Textänderung statt mit einem Zeichenprogramm ändern.
Wie zeige ich das Diagramm auf GitHub an?
Füge den Code in einer Markdown-Datei, einem Issue oder einem Pull Request in einen mit mermaid gekennzeichneten Codeblock ein: drei Backticks, gefolgt vom Wort mermaid, dem Code und anschließend drei Backticks. GitHub, GitLab und Notion zeichnen das Diagramm direkt an dieser Stelle.
Warum zeigt mein Diagramm einen Fehler?
Die Meldung nennt die Zeile, die Mermaid nicht lesen konnte. Häufige Ursachen sind ein fehlender Diagrammtyp in der ersten Zeile, etwa flowchart TD, nicht geschlossene Klammern oder Anführungszeichen sowie Text mit Sonderzeichen, der in Anführungszeichen gesetzt werden muss.
Welche Diagrammtypen werden unterstützt?
Alle Typen in der vom Editor geladenen Mermaid-Version, darunter Flussdiagramme, Sequenzdiagramme, Klassendiagramme, Zustandsdiagramme, Entity-Relationship-Diagramme, Gantt-Diagramme, Kreisdiagramme, Mindmaps, Zeitachsen und Git-Diagramme. Die Beispiele decken die fünf häufigsten Typen ab.
Kostenloses Tool · läuft in deinem browser · kein Konto nötig