现在，越来越多的应用需要将业务流程可视化展示出来，方便用户查看和管理。而 bpmn-js 是一个非常流行的 BPMN 2.0 呈现库，它可以将业务流程图呈现为 BPMN 2.0 标准所定义的图形符号。
在使用 bpmn-js 进行业务流程图的开发中，部分用户会遇到一些问题，例如：
- 如果业务流程非常复杂，手动绘制比较困难，开发效率低下；
- 如果业务流程涉及到后端数据，给前端传递数据比较麻烦；
- 如果业务流程图需要在多个应用中重复使用，需要复制多份文件和代码。
针对这些问题，有一个名为 bpmn-js-cli-modeling-dsl 的 npm 包能够提供解决方案，并大大简化开发流程。
什么是 bpmn-js-cli-modeling-dsl？
bpmn-js-cli-modeling-dsl 是一个 bpmn-js 插件，它支持使用命令行工具解析 BPMN 2.0 DSL 文件，并使用 DSL 文件生成相应的模型和业务流程图。使用者可以通过简单的配置文件和命令行参数，将业务流程图快速生成为目标文件，完成自动化的业务流程图生成工作。
本文将会通过一个简单的示例，介绍如何使用 bpmn-js-cli-modeling-dsl 实现业务流程自动生成。
工具准备
在开始本教程前，请确保你已经安装好以下工具：
- Node.js（v8+）
- NPM（v5+）
- bpmn-js-cli-modeling-dsl（v0.2.2+）
示例介绍
接下来，我们将通过一个简单的工程，来介绍如何使用 bpmn-js-cli-modeling-dsl 实现业务流程自动生成。该示例工程的目标是：根据 DSL 文件，自动生成一个加法运算的业务流程图。
DSL 文件的内容如下：
graph ATYPE(Diagram, Diagram) {
node ADD(Add) {
params a Integer
params b Integer
out Integer
edge ADD.int(IntMatcher <= IntegerResolver, ADD.a -> ADD.out, ADD.b -> ADD.out)
}
}该 DSL 文件定义了一个名为 ADD 的节点，它接收 a 和 b 两个参数，输出它们的和。
示例工程代码：（使用 Express.js 和 bpmn-js 进行开发）
-- -------------------- ---- -------
----- -- - --------------
----- ---- - ----------------
----- --------- - ----------------------------------------------
----- -------- - -----------------------------------------
----- ----------- - -------------------------------
----- ------- - -------------------- -----------
----- ---------- - ------------------------ ---------
----- ------- - --- -------------
---------- ----------
--------- - ------- -------- --
------------------ -
-
--------- -------------------
--------------- --------- -------------------------------------------------------
-
-
---
----- -------------- - ---
--------------------------- -------- ---------- -
----------------------------------- -------- -- -
----- ------- - -----------------------
----- -------- - ------------------------
-- ----
----- ----------- - -------------------------
----- ----------- - ----------------------------- --------------------------- ---------
---------------------------------
-- ---
----- ---------- - ------------------------
----- ------------- - ---------------------------- -------------------------- ---------
-----------------------------------
-- --- --
----- ------- - -----------------------
----- ---------- - ------------------------- ----------------------- ---------
--------------------------------
-- ------
----------------------- ----------------- --------- -
----- -------- - --------------------------------
----------------------------------- -
---------------------- -
---- ---------------
---- --------------
-
---
---
-- ----
----------------- ------- ---- -- -------- ----- ---- -
-- ------ -
------------------------------- --------------- -
---------------- ----------
------------- ------- ------------------------
------------- ------ ------------------ ------
---
-
---
---
---
-------- ------------------------------- ---------------------- -------- -
----- -------- - -----------------------
----- -------- - ----------------------
----- --- - ----------------------------------------------
--- -------------------- - ----------------------------------
-------------------- - ---------------- --------------------- - --
----- ------------------ - ----------------------------------- - ------------------------------
----- ---------- - ----------------------------------- --------------------
------ -
--------- ---------------------------------------------
---- ------ ------------- -----------------------------------
------------- ---------
------- ---
------- --
--
-代码解析：
该示例代码的主要实现借助了 bpmn-js 的 Modeling 功能，一些关键点讲解如下：
- 首先，我们需要将 DSL 文件解释为 BPMN 2.0 XML 格式，并使用 BPMN Modeler 进行导入，并构造出必要的上下文。
- 然后，我们需要通过遍历 Modeler 生成的 diagram，从而设置该业务流程图的初始节点、父节点和 ADD 节点的输入参数。
- 最后，导出模型文件。
示例查看：
在完成上述代码后，下一步就可以启动应用程序并查看演示结果。你也可以通过以下命令将该示例代码下载至本地：
git clone https://github.com/bpmn-io/bpmn-js-cli-modeling-dsl.git cd bpmn-js-cli-modeling-dsl/examples/app/components npm install node app.js
在启动应用程序后，打开浏览器并访问 http://localhost:8080，页面将呈现出一个加法业务流程图，它的图像是由业务 DSL 文件自动生成的。
总结
使用 bpmn-js-cli-modeling-dsl npm 包，可以快速地生成业务流程图。在现代化 Web 应用程序中，自动生成业务流程图是一项很实用的功能。除此之外，bpmn-js-cli-modeling-dsl 还有很多特性，可以帮助 Web 开发人员在业务流程图开发中更加便捷，值得更多的人学习和使用。
示例代码来自 bpmn-js-cli-modeling-dsl/examples/app/components。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c87ccdc64669dde4ffe