xmlmxgraphfile-import

Open .drawio file in MxGraph Editor


How to open a .drawio XML file into MxGraph?

In MxGraph we can import an XML file. But the structure of the .drawio file and MxGraph file are completely different, although both are XML.


Solution

  • Yeah, Finally i found the way that how open draw io xml file in mxGraph. Before open we need to convert the draw io xml file into mxgraph xml file. Here using a decode function to convert draw io xml file into mxgraph xml file. Can use this decode method inside the xml call function.

    Decode(data) {

        function bytesToString(arr) {
            var str = "";
            for (var i = 0; i < arr.length; i++) {
                str += String.fromCharCode(arr[i]);
            }
            return str;
        }
        function parseXml(xml) {
            if (window.DOMParser) {
                var parser = new DOMParser();
                return parser.parseFromString(xml, "text/xml");
            } else {
                var result = createXmlDocument();
                result.async = "false";
                result.loadXML(xml);
                return result;
            }
        }
        function getTextContent(node) {
            return node != null
                ? node[node.textContent === undefined
                        ? "text"
                        : "textContent"]
                : "";
        }
        try {
            var node = parseXml(data).documentElement;
            if (node != null && node.nodeName === "mxfile") {
                var diagrams = node.getElementsByTagName("diagram");
                if (diagrams.length > 0) {
                    data = getTextContent(diagrams[0]);
                }
                data = atob(data);
                data = bytesToString(Pako.inflateRaw(data));
                data = decodeURIComponent(data);
            }
        } catch (e) {
            return;
        }
        if (data.length > 0) {
            this.LoadGraph("", this.SelectGraphCell, data);
        }