Getting Started with React Diagram Component

23 Jul 20268 minutes to read

This section explains how to create a React application from scratch and build a simple diagram using the Syncfusion® React 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® Code Studio and more. Explore Syncfusion® AI Coding Assistant.

Prerequisites

Requirement Version
React 16 or higher
Node.js 18.0.0 or above

React supported versions

React version Minimum Syncfusion® React Diagram version
React v19 29.1.33 and above
React v18 20.2.36 and above
React v17 18.3.50 and above
React v16 16.2.45 and above

Browser Support

Browser Supported versions
Chrome Latest
Firefox Latest
Opera Latest
Edge 79+ (Chromium)
Safari 9+
iOS Safari 9+
Android Browser / Chrome for Android 4.4+

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.

NOTE

In a Vite React TypeScript application, the root component is generated as src/App.tsx by default. If your application uses JavaScript, the equivalent file is 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: Create a React application

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

Create a new React application using the following command:

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

During the setup process, the CLI will prompt you for a few configuration options. Select the following:

  • Which linter to use? → ESLint
  • Install with npm and start now? → No

The base dependencies and the Syncfusion® package are installed in the next steps.

NOTE

To use JavaScript instead of TypeScript, create the application using npm create vite@latest my-diagram-app -- --template react. The root component file will then be src/App.jsx instead of src/App.tsx.

Navigate to the project folder:

cd my-diagram-app

Step 2: 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.

NOTE

A Syncfusion® license key is not required for local development. However, a valid Syncfusion® license key must be registered before deploying the application to production. For details, see Registering a Syncfusion® license key.

Step 3: Add the required styles

The Diagram component needs Syncfusion® theme styles to display correctly. Syncfusion® theme packages include ready-to-use styles for supported components.

Install the Tailwind 3 theme package using the following command:

npm install @syncfusion/ej2-tailwind3-theme

Add the following import to the src/App.css file:

@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/diagram/index.css';

For the list of available themes, refer to the Themes documentation.

NOTE

Syncfusion® provides multiple built-in themes. If the application uses a different theme, replace the @syncfusion/ej2-tailwind3-theme/styles/diagram/index.css reference with the corresponding theme path, such as @syncfusion/ej2-material3-theme/styles/diagram/index.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.

NOTE

The @import path depth (../node_modules/...) assumes App.css lives in src/. If App.css is at the project root, use ./node_modules/... instead.

Step 4: 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. The next step replaces this code with a more complete example.

NOTE

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

Step 5: 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 callback bindings.

Replace the entire contents of src/App.tsx with the following code:

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:

Step 6: Run the application

Run the application using the following command:

npm run dev

Open the generated local URL (by default, http://localhost:5173) in the browser. The application displays the diagram as shown below:

Rendered flowchart with four nodes connected vertically by arrows

NOTE

To stop the development server, press Ctrl + C in the terminal where it is running.

NOTE

To build the application for production, run npm run build. The generated output is placed in the dist folder.

Next steps

To explore the Diagram component in more depth, refer to the following topics: