syncfusion-blazor-diagram

# Implementing Syncfusion Blazor Diagram A comprehensive skill for building interactive diagrams with the Syncfusion Blazor Diagram component — flowcharts, organizational charts, mind maps, BPMN process diagrams, UML sequence diagrams, network diagrams, and more. ## When to Use This Skill Use this skill when you need to: - Create flowcharts, org charts, mind maps, or network diagrams in Blazor - Work with `SfDiagramComponent`, nodes, connectors, or shapes - Configure automatic layouts (hierarchical, radial, mind map, org chart, flowchart) - Implement BPMN process diagrams with BPMN shapes - Build swimlane diagrams for process modeling - Add symbol palettes for drag-and-drop diagram building - Bind diagram data from a collection or remote source - Implement diagram interactions (selection, drag, resize, zoom, pan) - Export diagrams to PNG/JPEG/SVG or print them - Serialize and restore diagram state (save/load) - Enable collaborative real-time editing - Add UML sequence diagrams - Handle diagram events, annotations, and ports ## 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. ⚠️ Before writing ANY code, review the **Common Mistakes** section directly below to avoid known invalid APIs and properties. ## Quick Start ```razor @using Syncfusion.Blazor.Diagram <SfDiagramComponent Width="100%" Height="600px" Nodes="@nodes" Connectors="@connectors" /> @code { DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node> { new Node { ID = "node1", OffsetX = 150, OffsetY = 150, Width = 100, Height = 50, Style = new ShapeStyle { Fill = "#6BA5D7", StrokeColor = "white" }, Annotations = new DiagramObjectCollection<ShapeAnnotation> { new ShapeAnnotation { Content = "Start" } } } }; DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector> { new Connector { ID = "conn1", SourceID = "node1", TargetID = "node2" } }; } ``` ## Common Patterns | Goal | Reference | |------|-----------| | First diagram setup | [references/getting-started.md](references/getting-started.md) | | Add/configure nodes | [references/nodes.md](references/nodes.md) | | Add/configure connectors | [references/connectors.md](references/connectors.md) | | Use built-in shapes | [references/shapes.md](references/shapes.md) | | Add text labels | [references/annotations.md](references/annotations.md) | | Define connection points | [references/ports.md](references/ports.md) | | Org charts / auto-layout | [references/layout.md](references/layout.md) | | Swimlane diagrams | [references/swimlane.md](references/swimlane.md) | | BPMN process diagrams | [references/bpmn.md](references/bpmn.md) | | Drag-and-drop palette | [references/symbol-palette.md](references/symbol-palette.md) | | Bind data to diagram | [references/data-binding.md](references/data-binding.md) | | Selection, drag, zoom | [references/interaction.md](references/interaction.md) | | Handle diagram events | [references/events.md](references/events.md) | | Save and load diagrams | [references/serialization.md](references/serialization.md) | | Export / print | [references/export-print.md](references/export-print.md) | | CSS / theme styling | [references/styling.md](references/styling.md) | | UML sequence diagrams | [references/uml-sequence.md](references/uml-sequence.md) | | Real-time collaboration | [references/collaborative-editing.md](references/collaborative-editing.md) | | Context menu, tooltips, rulers, localization | [references/advanced-features.md](references/advanced-features.md) | | Miniature overview / bird's-eye navigation | [references/overview-component.md](references/overview-component.md) | --- ## Documentation and Navigation Guide ### Getting Started 📄 **Read:** [references/getting-started.md](references/getting-started.md) - NuGet package installation (`Syncfusion.Blazor.Diagram`) - Service registration and namespace imports - Setup for Blazor Server, WebAssembly, MAUI - CSS/theme configuration - Minimal working diagram example ### Nodes 📄 **Read:** [references/nodes.md](references/nodes.md) - Creating and configuring nodes - Node types: basic, flow shape, path, image, HTML, native - Node positioning, sizing, z-order - Node style (fill, stroke, opacity) - Expand/collapse children - Node events and interaction ### Connectors 📄 **Read:** [references/connectors.md](references/connectors.md) - Creating connectors between nodes or free-floating - Segment types: straight, orthogonal, bezier - Multiple segments per connector - Arrows, line style, and decoration - Connector interaction (bend, drag endpoints) - Connector events ### Shapes 📄 **Read:** [references/shapes.md](references/shapes.md) - Built-in basic shapes (rectangle, ellipse, triangle, etc.) - Flow shapes (process, decision, terminator, etc.) - Path shapes (custom SVG paths) - Image and HTML content shapes - Native SVG shapes - Choosing the right shape type ### Annotations 📄 **Read:** [references/annotations.md](references/annotations.md) - Adding text labels to nodes and connectors - Annotation positioning and alignment - Font, color, and style customization - Inline editing of annotations - Multiple annotations per element - Annotation interaction events - Interaction constraints: `AnnotationConstraints` flags, `DragLimit` (PathAnnotation) - Hyperlinks with `Hyperlink` (`Url`, `Content`, `OpenMode`) - Events: SelectionChanging/Changed, PositionChanging/Changed, SizeChanging/Changed, RotationChanging/Changed, TextChanging/Changed ### Ports 📄 **Read:** [references/ports.md](references/ports.md) - Connection ports (fixed connection points on nodes) - Dynamic ports (created at runtime) - Port positioning (relative and absolute) - Port appearance and visibility - Restricting connections to specific ports ### Layout 📄 **Read:** [references/layout.md](references/layout.md) - Automatic layout overview and when to use each type - Hierarchical tree layout (top-down, left-right) - Organizational chart layout - Mind map layout - Radial tree layout - Flowchart layout - Force-directed tree layout - Complex hierarchical layout - Layout spacing, margin, and orientation settings - Layout events and callbacks - `await DoLayoutAsync()` — refresh layout at runtime after adding/removing nodes ### Swimlane 📄 **Read:** [references/swimlane.md](references/swimlane.md) - Creating swimlane diagrams - Adding lanes and configuring lane properties - Phase configuration (vertical/horizontal phases) - Swimlane symbol palette integration - Swimlane interactions ```razor <SfDiagramComponent Height="600px" Swimlanes="@swimlanes" /> @code { DiagramObjectCollection<Swimlane> swimlanes = new(); protected override void OnInitialized() { swimlanes.Add(new Swimlane { ID = "swimlane1", OffsetX = 400, OffsetY = 300, Width = 600, Height = 200, Lanes = new DiagramObjectCollection<Lane>() { new Lane(){ Height = 100, Header = new SwimlaneHeader(){ Width = 30, Annotation = new ShapeAnnotation(){ Content = "Consumer" } }, Children = new DiagramObjectCollection<Node>() { new Node(){Height = 50, Width = 50, LaneOffsetX = 250, LaneOffsetY = 30}, } }, } }); } } ``` ### BPMN 📄 **Read:** [references/bpmn.md](references/bpmn.md) - BPMN shape types (events, activities, gateways, data) - BPMN event types (start, end, intermediate, boundary) - BPMN activity types (task, subprocess, call activity) - BPMN gateway types (exclusive, parallel, inclusive, etc.) - BPMN connectors (sequence flow, message flow, association) - Data objects and data stores - Expanded sub-process - BPMN text annotation ```razor // Exclusive gateway (XOR) nodes.Add(new Node { ID = "gateway1", OffsetX = 300, OffsetY = 200, Width = 50, Height = 50, Shape = new BpmnGateway { GatewayType = BpmnGatewayType.Exclusive } }); ``` ### Symbol Palette 📄 **Read:** [references/symbol-palette.md](references/symbol-palette.md) - Setting up `SfSymbolPaletteComponent` - Defining palette groups and symbols - Custom symbols and stencils - Drag-and-drop from palette to diagram - Palette search and customization ### Data Binding 📄 **Read:** [references/data-binding.md](references/data-binding.md) - Binding diagram from a flat list or IEnumerable - Hierarchical data binding (parent-child relationships) - Remote data source integration - Runtime CRUD: `await ReadDataAsync(query?)`, `await InsertDataAsync(data)`, `await UpdateDataAsync(keyField, data)`, `await DeleteDataAsync(keyField, value)` - `await RefreshDataSourceAsync()` — reload all data and rebuild layout - Mapping data fields to node/connector properties ### Interaction & Commands 📄 **Read:** [references/interaction.md](references/interaction.md) - Selection: `Select(collection, multipleSelection?)`, `SelectAll()`, `UnSelect(obj)`, `ClearSelection()` - Drag, resize, and rotate elements (user interaction + programmatic) - Programmatic transforms: `Drag(obj, tx, ty)`, `Rotate(obj, angle, pivot?)`, `Scale(obj, sx, sy, pivot)` - Zoom and pan: mouse wheel, toolbar, `Zoom(factor, focusPoint)`, `ResetZoom()`, `Pan(hOffset, vOffset, focusPoint?)` - `BringIntoView(DiagramRect)` — scroll viewport to show a region - `BringIntoCenter(DiagramRect)` — scroll viewport to center a region - `FitToPage(FitOptions?)` — fit content to viewport (sync; `FitMode.Width/Height/Both`, `DiagramRegion.Content/PageSettings`) - `Nudge(Direction, int?)` — move selected elements by pixels; default 1px; `Direction.Top/Bottom/Left/Right` - Z-Order: `BringToFront()`, `BringForward()`, `SendBackward()`, `SendToBack()` — must `Select()` first - Clipboard: `Copy()`, `Cut()`, `Paste(collection?)`, `Delete(collection?)` - Group/Ungroup: `Group()`, `Ungroup()`, `AddChildAsync(group, child)`, `RemoveChild(group, child)` - Inline text editing: `StartTextEdit(obj, annotationId?)` - Keyboard shortcuts (built-in table) and `CommandManager` (custom/override shortcuts via child component) - `CommandManager` uses `KeyboardCommand` + `KeyGesture` (`DiagramKeys` + `ModifierKeys`) + `CommandKeyArgs` - Snapping to grid or objects - Alignment, spacing, and sizing commands (`SetAlign`, `SetDistribute`, `SetSameSize` — all sync) - User handles (custom action buttons on selection) - Undo/redo: `Undo()`, `Redo()` (sync); `StartGroupAction()` / `EndGroupAction()` for batched undo steps - History: `AddHistoryEntry(entry)`, `ClearHistory()` - Utility: `GetObject(id)`, `GetPageBounds(x?, y?)`, `Clear()` (removes all elements) - Batch updates: `BeginUpdate()` + `await EndUpdateAsync()` — group multiple changes into one render pass - Add multiple elements: `await AddDiagramElementsAsync(DiagramObjectCollection<NodeBase>)` ### Events 📄 **Read:** [references/events.md](references/events.md) - Diagram-level events (Created, Click, Drop) - Node events (NodeCreating, PositionChanged, SizeChanged) - Connector events (ConnectionChanged, SegmentChanged) - Selection events (SelectionChanged) - History change events (HistoryChanged for undo/redo) - Event argument types and usage patterns ### Serialization 📄 **Read:** [references/serialization.md](references/serialization.md) - Saving diagram state as JSON string - Loading a diagram from saved JSON - Custom serialization properties - Partial diagram save and restore patterns ### Export & Print 📄 **Read:** [references/export-print.md](references/export-print.md) - Exporting to PNG, JPEG, SVG formats - Export region options (diagram, page, content) - Scale and margin settings - Print configuration - Custom page size and orientation - Fit diagram to single page on print ### Styling 📄 **Read:** [references/styling.md](references/styling.md) - CSS class customization (`CssClass` property) - Built-in themes (Material, Bootstrap, Fluent, Tailwind) - Node and connector style properties - Selection and hover styles - Theme Studio customization - CSS variable overrides ### UML Sequence Diagrams 📄 **Read:** [references/uml-sequence.md](references/uml-sequence.md) - UML sequence diagram setup - Lifelines and activation boxes - Message types (synchronous, asynchronous, return, create, destroy) - UML interaction shapes and connectors - `await UpdateFromModelAsync()` — refresh diagram after programmatic model changes ### UML Class Diagram 📄 **Read:** [references/uml-class-diagram.md](references/uml-class-diagram.md) - Creating Class, Interface, and Enumeration nodes with attributes, methods, and members - Visibility scopes, method parameters, separator rows - Styling header, section headers (`UmlSectionHeaderSettings`), and row-level `TextStyle` - Six relationship types: Association, Aggregation, Composition, Inheritance, Dependency, Realization - Directional / bi-directional association flow; multiplicity labels - Adding and removing members at runtime (`Add`, `RemoveAt`, `Remove`) - `CollectionChanging` / `CollectionChanged` events; inline text editing (`F2`, `StartTextEdit`) - Symbol Palette integration for drag-and-drop UML shapes ### Collaborative Editing 📄 **Read:** [references/collaborative-editing.md](references/collaborative-editing.md) - Setting up real-time collaborative diagram editing - SignalR hub configuration - Blazor Server and WASM app integration - Handling real-time sync and conflict resolution - Delta sync: `GetDiagramUpdates(HistoryChangedEventArgs)` + `await SetDiagramUpdatesAsync(updates)` — efficient change propagation ### Overview Component 📄 **Read:** [references/overview-component.md](references/overview-component.md) - Adding `SfDiagramOverviewComponent` as a miniature thumbnail panel - Linking the overview to the main diagram via `SourceID` / `ID` - Controlling panel size with `Width` and `Height` - Zoom and pan interactions (drag, resize, click, draw-region) - Enabling or disabling interactions with `DiagramOverviewConstraints` - Required `@using Syncfusion.Blazor.Diagram.Overview` namespace. ```razor @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Diagram.Overview