STATE MACHINE

Nodes are connected with the StateMachine connector.

Endpoints are located with 'Continuous' anchors, which are anchors whose location is calculated based on the location of all other connected elements, and which guarantee a unique endpoint per connection.

Click and drag new Connections from the orange div in each element; the main elements in the UI are configured to be Connection targets. You can drag from one of these divs onto its parent element to create a 'loopback' connection. Each element supports up to 5 Connections.

Click on a Connection to delete it.

This demonstration uses jsPlumb 1.7.2, jQuery 1.9.0 and jQuery UI 1.9.2.For touch support, jQuery Touch Punch is used.