Many of you have been asking which options are available in order to link content to shapes within your draw.io diagrams in Confluence. The answer is: There are quite a few! Using this simple yet effective feature will help you extend what is already possible with draw.io. This post covers both the Cloud and Server versions of draw.io for Confluence in order to cover the slight differences between the two.
Using the link editor
The path to linking content is the same in Confluence Server and Cloud. Just follow these three simple steps:
- Double click on the diagram on your Confluence page to open the diagram editor.
- Right-click the shape you want to create a link for.
- In the menu, select Edit Link.
For each of the link types, you will need to repeat the steps above.
Link content in Confluence server
Link to other draw.io diagrams
The usecase that people ask for the most is linking a shape to other draw.io diagrams. This can be the case in complex process flowcharts for example, where specific shapes do have a workflow of their own that you like to go into detail elsewhere. All you need to know is the name of the diagram that you like to link to. Type in the name in the search window and click Link. Once you saved the diagram and click on the shape, the linked diagram will open in a lightbox.
Use the universal search to link to any content
You can use the universal search to link to any content (this can be diagrams, pages or attachments) within Confluence.
In the Link Edit menu choose Search and begin your search query by typing in the search field. Then using the pull-down menu on the right of the search field, you also have the option to specify a Confluence space to search within if you don’t want to search all spaces. Please note that the search follows Confluence permissions. This means that you can only link to content that you have been given permission to view.
Linking to external content
Choose Web Link and simply insert the URL you would like that shape to link to and click apply. You are now able to click on the shape (the URL opens in a new browser tab) and have it take you to the URL you chose.
Linking to another page within your diagram
Draw.io allows you create multiple pages within your diagram. Linking these pages to a shape is pretty easy. To do this, choose Diagram Content from the link editor menu. You should see a list of all of the pages within your diagram. Select the page you’d like the shape to link to and apply.
Linking to Confluence headers
Being able to link to headers of specific content within your page can be very useful. In this example, the link will take you to a specific paragraph within your Confluence page. In order to use this feature you need to assign text formats to the paragraph headers (in this example we chose Header 1 to Header 3). When you open the link editor menu and select Page Content you now see the listing of all defined headers (see image on the right).
Please note that you can only link to text content that is on the same Confluence page as the draw.io diagram that you are linking from.
Linking to attachments
If you have attachments saved to your Confluence instance you can also link to them to draw.io shapes. In the Link Editor menu select Attachments, and you will see a list of the available attachments. Choose the one you want to link and apply.
Per default you will only be able to view the attachments of the particular Confluence page that hosts the draw.io diagram. If you like to link to an attachment from another page please use the universal search (see above) to find and link it.
Linking Recently viewed Confluence pages
You may want to refer your readers to other pages you recently edited or created within your Confluence instance and to link to them. Select Recently Viewed and you’ll get a selection of your most recently viewed pages.
Link content in Confluence Cloud
Linking to internal or external URLs
Choose Web Link and simply insert the URL you would like that shape to link to and click apply. You are now able to click on the shape and have it take you to the URL you chose (the URL opens in a new browser tab). This can be a Confluence page or an external URL.
Linking to another page within your diagram
Just as for Server, draw.io for Confluence Cloud also allows you to create multiple pages within your diagram. To link a shape to one of these pages, choose the middle section of the link editor menu (see image on the right). The drop down menu shows a list of all available pages that you can link to. Select the page you’d like the shape to link to and apply.
Linking to text anchors
The third option in draw.io for Confluence Cloud is to link shapes to text anchors on the Confluence page the draw.io diagram is added to. First you have to set the headers (see screenshot on the right) for the text content. Afterwards just copy the header from the Confluence page, go to the linking menu and paste the text under Confluence Page Anchor.
This function is embedded in draw.io for Confluence Cloud and worked in the past. At the time of this blog post (December 13th, 2019) there is a reported bug within Confluence Cloud that breaks the formatting of headers so this feature is currently unavailable. Atlassian is committed to fixing this as soon as possible.
Linking to the content you need to should be easy and with draw.io, it is. Did you enjoy this post? Leave us a comment and let us know. We’d love to hear from you!