React Diagram - Tutorial Videos

Learn how to create a simple React application and add the React Diagram component to it using Visual Studio Code. You will also see how to create and add nodes and connectors to the React Diagram component and how to customize them using properties.

Download Example: Getting Started with the React Diagram

Learn how to create and position an organizational chart using the Syncfusion React Diagram component. You will also learn how to use the Data Manager interface, import data into the React Diagram component, and automatically arrange the nodes using the organizational layout.

Download Example: Create and Position an Organizational Chart

Learn how to create and customize nodes in the Syncfusion React Diagram component. Also learn how to add and draw nodes on button click, customize them, and add styles and shapes.

Download Example: How to Create and Customize Nodes in a React Diagram

Learn how to add and customize a symbol palette in the Syncfusion React Diagram component. Also learn how to add a search bar, restrict the expansion of the palette panel, and customize the size of the symbols.

Download Example: How to Add the Symbol Palette to the React Diagram Component

Learn how to add and customize connectors in the Syncfusion React Diagram component. This video explains how to add connectors both programmatically and using the drawing tool. Also learn how to add different types of connectors and decorator shapes.

Download Example: Adding and Customizing Connectors in React Diagram

Learn how to add annotations to nodes and connectors in the Syncfusion React Diagram component. Also learn how to customize the annotations using properties like horizontal alignment, vertical alignment, and offset.

Download Example: Adding and Customizing Annotations in Nodes and Connectors in React Diagram

Learn how to add ports to nodes in the Syncfusion React Diagram component. Also learn, how to create ports programmatically and add, remove, add multiple ports, and update ports at run time using an external button click. Additionally learn how to change the style and position of ports.

Download Example: Create and Customize Ports in the React Diagram Component

Learn how to create a mind map layout using the Syncfusion React Diagram component. Also learn how to customize the nodes and connectors in the mind map layout. We also see how to align the layout using horizontal spacing, vertical spacing, layout margin properties and how to expand and collapse child nodes.

Download Example: How to Create a Mind Map Using the React Diagram

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

Download Example: How to Group Nodes and Connectors in the React Diagram

Learn how to customize the Syncfusion React Diagram and its elements by customizing the canvas page, inserting page breaks, and displaying multiple pages. Also learn how to customize the appearance and position of nodes and connectors and bridge connectors.

Download Example: Customize the React Diagram and Its Elements

Learn how to save and export the contents of the Syncfusion React Diagram as a JSON string or a file stream and load the diagram using the saved files.

Download Example: Save, Export and Print a React Diagram

Learn how to perform interactions in the Syncfusion React Diagram, including selection, dragging, resizing, rotating nodes, editing text, deleting, and restricting interactions.

Download Example: How to Perform Interactions in the React Diagram