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.

View and edit DMN 1.3 diagrams in the browser.

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

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.

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();

• Demo
• Issues
• Examples
• Forum
• Changelog

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

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

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

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

Use under the terms of the bpmn.io license.