In jsPlumb, you declare elements to hold your endpoints, and then the endpoints are painted onto your elements according to anchors you specify. For example, you could set your anchor to the middle of the left side of your element, with the connector coming our of it towards the left.

This is all quite simple, but I spent hours trying to get it to work — whatever happened, the endpoints appeared in the wrong place. The frustrating part was that they would jump into the correct place after I started to draw connectors. So jsPlumb clearly couldn’t figure out the dimensions of the element when it was declared — only after I had started drawing.

It turns out that the problem was with jQuery UI tabs — the endpoints were inside a tab. Despite the tab being the default one and visible on page load, it was preventing jsPlumb from positioning endpoints correctly.

Once I had figured out that tabs were the culprit, the solution was really simple: Just call jsPlumb.repaintEverything(); whenever the tab is ‘shown’. This way all positions can be re-calculated when the page is set up and all elements are visible and in their final positions. I put the call to repaintEverything in the tabs’ show() event.