Skip to content

Commit d9e3db8

Browse files
author
Anto Gibson
authored
Update README.md
1 parent ff0df69 commit d9e3db8

File tree

1 file changed

+30
-2
lines changed

1 file changed

+30
-2
lines changed

README.md

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,30 @@
1-
# how-to-group-nodes-and-connectors-in-the-react-diagram
2-
A quick-start React app that shows how to group nodes and connectors in the Syncfusion React Diagram component
1+
# How to Group Nodes and Connectors in the React Diagram
2+
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.
3+
4+
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.
5+
6+
Documentation: [https://ej2.syncfusion.com/react/documentation/diagram/automatic-layout#mind-map-layout](https://ej2.syncfusion.com/react/documentation/diagram/group)
7+
8+
Demo: https://ej2.syncfusion.com/react/demos/#/fluent2/diagram/grouping-and-ordering
9+
10+
------------------------------------------------------------------------------------------------
11+
12+
## Project prerequisites
13+
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.
14+
15+
-------------------------------------------------------------------------------------------------
16+
17+
## How to run this application
18+
To run this application, follow these steps:
19+
- **Step 1:**
20+
Clone the repository.
21+
```bash
22+
git clone https://github.com/SyncfusionExamples/how-to-group-nodes-and-connectors-in-the-react-diagram
23+
```
24+
- **Step 2:**
25+
Open the application folder, install the dependencies and run the application.
26+
```bash
27+
cd how-to-group-nodes-and-connectors-in-the-react-diagram
28+
npm install
29+
npm start
30+
```

0 commit comments

Comments
 (0)