Exporting to Visual Formats

Using draw.io, it is possible to export to a number of different visual formats.



There are two main types of formats. Those that retain all the editing information once they have been exported and those that do not. Those that do no, in effect, cease to be draw.io diagrams once they are exported, they are useful only for viewing.

Exporting to XML

The two XML formats are, funnily, the XML diagram data, either compressed or raw XML. The compressed version is smaller, the non-compressed is human-readable.  The XML formats can be re-imported into draw.io and manipulated like any other diagram. The compressed XML format is what you produce when you save a diagram ( as opposed to export ).

If you want to deflate a compressed XML file manually and obtain the diagram XML, copy and paste the character sequence between the diagram tags <diagram>.....</diagram> into this converter and press decode to obtain the XML.

When you export to XML you will see this dialog:



This is the standard export location dialog for all export options. You can rename the exported file here and click to select where you wish to save to.

Exporting to PNG Image

The Image option generates a PNG raster image (PNG is generally more suitable then JPG for diagrams). The image export dialog (can vary slightly by browser):



It gives you options for a transparent background and shadows, which are self-explanatory.

Zooming allows you to create an image that differs from your diagram natural size

"Selection only" just shows the selected shapes in your diagram in the export.

Including a copy of the diagram in the image means you can load the diagram back into draw.io using the exported PNG and have a fully editable diagram, rather than a static PNG (i.e. the diagram data is embedded in the PNG). We enable this by default since it can be a useful way to restore a diagram if you lose the XML save. It does increase the size of the PNG, so if you really don't need the data embedded, you can untick this option.

To export an image for retina screens, choose 200% for the zoom and resize the resulting image to match the original image size.

Exporting to Vector Image

There are 3 options for a vector representation of a diagram, SVG, PDF and HTML.


Export to SVG has similar options to export to PNG, including the ability to embed a diagram in the SVG.

SVG also offers the option to embed externally linked images in the SVG. Some SVG viewers have problems loading and rendering external images, this option adds the actual image data to the SVG to ensure they can be viewed (but increases the SVG file size).

The SVG export is standard SVG, but if you have HTML labels in the diagram (complex, formatted labels), these are rendered as HTML on foreign objects in SVG. Some SVG viewers, like Internet Explorer 11 and earlier do not support foreign objects in SVG. All other major browsers, including Edge, do support them.


Export to PDF only has 1 option, crop:



Exporting without crop creates pages corresponding to the pages seen when page view is enabled on a diagram. Enabling crop removes the whitespace around the diagram in non-crop mode, i.e. the diagram just fits the PDF.


Exporting to HTML create a complete HTML web page with the diagram data embedded. Note that this page calls the www.draw.io domain to load the viewer that renders the diagram. This is similar to the File->Embed option, just it creates the full HTML page for you as well.

Advanced Options

The Advanced option allow you to customize certain visual aspects of an output unavailable in some of the other options:



Namely, the background color of the output, the exact pixel dimensions and the margin around the output. The color is a hex color code, you can use a site like this one to generate a code. Enabling transparency overrides the background color.

You can generate a JPEG output here if needed (there is rarely a good reason not to use PNG).

See also: Comparing Embed/Export Formats