Is there a visual diagram format for gui event map

问题:

Does anyone know of any kind of UML variation which can map events in a GUI system?

I have a quite complex event driven GUI system and I would like to create a diagram so new developers can easily get an overview of events fired by various views and what models/controllers or view are instantiated/effected by these events.

I was looking for something that would look more like a mind map which branches all over the place rather than linear scenarios.

Does anyone have any ideas?

Regards,

Chris

回答1:

State diagrams.

Old and pricey, but here is a great text on modeling user interfaces with state charts. I've worn the pages out on mine....

回答2:

For quick and dirty message sequence charts, you can't beat the price of mscgen. It uses a source text inspired by the syntax used by AT&T's Graphviz package, which is, incidentally, a good way to rendering arbitrary directed and undirected graphs.

I often use graphviz to document my state machines, as I find it easier to keep in sync with the implementation than a Visio drawing.

回答3:

the book that finally helped me really understand UML statecharts is Samek's Practical Statecharts in C/C++ which has a few chapters on them as well as an impressive implementation framework for building state-based systems. I think it's worth getting just for the explanations of how to think with statecharts.

For actually creating quick statecharts or similar rough diagrams, I do a lot of work with the textual DOT language in GraphViz and often then include those diagrams directly into documentation generated with doxygen.

回答4:

UML activity diagrams and state charts can branch all over the place.

See http://www.agilemodeling.com/style/stateChartDiagram.htm

_{(source: agilemodeling.com)}

回答5:

The communication diagram can lack sequence and it behaves more like a mind map than an activity or sequence diagram. If communicating events is your goal a state chart does show interaction, but rather, well, state. A communication diagram has less on it than an activitystate diagram, though that is not bad either, similar in nature.

You could just leverage UseCases and add keywords or label the uses edge/line. Not recommended if this will be maintained and be more than a pretty picture.

(Image is slightly overloaded, you don't need the numbering and they don't have to be method calls)
_{(source: agilemodeling.com)}
http://www.agilemodeling.com/artifacts/communicationDiagram.htm

回答6:

Another format which I was reminded of recently is the Dynamic Diagram in the Bon Method. I wrote a posting about it on Artima. The book Seamless Object-Oriented Software Architecture was made freely available in 2003.

The difference between these and communication diagrams is separation of the steps into a separate legend. That can read like a Use Case by itself, being easy to localise and sometimes to show alternative explanations.

回答7:

I had great results using this D3 based auto minimum spanning tree implementation. Just pass it a list of graph edges and it'll cluster and draw a UML-like diagram:

https://github.com/cpettitt/dagre-d3

Also great for state diagrams.