curved-arrows

[utterances-bot]

How to Draw S-Curved Arrows Between Boxes / Rectangles | Alexander's Garden

When I was building the spatial “tool for thought”, Jade, one frequently requested feature was drawing arrows between blocks, so we could make mind maps, flowcharts, etc. Here’s how I made it.

https://dragonman225.js.org/curved-arrows.html

[stephan-buckmaster]

Nice!

I wonder how much your analysis and implementation could benefit by using the symmetries. For example in your first diagram two flips take the box on the left to the box on the right. The curve should obey that same flipping flipping. I think you can see how your solutions have symmetries.

Also, what happens if the sides of one box are not parallel to any of the sides of the other box?

[manyone]

the algorithm seems to be the one at work in sankey diagrams when a flow stream is connected from one node (ie. category) to another - except that the thickness of the curve is an expression that represents the size of the flow and the flow direction is always left-right.

[dragonman225]

Also, what happens if the sides of one box are not parallel to any of the sides of the other box?

I haven't considered that case, in my use case (this), all boxes are in parallel. But that's a good reminder!