Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

dmn-js-custom

bpmn-io49SEE LICENSE IN LICENSE11.0.10

A dmn toolkit and web modeler

dmn, dmn-js, toolkit, web modeler, modeler, modeling, decision modeling

readme

dmn-js - DMN for the web

Build Status

View and edit DMN 1.3 diagrams in the browser.

Installation

Use the library pre-packaged or include it via npm into your node-style web-application.

Usage

To get started, create a dmn-js instance and render DMN 1.3 diagrams in the browser:

var xml; // my DMN 1.3 xml
var viewer = new DmnJS({
  container: 'body'
});

viewer.importXML(xml, function(err) {

  if (err) {
    console.log('error rendering', err);
  } else {
    console.log('rendered');
  }
});

Checkout our examples for more supported usage scenarios.

Dynamic Attach/Detach

You may attach or detach the viewer dynamically to any element on the page, too:

var viewer = new DmnJS();

// attach it to some element
viewer.attachTo('#container');

// detach the panel
viewer.detach();

Resources

dmn-js builds on top of a few additional powerful tools:

  • dmn-moddle: Read / write support for DMN 1.3 XML
  • diagram-js: Diagram rendering and editing toolkit
  • table-js: Table rendering and editing toolkit

License

Use under the terms of the bpmn.io license.

changelog

Changelog

All notable changes to dmn-js are documented here. We use semantic versioning for releases.

Unreleased

_Note: Yet to be released changes appear here._

