Syncfusion AI Assistant

How can I help you?

Getting Started with React Diagram Component

20 May 20266 minutes to read

This section explains how to create a React application from scratch and build a simple diagram using the Syncfusion® Diagram component.

Ready to streamline your Syncfusion^® React development? Discover the full potential of Syncfusion^® React components with Syncfusion^® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion^® CodeStudio and more. Explore Syncfusion^® AI Coding Assistant

Prerequisites

Before getting started, ensure that your development environment meets the system requirements for Syncfusion® React UI components

Before You Begin

This guide uses the React application structure generated by Vite with the TypeScript template.

The main files used in this guide are:

src/App.tsx — Defines the root React component.
src/App.css — Contains Syncfusion® theme references.
src/main.tsx — Application entry point.
index.html — Root HTML file.

NOTE

In a Vite React TypeScript application, the root component is commonly generated as src/App.tsx. If your application uses JavaScript, the equivalent file is typically src/App.jsx.

NOTE

This guide uses the TypeScript template for better type checking with Diagram models such as NodeModel, ConnectorModel, and FlowShapeModel.

Step 1: Set up the React environment

Use Vite to create and manage React applications. Vite provides a fast development environment and optimized builds for modern React applications. Syncfusion® React documentation also recommends Vite for setting up React applications.

Step 2: Create a React application

Create a new React application using the below command.

npm create vite@latest my-diagram-app -- --template react-ts

If Vite prompts you to install dependencies and start the project immediately, choose No. The Syncfusion package is installed in a later step.

Navigate to the project folder:

cd my-diagram-app

Install the application dependencies:

npm install

NOTE

If you prefer JavaScript instead of TypeScript, create the application using npm create vite@latest my-diagram-app -- --template react.

Step 3: Install the Syncfusion® React Diagram package

All Syncfusion Essential® JS 2 packages are available in the npmjs.com registry.

Install the React Diagram package using the following command:

npm install @syncfusion/ej2-react-diagrams

NOTE

Installing @syncfusion/ej2-react-diagrams automatically installs the required dependency packages.

Step 4: Add the required CSS references

Add the required Syncfusion® styles to the src/App.css file by replacing the existing content with the following CSS imports:

@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-react-diagrams/styles/tailwind3.css';

NOTE

Syncfusion® provides multiple built-in themes. If your application uses a different theme, replace the tailwind3.css references with the corresponding theme file, such as material3.css.

NOTE

Ensure that App.css is imported in the src/App.tsx file so that the theme styles are applied to the Diagram component.

Step 5: Add the Diagram component

Import DiagramComponent from @syncfusion/ej2-react-diagrams and add it to the React component.

Update the src/App.tsx file as follows:

import { DiagramComponent } from '@syncfusion/ej2-react-diagrams';
import './App.css';

function App() {
  return (
    <DiagramComponent
      id="diagram"
      width="100%"
      height="580px"
    />
  );
}

export default App;

At this stage, the Diagram component renders an empty canvas.

NOTE

The Diagram component must have a valid height. If the height is not set, the Diagram canvas may not be visible.

NOTE

In a Vite React application, the root element is defined in index.html as <div id="root"></div>, and the application is rendered from src/main.tsx.

Step 6: Create your first Diagram with nodes and connectors

This section explains how to create a simple flowchart by adding nodes, customizing their appearance, and connecting them using connectors.

The following example creates a flowchart with four nodes: Start, Process, Decision, and End. It also applies common node and connector settings using the getNodeDefaults and getConnectorDefaults properties.

Update the src/App.tsx file as follows:

import {
  DiagramComponent,
  type ConnectorModel,
  type FlowShapeModel,
  type NodeModel
} from '@syncfusion/ej2-react-diagrams';
import './App.css';

const terminator: FlowShapeModel = {
  type: 'Flow',
  shape: 'Terminator'
};

const process: FlowShapeModel = {
  type: 'Flow',
  shape: 'Process'
};

const decision: FlowShapeModel = {
  type: 'Flow',
  shape: 'Decision'
};

const nodes: NodeModel[] = [
  {
    id: 'node1',
    offsetX: 300,
    offsetY: 100,
    shape: terminator,
    annotations: [
      {
        content: 'Start'
      }
    ]
  },
  {
    id: 'node2',
    offsetX: 300,
    offsetY: 200,
    shape: process,
    annotations: [
      {
        content: 'Process'
      }
    ]
  },
  {
    id: 'node3',
    offsetX: 300,
    offsetY: 300,
    shape: decision,
    annotations: [
      {
        content: 'Decision?'
      }
    ]
  },
  {
    id: 'node4',
    offsetX: 300,
    offsetY: 400,
    shape: terminator,
    annotations: [
      {
        content: 'End'
      }
    ]
  }
];

const connectors: ConnectorModel[] = [
  {
    id: 'connector1',
    sourceID: 'node1',
    targetID: 'node2'
  },
  {
    id: 'connector2',
    sourceID: 'node2',
    targetID: 'node3'
  },
  {
    id: 'connector3',
    sourceID: 'node3',
    targetID: 'node4'
  }
];

function nodeDefaults(node: NodeModel): NodeModel {
  node.width = 140;
  node.height = 50;
  node.style = {
    fill: '#E8F4FF',
    strokeColor: '#357BD2'
  };
  return node;
}

function connectorDefaults(connector: ConnectorModel): ConnectorModel {
  connector.type = 'Orthogonal';
  connector.targetDecorator = {
    shape: 'Arrow',
    width: 10,
    height: 10
  };
  return connector;
}

function App() {
  return (
    <DiagramComponent
      id="diagram"
      width="100%"
      height="580px"
      nodes={nodes}
      connectors={connectors}
      getNodeDefaults={nodeDefaults}
      getConnectorDefaults={connectorDefaults}
    />
  );
}

export default App;

In this example:

offsetX and offsetY define the position of each node.
shape defines the node shape configuration, and FlowShapeModel.shape specifies flowchart shapes such as Terminator, Process, or Decision.
The annotations property adds text inside each node using the content field.
sourceID and targetID define the connection between nodes.
getNodeDefaults applies common width, height, fill color, and stroke color to all nodes.
getConnectorDefaults applies common connector settings, such as orthogonal routing and target arrows.

Step 7: Run the application

Run the application using the following command:

npm run dev

Open the generated local URL in the browser. The application displays the diagram as shown below:

Getting started

Search docs

Ask Syncfusion AI Assistant