Explore Node Types In The React Diagram

A quick-start project that shows types of nodes and node shapes in the Syncfusion React Diagram Component. The node types, such as HTML, text, image, SVG, and path data, are explained. You’ll also see the basic, flow, UML, and BPMN node types with their own sets of built-in shapes.

The React Diagram is a feature-rich library for creating, visualizing, and editing interactive diagrams. It lets users create flowcharts, organizational charts, mind maps, and BPMN charts through code or a visual interface.

In this visualization tool, graphical objects are represented as nodes. You can utilize a wide range of predefined standard shapes or create and incorporate custom shapes. You can populate diagrams with nodes and connectors created and positioned based on data from data sources. Without having to write any code, easily convert, map, and consume data in any format in the Diagram by setting a few properties. Design a node UI template and apply it to multiple nodes, ensuring consistency throughout the diagram.

The basic, flow, UML, and BPMN node types have their own set of built-in shapes. For example, the basic node type contains the rectangle, ellipse, triangle, and many more shape types. These shapes are used to represent geometrical information visually. The flow shapes are used to represent the process flow, such as for analyzing and designing. To create a node with geometric values without any specific standard figures like height or width, you can use the path node type. The BPMN node type is used to create a standard business process diagram. Similarly, the UML node type is used to create UML class diagrams, interfaces, and enumerations.

Documentations: https://ej2.syncfusion.com/react/documentation/diagram/interaction

Demo: https://ej2.syncfusion.com/react/demos/#/material3/diagram/shape-gallery

Project prerequisites

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.

How to run this application

To run this application, follow these steps:

• Step 1:

   Clone the repository.
  

  git clone https://github.com/SyncfusionExamples/explore-node-types-in-the-react-diagram
  

• Step 2:

   Open the application folder, install the dependencies, and run the application.
  

  cd explore-node-types-in-the-react-diagram
  npm install
  npm start