Math Process

This example demonstrates one of the core strengths of Flow: its seamless integration with the Vue reactive ecosystem.

Unlike many graph libraries that rely on a black-box Canvas rendering cycle, Flow nodes are essentially scoped slot containers powered by native HTML/Vue components. This means your custom nodes possess all the "Vue Magic" — State management, two-way binding, and component-based logic flow automatically.

Calculation Demo

Try dragging the value sliders in the "Value" nodes on the left. Watch as the "Result" node on the right updates instantly, just like a standard Vue compute-cycle.

Input A

Input B

op-1

res-1

Reactive Logic Wiring

Mechanics

Because the content within the #node slot is a standard component within your Vue context:

1. Reactivity: Any bindings (e.g., v-model="store[node.id]") work perfectly without intermediate event emitters.
2. State Decoupling: You can manage your business logic in Pinia or local reactive objects and treat Flow purely as a view layer.

Key Node Properties

Prop	Type	Description
Node.type	string	Custom identifier. If the type is not one of the built-ins (input, output, default), the component will fall back to using your custom slot logic.
Node.width	number	The static width of the custom element. This is used for virtualization and intersection math.
Node.height	number	The static height of the custom element.