Implementing Syncfusion WPF Diagram (SfDiagram)

The Syncfusion WPF Diagram control (SfDiagram) is a feature-rich diagramming library for building interactive flowcharts, org charts, BPMN diagrams, UML diagrams, network diagrams, and more in WPF applications. It provides nodes, connectors, annotations, ports, automatic layouts, and extensive customization options.

When to Use This Skill

Creating any visual diagram in a WPF application (flowchart, org chart, mindmap, etc.)
Adding nodes, connectors, annotations, or ports to a diagram
Implementing BPMN or UML diagrams
Setting up automatic diagram layouts (hierarchical, org, mindmap, flowchart, radial)
Configuring a symbol palette (stencil) for drag-and-drop diagram building
Binding a data source to generate diagrams dynamically
Enabling diagram interaction (selection, drag, resize, zoom, keyboard shortcuts)
Exporting or printing diagrams
Customizing diagram appearance (gridlines, rulers, themes, page settings)

Quick Start

1. Install NuGet Package

Install-Package Syncfusion.SfDiagram.WPF

2. Add Namespace in XAML

xmlns:syncfusion="http://schemas.syncfusion.com/wpf"

3. Declare SfDiagram

<Window xmlns:syncfusion="http://schemas.syncfusion.com/wpf" ...>
    <Grid>
        <syncfusion:SfDiagram x:Name="diagram">
            <syncfusion:SfDiagram.Nodes>
                <syncfusion:NodeCollection/>
            </syncfusion:SfDiagram.Nodes>
            <syncfusion:SfDiagram.Connectors>
                <syncfusion:ConnectorCollection/>
            </syncfusion:SfDiagram.Connectors>
        </syncfusion:SfDiagram>
    </Grid>
</Window>

4. Add a Node and Connector in Code-Behind

using Syncfusion.UI.Xaml.Diagram;

// Add nodes
var node1 = new NodeViewModel { ID = "Start", UnitWidth = 120, UnitHeight = 40,
    OffsetX = 200, OffsetY = 100, Shape = this.Resources["Ellipse"] };
var node2 = new NodeViewModel { ID = "End", UnitWidth = 120, UnitHeight = 40,
    OffsetX = 200, OffsetY = 250, Shape = this.Resources["Rectangle"] };
(diagram.Nodes as NodeCollection).Add(node1);
(diagram.Nodes as NodeCollection).Add(node2);

// Add connector
var connector = new ConnectorViewModel { SourceNodeID = "Start", TargetNodeID = "End" };
(diagram.Connectors as ConnectorCollection).Add(connector);

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Assembly deployment and NuGet setup
Adding SfDiagram via XAML or code
License key registration
Merging built-in shape resource dictionaries
Creating a minimal flowchart example

Nodes

📄 Read: references/nodes.md

Defining and positioning nodes (XAML and C#)
Built-in shapes and custom shape templates
Node appearance: fill, stroke, shadow, tooltip
Node groups and containers
Node constraints (lock, select, resize, rotate)
Node events

Connectors

📄 Read: references/connectors.md

Defining connectors between nodes
Connector types: straight, orthogonal, cubic Bezier, arc, quadratic
Appearance: line style, arrows, dashes
Connector routing and segments
Connector constraints and interaction
Connector splitting at intersection

Annotations

📄 Read: references/annotations.md

Adding text labels to nodes and connectors
Positioning and alignment of annotations
Appearance customization (font, background, border)
Editing annotations at runtime
Annotation events

Ports

📄 Read: references/ports.md

Defining connection ports on nodes
Port types and visual appearance
Hover effects on ports
Automatic port creation
Port-to-port connector creation

Interaction

📄 Read: references/interaction.md

Selection (single, multi, select by type)
Drag and drop nodes and connectors
Resize, rotate, and flip
Zoom and pan
Keyboard shortcuts
Tooltips and user handles
Scroll settings, drag limits, snapping

Commands

📄 Read: references/commands.md

Alignment (left, right, top, bottom, center)
Clipboard operations (cut, copy, paste, duplicate)
Delete nodes and connectors
Undo/Redo via commands
Nudge (arrow key movement)
Rotate, flip, fit-to-page
Spacing, sizing, Z-order
Expand/collapse nodes
Custom command manager

Automatic Layouts

📄 Read: references/automatic-layouts.md

Hierarchical Tree Layout
Organization Chart Layout
Mind Map Layout
Flowchart Layout
Radial Tree Layout
Force Directed Layout
Layout configuration (spacing, orientation, margin)

BPMN Shapes

📄 Read: references/bpmn-shapes.md

BPMN activities (tasks, sub-processes)
BPMN events (start, intermediate, end)
BPMN gateways
BPMN data objects and data stores
BPMN connectors and text annotations
BPMN groups and symbol palette

UML Diagrams

📄 Read: references/uml-diagrams.md

UML shape types (class, component, use case, activity, state, sequence)
UML sequence diagram elements
Configuring UML shapes and relationships

Swimlane

📄 Read: references/swimlane.md

Creating swimlane diagrams
Defining lanes and phases
Swimlane symbol palette
Swimlane interaction and customization

Stencil (Symbol Palette)

📄 Read: references/stencil.md

Setting up a drag-and-drop symbol palette
Symbol groups and categories
Symbol filtering and search
Adding custom shapes to palette
Stencil appearance

Data Source

📄 Read: references/data-source.md

Binding a flat data collection to diagram
Parent-child data relationships
Self-referencing hierarchical data
Dynamic data update

Serialization & Undo/Redo

📄 Read: references/serialization-undo-redo.md

Save and load diagram as XML
Serialize to/from JSON or stream
Undo/Redo history manager
Custom undo/redo entries

Diagram Customization

📄 Read: references/diagram-customization.md

Gridlines (visibility, style, snapping)
Rulers (appearance, measurement units)
Page settings (size, orientation, margins, background)
Scroll settings and auto-scroll
Themes and styles
Localization
Context menu
Diagram Ribbon
Drawing tools
Overview control

Export & Print

📄 Read: references/export-print.md

Export diagram to PNG, JPEG, BMP
Export to PDF
Print with print settings
Preview before printing

Performance & Constraints

📄 Read: references/performance-constraints.md

Virtualization for large diagrams
Diagram-level constraints
Node and connector constraints
Performance optimization tips

Common Patterns

Pattern: Flowchart with Automatic Layout

When users want an auto-arranged diagram from data — read references/automatic-layouts.md and references/data-source.md.

Pattern: Org Chart from Business Data

Bind employee data with parent-child relationships and apply Organization Layout — read references/data-source.md and references/automatic-layouts.md.

Pattern: BPMN Process Diagram

For business process modeling with standardized shapes — read references/bpmn-shapes.md.

Pattern: Interactive Diagram Builder

For apps where users drag shapes from a palette — read references/stencil.md and references/interaction.md.

Pattern: Save/Load Diagram State

For persisting diagram state across sessions — read references/serialization-undo-redo.md.

syncfusion-wpf-diagram