Create and customize visual diagrams in React using Syncfusion Diagrams. Trigger for requests involving React component setup, nodes and connectors, flowcharts, org charts, process diagrams, BPMN or UML models, ER diagrams, layout algorithms, swimlanes, symbol palettes, and interactive diagram visua

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) [ER Diagrams]( er 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 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](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](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](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](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](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 symb

syncfusion-react-diagram