1

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): Horizontal tree with options

What I found today with my diagram (notice the lack of options): Horizontal tree-diagram not recognized as such

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?

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.

Tree layout containers highlighted in the Shapes > Advanced panel

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!

  • Indeed this is what I found eventually. I have since created a discussion on the Draw.io Google Groups (which seems to be the most active community), located here. Basically the two last posts confirms this. – Blkbox Jul 27 '18 at 15:36
  • It is still possible to use trees outside of the containers, but then the plugin must be loaded. Here is a summary on how to load/unload plugins that I made on in the same Google Groups: groups.google.com/forum/#!searchin/drawio/trees%7Csort:date/… (the trees plugin is particular). – Blkbox Jul 27 '18 at 15:37
0

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:

Trees subpanel

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.