8

I tend to be a visual thinker. So if I can imagine the flow of data through a program I can understand what's happening in it better then if I was reading a text story (pseudo code) of what's happening.

Is there a way to visually represent the way variables and objects flow through and are changed by functions? Preferably something that works on the small scale, inside an individual function and a larger scale of the program as a whole.

For instance English classes used to teach sentence diagramming. Electrical Engineers have circuit diagrams. Is there an equivalent in Computer Science?

Wes Schumaker-Reid
  • 169
  • 5
  • 1
    Very interesting idea; you might want to look at UML, as there are diagrams that show program flow. To get down to that granularity, though, albeit interesting, might be impractical for all but the simplest apps, as there are so many different paths the variables can take depending on...everything else that's happening in the code. – B. Clay Shannon-B. Crow Raven Jan 29 '16 at 00:02
  • 1
    There's not *a* way, but there are many, from old-school flowcharts (both control flow and data flow) to UML. You're more likely to find literature under "Software Engineering" than under "Computer Science" in your favourite bookstore. – molbdnilo Jan 29 '16 at 14:42

4 Answers4

9

I'm a haskeller, so I'll speak for pure functional programming. The first thing that comes to my mind is commutative diagrams. These can be used to describe how functions and structures interact with each other; however, they rather define invariants/laws than behaviour.

Another thing useful to know when thinking about evaluation of lambda calculus (or higher-level languages based thereon) are expression graphs, as used in graph reduction. They let you see the structure of your expression, including sharing. Of course, this only makes sense as long as the code is pure, i.e., no mutations happen.

A third kind of diagram, useful to visualize how data is passing though functions, are different kinds of data flow diagrams, like the ones used for arrows (which can be used for normal functions too, since (->) is an arrow), or SICP's "Henderson diagrams". These show how individual functions are "plugged together". Another perspective on this are the diagrams used for drawing stream processing/pipe and filter style, like marble diagrams, which focus more on a notion of time (and, as opposed to arrow diagrams, do represent individual values).

phipsgabler
  • 18,968
  • 4
  • 40
  • 54
4

There are some automated solutions. Both of these show you what's in the computer's memory at each step of the computation.

Python has the Python Tutor which is entirely online.

python tutor sample.

For Haskell, see ghc-vis. This one requires installation.

ghc-vis sample

Hugo O. Rivera
  • 643
  • 4
  • 11
3

I tend to be a visual thinker as well. Often times when I'm trying to work through a project or I can't find the error in my code, I take it back to block diagrams.

This can get messy with large programs, but you can kind of "walk" a piece of data through the diagram and see what happens.

Beutler
  • 73
  • 8
0

B Clay Shannon mentioned UML diagrams, so I'll pick up the glove. UML diagrams have been around for quite sometime, are a recognized tool among the SW developing community and are easy to use and understand.

I'll mention the 2 diagrams I tend to use the most:

  1. Class diagrams - In OO solutions, which make use of API and abstraction, it can be easy to get lost among all the different classes. A class diagram is a visual representation of an OO solution which can be made concise or complex depending on our needs. Specializing in Java, I can recommend the ObjectAid plugin for the eclipse IDE - it is light weight and easy to use: enter image description here
  2. Sequence diagrams - allow us to document the call sequences between functions/methods. Think of a graphical call stack. Very strong tool for following complex transaction in large projects. Specializing in Java, it is worth mentioning that ObjectAid has paid support for SDs. A nice free Eclipse plugin for SDs is ModelGoon: enter image description here

This is just a very short summery of UML diagrams. Most UML applications today allow reverse engineering of Diagrams from existing code, and Code generation from the Diagrams.

This means that you can document legacy code with UML, and use UML during a feature's design phase, from which code can be generated when starting to work on the feature implementation.

Additional Links:

Rann Lifshitz
  • 3,992
  • 4
  • 21
  • 41