Tool for visualizing control flow


Here’s a pretty “out there” idea for a feature:

I find myself using this programming idiom reasonably often:

1. Do some stuff.
2. If x = A, do this.
3. If x = B, do that.
4. If x != A and x != B, do the other.
5. Do more stuff.

This is a classic “switch-case” setup in languages that support it. But I am thinking about it more from a scripting perspective, where my program is a list of commands to execute in order.

I’ve recently started using emacs and that led me to realize that, truly, the clearest representation of the above program would look something like this:

Not sure if this is possible, but I thought if it were going to happen anywhere, it might happen in Atom. It could be attractive to many users, but especially beginners who may value the visual representation of the control flow. As far as I know, no other popular editors offer this feature.


You may want to look at the regex-railroad-diagram package, both for ideas around visualization options and sample code.


I’m sure it is possible, but all visualization tools suffer from the same problem. They don’t scale well. When the code reaches a certain complexity the tool can’t handle it any more. Such tools are good for beginners to learn programming with small examples but not much else.