時序圖繪製工具蜻蜓點水

爲何我會須要繪製時序圖

我司在作一些咋看之下比較複雜的需求的時候，都須要先寫設計文檔，不過我猜測這種規矩應該在不少公司都有才對，我並無其它公司沒有這種規矩的言外之意。而後呢，我我的比較習慣按照「從外到內」的方式來寫設計文檔，所以，在文檔的開篇我老是會描述一下一個需求的全局視圖，通常來講，就是用繪圖的方式。對於一些複雜的活動需求裏的流程，咋一看以爲會涉及到多個系統間的調用的時候，我就會選擇畫一幅時序圖了。

須要事先說明的是，我沒有正兒八經地系統學習過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繪製出來的時序圖是這三個工具中最符合個人審美的，從此應當會成爲我繪製時序圖的主力工具。

閱讀原文