Embedded XML in PNG image files

draw.io 27 Apr 2020


The PNG image file format supports embedded metadata in a number of ways. draw.io can export a PNG image of your diagram and include the diagram itself in the image, by including the XML code in the zTxt section of the image file.

Embedding the diagram as metadata in an image lets you more easily transfer the file between products, vendors, and platforms without data loss. By including the diagram, the image retains all of the data necessary to continue working on it in the draw.io online diagram editor.

Open a diagram embedded in a PNG

Drag a .png file with the embedded diagram data onto the draw.io drawing canvas to keep editing it as you would a .drawio or .xml version of your diagram.

Note: Some popular image sharing sites may resample PNG images, stripping any unnecessary non-image data from the uploaded file to save space.

Save a diagram as a PNG

When you save your diagram as a PNG image, the XML of your diagram is included by default.

  1. Select File > Save as from the menu.
    Select File > Save as to save your diagram as a PNG image
  2. Select Editable Bitmap Image (.png) from the drop down list next to the file name.
    Select Editable Bitmap Image (.png) to save your diagram as a PNG image
  3. Click on the location to which you want to save the PNG image file.

Export a PNG file with diagram data

  1. Select File > Export As > PNG.
    Export a diagram as a PNG from draw.io
  2. Choose the options you need for the image, and make sure the checkbox for Include a copy of my diagram is enabled as well as All Pages if you also want to include the other diagram pages in the PNG file.
    Include your diagram data in the PNG file you export from draw.io
  3. Click Export, enter a filename, then select the location to which you want to save your diagram.

Tip: You can also embed your diagram data when you export a PDF file or an SVG image in the same way.

Follow us on GitHub, Twitter, Facebook.