Flowcharts in Programming: Visualizing Code's Logic

Intro

Let's imagine: you read someone's code, and you are trying to make sense of it. You may understand each line of code separately, but you may not have a big picture of what each part of an application does. To get the whole picture, you may need to read the code multiple times until you get it. There is a technique that can help accelerate your understanding of the program logic flow. If you are interested, read on.

First of all, I am not an expert in the staff I write about in this blog post. I learn, and I write here what I discovered.

A Technique That Helps to Improve Logic Flow Understanding

The technique I am talking about is creating flowchart diagrams. If you are trying to understand what parts of someone's code do what, you can create a behavioral flowchart diagram. This will likely make the process of figuring out what does what easier. You will have something to look at, which definitely helps. Of course, this only makes sense if the code is complex enough for you. If you can understand all parts of the code easily just by reading it, then of course you do not need to waste time on diagrams. Basically, create flowchart diagrams only when they help you.

What Benefits Do Flowcharts Bring?

Simplify Complex Logic

Flowcharts help us break down intricate algorithms into visual, easy-to-follow diagrams that make it easier for us to see the logical flow of such algorithms. This way, we do not get bogged down by code syntax and still get a good understanding of the overall behavior of the program.

Improve Code Understanding

As I said before, it definitely helps us understand the logic flow of the code better. We see a graphical representation of program logic that makes it easier to understand the program behavior without being distracted by implementation details.

Facilitate Design Planning

With flowcharts, you will be able to outline program structure and logic before writing actual code. If, for example, you want to create an app, then before writing any code, it is recommended to create a flowchart diagram where you outline the program's behavior. Thanks to this, you will have something to help you start building your application. With this, you will know how your program should behave. For my sea battle game, I created a simple flowchart diagram that outlined the general behavior of the game. This definitely made it easier for me to start building the game.

Enhance Communication

Not everyone understands the code you have, but you can create a flowchart diagram that can be understood by both technical and non-technical people. This way, all project participants except developers, like managers, clients, and others, will understand the program behavior without knowing the code itself.

Debug Algorithmic Thinking

Before you start implementing the program, creating a flowchart may save you by exposing logical errors, unnecessary steps, and potential bottlenecks. This way, developers can refine their problem-solving approach and identify optimization opportunities.

How to Create Flowcharts

To create flowcharts, we have several options. One of them is to use mermaid.js. Mermaid helps you create diagrams and visualizations using text and code. It is a JavaScript-based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.

Another option is PlantUML. PlantUML is a highly versatile tool that facilitates the rapid and straightforward creation of a wide array of diagrams.

The third option is draw.io. Draw.io is free online diagram software. You can use it as a flowchart maker, network diagram software, to create UML online, as an ER diagram tool, to design database schema, to build BPMN online, as a circuit diagram maker, and more. Draw.io can import .vsdx, Gliffy™, and Lucidchart™ files.

A FlowChart Example

Let's see an example of using Mermaid to create a flowchart that represents a program's logic. Here it is (it's quite long, so I collapsed it — click if interested):

Example

▾Show moreShow less

1. We have a function where a couple of decisions are made.

script.js

// This code that is generated by AI, definitely isn't amazing when it comes to how nested it is.
function determineDiscountedPrice(price, isHoliday) {
    const BASE_DISCOUNT = 0.1;  // 10% base discount
    const HOLIDAY_BONUS = 0.05; // Additional 5% holiday discount

    if (price <= 0) {
        return 0;  // Invalid price
    }

    if (isHoliday) {
        // Apply holiday discount
        if (price > 100) {
            return price * (1 - (BASE_DISCOUNT + HOLIDAY_BONUS));
        } else {
            return price * (1 - BASE_DISCOUNT);
        }
    } else {
        // Regular pricing
        if (price > 100) {
            return price * (1 - BASE_DISCOUNT);
        } else {
            return price;  // No discount for low-value items
        }
    }

}

2. Based on that function, we write Mermaid code to create a flowchart.

flowchart

flowchart TD
A[Start: determineDiscountedPrice] --> B{Is price <= 0?}
B -->|Yes| C[Return 0]
B -->|No| D{Is it a Holiday?}
D -->|Yes| E{Is price > 100?}
D -->|No| F{Is price > 100?}

    E -->|Yes| G[Apply 15% Discount]
    E -->|No| H[Apply 10% Discount]

    F -->|Yes| I[Apply 10% Discount]
    F -->|No| J[Return Original Price]

    C --> K[End]
    G --> K
    H --> K
    I --> K
    J --> K

3. The result of creating the flowchart.

To use Mermaid, you definitely need to learn some Mermaid syntax. I myself haven't learned it yet. I generated this example with AI. By the way, the code example itself does have unnecessary nesting, which isn't welcome in programming. When using draw.io, you do not need to know any specific syntax, unlike in the other two options, where you can make the diagram yourself.

Here you go! In this blog post, I covered how to understand the logic flow of a program better using flowcharts and the benefits of creating flowcharts. I pointed out where to find tools to create flowcharts, and showed an example of creating a flowchart with Mermaid. If you like it, please share this article with someone who might like it too.

Got questions? Send an email to commitnobug@outlook.com.