🎥 Project Demo (YouTube):
https://www.youtube.com/watch?v=7RF2nh5w0FY
🔗 Project Demo (LinkedIn):
https://www.linkedin.com/posts/rishi-jat_30days30automations-activity-7408696500165468160-iV4a
FlowVision is a developer tool I built to actually see how a backend works while it’s running.
Modern backends are async, event‑driven, and full of background jobs. When something goes wrong, we still fall back to logs, timestamps, and guesswork. I wanted a way to look at a backend and immediately understand:
- what started,
- what triggered what,
- where things fan out,
- where they wait,
- and where they fail.
FlowVision turns real Motia executions into a live visual map of your backend.
No mock data. No diagrams drawn by hand.
Only what really happened.
While working on my 30 Days of Motia Automations challenge, I noticed a gap.
Motia already gives you:
- strong primitives (API steps, event steps, cron, streams)
- safety, retries, and state
- a workbench to test endpoints
But when a workflow grows beyond 2–3 steps, answering questions like these becomes hard:
- Why did this event trigger twice?
- Which step caused this fan‑out?
- Did this retry come from logic or infra?
- Where is time actually spent?
Logs tell you what happened, but not how the system behaved as a whole.
FlowVision exists to answer that.
FlowVision captures runtime traces from Motia steps and builds a graph of execution in real time.
Each execution becomes a visual system where you can see:
- API steps
- event handlers
- background jobs
- cron triggers
- success / failure states
- execution timing
- fan‑out and fan‑in behavior
Instead of reading logs line‑by‑line, you see the backend as a system.
The UI is intentionally inspired by tools like git-history.com.
That project made me realize something important:
Visuals can explain complex systems better than documentation ever will.
FlowVision treats a backend like a living system:
- nodes represent steps
- edges represent execution flow
- layout shows causality, not code order
The goal is simple:
A non‑backend person should be able to look at the UI and understand what’s going on.
Different views let you explore the system at different depths:
- high‑level overview
- per‑execution detail
- step‑by‑step playback
This is not a dashboard.
It’s a mental model.
- Motia steps emit trace events (
started,succeeded,failed) - FlowVision ingests these via a simple HTTP API
- Events are correlated by:
- project
- flow
- execution ID
- Flow topology is reconstructed from real timing and metadata
- The UI renders this as an interactive graph
Nothing is inferred from code structure.
Everything comes from runtime behavior.
The best way to see FlowVision in action is with a real multi‑step workflow.
From my repo:
👉 https://github.com/rishi-jat/motia-30days-30automations
Day‑8: CloudJanitor – Idle Resource Detector
This workflow is perfect because it has:
- a scheduled scan
- event‑driven analysis
- a human approval gate
- a final action step
In FlowVision, you can clearly see:
- how the cron triggers the scan
- how analysis fans out
- where approval blocks execution
- how everything reconnects
This is exactly the kind of system FlowVision was built for.
FlowVision is not:
- a replacement for Motia Workbench
- a metrics dashboard
- a log viewer
FlowVision is:
- a runtime execution visualizer
- a system‑level debugging tool
- a way to reason about backend behavior
Motia tells you what tools you have.
FlowVision shows you how you actually used them.
- Backend: Motia
- Language: TypeScript
- Runtime: Node.js
- State & Streams: Motia built‑ins
- Frontend: React + Vite
- Visualization: Graph‑based rendering
- Dev Style: Real executions only (no mocks)
As backends become more async and distributed, mental models matter more than logs.
FlowVision is my attempt to make backend systems:
- easier to understand
- easier to debug
- easier to explain to others
This project started as a hackathon idea, but it’s something I genuinely wish I had earlier.
Twitter/X: https://twitter.com/rishixtwt
GitHub: https://github.com/rishi-jat
LinkedIn: https://linkedin.com/in/rishi-jat-496245320
If you have an idea for an upcoming day, feel free to suggest it.
Made with ❤️ by Rishi