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 WinForms Diagram is a feature-rich library for visualizing, creating, and editing interactive diagrams. It supports creating flowcharts, organizational charts, and network diagrams either through code or a visual interface.


Flowcharts

The Diagram library 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.

Flow chart diagram created with built-in flowchart shapes available in WinForms Diagram Control


Organizational chart visualization by using data binding and automatic layout features in WinForms Diagram Control

Organizational charts

Arrange parent and child node positions automatically with a built-in, automatic layout algorithm specifically made for organizational charts.


Nodes

Visualize any graphical object using nodes, which can be arranged and manipulated at the same time on a diagram page. They allow the following:

  • Easily create and add custom shapes.
  • Embed WinForms controls inside a node.
  • Fully customize the appearance of a node with built-in dialog boxes.

Visualize graphical object using node feature in WinForms Diagram Control


Connectors

A connector represents a relationship between two nodes. Some of the key features are listed below.

Different types of connectors available in WinForms Diagram Control

Types

The WinForms Diagram provides straight, orthogonal, polyline, and curved connector types. You can choose any of these based on the type of diagram or relationship between the connected nodes.

Connector line jump behavior in WinForms Diagram Control

Bridging or line jumps

Use bridging (line jumps) to illustrate a connector’s route, making it easy to read where connectors overlap each other in a dense diagram.

Predefined arrow heads available in WinForms Diagram Control to illustrate flow direction in the diagram

Arrowheads

Use different types of predefined arrowheads to illustrate flow direction in flowchart diagrams. You can also build your own custom arrowheads.

Connector appearance customization in WinForms Diagram Control

Appearance

Like nodes, the connectors’ look and feel can also be customized with built-in dialog boxes. The WinForms Diagram control provides a rich set of properties through which you can customize connector color, thickness, dash and dot appearance, rounded corners, and even decorators.


Connect to specific places on a node using Port feature in WinForms Diagram Control

Ports (connection points)

Connect to specific places on a node through different types of ports or connecting points.


Labels

Additional information can be shown by adding text or labels on nodes and connectors.

Additional information can be shown on nodes and connectors using Label feature in WinForms Diagram Control

Edit

You can add and edit text at runtime and mark it read-only if it should not be edited. You can also customize the label appearance such font size, font color, and font family with the built-in editor dialog.

Add multiple labels on nodes and connectors using Label feature in WinForms Diagram Control

Multiple annotations

Add any number of labels and align them individually.

Align labels inside or outside of a node using Label feature in WinForms Diagram Control

Alignment

Labels include sophisticated alignment options: place inside a node, outside a node, or at the source or target end of a connector. Automatically align when a node or connector moves.


Interactive features

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

Select and drag the nodes or connectors using handlers in WinForms Diagram Control

Select and drag

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

Select and resize the nodes using handlers in WinForms Diagram Control

Resize

You can resize a node in eight different directions and lock a node’s aspect ratios to keep its shape. You can also resize multiple objects at the same time.

Select and rotate the nodes using handlers in WinForms Diagram Control

Rotate

Rotate selected nodes from 0 to 360 degrees.

Undo and redo the recent changes using history manager feature in WinForms Diagram Control

Undo and redo

Don’t worry when you edit by mistake—undo and redo commands help you easily correct recent changes.

Align nodes and connectors with respect to nearest gridlines or objects using snapping feature in WinForms Diagram Control

Snap

Precisely align nodes, connectors, and annotations easily while dragging just by snapping to the nearest gridlines or objects.

Cut, Copy and Paste the select objects within diagram using clipboard feature in WinForms Diagram Control

Clipboard

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

Move the objects to top or bottom of the diagram using z-order feature in WinForms Diagram Control

Z-order

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

Combine the multiple nodes into group node using grouping feature in WinForms Diagram Control

Grouping

You can combine multiple nodes into a group and then interact with them as a single object. Nested groups are also possible with our WinForms Diagram control.


Alignment

The WinForms diagram control has predefined alignment commands that enable you to align the selected objects nodes and connectors with respect to the selection boundary.

Arrange selected objects in equal intervals using spacing commands in WinForms Diagram Control

Spacing commands

Spacing commands enable you to place selected objects on the Diagram at equal intervals from each other.

Resize selected objects to have equal sizes using sizing commands in WinForms Diagram Control

Sizing commands

Use sizing commands to equally size selected nodes with respect to the first selected object.

Align selected objects horizontally or vertically by using align commands in WinForms Diagram Control

Align commands

All the nodes or connectors in the selection list can be aligned at the left, right, or center horizontally, or aligned at the top, bottom, or middle vertically with respect to the selection boundary.


Automatic layout

Use automatic layouts to arrange nodes automatically based on a predefined layout algorithm. The control features built-in hierarchical tree, radial tree, and symmetric layouts.


Measure the distance of the nodes from the page origin by using ruler feature in WinForms Diagram Control

Rulers and measurement units

Rulers allows you to measure the distance of nodes or connectors from the origin of the page. The size and position of objects can be specified in different units such as pixels, inches, and centimeters.


Layers

A layer organizes graphical objects into a group that shares a common set of default properties, and more significantly, a z-order. You can add any number of layers to a diagram and move objects between layers.

Network diagram Layer by using WinForms Diagram Control


Align objects using gridline feature in WinForms Diagram Control

Gridlines

Gridlines provide guidance when trying to align objects.


Context menu

You can easily map frequently used commands to a context menu.

Use context menu feature to map frequently used commands


