draw.io - Tree diagrams in draw.io no longer behaves as a tree diagram

Question

Yes, I am answering my own question!

In draw.io, I discovered it is now possible to draw tree diagramas, either with horizontal or vertical layouts. Even though they seem made out of basic shapes and connectors, new tree-specific menus were now available when such entities are selected. Those menu options help in editing the tree by selecting or addind parents, siblings or infants instead of manually adding and connecting shapes.

With those menus, I created a new horizontal tree yesterday. Today when I opened it, I wanted to add new siblings and sub-tree but I realied all the tree editing options were gone. The diagram only behaved like normal shapes connected together. For reference, the first illustration shows a new horizontal tree dragged from the drawer correctly handled as a tree.

Expected output (entities are detected as forming a horizontal tree, notice the menu options):

What I found today with my diagram (notice the lack of options):

Question:

What enables draw.io to distinguish between a bunch of shapes and a tree layout? Is it possible to convert a set of shapes appropriatly connected into a tree layout?

Answer 1

This now works without the plugin, but you must use one of the special tree layout containers under Shapes > Advanced. Look for "Tree Container", "Horizontal Tree Layout", "Mindmap". I've highlighted them in the screenshot below.

To port your existing trees simply paste them into one of the tree layout containers.

I came across your question while looking for help myself. The blog post about trees was updated in May to say that the plugin is no longer needed and trees can be added using shapes under Advanced. I tried the obvious ones (e.g. "Central Idea", "Branch") which didn't work as expected. Eventually I stumbled on this post which clued me in to the special containers.

Hope this helps!

Answer 2

Yes, I am answering my own question!

The document I used to first create the tree diagrams was a read-only link provided by the Draw.io blog, introducing "a new plugin that better supports tree diagrams", from June 2017.

The key word here is plugin. Draw.io supports plugin although their documentation remains a bit limited: according to their docs, a plugin is loaded for one-off use by using the ?p=xxxx parameter in the URL. Plugins can also be added through the Extra > Plugins... menu option and requires the path to the .js script. Doing so basically appends the same ?p=xxxx parameter every time you load a file.

Loading the ?p=trees plugin enabled a new left-panel menu with a selection of shapes behaving as described:

Even though installation instructions are provided for the plugins, their usage remains a bit undocumented; the list provided does not mention the trees.js plugins advertised on their blog, despite being published about half a year later , nor do we have the explicit path to the existing plugins. According to documentation, it should be /plugins/foo.js however the trees plugin does not fit the nomenclature provided, being instead /plugins/trees/trees.js.