Freeing-up Space in a Diagram

How to create space in a diagram for new elements or enlarged, existing elements without changing the big picture.

Interactive applications often allow the user to amend an existing diagram such that free space in a certain region of the diagram is required. Regardless of whether the diagram was manually arranged or by using an automatic layout algorithm , the user surely wants that the overall picture – the mental map – of the diagram is preserved while freeing-up space.

Automatically freeing-up space for new elements

Adding new elements

A common scenario requiring additional free space is when new diagram elements (e.g. nodes, labels) are inserted. If new elements can be placed freely, the application of an automatic layout algorithm that re-arranges everything would be the way to go. However, as the inserted elements should remain at the locations placed by the user, the space required by them must be cleared of any other elements. Those elements should be changed as little as possible, preserving the mental map.

Sample where space was made for new elements (blue fill color)

Enlarging an existing element

When an existing diagram element is enlarged, it is desired that the now larger element does not interfere with the other elements. Like with new elements, a whole new layout could be computed. The more intuitive solution is to only locally displace existing elements in the vicinity of the enlarged element. This approach keeps the overall picture more stable and, depending on the diagram size, may also come with better performance compared to a full new layout.

Freeing-up space using yFiles

The yFiles for HTML diagramming library offers a sophisticated solution for both application scenarios described above. It comes with a powerful Clear Area Layout algorithm that allows to generically specify a certain area that must be freed-up. The API provides specific support for the use cases described above and is flexible enough for many more, making it very easy to apply for your case!

Furthermore, different strategies are available. For example, one that acts more locally while having the goal of preserving the shapes, that is, the shape of the connections and the locations of elements relative to each other. Another strategy acts rather globally. More settings like the distance to keep between elements allow to configure the algorithm for individual scenarios.

Hierarchically arranged diagram

Empty space created by the Clear Area Layout

Examples and source code

There are several example applications that showcase how freeing-up space can be implemented. The Component Drag and Drop Demo shows how to make space for a component that is dragged onto a canvas containing an existing diagram. The Interactive Graph Restructuring Demo demonstrates how a part of a diagram can be relocated interactively. Free space is created so that the relocated elements do not interfere with other elements.

The source code of these sample applications is part of the yFiles for HTML package and available on the yWorks GitHub repository:

yFiles for HTML comes with much more sophisticated and highly customizable graph layout algorithms.