Export a diagram to various file formats

You can export your diagrams to various types of images, files of different types, and even encode your diagram into a URL. The type of file that you choose to export to will depend on how you want to use it.

  • .drawio and .xml save file formats contain your full diagram, and can be opened in draw.io.
  • .png, .svg and .jpeg are image file formats that you can use in documents, presentation slides or on web pages.
  • .webp is an image file format designed for small file sizes for web pages.
  • .html creates HTML code which embeds your diagram on a web page.
  • .pdf generates a PDF document.

Compare embed and export formats and their requirements

Tip: You can choose to embed the diagram data in PNG, SVG, and PDF files so that they can be opened in the draw.io editor as the diagram.

If you have set a background colour or background image, it will be included when you export your diagram.

Export your diagram to an image

You can export the current drawing canvas to an image: PNG, JPEG or SVG. JPEG are most commonly used in web pages. PNG and SVG images are scalable (resizeable) and work well in documents and presentation slides. SVG images support animated connectors.

  1. Select File > Export as (or just Export As from the Simple mode menu) then choose the image format you want to generate - PNG, JPEG, WebP, or SVG.
    Select File > Export then choose the image format you want to export your diagram to
  2. Each image format will offer you slightly different options, see below for details. Select the options you want, then click Export.

Tip: If you want to include the editor grid in your image, enable the Grid checkbox.

Export as a PNG

PNGs are used in web pages, documents and presentation slides.

  • Change the PNG export options to suit your requirements.
  • Enable the Selection only checkbox to export just the selected shapes and connectors
  • Ensure Include a copy of my diagram is enabled to be able to open your diagram and edit it when you import the PNG file to draw.io.
    Choose the export settings for the PNG image

Export as a JPEG

JPEG image files cannot contain your diagram data - only an image version of the page you are exporting.

  • Change the JPEG export options to suit your requirements.
  • If you only want to export the shapes and connectors that are currently selected, enable the Selection only checkbox.
    Choose the export settings for the JPEG image

Export as a WebP

WebP image files cannot contain your diagram data - only an image version of the page you are exporting.

  • Change the WebP export options to suit your requirements.
  • If you only want to export the shapes and connectors that are currently selected, enable the Selection only checkbox.
    Choose the export settings for the JPEG image

Export as a SVG

SVG images can include your diagram data, as well as any links you’ve added to shapes.

  • Choose the SVG export settings to suit your requirements.
  • To be able to open and edit your diagram, keep the Include a copy of my diagram checkbox enabled.
  • By default Links will open following the viewer’s browser preferences. Select a different behaviour if you want links to always open in a new tab or a new browser window.
    Choose the export settings for the SVG image

Troubleshoot exported text that is not rendered correctly.

Export to a PDF file

When you export your diagram to a PDF file, you can include a copy of your diagram data, so that when you drop that file onto the draw.io editor, it will open your diagram for editing.

Learn more about exporting to PDF files

  1. Select File > Export As > PDF.
  2. Change the PDF export settings to suit your requirements, then click Export.
    Change the export settings when exporting to a PDF

Tip: If File > Export as > PDF throws an error, you can try File > Print, click on _All pages then on Print. Finally, in the printer settings dialog that appears, choose Print to PDF or Save as PDF.

Export to a VSDX file

  1. Select File > Export As > VSDX (beta).
  2. Enter a Filename, then click on one of the save locations, or click Download to save the .vsdx file to your device.
    Export your diagram as a VSDX, and choose where to save the exported VSDX file

Depending on your browser, you may be prompted to open it with a default program, or simply save the file.

Note: Images in your diagram, such as clipart, may not be embedded in the .vsdx file.

Export to HTML

You can embed a diagram in a web page or in any online platform that can render HTML.

Diagrams exported to HTML files/code are rendered in the draw.io viewer by calling a JavaScript hosted on the draw.io server. You’ll need a working internet connection for the diagrams to be displayed properly.

  1. Select File > Export as > HTML.
  2. Change the HTML export settings to suit your requirements, then click Export.
    Options when exporting your diagram to a HTML file
  3. Choose where you want to save the HTML file.

Learn more about exporting to HTML and embedding your diagram on a web page

Export to XML

  1. Select File > Export as > XML.
  2. Change the XML export settings to suit your requirements, then click Export.
    Choose the export settings when exporting a diagram as an XML file
  3. Enter a Filename, then click on one of the save locations, or click Download to save the XML file to your device.
    Choose where to save your exported XML file

Depending on your browser, you may be prompted to open it with a default program, or simply save the file.

Export your diagram as a URL

When exporting your diagram to a URL, the diagram data is encoded in the link and it is not stored as a file anywhere.

  1. Select File > Export as > URL.
  2. Change the URL export settings to suit your requirements, then click Export.
    Select the export options to export a diagram to a URL
  3. Copy the URL to share it by email or chat, or click on the Facebook button to add the link to a new post in a new browser tab. Click on Preview to open the link in a new tab. Click Close to return to the diagram editor.
    The address created when you export your diagram as a URL is very long

Export using the advanced options

  1. Select File > Export as > Advanced to see some additional export options that can be applied to PDF and image files. Depending on the Format you choose, some options may be disabled.
    • Enter a Filename and select the export Format from the drop down list.
    • Change the Zoom percentage, set a Width and Height for the resulting image/PDF file.
    • Change the DPI setting to output a higher quality image.
    • Set a Transparent background and change the Border Width.
    • Enable Grid if you want to include the drawing canvas grid.
      Change the advanced export settings when exporting PDF and image files
  2. Click Export to create a file of the format you chose, then select a location to save the file.