在線畫時序圖的工具：Web Sequence Diagrams ，支持實時生成預覽圖

由於工做須要，這兩天在嘗試着給手裏壹些模塊畫時序圖（Sequence Diagrams），壹般畫這種圖的時候，咱們第壹反應會想到安裝 IBM 的 Rational Rose，可是我不想爲了畫這種圖就去安裝壹個那麼龐大的企業級應用軟件，不說使用的時候須要價格極其高昂的 License，就算使用盜版，也須要本身去網上處處找安裝包，而公司的 WiFi 網絡實在是太牽強，看看新聞查查 Google 還湊合，若是去用來下載幾百兆的軟件，那就等着吧，不過我手頭的事情還得作，因而就想看看網上有沒有在線畫這種時序圖的工具，搜了下，結果還真有，那就是 Web Sequence Diagrams 。

Web Sequence Diagrams 就是專門爲畫時序圖而準備的，它的特色就是使用簡單的編碼來控制時序圖的各個細節，很是輕便，很是簡單，很容易上手。進入首頁以後，默認的是壹個橫向分紅兩欄的頁面，左側是文本編輯器，右側是生成的時序預覽圖，左側有壹豎欄是各類時序圖組件，點擊以後能夠在編輯器裏自動爲你生成樣例代碼，修改修改就能夠用了，而且右上角還有壹個下拉列表能夠選擇生成的時序圖的樣式，默認爲 napkin，使用這種風格生成的時序圖，其線條會不規則的扭來扭去，實際上就是手繪的草圖，除此以外，還有：

一、Plain UML：白底黑字的標準時序圖（推薦）；
二、Rose：IBM Rational Rose 風格的時序圖，橘黃色偏紅的顏色（推薦）；
三、qsd：文檔報告中常常會用到的黑白時序圖，各類組件四四方方的；
四、VS2010：微軟 Visual Studio 風格的標準時序圖，淡藍色（推薦）；
五、mscgen：把各個組件上的方框去掉了，只留下了文字的簡化版時序圖；
六、patent：線條加粗加黑的時序圖（推薦）；
七、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 瀏覽器，只能呵呵了。