Zum Hauptinhalt springen
LibraTool logoLibraTool

Mermaid-Diagramm-Editor – kostenlos

Schreiben Sie Flussdiagramme, Sequenzdiagramme, Gantt-Diagramme und mehr in Mermaid-Syntax mit einer Live-Vorschau. Als SVG oder PNG exportieren. Läuft vollständig in Ihrem Browser.

💡 Schreiben Sie Diagramme in Mermaid-Syntax — Flussdiagramme, Sequenzdiagramme, Gantt-Diagramme, Klassendiagramme und mehr — und exportieren Sie sie als SVG oder PNG. Alles läuft in Ihrem Browser: Ihr Diagrammtext wird nie hochgeladen, und die Mermaid-Rendering-Engine wird von dieser Seite ausgeliefert statt von einem fremden CDN.

Häufige Anwendungen

  • Erstellen Sie ein FlussdiagrammErstellen Sie ein Flussdiagramm aus Text und exportieren Sie es als Bild.
  • Zeichnen Sie ein SequenzdiagrammZeigen Sie in einem Diagramm, wie Systeme oder Menschen im Laufe der Zeit interagieren.
  • Fügen Sie ein Diagramm zu einer README hinzuErstellen Sie Diagramme, die GitHub in Ihrer README nativ rendert.
  • Erstellen Sie ein Gantt-DiagrammLegen Sie einen Projekt-Zeitplan als Gantt-Diagramm aus Text fest.
  • Erstellen Sie ein KlassendiagrammDiagramm-Klassen und ihre Beziehungen für das Softwaredesign.

So funktioniert es

Mermaid ermöglicht Ihnen, Diagramme als Text zu schreiben und automatisch rendern zu lassen – ideal, um Diagramme in der Versionskontrolle zu verwalten. Dies ist ein Live-Editor, der beim Tippen rendert.

  1. 1
    Die Mermaid-Engine wird geladen
    Die Mermaid-Bibliothek wird bei der ersten Nutzung des Tools von LibraTool geladen und dann von Ihrem Browser zwischengespeichert.
  2. 2
    Sie schreiben Diagramm-Code
    Flussdiagramme, Sequenz-Diagramme, Gantt-Diagramme, Klassen-Diagramme, Kreis-Diagramme und mehr – mit Mermaids Text-Syntax.
  3. 3
    Er wird live gerendert
    Ihr Code wird beim Tippen in Ihrem Browser geparst und als SVG gerendert, mit hellem und dunklem Design.
  4. 4
    Exportieren Sie SVG oder PNG
    Laden Sie das Diagramm als skalierbare SVG-Datei oder als 2×-PNG herunter, um es in Dokumente, Folien oder eine README einzufügen.

Ihr Diagramm-Code – der interne Systeme beschreiben kann – wird vollständig in Ihrem Browser gerendert und nie hochgeladen.

Ähnliche Tools

📝

Markdown-Editor

Schreiben und Vorschau von Markdown in Echtzeit. Unterstützt Überschriften, Fett, Kursiv, Codeblöcke, Tabellen und Listen.

Ausprobieren
🟦

CSS-Grid-Generator

Entwerfen Sie visuell ein CSS-Grid — Spuren, Einheiten und Abstände — und kopieren Sie das generierte CSS und HTML.

Ausprobieren
🌳

ASCII-Baumgenerator

Verwandeln Sie eine eingerückte Liste in einen sauberen Ordnerbaum (├── └──) für READMEs und Dokumentationen. Unicode- oder reines ASCII-Format. Läuft vollständig in Ihrem Browser.

Ausprobieren

Häufige Fragen