• Create visual diagrams (flowcharts, org-charts, BPMN, UML)
• Build interactive diagrams with nodes and connectors
• Apply layouts (hierarchical, org-chart, mindmap, radial, flowchart)
• Design BPMN or UML diagrams for business processes
• Add interaction (drag, resize, selection, undo/redo)
• Export or serialize diagrams to JSON/images

1. Nodes - Rectangles, circles, flowchart shapes, custom shapes
2. Connectors - Lines linking nodes (Straight, Orthogonal, Bezier)
3. Labels - Text annotations on nodes and connectors
4. Ports - Connection points on node boundaries
5. Swimlanes - Horizontal/vertical lanes for process diagrams
6. Layouts - Automatic positioning (hierarchical, org-chart, mindmap, etc.)
7. BPMN Shapes - Business process diagram standardized shapes
8. UML Diagrams - Class and sequence diagram notation
9. Symbol Palette - Draggable symbol library
10. Data Binding - Render diagrams from JSON data

• Interactive editing: Drag, resize, rotate nodes and connectors
• Auto-layout: Hierarchical, org-chart, mindmap, radial, flowchart layouts
• BPMN & UML: Built-in shape libraries for standard diagrams
• Serialization: Save/load diagrams as JSON
• Export: PNG, SVG, PDF image export and print
• Undo/Redo: Full history support
• Virtualization: Render large diagrams efficiently
• Accessibility: WCAG 2.1 compliance with keyboard navigation

• Installation and dependencies
• Theme setup (material, bootstrap, fabric)
• CSS/SCSS imports
• Basic DiagramComponent usage
• Module injection pattern
• Standalone component setup

• Creating and adding nodes to diagram
• Offsetting and positioning (offsetX, offsetY)
• Node dimensions (width, height)
• Built-in shapes (Flow, Basic, Path)
• Custom styling (fill, stroke, opacity)
• Node templates and appearance
• Expand/collapse node groups
• Node events (click, select, drag)
• getNodeDefaults pattern for style defaults

• Three connector types: Straight, Orthogonal, Bezier
• Segments configuration and pathfinding
• sourceID and targetID linking nodes
• Multiple segments in connectors
• Bezier control points and orientation
• Connector customization (stroke, fill, dashing)
• Connector events and interaction
• getConnectorDefaults pattern for style defaults

• Adding annotations to nodes and connectors
• Label appearance (font, color, bold, italic, alignment)
• Positioning labels on connectors (start, end, center)
• Node labels vs connector labels
• Label interaction (edit mode, drag, resize)
• Label events (edit, focus, blur)
• Formatting with markdown or HTML

• Port types and positioning on nodes
• Appearance customization (shape, fill, size)
• Connecting connectors to specific ports
• Connection visibility and constraints
• Port interaction and visibility
• getPortDefaults pattern

• Built-in shape types: Flow, Basic, Path, Image, HTML, Native SVG
• Flow chart shapes (process, decision, start, end, etc.)
• Style properties (fill, stroke, strokeWidth, dashArray, shadow)
• CSS class and theme customization
• Gradient and pattern fills

• BPMN module injection and setup
• BPMN shapes overview and standard notation
• Activities (task, subprocess, expanded subprocess, loop)
• Events (start, end, intermediate catch/throw)
• Gateways (exclusive, parallel, inclusive, complex)
• Flows (sequence flow, message flow, association)
• Data objects and data sources
• Groups and text annotations
• BPMN-specific styling and labels

• UML class diagram shapes
• Classifier shapes (class, interface, enumeration, package, component)
• Class attributes, methods, visibility modifiers
• UML relationships (association, generalization, aggregation, composition)
• UML sequence diagrams
• Lifelines, actors, messages (sync, async, return)
• Interaction frames and combined fragments

