Reducing Complexity in Large Diagrams
Grouping related elements dramatically improves the readability and usability of diagrams
Bigger diagrams often suffer from higher complexity, which makes them hard to read in general. For many types of diagrams, combining related elements comes naturally. Adding a hierarchy level does not only improve the semantics of the diagram, but also allows to interactively combine (also called merge, fold, or collapse) these elements into a single entity. This approach reduces the overall complexity and dramatically improves the readability and usability of the diagram.
The general concept of grouping and merging elements applies to any diagram. However, certain types of diagrams with an inherent hierarchy are particularly suited, for example, network diagrams, organization charts, BPMN diagrams, or flowcharts.
yFiles, a commercial diagramming library, has built-in support for grouping and merging of elements and provides many additional features to manage the style, structure, and user interaction of nested diagrams.
Group Elements
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.
Merge Elements
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.
Navigate Folder Elements
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.
![Complete Graph](png/folding-group1-exit.148675acf3.png)
![Group 1](png/folding-group1-enter.5b061ef73b.png)
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.
Example and Source Code
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.
Utilize Grouping and Merging in Your Own Application
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.
-
Download the trial version of yFiles for your target platform at the yWorks Customer Center.
-
Navigate to the source directory of the Hierarchic Grouping Sample Application.
-
Copy the source code of the grouping/merging feature to your own project.
-
Fine-tune it to your own requirements, for example by using different settings for the automatic layout.