syncfusion-blazor-diagram

What this skill does

# 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

### 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 =