Reducing Complexity in Large Diagrams

Before elements can be merged into a single entity, they must be grouped in a container. Element grouping adds another hierarchy level to the items, similar to a document structure, and thus eases comprehension of the topology of the diagram.

See the above illustration in the Structure View Sample Application that is part of yFiles.

Besides the structural impact, grouped elements also act as an entity during specific gestures. Moving the container element moves all child elements automatically, as well. Depending on the scenario, the delete gesture can either remove only the container while keeping the children or remove all items with a single gesture.

Grouped elements can be merged into a single entity. This operation drastically reduces the visual clutter of a large diagram and makes it much easier to comprehend on a higher level.

Even highly nested structures become easy to explore with the ability to collapse or expand merged elements interactively.

Try this feature in the Hierarchic Grouping Sample Application that comes with yFiles. Folding a container not only hides the children but may also merge outgoing connections into a single connection. This emphasizes the black-box character of the folded element. If necessary, this behavior can also be customized to keep all existing connections while hiding the children.

yFiles’ built-in folder navigation allows users to enter (or exit) element containers independently of its open or closed state. This feature lets the user focus on local parts of the diagram without getting distracted by surrounding elements.

Particularly in a deeply nested scenario, where each expanded level adds additional elements, the folder navigation provides an easy way of reducing the complexity of the diagram.

The source code of the Structure View Sample Application is available on the yWorks GitHub repository and part of the yFiles for HTML package.

The source code of the Hierarchic Grouping Sample Application is part of all yFiles packages and available on the yWorks GitHub repository, too:

Beside these sample applications, there is also the general Graph Editor Sample Application, which lets you try all of the mentioned features directly in the browser.

Test the yFiles diagramming library with a fully functional trial package. To add interactive grouping and merging to your own application, start with the Hierarchic Grouping Sample Application that is part of the yFiles package. It’s not only a showcase application but also provides best-practice source code that you can re-use in your own project.