Sometimes creating a diagram for your workflows can result in something much larger than you anticipated.  You may have many details that get lost in the jungle of shapes.  Did you know you can tame your content by working across multiple pages within draw.io?  This means you can click a shape within your main diagram and have it jump to a larger, more detailed view on another page.   This particular mini-tutorial was created with draw.io for Confluence Cloud in mind but also works in Confluence Server.

You can enlarge all the videos in this article by clicking on the “full screen” icon on the video:

Create a new Confluence page

  1. Start by creating a new page in Confluence
  2. Click on the “+” to access the menu*
  3. Choose “view more” to bring up the macro selection menu.
  4. Search for the draw.io macro and select it.
  5. Choose the type of diagram you’d prefer.  You can choose to start with a blank diagram, your own template or one of our templates.  For the sake of this tutorial, I’ve just used one of our flowchart templates.

*You can also just type “/” for Cloud or “{” in Server – this will bring up a pop up menu where you can then select draw.io.

Add new pages to your draw.io diagram

Now, you’ve added some of your own shapes and content to the main diagram and want to create a page where you can place these new shapes for a more detailed view.

  1. Click on the + at the bottom of your work area
  2. Double click (or right-click to bring up the menu) on the page tabs in order to rename them.

Insert shapes into the new page

You now have to place the shapes that you’d like to enlarge into your new page.

  1. Select the shapes you would like to copy from your main diagram.
  2. Copy and paste them into your new page.

Make a link from the original shape

Finally, the magic!

  1. Go back to your main diagram
  2. Right-click on the shape you want to create the link from
  3. In the menu, select “Edit Link”.
  4. Select the second radio button and click on the arrow to access the pulldown menu
  5. Choose the page you’d like to jump to when clicking your shape and hit apply

Save your diagram and your Confluence page

  1. Save your diagram by clicking on “Save & Exit” and now your diagram will appear in your Confluence page.
  2. Don’t forget to also click on “Publish” to save the Confluence page.

You should now be able to click on the shape which will then take you to the page you linked to.

We haven’t forgotten our Confluence Server friends.  Sometimes you might find yourself needing to filter your diagrams by “turning off” layers, for example.  If you’d like to set a page and/or layer as a default view please take a look at our post on how to filter diagrams by page and layers in Confluence Server.

Now that you’ve seen how you can cut down how complex a single diagram can be by “spreading it out” over multiple pages, perhaps you’d like to see the other ways in which you can link content in draw.io.

We love hearing from you! Let us know if you’d like more content like this.