Overview of a flowchart

Creating a flowchart is probably one of the most difficult, time consuming, yet rewarding experiences you can achieve as a programmer. A flowchart is a logical step by step process that shows what a program is doing along each step of the way. This is crucial if you want to write a program that will not require hours, days, or even weeks of debugging to see why it still doesn't work the way you intended. In programming terms a flowchart is a schematic representation of an algorithm that shows the process visually in a logical way.

Visual display of a flowchart

A flowchart is made up of a series of rectangles, squares, diamonds, ovals and other shapes. Each shape is distinct and performs a specific action. In order to stay on track and understand this section, it will be helpful if you draw the shapes, label them, and write the purpose of each one. I will break this down by showing a picture, action of the shape, and the purpose so you can follow this step by step.

Take notice also of the lines in the pictures. These lines indicate the flow of the logic in the program. In simple terms they represent what shape the computer will look at next when cycling through the computer program. They are also known as direction symbols.

The Start shape (Begin)

To picture this shape just imagine you are beginning to compete in a race. All contestants are required to line up on a "start line" before the event begins. So therefore the Start shape is where the program will begin before running (executing) through the computer program.

The Input shape (Data)

With the next shape imagine the runner having a set of statistics(data). This could include gender, age, height, wins, losses, etc. These can be translated into input since each of these are characteristics about the runner. In programming this is known as a read. When you read something (just like in a book for example) you are gathering information. So when you execute a statement that reads a file or statistics for our runner you are retrieving the information to be used later.

The Process shape (Initialize)

The Process shape can be setup before the race has begun. Don't confuse this with the start. There will be some things in place to ensure the race makes logical sense. For example when thinking about the runner again. He will need a starting place. Let's call this M=1 (as in the picture). The M=1 will represent that he is at the first position. For the F=1 lets just imagine that represents a position that will take place as he continues to run forward. The F=1 could change later to something like F=F+1(this will be drawn in the second Process shape. So this first Process is basically the initialization of variables and objects in a program.

Another Process shape (Data)

The second Process shape can be thought of as a combination of things. Let's take the example of the runner again to see this visually once more. The race has begun and the runner is gaining momentum as he progresses. Along the way he is doing other things like moving his arms, his feet, panting, and even sweating. These are actions that represent the state he is currently in. Look at the picture example and you will see F=F*M. This could mean the runners speed is being multiplied by whatever value is in M. So if M=2 it will look like: F=F*2. His steps will be multiplied by 2 each take his pace increases. Therefore a process is similar in that it can include a number of different things occuring. It is where actions take place, numbers change, other events could be running (other racers), and many other things.

The Process shape (Again)

Once more we are utilizing the Process shape to change a variable's value. In this example we are incrementing the variable "M" by one on each iteration. This will cause the value to increase by 1 number each time. So after using M=M+1 the result in "M" will be a 2. This will continue adding new values into "M" for infinity.

In our example again we can visualize the runner moving forward in small steps. The runner will begin to pant harder the larger this number becomes since he/she is moving at a constant rate.

The Condition shape

A new shape will be introduced now known as the "condition" shape. When the program arrives at a conditon shape or statement the computer will be required to make a decision. This decision will be either "yes" or "no" depending on where the logic flows to.

Also be sure to check out the navigation tab on the left for conditions or you can get there by clicking this link. In our example again let's suppose the runner decides to change direction. Let's assume the runner first chose to advance in the East direction and suddenly wants to backtrack by going West instead. When the runner makes the decision to change his/her mind then the condition will change to either "yes" or "no". If the runner is going to run back to the original starting place, let's set this conditon to "no" since they are no longer moving forward.

So in simple terms the condition statement takes place when a question arises of what to do next. The runner (or program) will be the one deciding what to do at this point. The condition statement can also contain numbers instead. In the picture example IS M=N? Let's suppose this means that the runner was moving forward until he/she arrived at N. The variable N can represent anything. Let's suppose instead of running back West they have chosen to go North. So the variable N will be a number instead. It could be set to any value.

As an example IS M=20. This is simply stating if the runner has moved 20 steps forward then the computer will decide what action to take next.

The Output shape

We are very close to the end of the program. In the old days when a computer program was near the end of the process, loop, etc the program would send output to the display screen. This is also the same way a common printer works. It gathers all the data from a memory area known as the buffer and then sends the results of the printed file to a printer.

In this example we observe PRINT F. The PRINT F in the earlier years of programming would use the statement "PRINT" and the variable "F" to send a result to the monitor screen. In our progressing example let's assume the runner has completed the race and wants to see a list of his/her statistics. By issuing a PRINT F the results would be stored here. Now take notice there is only one variable "F" here which will only give one result. Let's suppose the "F" stands for "Final Results" or something similar. To see a complete list of statistics, such as gender, miles ran, speed, time we could use examples like this:

PRINT "G"

PRINT M

PRINT S

PRINT T

Take note that the "G" will be a character value rather than a number. Here is what a typical program output may look like:

PRINT "Male"

PRINT 8

PRINT 5

PRINT 25

So this would be the runner is a "Male", ran 8 miles at a speed of 5 mph and made a time of 96 minutes.

This may not be a realistic example, but you should hopefully understand how the output statement sends variable results to a screen.

The End shape

In this final conclusion to the flowchart examples we have arrived at the End shape. The End shape does not require a long explanation. Rather it means the program has ended. In our example it could indicate the runner has completed the race or quit instead.