How to install and insert a diagram in Confluence Cloud

draw.io 14 Oct 2020

Share:

If you are looking for information on licensing draw.io for Confluence DC, there is another article for that.

With the draw.io app for Confluence Cloud, you can add diagrams to Confluence Cloud pages and collaboratively edit them. You can reuse one diagram on multiple pages, embed diagrams from cloud storage platforms, and cut down on the time spent maintaining multiple copies of the same diagram.

If you have previously had diagrams in your Confluence Cloud instance, mass-importer tools make it easy to convert all of them in one step from Gliffy and from Lucidchart into draw.io diagrams. You won’t lose any data either, the conversion does not modify the original diagram files.

The draw.io app for Confluence Cloud is a great choice for security and privacy, as your diagram data is never stored outside your instance, and your usage of the draw.io diagramming app is never tracked.

Once you purchase draw.io for Confluence Cloud, you can also install and use draw.io for Jira Cloud at no additional cost.

Install diagrams in Confluence Cloud

  1. As an administrator in your Confluence instance, click Settings > Find new apps.
    Find and install draw.io in your Confluence Cloud instance via Settings
  2. Locate and install the draw.io for Confluence Cloud app.
  3. If a trial does not automatically start, click Settings > Manage apps, expand the draw.io app and click “Start trial”.
    Start the free trial of draw.io for Confluence Cloud via Settings

Your trial license will automatically convert into monthly billing once the trial period has ended. If you would prefer, you can request Atlassian generate a quote for annual billing.

Add a whiteboard to a Confluence Cloud page

To quickly collaborate with your remote team on an online whiteboard, you can use draw.io in your Confluence instance.

  1. Edit a page, type /draw, and select the draw.io Board macro to create an insert a new diagram using the simple whiteboard-like Sketch editor theme.
  2. Save the diagram and publish the page so all of your team member can see and edit it. It’s best to set these pages and draw.io Board diagrams up as part of your meeting preparation.

Insert diagrams in Confluence Cloud

Now that you have installed the draw.io app for Confluence Cloud, you can create a diagram and insert it into a page.

  1. Edit a page, and type /draw. Select the draw.io Diagram macro to create and insert a new diagram.
    Add the draw.io Diagram macro to insert a diagram into Confluence Cloud
  2. Select one of the template diagrams, enter a name for your diagram file at the top of the dialog, then click Create. To see a larger preview of the template diagram, click on the magnifying glass in the top right.
    Select a template diagram, then click Create to insert a diagram into Confluence Cloud
  3. The draw.io diagram editor will open, where you can create, edit and style your diagram.
    • Use the shape libraries on the left to add elements to the drawing canvas in the middle.
    • Drag connectors between shapes.
    • Double click on a shape or connector then enter text to add a label.
    • Select shapes and connectors and style them with the format panel on the right. You’ll see different options for styling text, shapes and connectors based on what you have selected.

The draw.io diagram editor in Confluence Cloud

Edit your diagram

Add shapes: Drag and drop them from the shape libraries onto the drawing canvas, hover over a shape and click on the direction arrows or use the double click shortcut.

Connect shapes: Hover over a shape, then drag a connector from the blue direction arrows or green connection points and drop it on another shape to connect them.

Reroute connector paths: Drag a connector into a new position - new waypoints are added automatically.

Create your diagram from shapes, connectors and text, and add styles

Use different shapes: Click on More Shapes at the bottom of the shape library to

Add multiple pages: Click on the + at the bottom of the drawing canvas to add another page and organise complex ideas and flows. You can add links to shapes and text to let viewers jump through diagram pages easily.
Add multiple pages to diagrams with the page tab bar at the bottom of the drawing canvas

Use keyboard shortcuts Quickly add, clone, connect and style shapes using the diagramming keyboard shortcuts.

Embed an existing diagram in another page

  1. Edit the page where you want to reuse a diagram, and type /draw. Select the Embed draw.io diagram macro.
  2. Search for the diagram name using the Search field, select the diagram, then click Select.
    Search for and select the diagram you want to embed in a Confluence Cloud page
  3. Check that the preview shows the correct diagram, choose the Viewer Settings on the left, select the page and layers you wish to display using the toolbar above the preview, then click Insert.
    Set the viewer settings, select a diagram page and set the visible layers when embedding an existing diagram in another Confluence Cloud page

You can also use this method to embed a diagram stored in Google Drive or in One Drive.

Embedded diagrams in draw.io for Confluence Cloud

Learn more about embedding and reusing diagrams in Confluence Cloud

Additional resources

Follow us on GitHub, Twitter, Facebook.

Share: