是否有gui事件映射的可视化图表格式？

Question

有没有人知道任何可以在GUI系统中映射事件的UML变体？

我有一个非常复杂的事件驱动的GUI系统，我想创建一个图表，以便新的开发人员可以轻松地了解各种视图触发的事件以及这些事件实例化/影响的模型/控制器或视图。 / p>

我一直在寻找一种看起来更像是思维导图的东西，它分布在整个地方而不是线性场景。

有没有人有任何想法？

此致

克里斯

Answer 1

状态图。

陈旧且价格昂贵，但here是使用状态图建模用户界面的绝佳文本。我已经把这些页面都拿在了我的身上......

Answer 2

UML活动图和状态图可以遍布整个地方。

请参阅http://www.agilemodeling.com/style/stateChartDiagram.htm

_{（来源：agilemodeling.com）}

Answer 3

对于快速而肮脏的消息序列图表，您无法超越mscgen的价格。它使用源自AT＆amp; T Graphviz包使用的语法的源文本，顺便提一下，它是渲染任意有向和无向图的好方法。

我经常使用graphviz来记录我的状态机，因为我发现与Visio绘图相比，它更容易与实现保持同步。

Answer 4

最终帮助我真正理解UML状态图的那本书是Samek的Practical Statecharts in C/C++，它有几个章节，以及一个用于构建基于状态的系统的令人印象深刻的实现框架。我认为仅仅为解释如何用状态图进行思考是值得的。

为了实际创建快速状态图或类似的粗略图表，我在GraphViz中使用文本DOT语言做了大量工作，然后经常将这些图表直接包含在使用doxygen生成的文档中。

Answer 5

通信图可能缺乏序列，它的行为更像是思维导图，而不是活动或序列图。如果沟通事件是你的目标，状态图表确实显示了交互，而是，状态。通信图表上的活动状态图比活动状态图少，但它也不错，性质相似。

您可以利用UseCases并添加关键字或标记使用边/线。不建议如果保持这个并且不仅仅是漂亮的图片。

（图片略有超载，您不需要编号，也不必进行方法调用）
_{（来源：agilemodeling.com）}
http://www.agilemodeling.com/artifacts/communicationDiagram.htm

Answer 6

最近我提醒过的另一种格式是Bon方法中的动态图。我在Artima上发了一篇关于它的帖子。这本书Seamless Object-Oriented Software Architecture于2003年免费提供。

这些与通信图之间的区别在于将步骤分离为单独的图例。这本身就像一个用例，易于本地化，有时也可以显示其他解释。

Answer 7

使用这个基于D3的自动最小生成树实现，我获得了很好的结果。只需传递一个图形边缘列表，它就会聚集并绘制一个类似UML的图表：

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

对状态图也很好。