Skip to content
Andrew Voirol
WorkLogAboutContact
HomeWorkLog

AboutContact

✦ Just one prompt away from figuring it all out.

Wednesday, August 12, 2026why-just-do-build

'I like this better, this helps' — when the graph stops being noise

Graph VisualizationELK LayoutReact FlowUX

Random node positions defeat the whole point of a dependency graph. The friction graph exists to reveal chains and cycle locks — this blocks that, which feeds back into this. Grid-with-jitter positioning turns structure into confetti.

ELK's layered layout algorithm replaced the grid. Left-to-right flow, orthogonal edge routing, layer-sweep crossing minimization, 120px between layers, 60px between nodes. The computeElkLayout() function (102 lines) takes React Flow nodes and edges, delegates to elkjs, returns positioned nodes that actually communicate hierarchy.

Edges got typed semantics too. Green solid lines = dependency. Red dashed lines with CSS animation = failure cascade. Labels on each edge. After seeing it running: "I like this better, this helps. Let's definitely lean into this." Then immediately caught inconsistencies — some labels gray when they should be red, some edges animated when they shouldn't be. That's the kind of detail feedback that only comes from staring at your own friction graph, seeing your own barriers laid out left-to-right, and knowing which arrows should scare you.

← Previous

768 dimensions to catch 'phone call avoidance' and 'can't initiate phone calls' as the same friction

Next →

August 2026 Eclipse visualization


Andrew Voirol

Builder, hacker, shipper. Currently leaving localhost.

Navigate

WorkBuilder’s LogAboutContactRSS Feed

Connect

X / TwitterGitHubLinkedIn

© 2026 Andrew Voirol·Back to top ↑
✦Just one prompt away from figuring it all out.