¿Podemos exportar un diagrama de flujo JsPlumb como JSON o XML?

Question

Jul 12, 2013, 06:27 AM

¿Podemos exportar un diagrama de flujo JsPlumb como JSON o XML?

He creado un diagrama de flujo JSPlumb. Ahora, quiero exportar este diagrama de flujo a su script JSON o XML correspondiente para guardar y realizar varias operaciones. ¿Qué es más compatible? Cualquiera de los dos está perfectamente bien. Por favor, ilumíname sobre esto. El código JsPlumb que desarrollé (con la ayuda de varios sitios) es el que figura a continuación.

<html>
<head>
    <title>Example</title>
            <script type="text/javascript" src="Jquery\jq.js"></script>
                <script type="text/javascript" src="Jquery\jq-ui.min.js"></script>  
    <script type="text/javascript" src="jsPlumb-master\build\demo\js\jquery.jsPlumb-1.4.1-all-min.js"></script>
</head>
<body>

<div  id="main">
    <div id="block1" class="node">node 0</div>
    <div id="block2" class="node">node 1</div>
    <div id="block3" class="node">node 2</div>
    <div id="block4" class="node">node 3</div>  
</div>

    <script type="text/javascript">

                var targetOption = {anchor:"TopCenter",
                                                    maxConnections:-1,
                                                    isSource:false,
                                                    isTarget:true,
                                                    endpoint:["Dot", {radius:8}],
                                                    paintStyle:{fillStyle:"#66FF00"},
                                                        setDragAllowedWhenFull:true}

                var sourceOption = {anchor:"BottomCenter",
                                                        maxConnections:-1,
                                                    isSource:true,
                                                    isTarget:false,
                                                    endpoint:["Dot", {radius:8}],
                                                    paintStyle:{fillStyle:"#FFEF00"},
                                                        setDragAllowedWhenFull:true}


                       jsPlumb.bind("ready", function() {

                        jsPlumb.addEndpoint('block1', targetOption);
                        jsPlumb.addEndpoint('block1', sourceOption);

                        jsPlumb.addEndpoint('block2', targetOption);
                        jsPlumb.addEndpoint('block2', sourceOption);

                        jsPlumb.addEndpoint('block3', targetOption);
                        jsPlumb.addEndpoint('block3', sourceOption);

                        jsPlumb.addEndpoint('block4', targetOption);
                        jsPlumb.addEndpoint('block4', sourceOption);

                        jsPlumb.draggable('block1');
                        jsPlumb.draggable('block2');
                        jsPlumb.draggable('block3');
                        jsPlumb.draggable('block4');                        
                });

     </script>

    <style type="text/css">
        .node {
    border:1px solid black;
    position:absolute;
    width:5em;
    height:5em;
    padding: 0.5em;
    z-index:1;
    border-radius:0.5em;
    box-shadow: 2px 2px 19px #aaa;
    background: white;
    }

    #node0 { top:10em; left:22em;}
    #node1 { top:15em; left:32em;}

    </style>



</body>
</html>

Muchas gracias por adelantado.