When you look at a draw.io diagram in our lightbox viewer, and not in our online diagram editor, hover the mouse over the diagram to see the viewer toolbar. Click on a tool to select which layers to display, zoom in and out, and step through the pages in a multi-page diagram. You can also export your diagram as a PNG image and print the diagram directly from the draw.io lightbox viewer using these tools.

The viewer toolbar lets you export a diagram as an image from the online draw.io application, as well as from the draw.io branded Atlassian integrations for Confluence and Jira Cloud and Server/Data Center that JGraph builds, delivers and maintains alongside the draw.io and desktop apps.

If you do not have the appropriate level of permissions to edit the Confluence page, Jira issue or the attached draw.io diagram, this is how to export it to a PNG image or print it to a PDF file without opening the draw.io editor.

Open a diagram in the viewer

In Confluence or Jira, click on the diagram thumbnail in the Confluence page or Jira issue to open it in the lightbox viewer.

When you publish a diagram from draw.io to a link or export it to a URL, by default, it will be set to open in the viewer. The same viewer will also open when you click on a diagram in a Confluence page or Jira issue.

To generate a link to open a diagram in the viewer

1. Click File > Publish > Link in the draw.io editor to generate that link. Alternatively, click on File > Export > URL.
2. Ensure the Lightbox checkbox is selected, and select Create.
   
3. Copy the resulting URL (link). Your diagram will be encoded into this link.
   

Note: Complex diagrams with many pages may not fit under the URL length limit. A workaround is to share a public link to the diagram stored on Google Drive or One Drive.

Use the viewer toolbar in the lightbox

Paste the diagram URL into another tab in your browser to see the diagram in the viewer. Hover over the diagram to see the viewer toolbar.

• Diagram pages: If your diagram has multiple pages, step through pages with the left and right tools on the left of the toolbar.
• Zoom: Zoom in and out with the magnifying class tools. The empty magnifying glass will reset the zoom level to display the entire diagram.
• Layers: If the diagram has layers, click on the layer tool and then click the checkboxes to hide or display specific layers.

Export a diagram from the viewer to a PNG image

PNGs are used when you want to embed static diagrams on web pages, and in documents and presentation slides.

1. Select the diagram page you want to generate an image from using the page left and right arrows, if you have a multi-page diagram.
2. Hide any layers you don’t want to include using the Layers tool in the viewer toolbar.
3. Click on the Export tool (camera) to generate a PNG image thumbnail.
4. Right-click on this PNG thumbnail to see the context menu where you can download the image. Left-click on the thumbnail to open the image in a new browser tab.

Note: The PNG files generated from the lightbox viewer do not include your diagram data. To re-import the PNG image as a diagram with separate shapes into the draw.io editor, export your diagram to a PNG file from within the editor.

Learn how to include your diagram data in an exported image file

Print a diagram from the viewer

1. Make sure you are displaying the layers you want to include.
2. Click on the Print tool.
3. Set the print options for your diagram, and click Print to open your system’s printer dialog.

Tip: From your system’s printer dialog, you can print either to a printer or print to a PDF file.

Follow us on GitHub, Twitter, Facebook.