Window 1

I am plumbed with a Bezier connector to Window 2 and a label, with Blank endpoints.
Window 2

I am plumbed with a Bezier connector to Window 1, and a Bezier connector with Rectangle endpoints to Window 3
Window 3

I am plumbed with a Bezier connector and Rectangle endpoints to Window 2, and a Bezier connector with Dot endpoints and a label to Window 4. My blue endpoint tracks Window 4's position.
Window 4

I am plumbed with a Bezier connector with Dot endpoints to Window 3, and with a Straight connector with Image endpoints to Window 5. My blue endpoint tracks Window 3's position.
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.
Window 7

I am plumbed with State Machine connectors to Window 3.

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

This page contains examples of the various types of connections you can make with jsPlumb. There are several other demonstrations that offer a more focused look at some specific part of jsPlumb's functionality - pick one from the drop down on the left or cycle through Next/Previous.

jsPlumb requires one of jQuery, MooTools or YUI3. See the documentation for a more detailed discussion of requirements.

This demonstration uses jsPlumb 1.3.5, jQuery 1.7.1 and jQuery UI 1.8.13.