Leverage your draw.io user experience with custom templates

By |2021-12-13T11:23:35+01:00December 5th, 2019|customization|
Reading Time: 6 min

When you want to create diagrams with draw.io, you have the option of choosing from a wide variety of built-in templates for all kinds of use cases. Sooner or later you will want to adapt these templates or even create your own diagrams from scratch that you might like to share with your colleagues – either because they have a universal approach or because you like to have a uniform workflow for future diagrams. Wouldn’t you love to have custom diagram templates stored in your company’s own resource library? With draw.io custom templates you can!

Working with custom templates is great. It enables you to set standards for the way diagramming is handled within your company, furthermore not having to create similar diagrams over and over saves you and your colleagues a lot of time.

Info: Interactive diagram tutorials are not compatible with the board editor but watch our interactive tutorial space. New dedicated interactive tutorials for draw.io boards are coming soon.

Now, let’s get started

Configuring draw.io in Confluence Data Center / Server

To start you have to create a Confluence page that will store all custom diagrams in the future. Leave this page blank and name it for example “Custom templates”. Take the URL of this page and insert it in your Confluence General configuration section following the path:

Confluence administration > DRAW.IO ADD-ON > Configuration > Configuration / Custom templates configuration page

Set the Confluence target URL as the draw.io custom templates configuration page

Once you’ve created the custom template, Confluence page, and mapped the URL you can now start creating child pages. The name of the child page will be displayed in the template manager screen later on, so use a title that will describe how you are going to use them (like Jobs to be done, Video diagrams or Beginners Guide). You can now add as many draw.io diagrams to one child page as you like.

Configuring draw.io in Confluence Cloud

To get to the General Configuration section within Confluence Cloud, just click Settings. Under the submenu Atlassian Marketplace you will find the option draw.io Configuration where you will see a tab that is labeled Custom Templates. There is a link embedded that leads to the templates page (this one is already set up in Confluence Cloud and doesn’t have to be created). You can now create child pages using the same method as you would in Confluence Server.

Adding existing draw.io diagrams to the custom templates section

To convert existing diagrams to custom templates, all you have to do is:

  • Open the Confluence page that contains the diagram you want to have as a custom template, then click Edit and open the draw.io editor of the target diagram
  • Download the XML file of the diagram (File > Export as > XML)
  • Open the specific child page of your custom template’s Confluence page and add a new draw.io macro to it
  • Open a blank diagram
  • Insert the XML you downloaded via drag and drop
  • Save the diagram (provide a good name) and the Confluence page

From now on, the new custom template will appear within the template manager every time you or your colleagues see the template manager opening screen.

Custom templates are embedded and displayed in the template manager

draw.io is so versatile. Do you have a way that you use diagram templates that perhaps no one else has thought of?  We’d love to hear from you!

Last Updated on December 13, 2021 by Admin

Share This Story, Choose Your Platform!

About the Author:

Bastian has an extensive Atlassian background and has worked for years in Atlassian license sales. Since 2019 he has been Product Marketing Manager of the draw.io Diagrams for Confluence / Jira apps. He is passionate about finding use cases to add value to the broad user base of draw.io.