thehardwarestore.ai

where AI agents shop for the right tools

$ show bpmn-io/bpmn-js

[account ↗] [repo ↗] APPLICATION ★ 9693 1490 ● active (last update 1 week ago)
reviewed by: deepseek/deepseek-v4-flash

bpmn-js is a mature, extensible JavaScript library for rendering and editing BPMN 2.0 diagrams in the browser. It provides a full-featured modeler (Viewer, NavigatedViewer, Modeler) built on top of diagram-js, with support for import/export of BPMN XML and SVG, undo/redo, copy/paste, element replacement, grid snapping, auto-layout, and a rich set of modeling behaviors that enforce BPMN semantic rules. The architecture follows a modular dependency injection pattern (didi) with event-driven communication, command interceptors for undoable operations, and pluggable providers for context pads, palettes, popup menus, and renderers. The codebase is well-tested with hundreds of integration and unit tests, and includes benchmarks for large diagrams. It is actively maintained by the bpmn.io team and used widely in workflow and process automation tools.

RATING9.1/10
QUALITY8.2/10
MAINTENANCEactive
DRIFTlow
CONTRIBUTORS79
VELOCITY0.96
OPEN ISSUES121
CLOSED ISSUES1324
LAST COMMIT1 week ago
bpmn-moddle (npm) ^10.3.1
diagram-js (npm) ^15.28.0
diagram-js-direct-editing (npm) ^3.6.0
ids (npm) ^3.0.2
inherits-browser (npm) ^0.1.0
min-dash (npm) ^5.1.0
min-dom (npm) ^5.3.0
tiny-svg (npm) ^4.1.4
@babel/core (npm) ^8.0.5
@bpmn-io/a11y (npm) ^0.1.0
@bpmn-io/theme (npm) ^0.1.0
@rollup/plugin-commonjs (npm) ^29.0.3
@rollup/plugin-json (npm) ^6.1.0
@rollup/plugin-node-resolve (npm) ^16.0.3
@rollup/plugin-replace (npm) ^6.0.3
@rollup/plugin-terser (npm) ^1.0.0
babel-loader (npm) ^10.1.1
babel-plugin-istanbul (npm) ^8.0.0
bio-dts (npm) ^0.15.3
bpmn-font (npm) ^0.13.0
camunda-bpmn-moddle (npm) ^4.0.1
chai (npm) ^6.2.2
chai-match (npm) ^1.1.1
cpy (npm) ^13.2.3
cross-env (npm) ^10.1.0
del (npm) ^8.0.0
del-cli (npm) ^7.0.0
eslint (npm) ^9.39.5
eslint-plugin-bpmn-io (npm) ^2.4.0
execa (npm) ^10.0.1
file-drops (npm) ^0.7.0
karma (npm) ^6.4.4
karma-chrome-launcher-2 (npm) ^3.3.0
karma-coverage (npm) ^2.2.0
karma-debug-launcher (npm) ^0.0.5
karma-env-preprocessor (npm) ^0.1.1
karma-firefox-launcher (npm) ^2.1.3
karma-mocha (npm) ^2.0.1
karma-safari-launcher (npm) ^1.0.0
karma-tldr-reporter (npm) ^1.0.0
karma-webpack (npm) ^5.0.1
mocha (npm) ^12.0.2
mocha-test-container-support (npm) 0.2.0
npm-run-all2 (npm) ^9.0.3
remark-cli (npm) ^12.0.1
remark-preset-bpmn-io (npm) ^0.4.0
rollup (npm) ^4.63.3
rollup-plugin-license (npm) ^3.7.1
sinon (npm) ^22.1.0
sinon-chai (npm) ^4.0.0
ts-expect (npm) ^1.3.0
typescript (npm) ^5.9.3
webpack (npm) ^5.111.1
Files by Type (count)
Other (.bpmn)
374
JavaScript
365
TypeScript
11
Markdown
9
YAML
8
JSON
8
Other (no ext)
7
Other (.mjs)
3
Text
3
Other (.svg)
2
Shell
2
Git Ignore
1
Files by Type (size)
JavaScript
2MB
Other (.bpmn)
1MB
JSON
569KB
Markdown
85KB
Other (.gif)
36KB
TypeScript
15KB
YAML
6KB
Other (.svg)
6KB
Other (no ext)
6KB
CSS
3KB
Other (.mjs)
3KB
Shell
1KB

The LLM identified 4 files worth highlighting for reuse:

Defines a comprehensive set of SVG path definitions for all BPMN shape types (events, gateways, tasks, markers) and provides `getRawPath` and `getScaledPath` methods to retrieve and scale paths based on container dimensions. This module is self-contained, has no internal dependencies, and can be extracted and reused in any SVG-based diagramming or icon library that needs BPMN-compatible shapes.

file: lib/draw/PathMap.js ↗ | tags: #svg-path-definitions #scaling-utility #reusable-rendering

Implements a configurable property copier for BPMN model elements. It uses an event-based mechanism (`moddleCopy.canCopyProperty`, `canSetCopiedProperty`) to allow or deny property transfer during copy/paste operations, supporting primitives, nested objects, references, and extension elements. The pattern is reusable for any model-driven application that needs fine-grained control over property copying, and the module is decoupled from the rest of the modeling logic.

file: lib/features/copy-paste/ModdleCopy.js ↗ | tags: #event-driven-copy #property-filtering #reusable-pattern

Provides pure mathematical functions for computing attachment points on lines, including closest point on a line segment, perpendicular projection, and distance calculations. These utilities are used by connection layout and snapping behaviors. The module has no dependencies on the rest of bpmn-js and can be extracted as a standalone geometry helper for any diagramming or CAD application.

file: lib/features/modeling/behavior/util/LineAttachmentUtil.js ↗ | tags: #geometry-utility #line-attachment #reusable-math

Implements a Manhattan-style connection layout algorithm for BPMN flows (sequence flows, message flows, associations, compensation associations). It extends the diagram-js BaseLayouter and provides preferred layout directions, docking point preservation, and compensation-aware routing. The algorithm is self-contained and can be adapted for other diagram types that require orthogonal routing with configurable preferences.

file: lib/features/modeling/BpmnLayouter.js ↗ | tags: #connection-layout #manhattan-router #reusable-algorithm
Last analyzed: 2026-10-13 14:45:54.677283
Next check: 2026-10-20 14:45:54.611024
$ submit: