Syncfusion React Diagram

Syncfusion React Diagram

The Syncfusion React Diagram component enables building rich, interactive diagrams including flowcharts, organizational charts, BPMN process flows, UML diagrams, mind maps, and network diagrams. It renders using SVG and supports extensive customization through nodes, connectors, ports, annotations, layouts, and data binding.

Table of Contents

• When to Use This Skill
• Component Overview
• Documentation and Navigation Guide
  • Getting Started
  • Nodes
  • Connectors
  • Labels and Annotations
  • Ports
  • Shapes and Styles
  • BPMN Diagrams
  • UML Diagrams
  • ER Diagrams
  • Layouts
  • Swimlanes
  • Groups and Containers
  • Symbol Palette
  • Data Binding
  • Interaction and Tools
  • Serialization and Export
  • Diagram Settings
• Quick Start Example
• Common Patterns
• Module Injection Reference
• Key Props

When to Use This Skill

Use this skill when users need to:

• Build flowcharts representing processes, decision trees, or workflows
• Create org charts from hierarchical or flat data sources
• Model BPMN diagrams with activities, events, gateways, and flows
• Draw UML diagrams including class diagrams and sequence diagrams
• Visualize mind maps or radial layouts from data
• Design network/entity diagrams with nodes and relationship connectors
• Implement swimlane diagrams with lanes and phases
• Drag and drop shapes from a symbol palette onto a canvas
• Bind data to automatically generate diagram structure
• Serialize and restore diagram state as JSON
• Export or print diagram content as image/SVG

Important: API Verification Required

