workflow-bpmn-modeler

🔥 本项目基于 vue 和 bpmn.io@7.0 ，实现 flowable 的 modeler 流程设计器

预览

!20200930030243

在线 demo

👉 https://goldsubmarine.github.io/workflow-bpmn-modeler/demo/

安装

``bash

`安装`


yarn add workflow-bpmn-modeler


使用说明（最简 demo）

`vue

`iframe 部署`

如果你的项目是 jquery 或 react 类项目，可以通过 iframe 的方式集成该流程设计器

本仓库通过 github pages 部署了静态页面，使用 jsdelivr 做 cdn ，国内访问也非常快速，所以你可以直接集成本仓库的页面，因为全部白嫖了 github 的资源，没有自己建服务器维护，所以不用担心资源失效问题。

当然你也可以在 docs/lib 文件夹下下载对应的版本，进行本地部署。

集成方式如下（ps：可直接拷贝以下代码到一个html文件中试一下）：

`html src="https://goldsubmarine.github.io/workflow-bpmn-modeler/cdn/0.2.8/" id="myFrame" frameborder="0" width="100%" height="800px">

关于定制

本组件对标的是 flowable 官方设计器，也就是实现 flowable 的 xml 规则标准，里面所用名词也都是官方文档中的专业术语。所以这个组件只是程序员在开发阶段，自己建模导出 xml 的工具，试图定制该建模器的行为都是不对的，不要把业务带到建模器中来！自己的业务应该另行开发增删改查来实现。

该组件未来也不会升级 UI 库和 vue。不管库是否兼容，通过 iframe 的方式集成建模器才是最简单正确的方式。