A quick-start React app that shows how to group nodes and connectors in the Syncfusion® React Diagram component. Learn how to group nodes and connectors, programmatically and dynamically. Also learn how to update a node group and add annotations. Finally, it shows how to create a nested group.
The React 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.
Documentation: https://ej2.syncfusion.com/react/documentation/diagram/automatic-layout#mind-map-layout
Demo: https://ej2.syncfusion.com/react/demos/#/fluent2/diagram/grouping-and-ordering
Make sure that you have the compatible versions of Visual Studio Code, and NodeJS or a later version on your machine before starting to work on this project.
To run this application, follow these steps:
- Step 1:
Clone the repository.
git clone https://github.com/SyncfusionExamples/how-to-group-nodes-and-connectors-in-the-react-diagram- Step 2:
Open the application folder, install the dependencies and run the application.
cd how-to-group-nodes-and-connectors-in-the-react-diagram
npm install
npm start