• Hierarchical tree layout with top-down, bottom-up, left-right, right-left
• Organizational chart layout
• Mindmap layout (sub-trees, branches)
• Radial tree layout
• Flowchart layout with swimlanes
• Complex hierarchical tree with extended nodes
• Automatic layout configuration
• Layout customization (orientation, spacing, margin)
• Layout events and completion

• Swimlane structure overview (header, children, phases)
• Creating lanes and phases within swimlanes
• Swimlane children positioning and constraints
• Swimlane headers and labeling
• Swimlane palette integration
• Swimlane interaction (resize, move, add/remove children)

• Grouping nodes together
• Group operations (add/remove children, expand/collapse)
• Container nodes with padding and layout
• Child positioning within containers
• Container constraints

• SymbolPaletteComponent setup and integration
• Defining palette symbols and categories
• Drag and drop symbols to diagram
• Palette customization (icons, search, categories, size)
• Symbol palette events
• Creating custom symbol libraries

• DataManager and dataSourceSettings configuration
• Mapping data to nodes (id, parentId, nodeTemplate)
• Rendering organizational charts from JSON data
• PostgreSQL data source integration
• setNodeTemplate for data-driven node styling
• Dynamic data updates and refresh

• Node selection, drag, and resize interactions
• Tool modes (pointer, draw, pan, pan-select)
• Constraints (node constraints, connector constraints, diagram constraints)
• Commands (keyboard shortcuts, custom commands)
• Undo and Redo functionality
• Context menu (right-click menu)
• User handles (custom connection handles)

• saveDiagram and loadDiagram (JSON serialization)
• Export to image formats (PNG, SVG, PDF)
• Print diagram functionality
• Visio file import (.vsdx)
• EJ1 API migration serialization
• Custom serialization handling

• Layers (add, lock, visibility, ordering)
• Virtualization (performance optimization for large diagrams)
• Grid lines (snapping, dots/lines, step size)
• Ruler (horizontal and vertical measurement rulers)
• Scroll settings (auto-scroll, pan)
• Page settings (size, orientation, margin, fit to page)
• Tooltip configuration
• Overview panel for navigation
• Localization and language support
• Accessibility (WCAG, ARIA labels, keyboard navigation)

// ❌ Swimlane is NOT an injectable module
Diagram.Inject(BpmnDiagrams, Swimlane);

// ✅ Only inject verified documented modules
Diagram.Inject(BpmnDiagrams);

📄 Verify injectable modules in:

references/bpmn-diagrams.md

,

references/swimlanes.md

// ❌ whiteSpace is NOT a valid TextStyleModel property
annotations: [{
  content: 'Multi\nLine',
  style: { fontSize: 11, whiteSpace: 'pre-wrap' }  // ❌
}]

// ✅ Use \n in content — valid style props:
// fontSize, color, bold, italic, fontFamily,
// opacity, strokeColor, strokeWidth, fill
annotations: [{
  content: 'Multi\nLine',
  style: { fontSize: 11, color: '#000', bold: true }
}]

📄 Verify annotation style properties in:

references/labels-and-annotations.md

// ❌ updateNode() does not exist in EJ2 Diagram API
this.diagram.updateNode('nodeId', { style: { fill: '#ff0000' } });

// ✅ getObject() → mutate property → dataBind()
const node = this.diagram.getObject('nodeId') as NodeModel;
if (node) {
  node.style!.fill = '#ff0000';
  this.diagram.dataBind(); // ← always required after mutation
}

📄 Verify runtime APIs in:

references/nodes.md

• Virtualization: For diagrams with 1000+ nodes, enable virtualization in references/diagram-settings.md
• Layout Performance: Pre-compute positions for complex hierarchies
• Connector Updates: Use

  connectorChanges

  instead of recreating connectors
• Export Large Diagrams: Use incremental approach for PDFs > 50MB

• Choose your diagram type: flowchart, BPMN, UML, org-chart, etc.
• Read the relevant reference files above
• Check Syncfusion Diagram Docs for API details
• Explore examples in their sample repository