We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Syncfusion Feedback

Trusted by the world’s leading companies

Syncfusion Trusted Companies

Overview

The WPF Diagram control allows users to quickly create and edit flowcharts, organizational charts, UML diagrams, swim lane charts, mind maps, floor plans, and more within their applications.


Flowchart

The WPF Diagram control provides all the standard flowchart shapes as ready-made objects to build flowcharts, making it is easy to add them to a diagram surface in a single call. A built-in automatic layout algorithm has been specifically made for flowchart to arrange each flowchart shapes automatically without specifying the co-ordinates.

WPF Diagram Flowchart


Organizational chart

Built-in automatic layout algorithm specifically made for organizational charts to arrange parent and child node positions automatically.

WPF Diagram Organizational Chart


Mind map

Create mind map diagrams with a built-in, automatic layout algorithm to define a central node that represents an idea or a concept and other nodes to be placed around it.

WPF Diagram Mindmap Tree


Diagram Ribbon

  • The diagram ribbon control contains UI elements that allow end-users to load and save diagrams, add diagram items to the canvas, format text within the diagram items, rearrange and recolor shapes, change the canvas size and orientation, and perform clipboard operations.
  • The ribbon can easily be customized to add new ribbon items/tabs and remove the existing ribbon items/tabs.

WPF Diagram Ribbon


High Performance

Quickly load large diagrams using UI-virtualization techniques, which selectively loads the objects that lie within the viewport area. Smooth scrolling performance is achieved using a built-in spatial search algorithm that builds an index based on the element position.

WPF High Performance Diagram Control


Nodes

Visualize any graphical object using nodes that can also be arranged and manipulated on a diagram page.

WPF Diagram Built-in Shapes for Nodes

Shapes

Use 445+ standard built-in shapes or your own custom shapes.

WPF Diagram Node Template

Template

You can use text, image, controls, panels, or any UIElement or template to visualize a node. It can also be bound to any of your business objects.


Connector

A connector is used to represent a relationship between two nodes. Some of the key features are listed below.

WPF Diagram with Different Types of Connectors

Types

The types of connectors are straight, orthogonal, and curved. Choose any of these based on the type of diagram or relationship between the connected notes.

WPF Diagram Arrowheads

Arrowheads

Use arrowheads (decorator) to indicate the flow direction in a flowchart or state diagram. Also build custom arrowheads based on the type of diagram.

WPF Diagram Restrict Segment Overlapping using Routing

Routing

Orthogonal connectors take the shortest and smartest path to avoid overlapping neighboring nodes.

WPF Diagram Bridging

Bridging (line jumps)

Bridging (line jumps) clearly indicates connector’s route and makes it easier to read where connectors overlap in a dense diagram.

WPF Diagram Custom Appearance

Appearance

Customize the look and feel of a connector. A rich set of properties is available to customize color, thickness, dash dots, rounded corners, and decorators.


Port (connection point)

Connect to the desired location of a node using different types of ports or connecting points available.

WPF Diagram Node Ports

Node port

Build logic gates or a circuit diagram with dedicated pins and restrict in or out connections using node ports.

WPF Diagram Connector Ports.

Connector port

Use connector ports to indicate message flows between objects or lifelines in a sequence diagram.

WPF Diagram Dynamic Port

Dynamic port

Make parallel connections to a block diagram by connecting anywhere on the side of a block. They are automatically created or destroyed.

WPF Diagram Dock Port

Dock port

Control dynamic connections to specific sides or in a specific direction using dock ports.


Annotation

Show additional information by adding text or labels on nodes and connectors.

WPF Diagram Editing

Edit

Add and edit text at runtime. Also, mark it read-only if it should not be edited.

WPF Diagram Multiple Annotations

Multiple annotation

Add any number of annotations and align them individually.

WPF Diagram Annotation Alignment

Alignment

The WPF Diagram has sophisticated alignment options where annotations can be placed:

  • Inside or outside a node.
  • At the source or target end of a connector.
  • Automatically when the node or connector is moved.

Interactive features

Use interactive features to improve the editing experience of a diagram at runtime. Furthermore, easily edit a diagram with mouse, touchscreen, or keyboard interfaces.

WPF Diagram Select and Drag the Nodes

Select and drag

Select one or more nodes, connectors, or annotations and edit them using thumbs or handlers.

