时序图绘制工具走马观花

jiezi

5 年前

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

需要事先说明的是，我没有正儿八经地系统学习过 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 绘制出来的时序图是这三个工具中最符合我的审美的，今后应当会成为我绘制时序图的主力工具。

阅读原文

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

走马观花