Storyboard Graph View

Right now storyboards are linear. I find myself in want of an graph view that would visually represent each screen as a node and each link as a directed edge.

I'd like to second the suggestion posted here (the original thread is archived): http://wireframesketcher.com/forum/topic/23229/storyboarding_complexity?p2

I'm thinking of something that looks like a finite state machine diagram - here's some inspiration:

http://www.vochatzer.com/karl/career%20files/ichime_aug00.jpg

http://ausweb.scu.edu.au/aw04/papers/refereed/kong/WAAF_Fig5_User_interface_flow_diagram.gif

As a random thought (though probably a Herculean task for another version), it might be useful if this could integrate with Eclipse Modeling.

Thanks a lot for your feedback! Graph view is the next big task I am planning to attack. Your images are helpful and it's almost exactly what I have in mind. Only that it will be actual screen thumbnails instead of squares with text. Here's my original mockup:

I am even considering ditching the current linear view and replacing it with a graph view altogether. Linear sequence will still be available via the Outline View. What do you think?

Could you elaborate more on Eclipse Modeling integration?

Great to hear - can't wait to see that feature in a future build!

As far as Eclipse Modeling, this is a complete pie-in-the-sky (and very rough) idea based on knowledge from many years ago, and I might be talking out my @$$, but here's the dream: Eclipse Modeling provides a framework for you to describe code structure according to a visual layout that you can draw. The result is that you can draw a box which represents a class, and Eclipse Modeling is able to stub out a class in a given language; draw a function in that box, and it stubs a member function; connect two boxes, and you get member variables, etc. These are the types of diagrams you would typically get together with other engineers to draw and then manually write, usually indicating interfaces, intended functionality, etc, except that Eclipse stubs the code for you as well.

Wireframe Sketcher could provide some kind of hook to associate both screens and widgets with Graphical Modeling Framework elements. (I wonder if your Graph View could actually just piggyback on GMF). This, in turn, would be hooked up to some text generation (Xtext?) and voila! Now you can draw a UI layout in Wireframe Sketcher, and your UI code can automatically be stubbed out. All that is left for the programmer to do is the "real" logic of the UI, as all the boilerplate code would be taken care of by the generator. I think this would provide something of a rough approximation of the .Net UI designer in Visual Studio.

I started working on sitemap feature. Here's what it looks like right now:

Let me know what you think about it! If you wish to try it yourself then you can get the development version here: http://wireframesketcher.com/staging

I released a new version that lets you visualize UI flows.

This is wonderful work, exactly what I wanted to see. Thank you very much, and keep up the great work!

I would like to add programmer instructions at field level (required vs optional), some thing like next to filed lookup things like that. How do I do that? I'm new and had great success but these are some of my questions...

Please create a new topic for new questions in the future.

You can use annotation widgets to add notes and callouts. Here's an example of what you could do:

I hope this helps.