{"id":15034337,"url":"https://github.com/lindaidai/bpmn-chinese-document","last_synced_at":"2025-05-15T11:05:56.345Z","repository":{"id":37411563,"uuid":"234590499","full_name":"LinDaiDai/bpmn-chinese-document","owner":"LinDaiDai","description":"📒  全网最详bpmn.js中文教材/文档","archived":false,"fork":false,"pushed_at":"2024-06-19T08:55:45.000Z","size":8526,"stargazers_count":2073,"open_issues_count":7,"forks_count":384,"subscribers_count":39,"default_branch":"master","last_synced_at":"2025-04-11T19:59:55.162Z","etag":null,"topics":["bpmn-js","javascript"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LinDaiDai.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-01-17T16:34:51.000Z","updated_at":"2025-04-09T07:11:27.000Z","dependencies_parsed_at":"2024-08-01T22:52:25.038Z","dependency_job_id":null,"html_url":"https://github.com/LinDaiDai/bpmn-chinese-document","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LinDaiDai%2Fbpmn-chinese-document","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LinDaiDai%2Fbpmn-chinese-document/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LinDaiDai%2Fbpmn-chinese-document/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LinDaiDai%2Fbpmn-chinese-document/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LinDaiDai","download_url":"https://codeload.github.com/LinDaiDai/bpmn-chinese-document/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254328385,"owners_count":22052632,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bpmn-js","javascript"],"created_at":"2024-09-24T20:24:40.486Z","updated_at":"2025-05-15T11:05:56.291Z","avatar_url":"https://github.com/LinDaiDai.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\n### bpmn.js简介\n\n[bpmn.js](https://bpmn.io/)是一个BPMN2.0渲染工具包和web建模器.\n\n它使用JavaScript编写，在不需要后端服务器支持的前提下向现代浏览器内嵌入BPMN2.0流程图.\n\n简单来说, 就是能使得前端来画流程图, 它可能长成这样:\n\n![readme1](./resource/readme1.png)\n\n\n\n也可能长成这样:\n\n\n\n![readme1](./resource/readme2.png)\n\n\n\n或许你可以亲自试试: [在线绘制bpmn流程图](https://demo.bpmn.io/)\n\n\n\n### 全部目录\n\n[bpmn.js教材目录](https://github.com/LinDaiDai/bpmn-chinese-document/blob/master/directory.md)\n\n**注：如果霖呆呆的文档较旧的话, 建议查看：[bpmn-js 交流群附属资料(文档及开源库)](https://juejin.cn/post/7304831120710434868) 中的文档, 会新很多，强推！！！**\n\n（如果github中一些文章的图片显示不出来，可以在掘金上查看，也有相应的文章：https://juejin.cn/user/360295513463912/posts）\n\n### 几个问题\n\n\n\n\u003e Q: bpmn.js是什么? 🤔️\n\n[bpmn.js](https://bpmn.io/)是一个BPMN2.0渲染工具包和web建模器, 使得画流程图的功能在前端来完成.\n\n\n\n\u003e Q: 我为什么要写该系列的教材? 🤔️\n\n因为公司业务的需要因而要在项目中使用到`bpmn.js`,但是由于`bpmn.js`的开发者是国外友人, 因此国内对这方面的教材很少, 也没有详细的文档. 所以很多使用方式很多坑都得自己去找 😅.\n\n在将其琢磨完之后, 决定写一系列关于它的教材来帮助更多`bpmn.js`的使用者或者是期于找到一种好的绘制流程图的开发者. 同时也是自己对其的一种巩固.\n\n\n\n\u003e Q: 教材中的知识我都是从哪里看的? 🤔️\n\n最开始是根据公司业务的需要, 跟着官方给的一些例子 来推敲了解`bpmn.js`的一些基础知识, 包括一些自定义`contextPad、renderer、palette`的使用, 然后就写了几篇关于`bpmn.js`的文章 ✏️.\n\n之后越来越多读者通过微信与我联系, 他们也会问一些我没有遇到过的问题, 从中互相探索怎样使用, 怎样解决实际问题... 过程里大多都是通过查看`bpmn.js`的源码, 然后本地测试源码中一些方法和属性的作用.\n\n\n\n\u003e Q: 本教材还会更新多久? 🤔️\n\n不知道🤷‍♂️... 因为其实现在工作已经没在用`bpmn.js`了, 我现在更多的把它当成一种兴趣来学习吧...\n\n而且现在我们也有了自己的一个`bpmn.js`交流群, 时不时会有一些新的问题抛出来, 所以暂时是与其分不开的 😊.\n\n我也会在工作之余, 尽量多出一些教材, 包括群里大家抛出的问题, 我也会抽时间将它们整理出来, 方便后面遇到同样问题的小伙伴查看, 所以现在是持续更新的.\n\n\n\n\u003e Q: 还有什么想说的? 🤔️\n\n求Star 🌟 , 求 Fork 📒\n\n就像之前我提到过的, 光靠我一个人的力量想要将 **bpmn-chinese-document**打造成一个真正的**bpmn中文文档**\n\n是不可能的...\n\n精力不够...能力也不够...\n\n所以我希望有更多的`bpmn.js`使用者能参与到此项目中来 🎉...\n\n你可以是写一篇关于某个知识点的文章, 就算是我已经写过的知识点也可以, 因为我知道我写的不一定全面, 如果你有更多可以写的我当然欢迎👏.\n\n也可以是写一些教材案例, 因为之前就有大佬吐槽说官方给的案例都太过简单了 😂, 可以让我们自己写一些案例出来. (案例中的`README`要尽量详细哟 😁, 当然有一篇配合着的文档更好啦 😄)\n\n再或者是一些你平常碰到的坑, 总结之类的文章也很好 😼.\n\n\n\n\u003e Q: 如何 Fork ? 🤔️\n\n点击项目右上角的`Fork`, 然后像`Fork`其它项目一样, 不太会的小伙伴可以查看这篇文章:\n\n[Github上怎么修改别人的项目并且提交给原作者！图文并茂！](https://blog.csdn.net/qq_26787115/article/details/52133008)\n\n不过在提交的时候, 为避免项目太乱, 可以在根目录下创建一个以你`github`为名的文件夹(比如我的就是`LinDaiDai`)然后将你的文章或者案例都放在这个文件夹里面进行提交就可以了🎉 .\n\n\n\u003e Q: 还有什么要提醒的?\n\n文章中的案例 icon 或者一些 .bpmn 的云文件链接，例如以 https:hexo-blog-1256114407 开头的链接，用的都是我私人的腾讯云存储桶。\n\n仅用于文章案例，所以如果大家自己写写 demo 看还好，请勿用在实际项目上哈。\n\n这样带来的风险：\n\n1、如果我的私人账号欠费了的话，所有这些链接都不能访问了，可能会对您的生产环境造成不可预估的影响；\n\n2、访问量多了的话，我这费用也抗不住啊...\n\n案例里的这些图标都是:\n\n![89283582b8919cc501720cd6785ff10](https://user-images.githubusercontent.com/30402039/155876311-314b43f8-361b-4cef-b33f-73d5eee989e4.png)\n\n\n### 后语\n\n如果你也对`bpmn.js` 感兴趣的话, 欢迎加入我们的`bpmn.js`交流群, 一起学习, 一起进步💪.\n\n![weixin](./resource/weixin.png)\n\n进群方式: 关注 **霖呆呆(LinDaiDai)** 的公众号👇👇👇, 选择 **其它** 菜单中的 **bpmn.js群** 即可😊.\n\n| 公众号二维码                              | 赞赏码                              |\n| ----------------------------------------- | ----------------------------------- |\n| ![](./resource/LinDaiDai公众号二维码.png) | ![](./resource/LinDaiDai赞赏码.png) |\n\n整理文章, 编写案例不易 😂... \n\n走过路过的各位大佬能否打赏点饭钱呢...\n\n你的支持是霖呆呆持续更新的动力, 哈哈哈 😄\n\n#### 更多bpmn相关文档和案例\n\n- https://github.com/miyuesc/bpmn-process-designer\n- https://github.com/PL-FE/bpmn-doc\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flindaidai%2Fbpmn-chinese-document","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flindaidai%2Fbpmn-chinese-document","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flindaidai%2Fbpmn-chinese-document/lists"}