基于JavaScript的可視化建模UML工具開發(fā)

文 浩

（福建師范大學(xué),福建 福州 350007）

可視化建模是一種用不同的圖形（主要包含節(jié)點和邊）來描述系統(tǒng)的方法，從而加深開發(fā)人員對問題的理解。這種方法對于整個軟件開發(fā)過程而言是極為重要的。

統(tǒng)一建模語言（UML）作為一種常用的可視化工具，被廣泛運用于軟件開發(fā)過程中，其重要性不言而喻。那么基于UML圖的特性，開發(fā)出用于繪制可視化模型的原型工具，也是很有必要的。目前工業(yè)界中常用的UML圖繪制工具有EA、ROSE、VISIO等，這些工具因為相對固定的用途以及版本迭代緩慢等諸多原因，繪制出來的可視化模型都過于簡單，且不易調(diào)整（這些工具大多仍是基于UML1.0版本，現(xiàn)在常用版本為2.0）。同時，因為其軟件安裝相對復(fù)雜，功能界面不夠友好，對于初學(xué)者來說，是一個不小的挑戰(zhàn)。

基于上述工具存在的問題，本文選擇使用JavaScript（下面簡稱為JS）語言進行UML模型繪制工具的開發(fā)。JS是一種用于網(wǎng)頁應(yīng)用開發(fā)的腳本語言，因為該語言的特性，可以實現(xiàn)在瀏覽器上直接進行可視化模型的繪制，并且可以免安裝，初學(xué)者容易上手，迭代更新更為便捷，從而大大降低了建模工作的門檻。

本文的結(jié)構(gòu)如下：第1節(jié)對UML圖的特性進行了分析；第2節(jié)基于UML圖的特性，對工具的功能模塊進行了設(shè)計；第3節(jié)論述了原型工具開發(fā)過程中已經(jīng)實現(xiàn)的功能，并且分析之后軟件迭代的方向；最后總結(jié)全文，對未來的研究進行展望。

1 UML圖的特性

活動圖主要是用來對系統(tǒng)的行為進行建模，在視覺上的呈現(xiàn)類似于流程圖或數(shù)據(jù)流程圖，結(jié)構(gòu)上類似于有向圖。圖1是一個表示ATM機業(yè)務(wù)過程的活動圖實例，為了方便表示，仿照標記變遷系統(tǒng)（Labeled Transition System），用不同的英文字母對每個節(jié)點進行標記。

該活動圖中的元素可以分為節(jié)點和邊兩大類。其中，節(jié)點又可分為以下幾種。

活動節(jié)點：用一個矩形表示?；顒庸?jié)點是用于表示系統(tǒng)中最基本的活動，每一種活動對應(yīng)到一個活動節(jié)點。在圖1中，用字母a命名的活動節(jié)點，表示的是ATM機系統(tǒng)中插卡這一個活動。

初始節(jié)點：用一個實心的黑色圓表示，類似于樹結(jié)構(gòu)中的根節(jié)點，表示系統(tǒng)中活動的開始。在圖1中，用字母i表示。

終止節(jié)點：用一個較大的空心圓和小的黑色實心圓嵌套組成，類似于樹結(jié)構(gòu)中的葉子節(jié)點，表示系統(tǒng)中活動的結(jié)束。在圖1中，字母f1和f2都是終止節(jié)點。

選擇節(jié)點：用一個菱形表示，體現(xiàn)系統(tǒng)會根據(jù)不同觸發(fā)條件，選擇不同的活動，類似于程序設(shè)計語言中的if結(jié)構(gòu)。在圖1中，用dn開頭命名的節(jié)點都是選擇節(jié)點。

合并節(jié)點:同樣用菱形表示，體現(xiàn)了活動分流后的合并，與選擇節(jié)點配套使用。為了區(qū)分，統(tǒng)一用mn開頭進行命名。

分叉節(jié)點：用一個中間部分印有fork字樣的長條矩形表示，體現(xiàn)了活動的并發(fā)，類似于程序設(shè)計語言中的多線程。在圖1中，用fn開頭的字母進行命名。

本書作者佩恩特利用其擔(dān)任總統(tǒng)首席道德律師的兩年半期間，在美國政治中心之一的白宮，近距離地觀察到眾多的人和事，從而為本書提供了難能可貴的豐富的素材。美國多年來實施了一系列推動行政道德的措施，然而，廉政建設(shè)的努力正面臨著越來越多的挑戰(zhàn)?！洞蛟煲粋€美國應(yīng)得的政府》針對美國政壇上形形色色的貪腐行為、現(xiàn)存的漏洞，以及原因所在，進行了深入的分析，并作出了不少有益、中肯的批評。與此同時，該書也對如何改變現(xiàn)狀提出了一些建議。作者希望，這些建議的落實，將有助于改進美國的行政道德，有助于打造一個美國人民應(yīng)得的廉潔的政府。

