Diagramming in a free Confluence Cloud instance

diagrams.net 16 Jun 2021

Share:

diagrams.net and the draw.io branded Atlassian integrations are the leading solution for web based sketching and diagramming functionality. The article describes the draw.io integration for Confluence that we, JGraph, build, deliver and maintain alongside the online diagrams.net and desktop tools.

Confluence Cloud is a popular tool for team productivity suitable for both small and large organisations. Atlassian provides customers with free instances, as long as the instance has ten users or fewer, and you can diagram in these instances with our draw.io Confluence Cloud integration.

Diagram freely

With the draw.io app installed in your free Confluence Cloud instance, you and your small team can draw a wide range of diagrams:

The draw.io diagram editor is easy to use and powerful. The draw.io app in Confluence Cloud is also secure and private - Your data stays in the browser while you are editing a diagram and is stored only in your Confluence Cloud instance when you use the draw.io app.

  • Attach unlimited diagrams to pages with the draw.io macros.
  • Use and connect shapes from an extensive collection of shape libraries.
  • Style shapes, connectors and text labels.
  • Draw freehand shapes and create custom shapes.
  • Use a template from the template library to start diagramming quickly.
  • Switch to various editor styles, including a simpler draw.io Board macro, ideal for brainstorming.
    Use the freehand drawing tool in a draw.io Board diagram to markup diagrams or draw shapes with your mouse

Install draw.io in a free Confluence Cloud instance

  1. Set up a new Confluence Cloud instance, choosing the Free tier of up to 10 users on Atlassian’s Confluence Cloud pricing page.
  2. Step through the installation and setup until you see the space landing page and Confluence Quickstart tutorial.
    Confluence Cloud will step you through the setup of a new instance and space

Install the draw.io app for Confluence Cloud

  1. Click on the gear icon in the top right, next to your user initials to open the Confluence Cloud administration settings.
  2. Under the Atlassian Marketplace section, click on Find new apps. Search for draw.io and click on it to see details about the draw.io app for Confluence Cloud.
    Alternatively, go to the draw.io app on the Atlassian Marketplace website.
    Install the draw.io app in your Confluence Cloud instance
  3. Install the draw.io app in your Confluence Cloud instance. Note: If you have a team of users larger than 10, start a free trial - when the license expires, you’ll still be able to create all types of diagrams, but some advanced features are limited to the licensed version in larger Confluence Cloud instances.

draw.io as an online whiteboard

  1. Edit a Confluence page, type /draw.io and insert the draw.io Board macro. The simple whiteboard-like editor will open.
  2. Save your diagram and page so that your remote team members can collaborate on the draw.io Board drawing with you.

Learn more about using draw.io as an online whiteboard in Confluence
With the draw.io Board macro, you have a fully featured online whiteboard inside Confluence Cloud

Learn the draw.io diagram editor

  1. Edit a Confluence page, then type /draw.io and insert the draw.io Diagram macro. This will open the draw.io editor.
    Add the draw.io Diagram macro to insert a diagram into Confluence Cloud
  2. Select the Blank Diagram template, enter a filename for your diagram, and click Create.
    Choose a diagram template when you create a new diagram at diagrams.net
  3. Get to know the layout of the diagram editor: the shape and format panels, the toolbar, menus and drawing canvas. The default layout is the same as at app.diagrams.net.
    The diagrams.net editor, its tools and panels
  4. Step through the tutorial to draw a basic flowchart in the diagrams.net editor.
    • add and connect shapes using the shape libraries on the left
    • add labels to the shapes and connectors on the drawing canvas
    • style your diagram using the tools in the format panel on the right.
      Create your diagram from shapes, connectors and text, and add styles
  5. Instead of exporting your diagram, click Publish to save your new diagram, or Save & Exit to save an existing diagram, then publish your Confluence page.

Unlock additional draw.io features for larger teams

The price of the draw.io app is very affordable in Confluence Cloud. See the tier-price comparison when migrating from Confluence Server to Confluence Cloud with draw.io.

If you have started a free trial in your team of more than 10 users and let the license expire, you would have noticed that the app continues to work, minus a few features.

When you license the draw.io app for your larger Confluence Cloud instance, you will continue to enjoy the features covered in the post above, in addition to the following:

  • Import and export .vsdx files.
  • Drag and drop diagram files into the editor to import them instead of using the menu.
  • Add multiple pages to a diagram.
  • Export to PDF files and print diagrams.
  • Use math typesetting.
  • Set up and use custom shape libraries.
  • Customise the draw.io editor and set global corporate styles with JSON configuration options.
  • Use the search feature to find shapes.
  • Use the collaborative editing functionality to simultaneously edit a diagram with your teammates.
  • Work with the diagram file’s revision history.
  • Display an older version of the diagram when viewing a page.
  • Import PlantUML or Mermaid code to automatically create a diagram.
  • Import CSV data with formatting options to automatically create a diagram.
  • Embed diagrams from cloud storage platforms (Google Drive and Microsoft OneDrive).
    Embedded diagrams in draw.io for Confluence Cloud

Small teams with up to 10 Confluence Cloud users can use all of the features of the draw.io app for free.

Follow us on GitHub, Twitter, Facebook, Discord.

Share: