We are happy to announce a new version of our dmn-js toolkit. It allows you to create the decision requirements diagram (DRD) for your decisions and export them as DMN 1.1 XML. Using the palette and context pad you know from our other bpmn.io libraries like bpmn-js and cmmn-js you can create and append DRD elements like Input Data or Business Knowledge Models and model the relationships between these elements.
Definition Id and Name
The <definitions> element, that contains all DRD elements is not explicitely visible in the diagram, but carries important semantics, namely the id and name attribute. In bpmn-js we solve this by having a properties panel that allows to edit the id and name. As we do not have a properties panel for dmn-js, we decided to use another way to display and edit the id and label.
In the top-left corner of the diagram, you see the name and id of the definitions element. You can click on either of them and edit it to change it.
Palette and Context Pad
Core part of DRD modeling are the four DRD elements: Decisions, Input Data, Knowledge Sources and Business Knowledge Models. Every element can have a Text-Annotation attached to it. To create new elements you can use the palette on the left of the diagram and drag an element out of it.
To directly append an element to another element and to create connections between elements, you can click on an element and use the context pad.
For decisions, it is also possible to specify whether a decision is empty, has a decision table or a literal expression. You can do that using the replace menu in the context pad.
Switching between DRD and table view
The new release contains a new overlay for decisions in the DRD view. This overlay shows whether a decision is empty, has a decision table or a literal expression. Please note that these icons are not part of the dmn specification and will therefore not be included if you export the diagram as svg.
The overlay icons are also used to open the table or literal expression view of a decision. Double clicking a decision now edits the name.
Additionally we introduced an event that is fired when switching between the DRD and table view. Using the view.switch event, application developers can hook custom logic into the DRD Modeler and react to changes.
Namespace fix
In the dmn-js v0.7.0 release we updated the namespace to the official one. That has the side effect that all files that were created with an older version of the modeler could not be opened anymore. We solved this issue by fixing the namespace on import. With dmn-js v0.8.0, you can open your dmn xml files even if they have the old namespace.
When you export the file again, it will have the corrected, new namespace.
What else?
See all changes and bugfixes from this dmn-js release here.
Give us your feedback on this release via our forums. Make sure to follow us on Mastodon to stay up to date, too.
As always, get the latest dmn-js release via npm or bower.
Are you passionate about JavaScript, modeling, and the web?
Join Camunda and build modeling tools people 
.