An online whiteboard for Confluence with draw.io

diagrams.net 23 Jul 2021

Share:

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.

With the draw.io Sketch macro, you have a fully featured online whiteboard inside Confluence Cloud

diagrams.net and the draw.io branded 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 diagrams.net and desktop tools.

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 Sketch 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 Sketch or diagram macros. All of your draw.io diagram and sketch data stays within Confluence according to your instance’s data residency settings.

Brainstorm with a mindmap in your online whiteboard

  1. Edit a page in your Confluence Cloud instance and add the draw.io Sketch macro: type /draw.io and select the draw.io Sketch macro from the list to open the editor.
    Add the draw.io Sketch macro to a Confluence Cloud page
  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.
      Add a shape to the drawing canvas in the draw.io Sketch online whiteboard macro
  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.
      Connect a new topic shape to your mindmap concept in the draw.io Sketch online whiteboard macro
  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.
      Connect and add branches to your mindmap in the draw.io Sketch online whiteboard macro
  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.
      Style your mindmap in the draw.io Sketch online whiteboard macro
  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 Sketch macro before remote team discussions.

Once you have saved a draw.io Sketch 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.
Add comments and discuss changes with your team when viewing the online whiteboard diagram in Confluence

Turn the rough style off

The draw.io Sketch macro uses the rough 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.

Disable the hand-drawn Sketch style in the draw.io online whiteboard macro

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 the Advanced shapes in the shape library to create an online whiteboard mindmap with draw.io in Confluence

Use an automated layout shape for the mindmap

If you would prefer to use an automatical 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.

Use the Advanced shapes in the shape library to create an online whiteboard mindmap with draw.io in Confluence

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.
    Use the draw.io map templates to create a mindmap in an online whiteboard in Confluence
  3. Select a template, then click Insert to add it to the draw.io whiteboard canvas.

Follow us on GitHub, Twitter, Facebook, Discord.

Share: