首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

推荐一个好用的流程图建模工具-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图。非常适合用于业务流程管理。快来试试吧

  • 发表于:
  • 原文链接https://page.om.qq.com/page/OMtF9N_cTY_5_w5tHtT7_Gtg0
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券