SOURCE

jsPlumb.bind("ready", function() {
  var firstInstance = jsPlumb.getInstance();
  var exampleColor = '#00f';
  // firstInstance.importDefaults({
  //   Connector : [ "Bezier", { curviness: 150 } ],
  //   Anchors : [ "TopCenter", "BottomCenter" ]
  // });
  firstInstance.connect({
    source: "obj1",
    target: "obj2",
    scope: "someScope"
  });
  
  
  addEndPoints('obj1');
  addEndPoints('obj2');
  addEndPoints('obj3');
  function addEndPoints(element) {
    firstInstance.addEndpoint(element, {
    endpoint: ["Dot", {
      cssClass: "endpointClass",
      radius: 10,
      hoverClass: "endpointHoverClass"
    }],
    paintStyle: {
      fill: exampleColor
    },
    hoverPaintStyle: {
      fill: "#449999"
    },
    isSource: true,
    isTarget: true,
    maxConnections: -1,
    connector: ["Bezier", {
      cssClass: "connectorClass",
      hoverClass: "connectorHoverClass"
    }],
    connectorStyle: {
      gradient: {
        stops: [[0, exampleColor], [0.5, '#09098e'], [1, exampleColor]]
      },
      strokeWidth: 5,
      stroke: exampleColor
    },
    connectorHoverStyle: {
            stroke: "#449999"
        },
    connectorOverlays: [
            ["Diamond", { fill: "#09098e", width: 15, length: 15 } ]
        ]
  },
  {
    anchor: [
            [0.2, 0, 0, -1, 0, 0, "foo"],
            [1, 0.2, 1, 0, 0, 0, "bar"],
            [0.8, 1, 0, 1, 0, 0, "baz"],
            [0, 0.8, -1, 0, 0, 0, "qux"]
        ]
  }),
  firstInstance.draggable("obj1");
  firstInstance.draggable("obj2");
  firstInstance.draggable("obj3");
  }
});

<div class="object" id="obj1">
</div>
<div class="object" id="obj2">
</div>
<div class="object" id="obj3">
</div>

.object {
  border: 10px solid #ff0000;
  width: 100px;
  height: 100px;
  position: absolute;
}

#obj2 {
  border-color: green;
  left: 150px;
}

#obj3 {
  border-color: yellow;
  left: 350px;
}