11.0.2

  • FIX: update simple mode button position in decision table view (#543)
  • FIX: consistently display decision entries in viewer and editor (#651)
  • DEPS: update to `table-js@7.2.0` (f472b1f)

11.0.1

  • FIX: correctly use inter-package imports (beaec56)

11.0.0

Breaking Changes

  • The toolkit now requires the ES6 Promise to be present. To support IE11 you must polyfill it.

10.3.0

  • FEAT: focus on row added via context menu (#638)

10.2.2

10.2.1

  • FIX: allow to add output if dmn:Input is missing (#635)

10.2.0

DRD

  • FEAT: enable connect tool for text annotation (#628)

10.1.0

General

DRD

  • FEAT: add hand tool (2249767f)
  • FIX: do not update association parent (96c2b113)

10.0.0

  • FEAT: make first row and column of decision table sticky (#606)
  • CHORE: bump to table-js@7
  • CHORE: bump to diagram-js@7

Breaking Changes

  • table element now wrapped in an additional container which might affect your styles

9.4.0

  • FEAT: allow decision name to take empty space (#579)
  • FEAT: improve rule focus behavior on ENTER (e17931fb)

9.3.2

  • FIX: use absolute position for InputSelect options (#590)

9.3.1

9.3.0

  • FEAT: enable context-menu for index cells (#555)
  • FEAT: enable context-menu for annotations (eb280e52)
  • FEAT: place project logo in bottom-right corner (#573)
  • FEAT: allow placeholder for ContentEditable (79369fbf)
  • FEAT: display input/output placeholders for decision table head (#552)
  • FIX: make event listeners return values (#568)
  • FIX: update bounds on shape resize for drd (c838fcc4)
  • FIX: clear clipboard after pasting (01da4bec)

9.2.1

  • FIX: display indicator within cell (#562)

9.2.0

  • FEAT: close select (i.a. decision table hit policy select) whenever there is user interaction outside of it (#546, #559)
  • FEAT: center decision table resize column hitbox (#554)
  • FIX: remove unnecessary click event cancel action (#558)

9.1.1

9.1.0

  • FEAT: align colors with Camunda Modeler (#542)
  • FIX: correct target indicator for drag and drop (#557)
  • FIX: correct layout in decision tables (a66d4140)
  • FIX: complete direct-editing after drill down (#547)

9.0.1

  • FIX: open input/output editing at correct position (#545)

9.0.0

  • FEAT: add decision table columns resizing (#500)
  • FEAT: move drag'n'drop handle to top left of decision table head cells (518bfd5)
  • FEAT: move hit policy explanations to title prop (be21448)
  • FEAT: wrap decision rule cells content (844a505)
  • FEAT: re-design decision table head (5734b49)
  • FEAT: re-design literal expression layout (#515)
  • FEAT: pass actual event to blur and focus handlers for EditableComponent (93c1d92)
  • FEAT: display FEEL as default expression language for inputs (#527)
  • FEAT: center placeholder for empty input rules (#533)
  • FEAT: set .empty class on EditableComponent (f52cb3e)
  • FIX: correctly display decision table bottom borders (#540)
  • FIX: correct title for add output button (#532)
  • FIX: set correct active view when views change (#528)
  • CHORE: bump to dmn-moddle@9.1.0
  • CHORE: bump to table-js@6.1.0

Breaking Changes

  • Dropped IE 11 support. Migrate to modern browsers or use 8.x series.
  • Literal expression and decision table viewers no longer allow to change decision ID. Use dmn-js-properties-panel or other custom module to allow that.

8.4.0-alpha.0

  • FEAT: rework input/output editing (#501)
  • FEAT: allow to provide custom label component for List (f99bae4)
  • FEAT: rework decision table head (#497, #498, #499)
  • FEAT: rework context menu for input/output columns (#495)
  • FIX: fire views.changed only on actual change (#388)

8.3.1

  • FIX: allow to connect text annotations in both directions (#519)
  • FIX: fix missing extension in camunda-bpmn-moddle import (#517)
  • CHORE: remove redundant waypoints update (#522)

8.3.0

  • FEAT(drd): change layout of information requirements (#492)
  • FEAT(drd): add auto-place feature (#492)
  • FEAT(drd): connect from new shape to source on append (#492)
  • CHORE(drd): bump to diagram-js@6.6.1

8.2.0

  • FEAT(drd): improve label editing (#487)
  • FEAT(decision-table): set FEEL as default expression language (#491)

8.1.0

  • FEAT(decision-table): add new rule on bottom rule <enter> (#345)
  • FEAT(drd): activate direct editing after text annotation create (#185)
  • FIX: update association's refs on element id change(#397)

8.0.2

  • CHORE: use min-dash#find as polyfill for Array.prototype.find

8.0.1

8.0.0

  • FEAT: migrate to DMN 1.3 (#452)
  • FEAT(drd): generate DMN standards compliant DI information
  • FEAT(drd): make alignment and distribution utilities available as editor actions
  • FIX(decision-table): correct placeholders shown in table footer
  • FIX(decision-table): do not show misleading - placeholder for output cells
  • FIX(drd): correctly handle source element ID change (#467)
  • CHORE: bump to `dmn-moddle@8.0.0`

Breaking Changes

  • Dropped DMN 1.1 support. To keep opening DMN 1.1 diagrams those must be migrated to DMN 1.3 before passing them over to the toolkit. Cf. release blog post, DMN compatibility example.
  • Grapical information is now stored using standardized DMNDI and support for the DI vendor extension is removed.
  • DI waypoints of new dmn:Association elements no longer point to middle of source and target and have same coordinates as connection waypoints.
  • Renamed updateProperties command in dmn-js-drd to element.updateProperties to align with other libraries

7.5.0

  • FEAT(decision-table): add new rule on bottom rule <enter> (#345)
  • FEAT(drd): activate direct editing after text annotation create (#185)
  • FIX: update association's refs on element id change(#397)

7.4.4

  • CHORE: use min-dash#find as polyfill for Array.prototype.find

7.4.3

  • FIX(decision-table): correct placeholders shown in table footer

7.4.2

  • FIX(decision-table): do not show misleading - placeholder for output cells

7.4.1

  • FIX(drd): correctly handle source element ID change (#467)

7.4.0

  • CHORE(drd): make alignment and distribution utilities available as editor actions

8.0.0-alpha.0

  • FEAT: migrate to DMN 1.3 (#452)
  • FEAT(drd): bind current diagram to dmn:Definitions#di
  • CHORE: bump to `dmn-moddle@8.0.0`

Breaking Changes

  • Dropped DMN 1.1 support. Migration to DMN 1.3 necessary (c.f. @bpmn-io/dmn-migrate).
  • DrdFactory uses dmndi namespace instead of biodi.
  • DI waypoints of new dmn:Association no longer point to middle of source and target and have same coordinates as connection waypoints.

7.3.0

  • FEAT(drd): add grid snapping
  • FEAT(drd): add element to element snapping
  • FEAT(drd): add keyboard selection move
  • FEAT(drd): add alignment and distribution utilities
  • FEAT(decision-table): add i18n support (#446)
  • CHORE: bump to `diagram-js@6.3.0`

7.2.1

  • FIX(drd): fix serialization of biodi:Waypoint elements (#437)
  • FIX(drd): allow connections to be moved with DMN elements (#438)
  • FIX(drd): do not move biodi:Edge elements to text annotation targets (#436)
  • FIX(drd): replace connection on reconnect (#436)
  • FIX(drd): correct append behavior (#439)
  • CHORE: bump to `diagram-js@6.0.2`

7.2.0

  • FEAT(drd): inverse allow inverse connections
  • FEAT(decision-table): only allow standardized hit policy values
  • FEAT(decision-table): preserve aggregation when COLLECT is selected again
  • FEAT(decision-table): allow aggreation to be cleared from dropdown (#370, #389)
  • FEAT(decision-table): use JUEL as the default input expression language (#405)
  • FIX(drd): correct connection rules
  • FIX(decision-table): correctly handle value erasing (#826)
  • FIX(decision-table): correctly display simple mode edit control when cell selection changes (#341)
  • FIX(decision-table): do not close input on user selection (#421)
  • FIX(decision-table): do not navigate when clearing pre-defined hints (#431)
  • FIX(decision-table): prevent context menu jump in larger tables
  • FIX(decision-table): do not close context on user selection
  • CHORE: bump to diagram-js@6
  • CHORE: bump to `table-js@6.0.3`

7.1.0

  • FEAT(decision-table): add background color to even table rows (#404)

7.0.1

  • FIX(decision-table): fix empty table layout on Firefox (#380)

7.0.0

  • FEAT(drd): add connection previews
  • CHORE(project): upgrade to babel@7
  • CHORE(project): bump to diagram-js@4

6.3.3

  • FEAT(drd): consistently layout connection on reconnect start and end (#398)
  • FIX(drd): prevent HTML injection in direct editing and search

6.3.2

  • FIX(project): fix npmignore

6.3.1

  • FIX(project): include core directory in npm packages

6.3.0

  • FEAT(decision-table): show input and output label first in editors (#346)

6.2.3

  • CHORE: correct dmn-js-shared repository meta-data

6.2.2

  • FIX: properly destroy individual viewers on dmn-js destruction (#392)

6.2.1

  • CHORE: bump tiny-svg dependency to circumvent MS Edge bug
  • CHORE: bump selection-ranges dependency

6.2.0

  • CHORE: emit attach and detach events

6.1.0

  • CHORE: bump to diagram-js@3

6.0.0

  • FEAT: add ability to move canvas and selected elements with keyboard arrows
  • FEAT: support SHIFT modifier to move elements / canvas with keyboard arrows at accelerated speed
  • FEAT: use Ctrl/Cmd modifier key to move the canvas via keyboard arrows
  • CHORE: bind DRD editor actions and keyboard shortcuts for explicitly added features only
  • CHORE: update to diagram-js@3.0.0

Breaking Changes

  • EditorActions / Keyboard do not pull in features implicitly anymore. If you roll your own DRD editor, include features you would like to ship with manually to provide the respective actions / keyboard bindings (a68c9b68)

5.2.0

5.1.2

  • FIX: update ChangeSupport id binding on <element.updateId> (#367)

5.1.1

  • FIX: correct focus handling in IE11 (#361)

5.1.0

  • FEAT: emit saveXML life-cycle events

5.0.0

Republished v5.0.0-1 as stable version.

5.0.0-1

  • FIX: don't distribute test assets

5.0.0-0

  • FEAT: transpile to ES5 + ES modules
  • CHORE: bump to table-js@5
  • CHORE: bump to diagram-js@2

4.4.0

  • FEAT(decision-table): expose data-row-id and data-col-id in Viewer (#357)

4.3.1

4.3.0

  • FEAT(drd): add ability to intercept drill-down via event listener (#353)
  • CHORE: bump to `diagram-js@1.4.0`
  • FIX(decision-table): correct context menu positioning in scrolling tables

4.2.1

  • FIX(decision-table): close input editor on ENTER

4.2.0

  • CHORE: bump to `diagram-js@1.3.0`
  • FIX(drd): label editing now correctly activates on element creation (#339)
  • FIX(decision-table): be able to edit inputs without text (#347)

4.1.0

  • FEAT: improve copy/paste interaction with native browser behavior
  • FEAT: improve selection with copy-paste
  • FEAT: add ability to navigate decision properties in decision table via keyboard
  • FIX: fix copy/paste not being possible in decision table cells and editors
  • FIX: escape element ids in CSS selectors

4.0.0

Breaking Changes

  • FIX: deconflict styles by putting shared declarations into dmn-js-shared.css

3.0.1

dmn-js-decision-table

  • FIX: don't close editor on allowed value add

3.0.0

Breaking Changes

We've migrated all remaining parts of dmn-js as well as it's foundations to ES modules:

Other Improvements

  • FEAT: add keyboard controls to decision table input selects
  • FEAT: add generic keyboard controls to context-menu like components
  • FEAT: add ability to open decision table without input
  • FEAT: add ability to add input if there are no inputs
  • CHORE: improve size of pre-built bundles
  • CHORE: cleanup styles
  • FIX: improve css by converting HEX to RGBA values

...

Check git log for earlier history.