Building The Grid
Flowork opted against heavy third-party DAG rendering libraries (like React Flow or JSPlumb) to maintain complete native control and speed over the visual design of the Flow Designer. The entire canvas is a custom Vue implementation.
Nodes as Absolute Blocks
The workflow state is an array of node objects, each possessing an(x, y) coordinate. The Vue template loops over this array, mapping each object to a This provides the ultimate flexibility, as HTML form inputs can be easily embedded inside the nodes.
The Math Behind The Strings
The connections—the lines drawn between an output port and an input port—are the complex part.Because nodes can move, the system mathematically calculates the anchor points for every active port on every paint frame. It then passes those start and end (x, y) coordinates into an SVG
This ensures a modern, smooth, swooping line connecting logic blocks, adjusting elastically as the user drags a block across the workspace.