Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/LinDaiDai/bpmn-chinese-document

📒 全网最详bpmn.js中文教材/文档
https://github.com/LinDaiDai/bpmn-chinese-document

bpmn-js javascript

Last synced: about 1 month ago
JSON representation

📒 全网最详bpmn.js中文教材/文档

Awesome Lists containing this project

README 

        



### bpmn.js简介



[bpmn.js](https://bpmn.io/)是一个BPMN2.0渲染工具包和web建模器.



它使用JavaScript编写，在不需要后端服务器支持的前提下向现代浏览器内嵌入BPMN2.0流程图.



简单来说, 就是能使得前端来画流程图, 它可能长成这样:



![readme1](./resource/readme1.png)



也可能长成这样:



![readme1](./resource/readme2.png)



或许你可以亲自试试: [在线绘制bpmn流程图](https://demo.bpmn.io/)



### 全部目录



[bpmn.js教材目录](https://github.com/LinDaiDai/bpmn-chinese-document/blob/master/directory.md)



**注：如果霖呆呆的文档较旧的话, 建议查看：[bpmn-js 交流群附属资料(文档及开源库)](https://juejin.cn/post/7304831120710434868) 中的文档, 会新很多，强推！！！**



（如果github中一些文章的图片显示不出来，可以在掘金上查看，也有相应的文章：https://juejin.cn/user/360295513463912/posts）



### 几个问题



> Q: bpmn.js是什么? 🤔️



[bpmn.js](https://bpmn.io/)是一个BPMN2.0渲染工具包和web建模器, 使得画流程图的功能在前端来完成.



> Q: 我为什么要写该系列的教材? 🤔️



因为公司业务的需要因而要在项目中使用到`bpmn.js`,但是由于`bpmn.js`的开发者是国外友人, 因此国内对这方面的教材很少, 也没有详细的文档. 所以很多使用方式很多坑都得自己去找 😅.



在将其琢磨完之后, 决定写一系列关于它的教材来帮助更多`bpmn.js`的使用者或者是期于找到一种好的绘制流程图的开发者. 同时也是自己对其的一种巩固.



> Q: 教材中的知识我都是从哪里看的? 🤔️



最开始是根据公司业务的需要, 跟着官方给的一些例子 来推敲了解`bpmn.js`的一些基础知识, 包括一些自定义`contextPad、renderer、palette`的使用, 然后就写了几篇关于`bpmn.js`的文章 ✏️.



之后越来越多读者通过微信与我联系, 他们也会问一些我没有遇到过的问题, 从中互相探索怎样使用, 怎样解决实际问题... 过程里大多都是通过查看`bpmn.js`的源码, 然后本地测试源码中一些方法和属性的作用.



> Q: 本教材还会更新多久? 🤔️



不知道🤷‍♂️... 因为其实现在工作已经没在用`bpmn.js`了, 我现在更多的把它当成一种兴趣来学习吧...



而且现在我们也有了自己的一个`bpmn.js`交流群, 时不时会有一些新的问题抛出来, 所以暂时是与其分不开的 😊.



我也会在工作之余, 尽量多出一些教材, 包括群里大家抛出的问题, 我也会抽时间将它们整理出来, 方便后面遇到同样问题的小伙伴查看, 所以现在是持续更新的.



> Q: 还有什么想说的? 🤔️



求Star 🌟 , 求 Fork 📒



就像之前我提到过的, 光靠我一个人的力量想要将 **bpmn-chinese-document**打造成一个真正的**bpmn中文文档**



是不可能的...



精力不够...能力也不够...



所以我希望有更多的`bpmn.js`使用者能参与到此项目中来 🎉...



你可以是写一篇关于某个知识点的文章, 就算是我已经写过的知识点也可以, 因为我知道我写的不一定全面, 如果你有更多可以写的我当然欢迎👏.



也可以是写一些教材案例, 因为之前就有大佬吐槽说官方给的案例都太过简单了 😂, 可以让我们自己写一些案例出来. (案例中的`README`要尽量详细哟 😁, 当然有一篇配合着的文档更好啦 😄)



再或者是一些你平常碰到的坑, 总结之类的文章也很好 😼.



> Q: 如何 Fork ? 🤔️



点击项目右上角的`Fork`, 然后像`Fork`其它项目一样, 不太会的小伙伴可以查看这篇文章:



[Github上怎么修改别人的项目并且提交给原作者！图文并茂！](https://blog.csdn.net/qq_26787115/article/details/52133008)



不过在提交的时候, 为避免项目太乱, 可以在根目录下创建一个以你`github`为名的文件夹(比如我的就是`LinDaiDai`)然后将你的文章或者案例都放在这个文件夹里面进行提交就可以了🎉 .



> Q: 还有什么要提醒的?



文章中的案例 icon 或者一些 .bpmn 的云文件链接，例如以 https:hexo-blog-1256114407 开头的链接，用的都是我私人的腾讯云存储桶。



仅用于文章案例，所以如果大家自己写写 demo 看还好，请勿用在实际项目上哈。



这样带来的风险：



1、如果我的私人账号欠费了的话，所有这些链接都不能访问了，可能会对您的生产环境造成不可预估的影响；



2、访问量多了的话，我这费用也抗不住啊...



案例里的这些图标都是:



![89283582b8919cc501720cd6785ff10](https://user-images.githubusercontent.com/30402039/155876311-314b43f8-361b-4cef-b33f-73d5eee989e4.png)



### 后语



如果你也对`bpmn.js` 感兴趣的话, 欢迎加入我们的`bpmn.js`交流群, 一起学习, 一起进步💪.



![weixin](./resource/weixin.png)



进群方式: 关注 **霖呆呆(LinDaiDai)** 的公众号👇👇👇, 选择 **其它** 菜单中的 **bpmn.js群** 即可😊.



| 公众号二维码                              | 赞赏码                              |

| ----------------------------------------- | ----------------------------------- |

| ![](./resource/LinDaiDai公众号二维码.png) | ![](./resource/LinDaiDai赞赏码.png) |



整理文章, 编写案例不易 😂... 



走过路过的各位大佬能否打赏点饭钱呢...



你的支持是霖呆呆持续更新的动力, 哈哈哈 😄



#### 更多bpmn相关文档和案例



- https://github.com/miyuesc/bpmn-process-designer

- https://github.com/PL-FE/bpmn-doc