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

Here is an example of the file:

    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">

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

3 Answers 3


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:

draw.io embed HTML dialog

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.

  • Thanks David, I really appreciate the explanation. Works pretty well, I'll see if I can link the diagram xml file so it loads it into the view. Thanks again! Commented May 21, 2017 at 10:20

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



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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.