There’s a small UI detail in Midio that I’m happy with how we solved: the way arrows (connections) adapt to different node positions.

A common visual problem with node-based tools is the awkward stretching and bending of arrows when going from right to left on the canvas. When they go “forward”, from left to right, the bezier curves flow nicely and look good. But as soon as they align vertically, things start to get messy.

We debated wether arrows should have curved or straight lines. Curved arrows look organic and are quite flexible, but they don’t work when you move “backwards”. Straight arrows work perfectly in all directions, but they can easily overlap each other, leading to ambiguity.

What we ended up with was an implementation of both. When connections go from left to right, they’re curved. As soon as they’re roughly vertically aligned, they straighten up. Simple, but quite effective. I’m now aware of a couple of other node-based tools doing a similar thing, but we got there on our own. I promise!