Este es eljsFiddle del editor de diagrama de flujo que estoy construyendo.

Este es un ejemplo de lo que se puede crear fácilmente con "Agregar decisión" + "Agregar tarea", conectando y moviendo los elementos.

Ahora, para la parte difícil: quiero poder guardar y cargar el diagrama de flujo exacto. Para esto comencé basándome con unhilo similar aquí en Stackoverflow.

Para esto, agregué los botones "Guardar" y "Cargar" que exportan / importan el diagrama de flujo a / desde JSON (que se muestra en una forma de texto en el archivo jsFiddle después de guardar - se puede usar la misma forma de texto para cargar).

losfunción de guardar:

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);
        }

El JSON resultante del ejemplo anterior:

{"nodos": [{"blockId": "startpoint", "nodetype": "startpoint", "positionX": 273, "positionY": 8}, {"blockId": "endpoint", "nodetype": " punto final "," 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}

Con eso puedo guardar la posición de los elementos, así como parte de la información de las conexiones. Aquí elfunción de carga:

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;
        }

Sin embargo, la posición exacta de los anclajes y conexiones se pierden. El mismo ejemplo de nuevo, el resultado después de eliminar los elementos y luego cargar el JSON exportado:

Esto no es una gran sorpresa ya que aún no he almacenado la información. Pero estoy atascado en este punto.

Mi pregunta es: ¿Qué información sobre la posición de los anclajes / conectores necesito almacenar para el diseño completo del diagrama de flujo y cómo puedo extraerlo (y cargarlo de nuevo) jsPlumb?