Flow Studio

Why this exists

Backend work is easy to show with numbers. Interface work is not — it shows up in whether a drag feels attached to the cursor, whether an edge follows the node you are moving, whether undo puts things back exactly where they were.

The hard parts

Pan and zoom. The canvas keeps a single transform matrix; pointer positions are converted to canvas space once, at the edge of the system, so no code below that boundary has to know about zoom.

Connections that behave. Edges re-route as nodes move, and a connection in progress snaps to a valid port rather than to the nearest pixel.

Undo/redo. Every mutation is an inverted pair, so redo is just running the pair the other way. This is the piece most editors get subtly wrong.

Optimistic state. Editing never waits for the server: the canvas is the truth, the indicator says how far behind the save is, and a version conflict is put to you as a choice with both versions described rather than settled by whoever wrote last.

Execution you can watch. Running a flow posts to the .NET service, which walks the graph and narrates itself as numbered Server-Sent Events. Nodes go active as their step starts, not when it finishes, so the canvas reads like the execution rather than trailing it — and each connection shows the payload that crossed it. The identical numbered events are available by polling, for the networks where the stream never opens.

A second door. A node editor is close to the worst case for assistive technology: position carries meaning and connecting is a drag between two small circles. The canvas is fully keyboard-operable, connections included, and beside it is the same graph as a list — select, inspect, connect, disconnect, delete, as ordinary buttons. Not a summary of the canvas. The same graph, addressed differently.

Why Vue here

The rest of this portfolio is React. This one is Vue 3 and Nuxt, deliberately — the reactivity model fits a canvas with many small independently-changing nodes, and I would rather show two frameworks than claim familiarity with both.