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

本期推荐：

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

一、简介

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

二.功能特点

• 轻量级：只需引入一个js文件，无需安装任何额外的依赖。
• 易用：简洁的用户界面，支持拖放、点击、键盘操作等方式，编程地控制图的生成和变化。
• 可扩展：模块化的架构，可根据需求添加或移除功能模块。
• 兼容：遵循BPMN 2.0的标准规范，可与其他遵循该规范的工具和平台无缝地交互。
• 开源：由Camunda公司开发和维护，完全开源，可在GitHub上查看源码和反馈。

三.使用步骤

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

// 导入bpmn-js
import 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图。非常适合用于业务流程管理。快来试试吧

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