推荐一个好用的流程图建模工具-bpmn-js

「小墨是前端」专注分享前端技术，推荐优秀的开源项目，展示Github、Gitee上的创意作品，带你深入前端底层，一起成长。

本期推荐：

一个好的工具可以极大地提高我们的开发效率。本期，我给大家推荐一个非常棒的前端项目——bpmn-js。

一、简介

bpmn-js是一个流程图的建模工具，用在在浏览器中创建、嵌入和扩展BPMN 2.0图的web工具包。

二.功能特点

轻量级：只需引入一个js文件，无需安装任何额外的依赖。

易用：简洁的用户界面，支持拖放、点击、键盘操作等方式，编程地控制图的生成和变化。

可扩展：模块化的架构，可根据需求添加或移除功能模块。

兼容：遵循BPMN 2.0的标准规范，可与其他遵循该规范的工具和平台无缝地交互。

开源：由Camunda公司开发和维护，完全开源，可在GitHub上查看源码和反馈。

三.使用步骤

安装：通过npm或直接下载js文件。

// 导入bpmn-jsimport BpmnModeler from 'bpmn-js/lib/Modeler';

创建：使用BpmnModeler或BpmnViewer创建模型器或查看器。

// 创建一个BPMN 2.0图的模型器var modeler = new BpmnModeler({ container: '#canvas'});// 创建一个BPMN 2.0图的查看器var viewer = new BpmnViewer({ container: '#canvas'});

加载：通过importXML或importJSON加载XML或JSON格式的BPMN 2.0图。

// 加载一个XML格式的BPMN 2.0图modeler.importXML(xml, function(err) { if (err) { console.error('failed to load diagram', err); } else { console.log('diagram loaded'); }});// 加载一个JSON格式的BPMN 2.0图modeler.importJSON(json, function(err) { if (err) { console.error('failed to load diagram', err); } else { console.log('diagram loaded'); }});// 创建一个空白的BPMN 2.0图modeler.createDiagram(function(err) { if (err) { console.error('failed to create diagram', err); } else { console.log('diagram created'); }});

编辑：通过用户界面或API编程地编辑BPMN 2.0图。

// 编程地编辑BPMN 2.0图var elementRegistry = modeler.get('elementRegistry');var modeling = modeler.get('modeling');// 获取一个任务元素var task = elementRegistry.get('Task_1');// 改变它的颜色modeling.setColor(task, { fill: 'red', stroke: 'black'});// 改变它的大小modeling.resizeShape(task, { x: task.x, y: task.y, width: 200, height: 100});// 改变它的文本modeling.updateLabel(task, 'New Task');

保存：通过saveXML、saveJSON或saveSVG保存XML、JSON或SVG格式的BPMN 2.0图。

// 保存一个XML格式的BPMN 2.0图modeler.saveXML({ format: true }, function(err, xml) { if (err) { console.error('failed to save diagram', err); } else { console.log('diagram saved'); console.log(xml); }});// 保存一个JSON格式的BPMN 2.0图modeler.saveJSON({ format: true }, function(err, json) { if (err) { console.error('failed to save diagram', err); } else { console.log('diagram saved'); console.log(json); }});// 保存一个SVG格式的BPMN 2.0图modeler.saveSVG({ format: true }, function(err, svg) { if (err) { console.error('failed to save diagram', err); } else { console.log('diagram saved'); console.log(svg); }});

四.项目地址

Github：https://github.com/bpmn-io/bpmn-js

五.总结

怎么样，bpmn-js是不是一款强大灵活的流程图创建工具，帮你快速地创建、嵌入和扩展BPMN 2.0图。非常适合用于业务流程管理。快来试试吧