WPF Diagram Resizing

Resize

Resize a node in eight different directions. Lock the aspect ratio to maintain the shape after resizing. Resize multiple objects at the same time.

WPF Diagram Node Rotation

Rotate

Rotate a selected node 360 degrees.

WPF Diagram Snapping Feature.

Snapping

Align nodes, connectors, and annotations when dragging precisely, just by snapping to the nearest gridlines or objects.

WPF Diagram Undo and Redo Feature

Undo Redo

Undo and redo commands help reverse actions.

WPF Diagram Clipboard

Clipboard

Cut, copy, paste, or duplicate selected objects within and across diagrams.

WPF Diagram Z-Order Commands

Z-Order

When multiple objects overlap, the Z-order controls which object needs to be at the top or bottom.

WPF Diagram Grouping

Grouping

Combine multiple nodes together and interact with them as a single object called a group. Nodes can belong to more than one group.

WPF Diagram Quick Commands

Quick command

Frequently used commands like delete, connect, and duplicate can be shown as buttons near selectors. This helps in quick operations, instead of finding buttons in a toolbox.


Alignment

The WPF Diagram control has predefined alignment commands to align the selected objects nodes and connectors to the selection boundary.

WPF Diagram Spacing Commands

Spacing commands

Place selected objects on a diagram at equal intervals.

WPF Diagram Sizing Commands

Sizing commands

Use sizing commands to size of the application nodes to meet your performance requirement.

WPF Diagram Alignment Commands

Align commands

Align nodes or connectors in the selection list to the left, right, or center horizontally, or at the top, bottom, or middle vertically to the selection boundary.


Automatic layout algorithm

WPF Diagram control provides an automatic layout algorithm, which is used to arrange nodes automatically based on a predefined layout logic. There is built-in support for organization chart layout, hierarchical tree layout, flowchart layout, mind map layout and radial tree layout.


Drawing Tool

Draw nodes and link them interactively, just by clicking and dragging on a diagram surface.

WPF Diagram Drawing Tool


Stencil

The stencil control is a gallery of reusable symbols and nodes. Drag and drop these symbols onto the surface of a diagram any number of times.

WPF Diagram Stencil


Zoom, pan, fit to page

When a diagram is large, see it closer or wider by zooming in and out of the diagram. Also, navigate from one region to another by panning through the diagram.

WPF Diagram Zoom Pan Fit to page


Overview control

Improve the navigation experience when exploring large diagrams using the overview control. It displays a small preview of the full diagram page. It also allows users to perform operations such as zooming and panning within it.

WPF Diagram Overview control


Rulers and Measurement Unit

Measure the distance of nodes and connectors from the origin of the page using rulers. In addition, specify the size and position of objects in different units like pixels, inches, and centimeters.

WPF Diagram Rulers and Measurement Units


Data Source

Populate diagrams with nodes and connectors based on data from data sources. Data in any format can be easily converted, mapped, and consumed in the diagram by setting a few properties, without having to write any code.

WPF Diagram Data Source


Miscellaneous

There are several other features available to enhance the diagramming experience.

WPF Diagram Printing

Printing

The WPF Diagram control supports printing with a print preview option. Customize the page size, orientation, page margins, and fit to a single page.

WPF Diagram Exporting

Exporting

Share your diagrams with others by easily exporting them as .xps, .png, .jpeg and .bmp file formats.

WPF MVVM-friendly Diagram Control

MVVM-friendly

The WPF Diagram control is MVVM-friendly and seamlessly works with popular MVVM frameworks like Prism and MVVM light.

WPF Diagram Serialization

Serialization

You can save your diagram state as an XML file and load it back for editing again.

WPF Diagram Localization

Localization

Localize every static text in the control to any supported language.

WPF Diagram Context Menu

Context Menu

Map frequently used commands to the context menu.

WPF Diagram Gridlines

Gridlines

Gridlines provide guidance when trying to align objects.

WPF Diagram Page Layout

Page Layout

The WPF Diagram control provides a page-like appearance to a drawing surface using page size, orientation, and margins.


WPF Diagram Code Example

Easily get started with the WPF Diagram using a few simple lines of XAML or C# code example as demonstrated below. Also explore our WPF Diagram Example that shows you how to render and configure the diagram in WPF.

