Geschäftliches / Diagramme

Flowchart-Generator: Mermaid-Vorschau und einfacher Editor

Erstelle ein Flussdiagramm mit Mermaid-Text und einer Live-Vorschau. Füge Prozess-, Entscheidungs-, Start-Ende- und Eingabe-Ausgabe-Knoten hinzu, verbinde sie mit Beschriftungen oder starte mit einer von drei eigenen Vorlagen.

Flowchart-Generator: Mermaid-Vorschau und einfacher Editor: Schreibe ein Flussdiagramm als Mermaid-Text oder verwende den Editor, um Schritte, Entscheidungen und Verbindungen hinzuzufügen. Beobachte, wie sich das Diagramm während der Eingabe aktualisiert. Starte mit einem Beispiel, kopiere anschließend den Text oder lade das Flussdiagramm als SVG oder PNG herunter. Läuft zu 100% lokal in deinem Browser, ohne Datei-Uploads zum Server.

Ausführungen
In deinem Browser
Kosten
Kostenlos · ohne Anmeldung
Verfügbarkeit
Einsatzbereit
Flussdiagramm erstellenLokale Verarbeitung

Läuft vollständig in deinem Browser

Einfacher Ersteller

Die Vorschau wird während der Eingabe aktualisiert. Der Ersteller fügt deinem Text Anweisungen hinzu. Konfigurationsdirektiven, benutzerdefinierte Stile und Klick-Handler sind deaktiviert.

Vorschau wird gerendert …

Flussdiagramm-Syntax

Mermaids Sprache für Flussdiagramme unterstützt Knoten, Kanten und beschriftete Entscheidungen. Dieses Tool unterstützt den Flussdiagrammteil dieser Sprache. Der Editor fügt neue Zeilen am Ende deines Textes hinzu. Offizielle Syntax: https://mermaid.js.org/syntax/flowchart.html

Sicherheit und Lizenz

Diagramme werden in deinem Browser mit Mermaid gezeichnet, einer quelloffenen Bibliothek unter der MIT-Lizenz, und zwar im strengen Sicherheitsmodus: HTML in Beschriftungen, Klickaktionen und Konfigurationsblöcke sind nicht erlaubt. Ein eingefügtes Diagramm kann daher keinen Code ausführen. Offizielle Sicherheitseinstellung: https://mermaid.js.org/config/schema-docs/config-properties-securitylevel.html

So benutzt du es

  1. Wähle eine Vorlage für einen Prozess, Entscheidungsbaum oder Anmeldevorgang oder schreibe Mermaid-Flussdiagrammtext.
  2. Füge mit dem Editor einen Knoten hinzu. Verbinde anschließend vorhandene Knoten-IDs und beschrifte die Verbindung bei Bedarf.
  3. Behebe gemeldete Syntaxfehler und lade das Diagramm als SVG, PNG oder Mermaid-Text herunter.

Datenschutz & Einschränkungen

Der Mermaid-Text wird ausschließlich in deinem Browser verarbeitet. Es wird nichts hochgeladen oder im lokalen Speicher gespeichert. Konfigurationsdirektiven, Rückruffunktionen, Bilder und externe Ressourcen sind deaktiviert.

Ähnliche Tools

Häufige Fragen

Wie benennt der Editor die Knoten?

Er verwendet die nächste freie ID im Format N. Um Knoten zu verbinden, gib ihre IDs aus dem Text ein. Der Editor kodiert Anführungszeichen, Klammern und andere Zeichen in Beschriftungen sicher.

Kann ich jeden Mermaid-Diagrammtyp verwenden?

Dieses Tool akzeptiert ausschließlich die Syntax für Flussdiagramme oder Graphen. Verwende für andere Diagrammtypen den vorhandenen Mermaid-Editor.

Wie werden Fehler angezeigt?

Parserfehler enthalten eine Zeilennummer, sofern Mermaid eine solche bereitstellt. Sicherheits- und Eingabelimitfehler werden mit einer eigenen Meldung angezeigt.

Sind die Vorlagen von anderer Stelle übernommen?

Nein. Die einfachen Beispiele für Prozess, Entscheidungsbaum und Anmeldevorgang wurden eigens für dieses Tool erstellt.

Kostenloses Tool · läuft in deinem browser · kein Konto nötig