Your Code ⟶ local/cloud AI builds a ReactFlow JSON ⟶ Import to FlowStep ⟶ finish and export a single, read-only HTML file with a built-in execution sequence view
The sequence view automatically highlights the execution order step by step, making it easy to follow what happens next without reading the code.
FlowStep is a tool designed to convert complex code logic into clean, easy to understand, interactive process diagrams. It’s the perfect bridge between Development and Support.
The purpose of this tool is not to provide support staff with a testing checklist or to visualise the complexity of your code, but by concentrating on the raw process flow of your code, we enable colleagues to trace the code execution logic and identify the root cause of module failures.
If you try FlowStep with my prompt and you wonder that your diagram looks very simple - well that was the goal 😉.
This is an example of the final portable HTML artifact that is shared with support teams.
👉 Export function showcase
Note: While manual creation is possible, FlowStep is built for AI speed. If you are not allowed to use AI or prefer building everything from scratch, ReactFlow’s showcase might offer more traditional and better alternatives.
Note2: This app is already fully functional, but still just the "base" of this idea. Do whatever you want and need to do (add/remove/adapt) to make it work even better for you and your team.
Before you start, you need to have Node.js installed on your computer. If you don't usually work with React or Frontend: Node.js is the runtime environment that powers this tool in the background.
- Download Node.js (LTS Version) here: nodejs.org
- Install it using the default settings.
Once you have unpacked the folder, open your terminal (Command Prompt or PowerShell) inside that folder and enter the following commands:
- Install dependencies:
npm install(This will download all necessary libraries like React and Tailwind. A folder named node_modules will be created—you can simply ignore it.)
🛫 Start the App
npm run devopen: click on the link provided to you in the terminal.
e.g: ➜ Local: http://localhost:3000/💡The Workflow (80/20 Principle)
80% is already done / 20% - the finish - comes from you
Logic Extraction: Have the (Prompt_english.txt) prompt ready, insert the copy of your code at the bottom and let an AI (local or cloud) generate the logic data in my ReactFlow JSON format.
Prompt build: Tells the AI what to do ➡️ ReactFlow example (dont delete this - or you get output which does not exist in my ReactFlow scheme) ➡️ Your Code (this is the place for your code).
- Import: Click Connect your workspace and select the prepared workspace folder "flows". FlowStep will list all valid
.jsonflows in that folder. If you want to start fresh, use New flow.
"Note: When connecting your workspace, your browser will ask for permission to access the folder. This is necessary to save your changes directly to the JSON files."
Rename Flow: Renames the JSON to your prefered name
Replace JSON: Paste the initial copied JSON you got from the AI or an improved/different Version
-
Fine-tuning: Briefly adjust the positions of the boxes (nodes) and add additional connections manually. Check the "Sequence" view to ensure the flow is correct.
-
Export: Click Save first and then Export Portable HTML. You will receive a single, lightweight and read-only .html file.
📦 Delivery & Support
The exported HTML file is completely independent. You can send it to support, embed it in your wiki, or simply open it in a browser. It requires no Node.js and no server to run.
Happy Visualizing!
⚠️Save/Restore Defaults and Export Portable HTML buttons - what to know so you dont think
"meh, doesnt work"⚠️
Save Button: Writes the current in-UI flow state directly into the selected JSON file
inside your workspace folder.
Restore Defaults: Resets the editor to the built-in DEFAULT_FLOW_TEMPLATE.
Use this if you want a clean starting point (remember to Save afterward).
Export portable HTML: Uses the current in-memory state (not LocalStorage).
Tip: Save first to keep the workspace file in sync.
Tips & Tricks
➡️ ⬇️ Straight Arrow connections:
When it seems not possible to connect a straight arrow from one node to the other.
It may come from the AI import. Try to snap all nodes to the grid and then reconnect them.
This will most likely occur after the first import when you moved one node but not the other.
The node you moved is snaped to the grid the other is not.
Move all the nodes one time and then use the "Align Y" or "Align X" buttons.
📄 License This project is licensed under the MIT License - see the LICENSE file for details."