With remote working on the rise worldwide, online replacements for analog tools like the whiteboard are increasingly needed. With the draw.io app for Confluence, your teams have an easy-to-use, collaborative online whiteboard, directly in Confluence, that can be used for agile brainstorming, story mapping, mockups, project planning and tracking, flowcharting, and more.

The online draw.io editor and our Atlassian integrations are the leading solution for web based sketching and diagramming functionality. We offer security-first diagramming for teams working with Atlassian products.

This article describes the draw.io integration for Confluence that we, JGraph, build, deliver and maintain alongside the online draw.io application and draw.io desktop, and further integrations.

All teams love using whiteboards

Whiteboards are versatile and feature heavily in fast-paced team discussions and meetings. Informally sketched diagrams on whiteboards help teams find solutions to problems, simplify complex ideas, structure content, and brainstorm ideas.

For example, you’d find the following on analog whiteboards in various departments:

• Mindmaps to brainstorm ideas and decide on complex website navigation or marketing channel structures.
• Sketched mockups and wireframes to design user interfaces.
• Rough flowcharts and BPMN diagrams to optimise processes, or org charts to decide on business structures.
• Agile storymaps and user stories prior to the start of development.
• Kanban boards and project maps to keep projects on track.
• …

More and more businesses are moving to remote work, or at least a hybrid approach - that means teams need an online whiteboard.

draw.io as an online whiteboard in Confluence

With the draw.io Board macro, distributed teams can securely and easily collaborate in real time on an online whiteboard, directly in their Confluence instance.

In this way, diagramming and visualisations can be integrated into a remote team’s workflow just as easily as an analog whiteboard is used by teams on location.

Small teams can diagram for free - You can use an unlicensed version of the draw.io app in a free Confluence Cloud instance.

Secure and private online whiteboard within Confluence - There are no third-party sign-in or freemium accounts needed to embed the draw.io Board or draw.io Diagram macros. All of your draw.io diagram and board data stays within Confluence according to your instance’s data residency settings.

Tip: When editing a diagram with your team in Confluence Cloud, right-click on a blank area of the diagram and select Share Cursor. Now your team will be able to see where you move the mouse and what you select - a smoother experience than new shapes just appearing on the drawing canvas.

Brainstorm with a mindmap in your online whiteboard

1. Edit a page in your Confluence Cloud instance and add the draw.io Board macro: type /draw.io and select the draw.io Board macro from the list to open the editor.
   
2. Double click on the drawing canvas and select a shape to represent your central idea to add it to the drawing canvas.
   • While it is still selected, type a word or two to represent the central idea and press Enter.
     
3. Hover over the central concept shape and click on one of the direction arrows to add and connect a sub-topic shape.
   • Type a word or two to add a label to the sub-topic shape.
     
4. Hover over a sub-topic shape, click on the direction arrows to add and connect a branch shape.
   • Type a word or two to label the branch shape.
   • Drag the shapes to different position on the online whiteboard canvas, if necessary.
     
5. Continue adding shapes for sub-topics and branches.
6. Style each sub-topic with a single colour to make them stand out.
   • Click and drag a selection box around the sub-topic and all of its branches.
   • Select a style in the Format panel, or click on the Line and Fill colours to open the palette and set custom colours.
   • Change the arrow heads on the connectors - right-click on the whiteboard canvas, click Select Edges, then uselect None from the connector arrow list in the Format panel.
     
7. Click on Publish and enter a filename for the attachment, then publish your Confluence page so your team members can see it.

Tip: Set up an online whiteboard with the draw.io Board macro before remote team discussions.

Once you have saved a draw.io Board diagram and its Confluence page for the first time, all team members can edit and collaborate in real time on the diagram in the online whiteboard in Confluence Cloud.

See how collaborative editing with draw.io works in Confluence Cloud

Comment on whiteboard diagrams in Confluence

Confluence users with appropriate access to view and comment on the page can click on the diagram and add comments to the whiteboard diagram from the lightbox viewer.

Turn the rough style off

The draw.io Board macro uses the rough sketch style for shapes and connectors to mimic hand-drawn diagrams on a whiteboard. If you would prefer clean lines and solid fill colours, you can turn this option off.

1. Make sure nothing is selected in your diagram.
2. Expand the floating Format panel on the right, and click on the Style tab to see the global style options.
3. Deselect the Sketch checkbox to stop using the rough shape styles.

draw.io mindmap shapes and templates

Do you prefer a more traditional mindmap look? Use the draw.io mindmap shapes in the Advanced shape library.

Layout the mindmap yourself

1. Click on the Shapes tool in the toolbar, then expand the Advanced shape library.
2. Drag a Sub Topic or Branch shape from the Advanced shape library, hover over the parent shape and drop it on one of the direction arrows.
3. Click on the - or + symbols at the top left of each sub-topic or branch to collapse or expand that branch.

Use an automated layout shape for the mindmap

If you would prefer to use an automatic layout, use the mindmap layout shape in the Advanced shape library. You can drag and drop shapes inside this container mindmap layout shape. To work faster, clone and connect branches and topics from within the layout shape as follows.

• Add extra subtopics or branches at the same level in your mind map: Hover over a sibling shape and click on the up or down direction arrow to clone it.
• Add child topics or branches: Hover over an existing shape and click on the left or right direction arrows.

Start from a map template Would you like to work from a mindmap template? Instead of adding shapes from the shape libraries, you can add a mindmap example from the draw.io template library.

1. Click on the Template tool on the left.
2. Select the Maps category to see the mindmap templates. Click on the magnifying glass on a template to see a larger preview.
   
3. Select a template, then click Insert to add it to the draw.io whiteboard canvas.

Follow us on GitHub, Twitter, Facebook.