前端绘图-时序图

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

• JS Sequence Diagrams 官网最新下载

• JS Sequence Diagrams 在线编译和教程

• jQuery 官网最新下载

Web Sequence Diagrams：Web序列图 / js-sequence-diagrams：JS序列图

专门为画时序图而准备的，它的特点就是使用简单的编码来控制时序图的各个细节，非常轻便，非常简单，很容易上手。进入首页之后，默认的是一个横向分成两栏的页面，左侧是文本编辑器，右侧是生成的时序预览图，左侧有一竖栏是各种时序图组件，点击之后可以在编辑器里自动为你生成样例代码，修改修改就可以用了，并且右上角还有一个下拉列表可以选择生成的时序图的样式，默认为 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 浏览器，只能呵呵了。

JS Sequence Diagrams 安装及使用

时序图（Sequence Diagram），亦称为序列图或循序图，是一种UML行为图。它通过描述对象之间发送消息的时间顺序显示多个对象之间的动态协作。它可以表示用例的行为顺序，当执行一个用例行为时，时序图中的每条消息对应了一个类操作或状态机中引起转换的触发事件。

第一种引入，直接引入

JavaScript

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
//将UTF-8编码加入进去
<script src="raphael-min.js"></script>
<script src="underscore-min.js"></script>
<script src="sequence-diagram-min.js"></script>
//将JS Sequence Diagrams库下载及引入到程序
<div id="flow">放置流程图的空间</div>
<script>
    var diagram = Diagram.parse("Alice->Bob: Hello Bob, how are you?\nNote right of Bob: Bob thinks\nBob-->Alice: I am good thanks!\n");
    //diagram.drawSVG("flow", {theme: 'hand'});//可爱图形
    diagram.drawSVG("flow", {theme: 'simple'});//矩形图形
</script>

浏览器Flash插件异常，复制失败！

第二种引入，用jQuery方法执行：

JavaScript

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
//将UTF-8编码加入进去
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
//百度CDN jQuery在线引入
//或者
//本地下载引入
<script src="jquery.min.js"></script>
<script src="raphael-min.js"></script>
<script src="underscore-min.js"></script>
<script src="sequence-diagram-min.js"></script>
//将JS Sequence Diagrams库下载及引入到程序
<div class="diagram">
    Alice->Bob: Hello Bob, how are you?
    Note right of Bob: Bob thinks
    Bob-->Alice: I am good thanks!
</div>
<script>
    //$(".diagram").sequenceDiagram({theme: 'hand'});//可爱图形
    $(".diagram").sequenceDiagram({theme: 'simple'});//矩形图形
</script>

浏览器Flash插件异常，复制失败！

除此之外，还有很多类似的工具，参考如下

sequence-diagram

支持Java，Idea，Maven，Web，Jquery等等

官网：http://plantuml.com/sequence-diagram

text_sequence_diagram：文本序列图

有点类似于Web Sequence Diagrams / JS Sequence Diagrams

官网：http://echoma.github.io/text_sequence_diagram/

mermaid：Markdown绘图插件

官网：https://mermaidjs.github.io

webchart

时序图基于 js-sequence-diagrams

流程图基于flowchart

Github：https://github.com/huhai463127310/webchart

官网：http://webchart.ihuhai.cn/index.html

processon

ProcessOn是一个在线作图工具的聚合平台，它可以在线画流程图、思维导图、UI原型图、UML、网络拓扑图、组织结构图等等，

您无需担心下载和更新的问题，不管Mac还是Windows，一个浏览器就可以随时随地的发挥创意，规划工作

官网：https://www.processon.com