State Diagram Prototyping

By Dario Iacampo

Sometimes it happens that you are prototyping an application, might it is a single page one that consumes a restful service to work.
Often, you find yourself using tools like balsamiq or similar services to sketch pages and basic interaction.
A state diagram is part of this process.
A programming language serves the purpose to describe the world and your thoughts so why don't you start right from the beginning to take advantage of this?

Here it is an example:

Don't you think that this would be a perfectly reasonable representation?

It takes only a couple of lines of code to build the interaction, here I'm creating contents too because I'm lazy but you could have existent divs in the page containing the template for each specific state, maybe you could use something like knockoutjs to enable data binding and consume a restfull service to get the data

here it is the example page
here it is the fidlle project