推荐一个好用的流程图建模工具-bpmn-js(流程图建模工具好用推荐)，流程图建模工具有哪些。

本期推荐：

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

一、简介

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

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

// 导入bpmn-jsimport BpmnModeler from 'bpmn-js/lib/Modeler';<!-- 引入bpmn-js --><script src="bpmn-js/dist/bpmn-modeler.production.min.js"></script>

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

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

3、加载：通过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'); }});

4、编辑：通过用户界面或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');

5、保存：通过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图。
非常适合用于业务流程管理。
快来试试吧

创作不易，欢迎大家关注、点赞、收藏、转发！
我会继续分享高质量的干货和前沿的技术，给大家提供更多有价值的内容！

标签：bpmnconsole