Is there an XML Renderer For Draw.io Graphs

Question

Is there an embedded viewer for the Draw.io XML format?

Here is an example of the file:

<mxfile 
    userAgent="Mozilla/5.0 (Windows NT 10.0; Win64; x64)
    AppleWebKit/537.36 (KHTML, like Gecko)
    Chrome/58.0.3029.81 Safari/537.36" 
    type="device" version="6.6.0" editor="www.draw.io">
    <diagram name="Page-1">
        jVJNU4MwEP01uZekor1aq148cfC8wkIyBsIkQcBfbygbPqbTGbmw+/
        bzvSwT53p4s9DKD1OgZvxQDEy8MM6TI0/Db0LGGXnkhxmorCooaQUy
        9YsExrROFeh2id4Y7VW7B3PTNJj7HQbWmn6fVhq9n9pChTdAloO+RT
        9V4SWhSXpaA++oKkmjnyLhL8i/K2u6huYxLsrrN4driL2IqJNQmH4D
        iQsTZ2uMn616OKOetI2yzXWvd6LL3hYb/5+CI1X8gO6Iu3NQgqOFnR
        +jJr1UHrMW8snvw7sz8Sx9rYOXBJP6oPU43F0mWSiG00FTo7djSKEC
        cSJV6Gr4A/n95g2icnIjf0oY0LNXS+uVejCIfXRXla+xzSmLyx8=
    </diagram>
</mxfile>

Initial Thoughts

• It looks like it could be some kind of proprietary format
• Base64 content?
• Not sure

It would be nice to be able to display the graph on a web-page and edit the same file with Draw.io, instead of exporting versions out to static formats.

Any suggestions would be helpful

Answer 1

The default format for saving diagrams was changed some time ago from raw XML to XML compressed using standard deflate. The main reason for this was that when Google’s server are struggling a compressed file has a much better chance of writing.

That said, the raw XML makes people feel that they can actually see their data, what you get currently is something like:

<mxfile userAgent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:33.0) Gecko/20100101 Firefox/33.0" type="device"><diagram>dZFBr4MgEIR/DccmCi/Gnq19vfTkoWciq5KgGMRE++sFXWpI0xPLNzi7sxJW9Mu/4WP31AIUoYlYCLsRStP8L3OHJyuSlF4P0hopkJ2gkm9AmCCdpYApemi1VlaOMaz1MEBtI9ZoFbcYeRvsT1DVXH3TlxS2O2hOMYTnD5BtF9qkGYaZ7Bo8BDR8VvayI6d5uefBa0/FSrcyo7Wz8VW/FKD82sJCjuj3H+pnSAMDDhJ94IrT212if8PKDQ==</diagram></mxfile>

The part between the tags is compressed with a completely standard deflate (with a Base64 encode before the deflate to make the character set compatible and a URL encode after to make it transmittable). Copy and paste it to https://jgraph.github.io/drawio-tools/tools/convert.html, press decode and you’ll get your raw XML back.

As for a viewer, draw.io does have one supplied, https://www.draw.io/js/viewer.min.js. But you can get the embedded viewer setup for you via File->Embed->HTML. You see this dialog at that point:

Ensure "include a copy of my diagram" is ticked to embed the compress data in your page and "show edit button" will display an edit button on the viewer, if the user clicks it they will go to draw.io with an editable copy of that diagram loaded.

Answer 2

You can use CyberChef to decode the data inside the tags:

https://gchq.github.io/CyberChef/#recipe=From_Base64('A-Za-z0-9%2B/%3D',true)Raw_Inflate(0,0,'',false,true)URL_Decode()XML_Beautify('%5C%5Ct')Syntax_highlighter('xml')

Answer 3

There is a Google Chrome App that will allow viewing and editing a Draw.io diagram .xml file.