bpmn-io / Bpmn Js Examples
Some examples how to use bpmn-js
Stars: ✭ 981
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Bpmn Js Examples
Butterfly
🦋Butterfly，A JavaScript/React/Vue2 Diagramming library which concentrate on flow layout field. (基于JavaScript/React/Vue2的流程图组件)
Stars: ✭ 2,343 (+138.84%)
Mutual labels: bpmn, svg
Flowchart.js
Draws simple SVG flow chart diagrams from textual representation of the diagram
Stars: ✭ 7,711 (+686.03%)
Mutual labels: svg
Wechat
🔥 iOS 利用MVVM + RAC + ViewModel-Based Navigation来搭建微信(WeChat 7.0.0+)的整体基本架构，以及实现微信朋友圈、通讯录、下拉小程序、搜索等主要功能，代码规范惊为天人、注释详解令人发指、细节处理精益求精、核心功能配备文档、接近98%还原度的原生App视觉体验，代码不多，注释多。（持续更新，敬请期待，欢迎Star和Fork…）
Stars: ✭ 870 (-11.31%)
Mutual labels: svg
Bpmn To Image
Convert BPMN 2.0 diagrams to PDF documents or PNG files.
Stars: ✭ 32 (-96.74%)
Mutual labels: bpmn
Gantt Elastic
Gantt Chart [ javascript gantt chart, gantt component, vue gantt, vue gantt chart, responsive gantt, project manager , vue projects ]
Stars: ✭ 869 (-11.42%)
Mutual labels: svg
Angled Edges
📐 Quickly create angled section edges using only Sass
Stars: ✭ 969 (-1.22%)
Mutual labels: svg
Ruby Gem Downloads Badge
Clean and simple gem downloads count badge, courtesy of http://shields.io/. You can checkout the application directly at the following URL:
Stars: ✭ 29 (-97.04%)
Mutual labels: svg
Processmaker
GLPI plugin that provides an interface with ProcessMaker (http://www.processmaker.com/)
Stars: ✭ 21 (-97.86%)
Mutual labels: bpmn
Librecms
Free Open Source Content Management System, based on PHP, Bootstrap and jQuery.
Stars: ✭ 12 (-98.78%)
Mutual labels: svg
Flag Icon Css
🎏 A curated collection of all country flags in SVG — plus the CSS for easier integration
Stars: ✭ 7,982 (+713.66%)
Mutual labels: svg
Spiffworkflow
A powerful workflow engine implemented in pure Python
Stars: ✭ 959 (-2.24%)
Mutual labels: bpmn
Jquery Mapael
jQuery plugin based on raphael.js that allows you to display dynamic vector maps
Stars: ✭ 981 (+0%)
Mutual labels: svg
bpmn-js Examples
This repository contains a number of examples showing how use and integrate bpmn-js into your applications.
Starter
- starter - Getting started with bpmn-js using our pre-packaged distribution.
Basic
- bundling - an example how to install bpmn-js via npm, use it in a node-style application and package it and the application code for the browser with Webpack.
- colors - Showcases different ways to add colors to your BPMN diagram.
- interaction - Listen to diagram events and react to them.
- overlays - Attach overlays to BPMN 2.0 diagrams to provide custom buttons or showing additional information.
- url-viewer - A simple url viewer for BPMN 2.0 process diagrams.
Intermediate
- modeler - A simple BPMN 2.0 modeler. Gains more features as time passes by.
- commenting - A simple commenting application build on top of BPMN 2.0 diagrams
- bpmn-properties - Read and write BPMN properties with bpmn-js.
- i18n - Use a custom translation module with bpmn-js.
- properties-panel - Add a properties panel and edit execution related BPMN 2.0 properties.
- theming - an example that showcases the different aspects of theming bpmn-js.
- modeling-api - How to create, connect and edit elements using the API.
Advanced
- bpmn-js-nyan - Model nyan cats instead of service tasks, resize elements and assign custom element colors.
- bpmn-js-task-priorities - persistent task colors, diagram interaction and custom extension elements demo.
- bpmn-js-in-color - Adding color support for BPMN based on the BPMN in Color proposal.
- bpmn-js-example-react-properties-panel - An example how to build a simple properties panel for bpmn-js using React.
- custom-bundle - How to build a custom version of bpmn-js
- bpmn-js-example-model-extension - An example of creating a model extension for bpmn-js.
- bpmn-js-example-custom-rendering - An example of creating custom rendering for bpmn-js.
- bpmn-js-example-custom-controls - An example of creating custom controls for bpmn-js.
- custom-elements - An introduction to custom elements, their use cases and implementation approaches.
- custom-modeling-rules - Add custom rules to the bpmn-js modeler.
- properties-panel-extension - An example showing how to extend the properties panel with custom controls.
Featuring Libraries
- minimap - Adding a minimap to bpmn-js.
- transaction-boundaries - Visualizing transaction boundaries in bpmn-js.
Integrations
- bpmn-js-example-angular - Showing a possible integration of the toolkit into an Angular application.
- vue-bpmn - Showing a possible integration of the toolkit into a Vue.js application.
- react-bpmn - Showing a possible integration of the toolkit into a React application.
Additional Resources
- bpmn-js Walkthrough - A full guide through the library and its underlying foundation.
- bpmn.io Awesome List - Links to great libraries and additional learning resources
License
MIT (unless noted otherwise)
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].