时序图绘制工具蜻蜓点水

为何我会须要绘制时序图

我司在作一些咋看之下比较复杂的需求的时候，都须要先写设计文档，不过我猜测这种规矩应该在不少公司都有才对，我并无其它公司没有这种规矩的言外之意。而后呢，我我的比较习惯按照“从外到内”的方式来写设计文档，所以，在文档的开篇我老是会描述一下一个需求的全局视图，通常来讲，就是用绘图的方式。对于一些复杂的活动需求里的流程，咋一看以为会涉及到多个系统间的调用的时候，我就会选择画一幅时序图了。

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

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

蜻蜓点水

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

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

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

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

sdedit绘制时序图的代码的语法跟WebSequenceDiagrams不一样，在Emacs中彷佛也没有找到别人写好的适合编辑.sd文件的主模式，后来我本身定义了一个简陋的主模式来用，以下

(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绘制出来的时序图是这三个工具中最符合个人审美的，从此应当会成为我绘制时序图的主力工具。

阅读原文