draw.io Training – Exercise 1: Add a draw.io diagram to a Confluence page

About the Author:

2017-08-30T12:48:42+00:00 July 17th, 2017|draw.io, Tutorial|

The first part of our training course covers the basics of using draw.io in  Confluence  : adding a diagram to page and editing existing diagrams.

If you are not using Confluence, please start with the next exercise – 2: Editing a diagram – change the colors.

Of course, you will need to know how to add blank and template diagrams to a Confluence page, and change how it is displayed when someone views your page.

Task 1: Insert a blank diagram

  1. Insert the draw.io macro when editing a Confluence page.
  2. In the template manager, select the Draw.io diagram at the top left (if another diagram type was selected).
  3. Select and open the Blank diagram.

Inserting macros in Confluence

You can insert a new draw.io macro via the plus icon in the toolbar.
Tip: If draw.io is not listed, select Other macros and type draw.io in the search bar in the top right.

Another way to insert a new draw.io macro is to use a curly bracket. Type {draw, then press Enter. Just typing the curly bracket will display suggested macros.

Add a draw.io blank diagram to a Confluence page


Task 2: Open and save a template diagram

If you want to quickly create a similar diagram, using templates or existing diagrams can help. You can create a copy of a template by clicking the Copy button. The original template is not changed, instead a clone is generated.

  1. Insert the draw.io macro when editing a Confluence page.
  2. Select a template from the template manager and open it.
  3. Click Save & Exit.
  4. Enter a name for the diagram.
  5. Save the Confluence page.

Note: Once you have given the diagram a name, you can’t change it.

When the template manager is displayed:

  1. Click on the left menu item Draw.io diagram then Blank to create a new, empty draw.io diagram.
  2. Use Search to find existing diagrams to use as a template.

draw.io includes many templates by default (e.g. flowcharts, mind maps, and more). You can find these in the various categories listed on the left.

draw.io - open diagram

Task 3: Change how the diagram appears on the Confluence page

You can change the display of the diagram when editing the Confluence page (size, border, etc.).
When you click on a diagram in edit mode, a toolbar is displayed either above or below the diagram.

  1. Edit the page and select the draw.io diagram.
  2. Click on Edit Macro and change the settings as follows: Width 600, Border inactive, Toolbar active

Tip: When viewing the Confluence page, you can change the zoom level as required.

You can use this toolbar to:

  • Change how the diagram is displayed within the Confluence page (border, toolbar, etc.)
  • Duplicate the diagram.
  • Change the displayed size within the page (in the same way as images in Confluence).
  • Remove the diagram.

draw.io: resize a diagram on a Confluence page

That’s it for the first exercise in this self-directed training course. Keep an eye out for the next couple of exercises, where you will learn how to work with text and connectors, create a tree diagram from scratch and work with the symbol library.

Leave A Comment