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: