Search code examples
javascripthtmlxmldraw.io

How to programatically extract XML data from draw.io PNG

Long story short, I want to be able to extract the XML data from a PNG saved from draw.io using PHP or JavaScript in the browser.

I am using draw.io images with layers to document physical connections between network devices. The documentation site is an internal site running a dokuwiki instance that I do not have administrative rights to. I can upload my exported PNG files to the site, but I am not allowed to upload TXT, XML, or SVG files. For whatever reason, I can embed HTML, PHP, and JavaScript on pages. I am at the point where I can paste the HTML embed code, but this significantly slows down the browser when editing a page to the point where I am unable to make any further changes once I've pasted the embed code.

My intended solution for this would be to use PHP or JavaScript to extract the XML data from an uploaded PNG. Pretty much the opposite of this ask. Then, I would insert it into the embed code on the page.

Here is the embed code I would be using:

<div
  class="mxgraph"
  style="max-width:100%;border:1px solid transparent;"
  data-mxgraph="{&quot;highlight&quot;:&quot;#0000ff&quot;,&quot;nav&quot;:true,&quot;resize&quot;:true,&quot;toolbar&quot;:&quot;zoom layers lightbox&quot;,&quot;edit&quot;:&quot;_blank&quot;,&quot;xml&quot;:&quot;_INSERT_XML_DATA_HERE_&quot;}">
</div>

<script
  type="text/javascript"
  src="https://www.draw.io/js/viewer.min.js">
</script>

I don't know enough JavaScript to figure out how draw.io is able to do this when opening from a PNG, but some example code on how it works or even a link to where this happens in the source code would be helpful.

Solution

  • If Draw.io can do, you can do it too! But I think it is possible only if you selected Include a copy of my diagram option while exporting to PNG. With this option Draw.io save additional data in PNG(you can take a look at writeGraphModelToPng.

    But more interesting for you will be extractGraphModelFromPng