-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
ff0df69
commit d9e3db8
Showing
1 changed file
with
30 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,30 @@ | ||
# how-to-group-nodes-and-connectors-in-the-react-diagram | ||
A quick-start React app that shows how to group nodes and connectors in the Syncfusion React Diagram component | ||
# How to Group Nodes and Connectors in the React Diagram | ||
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](https://ej2.syncfusion.com/react/documentation/diagram/group) | ||
|
||
Demo: https://ej2.syncfusion.com/react/demos/#/fluent2/diagram/grouping-and-ordering | ||
|
||
------------------------------------------------------------------------------------------------ | ||
|
||
## Project prerequisites | ||
Make sure that you have the compatible versions of [Visual Studio Code](https://code.visualstudio.com/download ), and [NodeJS](https://nodejs.org/en/download) or a later version on your machine before starting to work on this project. | ||
|
||
------------------------------------------------------------------------------------------------- | ||
|
||
## How to run this application | ||
To run this application, follow these steps: | ||
- **Step 1:** | ||
Clone the repository. | ||
```bash | ||
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. | ||
```bash | ||
cd how-to-group-nodes-and-connectors-in-the-react-diagram | ||
npm install | ||
npm start | ||
``` |