时序图绘制工具走马观花

为什么我会需要绘制时序图

我司在做一些咋看之下比较复杂的需求的时候,都需要先写设计文档,不过我猜想这种规矩应该在很多公司都有才对,我并没有其它公司没有这种规矩的言外之意。然后呢,我个人比较习惯按照“从外到内”的方式来写设计文档,因此,在文档的开篇我总是会描述一下一个需求的全局视图,一般来说,就是用绘图的方式。对于一些复杂的活动需求里的流程,咋一看觉得会涉及到多个系统间的调用的时候,我就会选择画一幅时序图了。

需要事先说明的是,我没有正儿八经地系统学习过UML方面的内容,所以我画出来的图都只是一些不算很规范的野鸡时序图,当然了,我也不知道这世界上到底有没有规范的时序图画法。

为了画时序图,用过几款工具。它们的共同点,就是都是“语绘”的,也就是通过写代码的方式来描述所想要的图,然后让这些工具帮你把这张图给“画出来”。我个人更喜欢这种方式,而不是拖拖拉拉,不过这纯粹是个人喜好的问题而已。

走马观花

www.websequencediagrams.com是我接触到的第一个“语绘”时序图的工具。打开它之后,就会看到它的实例代码和效果图了,截图如下

用这个网站的工具画出来的时序图会有一种【手绘】的感觉

sdedit是我第二款使用的绘图工具,是一款用Java开发的本地工具,只需要编写好一个.sd文件,然后用下列的命令处理即可

1
sdedit -t png -o a.png a.sd

sdedit绘制时序图的代码的语法跟WebSequenceDiagrams不同,在Emacs中似乎也没有找到别人写好的适合编辑.sd文件的主模式,后来我自己定义了一个简陋的主模式来用,如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
(setq sdedit-highlights
'(("Actor\\|Node" . font-lock-function-name-face)))

(define-derived-mode sdedit-mode fundamental-mode "sdedit"
"编辑.sd文件的主模式"
(setq font-lock-defaults '(sdedit-highlights)))

;;; 代码是从下面这个网页给的例子改动来的
;;; https://www.emacswiki.org/emacs/CompileCommand
(add-hook 'sdedit-mode-hook
(lambda ()
(unless (file-exists-p "Makefile")
(set (make-local-variable 'compile-command)
(let* ((buffer-name (buffer-name))
(base-name (car (split-string buffer-name "\\."))))
(format "/usr/local/bin/sdedit -t png -o %s.png %s.sd" base-name base-name))))))

(add-to-list 'auto-mode-alist
'("\\.sd$" . sdedit-mode))

勉勉强强可以接受

sequencediagram.org则是最近刚发掘到的一个不错的绘制时序图的在线工具。它的绘制语法跟WebSequenceDiagrams是一样的,并且它还有一个不错的教程。打开它的网站后,点击左侧的这个图标

便可以看到详尽的语法教程。

sequencediagram.org绘制出来的时序图是这三个工具中最符合我的审美的,今后应当会成为我绘制时序图的主力工具。