With the help of How to get the XML from mxGrpah diagram? able to get the dynamic XML from the graph editor. Now, I need to display the diagram by loading a XML (reverse algorithm)

With the help of How to get the XML from mxGrpah diagram? able to get the dynamic XML from the graph editor. Now, I need to display the diagram by loading a XML (reverse algorithm)

• javascript
• php
• mxgraph

Share Improve this question Follow asked Jul 17, 2019 at 12:01 BalaBala 65877 silver badges2222 bronze badges 1

• This question is already answered in mxgraph-create-graph-with-xml hier is my answer mxgraph-create-graph-with-xml using Grapheditor aproach – Grisha Commented Jul 23, 2024 at 6:43

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Many thanks @NickAth, Also, I tried my own analysis found that the following solution is working fine.

var xml = {xml};
var ui = new EditorUi(new Editor());
var doc = mxUtils.parseXml(xml);
ui.editor.setGraphXml(doc.documentElement);

Ok, similarly to How to get the XML from mxGrpah diagram? answer, it is not again clear to me how to get the graph object in which the whole graph is saved so I propose the following workaround:

1) Get the reference of the original graph object into your index.html code

i. Add a global variable into index.html to get the reference of the graph object

var universalGraph;

ii. Go into a .js file where the graph object has already been created (for example go to js/view/mxGraphView on installListeners function and assign the instance of the graph object to your global accessible reference

mxGraphView.prototype.installListeners = function(){
var graph = this.graph;
var container = graph.container;
universalGraph = graph; //this way, you will have access from .index.html to the graph object and you will be able to import the xml as shown in the example here https://stackoverflow./questions/56664578/mxgraph-save-functionality-not-working-locally/56735153#56735153 

As you will see, now the solution with the global Graph.xml was proposed here is redundant since now this way you will have always access into the graph object :) .

2) Since you have now the graph object, you can use it for any purpose you wany (export/import the xml state)

EDIT

I post also an example of how you should upload the xml in index.html

function uploadXML(){
        let xml = '<thexml_you_got_from_the_export><thexml_you_got_from_the_export/>';
        let doc = mxUtils.parseXml(xml);
        let codec = new mxCodec(doc);
        codec.decode(doc.documentElement, universalGraph.getModel());
        let elt = doc.documentElement.firstChild;
        let cells = [];
        while (elt != null)
        {
            let cell = codec.decode(elt)
            if(cell != undefined){
                if(cell.id != undefined && cell.parent != undefined && (cell.id == cell.parent)){
                    elt = elt.nextSibling;
                    continue;
                }
                cells.push(cell);
            }
            elt = elt.nextSibling;
        }
        universalGraph.addCells(cells);

    }