Save And Load Jsplumb Flowchart Including Exact Anchors And Connections

This is the jsFiddle of the flowchart editor I am building. This is an example of what can be easily created with 'Add Decision' + 'Add Task', connecting and moving the elements.

Solution 1:

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.