Visual if else statements with Dia

Displaying a coding statement or equation visually is a unique way to fully understand what the statement does. A good program for this is Dia, the free software that makes the creation and designing of diagrams and flowcharts simple. It has all the features you need without being cluttered and clunky.

I did 2 simple if else if statement in PHP. Both do the same thing but look different, because they are structured different. In most cases you wouldn’t need/use the last ELSE but if you want to debug and have full control on the statement its a must as it will cover all the possibilities.

if ($a > 50 && $var == 1){
    //$a is greater than 50 and $var = 1
} elseif ($a < 50 && $var == 1){
    //$a is less than 50 and $var = 1
} elseif ($a > 50 && $var == 0){
    //$a is greater than 50 and $var = 0
} elseif ($a < 50 && $var == 0){
    //$a is less than 50 and $var = 0
} else {
    //No conditions met
}

Can be visually done like

if ($a > 50) {
    if ($var == 1) {
        //$a is greater than 50 and $var = 1
    } else if ($var == 0) {
        //$a is greater than 50 and $var = 0
    } else {
        //$var is not 1 OR 0.... But $a is greater than 50
    }
} elseif ($a < 50) {
    if ($var == 1) {
        //$a is less than 50 and $var = 1
    } else if ($var == 0) {
        //$a is less than 50 and $var = 0
    } else {
        //$var is not 1 OR 0.... But $a is less than 50
    }
} else {
    //No conditions met
}

Visually looks like:

You can make the diagrams colorful and more formatted but the point is still there when they are black and white... Statements made visually can help learning or even debugging. Even this simple un complex if else if statement gets a whole new view angle when made into a diagram.