Embed diagrams in Confluence Data Center and Server
There are two ways to display diagrams on Confluence Data Center and Server - either attach the diagram file to the page and use the draw.io diagram macro, or embed a diagram that is stored elsewhere using the Embed draw.io diagram macro. You can embed draw.io diagrams easily from the following locations:
- From another page in your Confluence instance.
- Using a public URL of a diagram file or a specially formatted text file with CSV data.
- From Google Drive or Microsoft One Drive.
Embedding an existing diagram does not copy the original diagram, only adds an embedded version. To edit the diagram, you’ll need to go to the Confluence page that contains the original diagram attachment, or edit the diagram file where it is stored in your cloud storage platform or on the web.
When you reuse or embed a diagram then update the original, it will be updated on every page that it has been embedded (after a page refresh).
Embed a diagram from another Confluence page
- Edit a page in your Confluence instance, type
/draw
, then select Embed draw.io diagram from the list of macros. - If you edited the diagram recently, it will show on the Recent Diagrams tab. Select the diagram you want to embed, then click Insert.
- If your diagram is not in the list, select the Search tab, type part of the filename of the diagram you want to embed, and click Search. Select the diagram, then click Insert.
You’ll see a preview of the embedded diagram in the macro as you edit the Confluence page.
Change the macro settings to change the size of the diagram: Select the macro, then click on one of the different size icons.
Display a different page or layers
You can filter what viewers see in the Embed draw.io Diagram macro to display a specific page or set of layers. Edit the macro settings, click on Select viewer page and layers, then select which page you want viewers to see.
Learn how to work with multi-page diagrams in Confluence
Embed a diagram stored on the internet
You can also embed a draw.io diagram stored somewhere publicly on the internet using its URL.
- Add the Embed draw.io Diagram macro to your page.
- Select the From URL tab, enter a Diagram Name and the Diagram URL in the textboxes, and click Show diagram to see a preview. In the example below, the diagram is stored in our public GitHub repository.
- Click Insert to embed the diagram into your Confluence page.
Just like with an embedded diagram from another Confluence page, you’ll see a preview in the macro while you are editing the page.
Tip: Use the Embed draw.io diagram macro in the same way to create and display a diagram from a text file stored on the internet that contains special formatting information and CSV data.
See how to import CSV data to create a draw.io diagram in Confluence
Embed a diagram stored in Google Drive or OneDrive
By authorising draw.io to access your Google Drive or Microsoft OneDrive account, you can embed a draw.io diagram that you have stored there.
Note: Ask your Confluence administrator to enable this option in the draw.io Configuration in your Confluence instance if you don’t see this option.
- Add the Embed draw.io Diagram macro to your page.
- Click the Google Drive or OneDrive tab. If you haven’t allowed draw.io to access your files on your cloud storage platform, click the blue Authorize button, and follow the prompts to allow access.
- When you return to the file picker, click Choose.
- Find and click on the diagram file you want to embed, then click on the blue Select button (Google Drive) or Open button (OneDrive).
- Check the preview to make sure you have the right diagram, then click click Insert to embed your diagram file from your cloud storage platform into your Confluence Server page.
Learn more about embedding files from Google Drive and from Microsoft OneDrive.
The Embed draw.io diagram macro won’t show a preview of files embedded from cloud storage platforms while you are in edit mode. Save the page to see your embedded diagram.
Embed diagrams on Confluence Cloud
Are you using Confluence Cloud instead? You can embed existing diagrams similarly on multiple pages.
Embed and reuse draw.io diagrams in Confluence Cloud
You can also embed diagram files stored in online storage platforms like OneDrive or Google Drive into Confluence Cloud pages.