Which format should I export a diagram to?

As with most drawing tools, you can export to a wide range of formats with draw.io. Right now, you can export a diagram to:

• Diagramming tool formats: .xml and .vsdx
• Document formats: .pdf and .html
• Vector graphics format: .svg (with embedded XML)
• Image formats: .png (with embedded XML) and .jpeg

Plus you can publish a diagram directly to a URL to easily share it with someone online.

Export to a diagram format

Exported .xml files can be compressed to have a smaller file size. If you want to send a diagram to a colleague, they can open the exported XML file (compressed or plain) with draw.io. Exported .vsdx files can be opened in the Microsoft diagramming tool.

Export to a document format

A PDF version of your diagram may be more appropriate for printed infographics or other diagrams that standalone, without any supporting text. Note that since 2018 export to PDF supports multiple page export, as well as links on shapes or text and selectable text.

Exporting a diagram to HTML or a URL makes it easy to publish on the web or embed in a web page. You can zoom in and out, see multiple pages and layers, collapse and expand elements. This does require JavaScript to function, and it is not as fast to load as some of the pure-image formats.

Export to a vector graphics format

SVG is ideal for using in other vector graphics programs that can’t import draw.io .xml files. Because it uses vectors, it scales nicely and it can contain links. Although it has all the information for multiple pages in a diagram, it will only display the first page. Drop a exported multi-page .svg file back into draw.io to see all of the pages.

Note: HTML and SVG formats are not as secure as image formats (they can be edited with a text editor to contain executable JavaScript code).

Word wrap and formatted labels look a bit odd? You’re probably looking at an exported SVG files in Internet Explorer 11 or older, an SVG editor, or WordPress, all which do not fully support complex HTML labels. To work around this, you need to disable the formatting before you export your draw.io diagram to SVG.

Export to an image format – but which one?

All of the formats listed above require that the custom fonts you have used in the diagram be installed on the device where the exported diagram will be viewed (apart from PDF files). That means, if you have used a funky font, and the person doesn’t have it installed, it will default to a font that is installed and change how your diagram looks. To get around this, you can export to an image format.

Image formats are simple – they can’t contain anything fancy. They can’t contain any links, layers, multiple pages and won’t scale with crisp lines. You can’t zoom or collapse/expand elements. But they are fast to load!

JPEGs are best used for photographic or realistic images. You will often see distortion around crisp lines, gradient colors, and text in .jpeg images, especially when you scale the image to a different size (below).

PNG is much better for diagrams, especially those which contain text. As long as your diagram doesn’t contain many colours or realistic/photographic elements, the file size will remain small and load quickly. If you include a copy of the diagram in the exported .png file, you can open it again with draw.io, however, it does increase the file size slightly.

To include a static draw.io diagram in a web page, we recommend you export your draw.io diagram to a PNG image file.

Do I need to worry about accessibility?

If you are publishing your diagram on the web or in your intranet, and you want the text to be searchable, then you shouldn’t use a plain image. Because image formats only contain ‘pixels’ and no text information, search engines and search tools in intranets to index, so they won’t show up in searches. That’s why you should always add alt tags to your plain images when you publish them online. Titles and captions also help your images to be found when someone searches for them.

HTML, PDF and SVG formats contain text which can be indexed, searched for and read aloud – these formats are more accessible than pure images.

draw.io export format comparison

Quickly compare the different draw.io export formats, commonly used to display diagrams online with the table below.