Search code examples
xmldiagrammxgraphdraw.io

How to load xml in to the draw.io diagram?


How to read an xml file to draw the graph.

my code line below for fetching the XML data like this. I need to all XML data into the var doc object for drawing the shape in the diagram

var doc = mxUtils.parseXml(STYLE_PATH+'/Test.xml');

full code below:

mxUtils.getAll([bundle, STYLE_PATH + '/default.xml'], function (xhr) {
                    // Adds bundle text to resources
                    mxResources.parse(xhr[0].getText());

                    // Configures the default graph theme
                    var themes = new Object();
                    themes[Graph.prototype.defaultThemeName] = xhr[1].getDocumentElement();
                    // Main
                    new EditorUi(new Editor(urlParams['chrome'] == '0', themes));
                    var ui = new EditorUi(new Editor());                
                    var doc = mxUtils.parseXml(STYLE_PATH+'/Test.xml');
                    ui.editor.setGraphXml(doc.documentElement);
                }, 

                    function () {
                        document.body.innerHTML = '<center style="margin-top:10%;">Error loading resource files. Please check browser console.</center>';
                    });

Solution

  • Resolved the issue, Now working for me.

    var ui = new EditorUi(new Editor());
    var xml_file_path = STYLE_PATH + '/Test.xml';
    
                var req = mxUtils.get(xml_file_path, mxUtils.bind(this, function (req) {
                    if (req.request.status >= 200 && req.request.status <= 299) {
                        if (req.request.response.length > 0) {
                            editorUi.editor.graph.model.beginUpdate();
                            try {
                                var xmlElem = mxUtils.parseXml(req.request.response).documentElement;
                                editorUi.editor.setGraphXml(xmlElem);
    
                            }
                            catch (e) {
                                console.error(e);
                            }
                            finally {
                                editorUi.editor.graph.model.endUpdate();
                            }
                        }
                    }
                }));