Continuation of my vibe coding experiment to bring my animated Sankey diagram tool to life. Previous mentions

• https://thatorjohn.hashnode.dev/flowturi-animated-sankey-diagrams

• https://thatorjohn.hashnode.dev/flowturi-2-sankey-boogaloo

Idea

In order to make this accessible to randos we need a GUI that allows you to lay out nodes/links and generate an export that can be used by Flowturi. Flowturi Designer is going to do that. The long-term, grand vision

• Generate the timestamped animation frames used by Flowturi’s historical mode and optional layout information (instead of relying on Flowturi’s auto-layout calculation)

• Bring your own icons. Import your own SVG architecture icons like Azure or AWS

• Alert thresholds

• Integrate Designer with Flowturi Studio (the UI of the core app)

• In place animation simulation

But Milestone 1 will simply be to generate a CSV for Flowturi so there’s an immediate win.

Execution

Plan of attack

I leaned on Chatty to generate markdown describing the vision and technical overview.

Bumps in the road

The 2 second explanation of Designer is it has a palette of node templates which you drag onto a canvas. You can then link the nodes on the canvas.

Cursor + claude-4-sonnet was having a pretty difficult time getting a working drag-and-drop system going. I’d used up a fair amount of premium model requests with nothing usable to show for it, so went to Plan B.

I gave Chatty a chance, and it didn’t fare much better. They both tried to use React DnD, and had a difficult time getting nodes that were draggable and visible on the canvas. It was almost getting to the point where I started considering doing it myself…almost.

Plan C. Welcome to the team Lovable. I started with a simple prompt this time

Create a Vite, Typescript, React site that is similar in format to draw.io. Its Palette will start simple by offering "nodes" of 3 types: source, intermediate, and sink. You can drag nodes onto a Canvas where you can link and arrange them. We're going to want to add properties to nodes and links in the next iteration, but for now let's just get the drag and drop, and linking working.

It worked! Lovable’s project used React 18.3 and dnd kit for drag & drop. Once I got the UI with the base functionality I wanted, I turned things back over to Cursor.

What does it do?

It looks like this.

If you click the Generate Flowturi Data button, you’ll get a CSV file you can take to Flowturi Studio.

Export file excerpt

% head ~/Downloads/internet-data-journey-historical-data.csv 
timestamp,source,target,value
2025-05-26 01:52:27,Web Logs,Raw Ingest,18
2025-05-26 01:52:27,IOT Sensors,Raw Ingest,41
2025-05-26 01:52:27,User Events,Raw Ingest,47
2025-05-26 01:52:27,CRM Exports,Raw Ingest,41
2025-05-26 01:52:27,Raw Ingest,Stream Processor,46
2025-05-26 01:52:27,Raw Ingest,Batch Processor,96
2025-05-26 01:52:27,Stream Processor,Feature Store,98
2025-05-26 01:52:27,Batch Processor,Feature Store,24
2025-05-26 01:52:27,Feature Store,Dashboard,6

And here’s what the above file looks like imported into Flowturi Studio.

Can I see it?

Sure, here’s the repo if you want to poke around or run it locally

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

and here’s a usable version deployed on Vercel where you can create export files

https://flowturi-designer.vercel.app

and then import them at https://flowturi.vercel.app