Host reusable nodes inside the symbol palette using symbol palette feature in WinForms Diagram Control

Symbol palette

The control includes a gallery of stencils, reusable symbols, and nodes that can be dragged onto the surface of a diagram.


Overview panel

The overview panel allows you to improve the navigation experience when exploring large diagrams. It displays a small preview of the full diagram page that allows users to zoom and pan within it.

Improve the navigation experience with larger diagrams by using overview panel in WinForms Diagram Control


Draw nodes and connectors interactively using WinForms Diagram Control

Drawing tool

Draw all kinds of built-in nodes and connect them with connectors interactively by just clicking and dragging on the drawing area.


Zoom and pan tools

View a large diagram closely or assume a wider view by zooming in and out. Also, navigate from one region of a diagram to another by panning across it.

View a large diagram closer or wider by zooming in and out using WinForms Diagram Control


Populate the diagram from external data sources in WinForms Diagram Control

Data binding

Populate diagrams with nodes and connectors created and positioned based on data from data sources. In addition, 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. The Diagram library supports loading data from a list or IEnumerable collection..


Exporting

You can export the Diagram to different image formats such as PNG, JPEG, and BMP.

Export the diagram as different image format using WinForms Diagram Control


Print the diagram from application using WinForms Diagram Control

Printing

The Diagram library supports printing with a print preview option. You can also customize the page size, orientation, and page margin, and fit diagrams to a single page.


Serialization

Our WinForms Diagram control provides support to save your diagram state in both binary and SOAP formats, and load it back later for further editing using the serializer. It also supports serialization and deserialization of diagram (.edd) files.

Save and load diagram by serializing it to binary format using WinForms Diagram Control


Diagram is designed to be a high-performance, modular, easy-to-use, and easy-to-customize engine

Flexible architecture

Our WinForms Diagram control was designed to be a high-performance, easy-to-use, and easy-to-customize engine. Many of the classes and components in the library can be subclasses, so that users can extend and customize the library to meet their needs. The Diagram library, in fact, employs a model-view-controller (MVC) design to clearly separate data, presentation, and user interaction.


WinForms Diagram Code Example

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

using Syncfusion.Windows.Forms.Diagram;
using Syncfusion.Windows.Forms.Diagram.Controls;
using System;
using System.Data;
using System.Drawing;
using System.Windows.Forms;
using Rectangle = Syncfusion.Windows.Forms.Diagram.Rectangle;
namespace WindowsFormsApplication1
{
    public partial class Form1 : Form
    {
        private Diagram diagram;
        public Form1()
        {
            InitializeComponent();
            // Create a diagram instance
            diagram = new Diagram() { Model = new Model(), Dock = DockStyle.Fill };
            diagram.View.Grid.Visible = false;
            // Add the Diagram control to the Form
            this.Controls.Add(diagram);
            diagram.BeginUpdate();
            // Customize the appearance of the node
            Rectangle rect = new Rectangle(0, 0, 100, 50);
            rect.FillStyle.Color = Color.CornflowerBlue;
            diagram.Binding.DefaultNode = rect;
            PopulateDataSource();
            ConfigureAndUpdateLayout();
            diagram.EndUpdate();
        }
        private void PopulateDataSource()
        {
            DataTable table = new DataTable();
            table.Columns.Add("ID", typeof(string));
            table.Columns.Add("Title", typeof(string));
            table.Columns.Add("ParentID", typeof(string));
            table.Rows.Add("1", "John Smith", String.Empty);
            table.Rows.Add("2", "Joe Robert", "1");
            table.Rows.Add("3", "Jack Kent", "1");
            table.Rows.Add("4", "Ravi Kumar", "1");
            table.Rows.Add("5", "Sue Raymond", "2");
            table.Rows.Add("6", "Lisa simpson", "2");
            table.Rows.Add("7", "Bob Woley", "3");
            table.Rows.Add("8", "Ron Jones", "4");
            table.Rows.Add("9", "Dave Mason", "4");
            //Binding the Node column Name
            diagram.Binding.Id = "ID";
            //Binding the Parents Nodes column Name
            diagram.Binding.ParentId = "ParentID";
            //Binding the Label
            diagram.Binding.Label.Add("Title");
            // Binding the DataTable to the DataSource
            diagram.Binding.DataSource = table;
        }
        private void ConfigureAndUpdateLayout()
        {
            HierarchicLayoutManager hierarchicalLayout = new HierarchicLayoutManager(diagram.Model, 0, 40, 30);
            hierarchicalLayout.LeftMargin = 50;
            hierarchicalLayout.TopMargin = 50;
            diagram.LayoutManager = hierarchicalLayout;
            diagram.LayoutManager.UpdateLayout(null);
        }
    }
}



95+ WINDOWS FORMS CONTROLS

Frequently Asked Questions

  • Visualize, create, and edit interactive diagrams.
  • Blazing fast load time, rich UI interactions and keyboard navigation.
  • Load a wide range of nodes with optimum performance.
  • Flowchart diagram support, many of built-in shapes, and flexible data binding.
  • Easily arrange diagram components in layout such as Organization Chart, Radial tree, and Hierarchical Tree.
  • Seamless export and printing capabilities.
  • Touch-friendly for interacting with diagrams.
  • Simple configuration and API.
  • Expansive learning resources such as demos and documentation to learn quickly and get started with WinForms Diagram.

You can find our WinForms Diagram demo on

GitHub 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 Windows Forms 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