How to Create a Flowchart in Your C# .NET Spreadsheet Application

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, a .NET spreadsheet component API, enterprise software developers can provide an Excel-like Spreadsheet Designer to their end users during their .NET applications runtime. The Spread Designer allows users to easily design the flowchart by adding and customizing shapes with Spread’s Enhanced Shape Engine 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.

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
2. Enable the Enhanced Shape Engine
3. Add Shapes to the Spreadsheet Flowchart
4. Add Text to the Shapes
5. Add Shapes to the Spreadsheet Flowchart
6. Apply Styling to the Shapes
7. Group Flowchart Shapes
8. Save and Display the Flowchart in a .NET WinForms App

.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.

Get Spread.NET for WinForms from NuGet, or download a free 30-day trial from our site!

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

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.

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);
}

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 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. Then, using the right panel of the Spread Designer, select Spread from the dropdown, look for Features, expand it, and change EnhancedShapeEngine to “True”.

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.

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 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 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 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.

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.

For this demo, connect the shapes like so:

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.

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

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’:

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.

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. 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.

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.

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. Review the documentation to see some of the many available features, and download the demo explorer 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.

Try Spread.NET today! Download a free 30-day trial!