README.md

A curated list of bpmn.io related projects and resources. Created in the spirit of awesome.

Do you want to contribute? Read our guidelines and propose changes.

Contents

• Learning Resources
• Libraries
• Extensions
• Integrations
• Apps
• Talks

Learning Resources

• bpmn-js-examples - Large list of bpmn-js usage examples
• dmn-js-examples - Set of dmn-js usage examples
• form-js-examples - A collection of form-js examples
• bpmn-js walkthrough - An overview over bpmn-js, usage scenarios and its underlying architecture
• bpmn.io demo - A getting started playground into the bpmn-io toolkit
• bpmn.io community forum - A friendly place to ask about all things related to our project

Libraries

Core

• bpmn-js - BPMN 2.0 process and collaboration diagram renderer/editor
• cmmn-js - CMMN 1.2 case diagram renderer/editor
• dmn-js - DMN DRD, decision table and literal expression renderer/editor
• form-js - View and visually edit JSON-based forms

Community Maintained

• chor-js - BPMN 2.0 choreography diagram renderer/editor

Infrastructure / Foundation

• bpmn-moddle - Read, modify and write BPMN 2.0 diagrams from JavaScript
• dmn-moddle - Read, modify and write DMN 1.3 diagrams from JavaScript
• diagram-js - A toolbox for displaying and modifying diagrams on the web

Extensions

diagram-js

• diagram-js-origin - Render a canvas origin cross
• diagram-js-minimap - Render a minimap of your diagram
• diagram-js-direct-editing - A direct editing box for diagram-js
• diagram-js-grid - A visual grid for diagram-js

bpmn-js

• bpmn-js-color-picker - Color your BPMN elements via the context pad
• bpmn-js-token-simulation - Simulate tokens running through your process
• bpmn-js-sketchy - A sketchy renderer for BPMN diagrams
• bpmn-js-nyan - An extension that adds custom resize rules, theming and colors
• bpmn-js-embedded-comments - Add, edit, and persist comments on BPMN diagrams
• bpmn-js-cli - Model diagrams without the mouse
• bpmn-js-native-copy-paste - Copy and paste across bpmn-js instances, browser tabs and applications - using the system clipboard
• bpmn-js-honkify - Integrates honkify inspired duck sounds into bpmn-js
• bpmn-js-task-resize - An extension to allow tasks being resizable
• bpmn-js-disable-collapsed-subprocess - An extension which disables modeling collapsed subprocess via replace menu
• bpmn-js-collapse-subprocess - An extension that re-enables to collapse sub process via replace menu
• bpmn-js-create-append-anything - Extends bpmn-js with a create and append anything modeling experience.
• camunda-transaction-boundaries - Visualize transaction boundaries, applied by the Camunda workflow engine

dmn-js

• dmnlint - Validate DMN diagrams based on configurable lint rules
• dmn-migrate - Migrate your DMN diagrams to the latest DMN version
• dmn-js-simulation - Simulate DMN decision tables and DRDs inside a dmn-js modeler

Misc

• @bpmn-io/add-exporter - A helper to inject exporter meta-data into saved BPMN, CMMN and DMN diagrams
• @bpmn-io/align-to-origin - Aligns your diagrams to the coordinate origin, manually triggered or on diagram save
• bpmn-js-differ - A semantic diff tool for BPMN diagrams
• bpmn-js-headless - Execute bpmn-js in headless environments
• bpmn-font - A BPMN 2.0 icon font
• bpmn-to-image - Transform BPMN diagrams to images from the command line
• bpmn-to-visio - Convert BPMN 2.0 diagrams to Microsoft Visio (.vsdx) files, preserving layout from bpmn.io
• bpmn-js-i18n - Internationalization resources for bpmn-js
• bpmnlint - An extensible and configurable BPMN 2.0 diagram validator
• eslint-plugin-bpmn-io - Common lint rules for bpmn.io projects

Integrations

• react-bpmn - Render BPMN 2.0 diagrams in a React application
• vue-bpmn - Render BPMN 2.0 diagrams in a Vue.js application
• bpmn-js-example-angular - An integration of bpmn-js with Angular
• svelte-bpmn - Render BPMN 2.0 diagrams in a Svelte application
• jupyterlab-bpmn - Render BPMN 2.0 diagrams in JupyterLab
• jupyterlab-dmn - Render DMN diagrams in JupyterLab
• BPMN.io for ECA - Integrate BPMN.io to create, review and maintain ECA models in Drupal
• slidev-addon-bpmn - Display BPMN 2.0 diagrams in Slidev presentations.
• slidev-addon-dmn - Display DMN diagrams in Slidev presentations.

Apps

• Cawemo - A web-based, collaborative modeling solution that uses bpmn-js for process modeling
• Camunda Desktop Modeler - Implementation tool for Camunda and an integrated modeling solution for BPMN, DMN, and Forms.
• Camunda Web Modeler - Web-based collaborative modeling and implementation tool powering Camunda SaaS
• bpmn-io-vs-code - Display and edit BPMN diagrams in VS Code using bpmn.io tools
• postit-js - Create Post-it boards on a canvas editor
• Duckflow - Lightweight BPMN process designer application, based on bpmn.io
• bpmn-diff-bitbucket-plugin - Bitbucket Server plugin for BPMN file versions visual comparison during pull-requests
• STORMBPMN - A web-based, collaborative modeling solution with BPMN validation, classic folder view for huge amount of diagrams
• Obsidian BPMN Plugin - A BPMN Viewer / Editor based on bpmn-js for Obsidian
• Miragon BPMN Modeler - BPMN and DMN modeler shipping as a VS Code extension and standalone desktop app; supports Camunda 7, Camunda 8, Operaton, and CIB seven.

Talks

• Roll your own BPMN editor - An introduction to bpmn-js and its friends
• Making of token simulation - A dive into bpmn-js extensibility and the inner workings of bpmn-js-token-simulation
• Taking Templates to the limit - A hands-on demo on how to create Element Templates in your favorite IDE with JSON Schema

Contribute

Would you like to contribute to this list? Propose your addition.

This awesome list provides projects and resources that heavily feature the bpmn.io project. We do not accept contributions where using our libraries is merely a footnote.

License