How to Create a Flowchart from Data without Specifying Coordinates in WPF
Tags: csharp, productivity, dotnet
Published: 2019-08-26 11:20:42

---
title: How to Create a Flowchart from Data without Specifying Coordinates in WPF
published: true
tags: csharp, productivity, dotnet, 
canonical_url: https://www.syncfusion.com/blogs/post/create-flowchart-without-specifying-coordinates-in-wpf.aspx
---

Providing coordinates to every element in the creation of a flowchart is tedious. To help you avoid this tiresome process, the Syncfusion [WPF Diagram library](https://www.syncfusion.com/wpf-ui-controls/diagram) does it with just a few configuration settings. In this blog, I will walk you through the creation of a flowchart using the Syncfusion Diagram library without manually specifying coordinates, and instead using the built-in flowchart automatic layout algorithm.

A [flowchart](https://en.wikipedia.org/wiki/Flowchart) is a diagrammatic representation of a process, workflow, system, or computer algorithm. Flowcharts use various symbols to illustrate different types of actions and these symbols are connected by arrows showing the flow direction of the process.

## Common flowchart symbols

Different flowchart symbols have different meanings that are used to represent specific states in a flowchart. The following table describes the most common flowchart symbols.

<table style="border-collapse: collapse; width: 100%;" border="1">
<tbody>
<tr style="height: 23px;">
<td style="height: 23px;" width="167"><strong>Symbol</strong></td>
<td style="height: 23px;" width="152"><strong>Name</strong></td>
<td style="height: 23px;" width="281"><strong>Description</strong></td>
</tr>
<tr style="height: 61px;">
<td style="height: 61px;" width="167"><img class="aligncenter size-full wp-image-42835" style="border: 0px solid #C0C0C0; box-shadow: 0px 0px 0px #ccc; -moz-box-shadow: 0px 0px 0px #ccc; -webkit-box-shadow: 0px 0px 0px #ccc; -khtml-box-shadow: 0px 0px 0px #ccc;" src="https://blog.syncfusion.com/wp-content/uploads/2019/07/Terminator.png" alt="Terminator - Flow Chart Shape" width="134" height="62" /></td>
<td style="height: 61px;" width="152">Terminator/Start/End</td>
<td style="height: 61px;" width="281">Indicates the beginning or end of a process.</td>
</tr>
<tr style="height: 91px;">
<td style="height: 91px;" width="167"><img class="aligncenter size-full wp-image-42836" style="border: 0px solid #C0C0C0; box-shadow: 0px 0px 0px #ccc; -moz-box-shadow: 0px 0px 0px #ccc; -webkit-box-shadow: 0px 0px 0px #ccc; -khtml-box-shadow: 0px 0px 0px #ccc;" src="https://blog.syncfusion.com/wp-content/uploads/2019/07/Data.png" alt="Data - Flow Chart Shape" width="177" height="98" /></td>
<td style="height: 91px;" width="152">Data</td>
<td style="height: 91px;" width="281">Indicates data input or output for a process.</td>
</tr>
<tr style="height: 98px;">
<td style="height: 98px;" width="167"><img class="aligncenter size-full wp-image-42837" style="border: 0px solid #C0C0C0; box-shadow: 0px 0px 0px #ccc; -moz-box-shadow: 0px 0px 0px #ccc; -webkit-box-shadow: 0px 0px 0px #ccc; -khtml-box-shadow: 0px 0px 0px #ccc;" src="https://blog.syncfusion.com/wp-content/uploads/2019/07/Process.png" alt="Process - Flow Chart Shape" width="133" height="99" /></td>
<td style="height: 98px;" width="152">Process</td>
<td style="height: 98px;" width="281">Represents an operation or set of operations and data manipulations.</td>
</tr>
<tr style="height: 101px;">
<td style="height: 101px;" width="167"><img class="aligncenter size-full wp-image-42838" style="border: 0px solid #C0C0C0; box-shadow: 0px 0px 0px #ccc; -moz-box-shadow: 0px 0px 0px #ccc; -webkit-box-shadow: 0px 0px 0px #ccc; -khtml-box-shadow: 0px 0px 0px #ccc;" src="https://blog.syncfusion.com/wp-content/uploads/2019/07/Decision.png" alt="Decision - Flow Chart Shape" width="141" height="102" /></td>
<td style="height: 101px;" width="152">Decision</td>
<td style="height: 101px;" width="281">Shows a branching point where a decision is made to choose one of two paths.</td>
</tr>
<tr style="height: 104px;">
<td style="height: 104px;" width="167"><img class="aligncenter size-full wp-image-42839" style="border: 0px solid #C0C0C0; box-shadow: 0px 0px 0px #ccc; -moz-box-shadow: 0px 0px 0px #ccc; -webkit-box-shadow: 0px 0px 0px #ccc; -khtml-box-shadow: 0px 0px 0px #ccc;" src="https://blog.syncfusion.com/wp-content/uploads/2019/07/Document.png" alt="Document - Flow Chart Shape" width="146" height="105" /></td>
<td style="height: 104px;" width="152">Document</td>
<td style="height: 104px;" width="281">Represents a single document or report in the process.</td>
</tr>
<tr style="height: 104px;">
<td style="height: 104px;" width="167"><img class="aligncenter size-full wp-image-42840" style="border: 0px solid #C0C0C0; box-shadow: 0px 0px 0px #ccc; -moz-box-shadow: 0px 0px 0px #ccc; -webkit-box-shadow: 0px 0px 0px #ccc; -khtml-box-shadow: 0px 0px 0px #ccc;" src="https://blog.syncfusion.com/wp-content/uploads/2019/07/SubProcess.png" alt="SubProcess - Flow Chart Shape" width="146" height="105" /></td>
<td style="height: 104px;" width="152">Subprocess/Predefined process</td>
<td style="height: 104px;" width="281">Represents a sequence of actions that combine to perform a specific task that is defined elsewhere.</td>
</tr>
<tr style="height: 104px;">
<td style="height: 104px;" width="167"><img class="aligncenter size-full wp-image-42841" style="border: 0px solid #C0C0C0; box-shadow: 0px 0px 0px #ccc; -moz-box-shadow: 0px 0px 0px #ccc; -webkit-box-shadow: 0px 0px 0px #ccc; -khtml-box-shadow: 0px 0px 0px #ccc;" src="https://blog.syncfusion.com/wp-content/uploads/2019/07/Database.png" alt="Database - Flow Chart Shape" width="151" height="105" /></td>
<td style="height: 104px;" width="152">Database</td>
<td style="height: 104px;" width="281">Represents a collection of information that allows for searching, sorting, and filtering.</td>
</tr>
<tr style="height: 104px;">
<td style="height: 104px;" width="167"><img class="aligncenter size-full wp-image-42842" style="border: 0px solid #C0C0C0; box-shadow: 0px 0px 0px #ccc; -moz-box-shadow: 0px 0px 0px #ccc; -webkit-box-shadow: 0px 0px 0px #ccc; -khtml-box-shadow: 0px 0px 0px #ccc;" src="https://blog.syncfusion.com/wp-content/uploads/2019/07/DataStorage.png" alt="DataStorage - Flow Chart Shape" width="155" height="105" /></td>
<td style="height: 104px;" width="152">Data storage</td>
<td style="height: 104px;" width="281">Represents a step where data is stored within a process.</td>
</tr>
<tr style="height: 106px;">
<td style="height: 106px;" width="167"><img class="aligncenter size-full wp-image-42843" style="border: 0px solid #C0C0C0; box-shadow: 0px 0px 0px #ccc; -moz-box-shadow: 0px 0px 0px #ccc; -webkit-box-shadow: 0px 0px 0px #ccc; -khtml-box-shadow: 0px 0px 0px #ccc;" src="https://blog.syncfusion.com/wp-content/uploads/2019/07/Manual-Input.png" alt="Manual Input - Flow Chart Shape" width="155" height="107" /></td>
<td style="height: 106px;" width="152">Manual input</td>
<td style="height: 106px;" width="281">Represents the manual input of data into a field or step in a process.</td>
</tr>
<tr style="height: 106px;">
<td style="height: 106px;" width="167"><img class="aligncenter size-full wp-image-42844" style="border: 0px solid #C0C0C0; box-shadow: 0px 0px 0px #ccc; -moz-box-shadow: 0px 0px 0px #ccc; -webkit-box-shadow: 0px 0px 0px #ccc; -khtml-box-shadow: 0px 0px 0px #ccc;" src="https://blog.syncfusion.com/wp-content/uploads/2019/07/Manual-Operation.png" alt="Manual Operation - Flow Chart Shape" width="152" height="107" /></td>
<td style="height: 106px;" width="152">Manual operation</td>
<td style="height: 106px;" width="281">Represents an operation in a process that must be done manually, not automatically.</td>
</tr>
<tr style="height: 105px;">
<td style="height: 105px;" width="167"><img class="aligncenter size-full wp-image-42845" style="border: 0px solid #C0C0C0; box-shadow: 0px 0px 0px #ccc; -moz-box-shadow: 0px 0px 0px #ccc; -webkit-box-shadow: 0px 0px 0px #ccc; -khtml-box-shadow: 0px 0px 0px #ccc;" src="https://blog.syncfusion.com/wp-content/uploads/2019/07/Preparation.png" alt="Preparation - Flow Chart Shape" width="140" height="106" /></td>
<td style="height: 105px;" width="152">Preparation</td>
<td style="height: 105px;" width="281">Represents a setup or initialization process for another step in the process.</td>
</tr>
<tr style="height: 71px;">
<td style="height: 71px;" width="167"><img class="aligncenter size-full wp-image-42846" style="border: 0px solid #C0C0C0; box-shadow: 0px 0px 0px #ccc; -moz-box-shadow: 0px 0px 0px #ccc; -webkit-box-shadow: 0px 0px 0px #ccc; -khtml-box-shadow: 0px 0px 0px #ccc;" src="https://blog.syncfusion.com/wp-content/uploads/2019/07/On-Page-Reference.png" alt="On Page Reference - Flow Chart Shape" width="70" height="63" /></td>
<td style="height: 71px;" width="152">On-page reference</td>
<td style="height: 71px;" width="281">Represents a pair of labeled connectors used to link long or confusing lines in a flowchart.</td>
</tr>
<tr style="height: 47px;">
<td style="height: 47px;" width="167"><img class="aligncenter size-full wp-image-42847" style="border: 0px solid #C0C0C0; box-shadow: 0px 0px 0px #ccc; -moz-box-shadow: 0px 0px 0px #ccc; -webkit-box-shadow: 0px 0px 0px #ccc; -khtml-box-shadow: 0px 0px 0px #ccc;" src="https://blog.syncfusion.com/wp-content/uploads/2019/07/Off-Page-Reference.png" alt="Off Page Reference - Flow Chart Shape" width="81" height="77" /></td>
<td style="height: 47px;" width="152">Off-page reference</td>
<td style="height: 47px;" width="281">Represents a labeled connector used to link two flowcharts on different pages.</td>
</tr>
<tr style="height: 47px;">
<td style="height: 47px;" width="167"><img class="aligncenter size-full wp-image-42848" style="border: 0px solid #C0C0C0; box-shadow: 0px 0px 0px #ccc; -moz-box-shadow: 0px 0px 0px #ccc; -webkit-box-shadow: 0px 0px 0px #ccc; -khtml-box-shadow: 0px 0px 0px #ccc;" src="https://blog.syncfusion.com/wp-content/uploads/2019/07/Multi-Document.png" alt="Multi Document - Flow Chart Shape" width="165" height="120" /></td>
<td style="height: 47px;" width="152">Multidocument</td>
<td style="height: 47px;" width="281">Represents multiple documents or reports in a process.</td>
</tr>
<tr style="height: 47px;">
<td style="height: 47px;" width="167"><img class="aligncenter size-full wp-image-42849" style="border: 0px solid #C0C0C0; box-shadow: 0px 0px 0px #ccc; -moz-box-shadow: 0px 0px 0px #ccc; -webkit-box-shadow: 0px 0px 0px #ccc; -khtml-box-shadow: 0px 0px 0px #ccc;" src="https://blog.syncfusion.com/wp-content/uploads/2019/07/Flow-Line.png" alt="Flow Line - Flow Chart Shape" width="188" height="26" /></td>
<td style="height: 47px;" width="152">Flowline</td>
<td style="height: 47px;" width="281">Represents a direction of flow from one step to another.</td>
</tr>
</tbody>
</table>

## Getting started with a simple flowchart

Let’s create a simple flowchart like the one shown in the following image using the [Syncfusion Diagram library](https://www.syncfusion.com/wpf-ui-controls/diagram). The Diagram control has a built-in high-performance layout algorithm to arrange every flowchart symbol automatically, and it supports visualizing a flowchart from a data source. ![Flowchart Built with the Diagram Control’s Automatic Layout Algorithm](https://blog.syncfusion.com/wp-content/uploads/2019/07/Flowchart-Built-with-the-Diagram-Control%E2%80%99s-Automatic-Layout-Algorithm.png)

_Flowchart Built with the Diagram Control’s Automatic Layout Algorithm_

1. Create a WPF application and refer to our help [documentation](https://help.syncfusion.com/wpf/sfdiagram/getting-started) to learn more about the dependent assembly references and namespaces required to integrate the Diagram control.
2. Define the flowchart information as a data source. The information should contain the flowchart symbol shape data, a short description about each action, and the symbol width and height.
3. Create an instance of the **Diagram ** control.
4. Create an instance of **FlowchartDataSourceSettings** with the data mapping configuration and assign it to the **DataSourceSettings** property of the created **Diagram** instance.
5. Configure the **LayoutManager** with flowchart layout settings to arrange the flowchart elements automatically. The settings will configure the flowchart orientation, horizontal and vertical spacing between symbols, and decision output branch directions.

In the Diagram control, the different shapes shown in the previous screenshot represent nodes, and lines represent connectors. The text inside the shapes and lines represent annotations. The following code example includes all the previous steps. The complete sample is available from the [Syncfusion website](https://www.syncfusion.com/downloads/support/directtrac/general/ze/Flowchart_Layout-2088923614.zip).

```csharp
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        //Initialize new instance of Diagram control
        SfDiagram diagram = new SfDiagram();
        //Initialize Nodes with Observable Collection of NodeViewModel.
        diagram.Nodes = new NodeCollection();
        //Initialize Connectors with Observable Collection of ConnectorViewModel
        diagram.Connectors = new ConnectorCollection();
        RootGrid.Children.Add(diagram);
        // Initialize DataSourceSettings for SfDiagram
        diagram.DataSourceSettings = new FlowchartDataSourceSettings()
        {
            //Set the unique field from data source
            Id = "Id",
            //Field used to identify the previous flowchart element
            ParentId = "ParentId",
            //Define the flowchart information
            DataSource = GetData(),
            //Field used to identify the line text
            ConnectorTextMapping = "LineText",
            //Field used to identify the symbol description
            ContentMapping = "Description",
            //Field used to identify the symbol shape
            ShapeMapping = "Shape",
            //Field used to identify the symbol width
            WidthMapping = "Width",
            //Field used to identify the symbol height
            HeightMapping = "Height"
        };
 
        // Initialize LayoutSettings for SfDiagram
        diagram.LayoutManager = new LayoutManager()
        {
            Layout = new FlowchartLayout()
            {
                //Set the flowchart flow direction
                Orientation = FlowchartOrientation.TopToBottom,
                //Set the decision yes branch direction
                YesBranchDirection = BranchDirection.LeftInFlow,
                //Set the decision no branch direction
                NoBranchDirection = BranchDirection.RightInFlow,
                //Set the custom yes branch values
                YesBranchValues = new List<string> { "Yes", "Existing" },
                //Set the custom no branch values
                NoBranchValues = new List<string> { "No", "New" },
                //Set the horizontal spacing between node
                HorizontalSpacing = 60,
                //Set the vertical spacing between node
                VerticalSpacing = 40,
                Margin = new Thickness(10),
            },
        };
    }
    /// <summary>
    /// Method to Get Data for DataSource
    /// </summary>
    /// <param name="data"></param>
    private SymbolInfoCollection GetData()
    {
        SymbolInfoCollection symbolInfoCollection = new SymbolInfoCollection();
        #region Gmail
        symbolInfoCollection.Add(new SymbolInfo() { Id = "1", Description = "Start", Shape = App.Current.Resources["StartOrEnd"] as string, Width = 100, Height = 30, Color = "#8E44CC" });
 
        symbolInfoCollection.Add(new SymbolInfo() { Id = "2", Description = "Open Gmail site in browser", ParentId = new List<string> { "1" }, Shape = App.Current.Resources["Rectangle"] as string, Width = 120, Height = 50, Color = "#1759B7" });
 
        symbolInfoCollection.Add(new SymbolInfo() { Id = "3", Description = "Existing \nor \nnew user?", ParentId = new List<string> { "2" }, Shape = App.Current.Resources["Decision"] as string, Width = 130, Height = 80, Color = "#2F95D8" });
 
        symbolInfoCollection.Add(new SymbolInfo() { Id = "4", LineText = new List<string> { "New" }, Description = "Create an account", ParentId = new List<string> { "3" }, Shape = App.Current.Resources["Rectangle"] as string, Width = 120, Height = 50, Color = "#1759B7" });
 
        symbolInfoCollection.Add(new SymbolInfo() { Id = "5", Description = "Sign in", LineText = new List<string> { "Existing" }, ParentId = new List<string> { "3" }, Shape = App.Current.Resources["Rectangle"] as string, Width = 120, Height = 50, Color = "#1759B7" });
 
        symbolInfoCollection.Add(new SymbolInfo() { Id = "6", Description = "Enter username \nand password", LineText = new List<string> { "", "No" }, ParentId = new List<string> { "5", "7" }, Shape = App.Current.Resources["Data"] as string, Width = 150, Height = 50, Color = "#70AF16" });
 
        symbolInfoCollection.Add(new SymbolInfo() { Id = "7", Description = "Authorized?", ParentId = new List<string> { "6" }, Shape = App.Current.Resources["Decision"] as string, Width = 120, Height = 70, Color = "#2F95D8" });
 
        symbolInfoCollection.Add(new SymbolInfo() { Id = "8", Description = "Login successful!!", LineText = new List<string> { "Yes" }, ParentId = new List<string> { "7" }, Shape = App.Current.Resources["Rectangle"] as string, Width = 120, Height = 50, Color = "#1759B7" });
 
        symbolInfoCollection.Add(new SymbolInfo() { Id = "9", Description = "Enter first name \nand last name", ParentId = new List<string> { "4" }, Shape = App.Current.Resources["Data"] as string, Width = 150, Height = 50, Color = "#70AF16" });
 
        symbolInfoCollection.Add(new SymbolInfo() { Id = "10", Description = "Enter username \nand password", LineText = new List<string> { "", "Yes" }, ParentId = new List<string> { "9", "11" }, Shape = App.Current.Resources["Data"] as string, Width = 150, Height = 50, Color = "#70AF16" });
 
        symbolInfoCollection.Add(new SymbolInfo() { Id = "11", Description = "Username \nalready\n exists?", ParentId = new List<string> { "10" }, Shape = App.Current.Resources["Decision"] as string, Width = 130, Height = 80, Color = "#2F95D8" });
 
        symbolInfoCollection.Add(new SymbolInfo() { Id = "12", Description = "Registration Successful!!", LineText = new List<string> { "No" }, ParentId = new List<string> { "11" }, Shape = App.Current.Resources["Process"] as string, Width = 120, Height = 50, Color = "#1759B7" });
 
        symbolInfoCollection.Add(new SymbolInfo() { Id = "13", Description = "Open inbox", ParentId = new List<string> { "8", "12" }, Shape = App.Current.Resources["Process"] as string, Width = 120, Height = 50, Color = "#1759B7" });
 
        symbolInfoCollection.Add(new SymbolInfo() { Id = "14", Description = "End", ParentId = new List<string> { "13" }, Shape = App.Current.Resources["StartOrEnd"] as string, Width = 100, Height = 30, Color = "#8E44CC" });
        #endregion
 
        return symbolInfoCollection;
    }
}
```

## Features

### Flowchart orientation customization

You can customize the flowchart orientation to be vertical (from top to bottom) or horizontal (from left to right).

Use the **Orientation** property of the **FlowchartLayout** class to define the flow direction either as **TopToBottom** or **LeftToRight**. Refer to the following code example for details.

```csharp
LayoutManager = new LayoutManager()
{
    Layout = new FlowchartLayout()
    {
        //Set the flowchart flow direction
        Orientation = FlowchartOrientation.LeftToRight
    },
};
```

![Horizontal Flowchart](https://blog.syncfusion.com/wp-content/uploads/2019/07/Horizontal-Flowchart.png)

_Horizontal Flowchart_

### Customize the decision symbol output directions

The decision symbol shows a branching point where a decision is made to choose one of two paths. The **YesBranchDirection** and **NoBranchDirection** properties of **FlowchartLayout** controls the direction of the **Yes** and **No** branches. The following code example illustrates this.

```csharp
LayoutManager = new LayoutManager()
{
    Layout = new FlowchartLayout()
    {
        //Set the decision yes branch direction
        YesBranchDirection = BranchDirection.SameAsFlow,
        //Set the decision no branch direction
        NoBranchDirection = BranchDirection.RightInFlow,
    },
};
```

![Flowchart with Decision Branch](https://blog.syncfusion.com/wp-content/uploads/2019/07/Flowchart-with-Decision-Branch.png)

_Flowchart with Decision Branch_

### Customize Yes and No branch line text

The decision symbol will produce two branches as output: a Yes branch and a No branch. If the output branch connector text value matches the values in the **YesBranchValues** property of the **FlowchartLayout** class, it will be considered a Yes branch. Similarly, if a connector text value matches the values in the **NoBranchValues** property, it will be considered a No branch. By default, the **YesBranchValues** property will contain **Yes** and **True** string values and the **NoBranchValues** property will contain **No** and **False** string values.

Provide any text value to the connector text to describe the flow. Also, provide any string value in the **YesBranchValues** and **NoBranchValues**. To decide the flow based on **if** or **else** , the connector text should match the values in the **YesBranchValues** and **NoBranchValues**. The following code example illustrates this.

```csharp
//Add the custom yes branch values
(LayoutManager.Layout as FlowchartLayout).YesBranchValues.Add("Existing");
//Add the custom no branch values
(LayoutManager.Layout as FlowchartLayout).NoBranchValues.Add("New");
```

![Custom Branch Line Text](https://blog.syncfusion.com/wp-content/uploads/2019/07/Custom-Branch-Line-Text.png)

## Summary

In this blog post, we have seen how to create and customize flowcharts from data without specifying coordinates using the [Syncfusion WPF Diagram library](https://www.syncfusion.com/wpf-ui-controls/diagram). You can also use the library to create an interactive flowchart maker application. More built-in automatic layouts, such as hierarchical and radial tree, are also available in the Diagram control. To explore more in-depth features, refer to our help documentation on [automatic layouts](https://help.syncfusion.com/wpf/sfdiagram/automatic-layouts).

If you’re already a Syncfusion user, you can download the product setup from [our website](https://www.syncfusion.com/account/downloads). Otherwise, you can download a free, 30-day trial [here](https://www.syncfusion.com/downloads/wpf/).

If you have any questions, please let us know in the comments section below. You can also contact us through our [support forum](https://www.syncfusion.com/forums), [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents), or [feedback portal](https://www.syncfusion.com/feedback/wpf). We are always happy to assist you!

The post [How to Create a Flowchart from Data without Specifying Coordinates in WPF](https://www.syncfusion.com/blogs/post/create-flowchart-without-specifying-coordinates-in-wpf.aspx) appeared first on [Syncfusion Blogs](https://www.syncfusion.com/blogs).