Awesome

<div align="center"> <img width="474" height="102" src="https://github.com/bpmn-io/awesome-bpmn-io/raw/main/media/logo.svg?sanitize=true" alt="Awesome"> A curated list of <a href="https://bpmn.io">bpmn.io</a> related projects and resources. Created in the spirit of <a href="https://github.com/sindresorhus/awesome">awesome</a>. Do you want to contribute? Read <a href="#contribute">our guidelines</a> and <a href="https://github.com/bpmn-io/awesome-bpmn-io/edit/main/README.md">propose changes</a>. <a href="https://github.com/sindresorhus/awesome"><img src="https://cdn.statically.io/gh/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" alt="Awesome Badge" /></a>

</div>

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-copy-paste-example - An example illustrating how to copy and paste BPMN diagram elements across browser tabs
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

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-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
dmnlint - Validate DMN diagrams based on configurable lint rules
dmn-migrate - Migrate your DMN diagrams to the latest DMN version

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

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

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.