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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Overview

The Diagram control for WPF allows users to quickly create and edit flow charts, organizational charts, UML diagrams, swimlane charts, mind maps, floor plans, and more, similar to Microsoft Visio.


Nodes

Nodes are used to host graphical objects (paths or controls) that can be arranged and manipulated on a diagram page.

  • Custom shapes can also be created and added easily.
  • The appearance of a node can be fully customized.
  • Node UI can also be templated and re-used across multiple nodes.

Image, shape, button, text box, and combo box hosted inside diagram using node features


Connectors

The relationship between two nodes is represented using a connector. Multiple instances of nodes and connectors form a diagram. Some of the key features are listed below.

A simple flow chart connecting nodes using the Diagram control for WPF


Different types of connector in diagram control for WPF

Types

Different types of segments are available to connect between objects.

Visual indication of overlapping between two connectors using line bridging in the diagram control for WPF

Bridging

Bridging is a visual indication of overlapping between two connectors.

Avoid segment overlapping using line routing in the diagram control for WPF

Routing

Orthogonal connectors take a smart path that avoids overlapping with nodes to which they are connected.

Represent relationships between connected objects using decorators in the diagram control for WPF

Decorator

Arrows or decorators at the edges of connectors are used to represent relationships between nodes.

Connector with rounded corners using the diagram control for WPF

Rounded corners

The corner radius can be specified for edges in connectors.

Connect to a specific point in a node using ports

Ports

Ports are specific points in a node to which a connector can be connected.


Label

Labels are used to annotate nodes and connectors. The Diagram control makes it easy to edit and align labels relative to the object to which it is mapped.

Textualy represent nodes or connectors using labels in the Diagram control for WPF


Interactive features

Interactive features are used to improve the runtime editing experience of a diagram. You can easily edit a diagram with mouse, touch screen, or keyboard interfaces.

Select, drag, resize, and rotate a node in the Diagram control for WPF

Select, drag, resize, rotate

Objects can be selected and then dragged, resized, or rotated.

Align objects by snapping them to the nearest object or gridlines using the Diagram control for WPF

Snap

Objects can be aligned easily against gridlines or neighboring objects.

Interact with diagrams using the keyboard in the Diagram control for WPF

Keyboard interaction

All common actions can also be performed through keyboard input.

Connect nodes interactively using the Diagram control for WPF

Connect

The connect tool can be used to create a connection between two nodes, ports, or points.

Edit connectors by dragging thumbs using the diagram control for WPF

Edit connector

A connector’s route can be manually edited by dragging thumbs that are visible after selection.

Zoom or pan the canvas surface using the diagram control for WPF

Zoom pan

Large diagrams can be explored using the zoom and pan tools.

Group multiple objects as a single object using the diagram control for WPF

Group

Multiple nodes or connectors can be grouped together to form a single object called a group.

Drawing nodes interactively using diagram control for WPF

Drawing tool

The drawing tool enables users to draw custom nodes and shapes by clicking and dragging on the diagram surface.


Data binding

Data binding is used to populate diagrams with nodes and connectors created and positioned based on data from external 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. Diagram also supports loading data from an ObservableCollection, List, or IEnumerable collection.

Visualize external data using the diagram control for WPF


Commands

Diagram control has a predefined set of commands. Some standard commands are mapped to keyboard shortcuts. It is also possible to configure new commands and key combinations.

Built-in and custom commands using the diagram control for WPF


Automatic layout

Automatic layout is used to arrange nodes automatically based on a predefined layout logic. There is built-in support for organization chart layout, hierarchical tree layout, and radial tree layout.


Overview

The overview control is used to improve the navigation experience when exploring large diagrams. It displays a small preview and allows you to perform operations such as zooming and panning within it.

Navigate large diagrams using the overview control within the diagram control for WPF


Stencil

The Stencil is a gallery of reusable symbols/nodes that can be dragged and dropped onto the surface of the diagram.

Host reusable nodes inside the stencil control within the diagram control for WPF


Performance

It is possible to work with very large numbers of nodes since the diagram uses UI-virtualization techniques to selectively load only 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 a node’s position.

Performance


Serialization

Diagram’s state can be persisted to XML format and then be loaded back using serialization.

Save and load a diagram by serializing it to an XML file using the diagram control for WPF


Rulers and measurement unit

Rulers are used to measure the distance of nodes or connectors from the origin of the page. The size and position of objects can also be specified in different units like pixels, inches, and centimeters.

Size and poistion objects using rulers and measurement units in the diagram control for WPF


Localization

Every static text in the control can be localized to any desired language.

Localize your application with any language using the diagram control for WPF


Exporting and printing

Diagrams can be easily exported as image files (PNG, JPEG, BMP formats) and can also be printed as documents.

Export a diagram as an image or XPS file, or print it using a printer in the diagram control for WPF


Miscellaneous

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

Interactive alignment made easy using gridlines in the diagram control for WPF

Gridlines

Gridlines provide guidance when trying to align objects.

Lay out pages before printing or exporting in the diagram control for WPF

Page layout

The drawing surface can be given a page-like appearance using page size, orientation, and margin.

Perform frequently used commands quickly using quick commands in the diagram control for WPF

Quick commands

Frequently used commands can be easily mapped to the quick commands.

Perform frequently used commands quickly using the context menu in the diagram control for WPF

Context menu

Frequently used commands can be easily mapped to the context menu.


Diagram builder

Diagram builder is a diagramming application created using the diagram control. It is used to create, edit, save, export, and print diagrams. It has a symbol palette, property editor, overview window, toolbox, and menu to provide a great editing experience.

Build diagrams using the diagram builder application


90+ WPF CONTROLS

Transform your applications today by downloading our free evaluation versionDownload Free Trial

Scroll up icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon