3

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.

ekrekeler
  • 122
  • 1
  • 7

2 Answers2

4

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

Godric
  • 769
  • 7
  • 18
  • Yes, this looks like what I need. I will try it out and see if I can get it to work. – ekrekeler May 24 '19 at 17:40
  • 1
    Just providing a bit more info. In PNG, it seems like "textual comments" can be stored - https://en.wikipedia.org/wiki/Portable_Network_Graphics. Specifically, note the `zTXt` field. The 2 source code files mentioned above have `zTXt` referenced inside. Coincidence? I think not :) – Raghuram Krishnaswami Mar 04 '22 at 12:14
0

XML data cannot be extracted from PNG as it is rasterized compressed pixel data. I think the format you are looking for is SVG which is an XML based image format. Using an SVG image you will be able to do whatever you need with the XML inside the file or just upload the svg.

In draw.io you will need to export as svg.

File > Export as > SVG...

enter image description here

Hope this helps.

KpTheConstructor
  • 3,153
  • 1
  • 14
  • 22
  • This would solve the issue I'm having if the docs site let me upload SVGs. I just tried and it does not. I'll make sure to put that in my question as well. – ekrekeler May 24 '19 at 14:29
  • 2
    Also, there has to be some sort of XML data in the exported PNG as I am able to reupload the PNG to draw.io to make additional edits. – ekrekeler May 24 '19 at 14:29
  • 4
    We embed the diagram data in the compressed text section of the PNG (ZTXT). – Frodo Baggins May 25 '19 at 21:26
  • the png format embed the xml code (if you select it) https://about.draw.io/choose-export-diagram-format/ – rupat Dec 02 '19 at 06:39