I have a dataset of points representing a To/From status - something like distribution centres and delivery addresses.
When the user clicks on a point I'd like to show the relationships between this point and its related points using lines. Eg when clicking on an address, show the path to the delivery centre.
This works fine, except when there are multiple overlapping lines. In this situation I'm looking for a method to separate the lines automatically, so that it's clear there are multiple lines, and each can be interrogated.
I've put a simple example on JS Fiddle - this sample creates 5 overlapping lines. Is there any way to displace them automatically, while retaining the start and end nodes?

This is the effect I'm aiming for, ideally handling multiple overlapping lines automatically:

This example uses Google Maps, but an answer in ArcGIS Server's JS API would be acceptable too.