VisualFlowDecision Tree
Branching eligibility logic anyone can follow — conditions on edges, outcomes on leaves.
Drag nodes, pan and zoom — this is a live React Flow canvas.
How it works
Decision nodes branch on labelled edges. An evaluator walks the tree for a given input and animates the traversed path.
Source code
tsx
function walk(node, input) {
const branch = node.branches.find((b) => b.test(input));
highlightEdge(branch.edgeId);
return branch.next ? walk(branch.next, input) : node;
}