Workflow-Visualizer

Verwandle jede Systembeschreibung in ein schönes, interaktives HTML-Diagramm. Klicke auf Knoten, fahre für Details darüber, und sieh genau, wie Daten durch deinen Workflow fliessen. Eine eigenständige HTML-Datei, keine Abhängigkeiten.

So funktioniert es

Wenn du «diesen Workflow visualisieren» oder «dieses System abbilden» sagst, analysiert diese Fähigkeit deine Beschreibung, identifiziert jede Komponente und erstellt ein interaktives Diagramm, das du in jedem Browser öffnen kannst.

Schritt 1: Das System analysieren

Extrahiere folgende Komponenten aus der Beschreibung der Nutzerin/des Nutzers:

Komponente	Worauf zu achten ist	Beispiel
Auslöser	Was den Workflow startet	«Wenn eine neue E-Mail eintrifft», «Jeden Morgen um 9 Uhr»
Eingaben	Daten, die ins System gelangen	«E-Mail-Text», «CSV-Datei», «API-Antwort»
Verarbeitungsschritte	Aktionen, die Daten transformieren	«Wichtige Infos extrahieren», «Text zusammenfassen», «Ergebnisse filtern»
Tools / Dienste	Verwendete externe Tools oder APIs	«Claude», «Zapier», «Google Sheets», «Slack»
Entscheidungspunkte	Bedingte Verzweigungen	«Wenn Priorität hoch ist», «Wenn Betrag > 100 CHF»
Ausgaben	Endergebnisse oder Lieferobjekte	«Slack-Nachricht senden», «Tabelle aktualisieren», «Bericht erstellen»
Schleifen	Wiederkehrende oder sich wiederholende Schritte	«Für jedes Element wiederholen», «täglich ausführen»
Datenspeicher	Wo Daten zwischen Schritten liegen	«Datenbank», «JSON-Datei», «Tabellenblatt»

Falls die Beschreibung der Nutzerin/des Nutzers vage ist, vor dem Erstellen klärende Fragen stellen.

Schritt 2: Ein Layout wählen

Wähle das Layout, das am besten zur Form des Workflows passt:

Layout	Struktur	Am besten geeignet für
Fluss von links nach rechts	Horizontale Knotenkette	Lineare Prozesse, Pipelines, einfache Workflows
Wasserfall von oben nach unten	Vertikale Kaskade	Sequenzielle Schritte, Entscheidungsbäume, Trichter
Nabe-und-Speiche	Zentraler Knoten mit ausstrahlenden Verbindungen	Ein Tool, das mit vielen verbunden ist, API-Integrationen
Schwimmbahn	Horizontale Bahnen pro Tool/Person	Teamübergreifende Prozesse, Übergaben zwischen Systemen
Zirkulär	Rückführung zum Start	Wiederkehrende Workflows, Feedback-Schleifen, Monitoring

Schritt 3: Das interaktive HTML erstellen

Generiere eine einzelne eigenständige HTML-Datei mit diesen Funktionen:

Knotentypen und Farben

Knotentyp	Hintergrund	Rand	Icon-Stil
Auslöser	#1e3a5f	#3B82F6 (Blau)	Blitz, Uhr, Webhook
Verarbeitung	#1a3d2e	#10B981 (Grün)	Zahnrad, Zauberstab, Filter
Tool / Dienst	#3d2e1a	#F59E0B (Bernstein)	Tool-Logo oder Schraubenschlüssel
Ausgabe	#3d1a1a	#EF4444 (Rot)	Häkchen, Senden, Export
Datenspeicher	#1a1a2e	#6366F1 (Indigo)	Datenbank, Ordner, Datei
Entscheidung	#2e1a3d	#A855F7 (Violett)	Fragezeichen, Verzweigung

Knoteninhalt

Jeder Knoten zeigt:

• Icon (Emoji oder SVG) oben
• Label (2-4 Wörter, fett)
• Untertitel (eine kurze Zeile, die beschreibt, was passiert)

Verbindungen und Interaktivität

Linien: Durchgezogen mit Pfeilspitzen, Farbe entspricht dem Rand des Quellknotens, optionales Datenlabel, animierter Strich bei Hervorhebung.

Hover: Knoten skaliert um 1,05x, Rand leuchtet, Tooltip mit Schrittbeschreibung.

Klick: Hebt Knoten und direkte Verbindungen hervor, dimmt nicht verbundene Knoten ab, Klick auf Hintergrund setzt zurück.

Responsiv:

• Diagramm passt sich an den Viewport an
• Funktioniert auf Desktop- und Tablet-Bildschirmen
• Knoten umbrechen oder scrollen auf sehr kleinen Bildschirmen

Standardstil

Seitenhintergrund #0f0f0f, Container #161616, Kopfzeilentext #ffffff, Untertitel #888888, Knotentext #ffffff, Verbindungen #444444 (farbig bei Hervorhebung). System-Sans-Serif-Schrift, 12px Randradius, 20px Knotenpolsterung, 160px minimale Knotenbreite.

Eine Kopfzeile (Workflow-Name + Beschreibung), den Diagrammcontainer und eine farbcodierte Legende einfügen (Blau=Auslöser, Grün=Verarbeitung, Bernstein=Tools, Rot=Ausgaben, Indigo=Datenspeicher, Violett=Entscheidungen). Alle Styles und JS inline, keine externen Abhängigkeiten.

Regeln

1. Jeder Knoten muss eine konkrete Aktion sein, kein vages Label. «Daten verarbeiten» ist schlecht. «Rechnungsbetrag aus PDF extrahieren» ist gut
2. Verbindungen müssen zeigen, welche Daten zwischen Knoten fliessen. Nicht nur, dass sie verbunden sind, sondern WAS durchläuft
3. Entscheidungspunkte brauchen beschriftete Verzweigungen. «Ja» und «Nein», oder die konkreten Bedingungen
4. Keine schwebenden Knoten. Jeder Knoten muss mit mindestens einem anderen verbunden sein
5. Immer dunkler Hintergrund. Diagramme im hellen Modus wirken blass und weniger professionell
6. Maximal 20 Knoten pro Diagramm. Falls der Workflow grösser ist, in Teildiagramme aufteilen
7. Eigenständiges HTML. Keine externen CSS-, JS- oder Bildabhängigkeiten. Muss offline funktionieren

Anwendungsbeispiele

• «Diesen Workflow visualisieren: neuer Lead vom Website-Formular, im CRM hinzugefügt, Vertriebsteam erhält Slack-Benachrichtigung»
• «Dieses System abbilden: Claude schreibt Entwürfe, Grammarly prüft, Google Docs für Review»
• «Meinen Workflow diagrammieren: E-Mails prüfen, dringend vs. nicht dringend sortieren, an Slack oder Notion weiterleiten»

Tipps für beste Ergebnisse

• Beschreibe deinen Workflow Schritt für Schritt in einfacher Sprache
• Erwähne jedes beteiligte Tool oder jeden Dienst namentlich
• Füge etwaige Bedingungen oder Verzweigungen ein («wenn X dann Y, sonst Z»)
• Je mehr Details du gibst, desto genauer wird das Diagramm

---

Zuletzt aktualisiert: 01.08.2026 · Version 1.0.0 · skills.fragroger.ai

Lizenz: CC BY-NC-ND 4.0 (Namensnennung – nicht kommerziell – keine Bearbeitungen). Nutzung nur für den Eigengebrauch. https://creativecommons.org/licenses/by-nc-nd/4.0/deed.de