title: Save and Load jsPlumb flowchart including exact anchors and connections
body: <p>This is the <a href="http://jsfiddle.net/t3nbL/1/" rel="noreferrer">jsFiddle</a> of the flowchart editor I am building.</p>
  
  <p>This is an example of what can be easily created with "Add Decision" + "Add Task", connecting and moving the elements.</p>
  
  <p><img src="https://i.stack.imgur.com/aRhev.png" alt="Example flowchart - user configured"></p>
  
  <p>Now for the hard part: I want to be able to save and load the exact flowchart. For this I got started based with a <a href="https://stackoverflow.com/questions/7405637/save-and-load-a-flowchart-on-jsplumb">similar thread</a> here at Stackoverflow.</p>
  
  <p>For this I added the "Save" and "Load" buttons that export/import the flowchart to/from JSON (shown in a textform in the jsFiddle after save - same textform can be used for loading). </p>
  
  <p>The <strong>save function</strong>:</p>
  
  <pre><code>function saveFlowchart(){
              var nodes = []
              $(".node").each(function (idx, elem) {
              var $elem = $(elem);
              var endpoints = jsPlumb.getEndpoints($elem.attr('id'));
              console.log('endpoints of '+$elem.attr('id'));
              console.log(endpoints);
                  nodes.push({
                      blockId: $elem.attr('id'),
                      nodetype: $elem.attr('data-nodetype'),
                      positionX: parseInt($elem.css("left"), 10),
                      positionY: parseInt($elem.css("top"), 10)
                  });
              });
              var connections = [];
              $.each(jsPlumb.getConnections(), function (idx, connection) {
                  connections.push({
                      connectionId: connection.id,
                      pageSourceId: connection.sourceId,
                      pageTargetId: connection.targetId
                  });
              });
  
              var flowChart = {};
              flowChart.nodes = nodes;
              flowChart.connections = connections;
              flowChart.numberOfElements = numberOfElements;
  
              var flowChartJson = JSON.stringify(flowChart);
              //console.log(flowChartJson);
  
              $('#jsonOutput').val(flowChartJson);
          }
  </code></pre>
  
  <p>The resulting JSON of the example above:</p>
  
  <blockquote>
    <p>{"nodes":[{"blockId":"startpoint","nodetype":"startpoint","positionX":273,"positionY":8},{"blockId":"endpoint","nodetype":"endpoint","positionX":310,"positionY":385},{"blockId":"taskcontainer1","nodetype":"task","positionX":381,"positionY":208},{"blockId":"decisioncontainer2","nodetype":"decision","positionX":261,"positionY":103}],"connections":[{"connectionId":"con_18","pageSourceId":"decisioncontainer2","pageTargetId":"taskcontainer1"},{"connectionId":"con_25","pageSourceId":"taskcontainer1","pageTargetId":"endpoint"},{"connectionId":"con_32","pageSourceId":"decisioncontainer2","pageTargetId":"endpoint"},{"connectionId":"con_46","pageSourceId":"startpoint","pageTargetId":"decisioncontainer2"}],"numberOfElements":2}</p>
  </blockquote>
  
  <p>With that I am able to save the position of the elements as well as part of the information of the connections. 
  Here the <strong>load function</strong>:</p>
  
  <pre><code>function loadFlowchart(){
              var flowChartJson = $('#jsonOutput').val();
              var flowChart = JSON.parse(flowChartJson);
              var nodes = flowChart.nodes;
              $.each(nodes, function( index, elem ) {
                  if(elem.nodetype === 'startpoint'){
                      repositionElement('startpoint', elem.positionX, elem.positionY);
                  }else if(elem.nodetype === 'endpoint'){
                      repositionElement('endpoint', elem.positionX, elem.positionY);
                  }else if(elem.nodetype === 'task'){
                      var id = addTask(elem.blockId);
                      repositionElement(id, elem.positionX, elem.positionY);
                  }else if(elem.nodetype === 'decision'){
                      var id = addDecision(elem.blockId);
                      repositionElement(id, elem.positionX, elem.positionY);
                  }else{
  
                  }
              });
  
              var connections = flowChart.connections;
              $.each(connections, function( index, elem ) {
                   var connection1 = jsPlumb.connect({
                      source: elem.pageSourceId,
                      target: elem.pageTargetId,
                      anchors: ["BottomCenter", [0.75, 0, 0, -1]]
  
                  });
              });
  
              numberOfElements = flowChart.numberOfElements;
          }
  </code></pre>
  
  <p>However, the exact position of the anchors and connections are lost. Same example again, the result after deleting the elements and then loading the exported JSON:</p>
  
  <p><img src="https://i.stack.imgur.com/DxnJq.png" alt="Flowchart after loading JSON"></p>
  
  <p>This comes not as a big surprise as I have not yet stored the information. But I am stuck at this point.</p>
  
  <p><strong>My question is:</strong> which information regarding the anchors/connectors position do I need to store for the whole flowchart design and how I can extract it from (&amp; load into it again) jsPlumb?</p>