Workflow in Mermaid umwandeln

Workflow in Mermaid umwandeln: Schritte und Entscheidungen zeilenweise schreiben, Mermaid-Code kopieren und das Flussdiagramm als Vorschau sehen.

Mermaid-Code
Vorschau (vereinfacht)

Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.

Abläufe als Text, Diagramme per Mermaid

Das Werkzeug wandelt einen Workflow in Mermaid-Code um. Mermaid ist eine Textsprache für Diagramme, die unter anderem GitHub, GitLab und viele Wikis direkt darstellen. Statt Kästen mit der Maus zu ziehen, schreiben Sie den Ablauf zeilenweise auf und erhalten ein Mermaid-Flowchart, also ein Flussdiagramm oder Ablaufdiagramm, das sich wie Code versionieren und überprüfen lässt.

Die Eingabe folgt drei einfachen Regeln. Erstens: Jede Zeile ist ein Schritt, und aufeinanderfolgende Zeilen werden mit einem Pfeil verbunden. Zweitens: Eine Zeile, die mit einem Fragezeichen endet, wird zur Entscheidung (Raute); von ihr gehen nur ausdrücklich angegebene Pfeile aus. Drittens: Eine Zeile wie „Reklamation? -> Ticket anlegen : ja“ verbindet zwei Schritte direkt und beschriftet den Pfeil. Schritte, die „Start“ oder „Ende“ heißen, erhalten eine abgerundete Form. Zeilen, die mit # beginnen, sind Kommentare. Gleich lautende Schritte werden zu einem Knoten zusammengefasst. So können Sie ein Mermaid-Diagramm erstellen, das etwa den Ablauf eines KI-Agenten mit Freigabe zeigt, und es direkt in ein README einfügen. Den Inhalt eines Ablaufs planen Sie vorher mit dem Agenten-Workflow-Planer.

Grenzen: Erzeugt wird nur der Diagrammtyp flowchart mit Rechtecken, Rauten und abgerundeten Knoten; Untergraphen, Stile und Klick-Aktionen ergänzen Sie bei Bedarf von Hand. Anführungszeichen und senkrechte Striche in Texten werden ersetzt, damit der Mermaid-Code gültig bleibt.

Anleitung: Workflow in Mermaid in 4 Schritten

  1. Schreiben Sie im Feld „Ablauf“ je Zeile einen Schritt; aufeinanderfolgende Zeilen werden verbunden.
  2. Beenden Sie eine Zeile mit einem Fragezeichen, um daraus eine Entscheidung zu machen.
  3. Verbinden Sie Verzweigungen mit A -> B : ja und wählen Sie die Richtung von oben nach unten oder links nach rechts.
  4. Prüfen Sie die Vorschau und kopieren Sie den Mermaid-Code mit „Kopieren“.

Typische Anwendungsfälle

  • Ablauf eines KI-Agenten für eine Projektbeschreibung oder ein README skizzieren.
  • Prozessaufnahme im Workshop schnell in ein Diagramm übertragen, das sich in GitHub oder GitLab rendern lässt.
  • Freigabepunkte und Verzweigungen sichtbar machen, bevor ein Workflow gebaut wird.
  • Diagramme als Text versionieren statt als Bilddatei.
Fragen

Häufige Fragen

Wie schreibe ich eine Verzweigung?

Schreiben Sie die Entscheidung als eigene Zeile mit Fragezeichen am Ende und darunter je Zweig eine Zeile wie „Frage? -> Ziel : ja“. Das Ziel kann ein Schritt sein, der weiter unten als eigene Zeile folgt.

Welche Mermaid-Syntax wird erzeugt?

Ein Diagramm vom Typ flowchart mit der Richtung TD oder LR, Knoten mit Kennungen n1, n2 und so weiter, Beschriftungen in Anführungszeichen sowie Pfeilen mit --> und optionaler Beschriftung in senkrechten Strichen.

Kann ich Schleifen darstellen?

Ja. Eine Verbindung zurück zu einem früheren Schritt, etwa „Prüfung ok? -> Entwurf überarbeiten : nein“, ergibt einen Rückpfeil. Die vereinfachte Vorschau zeichnet ihn als Linie; Mermaid führt ihn sauberer.

Wird mein Ablauf übertragen?

Nein. Code und Vorschau entstehen in Ihrem Browser.

Wo kann ich den Mermaid-Code einfügen?

Zum Beispiel in Markdown-Dateien auf GitHub und GitLab in einem Codeblock mit der Sprache mermaid, in vielen Wikis und Dokumentationswerkzeugen sowie im Mermaid Live Editor. Ob Mermaid unterstützt wird, hängt vom jeweiligen Werkzeug ab.

Warum sieht die Vorschau anders aus als in GitHub?

Die Vorschau ist bewusst einfach gehalten und ordnet Knoten nur in Ebenen an. Mermaid selbst nutzt ein eigenes Layoutverfahren mit anderen Abständen, Formen und Linienführungen. Maßgeblich ist der erzeugte Code.

Ratgeber

Zum Weiterlesen

Alle Artikel
  1. Was sind Tokens? Einfach erklärtTokens sind die Rechen- und Abrechnungseinheit von Sprachmodellen. Was ein Token ist, wie viele ein deutscher Text hat und warum das Geld kostet.
  2. Kontextfenster erklärt: Wie viel Text ein Modell auf einmal verarbeitetDas Kontextfenster begrenzt, wie viel ein KI-Modell gleichzeitig lesen und schreiben kann. Was die Zahl bedeutet, wo die Grenzen liegen und wie man damit umgeht.
  3. Warum deutsche Texte mehr Tokens brauchen als englischeDeutsche Texte brauchen meist 20 bis 50 Prozent mehr Tokens als englische. Woran das liegt, was es kostet und was man dagegen tun kann.
Weitere Werkzeuge

Das könnte auch helfen

Alle 558 Werkzeuge