Organization Charts and Mind Maps in draw.io

UPDATE: This functionality is now in the editor (no plugin needed).

Note: Advanced shapes are the only ones that work with the automatic re-positioning. Enable the Advanced shape collection by clicking on More Shapes at the bottom of the left panel and enabling the General shape library.

You’ve been asking for it, and now draw.io has makes it easier to work with tree diagrams like organization charts and mind maps. The new features make it quicker to layout your trees and mind maps, as well as move and copy entire subtrees.

Work with this example in draw.io

Working with subtrees

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

When you right click on a parent shape, there is an additional item in the context menu: Select Descendants. Use the keyboard shortcut Alt+Shift+D (as you can see in the context menu) to work with your tree diagrams and mind maps even faster.

You can then drag the entire subtree to a new position on the drawing area, copy it, or delete the subtree.

Inserting new shapes

It’s easy to insert and automatically connect shapes – simply click on the blue arrows in the direction where you want to clone the shape, and a duplicate is made and connected. Alternatively, you can right-click on a shape, and select Duplicate from the context menu.

Tip: Even faster, select a shape, hold down Ctrl and drag a copy of the shape to the right position in your diagram.

Connect the shapes by dragging a connector from the parent to the child – hover over the parent shape until the blue arrows appear, then drag the connector to the child shape.

Duplicate a subtree

Select the subtree – right click on the parent shape and choose Select Descendants from the context menu, or use the keyboard shortcut Alt+Shift+D. Hold down Ctrl and drag a copy of the subtree into position on the drawing area. Connect it to its parent as usual – drag the connector from the blue arrow that appears when you hover over the parent and attach it to the child shape.

Collapse a subtree

To make a complex diagram easier to quickly understand, you can use collapsible subtrees – make sure you use the shapes from the Advanced shape library for this!

When you see a shape with a little - or <tt+ symbol in the top left corner, it is collapsible. Click on this to collapse the subtree.

Open this diagram in draw.io

Use a different layout

It’s easy to change the shape of your tree diagrams and mind maps. You can either change the layout of the entire diagram, or a subtree.

1. Select the parent of the shapes you want to arrange in a different layout. If this is the entire diagram, select the top (root) shape.
2. Choose Arrange > Layout from the menu, and then select the new diagram layout you want to use.
3. If you are prompted, enter the spacing between the shapes then click Apply.

Your diagram will be automatically redrawn with your selected layout.

Useful keyboard shortcuts

You can see the keyboard shortcuts on the menu and the context menu items, and when you hover over buttons in the panels. If you find yourself always going to the menu, maybe it’d be faster to use a keyboard shortcut!

If you are using MacOS, replace Ctrl with Cmd.

• Alt+Shift+D – Select descendents
• Ctrl+A – Select all
• Ctrl+C – Copy the selected shapes
• Ctrl+P – Paste
• Ctrl+Shift+C – Copy the style of the select shape
• Ctrl+Shift+P – Paste style

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.