The Humble Flowchart

Introduction

In the software development realm, our mission transcends code; we must be architects of solutions and masters of problem-solving. One tried-and-true tool for problem-solving that I often find myself turning to is the humble flowchart. It has allowed me to hone my problem-solving abilities, a necessary skill for anyone hoping to make it as a programmer.

A flowchart is a visual representation of a process that outlines the steps necessary to complete a task or achieve a goal. Using flowcharts allows me to see the entire process at a glance, identify bottlenecks, and troubleshoot bugs with greater efficiency. When developing websites or applications, clients will demand that our solutions be as functional as they are user-friendly and visually appealing. We can achieve this by maximizing our ability to solve complex problems quickly and efficiently. In this essay, I will give a brief introduction to flowcharts and their many uses. I will show how we can harness their power to enhance our ability to solve problems and meet the requirements for even the most complex products.

Problem-Solving

It should go without saying that problem-solving is an essential skill for any kind of developer. We work in a fast-paced digital landscape where we are expected to not only iterate on and improve existing solutions but also solve new problems on demand. Without strong problem-solving skills, a developer may struggle to meet the requirements for any task that is put forward before them.

While we do spend most of our time writing code, the reality is that almost anyone can learn code syntax. It takes more than just knowing the syntax to come up with solutions to complex, evolving problems. When we solve problems, we identify the problem area, brainstorm potential solutions, filter out the best one, and implement it. Beyond just being a necessary skill for a programmer, this is a necessary life skill. This means that the best solutions will invariably be people who can think critically, explore creative solutions to problems, and be decisive, especially when faced with many potential solutions.

Flowcharts

As mentioned, flowcharts are a visual representation or depiction of a process, system, or algorithm. There are four common types of flow charts — process, workflow, swimlane, and data flow. They use simple symbols and arrows to show the sequence of steps in the process or the flow of information within a system. They are an important tool that allows software developers, system analysts, and project managers to visualise and document complex processes.

A typical flowchart will include symbols that represent different types of actions or decisions. Some of these may be:

• the start or end of a process
• an action or process
• a decision point where the process may branch off
• the direction of the flow of information or steps from one action to the next

Flowcharts can be created using software programs or by hand. They can be anything from simple diagrams to intricate representations of complex systems or processes.

For the rest of this essay, I will use the authentication flow to help us visualise how we can use flowcharts to solve any problems associated with implementing this feature. Using flowcharts allows us to break down the complex parts and processes of this feature into manageable chunks. This will make the whole problem more approachable and allow us to identify potential issues or obstacles that we may encounter.

Authentication Flow

Imagine you have a complex, dynamic web app that needs to render content based on the user’s identity. We implement authentication and authorisation to verify each user’s identity, what we can show them, and what actions they can perform. We can break this process down into several steps that will make it easier for us to implement the code.

1. When a user loads the page, check if they are already authenticated. This can be done by checking for a cookie that should be stored in the browser.
2. If a cookie is not found, redirect the user to your login/registration page.
3. Once the user submits the login form, check your database to see if, for example, their email is on record.
4. If it is, check the hash of the input password against the password hash stored in your database.
5. If the user does not exist or the passwords do not match, respond with an error message.
6. If the user exists, the server can send a cookie to be stored in the browser. This will be sent with any subsequent requests to identify the user.

We can show the same process as a flowchart as follows:

Of course, this is a simplified version using cookie-based authentication which is just one of many authentication methods at our disposal. It also omits in-depth implementation details such as the flow of hashing a password and then checking against the hash on storage. It can still help us to illustrate the general idea of what we want to achieve with our flowcharts.

Level Up Your Flowcharts

Flowcharts can play a big part in our development process, so it’s only right that we try to be more effective by getting better at designing them and conveying more information through them.

In many situations, you may not be the only one who has to be guided by the flowcharts that you design. As such, you must ensure that your flowcharts look good and are clear and easy to follow and understand. There are a few issues with the sample flowchart above on which we can improve. See if you can spot them before reading on.

Some general best practices for flow chart design are:

• Be consistent with your design elements — As I showed above, flowchart symbols are mostly standardised. If we can use universally recognisable symbols, it will allow anyone else to read and understand our flowcharts.
• Use colours — You may have noticed that the flowchart above looks a little bland and lifeless. Aside from using different shapes, we can spice up our flowcharts by using different colours to make each symbol stand out.
• Keep the spacing consistent — In the example above, some of the connections between my elements are shorter than others, and that can be displeasing to the eye. Try to make sure that the spacing between your elements is consistent. Most flowchart design software will allow you to do that. I used draw.io which is an amazing tool for designing your flowcharts and other diagrams.
• Maintain the direction — Do not mix things up by having flowcharts that start in one direction and then change at some point.
• Try to keep everything on one page — The last thing you want is to force your readers to flip back and forth between pages or try to recall the previous steps as they browse the flowchart on a different page. You may have to tinker with the sizes of the elements and text and the spacing between them to achieve this. If your flowchart cannot fit on one page, you may divide it into parts. However, try to keep each section self-contained enough to be understood in isolation without necessarily invoking other parts.

Conclusion

At this point, it’s evident that flowcharts can be an essential tool for developers. They can help us improve our problem-solving abilities and come up with effective solutions to many problems. They allow us to break down complex processes into manageable steps, identify problem areas in advance, and get a bird’s eye view of the whole system. Flowcharts can also be useful when working on a team, enhancing our ability to collaborate and communicate by reducing the possibility of any misunderstanding. Flowcharts will undoubtedly make you a better developer. But, don’t just take my word for it. Add flowcharts to your development workflow and enjoy the productivity gains.