Starting with dmn-js@8 the library displays and saves DMN 1.3 diagrams only. To open older DMN files, migrate them before loading them with dmn-js.

dmn-js - DMN for the web

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:

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

try {
  const { warnings } = await viewer.importXML(xml);

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

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:

const viewer = new DmnJS();

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

// detach the panel
viewer.detach();

Resources

• Demo
• Issues
• Examples
• Forum
• Changelog

Building the Project

Perform the following steps to build the library, including running all tests:

npm install
npm run all

Run tests in individual packages:

npm run dev -- dmn-js

Related

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
• dmn-migrate: Migrate your DMN diagrams to DMN 1.3

Contributing

Please checkout our contributing guidelines if you plan to file an issue or pull request.

Code of Conduct

By participating to this project, please uphold to our Code of Conduct.

License

Use under the terms of the bpmn.io license.