An S-curved arrow is a smooth curve that connects two boxes (or rectangles) like this:

Like the above picture. Point 1 and 4 represent the start and the end of the curve, while point 2 and 3 are control points.

Since the start and the end of the curve attach to the boxes, how about setting the start direction and the end direction to be perpendicular to the sides of the boxes?

Then, by extending the green bars, we can get to a point where two control points are on the same vertical line.

Now we get formulas. If the start point (1) is (x0,y0), the end point (4) is (x1,y1), then the control point (2) for the start point (1) is (​,y0), the control point (3) for the end point (4) is (​,y1).

We haven’t talked about where do the start point (1), (x0,y0), and the end point (4), (x1,y1) come from, but from previous drawings you might have been wondering if they’re at the middle of the sides of the boxes.

Yeah, they are. To make arrows look clean when there’re many of them, we only allow them to start or end at the middle of the sides of the boxes. This also means we’ve narrow down the possibilities to 16 combinations to choose from.

It seems that the one with the shortest distance is the best choice.

1. If the boxes are close, the arrow would be barely visible.
2. If the boxes overlap, the arrow may be hidden behind the boxes.

This is an open question which can lead to many creative ideas about what is undesired and how to detect them, but for now, I designed and implemented a simple one that prevents the cases shown above.

I add keep-out zones to the boxes, and test if the end point is in the keep-out zone of the start box, or if the start point is in the keep-out zone of the end box, if a point does, combinations having that point would be abandoned.