<Window.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="/Syncfusion.SfDiagram.Wpf;component/Resources/BasicShapes.xaml"/>
        </ResourceDictionary.MergedDictionaries>
        <DataTemplate x:Key="NodeContentTemplate">
            <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding}"/>
        </DataTemplate>
    </ResourceDictionary>
</Window.Resources>
<Grid>
    <!--Initializing the SfDiagram control-->
    <syncfusion:SfDiagram x:Name="diagram">
        <syncfusion:SfDiagram.Theme>
            <syncfusion:OfficeTheme/>
        </syncfusion:SfDiagram.Theme>
        <!--Initializing the Nodes collection-->
        <syncfusion:SfDiagram.Nodes>
            <syncfusion:NodeCollection>
                <syncfusion:NodeViewModel ID="Start" OffsetX="300" OffsetY="100" UnitWidth="100" UnitHeight="40"
                                          Shape="{StaticResource Terminator}"
                                          Content="Start" ContentTemplate="{StaticResource NodeContentTemplate}"/>
                <syncfusion:NodeViewModel ID="Input" OffsetX="300" OffsetY="180" UnitWidth="100" UnitHeight="40"
                                          Shape="{StaticResource Process}"
                                          Content="Get Input" ContentTemplate="{StaticResource NodeContentTemplate}"/>
                <syncfusion:NodeViewModel ID="Decision" OffsetX="300" OffsetY="280" UnitWidth="100" UnitHeight="80"
                                          Shape="{StaticResource Decision}"
                                          Content="Make Decision" ContentTemplate="{StaticResource NodeContentTemplate}">
                    <syncfusion:NodeViewModel.Ports>
                        <syncfusion:PortCollection>
                            <syncfusion:NodePortViewModel ID="Decision_YesPort" NodeOffsetX="0" NodeOffsetY="0.5" />
                            <syncfusion:NodePortViewModel ID="Decision_NoPort" NodeOffsetX="1" NodeOffsetY="0.5" />
                        </syncfusion:PortCollection>
                    </syncfusion:NodeViewModel.Ports>
                </syncfusion:NodeViewModel>
                <syncfusion:NodeViewModel ID="Output1" OffsetX="210" OffsetY="360" UnitWidth="100" UnitHeight="40"
                                          Shape="{StaticResource Process}"
                                          Content="Output 1" ContentTemplate="{StaticResource NodeContentTemplate}"/>
                <syncfusion:NodeViewModel ID="Output2" OffsetX="390" OffsetY="360" UnitWidth="100" UnitHeight="40"
                                          Shape="{StaticResource Process}"
                                          Content="Output 2" ContentTemplate="{StaticResource NodeContentTemplate}"/>
                <syncfusion:NodeViewModel ID="End" OffsetX="300" OffsetY="440" UnitWidth="100" UnitHeight="40"
                                          Shape="{StaticResource Terminator}"
                                          Content="End" ContentTemplate="{StaticResource NodeContentTemplate}"/>
            </syncfusion:NodeCollection>
        </syncfusion:SfDiagram.Nodes>
        <!--Initializing the Connectors collection-->
        <syncfusion:SfDiagram.Connectors>
            <syncfusion:ConnectorCollection>
                <syncfusion:ConnectorViewModel SourceNodeID="Start" TargetNodeID="Input"/>
                <syncfusion:ConnectorViewModel SourceNodeID="Input" TargetNodeID="Decision"/>
                <syncfusion:ConnectorViewModel SourceNodeID="Decision" TargetNodeID="Output1" SourcePortID="Decision_YesPort">
                    <syncfusion:ConnectorViewModel.Annotations>
                        <syncfusion:AnnotationCollection>
                            <syncfusion:AnnotationEditorViewModel Content="Yes" RotationReference="Page"/>
                        </syncfusion:AnnotationCollection>
                    </syncfusion:ConnectorViewModel.Annotations>
                </syncfusion:ConnectorViewModel>
                <syncfusion:ConnectorViewModel SourceNodeID="Decision" TargetNodeID="Output2" SourcePortID="Decision_NoPort">
                    <syncfusion:ConnectorViewModel.Annotations>
                        <syncfusion:AnnotationCollection>
                            <syncfusion:AnnotationEditorViewModel Content="No" RotationReference="Page"/>
                        </syncfusion:AnnotationCollection>
                    </syncfusion:ConnectorViewModel.Annotations>
                </syncfusion:ConnectorViewModel>
                <syncfusion:ConnectorViewModel SourceNodeID="Output1" TargetNodeID="End"/>
                <syncfusion:ConnectorViewModel SourceNodeID="Output2" TargetNodeID="End"/>
            </syncfusion:ConnectorCollection>
        </syncfusion:SfDiagram.Connectors>
    </syncfusion:SfDiagram>
