This is the transcript of the video talk Better programming tools, ep03 - Flowchart overlays
<< Back to index

Welcome back to these short talks on better programming tools. For a proper introduction, watch the first episode in the series. Here, we dive right in.

Today's idea is probably mostly gonna benefit beginners. They need to grasp conditionals and loops. When I try to teach that to people, I draw diagrams with arrows. So-called flow diagrams.

So this is the flow diagram for an if-statement.

This is an if-else.

This is a while-loop. But why don't our programming tools already show such diagrams? Isn't that kinda absurd when you think about it?

There's no reason to not have such diagrams built into our programming tools.

So what would that look like? Well, first of all, experienced programmers have already internalized this long ago, so they probably don't want such diagrams, so they have to be optional.

So this could be an if-statement.

Maybe it's overkill to show arrows between every line. Most people probably find it intuitive that lines are ordered from top to bottom, so let's remove those arrows. Let's only show arrows where the control flow splits in two directions, or joins up again.

For an if-else combination, we can't use the design that I drew on paper, since the if and else are stacked vertically. So I see two possible designs. We could either have the... what should I call it... the "drain pipe" coming out the other side, like this:

Or we could have the arrows cross at this point, making it a bit harder to see.

Hmm. Well, we can make the cross-over point easier to see by moving the line a bit, like this:

Here are several elseif statements in a series. Same pattern as the if-else pair, just repeated several times.

Even harder to see what's going on. Not acceptable. Let's solve it! Let's add drop shadows to all intersections:

This is a while-loop.

Since we now have arrows going in all directions, and since the arrow head might be off screen, let's make it easier to see their direction even when looking at just a piece of the arrow. We add a texture to the arrows which shows their direction, and a gradient color.

This is a do-while-loop:

This is break,

and continue.

I'm not gonna attempt GOTO.

How does this work in a more realistic example, when we start combining and nesting things? Here's the most complex case I could fit on a slide:

By color-coding groups of related arrows, I think it still comes out kinda readable. Remember, I'm not a graphical designer. I'm a programmer who just dabbles in graphics. So I bet a skilled designer could add even more clarity.

Would this make it really easy to learn programming? No, of course not. It's not a magic pill. Programming is still hard. But it would get a little bit easier. I know it would have helped me when I was a kid. So why not? To be able to view these control flow arrows inside an editor seems like such an obvious feature. I'm surprised it's not already commonplace.

Finally, it might be nice if we can use these control flow arrows to visualize one more thing. If you run the program, and break into the debugger at some line, the tool could highlight the path the control flow took to get to that line:

This gives a kind of historical information that's missing in most debuggers I've seen. I think this could be helpful not just for beginners, but for experienced programmers too. We could also show the number of laps taken in the most recent run of each loop.

If you found this interesting, please let me know, it will motivate me to make more prototypes and episodes.