How to Group Nodes and Connectors in the Vue Diagram Component

Learn how to group nodes and connectors in the Syncfusion Vue Diagram component. This video demonstrates how to group nodes programmatically and dynamically. It also shows how to update a node group and add annotations to it. Finally, it shows how to create a nested group.

The Vue Diagram is a feature-rich component for visualizing, creating, and editing interactive diagrams. It supports creating flowcharts, organizational charts, mind maps, and BPMN charts through code or a visual interface. Grouping is used to cluster multiple nodes and connectors into a single element.

A group acts like a container for its children. Every change made to the group also affects the children. Child elements can be edited individually. A group can be added to the diagram model through a nodes collection. To define an object as a group, we need to add the child objects to the children collection of the group. We need to declare child nodes before creating the group.

To add nodes to existing groups, use the Diagram’s group method. The Diagram’s unGroup method is used for ungrouping. Groups can even be nested within the child nodes of other groups.

Explore our tutorial videos: https://www.syncfusion.com/tutorial-videos

Example project: https://github.com/SyncfusionExamples/How-to-Group-Nodes-and-Connectors-in-the-Vue-Diagram-Component