如何在 Node.js 环境中使用 `bpmn-js-cli` 生成 BPMN 图？

Question

我想使用

bpmn-js-cli

在 Node.js 环境中以编程方式从 JSON 数据生成 BPMN 图表 (BPMN 2.0 XML)。目前，大多数

bpmn-js-cli

示例似乎都在浏览器上下文中运行，与将图表呈现到 DOM 的

Modeler

实例进行交互。

我的问题：

1. 是否可以在纯 Node.js 环境（例如，没有浏览器或 DOM）中运行

   bpmn-js-cli

   命令来生成 BPMN XML 文件？
2. 如果是这样，您能否提供或指出一个代码片段，演示如何：
   • 初始化

     Modeler

     或 Node.js 中合适的等效项
   • 加载或创建空的 BPMN 图
   • 使用

     bpmn-js-cli

     命令添加 BPMN 元素（例如，开始事件、用户任务、结束事件）
   • 最后，将结果图导出为 BPMN XML

Answer 1

是的，可以在没有浏览器或 DOM 的纯 Node.js 环境中使用

bpmn-js-cli

生成 BPMN XML 文件。然而，

bpmn-js-cli

通常是为基于浏览器的渲染而设计的，因此需要进行一些调整才能在 Node.js 环境中运行它。

要在没有浏览器的 Node.js 中使用

bpmn-js

，您可以利用

BpmnModeler

类并直接使用它，绕过任何 DOM 相关功能的需要。以下是一种以编程方式生成 BPMN XML 的方法：

步骤：

1. 安装

   bpmn-js

   及相关软件包：

   npm install bpmn-js
   npm install --save-dev @bpmn-io/bpmn-js-cli
   

2. 在 Node.js 中生成 BPMN XML 的代码示例：

   const BpmnModeler = require('bpmn-js/lib/Modeler');
   const fs = require('fs');
   
   // Initialize the BPMN Modeler without a DOM
   const modeler = new BpmnModeler({
     container: 'body', // This can be any string (no impact in Node.js context)
     height: 500,
     width: 500
   });
   
   // Create an empty BPMN diagram or load an existing one
   const createEmptyDiagram = () => {
     const diagramXML = `<?xml version="1.0" encoding="UTF-8"?>
     <bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" 
                       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
                       xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">
       <bpmn:process id="Process_1" isExecutable="false">
         <bpmn:startEvent id="StartEvent_1"/>
         <bpmn:userTask id="UserTask_1" name="Task"/>
         <bpmn:endEvent id="EndEvent_1"/>
       </bpmn:process>
     </bpmn:definitions>`;
   
     return diagramXML;
   };
   
   // Load the diagram into the Modeler
   const loadDiagram = (diagramXML) => {
     modeler.importXML(diagramXML, (err) => {
       if (err) {
         console.error('Failed to load diagram:', err);
       } else {
         console.log('Diagram loaded successfully');
       }
     });
   };
   
   // Add BPMN elements dynamically (e.g., add tasks or events)
   const addElements = () => {
     const modeling = modeler.get('modeling');
     const elementFactory = modeler.get('elementFactory');
   
     const task = elementFactory.createShape({
       type: 'bpmn:UserTask',
       x: 100,
       y: 100
     });
   
     modeling.createShape(task, { x: 200, y: 200 });
   };
   
   // Export the diagram to BPMN XML
   const exportDiagram = () => {
     modeler.saveXML({ format: true }, (err, xml) => {
       if (err) {
         console.error('Failed to export BPMN XML:', err);
       } else {
         // Save XML to a file
         fs.writeFileSync('output.bpmn', xml);
         console.log('BPMN XML exported to output.bpmn');
       }
     });
   };
   
   // Main process to create and export BPMN
   const diagramXML = createEmptyDiagram();
   loadDiagram(diagramXML);
   addElements();
   exportDiagram();
   

说明：

1. 初始化：

   BpmnModeler

   在 Node.js 中使用虚拟容器 (

   'body'

   ) 进行初始化。在这种情况下，它不用于渲染，但底层功能仍然有效。

2. 创建空图：我们以 XML 格式定义基本 BPMN 结构，其中包含开始事件、用户任务和结束事件。

3. 添加 BPMN 元素：

   modeling

   服务用于以编程方式创建和添加 BPMN 元素（例如，用户任务）。您可以动态添加更多元素，例如开始事件、用户任务和结束事件。

4. 导出 BPMN XML：

   saveXML

   方法将 BPMN 图导出为 XML 文件。

备注：

• 这种方法通过直接使用

  bpmn-js

  的模型和底层服务来避免使用浏览器 DOM。
• 确保您有适当的环境来使用 Node.js 处理文件 I/O（例如，

  fs

  模块）。

运行示例：

1. 将脚本保存到文件中（例如，

   generate-bpmn.js

   ）。

2. 使用 Node.js 运行它：

   node generate-bpmn.js
   

这将创建一个包含 BPMN 图的

output.bpmn

文件。