syncfusion-react-diagram

What this skill does

# 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](#when-to-use-this-skill)
- [Component Overview](#component-overview)
- [Documentation and Navigation Guide](#documentation-and-navigation-guide)
  - [Getting Started](#getting-started)
  - [Nodes](#nodes)
  - [Connectors](#connectors)
  - [Labels and Annotations](#labels-and-annotations)
  - [Ports](#ports)
  - [Shapes and Styles](#shapes-and-styles)
  - [BPMN Diagrams](#bpmn-diagrams)
  - [UML Diagrams](#uml-diagrams)
  - [Layouts](#layouts)
  - [Swimlanes](#swimlanes)
  - [Groups and Containers](#groups-and-containers)
  - [Symbol Palette](#symbol-palette)
  - [Data Binding](#data-binding)
  - [Interaction and Tools](#interaction-and-tools)
  - [Serialization and Export](#serialization-and-export)
  - [Diagram Settings](#diagram-settings)
- [Quick Start Example](#quick-start-example)
- [Common Patterns](#common-patterns)
- [Module Injection Reference](#module-injection-reference)
- [Key Props](#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](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](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](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](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](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](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](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](references/uml-diagrams.md)

**When to read:**
- Building UML class diagrams with attributes and methods
- Modeling relations