基于JavaScript的可视化建模UML工具开发

文 浩

（福建师范大学,福建 福州 350007）

可视化建模是一种用不同的图形（主要包含节点和边）来描述系统的方法，从而加深开发人员对问题的理解。这种方法对于整个软件开发过程而言是极为重要的。

统一建模语言（UML）作为一种常用的可视化工具，被广泛运用于软件开发过程中，其重要性不言而喻。那么基于UML图的特性，开发出用于绘制可视化模型的原型工具，也是很有必要的。目前工业界中常用的UML图绘制工具有EA、ROSE、VISIO等，这些工具因为相对固定的用途以及版本迭代缓慢等诸多原因，绘制出来的可视化模型都过于简单，且不易调整（这些工具大多仍是基于UML1.0版本，现在常用版本为2.0）。同时，因为其软件安装相对复杂，功能界面不够友好，对于初学者来说，是一个不小的挑战。

基于上述工具存在的问题，本文选择使用JavaScript（下面简称为JS）语言进行UML模型绘制工具的开发。JS是一种用于网页应用开发的脚本语言，因为该语言的特性，可以实现在浏览器上直接进行可视化模型的绘制，并且可以免安装，初学者容易上手，迭代更新更为便捷，从而大大降低了建模工作的门槛。

本文的结构如下：第1节对UML图的特性进行了分析；第2节基于UML图的特性，对工具的功能模块进行了设计；第3节论述了原型工具开发过程中已经实现的功能，并且分析之后软件迭代的方向；最后总结全文，对未来的研究进行展望。

1 UML图的特性

活动图主要是用来对系统的行为进行建模，在视觉上的呈现类似于流程图或数据流程图，结构上类似于有向图。图1是一个表示ATM机业务过程的活动图实例，为了方便表示，仿照标记变迁系统（Labeled Transition System），用不同的英文字母对每个节点进行标记。

该活动图中的元素可以分为节点和边两大类。其中，节点又可分为以下几种。

活动节点：用一个矩形表示。活动节点是用于表示系统中最基本的活动，每一种活动对应到一个活动节点。在图1中，用字母a命名的活动节点，表示的是ATM机系统中插卡这一个活动。

初始节点：用一个实心的黑色圆表示，类似于树结构中的根节点，表示系统中活动的开始。在图1中，用字母i表示。

终止节点：用一个较大的空心圆和小的黑色实心圆嵌套组成，类似于树结构中的叶子节点，表示系统中活动的结束。在图1中，字母f1和f2都是终止节点。

选择节点：用一个菱形表示，体现系统会根据不同触发条件，选择不同的活动，类似于程序设计语言中的if结构。在图1中，用dn开头命名的节点都是选择节点。

合并节点:同样用菱形表示，体现了活动分流后的合并，与选择节点配套使用。为了区分，统一用mn开头进行命名。

分叉节点：用一个中间部分印有fork字样的长条矩形表示，体现了活动的并发，类似于程序设计语言中的多线程。在图1中，用fn开头的字母进行命名。

本书作者佩恩特利用其担任总统首席道德律师的两年半期间，在美国政治中心之一的白宫，近距离地观察到众多的人和事，从而为本书提供了难能可贵的丰富的素材。美国多年来实施了一系列推动行政道德的措施，然而，廉政建设的努力正面临着越来越多的挑战。《打造一个美国应得的政府》针对美国政坛上形形色色的贪腐行为、现存的漏洞，以及原因所在，进行了深入的分析，并作出了不少有益、中肯的批评。与此同时，该书也对如何改变现状提出了一些建议。作者希望，这些建议的落实，将有助于改进美国的行政道德，有助于打造一个美国人民应得的廉洁的政府。

汇合节点：用一个中间部分印有join字样的长条矩形表示，体现了并发等待的活动，此时汇合，进入下一个动作，与分叉节点配套使用。在图1中，用jn开头的字母进行命名。

以上节点被统称为控制节点，即不代表实际的活动，而是用于控制不同活动间的执行。

除了节点之外，边也是活动图中的主要元素。活动图中的边是一条有向的线段，主要表示的是节点间的执行顺序和先后依赖关系。基于边和控制节点，就可以很清晰地显示出在一个系统中活动的具体执行流程。

图1 一个活动图的实例

图2 活动图的绘制

2 原型工具的功能模块

基于上文对UML特性的分析，下面对原型工具的功能模块组成进行了讨论。

开发的原型工具所需要的功能主要分为以下三个方面。

UML图的绘制：需要实现拖拉式的绘图，即存在一个选择面板，其中分布的就是UML图中的不同节点，接着再提供一个画板，可以将选择面板中的节点拖拉至画板之上，随后可以在节点间进行连线，从而构成一个完整的UML图。

图与文档之间的转换：最近一段时间，一个发布在GitHub上的名为flowchart.fun（https://flowchart.fun/）的网页工具风靡工业界。其流行的原因是开发人员可以通过编辑文档，自动生成对应的流程图或者思维导图，这极大提升了开发人员的工作效率。本文中的原型工具也需要实现图与文档之间的转换，并且，这种转换是双向的，不仅要实现文档自动转换成可视化的UML图，也需要实现UML图绘制后，自动生成对应文档进行存储。这种双向转换对于开发过程的帮助不言而喻。

图与代码之间的转换：在软件生命周期中，经历了设计与建模后，就到了编码阶段，编码人员需要根据相关的UML图，进行代码的编写。那么在UML图绘制完成后，自动生成一个正确的代码框架，这样编码人员就不再需要去理解设计人员所绘制的UML图，而是直接对该UML图生成的代码框架进行增添与删改，从而大大提升了开发效率以及降低了错误率。

3 原型工具已实现的功能

基于开源库GoJS（https://gojs.net/latest/index.html），我们成功开发了原型工具DSTool（下载链接：https://pan.baidu.com/s/1aziIBB-KXeVUevMOGTf8xw 提取码：rpyv），具体界面如图2所示。

图2中的上半部分，对应到第二章中的功能（1），即拖拉式的绘图，其中该区域左边的部分为选择模块，上面分布着第一章中所描述的活动图的七种节点，可以通过拖拉的方法，在右边的白板任意位置进行绘制，并且通过连线的方法，生成边，从而形成一个完整的活动图，如其该区域右边的部分所示。

在图2中的下半部分，该区域的左边对应的是上文中的功能（2），即可以将已经绘制的活动图转换成对应JSON格式（一种易解析的数据存储格式）的文件进行存储，或者载入本地中已有的JSON文件，生成对应的UML图。该区域的右边对应的是上文中的功能（3），将绘制好的活动图转换成对应Java代码框架的实例。

该原型工具DSTool除了可以实现上述功能外，还可以用于建模形式化模型——依赖结构[5-6],为高可信软件的开发提供帮助。除此之外，还可以实现形式化模型与状态图之间的转换。但可惜的是，目前该工具在验证模型性质和分解模型此类功能上不够完善，之后要加大在这一方面的研究投入。

4 总结

本文介绍了一种基于JavaScript的原型工具DSTool。该工具的开发过程是先分析可视化建模语言UML的特点，再设计对应的功能模块，目前已经实现的主要功能有拖拉式的绘图、图形与JSON文件的双向转换以及图形与Java代码框架的转换，之后要进一步加大研究，争取将DSTool迭代成完整的且有实际意义的软件开发工具。