API Verification Required: Always verify API class names, properties, and signatures by reading reference files (references/*.md) BEFORE generating code examples. Do not assume or infer class names.

Component Overview

The Diagram component is built around:

• Nodes — Graphical shapes (rectangles, circles, flow shapes, custom) placed on the canvas
• Connectors — Lines/arrows linking nodes or freestanding points
• Annotations — Text labels attached to nodes or connectors
• Ports — Named connection points on nodes for precise connector anchoring
• Layouts — Automatic arrangement algorithms (hierarchical, org-chart, mindmap, radial, flowchart)
• Symbol Palette — Sidebar of draggable shape symbols
• Module System — Opt-in feature modules (Inject directive) to keep bundle size lean

All diagram elements are rendered using SVG for crisp, resolution-independent graphics.

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

When to read:

• First-time setup of the Diagram component
• Installing packages, CSS imports, and theme configuration
• Creating a minimal DiagramComponent
• Understanding the Inject module system
• Next.js or Preact integration

Covers:

• npm install and dependencies
• Vite/CRA project setup
• CSS theme import paths
• Basic DiagramComponent with nodes and connectors
• Module injection with <Inject services={[...]} />
• Next.js and Preact usage notes

Nodes

📄 Read: references/nodes.md

When to read:

• Adding, positioning, and sizing nodes
• Customizing node appearance (fill, stroke, shadow)
• Working with node shapes (Flow, Basic, Path, Image, HTML)
• Handling node events (click, drag, resize)
• Expanding/collapsing nodes at runtime
• Setting default node properties via getNodeDefaults

Covers:

• Creating nodes via nodes collection
• offsetX/offsetY, width/height positioning
• Adding/removing nodes at runtime (diagram.add, diagram.remove)
• Style properties (fill, strokeColor, opacity, gradient)
• getNodeDefaults pattern for consistent styling
• Node expand/collapse with expandIcon/collapseIcon
• Node interaction events

Connectors

📄 Read: references/connectors.md

When to read:

• Drawing lines/arrows between nodes or freestanding points
• Choosing connector type (Straight, Orthogonal, Bezier)
• Configuring connector segments and routing
• Customizing decorator (arrow) shapes
• Setting sourceID/targetID to link nodes
• Setting getConnectorDefaults for consistent styling

Covers:

• Connector types: Straight, Orthogonal, Bezier
• sourcePoint/targetPoint for freestanding connectors
• sourceID/targetID for node-to-node connections
• Multiple segment configuration
• Bezier control points and segment edit orientation
• Arrow/decorator customization
• Connector events and interaction
• getConnectorDefaults pattern

Labels and Annotations

📄 Read: references/labels-and-annotations.md

When to read:

• Adding text labels to nodes or connectors
• Styling annotation text (font, color, bold, alignment)
• Making labels draggable or editable
• Positioning labels relative to nodes/connectors
• Handling label-specific events

Covers:

• annotations array on nodes and connectors
• Label content, style, offset, alignment
• Node labels vs. connector labels
• Label interaction (edit on double-click, drag)
• Label appearance (background, border, padding)
• Label events

Ports

📄 Read: references/ports.md

When to read:

• Creating named connection points on nodes
• Controlling where connectors attach to a node
• Styling and positioning ports
• Restricting connector connections to specific ports
• Handling port interaction events

Covers:

• Port types and ports array on nodes
• Port positioning (offset, alignment)
• Port appearance (shape, fill, stroke)
• Connecting connectors to specific ports via sourcePortID/targetPortID
• Port interaction and visibility options
• Port events

Shapes and Styles

📄 Read: references/shapes-and-styles.md

When to read:

• Choosing the right shape type (Flow, Basic, Path, Image, HTML, Native SVG)
• Applying fill colors, gradients, and stroke styles
• Customizing node appearance with CSS or themes
• Understanding shape property structure

Covers:

• shape.type options: Flow, Basic, Path, Image, HTML, Native
• Flowchart shape values (Terminator, Process, Decision, etc.)
• Basic shape values (Rectangle, Ellipse, Diamond, etc.)
• Style properties: fill, strokeColor, strokeWidth, strokeDashArray, opacity
• Linear and radial gradients
• Shadow effect
• CSS class-based styling

BPMN Diagrams

📄 Read: references/bpmn-diagrams.md

When to read:

• Modeling business process flows using BPMN notation
• Using BPMN-specific shapes (activities, events, gateways)
• Drawing sequence flows, message flows, associations
• Adding data objects, data sources, text annotations, and groups

Covers:

• BpmnDiagrams module injection
• BPMN shape type: shape.type = 'Bpmn'
• Activities: Task types, Subprocess, Expanded Subprocess
• Events: Start, End, Intermediate events and their triggers
• Gateways: Exclusive, Parallel, Inclusive, Complex
• Flows: Sequence, Message, Association
• Data objects and data sources
• BPMN groups and text annotations

UML Diagrams

📄 Read: references/uml-diagrams.md

When to read:

• Building UML class diagrams with attributes and methods
• Modeling relationships (association, generalization, dependency)
• Creating UML sequence diagrams with lifelines and messages
• Working with classifiers (class, interface, enumeration, collaboration)

Covers:

• UML class diagram shapes (shape.type = 'UmlClassifier')
• Classifier types: Class, Interface, Enumeration, Collaboration
• Attributes, operations, and members syntax
• UML relationship connector types
• UML sequence diagram (shape.type = 'UmlActivity')
• Lifelines, messages, and fragments

ER Diagrams

📄 Read: references/entity-relationship-diagrams.md

When to read:

• Building Entity Relationship diagrams to visualize database structure
• Creating ER entity nodes representing database tables with fields
• Defining field properties (primary key, foreign key, data type, constraints)
• Adding or removing entity fields at runtime
• Connecting entities with ER relationship connectors and multiplicity
• Styling ER entity headers, field rows, and alternating row colors
• Tracking entity field changes via events

Covers:

• ErDiagrams module injection (Diagram.Inject(ErDiagrams))
• ER entity node: shape.type = 'Er' with ErShapeModel
• Header configuration: annotation, height, style
• Field configuration: id, name, dataType, isPrimaryKey, isForeignKey, constraints
• addErField / removeErField runtime methods
• fieldDefaults: alternateRowColors, height
• Field-level and node-level style overrides
• erEntityChanged event for tracking field modifications
• ER relationship connectors with ErConnectorShapeModel
• Crow's Foot multiplicity: One, Many, ZeroOrOne, OneOrMany, ZeroOrMany, OneAndOnlyOne

Layouts

📄 Read: references/layouts.md

When to read:

• Automatically arranging nodes in a tree, hierarchy, or radial pattern
• Creating org charts driven by parent-child data
• Building mind maps from data sources
• Configuring flowchart layouts with decision/process shapes
• Customizing layout spacing, orientation, and alignment

Covers:

• HierarchicalTree — top-down/left-right tree layouts
• OrganizationalChart — classic org chart with getNodeDefaults/getConnectorDefaults
• MindMap — branching mind map layout
• RadialTree — circular radial layout
• Flowchart layout (automatic flow arrangement)
• ComplexHierarchicalTree for multi-parent hierarchies
• layout property: type, orientation, margin, horizontalSpacing, verticalSpacing
• LayoutAnimation module
• Layout events

Swimlanes

📄 Read: references/swimlanes.md

When to read:

• Creating multi-lane process diagrams
• Adding phases to represent timeline or stages
• Configuring swimlane headers and orientation
• Placing child nodes inside lanes
• Using swimlane shapes from the symbol palette

Covers:

• Swimlane shape.type = 'SwimLane'
• Lanes and phases configuration
• Header text, size, and orientation
• Child nodes inside lanes
• Swimlane palette integration
• Swimlane interaction (add/remove lanes)

Groups and Containers

📄 Read: references/groups-and-containers.md

When to read:

• Grouping multiple nodes for collective movement/selection
• Adding/removing children from groups at runtime
• Using container nodes to visually bound child nodes
• Configuring padding, fit-to-children behavior

Covers:

• Group node shape.type = 'Group' and children array
• Grouping/ungrouping nodes via diagram methods
• Adding children at runtime
• Container node configuration
• Padding and auto-fit behavior for containers

Symbol Palette

📄 Read: references/symbol-palette.md

When to read:

• Adding a drag-and-drop shape sidebar to your diagram app
• Defining custom symbol sets (palettes)
• Customizing palette icon size, search behavior, and accordion
• Handling symbolDragEnter/symbolDrop events

Covers:

• SymbolPaletteComponent setup alongside DiagramComponent
• Defining palettes with symbol arrays
• getSymbolInfo for display customization
• Palette accordion: expanding/collapsing groups
• Search functionality
• Symbol preview size configuration
• Palette events

Data Binding

📄 Read: references/data-binding.md

When to read:

• Generating diagrams automatically from JSON or remote data
• Mapping id and parentId fields for hierarchy
• Using DataManager for remote or filtered data
• Customizing node appearance based on data properties (setNodeTemplate)
• Connecting to a PostgreSQL or external data source

Covers:

• dataSourceSettings property
• id, parentId field mapping
• DataManager with local arrays or remote URLs
• getNodeDefaults and setNodeTemplate for data-driven styling
• PostgreSQL data source integration
• Rendering org charts from flat JSON data

Interaction and Tools

📄 Read: references/interaction-and-tools.md

When to read:

• Enabling/disabling node and connector interactions (drag, resize, select)
• Switching diagram tool modes (pointer, draw, pan)
• Configuring diagram constraints
• Adding custom keyboard commands or toolbar actions
• Implementing undo/redo
• Setting up context menus or user handles

Covers:

• DiagramConstraints, NodeConstraints, ConnectorConstraints
• tool property: DiagramTools.Default, ZoomPan, DrawOnce
• Selection, drag, resize, rotate interactions
• commands for keyboard shortcuts
• Undo/Redo (UndoRedo module)
• Context menu (DiagramContextMenu module)
• User handles for custom action buttons on nodes
• Snapping module and snap settings

Serialization and Export

📄 Read: references/serialization-and-export.md

When to read:

• Saving and restoring diagram state as JSON
• Exporting the diagram as PNG, JPEG, or SVG
• Printing diagram content
• Importing Visio (.vsdx) files
• Migrating from EJ1 diagram format

Covers:

• diagram.saveDiagram() and diagram.loadDiagram(json)
• PrintAndExport module injection
• Export settings: format, region, margin, background
• Print dialog and options
• Visio file import (visio.md)
• EJ1 serialization compatibility (Ej1Serialization module)

Diagram Settings

📄 Read: references/diagram-settings.md

When to read:

• Managing diagram layers (visibility, locking, ordering)
• Enabling virtualization for performance with large diagrams
• Configuring grid lines, snapping, and rulers
• Setting page size, orientation, and margins
• Configuring scroll behavior and limits
• Adding tooltips to diagram elements
• Using the Overview component for minimap navigation
• Enabling localization or RTL support
• Understanding accessibility features

Covers:

• Layers: add, lock, set visibility, active layer
• Virtualization module for large diagrams
• Grid lines: dots, lines, snap settings
• Ruler configuration
• scrollSettings: scrollLimit, minZoom, maxZoom
• pageSettings: size, orientation, background, multiplePage
• Tooltip on nodes and connectors
• OverviewComponent minimap setup
• Localization and RTL
• ARIA and keyboard accessibility

Quick Start Example

Minimal Flowchart

import { DiagramComponent, NodeModel, ConnectorModel, Inject, UndoRedo } from '@syncfusion/ej2-react-diagrams';

const nodes: NodeModel[] = [
  { id: 'start', offsetX: 300, offsetY: 80, width: 140, height: 50,
    shape: { type: 'Flow', shape: 'Terminator' }, annotations: [{ content: 'Start' }] },
  { id: 'process', offsetX: 300, offsetY: 180, width: 140, height: 50,
    shape: { type: 'Flow', shape: 'Process' }, annotations: [{ content: 'Process' }] },
  { id: 'end', offsetX: 300, offsetY: 290, width: 140, height: 50,
    shape: { type: 'Flow', shape: 'Terminator' }, annotations: [{ content: 'End' }] },
];
const connectors: ConnectorModel[] = [
  { id: 'c1', sourceID: 'start', targetID: 'process' },
  { id: 'c2', sourceID: 'process', targetID: 'end' },
];

export default function App() {
  return (
    <DiagramComponent id="diagram" width={'100%'} height={'500px'}
      nodes={nodes} connectors={connectors}
      getConnectorDefaults={(obj) => { obj.type = 'Orthogonal'; return obj; }}>
      <Inject services={[UndoRedo]} />
    </DiagramComponent>
  );
}

CSS import: @import '@syncfusion/ej2-react-diagrams/styles/material.css'; and peer CSS for ej2-base, ej2-popups, ej2-splitbuttons, ej2-navigations.

Common Patterns

Pattern 1: Org Chart from Data Source

import { DiagramComponent, HierarchicalTree, DataBinding, Inject } from '@syncfusion/ej2-react-diagrams';
import { DataManager } from '@syncfusion/ej2-data';

const data = [
  { Name: 'CEO' },
  { Name: 'CTO', ReportingPerson: 'CEO' },
  { Name: 'Dev Lead', ReportingPerson: 'CTO' },
];

export default function App() {
  return (
    <DiagramComponent id="diagram" width={'100%'} height={'500px'}
      dataSourceSettings={{ id: 'Name', parentId: 'ReportingPerson', dataManager: new DataManager(data) }}
      layout={{ type: 'OrganizationalChart' }}
      getNodeDefaults={(node) => { node.width = 120; node.height = 40; return node; }}
      getConnectorDefaults={(obj) => { obj.type = 'Orthogonal'; return obj; }}>
      <Inject services={[DataBinding, HierarchicalTree]} />
    </DiagramComponent>
  );
}

Pattern 2: Save and Load Diagram State

Use diagramInstance.saveDiagram() to serialize to JSON string; diagramInstance.loadDiagram(json) to restore. Inject UndoRedo for history support. For full examples see references/serialization-and-export.md.

Pattern 3: Diagram with Symbol Palette

Render SymbolPaletteComponent alongside DiagramComponent. Define palettes with shape arrays, set symbolHeight/symbolWidth, and users can drag shapes onto the canvas. For full examples see references/symbol-palette.md.

Module Injection Reference

Inject only the modules your diagram uses: <Inject services={[HierarchicalTree, DataBinding, UndoRedo]} />

Key Props

Related Components

• Chart - Data-driven charts and graphs
• Kanban - Kanban board visualization
• Data Grid - Tabular data display