Learn Flow Chart for Algorithm
The flow chart is an illustrative process flow diagram, It designs for algorithms and programming codes. Therefore, this tool is adopted by the software developers to prevent the challenges in the early stage of writing codes. However, nowadays other inventors extended this tool to illustrate other types of process flow and scenarios.
Flow chart consists of diagrams, lines, arrows, and labels to represent the flow of the process. And this tutorial will only use common symbols that apply for algorithms, here are the different types of shapes:
Table of Contents
Process
This symbol is a general representation of the operation. Therefore, it describes the events and output of the particular flow and defines how the next step works.
Decision
This symbol defines the condition that can control the flow of the process. However, it has two paths that determine which step of the process will take next.
Input/Output
This symbol contains data or variables declaration. Which is use for preparing a set of data for input and output of the flow.
Terminator
This symbol serves as a start or end of the process flow.
Flow Lines
This arrow line or flow line represents a flow to track the step and destination of the process or decision.
The symbols shown above are commonly used for algorithm and programming. And other symbols are not included in this tutorial. However, we will use those symbols above to create a flow chart for this tutorial.
High-level Flow Chart Design
The high-level is an architecture layer that illustrates the whole process of the application. Including architecture, database architecture, application flow, and more. This tutorial explains the flow of the user login page, and create high-level to the low-level design of the system.
Let’s create a high-level design first before we proceed to low-level. Therefore, this kind of approach creates enough understanding about the flow of your system and guide for the development. See image below for the whole flow of the user login chart:
As you can see, the terminator use as a starter of the flow. And then followed by the login process to identify the next step, which is to validate the user credentials:
We used a decision symbol to validate the user credentials, and it has two paths:
- if the credentials are invalid, the application will display an error message to inform the user.
- if the credentials are valid, the application will navigate to the home page.
And the rest will be easy to follow, just know the main process of your flow. Therefore, you must figure out where and when the application should start. And determine the conditions to control the flow of the application.
Low-level Flow Chart Design
Low-level is a step by step refinement process, in software application, this is a component-level design that illustrates the source code, algorithm architecture, data structure, etc.
In the example above, we used high-level design to explain the whole image of the login flow, now in this section and we’re going to breakdown the process to illustrate the detailed or low-level design of the login flow:
As you can see, the process and flow were changed a bit compared to high-level design, and the input/output symbol was added to set the user’s credentials:
after the authentication was processed, the application will validate those inputs, that’s why we need two decision symbols to validate those inputs:
The first decision will check the username:
- If the username is invalid, the application will display an error message to inform the user.
- If the username is valid, the flow will proceed to another decision to check the password credential.
The second decision will check the password if the username is valid:
- If the password is invalid, the application will display an error message to inform the user.
- If the password is valid, the login authentication is successful, and the application will navigate to the home page.
Conclusion
The flowchart will help you to analyst and debug a program, and it will act as a blueprint or guide during the software development phase, you don’t need an expensive application to create a flowchart, you can use excel as a tool.
If you want more sample application for flowchart creation you can refer to this link: http://lgeratech.com/2019/11/how-to-become-a-full-stack-developer/#Diagram_Software
kyrie 5
Can I just say what a reduction to find somebody who really knows what theyre speaking about on the internet. You definitely know learn how to convey a problem to light and make it important. Extra people have to learn this and perceive this side of the story. I cant consider youre not more fashionable since you positively have the gift.