Flux Flow
Flux Flow is a collection of declarative building blocks for displaying node based flows: automations, pipelines, decision trees and agent workflows. You compose a flow from plain Vue markup, positioning cards on a pannable canvas and wiring them together with connectors, without reaching for a heavyweight graph library.
The toolkit is display oriented. A full editor (dragging nodes, drawing connections) is intentionally out of scope, but the primitives are shaped so an editor can be layered on top later.
Highlights
- Declarative. Write nodes and connectors as Vue markup; connectors reference nodes by id, so cards stay free of wiring props.
- Opinionated cards. A base
FluxFlowCardplusTrigger,ConditionandActionvariants give you a Flux styled node surface in a single line, always headed by its type icon. - Small nodes too. A
FluxFlowPillheads a flow with a single named trigger, aFluxFlowTerminalopens and closes it, aFluxFlowStepmarks the steps running down its trunk, aFluxFlowJunctionknots lines together and aFluxFlowNoteannotates the canvas. - Named branches. A
FluxFlowPortmarks a point inside a card, so the branches of a condition leave it at the outcome they belong to, and aFluxFlowGatesays out loud whether they meet onand,ororxor. - Layout that is not yours to do by hand. A
FluxFlowChainplaces a run of steps and wires it up, aFluxFlowGraphdoes the same for a flow that forks and merges,useFlowLayoutturns a branching graph into coordinates, and aFluxFlowGroupor aFluxFlowLaneframes the part of the canvas that belongs together. - Runnable. Connectors accept a
progress-colorandprogress-value, so you can visualize a flow while it runs. - Read only viewport. Drag to pan,
ctrl/cmd+ scroll to zoom, and the canvas fits its content on mount. - Controls that stay put. A
FluxFlowPanelpins anything to a corner of the viewport,FluxFlowControlsputs the zoom and fullscreen buttons there, and aFluxFlowMinimapmaps the whole flow with the viewport drawn on it.
Head straight for Examples to see complete flows, or start with Flow for the canvas itself.