匯合節(jié)點：用一個中間部分印有join字樣的長條矩形表示，體現(xiàn)了并發(fā)等待的活動，此時匯合，進入下一個動作，與分叉節(jié)點配套使用。在圖1中，用jn開頭的字母進行命名。

以上節(jié)點被統(tǒng)稱為控制節(jié)點，即不代表實際的活動，而是用于控制不同活動間的執(zhí)行。

除了節(jié)點之外，邊也是活動圖中的主要元素?；顒訄D中的邊是一條有向的線段，主要表示的是節(jié)點間的執(zhí)行順序和先后依賴關(guān)系。基于邊和控制節(jié)點，就可以很清晰地顯示出在一個系統(tǒng)中活動的具體執(zhí)行流程。

圖1 一個活動圖的實例

圖2 活動圖的繪制

2 原型工具的功能模塊

基于上文對UML特性的分析，下面對原型工具的功能模塊組成進行了討論。

開發(fā)的原型工具所需要的功能主要分為以下三個方面。

UML圖的繪制：需要實現(xiàn)拖拉式的繪圖，即存在一個選擇面板，其中分布的就是UML圖中的不同節(jié)點，接著再提供一個畫板，可以將選擇面板中的節(jié)點拖拉至畫板之上，隨后可以在節(jié)點間進行連線，從而構(gòu)成一個完整的UML圖。

圖與文檔之間的轉(zhuǎn)換：最近一段時間，一個發(fā)布在GitHub上的名為flowchart.fun（https://flowchart.fun/）的網(wǎng)頁工具風(fēng)靡工業(yè)界。其流行的原因是開發(fā)人員可以通過編輯文檔，自動生成對應(yīng)的流程圖或者思維導(dǎo)圖，這極大提升了開發(fā)人員的工作效率。本文中的原型工具也需要實現(xiàn)圖與文檔之間的轉(zhuǎn)換，并且，這種轉(zhuǎn)換是雙向的，不僅要實現(xiàn)文檔自動轉(zhuǎn)換成可視化的UML圖，也需要實現(xiàn)UML圖繪制后，自動生成對應(yīng)文檔進行存儲。這種雙向轉(zhuǎn)換對于開發(fā)過程的幫助不言而喻。

圖與代碼之間的轉(zhuǎn)換：在軟件生命周期中，經(jīng)歷了設(shè)計與建模后，就到了編碼階段，編碼人員需要根據(jù)相關(guān)的UML圖，進行代碼的編寫。那么在UML圖繪制完成后，自動生成一個正確的代碼框架，這樣編碼人員就不再需要去理解設(shè)計人員所繪制的UML圖，而是直接對該UML圖生成的代碼框架進行增添與刪改，從而大大提升了開發(fā)效率以及降低了錯誤率。

3 原型工具已實現(xiàn)的功能

基于開源庫GoJS（https://gojs.net/latest/index.html），我們成功開發(fā)了原型工具DSTool（下載鏈接：https://pan.baidu.com/s/1aziIBB-KXeVUevMOGTf8xw 提取碼：rpyv），具體界面如圖2所示。

圖2中的上半部分，對應(yīng)到第二章中的功能（1），即拖拉式的繪圖，其中該區(qū)域左邊的部分為選擇模塊，上面分布著第一章中所描述的活動圖的七種節(jié)點，可以通過拖拉的方法，在右邊的白板任意位置進行繪制，并且通過連線的方法，生成邊，從而形成一個完整的活動圖，如其該區(qū)域右邊的部分所示。

在圖2中的下半部分，該區(qū)域的左邊對應(yīng)的是上文中的功能（2），即可以將已經(jīng)繪制的活動圖轉(zhuǎn)換成對應(yīng)JSON格式（一種易解析的數(shù)據(jù)存儲格式）的文件進行存儲，或者載入本地中已有的JSON文件，生成對應(yīng)的UML圖。該區(qū)域的右邊對應(yīng)的是上文中的功能（3），將繪制好的活動圖轉(zhuǎn)換成對應(yīng)Java代碼框架的實例。

該原型工具DSTool除了可以實現(xiàn)上述功能外，還可以用于建模形式化模型——依賴結(jié)構(gòu)[5-6],為高可信軟件的開發(fā)提供幫助。除此之外，還可以實現(xiàn)形式化模型與狀態(tài)圖之間的轉(zhuǎn)換。但可惜的是，目前該工具在驗證模型性質(zhì)和分解模型此類功能上不夠完善，之后要加大在這一方面的研究投入。

4 總結(jié)

本文介紹了一種基于JavaScript的原型工具DSTool。該工具的開發(fā)過程是先分析可視化建模語言UML的特點，再設(shè)計對應(yīng)的功能模塊，目前已經(jīng)實現(xiàn)的主要功能有拖拉式的繪圖、圖形與JSON文件的雙向轉(zhuǎn)換以及圖形與Java代碼框架的轉(zhuǎn)換，之后要進一步加大研究，爭取將DSTool迭代成完整的且有實際意義的軟件開發(fā)工具。