</Grid>
using Syncfusion.UI.Xaml.Diagram;
using Syncfusion.UI.Xaml.Diagram.Theming;
using System.Windows;
namespace SyncfusionWpfApp1
{
    public partial class MainWindow : Window
    {
        SfDiagram diagram;
        public MainWindow()
        {
            InitializeComponent();
            // Create a diagram instance
            diagram = new SfDiagram();
            // Initializing the Nodes collection
            diagram.Nodes = new NodeCollection();
            CreateNode("Start", 300, 100, 40, "Terminator", "Start");
            CreateNode("Input", 300, 180, 40, "Process", "Get Input");
            CreateNode("Decision", 300, 280, 80, "Decision", "Make Decision");
            CreateNode("Output1", 210, 360, 40, "Process", "Output 1");
            CreateNode("Output2", 390, 360, 40, "Process", "Output 2");
            CreateNode("End", 300, 440, 40, "Terminator", "End");

            // Initializing the Connectors collection
            diagram.Connectors = new ConnectorCollection();
            CreateConnector("Start", "Input");
            CreateConnector("Input", "Decision");
            CreateConnector("Decision", "Output1", "Decision_YesPort", "Yes");
            CreateConnector("Decision", "Output2", "Decision_NoPort", "No");
            CreateConnector("Output1", "End");
            CreateConnector("Output2", "End");

            diagram.Theme = new OfficeTheme();

            // Add the Diagram control to the Window
            this.Content = diagram;
        }

        private void CreateNode(string id, double offsetX, double offsetY, double height, string shape, string content)
        {
            NodeViewModel node = new NodeViewModel()
            {
                ID = id,
                OffsetX = offsetX,
                OffsetY = offsetY,
                UnitWidth = 100,
                UnitHeight = height,
                Shape = App.Current.MainWindow.Resources[shape] as string,
            };
            node.Annotations = new AnnotationCollection()
            {
                new AnnotationEditorViewModel() { Content = content }
            };

            if (shape == "Decision")
            {
                node.Ports = new PortCollection()
                {
                    new NodePortViewModel() { ID="Decision_YesPort", NodeOffsetX=0, NodeOffsetY=0.5 },
                    new NodePortViewModel() { ID="Decision_NoPort", NodeOffsetX=1, NodeOffsetY=0.5 },
                };
            }
            
            (diagram.Nodes as NodeCollection).Add(node);
        }

        private void CreateConnector(string sourceId, string targetId, string sourcePortID = default(string), string content = default(string))
        {
            ConnectorViewModel connector = new ConnectorViewModel()
            {
                SourceNodeID = sourceId,
                TargetNodeID = targetId,
            };

            if (!string.IsNullOrEmpty(sourcePortID))
            {
                connector.SourcePortID = sourcePortID;
            }
            
            if (!string.IsNullOrEmpty(content))
            {
                connector.Annotations = new AnnotationCollection()
                {
                    new AnnotationEditorViewModel() { Content = content, RotationReference = RotationReference.Page }
                };
            }

            (diagram.Connectors as ConnectorCollection).Add(connector);
        }
    }
}



95+ WPF CONTROLS

Frequently Asked Questions

You can find our WPF Diagram demo on

GitHub location.

App center location.

Microsoft location.

No, this is a commercial product and requires a paid license. However, a free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue, 5 or fewer developers, and 10 or fewer total employees.

A good place to start would be our comprehensive getting started documentation.

Our Customers Love Us

Having an excellent set of tools and a great support team, Syncfusion reduces customers’ development time.
Here are some of their experiences.

Rated by users across the globe

Transform your applications today by downloading our free evaluation version
Download Free Trial No credit card required.

Syncfusion WPF Resources

Awards

Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion is proud to hold the following industry awards.

Up arrow icon