Text → Flussdiagramm
Mermaid-Syntax eingeben und sofort Flussdiagramme generieren. Kein Server-Upload — 100% lokale Verarbeitung.
Syntaxfehler
Über das Tool
Text → Flussdiagramm ist ein kostenloses Browser-Tool, das automatisch Flussdiagramme, Sequenzdiagramme und mehr aus der Mermaid-Syntax generiert.
Die gesamte Verarbeitung erfolgt lokal mit Mermaid.js — keine Daten werden an externe Server gesendet; ideal für vertrauliche Arbeitsabläufe.
Als SVG oder PNG sofort exportieren. Keine App-Installation notwendig — einfach im Browser öffnen und loslegen.
Anleitung
Code eingeben
Mermaid-Syntax in den linken Editor eingeben. Ein Beispieldiagramm ist bereits für den schnellen Einstieg vorgefüllt.
Live-Vorschau prüfen
Die Vorschau rechts aktualisiert sich in Echtzeit. Bei Syntaxfehlern wird eine hilfreiche Fehlermeldung angezeigt.
Als SVG oder PNG speichern
„SVG speichern" oder „PNG speichern" anklicken, um das Diagramm direkt auf dem Gerät zu speichern.
Glossar
- Mermaid.js
- JavaScript-Bibliothek, die Diagramme aus textbasierter Syntax generiert. Offiziell in GitHub Markdown unterstützt.
- Flussdiagramm
- Visuelle Darstellung eines Prozesses oder Arbeitsablaufs. In Mermaid mit
graph TDodergraph LRerstellt. - SVG (Scalable Vector Graphics)
- Auflösungsunabhängiges Vektorbildformat. Kann ohne Qualitätsverlust skaliert werden; ideal für Präsentationen und Druck.
- Knoten (Node)
- Jedes Element im Diagramm (Rechteck, Kreis, Raute usw.). In Mermaid als
A[Bezeichnung]definiert. - Kante (Edge)
- Pfeil oder Linie, die Knoten verbindet. Dargestellt als
-->(Pfeil) oder---(Linie). - Sequenzdiagramm
- Diagramm, das Interaktionen zwischen Akteuren über die Zeit darstellt. Mit
sequenceDiagramerstellt.
Häufige Fragen
- Q.Kann ich deutschen Text in den Knoten verwenden?
- Ja. Mermaid.js unterstützt Unicode, sodass du Text in jeder Sprache, einschließlich Deutsch, in Knoten verwenden kannst.
- Q.Was tun, wenn das Diagramm den Vorschaubereich überschreitet?
- Der Vorschaubereich unterstützt Scrollen. Du kannst auch die Layoutrichtung von "graph TD" (oben-unten) auf "graph LR" (links-rechts) ändern.
- Q.Wird mein Diagramm an einen Server gesendet?
- Nein. Die gesamte Verarbeitung erfolgt lokal im Browser mit Mermaid.js. Der Diagramminhalt wird niemals an externe Server übermittelt.
- Q.Was ist der Unterschied zwischen SVG und PNG?
- SVG ist ein Vektorformat, das ohne Qualitätsverlust skaliert werden kann — ideal für Präsentationen und Druck. PNG ist ein Rasterformat, praktisch zum direkten Einfügen in Dokumente.
- Q.Kann ich andere Diagrammtypen neben Flussdiagrammen erstellen?
- Ja. Mermaid.js unterstützt Sequenzdiagramme (sequenceDiagram), Klassendiagramme (classDiagram), Gantt-Diagramme (gantt) und mehr.
- Q.Wird der Code zwischen Sitzungen gespeichert?
- Die aktuelle Version speichert den Code nicht zwischen Sitzungen. Um später zu bearbeiten, kopiere den Mermaid-Code aus dem Editor und speichere ihn lokal.
Anwendungsfälle
Systemdesign-Dokumente
API-Aufrufabläufe oder Datenbankschemas mit Mermaid dokumentieren und in technische Dokumentation einbetten.
Besprechungsnotizen & Workflows
Workflows oder Freigabeprozesse aus Besprechungen schnell visualisieren und mit dem Team teilen.
Präsentationsfolien
Wenn Diagramme in PowerPoint zu langsam zu erstellen sind, in Mermaid erstellen, als PNG exportieren und einfügen.
Lernmaterialien
Algorithmusschritte oder Zeitachsen als Flussdiagramme visualisieren, um leichter verständliche Studienmaterialien zu erstellen.
Mermaid-Syntax
Einfaches Flussdiagramm (graph)
graph TD
A[Start] --> B{Bedingung}
B -->|Ja| C[Prozess A]
B -->|Nein| D[Prozess B]
C --> E[Ende]
D --> EKnotenform-Referenz
A[Text] — RechteckB(Text) — AbgerundetC{Text} — RauteD((Text)) — KreisE>Text] — AsymmetrischF[(DB)] — DatenbankFeedback senden
Bitte teilen Sie uns Ihre Gedanken mit, um das Tool zu verbessern.
Feedback ist vorübergehend ausgesetzt
Der Server ist ausgelastet oder der Spam-Schutz ist aktiv. Bitte versuchen Sie es später erneut.