Flowchart aus Text zeichnen

Flowchart-Syntax eingeben, live sehen, wie sie gerendert wird, und als SVG oder PNG exportieren — vollständig im Browser.

Flowchart-Code

Verwendet die Mermaid-Flowchart-Syntax. Beginnt mit graph oder flowchart.

oder eine .mmd-, .mermaid-, .md- oder .txt-Datei ablegen

Vorschau

Dein Flowchart erscheint hier.

Getippte Flowchart-Syntax wird zum Diagramm

Schreibe ein Flowchart als reinen Text – eine Zeile pro Knoten, eine Zeile pro Pfeil – und sieh es beim Tippen live als Diagramm gerendert. Dieses Tool verwendet die Mermaid-Flowchart-Syntax, dasselbe Textformat, das mermaid.live und viele Dokumentations-Tools nutzen: Ein Diagramm beginnt mit graph oder flowchart, gefolgt von einer Richtung und einer Liste aus Knoten und Verbindungen.

Das Tool hat genau eine Aufgabe: Flowchart-Syntax rein, ein SVG- oder PNG-Bild raus. Mermaid kann auch Sequenzdiagramme, Gantt-Diagramme, Klassendiagramme und mehr zeichnen, aber dieses Tool rendert nur Flowcharts – eine bewusste Entscheidung zum Funktionsumfang, kein fehlendes Feature. Es gibt auch keinen Weg zurück zu editierbarem Code; das Bild herunterladen, fertig.

Warum dein Diagramm auf dem Gerät bleibt

Datenschutz ist hier strukturell, kein Versprechen. Es gibt keinen Upload-Schritt, weil es keinen Server gibt, zu dem etwas hochgeladen werden könnte:

  • Parsen und Rendern laufen vollständig in deinem Browser.
  • Die Seite wird als statische Dateien ausgeliefert und sendet keine Anfrage mit deinem Diagrammtext.
  • Der Quellcode ist offen und kann von allen eingesehen werden (MIT).
  • Die Seite funktioniert offline – was nur möglich ist, weil nichts das Gerät verlässt.

Wenn du es selbst prüfen willst, öffne beim Tippen das Netzwerk-Panel deines Browsers – keine Anfrage trägt deinen Diagrammtext. Quellcode ansehen.

So funktioniert es

  1. Flowchart eingeben oder einfügen

    Schreibe Flowchart-Syntax in das Textfeld – beginne mit graph oder flowchart, beschreibe dann Knoten und Pfeile, z. B. A[Start] --> B[Ende]. Nicht sicher, wie du anfangen sollst? Klicke auf „Beispiel laden".

  2. Live-Vorschau ansehen

    Etwa 300 ms nachdem du zu tippen aufhörst, wird das Diagramm automatisch neu gerendert. Nur Flowcharts werden gerendert; bei anderen Mermaid-Diagrammtypen erscheint stattdessen ein Hinweis.

  3. Syntaxfehler beheben

    Wenn eine Zeile nicht geparst werden kann, zeigt die Vorschau einen Hinweis, statt zu raten, was gemeint war – vergleiche den Code mit deiner letzten funktionierenden Version.

  4. Ergebnis exportieren

    Lade SVG herunter für eine skalierbare Vektordatei, die du in Illustrator oder Inkscape bearbeiten kannst, oder lade PNG herunter für ein Rasterbild in einer für Dokumente und Präsentationen passenden Größe.

Häufige Fragen

Wird mein Flowchart-Text irgendwohin hochgeladen?

Nein. Parsen und Rendern laufen vollständig in deinem Browser. Es gibt keine Serverkomponente, also gibt es für deinen Text keinen Weg vom Gerät.

Welche Syntax wird verwendet?

Die Mermaid-Flowchart-Syntax – dasselbe Textformat, das Tools wie mermaid.live und viele Dokumentationsplattformen nutzen. Ein Diagramm beginnt mit graph oder flowchart, einer Richtung (z. B. TD für von oben nach unten) und einer Liste aus Knoten und Pfeilen.

Kann ich hier ein Sequenzdiagramm, Gantt-Diagramm oder einen anderen Diagrammtyp zeichnen?

Nein. Dieses Tool ist auf Flowcharts beschränkt. Andere Mermaid-Diagrammtypen nicht zu unterstützen ist eine bewusste Entscheidung zum Funktionsumfang, keine technische Einschränkung.

Kann ich die Form des Diagramms mit der Maus bearbeiten oder ein gerendertes Diagramm zurück in Code verwandeln?

Nein. Dieses Tool arbeitet nur in eine Richtung: Text rein, Bild raus. Es gibt keinen grafischen Knoten-Editor und keine Möglichkeit, ein gerendertes Diagramm zurück in Text umzuwandeln.

Funktioniert es offline?

Ja. Es ist eine PWA. Nach dem ersten Besuch wird sie zwischengespeichert, sodass sie ohne Netzwerkverbindung funktioniert. Du kannst sie auch zum Startbildschirm hinzufügen.

Was ist der Unterschied zwischen dem SVG- und dem PNG-Download?

SVG ist eine skalierbare Vektordatei – sie bleibt in jeder Größe scharf und lässt sich in Vektor-Tools bearbeiten. PNG ist ein Rasterbild mit fester Auflösung, größer gerendert als die Bildschirmvorschau, für ein scharfes Ergebnis in Dokumenten und Präsentationen.