How to Create a Flowchart in Your C# .NET Spreadsheet Application
Tags: webdev, devops, csharp, tutorial
Published: 2023-08-22 17:33:21

---
canonical_url: https://developer.mescius.com/blogs/how-to-create-a-flowchart-in-your-c-sharp-net-spreadsheet-application
description: Learn how to create a flowchart in your C# .NET spreadsheet application. See more from Spread.NET today.
---
Flowcharts are diagrams full of shapes and symbols that collectively represent individual steps in a process – they are an effective means to visualize data. Using a flowchart can easily explain a complicated process offering easy readability, all while increasing comprehension and data retention.

For professionals in different industries, flowcharts offer versatile advantages tailored to their specific needs. For example, in finance and accounting, flowcharts assist professionals in comprehending intricate financial processes, auditing procedures, and risk management strategies. In manufacturing and engineering, flowcharts are invaluable for visualizing production workflows and maintaining quality control.

In corporate settings, executives and managers utilize flowcharts to map out business processes, enabling them to identify bottlenecks, optimize productivity, and enhance decision-making… The list of use cases goes on and on.

However, a new problem arises, who maintains these flowcharts? Who at your company sets standards for the flowcharts? How are the flowcharts shared or collaborated on? What software is used to create them?

With [Spread.NET for WinForms](https://developer.mescius.com/spreadnet/winforms-spreadsheet-components), a .NET spreadsheet component API, enterprise software developers can provide an Excel-like [Spreadsheet Designer](https://developer.mescius.com/spreadnet/docs/latest/online-win/spwin-spd-intro.html) to their end users during their .NET applications runtime. The Spread Designer allows users to easily design the flowchart by [adding and customizing shapes](https://developer.mescius.com/spreadnet/docs/latest/online-win/spwin-spd-tasks.html) with Spread’s [Enhanced Shape Engine](https://developer.mescius.com/spreadnet/docs/latest/online-win/working-with-shapes.html) with the familiar toolbar UI. The Spread Designer also offers similar shape themes, styles, and interactions as Excel and supports connecting and grouping shapes to ensure the flowchart's structure does not change.

![Flowchart in #C .NET Spreadsheet Application](https://files.grapecity.com/gc-website-media/qljhkzwc/01-final.gif?width=500&height=303.7037037037037)

This blog breaks down how to use the spreadsheet designer component to create a shape operation flowchart during runtime in a .NET WinForms applications:

1.  [.NET WinForms Project Setup](#setup)
2.  [Enable the Enhanced Shape Engine](#enable-engine)
3.  [Add Shapes to the Spreadsheet Flowchart](#add-shapes)
4.  [Add Text to the Shapes](#add-text)
5.  [Add Shapes to the Spreadsheet Flowchart](#connect)
6.  [Apply Styling to the Shapes](#apply)
7.  [Group Flowchart Shapes](#group)
8.  [Save and Display the Flowchart in a .NET WinForms App](#save)

## <a id="setup"></a>.NET WinForms Project Setup

In **Visual Studio 2022,** create a **Windows Forms App** and select **.NET 6** as the framework.

Note - this blog uses Visual Studio 2022\. You can also use earlier versions of Visual Studio.

Once the project is created, install **GrapeCity.Spread.WinForms** and **GrapeCity.Spread.WinForms.Design** using the NuGet Manager. [See the Spread.NET documentation for more detailed steps](https://developer.mescius.com/spreadnet/docs/latest/online-win/adding-nuget-package-spread-windows-forms.html).

![SPnet-packages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/53lnyh5air089uyflbe8.png)

With Spread.NET now installed, navigate to the projects **Form1.cs**’s Designer:

![View Designer](https://files.grapecity.com/gc-website-media/qxolvl2w/04-spnet.png?width=321.1488250652742&height=500)

In the VS Designer, locate the **FpSpread** and **FpSpreadDesigner** components in the toolbox. Drag and drop the **FpSpread** component onto the form, then do the same with the **FpSpreadDesigner** component. Next, add a button on the form.

![Create App](https://files.grapecity.com/gc-website-media/opho14xu/05-spnet-create-app.gif?width=500&height=254.07362703681352)

To display the **FpSpreadDesigner** during runtime, invoke Spread Designer API’s ShowDialog method within a buttons click event on the **Forms1.cs** file.

```
    private void button2_Click(object sender, EventArgs e)
    {
      fpSpreadDesigner2.ShowDialog(fpSpread2);
    }
```
## <a id="enable-engine"></a>Enable the Enhanced Shape Engine

With Spread included in the project, we must now enable the Enhanced Shape Engine. It is not available by default. This can be done either via code or via the Designer.

### Programmatically Enable

Use the following code to manually enable the [**EnhancedShapeEngine** property](https://developer.mescius.com/spreadnet/docs/latest/online-win/FarPoint.Win.Spread~FarPoint.Win.Spread.IFeatures~EnhancedShapeEngine.html) before working with shapes in the spreadsheets:

```
    // Enable the shape engine        
    fpSpread2.Features.EnhancedShapeEngine = true;
```
### Enable using the Spread Designer

To enable this property using the Designer’s UI, [first, start the Designer app](https://developer.mescius.com/spreadnet/docs/latest/online-win/spwin-spd-launch.html). Then, using the right panel of the Spread Designer, select _Spread_ from the dropdown, look for _Features_, expand it, and change _EnhancedShapeEngine_ to “True”.

![Enable Shapes using the Spread Designer](https://files.grapecity.com/gc-website-media/ki0alccd/06-enable-shapes-spnet.png?width=500&height=441.6475972540046)

## <a id="add-shapes"></a>Add Shapes to the .NET Spreadsheet Flowchart

During this .NET apps runtime, when the end-user clicks the “Create Flowchart” button on our form, the Spread Designer will be invoked and can be used to add the shapes for the flowchart to the spreadsheet. [The Spread Designer can perform many routine actions with any shape](https://developer.mescius.com/spreadnet/docs/latest/online-win/spwin-spd-tasks.html).

Using the Spread Designer’s _Insert_ tab, select the _Shapes_ drop-down. For our example, we will use the flowchart shapes section, located where the mouse hovers in the image below.

![Add Shapes](https://files.grapecity.com/gc-website-media/guppyjv5/07-add-shape-spnet.png?width=500&height=285.6077554064131)

Add five **Flowchart: Alternative Process** shapes for the processes and **two Flowchart: Connector** shapes to be the beginning and end of the flowchart. Once you add these shapes, the spreadsheet should now look like this:

![Add Shapes](https://files.grapecity.com/gc-website-media/tlgmhgfv/08-spnet.png?width=500&height=287.0919881305638)

## <a id="add-text"></a>Add Text to the Shapes

We need to add text to the shapes to describe the sequence of events, stages, phases, or actions of our flow chart. To add text to a shape in the designer, double-click on the shape, and a cursor will appear. For this demo, I add the following text to the **Flowchart: Alternative Process** shapes: _FR Y14A_, _Update Global Drivers_, _Adjustments_, _Business Line Input_, _Adjustment Review_.

Note: You can hit enter (between the words within the shape), so the formatting is easily readable.

Users can easily adjust the size, alignment, and color of the shapes and text using the _Home_ tabs options. Save time by applying the same style to all of the selected shapes. Select multiple shapes by holding the _Shift_ key and clicking on them. Once the shapes are selected, change the font size to **16** and the font color to **Black**. Next, look for the _Alignment_ portion of the toolbar and select **Center** and **Middle Align**.

You may notice that our shapes need to be adjusted to fit the text. To do this, ensure all of the shapes are still selected like before. Then navigate to the _Shape Format_ tab and look for the _Size_ portion on the right of the ribbon. Set the _Width_ to **160,** and the _Height_ should remain at **100**.

![Add Text to the Shape](https://files.grapecity.com/gc-website-media/d3qc4ag3/09-add-text-to-the-shape-spnet.gif?width=500&height=285.6077554064131)

## <a id="connect"></a>Add Shapes to the Spreadsheet Flowchart

Let's add connectors to our shapes to form the process flow of the chart. We can connect shapes with lines and arrows. To add the **Connector: Elbow Arrow** and **Line Arrow** shapes we need, [follow the same process we used in step 3](#add-text).

Hover the mouse over the grab handle of the connector arrow, and then we will see the mouse cursor change. Once the cursor changes, click and drag the connector endpoint to the border of the first shape you want to connect. You will see points of connection appear on the shape you are dragging the connector to that show where it can be anchored.

Once a position is selected, you will see the connection point change to green to show that the line is connected to the shape. Now repeat this with the opposite side to connect the process shapes.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/biote9qgzvxkxyfzfwkt.png)

For this demo, connect the shapes like so:

![Add text to the Shapes](https://files.grapecity.com/gc-website-media/fzzbv0jb/14-spnet.png?width=500&height=296.19852164730725)

## <a id="apply"></a>Apply Styling to the Shapes

This step covers how to apply styled themes and apply custom styling to shapes. Users can customize the shape's back color and outline color using the _Shape Styles_ section of the _Shape Format Tab_.

![Apply Styling to the Shapes](https://files.grapecity.com/gc-website-media/iymmgmjl/15-shape-format-tab.png?width=500&height=75.52083333333333)

For this example, style the flowchart shapes and connectors like so:

![Apply Styling to the Shapes](https://files.grapecity.com/gc-website-media/skdpsfdt/16-spnet.png?width=500&height=230.32786885245903)

## <a id="group"></a>Group Flowchart Shapes

Grouping flowchart shapes ensures that all related elements stay together and maintain their intended layout, reducing the risk of accidental modifications. Spread’s Designer supports grouping shapes together using the context menu and/or the toolbar’s _Group Objects_ button.

To group shapes using the content menu, first, hold down the shift key, select the shapes, then right-click and choose _Group_ from the context menu options. Below we are grouping symbols to our starting and ending shapes to represent ‘start’ and ‘stop’:

![Group Flowchart Shapes](https://files.grapecity.com/gc-website-media/xrlfzz4h/17-spnet.png?width=500&height=316.4983164983165)

To group shapes using the toolbar, select the shapes you want to group, then navigate to the _Shape Format_ tab. The _Group Objects_ button is available in the _Arrange_ section. To demonstrate this, let's group shapes to create labels for some of our connector lines.

Spread.NET’s connector lines, like Excel, do not allow for text to be automatically attached to the process flow. To do this, we instead need to add a shape, remove the back color and outline color, and then group it to our connector shapes.

![Group Flowchart Shapes](https://files.grapecity.com/gc-website-media/1defs5ug/18-spnet-group-toolbar-group-objects-button.gif?width=500&height=303.7037037037037)

## <a id="save"></a>Save and Display the Flowchart in a .NET WinForms App

When you are happy with the look of the flowchart, it is time to [apply the spreadsheet from the Designer to the WinForms application](https://developer.mescius.com/spreadnet/docs/latest/online-win/spwin-spd-applychange.html). On the Designer’s toolbar, navigate to the _File_ menu, choose _Apply and Exit_ to apply all your changes, and exit Spread Designer. Users can reopen the designer and make changes to the flowchart.

![Save and Display the Flowchart in a .NET WinForms App](https://files.grapecity.com/gc-website-media/bexpjjht/19-spnet-final-apply-and-exist.gif?width=500&height=303.7037037037037)

End-users can also export the .NET flowchart created within the app as an Excel (.XLSX) file or import existing Excel file flowcharts using the Spread Designer’s Import and Export feature.

![Save Flowchart](https://files.grapecity.com/gc-website-media/hpvpxlm3/20-spnet-save-flowchart-to-excel.gif?width=500&height=303.7037037037037)

And just like that, you have created a .NET 6 WinForms App where end-users can easily create, design, and modify flowcharts easily and quickly using a familiar spreadsheet UI.

## .NET Spreadsheet Components

This article only scratches the surface of the full capabilities of [**Spread.NET**, the world’s #1 selling .NET spreadsheet component](https://developer.mescius.com/spreadnet). Review the [documentation](https://developer.mescius.com/spreadnet/docs/) to see some of the many available features, and [download the demo explorer](https://developer.mescius.com/spreadnet/demos) to see the features in action and interact with the sample code. Integrating a spreadsheet component with your .NET application allows you to easily customize your users' experience and provide them with familiar spreadsheet functionality. Check out our release page to learn more about Spread.NET and the new features added in the latest release.