A quick-start React app that shows how to create and customize a mind map layout using the Syncfusion® React Diagram component. Also learn how to change the layout spacing, expand and collapse, and change the orientation.
The Syncfusion® React Diagram is a feature-rich library for visualizing, creating, and editing interactive diagrams. It supports creating flowcharts, organizational charts, mind maps, and BPMN charts through code or a visual interface.
A mind map is a diagram that displays nodes as a spider diagram, organizing information around a central concept. Mind maps organize, enhance learning, aid problem-solving, facilitate communication, and improve decision-making. Use horizontal or vertical orientation to arrange the mind map tree layout. By default, it is set to horizontal. Inject the Mind Map class if you want to use the mind map layout in a diagram.
Documentation: https://ej2.syncfusion.com/react/documentation/diagram/automatic-layout#mind-map-layout
Demo: https://ej2.syncfusion.com/react/demos/#/material3/diagram/mind-map.html
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-create-a-mindmap-using-the-react-diagram-component- Step 2:
Open the application folder, install the dependencies and run the application.
cd how-to-create-a-mindmap-using-the-react-diagram-component
npm install
npm start