是否有 GUI 事件映射的可视化图表格式？
有谁知道可以在 GUI 系统中映射事件的 UML 变体吗？
我有一个相当复杂的事件驱动 GUI 系统，我想创建一个图表，以便新开发人员可以轻松了解各种视图触发的事件以及这些事件实例化/影响的模型/控制器或视图。
我正在寻找一种看起来更像思维导图的东西，它遍布各处，而不是线性场景。
有人有什么想法吗？
问候，
克里斯
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
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（7）
状态图。
旧且昂贵，但是这里是关于使用状态对用户界面进行建模的精彩文本图表。 我的书页都已经磨破了......
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....
对于快速而肮脏的消息序列图表，mscgen 的价格无可比拟。 它使用的源文本灵感来自 AT&T 的 Graphviz 包所使用的语法，顺便说一句，这是一个渲染任意有向图和无向图的好方法。
我经常使用 graphviz 来记录我的状态机，因为我发现它比 Visio 绘图更容易与实现保持同步。
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.
最终帮助我真正理解 UML 状态图的是 Samek 的Practical C/C++ 中的状态图 其中有几章介绍它们，以及用于构建基于状态的系统的令人印象深刻的实现框架。 我认为仅仅为了解释如何用状态图思考就值得了。
为了实际创建快速状态图或类似的粗图，我在 GraphViz 中使用文本 DOT 语言做了很多工作然后通常将这些图表直接包含到使用 doxygen 生成的文档中。
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.
UML 活动图和状态图可以在各处分支。
请参阅 http://www.agilemodeling.com/style/stateChartDiagram.htm
（来源：agilemodeling.com）
UML activity diagrams and state charts can branch all over the place.
See http://www.agilemodeling.com/style/stateChartDiagram.htm
(source: agilemodeling.com)
通信图可能缺乏顺序，它的行为更像是思维导图，而不是活动图或顺序图。 如果沟通事件是您的目标，则状态图确实显示交互，但更确切地说，显示状态。 通信图的内容比活动状态图少，尽管这也不错，本质上是相似的。
您可以只利用用例并添加关键字或标记使用边缘/线。 如果这将被维护并且不仅仅是一张漂亮的图片，则不推荐。
（图像稍微过载，您不需要编号，也不必是方法调用）
（来源：agilemodeling.com）
http://www.agilemodeling.com/artifacts/communicationDiagram.htm
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
最近让我想起的另一种格式是 Bon 方法中的动态图。 我在 Artima 上写了一篇关于它的帖子。 这本书无缝面向对象
软件架构于 2003 年免费提供。
这些图与通信图之间的区别在于将步骤分离为单独的图例。 它本身读起来就像一个用例，很容易本地化，有时还可以显示替代解释。
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.
我使用这个基于 D3 的自动最小生成树实现取得了很好的结果。 只需向其传递一个图边列表，它就会聚类并绘制类似 UML 的图：
https:// /github.com/cpettitt/dagre-d3
也非常适合状态图。
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.