Create a Dynamic .NET Flowchart

Flowcharts are diagrams full of shapes and symbols that collectively represent individual steps in a process. Flowcharts are an effective means to visualize data. Using a flowchart, you can easily explain a complicated process. For the end-user, flowcharts offer easy readability while increasing comprehension and data retention.

Spread.NET version 13 now offers an enhanced Shape Engine—a new method to create dynamic flowcharts. Spread.NET now supports Excel shape themes and styles (along with connecting and grouping shapes). This allows you to create customized flowcharts quickly and easily.

Here, we breakdown, step-by-step, how to create this shape operation workflow:

Enable the Enhanced Shape Engine

To begin, open a Windows Forms App (.NET Framework) in Visual Studio.

Once we have the project open, go to your form. Using the FpSpread component for v13, draw a spread instance on your form. This will open the Spread Designer (to start working in design time).

Next, we must enable the enhanced shape engine in design time. Look to the right panel and select Spread within the dropdown. Look for Features and expand it. Change EnhancedShapeEngine to “True.”

Add shapes to the flowchart

Now, we'll now add shapes into the spreadsheet and begin forming our flowchart.

To select the shapes, go to the Insert tab and hover over the Shapes drop-down. Notice that there are different sections of shapes. For our example, we will be using the flowchart portion.

We will use five Flowchart: Alternative Process for the processes and two Flowchart: Connector shapes to be the beginning and end of the flowchart.

Your spreadsheet should now look like this:

Add text to the shapes

To add text to a shape, double-click on the shape and a cursor will appear.

We will start by modifying our Flowchart: Alternative Process shapes to read the following: FR Y14A, Update Global Drivers, Adjustments, Business Line Input, Adjustment Review.

Hit enter (in-between the words within the shape) so the formatting is easily readable.

Next, we'll adjust the size, alignment, and color.

Start by selecting all the shapes that now contain text. Do this by holding in the Shift key and click on all of them. Once they all are selected, change the font size to be 16 and font color to be 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 be 160 and the Height should remain at 100.

Connecting shapes in the flowchart

Next, we'll connect our shapes to form the process flow of the chart. We can connect shapes with lines and arrows. For our example, we'll use line arrows with (and without) elbow connectors.

To add a connector, we will flow the same steps we did to add shapes in step 2, this time we will be selecting the Connector: Elbow Arrow.

Once this is selected and the connector is now on the spreadsheet, we will hover our 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 are looking 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.

We will now repeat this with the opposite side to connect the shapes.

For the rest of the flowchart, please use the Line Arrow and Connector: Elbow Arrow to connect the existing shapes like below:

Enhance the shapes with custom styling

To enhance the effective of the flowchart, add shape styling. This step covers how to apply styled themes and apply custom styling to shapes.

Select the three shapes that contain: FR Y14A,_ Business Line Input_, and Adjustment Review (you can select all three at once by holding down the shift key while selecting the shapes). Once all three are selected, navigate to the Style Themes under the Shape Format tab, and select the theme titled Subtle Effect – Accent 1.

Repeat this step with the remaining two process shapes that contain Update Global Drivers, and Adjustments with the style theme Subtle Effect – Accent 3, and on our start and ending shapes with the style theme Colored Fill – Accent 6.

We'll add custom styling to one of our connector arrows. We must select the connecting arrow between Adjustments and Adjustment Review.

Once this is selected, navigate to the Shape Format tab and select the Shape Outline dropdown.

Within the drop-down select the standard color Red.

This is how our chart should look after applying the styling:

Grouping shapes in the flowchart

Now, we'll group shapes together to further enhance our flowchart. In this step, we will be grouping two images to our starting and ending shapes.

For this example, we have used two symbols that represent ‘start’ and ‘stop.’ To add these symbols, we'll copy/paste the symbols into our workbook. To do this, we must must enable the RichClipboard feature (discussed above).

We now can copy/paste the images into our spread instance.

We have copy/pasted an image of a symbol for ‘play.’ Once that image is in the spreadsheet, select the image and drag it (so it appears to be inside of the starting shape)

Next, hold down the shift key and select the starting shape.

Once both are selected, navigate to the Shape Format tab and note the Group drop-down within the Arrange portion. Select Group from this drop-down and notice that these shapes are now recognized as one.

Repeat the step above (with the stop shape at the end of the flowchart) but this time, once both shapes are selected, right-click and select and navigate to Group and select Group.

Finalizing the flowchart

This will be our final step to creating this flowchart. Our connectors, like Excel, do not allow for text to be automatically attached to the process flow. To do this, we will add a shape, remove any background or outline styling and grouping it to some of our connector shapes.

Insert a new shape.

Double-click within the shape and type Reject.

Next, navigate to the Shape Format tab and using the _Shape Fill _and Shape Outline drop-down select No Outline and No Fill. You may also need to change the font color to Black.

Select both the new shape and the red connector arrow and group them together.

Repeat all of the steps above, but this time creating a connector label between Adjustment Review and the end of the flowchart

Below is the results of our tutorial, we have seen how comprehensive and high functioning the new Enhanced Shape Engine in Spread.NET version 13 is during Design Time.

Download Now!

Mackenzie Albitz

Product Marketing Specialist
comments powered by Disqus