How to build multipage diagrams in draw.io

Keep your diagrams uncluttered

Ever had it where you’re frantically scrolling through a diagram, trying to make heads or tails of where you are in the process, and where the start and end of the process is?

It’s easy to get lost in large, complex diagrams. When diagrams become large and unwieldy, their clarity and meaning quickly go missing in the mass of shapes and connectors.

With draw.io’s multipage diagram feature, you can break down complex processes into subprocesses, and display these on separate pages. Alternatively, you might have separate processes for different departments, with some crossover processes in between. In draw.io, you can display the process for each department on a separate page, while keeping all of these in one central diagram for teams to access on your Confluence page.

In this blogpost we’ll show you how to create multipage diagrams in draw.io step by step, as well as some tips and tricks when building these.

Create your diagram

In your Confluence page, start typing /draw and select draw.io Diagram, then choose Blank Diagram.

Build out the process you want to visualize in the diagram editor.

Add multiple pages to your diagram

To add a new page, at the bottom of the editor click on the plus (+) icon to the right of your first page.

Rename a page

To rename a page, double-click on the page and type the new page name.

Rearrange the page order

To move a page before or after other pages, left-click on the page and drag it to where you want it to be placed.

Add links between pages

To direct users from a particular shape to other pages in your diagram, right-click on the shape, select Edit Link, and choose the page you wish to link to, then click OK.

Collaborate in real time on multipage diagrams

The multipage feature works great for seamless, real-time collaboration in Atlassian Cloud. You and your teammates can work on the diagram simultaneously, with any changes being merged and saved automatically.

You can work on separate pages of the diagram at the same time: For example, one of your colleagues can take care of refining the Subprocess B page, while you continue working on the Master Process. Or, you can work on the same page of the diagram together. It’s an efficient way to divide and conquer building up the diagram, and capturing ideas at every stage.

When a teammate publishes the diagram, it will capture all changes made by collaborators up until that point. You can use draw.io’s built-in Revision History to track any changes that have been made to the diagram, just head to File > Revision History in the diagram editor. For each captured save, you can view the changes made to each page of the multipage diagram by using the dropdown menu on the right of the modal.

Hide the draw.io toolbar on the Confluence page

To hide the draw.io toolbar in the Confluence page macro, click on the settings cog above the diagram, and under the Toolbar option, select Hidden and then hit Save. This will give diagram viewers a seamless experience, allowing them to focus purely on the diagram itself, without distractions from the interface options.

If you want to show the toolbar again, click on the pencil icon at the top of the page to edit the Confluence page, then click on the pencil icon underneath the diagram to edit it. In the right side menu, head to the Toolbar option, and select Top of page. Publish your diagram and the toolbar will be visible again.

Want to dive deeper into the world of draw.io? Access our linktr.ee page to follow us on social media and learn how others use draw.io, as well as pick up some helpful tips and tricks.