Flowturi? Sankey diagrams?

Years ago I was working at a SaaS company that relied heavily on importing data from customers through a bunch of different integration points. Knowing when and where the data flows were breaking was critical. Something I thought would be cool is to have a dashboard that showed the real-time flows between various pieces of the environment be it APIs, FTP, JMS, SQS, SQL Server, DynamoDB, whatever. I was thinking of something along the lines of chemical process simulation software (that I had either actually seen or imaged I saw in college).

We were big users of Sumo Logic and used it extensively for dashboards and alerting. Sumo had the ability to display Sankey (or flow) diagrams, but they were static and didn’t really handle the volume of data we were dealing with.

Anyway, I decided a few days ago to see if I could vibe code this idea into something that works.

TLDR: I have a toy assembled, not sure how far it’ll go.

Flowturi

Project Name

This is the most important part, right?

Have you tried to use common words to name a product lately? Give it shot.

See? It’s not possible. They’re all used.

I was thinking ok, we’re going to display flows that are animated, so how about Flowmation. ChatGPT thought it slapped too. Well, of course, that’s taken. Every other cool name ChatGPT and I kicked around was close to or exactly already used. As many of you, I happened to have my old copy of Unit Operations of Chemical Engineering on the bookshelf behind me. I cracked it open to the chapter on the Transportation and Metering of Fluids where I saw venturi meters. Flowturi it is.

Is This Even Possible

I decided my “team” here is going to be Grok, ChatGPT (Chatty from here on out), and Cursor. Chatty did a decent job of creating a proof of concept with HTML and JS. Excited about the possibilities I figured it was time to pick a framework to use. Grok suggested Vite + React + JS. (I discovered I’ve been pronouncing Vite incorrectly in my head while reading it—it’s veet.)

Now, I have a short list of icks, which are:

• Roaches

• Static cling

• Javascript and React

But my goal here is to lean as heavily on the LLMs here to see how far I can get, so whatever. There’s our stack.

Quick Overview

There’s a repo, you can look at it.

https://github.com/ThatOrJohn/flowturi/

From docs/README.md

Flowturi supports two primary operating modes:

• Historical Mode: Pre-analyzed data is animated over time.

• Real-time Mode: Ingests and animates data as it arrives.

Our focus is on visual clarity, smooth transitions, and intelligent layout behavior across both modes.

I guess I should update that, it hopes to support two operating modes.

Mistakes Were Made

I had this nice demo, so I thought I’d just convert that into a Vite project and migrate stuff over. Dumb move, should have just started clean. I did this after wasting a lot of time.

Feature Fun

The original demo consumed a hardcoded JSON file.

We need a file picker. Done.

It should do CSV too. Done.

It needs a scrubber bar thing. Done.

You should be able to control playback speed. Done.

Light and Dark mode. Done.

File drop is cooler than just file picker. Done.

Export video of the animation. Done.

File info panel. Done.

You can really fly through these common tasks in Cursor’s Agent mode.

You sure about that???

The observant among you might have saw that stack earlier and asked why I didn’t start off with Typescript over Javascript. At first I was like, are you really building if you’re not stacking tech debt to the ceiling?

But, you’re right, I’m making the LLMs do the hard work, what do I care. The project has now been migrated to TS.

Updated ick list:

• Roaches

• Static cling

• Javascript, Typescript, and React

Feature Not Fun

The layout of the Sankey diagram is the biggest challenge here. Trying to get the nodes and links to be stable and have smooth transitions between frames has really been a struggle. I was cruising along with acceptable (for now) results, and then enter our first disaster.

I’d been using Safari, but when I finally got around to testing Chrome the layout looked whack. Some of the links were showing up as large circles around nodes (overly large stroke-widths), etc. I gave all of the LLMs numerous attempts to fix all of the problems. It was a circus of layout issue after layout issue.

A couple of examples

Yay, debugging weird layouts.

After hours of failures I decided it was time to take a step back. Chatty and I ended up generating a couple of markdown docs

• Sankey Diagram Philosophy - This document outlines the core principles and design values behind how Flowturi renders and animates Sankey diagrams. It serves as a guiding reference for any contributor or automated tool (LLM or otherwise) working on the system.

• Flowturi Sankey Layout Philosophy - This document outlines our layout philosophy and design principles for both modes (historical and real-time).

I wanted this to supply crucial context to any of the LLMs as we worked on anything layout related.

With that done, I went back to Cursor (with claude-3.7-sonnet), and finally got back to a working Sankey.

The Reveal

Yeah, it could be better. Living with the skinny link widths for now due to the Chrome weirdness I was having earlier.

Going to keep plugging away at least a little more. I have future visions of what it could include/become:

• Flowturi Designer. This would be a tool to let you mock up your system (like draw.io) defining nodes, links, and link properties (e.g., batch vs stream, volume intensity) and from this create data to send into Flowturi’s historical mode to generate animations you could include in your documents

• Flowturi Real-Time (platform maybe?) would have a number of connectors to handle transforming stats from source systems into Flowturi format for real-time dashboards, etc. I could see you being able to define lower/upper thresholds where the links could change into alert state colors or whatever.

Any Tips?

• If you’re aiming for something non-trivial, I think it’s worthwhile to put your architecture thoughts in a doc so you can feed it to the LLM at the beginning. Chatty was awesome at spitting out the .md files for this to copy and paste.

• Cursor agent with the premium models was great for the big stuff, but if you want to do something small (like restyle the playback speed icon I hated) the non-premium models are capable. You can see the model list and pricing here https://docs.cursor.com/models#pricing.

• Obvious, but, save your work. Get your bare bones feature, commit it, and start working in branches before you’re 10 iterations into the LLM trying to fix a bug and you’re not quite sure at what point you liked something. Cursor does let you scroll through your chat history and restore checkpoints, but it doesn’t take much to become pretty noisy.