Create a WinForms Flowchart with Shapes

Using the Enhanced Shape Engine in Spread.NET WinForms, you can easily create flowcharts to show business processes, use case diagrams, business process maps, and more.

In this example, we will recreate one of my favorite flowcharts of all time, How To Write Good Code by xkcd.com.

Figure 1 - Flowchart created in Spread.NET 13

This flowchart shows a breakdown of the development process and pokes some fun at the division between the Waterfall-enthusiasts ("Do Things Right") versus the Agile enthusiasts ("Do Thigs Fast") – you end up following the "HURD" loop or the "Android" loop, and "Good Code" comes from who-knows-where. Well I know where it comes from: GrapeCity! (For the record, we here are GrapeCity follow a hybrid process that is like Waterfall for the planning parts, and then like Agile for the actual development in sprints).

This sample is available in the new Spread.NET 13 WinForms Control Explorer under Enhanced Shapes Engine - Flowchart.

Step 1: Enable Enhanced Shape Engine

When adding the Spread.NET WinForms 13 control to the form, the new Enhanced Shape Engine is not enabled by default. This is to preserve backwards compatibility with previous releases and ensure that legacy code using the old Shapes Engine continues to operate as before. So the first thing required to create the flowchart is to enable the new Enhanced Shape Engine using the new FpSpread.Features property:

