Using pages as backgrounds
One of the most requested features for draw.io and draw.io was the concept of using one or more pages as backgrounds for other pages. This could be a background graphic to provide a consistent branding across your diagrams. Another popular use case is more technical diagrams where each page displays a border with an information block in a specific format and dimensions.
Background pages are now implemented in the 15.0.0 editor release.
How to set a background page
Select one of the pages to be your background, often it makes sense to define the last (right-most) page as the background. Note that you can have more than one background page if you wish. Being a background page isn’t a specific property of a page, it still behaves like a standard diagram page.
First, create two pages:
In that page build your background:
Select your foreground page:
Note that we’re using built-in placeholders within the information block.
With nothing in the diagram selected click change in the right-hand diagram format panel to bring up the background dialog:
In the background dialog we select our background page, named background in this case:
And the first page now contains the second page as a non-selectable background (click to open the actual diagram):
Create a Template
If you are using draw.io for Confluence you could add templates of your background pages in both Cloud and Data Center.
If you are storing your diagrams in Google Drive, you could create a background pages folder in your shared team drive that users can copy and use as a basis for their own diagrams.
When can I use the features?
There are a number of flavours of draw.io that we, JGraph, are responsible for. There are also other packages that third-parties author. In the later case, ask your app author when they will update.
Of the apps we develop and maintain:
-
app.diagrams.net. Background pages are available in v15.0.2 (see the help menu of the editor). If you are struggling to update in a particular browser, close the app, go to https://app.diagrams.net/clear.html and try re-opening it.
-
draw.io for Confluence Cloud. Available in the editor v15.0.2. The cache clear URL there is https://ac.draw.io/clear.html.
-
draw.io for Jira Cloud. Available in the editor v15.0.2. The cache clear URL there is https://aj.draw.io/clear.html.
-
draw.io Desktop. The feature be will in the release after the 14.9.6 release. We don’t yet know what that release number will be.
-
draw.io for Confluence Server and DC. The feature be will in the release after the 9.6.7 release. We don’t yet know what that release number will be.