Organization Charts and Mind Maps in draw.io

About the Author:

2017-08-30T12:51:52+00:00 June 1st, 2017|draw.io, Tutorial|

You’ve been asking for it, and now draw.io has added a plugin that better supports tree diagrams like organization charts and mind maps. The new features make it quicker to add parent, sibling and child nodes, as well as move and copy entire subtrees. Keyboard shortcuts make it even more efficient!

When you want to create a new org chart or mind map or work on an existing diagram of this type, go to: https://www.draw.io?p=trees

You’ll also be able to use a variety of keyboard shortcuts that allow you to build up your mind map or org chart quickly.

Selecting shapes and subtrees

Of course, you can select multiple shapes normally with Shift + click, but there are some additional options available when working with the tree plugin for draw.io that make it much easier.

When you right click on a parent shape, there are four additional options in the menu: Select Children, Select Subtree, Select Siblings, Select Parent. Use the keyboard shortcuts (as you can see in this menu) to work with your tree diagrams even faster.

Moving branches

By default, when you grab a parent shape and move it on the drawing area, its children will be moved with it.

Let’s use the organization chart above as an example.

Click within the border of a parent shape, drag it to a new position and release the mouse button. You can see the child shapes move with it.

  

If you want to only move the parent shape, hover over the shape, then click on the green icon and drag the shape to a new position. This does not (yet) work on touch devices.

  

Inserting new shapes

It’s easy to insert and automatically connect sibling, child and parent shapes – simply click on the blue arrows in the direction where you want your new shape to be. Up for a parent, right/left for a sibling, and down for a child.

Inserting a child shape to the right:

  

Tip: After selecting a shape, press Tab to add a child shape.

Inserting a parent shape will automatically shift the entire subtree down one level. You can also do this by selecting a shape and pressing Shift + Tab.

  

Insert a shape in between two shapes

Using a keyboard shortcut, you can easily insert a shape and move a neighbouring subtree along. Select a shape, then press and hold Shift + Alt, then a cursor key. In this example, the right cursor key was pressed.

Move a subtree

To move a shape or an entire subtree, click and drag the parent shape, hover over the target parent until the outline of the shape is purple, then release.

  

Clone a subtree

Hold down Ctrl, then click and drag the parent shape of the subtree just as if you were moving it, hover over the target parent until the outline of the shape turns purple, then release. The subtree will be cloned and automatically connected to the parent.

Mark a subtree as collapsible

To make a complex diagram easier to quickly understand, you can mark subtrees as collapsible.

Select the parent shape, then click Arrange > Navigation > Collapsible. The parent shape will have a little ‘-‘ symbol in the top left corner. Click on this to collapse the subtree.

  

Keyboard shortcuts

Want to work with tree diagrams even faster in draw.io? Then use these keyboard shortcuts!

Selecting shapes

  • Cursor keys = select the next shape in the cursor key’s direction.
  • Alt + Shift + X = select children.
  • Alt + Shift + T = select subtree.
  • Alt + Shift + S = select siblings.
  • Alt + Shift + P = select parent.

Adding shapes

First, you’ll need to select a shape.

  • Tab = add a child.
  • Shift + Tab = add a parent.
  • Enter = add a sibling after the current shape.
  • Shift + Enter = add a sibling before the current shape.
  • Alt + Shift + cursor key = add a sibling in between the selected and the next shape.

Please let us know what you think

We’d love to know what you think about this new plugin and the improved features for working with various types of tree diagrams. Whether you like it or think it needs more improvements, please contact us and share your thoughts.

2 Comments

  1. Dani June 19, 2017 at 12:32 pm - Reply

    Hi!
    Very interesting feature. However, when I create an organization chart using this plugin and open it again there isn’t any tree option in the sidebar, I have to go to https://www.draw.io?p=trees and open the chart from this link. How can I open it directly?
    Thanks!

Leave A Comment