[C#] Enable Enhanced Shape Engine

fpSpread1.Features.EnhancedShapeEngine = true;

[VB] Enable Enhanced Shape Engine

FpSpread1.Features.EnhancedShapeEngine = True

Step 2: Initialize Variables

To add the flowchart shapes, we will need to define some variables to reuse for creating and initializing the shapes:

[C#] Initialize Variables

IWorkbook workbook = fpSpread1.AsWorkbook();
IWorksheet worksheet = workbook.ActiveSheet;
IShapes shapes = worksheet.Shapes;
GrapeCity.Core.SchemeThemeColors blackARGB = GrapeCity.Core.SchemeThemeColors.Text1;

[VB] Initialize Variables

Dim workbook As IWorkbook = FpSpread1.AsWorkbook()
Dim worksheet As IWorksheet = workbook.ActiveSheet
Dim shapes As IShapes = FpSpread1.AsWorkbook().ActiveSheet.Shapes
Dim blackARGB As GrapeCity.Core.SchemeThemeColors = GrapeCity.Core.SchemeThemeColors.Text1

The shapes will be used to add the shapes using the IWorksheet.Shapes property.

Step 3: Add the title shape

Figure 2 - title shape

The following code adds the title shape as a Text Effect:

[C#] Add Title Shape

IShape title = shapes.AddTextEffect(PresetTextEffect.Unspecified, "HOW TO WRITE GOOD CODE:", "Comic Sans MS", 28, true, false, 112, 44);
title.Fill.Visible = false;
title.Line.Visible = false;
title.Width = 610;
title.Height = 71;
title.TextFrame.CanEdit = true;
title.TextFrame.MarginBottom = title.TextFrame.MarginLeft = title.TextFrame.MarginRight = title.TextFrame.MarginTop = 0;
title.TextFrame.TextRange.Font.Fill.BackColor.ObjectThemeColor = blackARGB ;

[VB] Add Title Shape

Dim title As IShape = shapes.AddTextEffect(PresetTextEffect.Unspecified, "HOW TO WRITE GOOD CODE:", "Comic Sans MS", 28, True, False, 112, 44)
title.Fill.Visible = False
title.Line.Visible = False
title.Width = 610
title.Height = 71
title.TextFrame.CanEdit = True
title.TextFrame.MarginBottom = 0
title.TextFrame.MarginLeft = 0
title.TextFrame.MarginRight = 0
title.TextFrame.MarginTop = 0
title.TextFrame.TextRange.Font.Fill.BackColor.ObjectThemeColor = blackARGB

The code creates the title shape using IShapes.AddTextEffect which can specify a PresetTextEffect, the text "HOW TO WRITE GOOD CODE:" to display in the shape, the font, and location. Then the Fill and Line are removed using their respective Visible properties – this makes the interior of the title shape transparent and removes the outline around the text.

Then the Width and Height are initialized, along with the TextFrame properties to enable editing, set the margins to 0, and set blackARGB for the Font.Fill.BackColor to make the text black.

Step 4: Add the start shape

_Figure 3 - start shape_

The following code adds the start shape as a AutoShapeType.ProcessFlow:

[C#] Add Start Shape

IShape start = shapes.AddShape(AutoShapeType.ProcessFlow, 190, 127, 192, 90);
start.Fill.Visible = false;
start.Line.ForeColor.ObjectThemeColor =blackARGB;
start.Line.Weight = 3.0;
start.TextEffect.Alignment = TextEffectAlignment.Center;
start.TextEffect.FontName = "Comic Sans MS";
start.TextEffect.FontSize = 20.0;
start.TextEffect.Text = "START\nPROJECT.";
start.TextFrame.CanEdit = true;
start.TextFrame.MarginBottom = start.TextFrame.MarginLeft = start.TextFrame.MarginRight = start.TextFrame.MarginTop = 0;
start.TextFrame.TextRange.Font.Fill.BackColor.ObjectThemeColor = blackARGB;
start.TextFrame.VerticalAnchor = VerticalAnchor.Middle;
start.TextFrame.WordWrap = true;

[VB] Add Start Shape

Dim start As IShape = shapes.AddShape(AutoShapeType.ProcessFlow, 190, 127, 192, 90)
start.Fill.Visible = False
start.Line.ForeColor.ObjectThemeColor = blackARGB
start.Line.Weight = 3.0
start.TextEffect.Alignment = TextEffectAlignment.Center
start.TextEffect.FontName = "Comic Sans MS"
start.TextEffect.FontSize = 20.0
start.TextEffect.Text = "START" & vbLf & "PROJECT."
start.TextFrame.CanEdit = True
start.TextFrame.MarginBottom = 0
start.TextFrame.MarginLeft = 0
start.TextFrame.MarginRight = 0
start.TextFrame.MarginTop = 0
start.TextFrame.TextRange.Font.Fill.BackColor.blackARGB
start.TextFrame.VerticalAnchor = VerticalAnchor.Middle
start.TextFrame.WordWrap = True

The code creates the start shape using IShapes.AddShape which can specify the AutoShapeType, then the Fill is removed using the Visible property, and the Line.ForeColor is set to blackARGB with Weight 3 to make it extra thick. Then the TextEffect properties are set to show the "START PROJECT" text wrapped inside the shape, and the TextFrame properties are set to allow editing the shape text, set the margins to 0, set blackARGB for the Font.Fill.BackColor to make the text black, and finally to wrap the text using ITextFrame.WordWrap.

Step 5: Add the rightOrFast shape

_Figure 4 - rightOrFast shape_

The following code adds the rightOrFast shape using AutoShapeType.Diamond:

[C#] Add rightOrFast Shape

start.PickUp();
IShape rightOrFast = shapes.AddShape(AutoShapeType.Diamond, 86, 278, 400, 280);
rightOrFast.Apply();
rightOrFast.TextEffect.Text = "DO\nTHINGS\nRIGHT OR DO\nTHEM FAST?";

[VB] Add rightOrFast Shape

start.PickUp()
Dim rightOrFast As IShape = shapes.AddShape(AutoShapeType.Diamond, 86, 278, 400, 280)
rightOrFast.Apply()
rightOrFast.TextEffect.Text = "DO" & vbLf & "THINGS" & vbLf & "RIGHT OR DO" & vbLf & "THEM FAST?"

The code creates the rightOrFast shape using IShapes.AddShape and AutoShapeType.Diamond, then initializes the text to "DO THINGS RIGHT OR DO THEM FAST?" and then uses IShape.PickUp and IShape.Apply to copy the settings for Line, Fill, TextEffect, and TextFrame from the start shape.

Step 6: Add the arrow1 connector from the start shape to the rightOrFast shapes

_Figure 5 - arrow1 connector_

The following code adds the arrow1 connector between the bottom-center of the start shape and the top-center of the rightOrFast shape:

[C#] Add arrow connector between start and rightOrFast

IShape arrow1 = shapes.AddConnector(ConnectorType.Straight, 0, 0, 10, 10);
arrow1.Line.ForeColor.ObjectThemeColor = blackARGB;
arrow1.Line.Weight = 3.0;
arrow1.Line.EndArrowheadStyle = GrapeCity.Drawing.ArrowheadStyle.Arrow;
arrow1.ConnectorFormat.BeginConnect(start, 0);
arrow1.ConnectorFormat.EndConnect(rightOrFast, 0);
//Choose the shortest path to connect shapes
arrow1.RerouteConnections();

[VB] Add arrow connector between start and rightOrFast

Dim arrow1 As IShape = shapes.AddConnector(ConnectorType.Straight, 0, 0, 100, 100)
arrow1.Line.ForeColor.ObjectThemeColor = blackARGB
arrow1.Line.Weight = 3.0
arrow1.Line.EndArrowheadStyle = GrapeCity.Drawing.ArrowheadStyle.Arrow
arrow1.ConnectorFormat.BeginConnect(start, 0)
arrow1.ConnectorFormat.EndConnect(rightOrFast, 0)
'Choose the shortest path to connect shapes
arrow1.RerouteConnections()

The code creates the arrow1 connector using IShapes.AddConnector specifying ConnectorType.Straight, location and size. Then the Line properties are set to show blackARGB for ForeColor and ArrowheadStyle.Arrow for EndArrowheadStyle. Finally, the arrow is connected from the start shape to the rightOrFast shape using ConnectorFormat.BeginConnect, ConnectorFormat.EndConnect, and IShape.RerouteConnections which find the optimal shortest-path connection points.

Step 7: Add the fast shape

_Figure 6 - fast shape_

The following code adds the fast shape as a TextEffect, similarly to the title shape in Step 3 – the fast shape shows the label "FAST" between the rightOrFast and codeFast shapes (in Step 8):

[C#] Add the fast shape

IShape fast = worksheet.Shapes.AddTextEffect(PresetTextEffect.Unspecified, "FAST", "Comic Sans MS", 20, false, false, 488, 375);

[VB]

Add the fast shape

Dim fast As IShape = shapes.AddTextEffect(PresetTextEffect.Unspecified, "FAST", "Comic Sans MS", 20, False, False, 488, 375)

The code creates the fast shape using AddTextEffect, specifying "FAST" for the text.

Step 8: Add the codeFast shape

Figure 7 - codeFast shape

The following code adds the codeFast shape as a AutoShapeType.ProcessFlow:

[C#] Add the codeFast shape

IShape codeFast = shapes.AddShape(AutoShapeType.ProcessFlow, 595, 373, 100, 90);
codeFast.TextEffect.Text = "CODE\nFAST";

[VB] Add the codeFast shape

Dim codeFast As IShape = shapes.AddShape(AutoShapeType.ProcessFlow, 595, 373, 100, 90)
codeFast.TextEffect.Text = "CODE" & vbLf & "FAST"

Step 9: Add the arrow2 connector between rightOrFast and codeFast shapes

Figure 8 - arrow2 connector

The following code adds the arrow2 connector between the rightOrFast and codeFast shapes:

[C#] Add the arrow2 connector

IShape arrow2 = arrow1.Duplicate();
arrow2.ConnectorFormat.BeginConnect(rightOrFast, 3);
arrow2.ConnectorFormat.EndConnect(codeFast, 1);

[VB] Add the arrow2 connector

Dim arrow2 As IShape = arrow1.Duplicate()
arrow2.ConnectorFormat.BeginConnect(rightOrFast, 3)
arrow2.ConnectorFormat.EndConnect(codeFast, 1)

This code is similar to the code adding the arrow1 connector in Step 6: The code creates the arrow2 connector using IShapes.AddConnector specifying the ConnectorType.Straight, then the Line properties are set to show blackARGB for ForeColor and ArrowheadStyle.Arrow for EndArrowheadStyle.

Finally, the arrow is connected to the rightOrFast shape using ConnectorFormat.BeginConnect, specifying 3 for right-center, and then connected to the codeFast shape using ConnectorFormat.EndConnect, specifying 1 for left-center.

Step 10: Add the doesItWorkYet shape

Figure 9 - doesItWorkYet shape

The following code adds the doesItWorkYet shape using AutoShapeType.Diamond:

[C#] Add the doesItWorkYet shape

IShape doesItWorkYet = shapes.AddShape(AutoShapeType.Diamond, 495, 515, 300, 180);
doesItWorkYet.TextEffect.Text = "DOES IT\nWORK\nYET?";

[VB] Add the doesItWorkYet shape

Dim doesItWorkYet As IShape = shapes.AddShape(AutoShapeType.Diamond, 495, 515, 300, 180)
doesItWorkYet.TextEffect.Text = "DOES IT" & vbLf & "WORK" & vbLf & "YET?"

This code is similar to the code adding the rightOrFast shape in Step 5: the code creates the doesItWorkYet shape using IShapes.AddShape and AutoShapeType.Diamond.

Step 11: Add the arrow3 connector from the codeFast shape to the doesItWorkYet shape

Figure 10 - arrow3 connector

The following code adds the arrow3 connector between the codeFast and doesItWorkYet shapes:

[C#] Add the arrow3 connector

IShape arrow3 = arrow1.Duplicate();
arrow3.ConnectorFormat.BeginConnect(codeFast, 2);
arrow3.ConnectorFormat.EndConnect(doesItWorkYet, 0);

[VB] Add the arrow3 connector

Dim arrow3 As IShape = arrow1.Duplicate()
arrow3.ConnectorFormat.BeginConnect(codeFast, 2)
arrow3.ConnectorFormat.EndConnect(doesItWorkYet, 0)

This code is similar to the code adding the arrow1 connector in Step 6: The code creates the arrow3 connector using IShapes.Duplicate to create a copy of arrow1, then the arrow is connected to the codeFast shape using ConnectorFormat.BeginConnect, specifying 2 for bottom-center, and then connected to the doesItWorkYet shape using ConnectorFormat.EndConnect, specifying 0 for top-center.

Step 12: Add the No1 shape

Figure 11 - No1 shape

The following code adds the No1 shape, which is the label for the arrow4 connector added in Step 13:

[C#] Add the No1 shape

IShape No1 = shapes.AddTextEffect(PresetTextEffect.Unspecified, "NO", "Comic Sans MS", 20, false, false, 795, 565);

[VB] Add the No1 shape

Dim No1 As IShape = shapes.AddTextEffect(PresetTextEffect.Unspecified, "NO", "Comic Sans MS", 20, False, False, 795, 565)

This code is similar to the code adding the title and fast shapes in Step 3 and Step 7: the code creates the No1 shape using AddTextEffect, specifying "NO" for the text.

Step 13: Add the arrow4 connector from the doesItWorkYet shape to the codeFast shape

Figure 12 - arrow4 connector

The following code adds the arrow4 connector from the doesItWorkYet shape to the codeFast shape:

[C#] Add the arrow4 connector

IShape arrow4 = worksheet.Shapes.AddConnector(ConnectorType.Elbow, 0, 0, 100, 100);
arrow4.Line.ForeColor.ObjectThemeColor = blackARGB;
arrow4.Line.Weight = 3.0;
arrow4.Line.EndArrowheadStyle = GrapeCity.Drawing.ArrowheadStyle.Arrow;
arrow4.ConnectorFormat.BeginConnect(doesItWorkYet, 3);
arrow4.ConnectorFormat.EndConnect(codeFast, 3);
arrow4.Adjustments[0] -= 0.75;

[VB] Add the arrow4 connector

Dim arrow4 As IShape = shapes.AddConnector(ConnectorType.Elbow, 0, 0, 100, 100)
arrow4.Line.ForeColor.ObjectThemeColor = blackARGB
arrow4.Line.Weight = 3.0
arrow4.Line.EndArrowheadStyle = GrapeCity.Drawing.ArrowheadStyle.Arrow
arrow4.ConnectorFormat.BeginConnect(doesItWorkYet, 3)
arrow4.ConnectorFormat.EndConnect(codeFast, 3)
arrow4.Adjustments(0) -= 0.75

This code is similar to the code adding the arrow1, arrow2, and arrow3 connectors in Step 6, Step 9, and Step 11: the code creates the arrow4 connector using IShapes.AddConnector specifying the ConnectorType.Elbow– this type of connector draws the bent arrows that point back to previous steps – then the Line properties are set to show blackARGB for ForeColor and ArrowheadStyle.Arrow for EndArrowheadStyle.

Finally, the arrow is connected to the doesItWorkYet shape using ConnectorFormat.BeginConnect, specifying 3 for right-center, and then connected to the codeFast shape using ConnectorFormat.EndConnect, specifying 3 for right-center. To ensure that the connector does not overlap the No1 shape, the code also decrements Adjustments(0), the first adjustment point, by 0.75.

Step 14: Add the right shape

Figure 13 - right shape

The following code adds the right shape, which is the label for the arrow5 shape in Step 16:

[C#] Add the right shape

IShape right = shapes.AddTextEffect(PresetTextEffect.Unspecified, "RIGHT", "Comic Sans MS", 20, false, false, 290, 560);

[VB] Add the right shape

Dim right As IShape = shapes.AddTextEffect(PresetTextEffect.Unspecified, "RIGHT", "Comic Sans MS", 20, False, False, 290, 560)

This code is similar to the code adding the title, fast, and_No1_ shapes in Step 3, Step 7, and Step 12: the code creates the right shape using AddTextEffect, specifying "RIGHT" for the text.

Step 15: Add the codeWell shape

Figure 14 - codeWell shape

The following code adds the codeWell shape as a AutoShapeType.ProcessFlow:

[C#] Add the codeWell shape

IShape codeWell = worksheet.Shapes.AddShape(AutoShapeType.ProcessFlow, 232, 628, 106, 90);
codeWell.TextEffect.Text = "CODE\nWELL";

[VB] Add the codeWell shape

Dim codeWell As IShape = shapes.AddShape(AutoShapeType.ProcessFlow, 232, 628, 106, 90)
codeWell.TextEffect.Text = "CODE" & vbLf & "WELL"

This code is similar to the code adding the start and codeFast shapes in Step 4 and Step 8: the code creates the codeWell shape using IShapes.AddShape specifying AutoShapeType.ProcessFlow. Then the TextEffect properties are set to show the "CODE WELL" text wrapped inside the shape.

Step 16: Add the arrow5 connector from the rightOrFast shape to the codeWell shape

Figure 15 - arrow5 connector

The following code adds the arrow5 connector from the rightOrFast shape to the codeWell shape:

[C#] Add the arrow5 connector

IShape arrow5 = arrow1.Duplicate();
arrow5.ConnectorFormat.BeginConnect(rightOrFast, 2);
arrow5.ConnectorFormat.EndConnect(codeWell, 0);

[VB] Add the arrow5 connector

Dim arrow5 As IShape = arrow1.Duplicate()
arrow5.ConnectorFormat.BeginConnect(rightOrFast, 2)
arrow5.ConnectorFormat.EndConnect(codeWell, 0)

This code is similar to the code adding the arrow1 and arrow3 connectors in Step 6 and Step 11: The code creates the arrow5 connector using IShapes.Duplicate to create a copy of arrow1, then the arrow is connected to the rightOrFast shape using ConnectorFormat.BeginConnect, specifying 2 for bottom-center, and then connected to the codeWell shape using ConnectorFormat.EndConnect, specifying 0 for top-center.

Step 17: Add the areYouDoneYet shape

Figure 16 - areYouDoneYet shape

The following code adds the areYouDoneYet shape using AutoShapeType.Diamond:

[C#] Add the areYouDoneYet shape

IShape areYouDoneYet = shapes.AddShape(AutoShapeType.Diamond, 105, 783, 360, 200);
areYouDoneYet.TextEffect.Text = "ARE\nYOU DONE\nYET?";

[VB] Add the areYouDoneYet shape

Dim areYouDoneYet As IShape = shapes.AddShape(AutoShapeType.Diamond, 105, 783, 360, 200)
areYouDoneYet.TextEffect.Text = "ARE" & vbLf & "YOU DONE" & vbLf & "YET?"

This code is similar to the code adding the rightOrFast and doesItWorkYet shapes in Step 5 and Step 10: the code creates the areYouDoneYet shape using IShapes.AddShape and AutoShapeType.Diamond, then initializes the text to "ARE YOU DONE YET?" similarly to the start shape.

Step 18: Add the arrow6 connector between the codeWell shape and the areYouDoneYet shape

Figure 17 - arrow6 connector

The following code adds the arrow6 connector from the codeWell shape to the areYouDoneYet shape:

[C#] Add the arrow6 connector

IShape arrow6 = arrow1.Duplicate();
arrow6.ConnectorFormat.BeginConnect(codeWell, 2);
arrow6.ConnectorFormat.EndConnect(areYouDoneYet, 0);

[VB] Add the arrow6 connector

Dim arrow6 As IShape = shapes.AddConnector(ConnectorType.Straight, 0, 0, 100, 100)
arrow6.ConnectorFormat.BeginConnect(codeWell, 2)
arrow6.ConnectorFormat.EndConnect(areYouDoneYet, 0)

This code is similar to the code adding the arrow1, arrow3, andarrow5 connectors in Step 6, Step 11, and Step 16: The code creates the arrow6 connector using IShapes.Duplicate to create a copy of arrow1, then the arrow is connected to the codeWell shape using ConnectorFormat.BeginConnect, specifying 2 for bottom-center, and then connected to the areYouDoneYet shape using ConnectorFormat.EndConnect, specifying 0 for top-center.

Step 19: Add the No2 shape

Figure 18 - No2 shape

The following code adds the No2 shape, which is the label for the arrow7 connector added in Step 20:

[C#] Add the No2 shape

IShape No2 = shapes.AddTextEffect(PresetTextEffect.Unspecified, "NO", "Comic Sans MS", 20, false, false, 465, 842);

[VB] Add the No2 shape

Dim No2 As IShape = shapes.AddTextEffect(PresetTextEffect.Unspecified, "NO", "Comic Sans MS", 20, False, False, 465, 842)

This code is similar to the code adding the title, fast, and No1 shapes in Step 3, Step 7, and Step 12 : the code creates the No2 shape using AddTextEffect, specifying "NO" for the text.

Step 20: Add the arrow7 connector from the areYouDoneYet shape to the codeWell shape

Figure 19 - arrow7 connector

The following code adds the arrow7 connector from the areYouDoneYet shape to the codeWell shape:

[C#] Add the arrow7 connector

IShape arrow7 = arrow4.Duplicate();
arrow7.ConnectorFormat.BeginConnect(areYouDoneYet, 3);
arrow7.ConnectorFormat.EndConnect(codeWell, 3);
arrow7.Adjustments[0] -= 0.75;

[VB] Add the arrow7 connector

Dim arrow7 As IShape = arrow4.Duplicate()
arrow7.ConnectorFormat.BeginConnect(areYouDoneYet, 3)
arrow7.ConnectorFormat.EndConnect(codeWell, 3)
arrow7.Adjustments(0) -= 0.75

This code is similar to the code adding the arrow4 in Step 13: the code creates the arrow7 connector using IShapes.Duplicate to create a copy of arrow4 (which uses the ConnectorType.Elbow that draws the bent arrows) then the arrow is connected to the areYouDoneYet shape using ConnectorFormat.BeginConnect, specifying 3 for right-center, and then connected to the codeWell shape using ConnectorFormat.EndConnect, specifying 3 for right-center.

To ensure that the connector does not overlap the No2 shape, the code also decrements Adjustments(0), the first adjustment point, by 0.75.

Step 21: Add the No3 shape

Figure 20 - No3 shape

The following code adds the No3 shape, which is the label for the arrow8 connector added in Step 24:

[C#] Add the No3 shape

IShape No3 = shapes.AddTextEffect(PresetTextEffect.Unspecified, "NO, AND THE\nREQUIREMENTS\nHAVE CHANGED.", "Comic Sans MS", 20, false, false, 290, 990);

[VB] Add the No3 shape

Dim No3 As IShape = shapes.AddTextEffect(PresetTextEffect.Unspecified, "NO, AND THE" & vbLf & "REQUIREMENTS" & vbLf & "HAVE CHANGED.", "Comic Sans MS", 20, False, False, 290, 990)

This code is similar to the code adding the No1 and No2 shapes in Step 12 and Step 19: the code creates the No3 shape using AddTextEffect, specifying "NO, AND THE REQUIREMENTS HAVE CHANGED" for the text.

Step 22: Add the almostBut shape

Figure 21 - almostBut shape

The following code adds the almostBut shape, which is the label for the arrow9 connector added in Step 25:

[C#] Add the almostBut shape

IShape almostBut = shapes.AddTextEffect(PresetTextEffect.Unspecified, "ALMOST, BUT IT'S\nBECOME A MASS OF\nKLUDGES AND\nSPAGHETTI CODE.", "Comic Sans MS", 20, false, false, 655, 695);

[VB] Add the almostBut shape

Dim almostBut As IShape = shapes.AddTextEffect(PresetTextEffect.Unspecified, "ALMOST, BUT IT'S" & vbLf & "BECOME A MASS OF" & vbLf & "KLUDGES AND" & vbLf & "SPAGHETTI CODE.", "Comic Sans MS", 20, False, False, 655, 695)

This code is similar to the code adding the title and fast shapes in Step 3 and Step 7: the code creates the almostBut shape using AddTextEffect, specifying "ALMOST, BUT IT'S BECOME A MASS OR KLUDGES AND SPAGHETTI CODE" for the text.

Step 23: Add the throwItOut shape

Figure 22 - throwItOut shape

The following code adds the throwItOut shape as a AutoShapeType.ProcessFlow:

[C#] Add the throwItOut shape

IShape throwItOut = shapes.AddShape(AutoShapeType.ProcessFlow, 125, 1150, 320, 90);
throwItOut.TextEffect.Text = "THROW IT ALL OUT\nAND START OVER.";

[VB] Add the throwItOut shape

Dim throwItOut As IShape = shapes.AddShape(AutoShapeType.ProcessFlow, 125, 1150, 320, 90)
throwItOut.TextEffect.Text = "THROW IT ALL OUT" & vbLf & "AND START OVER."

This code is similar to the code adding the start, codeFast and codeWell shapes in Step 4, Step 8, and Step 15: the code creates the throwItOut shape using IShapes.AddShape specifying AutoShapeType.ProcessFlow, then the TextEffect properties are set to show the "THROW IT OUT AND START OVER" text wrapped inside the shape.

Step 24: Add the arrow8 connector from the areYouDoneYet shape to the throwItOut shape

Figure 23 - arrow8 connector

The following code adds the arrow8 connector from the areYouDoneYet shape to the throwItOut shape:

[C#] Add the arrow8 connector

IShape arrow8 = arrow1.Duplicate();
arrow8.ConnectorFormat.BeginConnect(areYouDoneYet, 2);
arrow8.ConnectorFormat.EndConnect(throwItOut, 0);

[VB] Add the arrow8 connector

Dim arrow8 As IShape = arrow1.Duplicate()
arrow8.ConnectorFormat.BeginConnect(areYouDoneYet, 2)
arrow8.ConnectorFormat.EndConnect(throwItOut, 0)

This code is similar to the code adding the arrow1, arrow3, arrow5, and arrow6 connectors in Step 6, Step 11, Step 16, and Step 18:

The code creates the arrow8 connector using IShapes.Duplicate to create a copy of arrow1, then the arrow is connected to the areYouDoneYet shape using ConnectorFormat.BeginConnect, specifying 2 for bottom-center, and then connected to the throwItOut shape using ConnectorFormat.EndConnect, specifying 0 for top-center.

Step 25: Add the arrow9 connector from the doesItWorkYet shape to the throwItOut shape

Figure 24 - arrow9 connector

The following code adds the arrow9 connector from the doesItWorkYet shape to the throwItOut shape:

[C#] Add the arrow9 connector

IShape arrow9 = arrow4.Duplicate();
arrow9.ConnectorFormat.BeginConnect(doesItWorkYet, 2);
arrow9.ConnectorFormat.EndConnect(throwItOut, 3);

[VB] Add the arrow9 connector

Dim arrow9 As IShape = arrow4.Duplicate()
arrow9.ConnectorFormat.BeginConnect(doesItWorkYet, 2)
arrow9.ConnectorFormat.EndConnect(throwItOut, 3)

This code is similar to the code adding the arrow1, arrow3, arrow5, arrow6, and_ arrow8_ connectors in Step 6, Step 11, Step 16, Step 18, and Step 24:

The code creates the arrow9 connector using IShapes.Duplicate to create a copy of arrow4 (which uses the ConnectorType.Elbow that draws the bent arrows) then the arrow is connected to the doesItWorkYet shape using ConnectorFormat.BeginConnect, specifying 2 for bottom-center, and then connected to the throwItOut shape using ConnectorFormat.EndConnect, specifying 3 for right-center.

Step 26: Add the arrow10 connector from the throwItOut shape to the rightOrFast shape

Figure 25 - arrow10 connector

The following code adds the arrow10 connector from the throwItOut shape to the rightOrFast shape:

[C#] Add the arrow10 connector

IShape arrow10 = arrow9.Duplicate();
arrow10.ConnectorFormat.BeginConnect(throwItOut, 1);
arrow10.ConnectorFormat.EndConnect(rightOrFast, 1);

[VB] Add the arrow10 connector

Dim arrow10 As IShape = arrow9.Duplicate()
arrow10.ConnectorFormat.BeginConnect(throwItOut, 1)
arrow10.ConnectorFormat.EndConnect(rightOrFast, 1)

This code is similar to the code adding the arrow4 shape and arrow7 shape in Step 13 and Step 20: the code creates the arrow10 connector using IShapes.Duplicate to create a copy of arrow9 (which uses the ConnectorType.Elbow that draws the bent arrows) then the arrow is connected to the throwItOut shape using ConnectorFormat.BeginConnect, specifying 1 for left-center, and then connected to the rightOrFast shape using ConnectorFormat.EndConnect, specifying 1 for left-center.

Step 27: Add the arrow11 connector pointing to the left from the throwItOut shape

Figure 26 - arrow11 connector

The following code adds the arrow11 connector next to the throwItOut shape:

[C#] Add the arrow11 connector

IShape arrow11 = worksheet.Shapes.AddConnector(ConnectorType.Straight, 85, 1195, 125, 1195);
arrow11.Line.ForeColor.ObjectThemeColor =blackARGB;
arrow11.Line.Weight = 3.0;
arrow11.Line.EndArrowheadStyle = GrapeCity.Drawing.ArrowheadStyle.Arrow;
arrow11.Flip(true);

[VB] Add the arrow11 connector

Dim arrow11 As IShape = shapes.AddConnector(ConnectorType.Straight, 85, 1195, 125, 1195)
arrow11.Line.ForeColor.ObjectThemeColor = blackARGB
arrow11.Line.Weight = 3.0
arrow11.Line.EndArrowheadStyle = GrapeCity.Drawing.ArrowheadStyle.Arrow
arrow11.Flip(True)

This code creates the arrow11 connector and places it on top of the arrow10 connector, to the left of the throwItOut shape, to create the arrow head pointing to the left. The code creates the arrow initially pointing to the right, then uses the Flip method to flip the shape horizontally so that the arrow points to the left instead.

Step 28: Add the cloud shape

Figure 27 - cloud shape

The following code adds the cloud shape as a AutoShapeType.Cloud:

[C#] Add the cloud shape

IShape cloud = worksheet.Shapes.AddShape(AutoShapeType.Cloud, 720, 950, 80, 80);
cloud.TextEffect.Text = "?";

[VB] Add the cloud shape

Dim cloud As IShape = shapes.AddShape(AutoShapeType.Cloud, 720, 950, 80, 80)
cloud.TextEffect.Text = "?"

This code is similar to the code adding the start, codeFast, codeWell, and_ throwItOut_ shapes in Step 4, Step 8, Step 15, and Step 23: the code creates the cloud shape using IShapes.AddShape specifying AutoShapeType.Cloud, then the TextEffect properties are set to show the "?" text wrapped inside the shape.

Step 29: Add the goodCode shape

Figure 28 - goodCode shape

The following code adds the goodCode shape as a AutoShapeType.ProcessFlow:

[C#] Add the goodCode shape

IShape goodCode = shapes.AddShape(AutoShapeType.ProcessFlow, 710, 1070, 100, 100);
goodCode.TextEffect.Text = "GOOD\nCODE";

[VB] Add the goodCode shape

Dim goodCode As IShape = shapes.AddShape(AutoShapeType.ProcessFlow, 710, 1070, 100, 100)
goodCode.TextEffect.Text = "GOOD" & vbLf & "CODE"

This code is similar to the code adding the start, codeFast, codeWell, throwItOut, and_cloud_ shapes in Step 4, Step 8, Step 15, Step 23, and Step 28: the code creates the goodCode shape using IShapes.AddShape specifying AutoShapeType.ProcessFlow, then tthe TextEffect properties are set to show the "GOOD CODE" text wrapped inside the shape.

Step 30: Add the arrow12 connector from the cloud shape to the goodCode shape

Figure 29 arrow12 connector

The following code adds the arrow12 connector from the cloud shape to the goodCode shape:

[C#] Add the arrow12 connector

IShape arrow12 = arrow1.Duplicate();
arrow12.ConnectorFormat.BeginConnect(cloud, 1);
arrow12.ConnectorFormat.EndConnect(goodCode, 0);

[VB] Add the arrow12 connector

Dim arrow12 As IShape = arrow1.Duplicate()
arrow12.ConnectorFormat.BeginConnect(cloud, 1)
arrow12.ConnectorFormat.EndConnect(goodCode, 0)

This code is similar to the code adding the arrow1, arrow3, arrow5, and arrow6 connectors in Step 6, Step 11, Step 16, and Step 18: The code creates the arrow12 connector using IShapes.Duplicate to create a copy of arrow1, then the arrow is connected to the cloud shape using ConnectorFormat.BeginConnect, specifying 1 for bottom-center, and then connected to the goodCode shape using ConnectorFormat.EndConnect, specifying 0 for top-center.

Step 31: Set style for shapes

[C#] Add style for shapes

IShapeRange range1 = shapes.Range(new IShape[] { codeFast, doesItWorkYet, codeWell, areYouDoneYet, throwItOut, cloud, goodCode });
range1.Line.ForeColor.ObjectThemeColor = blackARGB;
range1.Line.Weight = 3.0;
range1.Fill.Visible = false;
range1.TextEffect.Alignment = TextEffectAlignment.Center;

range1.TextEffect.FontName = "Comic Sans MS";
range1.TextEffect.FontSize = 20.0;
range1.TextFrame.CanEdit = true;
range1.TextFrame.MarginBottom = range1.TextFrame.MarginLeft = range1.TextFrame.MarginRight = range1.TextFrame.MarginTop = 0;
range1.TextFrame.TextRange.Font.Fill.BackColor.ObjectThemeColor =blackARGB;
range1.TextFrame.VerticalAnchor = VerticalAnchor.Middle;
range1.TextFrame.WordWrap = true;

IShapeRange range2 = shapes.Range(new IShape[] { fast, No1, right, No2, No3, almostBut });
range2.Fill.Visible = false;
range2.Line.Visible = false;
range2.TextFrame.CanEdit = true;
range2.TextFrame.MarginBottom = No3.TextFrame.MarginLeft = No3.TextFrame.MarginRight = No3.TextFrame.MarginTop = 0;
range2.TextFrame.TextRange.Font.Fill.BackColor.ObjectThemeColor = blackARGB;

[VB] Add style for shapes

Dim range1 = shapes.Range(New IShape() {codeFast, doesItWorkYet, codeWell, areYouDoneYet, throwItOut, cloud, goodCode})
range1.Line.ForeColor.ObjectThemeColor = blackARGB
range1.Line.Weight = 3.0
range1.Fill.Visible = False
range1.TextEffect.Alignment = TextEffectAlignment.Center
range1.TextEffect.FontName = "Comic Sans MS"
range1.TextEffect.FontSize = 20.0
range1.TextFrame.CanEdit = True
range1.TextFrame.MarginBottom = 0
range1.TextFrame.MarginLeft = 0
range1.TextFrame.MarginRight = 0
range1.TextFrame.MarginTop = 0
range1.TextFrame.TextRange.Font.Fill.BackColor.ObjectThemeColor = blackARGB
range1.TextFrame.VerticalAnchor = VerticalAnchor.Middle
range1.TextFrame.WordWrap = True

Dim range2 = shapes.Range(New IShape() {fast, No1, right, No2, No3, almostBut})
range2.Fill.Visible = False
range2.Line.Visible = False
range2.TextFrame.CanEdit = True
range2.TextFrame.MarginBottom = No3.TextFrame.MarginLeft = No3.TextFrame.MarginRight = No3.TextFrame.MarginTop = 0
range2.TextFrame.TextRange.Font.Fill.BackColor.ObjectThemeColor = blackARGB

This code uses IShapes.Range to apply styles to specified sets of shapes. The codeFast, doesItWorkYet, codeWell, areYouDoneYet, throwItOut, cloud, and goodCode shapes are all initialized to with one set of style settings, and the fast, No1, right, No2, No3, and almostBut shapes are initialized with another set of style settings.

And that completes the flowchart! This sample is available in the new Spread.NET 13 WinForms Control Explorer under Enhanced Shapes Engine - Flowchart.

Download Now!<%/if%>