Export images of diagrams directly from the lightbox viewer

diagrams.net 15 Jul 2021

Share:

When you look at a diagrams.net or draw.io diagram in the lightbox viewer, and not in the app.diagrams.net 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 diagrams.net lightbox viewer using these tools.

Hover over a diagram in the diagrams.net viewer or lightbox to see the viewer toolbar

The viewer toolbar lets you export a diagram as an image from the online diagrams.net 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 diagrams.net 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 diagrams.net 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 diagrams.net editor to generate that link. Alternatively, click on File > Export > URL.
  2. Ensure the Lightbox checkbox is selected, and select Create.
    Set the options you want to encode along with the diagram in the URL
  3. Copy the resulting URL (link). Your diagram will be encoded into this link.
    Copy the generated link and share it with your intended diagram viewers

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.

Select which layers to see in the diagrams.net viewer toolbar

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.

Select which layers to see in the diagrams.net viewer toolbar

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 diagrams.net editor, export your diagram to a PNG file from within the editor.

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

  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.

Print your diagram from the diagrams.net viewer and select your print options

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, Discord.

Share: