Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

What visualization method would you recommend for event driven programs? Are there industry standard diagrams, such as flowcharts?

share|improve this question
flowcharts "represent an algorithm" – Samantha Catania Dec 25 '11 at 12:23
up vote 1 down vote accepted

The flow of an event driven program cannot easily be represented by a flow chart as it is very much dependent on outside things happening and flow charts just are not geared to that.

One way to visualize the flow of an event driven program is to use the good ol' conversation design diagrams (which I learned when programming mainframes). In these diagrams, you have a symbols representing screens. In the center is the screen under analysis or design. At the top will be the screens from which application logic can lead to the central screen. At the bottom will be screens that you can go to from the central screen.

Of course back in my mainframe days, we didn't have to deal with on-screen interactions like dropping down a menu (though for the top menu we had different diagrams) or opening up/filling out a details section on the same screen depending on the current selection in a list.

To address interactions like those, you could define a "screen" per screen state, but that would mean that the number of screen would grow to unmanageable proportions pretty quickly. Mock ups are probably a better solution here. They are perfectly suited to communicate the design of a screen without getting lost in all kinds of itty-bitty details. They also allow for annotations and other ways to indicate on-screen interactions. And using arrows and labels with the name of a following or preceding screen, transitions to other screens can be indicated thus giving a feel for the major navigation within the app.

Balsamiq ( ) is a mock up tool that you can try out online and also use on your desktop. Check it out to see whether it would help in what you are trying to do.

share|improve this answer
Reading your answer gave me an idea: how about I include screen shots of my interfaces and then add arrows to the buttons and continue my flowcharts from there? – Samantha Catania Dec 25 '11 at 12:36
@SamanthaCatania: if what you are trying to do is add/link business logic flow charts to your documentation that sounds okay. Otherwise, I am unsure about what you are trying to achieve. – Marjan Venema Dec 25 '11 at 14:15
It's just for documentation purposes – Samantha Catania Dec 25 '11 at 14:44

UML Sequence diagrams are probably the most universial tool to use. Flow charts are only suitable for the flow through event processing, not for the event triggers themselves.

share|improve this answer

If you want to visualize a chain of events, an UML sequence diagram might be something you can start with. If you are looking, however, for a general approach to model event based programs, where the order of events is intentionally left out, then Flow Design may be the right thing for you.

share|improve this answer
Why sequence over state machine? – sq33G Dec 25 '11 at 11:28

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.