How to Export draw.io Diagrams to PDF, PNG and SVG
A diagram only helps when people can see it. Learn how to export a draw.io diagram as a PNG for slides, a PDF for documents and an SVG for the web, and which one to pick, using a small leave request process.
Step by step
Share your diagram
- Export from draw.io. A diagram helps only when people can see it, in slides, a Word document or a wiki page. The right export format keeps it sharp. We'll draw a small leave request process and export it from draw.io.
- Blank diagram. Start a blank diagram in draw.io.
A small diagram
- A small diagram. First, make something to export. From the General shapes, drag an Ellipse onto the page for the start and type Leave requested. Add a Rectangle for the step and type Approve leave. Hover over Leave requested, then drag its blue arrow onto Approve leave. draw.io draws a connector between them. Add another Ellipse for the end and type Leave booked. Connect Approve leave to Leave booked the same way. The 3-shape process is now ready to export.
- Nothing selected. Click an empty spot on the page so nothing is selected. If a shape is still selected, the export can hold only that shape instead of the whole diagram.
PNG
- PNG for slides. Open File > Export as > PNG. The dialog lets you set the zoom, the border width and a transparent background. Click Export, name the file Leave process and save. A PNG is a picture, so it drops straight into slides and chats.
- PDF for documents. Next, open File > Export as > PDF. Use this for documents people print or sign off, because the text stays sharp at any zoom. Click Export, name it Leave process and save.
SVG
- SVG for the web. Last, open File > Export as > SVG and save it as Leave process. An SVG is drawn with lines, not dots, so it stays crisp in a wiki or on a web page however big it gets.
- Pick the format. All 3 files come from the same diagram. To change Approve leave or any other shape, edit the draw.io diagram once, then export again.
- Ready to share. Click away from the shapes to see the finished diagram, ready to share.
Recap
- The rules. The rules: click an empty spot before you export. Use PNG for slides and chats, PDF for documents and SVG for wikis and the web. Keep the draw.io file as the one you edit.
Common mistakes
- Exporting while a shape is still selected. The exported file can end up holding only that one shape. Click an empty spot on the page first, then open File > Export as.
- A blurry PNG in a document or on a big screen. A PNG is made of dots, so it goes soft when you stretch it. Raise the zoom in the PNG dialog before you export, or use PDF or SVG when it needs to stay sharp.
- A transparent PNG on a dark slide. Black lines and text almost disappear on a dark background. Untick the transparent background, or check the image on the real slide before you send the deck.
- Editing the exported file instead of the diagram. PNG, PDF and SVG files are copies for sharing. Make every change in the draw.io file, then export again so all the copies match.
When a business analyst uses this
After a process mapping workshop, a business analyst draws the leave request process once in draw.io. They export a PNG for the playback slides, a PDF to attach to the sign-off document and an SVG for the team wiki page, and they keep the draw.io file as the single version they update.
Questions people ask
Which draw.io export format is best for PowerPoint slides?
PNG. It is a picture, so it drops straight into slides and chats. Raise the zoom in the export dialog if it needs to fill a big screen.
Why does my draw.io export only show one shape?
A shape was still selected when you exported, so only that shape was exported. Click an empty spot on the page and export again.
What is the difference between PNG and SVG in draw.io?
A PNG is made of dots and goes blurry when you enlarge it. An SVG is drawn with lines, so it stays crisp at any size on a wiki or web page.
