How to get the XML from mxGrpah diagram?

Question

• Pointed index.html from mxGraph diagram sample
• Able to draw the diagrams using editor
• Enabled local storage
• Able to get the XML from loc

Answer 1

Well in the www/index.html where it seems your example to be taken from it is not very clear to me where the Graph exists so you can retrieve it but I propose you the following workaround to solve your problem:

1) Add an extra variable holding the "xml" state of the graph which you can retrieve any time

In the /examples/grapheditor/www/js/Graph.js add the following variable

Graph.xml = "";

2) On the this.graph.click event of Graph.js add code to retrieve to update the Graph.xml variable holding the xml state of the graph each time there is a change so instead of

this.graph.click = mxUtils.bind(this, function(me)
{
    graphClick.apply(this.graph, arguments);

    if (this.currentState != null && !this.graph.isCellSelected(this.currentState.cell) &&
        mxEvent.isTouchEvent(me.getEvent()) && !this.graph.model.isVertex(me.getCell()))
    {
        this.reset();
    }
});

add the following:

this.graph.click = mxUtils.bind(this, function(me)
{
    let encoder = new mxCodec();
    let result = encoder.encode(this.graph.getModel()); //where graph is the object you are using
    Graph.xml  = mxUtils.getXml(result);

    graphClick.apply(this.graph, arguments);

    if (this.currentState != null && !this.graph.isCellSelected(this.currentState.cell) &&
        mxEvent.isTouchEvent(me.getEvent()) && !this.graph.model.isVertex(me.getCell()))
    {
        this.reset();
    }
});

So when you want the xml state of the canvas you should call the Graph.xml, this worked for me in a local environment