Save and Load jsPlumb flowchart including exact anchors and connections

See this JSFiddle for a solution.

You need to save the anchor details as follows. This conforms to the Anchor representation defined here. Note the double nesting to avoid the JQuery auto-flatten on the map.

    $.each(jsPlumb.getConnections(), function (idx, connection) {      connections.push({      connectionId: connection.id,      pageSourceId: connection.sourceId,      pageTargetId: connection.targetId,      anchors: $.map(connection.endpoints, function(endpoint) {        return [[endpoint.anchor.x,         endpoint.anchor.y,         endpoint.anchor.orientation[0],         endpoint.anchor.orientation[1],        endpoint.anchor.offsets[0],        endpoint.anchor.offsets[1]]];      })    });  });

...and load them, as follows:

    $.each(connections, function( index, elem ) {     var connection1 = jsPlumb.connect({      source: elem.pageSourceId,      target: elem.pageTargetId,      anchors: elem.anchors    });  });

Note that this solution does not preserve end-point details including the shape and type of end-points. It only preserves the anchor details, as you requested.