Window 1

i am plumbed with a yellow Bezier connector to Window 2.
Window 2

i am plumbed with a yellow Bezier connector to Window 1, and a Bezier connector with square endpoints to Window 3
Window 3

i am plumbed with a Bezier connector and square endpoints to Window 2, and a Bezier connector with custom style to Window 4. My blue endpoint tracks Window 4.
Window 4

i am plumbed with a Bezier connector with custom style to Window 3, and with a straight line connector with image endpoints to Window 5. My blue endpoint tracks Window 3.
Window 5

i am plumbed with a flowchart connector to Window 6, between our two centerpoints, which are drawn below, and larger than, the window element; i am also plumbed to Window 4.
Window 6

i am plumbed with a flowchart connector to Window 5, between our two centerpoints, which are drawn below, and larger than, the window element.

jsPlumb provides a way to "plumb" elements of a UI together.

This demonstration uses jsPlumb 1.3.0-RC1, jQuery 1.6.0 and jQuery UI 1.8.13.

next: flowchart connectors demonstration

render mode: SVG | Canvas | VML

You also might like to check out TweetPlumb, a Twitter visualisation built with jsPlumb.

See a MooTools version of this demo.
See a YUI3 version of this demo.
Connection One