Flowchart/org Chart Using HTML SVG?

i am building a web app that has a bunch of charts on it. they are essentially very basic flow charts that show relationships between two boxes.

now i have the divs printing out on the screen with no problems. but i have little idea on the best way to draw the arrows between the boxes.

my original thought was to place the images (as background images) in a span and then use server side code to determine the size of the span (length) and then absolutely position it. seems clunky.

then my next thought was to put the arrows and lines into SVG canvases and then use some sort of javascript to plot the two box points and draw the line. the question though is how to go about it? is there already a library or set of examples out there that does this sort of stuff? i had a google search, but couldnt come up with anything that was of use...