BPMN.js与Palette插件的妙用：一文解锁画流程图新技巧

2023-09-10 12:42:49

BPMN.js 和 Palette 插件：专业流程图绘制的新时代

在当今瞬息万变的数字世界，流程图和 BPMN 图表已成为各行各业不可或缺的利器，助其优化运营、提升效率。想轻松绘制清晰易懂的流程图，专业的工具必不可少。

欢迎体验BPMN.js + Palette 插件 ，开启流程图绘制的新篇章。

BPMN.js 和 Palette：强强联合

BPMN.js 是一款开源的 BPMN 2.0 图形化建模工具，因其强大的可扩展性而备受青睐，可轻松添加各类插件扩展功能。Palette 插件 便是其中佼佼者，其直观的用户界面让您轻松添加、移除或自定义符号库，使流程图创作变得得心应手。

准备工作

安装 Node.js
安装 BPMN.js 和 Palette 插件
创建项目文件夹
在项目文件夹中安装依赖：npm install bpmn-js palette-js

自定义 Palette

创建文件 custom/CustomPalette.js，输入以下代码：

import { create, start } from 'palette-js';

const getPaletteEntries = (element) => {
  console.log(shape);
  create.start(event, shape);
};

export default {
  getPaletteEntries,
};

在 index.js 文件中导入 CustomPalette.js 并将其注册到 BPMN.js 中：

import { Palette } from 'bpmn-js';
import customPalette from './custom/CustomPalette';

const palette = new Palette({
  create: {
    entries: customPalette.getPaletteEntries,
  },
});

export default palette;

在 HTML 文件中引入 BPMN.js 和 index.js，并在 DOM 中创建容器元素：

<!DOCTYPE html>
<html>
  <head>
    
    <script src="bpmn-js/dist/bpmn-modeler.development.js"></script>
    <script src="index.js"></script>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>