[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8927":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":23,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":28,"readmeContent":29,"aiSummary":30,"trendingCount":16,"starSnapshotCount":16,"syncStatus":31,"lastSyncTime":32,"discoverSource":33},8927,"workflow-bpmn-modeler","Nayacco\u002Fworkflow-bpmn-modeler","Nayacco","🔥 flowable workflow designer based on vue and bpmn.io@7.0","https:\u002F\u002Fnayacco.github.io\u002Fworkflow-bpmn-modeler\u002Fdemo\u002F",null,"Vue",1383,361,35,16,0,1,5,20.68,"MIT License",false,"master",true,[25,26,27],"bpmn","flowable","vue","2026-06-12 02:02:00","English | [简体中文](.\u002FREADME_CN.md)\n\n# workflow-bpmn-modeler\n\n[![NPM Version](http:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fworkflow-bpmn-modeler.svg?style=flat)](https:\u002F\u002Fwww.npmjs.org\u002Fpackage\u002Fworkflow-bpmn-modeler)\n[![NPM Downloads](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002Fworkflow-bpmn-modeler.svg?style=flat)](https:\u002F\u002Fwww.npmjs.org\u002Fpackage\u002Fworkflow-bpmn-modeler)\n![](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-MIT-000000.svg)\n\n🔥 This project implements flowable's workflow designer based on `vue` and `bpmn.io@7.0`\n\n## Preview 📟\n\n![20200930030243](https:\u002F\u002Fcdn.jsdelivr.net\u002Fgh\u002Fnayacco\u002Fcdn@master\u002Fblog\u002F20200930030243.png)\n\n## Online demo 📢\n\n👉 https:\u002F\u002Fnayacco.github.io\u002Fworkflow-bpmn-modeler\u002Fdemo\u002F\n\n## Install ⏳\n\n```bash\n# Install\nyarn add workflow-bpmn-modeler\n```\n\n## How to use 👣\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cbpmn-modeler\n      ref=\"refNode\"\n      :xml=\"xml\"\n      :users=\"users\"\n      :groups=\"groups\"\n      :categorys=\"categorys\"\n      :is-view=\"false\"\n      @save=\"save\"\n    \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nimport bpmnModeler from \"workflow-bpmn-modeler\";\n\nexport default {\n  components: {\n    bpmnModeler,\n  },\n  data() {\n    return {\n      xml: \"\", \u002F\u002F Query the xml\n      users: [\n        { name: \"The Beatles\", id: \"1\" },\n        { name: \"The Rolling Stones\", id: \"2\" },\n        { name: \"Pink Floyed\", id: \"3\" },\n      ],\n      groups: [\n        { name: \"Folk Music\", id: \"4\" },\n        { name: \"Rock Music\", id: \"5\" },\n        { name: \"Classical Music\", id: \"6\" },\n      ],\n      categorys: [\n        { name: \"Music\", id: \"7\" },\n        { name: \"Articles\", id: \"8\" },\n      ],\n    };\n  },\n  methods: {\n    getModelDetail() {\n      \u002F\u002F Send request to get xml\n      \u002F\u002F this.xml = response.xml\n    },\n    save(data) {\n      console.log(data);  \u002F\u002F { process: {...}, xml: '...', svg: '...' }\n    },\n  },\n};\n\u003C\u002Fscript>\n```\n\n## Iframe Deployment 🎪\n\nIf your project is a `jquery` or `react` project, you can integrate the workflow designer by means of an iframe\n\nThis repository deployed a static page by the github pages, using `jsdelivr` cdn, access in China is also very fast, so you can directly integrate the pages of this repository, because all the free github resources are used, did not build their own server maintenance, so do not worry about the failure of resources.\n\nOf course you can also download the corresponding version from the `docs\u002Flib` folder for local deployment.\n\nThe integration method is as follows (ps: you can copy the following code directly into an html file and try it out)\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n  \u003Cbody>\n    \u003Ciframe\n      src=\"https:\u002F\u002Fnayacco.github.io\u002Fworkflow-bpmn-modeler\u002Fcdn\u002F0.2.8\u002F\"\n      id=\"myFrame\"\n      frameborder=\"0\"\n      width=\"100%\"\n      height=\"800px\">\n    \u003C\u002Fiframe>\n\n    \u003Cscript>\n      let myFrame = document.getElementById(\"myFrame\");\n      \u002F\u002F Get details\n      window.addEventListener(\"message\", (event) => {\n        console.log(event.data); \u002F\u002F { xml: 'xxx', img: 'xxx', process: {} }\n      });\n      myFrame.onload = () => {\n        let postMsg = {\n          xml: \"\", \u002F\u002F Query the xml\n          users: [\n            { name: \"The Beatles\", id: \"1\" },\n            { name: \"The Rolling Stones\", id: \"2\" },\n            { name: \"Pink Floyed\", id: \"3\" },\n          ],\n          groups: [\n            { name: \"Folk Music\", id: \"4\" },\n            { name: \"Rock Music\", id: \"5\" },\n            { name: \"Classical Music\", id: \"6\" },\n          ],\n          categorys: [\n            { name: \"Music\", id: \"7\" },\n            { name: \"Articles\", id: \"8\" },\n          ],\n          isView: false\n        }\n        \u002F\u002F Set initialization value\n        myFrame.contentWindow.postMessage(postMsg, \"*\")\n      }\n    \u003C\u002Fscript>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n## Customization 🛠\n\nThis component is aligned to the official flowable designer, which is the standard for implementing flowable's xml rules, and the terms used in it are all terminology from the official documentation. So this component is just a tool for programmers to model and export xml by themselves during the development phase, and it is wrong to try to customize the behavior of this modeler. Your own business should be developed separately to implement it.\n\nThe component will not upgrade the UI library or vue in the future, and regardless of library compatibility, integrating the modeler via an iframe is the easiest and correct way to do it.\n\n## Sponsor 🧡\n\n| :zap: **wechat**           | :zap: **alipay**           |\n| ------------------------ | ------------------------ |\n|\u003Cimg width=200 src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fgh\u002Fnayacco\u002Fcdn@master\u002Fblog\u002Fdonate_wechat.png\"\u002F>|\u003Cimg width=200 src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fgh\u002Fnayacco\u002Fcdn@master\u002Fblog\u002Fdonate_alipay.png\"\u002F>|\n\n- @bufegar ¥100\n- anonymous ¥20\n\n## License 📄\n\n[MIT](http:\u002F\u002Fopensource.org\u002Flicenses\u002FMIT)\n\nCopyright (c) 2020-present, charles\n","该项目是一个基于Vue和bpmn.io@7.0的Flowable工作流设计器。它提供了直观的图形界面，允许用户通过拖拽方式设计和编辑BPMN 2.0标准的工作流模型，并支持将设计保存为XML格式。技术上，它利用了Vue框架的组件化开发模式和bpmn.io强大的绘图功能来实现灵活且高效的流程设计体验。此外，项目还支持通过iframe方式集成到其他非Vue项目中，如jQuery或React应用，使得其在多种前端技术栈环境中都能方便地被采用。非常适合需要自定义业务流程管理系统的开发者使用。",2,"2026-06-11 03:20:19","top_language"]