「小墨是前端」专注分享前端技术,推荐优秀的开源项目,展示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图。非常适合用于业务流程管理。快来试试吧
领取专属 10元无门槛券
私享最新 技术干货