Reputation: 189

Diagramming Programs

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?

Upvotes: 10

Answers (4)

phipsgabler

Reputation: 20960

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" (see Figure 3.31 and the paragraph above it in section 3.5.2 Infinite Streams). 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).

Upvotes: 10

Rann Lifshitz

Reputation: 4090

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:

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:
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:

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:

Upvotes: 1

ROGUH

Reputation: 661

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.

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

Upvotes: 5

Beutler

Reputation: 83

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.

Upvotes: 3

Diagramming Programs

Answers (4)

Related Questions