Dein Code ⟶ lokale/cloudbasierte KI erzeugt ein ReactFlow-JSON ⟶ Import in FlowStep ⟶ fertigstellen und als einzelne, schreibgeschützte HTML-Datei mit integrierter Ausführungssequenz exportieren
Die Sequenzansicht hebt automatisch Schritt für Schritt die Ausführungsreihenfolge hervor und macht so leicht verständlich, was als Nächstes passiert – ganz ohne den Code lesen zu müssen.
FlowStep ist ein Tool, um komplexe Codelogik in saubere, einfach zu verstehende, interaktive Prozessdiagramme zu konvertieren. Perfekt für die Schnittstelle zwischen Development und Support. Das Tool ist nicht dafür gedacht Support Mitarbeitern eine Prüfungscheckliste zu bauen oder Code in seiner Komplexität darzustellen, sondern den Kollegen zu helfen den Ablauf des Codes zu verstehen um das logische Schlüsse zur Nichtfunktion des Moduls treffen zu können.
Wenn du FlowStep mit meinem Prompt ausprobierst und dich wunderst, dass dein Diagramm sehr einfach aussieht – genau das war das Ziel 😉
Das ist ein Beispiel eines via "Export portable HTML" exportierten read-only exports aus FlowStep. 👉 Export function showcase
Hinweis: Eine komplette manuelle Erstellung ist möglich, FlowStep ist jedoch auf Geschwindigkeit durch KI ausgelegt. Wenn du keine KI einsetzen darfst oder lieber alles von Grund auf selbst baust, bietet das ReactFlow-showcase möglicherweise klassischere und passendere Alternativen.
Hinweis 2: Diese App ist bereits voll funktional aber nur die Basis der Idee. Passe sie nach Belieben an (hinzufügen / entfernen / anpassen), damit sie für dich und dein Team noch besser funktioniert.
Bevor du startest, muss Node.js auf deinem Rechner installiert sein. Falls du normalerweise kein React/Frontend machst: Node.js ist die Laufzeitumgebung, die dieses Tool im Hintergrund antreibt.
- Lade Node.js (LTS Version) hier herunter: nodejs.org
- Installiere es mit den Standard-Einstellungen.
Wenn du den Ordner entpackt hast, öffne dein Terminal (Eingabeaufforderung oder PowerShell) in diesem Ordner und gib folgende Befehle ein:
- Abhängigkeiten installieren:
npm install(Das lädt einmalig alle benötigten Bibliotheken wie React und Tailwind herunter. Es entsteht ein Ordner node_modules, den du ignorieren kannst.)
🛫 App starten:
npm run devÖffnen: Klicke auf den Link im Terminal oder öffne ihn manuell im Browser.
z.B: ➜ Local: http://localhost:3000/💡 Der Workflow (80/20 Prinzip)
80% bereits fertig / 20% - das finish - machst du selbst
Logik-Extraktion: Kopiere deinen Code und lass dir von einer KI (lokal oder cloud) mit dem passenden FlowStep-Prompt (prompt_german.txt im VZ) die Logik-Daten im JSON-Format erstellen.
Prompt-Aufbau: Was soll die KI tun + Richtlinien für Design -> Ein ReactFlow Beispiel (lösche das nicht - wenn ersetze es durch dein eigenes best practice) -> Dein Code (hier ist der Platz für deinen Code).
- Import: Klicke auf Connect your workspace und wähle den zugehörigen Ordner "flows" aus. FlowStep wird nun allte gültigen
.jsonflows in diesem Ordner anzeigen. Wenn du frisch beginnen willst, benutze New flow.
Rename Flow: Bennent das .JSON in deinen bevorzuten Namen um.
Replace JSON: Füge hier dein initiales JSON ein welches du von der KI bekommen hast oder ein verbessertes/neues JSON.
-
Feinschliff: Passe die Positionen der Boxen (Nodes) kurz manuell an. Schau dir unter "Sequence" die Sequenz an ob sie dir passt.
-
Export: Klicke auf "Save" und dann "Export Portable HTML". Du erhältst eine einzige, kleine read-only .html Datei.
📦 Auslieferung & Support Die exportierte HTML-Datei ist völlig unabhängig. Du kannst sie dem Support schicken, in dein Wiki einbetten oder einfach im Browser öffnen. Sie benötigt kein Node.js und keinen Server.
Viel Erfolg beim Visualisieren!
[!IMPORTANT]
⚠️ Wichtige Infos zu Save, Restore und Export – damit alles reibungslos läuft und du nicht denkst "meh, funktioniert nicht" ⚠️
Save (Speichern): Der Save-Button speichert deinen aktuellen Stand direkt in die zugehörige JSON Datei.
Restore Defaults (Standard wiederherstellen): Dieser Button setzt den Editor auf den Default Stand zurück. Nutze das, wenn du komplett von vorne anfangen willst.
Export Portable HTML: Diese Funktion nutzt die Daten aus deinem LocalStorage, um die HTML-Datei zu generieren. Wichtig: Drücke immer erst auf "Save", bevor du den Export startest, damit auch wirklich dein neuester Stand im Dokument landet.
➡️ ⬇️ Gerade Pfeile ziehen: Wenn es nicht möglich erscheint einen geraden Pfeil von einer Node zu der anderen zu ziehen, liegt das womöglich am import Code der KI, hier sind die Nodes noch nicht im Grid eingeschnappt. Bewege kurz alle Nodes 1x hin und her und nutze dann die Align X oder Align Y Funktion.