在线画时序图的工具：Web Sequence Diagrams ，支持实时生成预览图 - 苗哥的个人页面 - OSCHINA

安宇雨 - 随手采集
2019-09-26 20:29:31
操作系统
在线工具

因为工作需要，这两天在尝试着给手里壹些模块画时序图（Sequence Diagrams），壹般画这种图的时候，我们第壹反应会想到安装 IBM 的 Rational Rose，但是我不想为了画这种图就去安装壹個那麽庞大的企业级应用软件，不说使用的时候需要价格极其高昂的 License，就算使用盗版，也需要自己去网上到处找安装包，而公司的 WiFi 网络实在是太牵强，看看新闻查查 Google 还凑合，如果去用来下载几百兆的软件，那就等着吧，不过我手头的事情还得做，于是就想看看网上有没有在线画这种时序图的工具，搜了下，结果还真有，那就是 Web Sequence Diagrams 。

Web Sequence Diagrams 就是专门为画时序图而准备的，它的特点就是使用简单的编码来控制时序图的各個细节，非常轻便，非常简单，很容易上手。进入首页之后，默认的是壹個横向分成两栏的页面，左侧是文本编辑器，右侧是生成的时序预览图，左侧有壹竖栏是各种时序图组件，点击之后可以在编辑器里自动为你生成样例代码，修改修改就可以用了，并且右上角还有壹個下拉列表可以选择生成的时序图的样式，默认为 napkin，使用这种风格生成的时序图，其线条会不规则的扭来扭去，实际上就是手绘的草图，除此之外，还有：

1、Plain UML：白底黑字的标准时序图（推荐）；
2、Rose：IBM Rational Rose 风格的时序图，橘黄色偏红的颜色（推荐）；
3、qsd：文档报告中经常会用到的黑白时序图，各种组件四四方方的；
4、VS2010：微软 Visual Studio 风格的标准时序图，淡蓝色（推荐）；
5、mscgen：把各個组件上的方框去掉了，只留下了文字的简化版时序图；
6、patent：线条加粗加黑的时序图（推荐）；
7、napkin：线条不规则的扭来扭去，实际上就是生成了壹個手绘的时序图；

此处还有其它几种风格，我没有尝试，写的是Colorful，估计生成的时序图颜色会比较绚丽。其中我比较喜欢的几种网络就是 Plain UML，Rose 和 VS2010 这三种风格，因为生成的图片是最符合规范的。按照页面提供的编码方式，我也尝试着为手里的壹個功能模块画了個简单的时序图，其代码也非常有特点，使用正号（+）、负号（-）和左箭头（->）来表示每個流程的执行顺序。具体如下：

title XXX业务的时序图

View->+IService: 发送请求
IService->+ServiceImpl: 服务层处理
ServiceImpl->+Logic:逻辑层处理
Logic->+Dao:持久层处理

Dao->+xxx-sqlMap.xml: 调用指定的SQL语句1
note right of xxx-sqlMap.xml: 与数据库交互1
xxx-sqlMap.xml->-Dao:与数据库交互完毕返回1

Dao->+xxx-sqlMap.xml: 调用指定的SQL语句2
note right of xxx-sqlMap.xml: 与数据库交互2
xxx-sqlMap.xml->-Dao:与数据库交互完毕返回2

Dao->-Logic:持久层交互完毕返回
Logic->-ServiceImpl: 逻辑层交互完毕返回
ServiceImpl->IService: 服务层交互完毕返回
IService->-View: 请求处理完毕，返回页面

因为我個人比较偏爱 IBM Rational Rose 风格，所以也单独生成了该风格的图片。

对了，点击右上角的超链接[Link to this image]可以把生成的图片下载下来，页面会先弹出壹個提示框，询问是否成为付费用户，不用理会，直接点击提示框中的超链接[Open in new tab]就可以在新的选项卡中看到生成好的时序图了。

这個服务对于我这种偶尔需要画画时序图的人而言，真是太方便了，完全不用安装盗版的 IBM Rational Rose，而且还完美的实现了我想要的功能。当然，如果你觉得这個服务对你很有意义，并且愿意长期使用的话，那麽付费支付下也是非常推荐的，因为付费帐户会有更多的功能特性可以使用。另外，强烈建议在 Google Chrome 浏览器下使用该服务，页面刷新时会相比 Firefox 流畅，至于微软的 IE 浏览器，只能呵呵了。

Original url: Access
Created at: 2019-09-26 20:29:30
Category: default
Tags: none

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到