This example showcases how to use the pre-packaged version(s) of dmn-js.
We provide pre-packaged versions of our toolkit via unpkg.
This example shows how to embed these resources to integrate a DMN viewer or editor into a website.
Download or simply include the relevant dependencies into your website:
<link rel="stylesheet" href="https://unpkg.com/dmn-js@14.1.5/dist/assets/dmn-js-drd.css">
<link rel="stylesheet" href="https://unpkg.com/dmn-js@14.1.5/dist/assets/dmn-js-decision-table.css">
<link rel="stylesheet" href="https://unpkg.com/dmn-js@14.1.5/dist/assets/dmn-js-literal-expression.css">
<link rel="stylesheet" href="https://unpkg.com/dmn-js@14.1.5/dist/assets/dmn-js-shared.css">
<link rel="stylesheet" href="https://unpkg.com/dmn-js@14.1.5/dist/assets/dmn-font/css/dmn.css">
<script src="https://unpkg.com/dmn-js@14.1.5/dist/dmn-viewer.development.js"></script>Download the complete viewer example.
<link rel="stylesheet" href="https://unpkg.com/dmn-js@14.1.5/dist/assets/diagram-js.css">
<link rel="stylesheet" href="https://unpkg.com/dmn-js@14.1.5/dist/assets/dmn-js-shared.css">
<link rel="stylesheet" href="https://unpkg.com/dmn-js@14.1.5/dist/assets/dmn-js-drd.css">
<link rel="stylesheet" href="https://unpkg.com/dmn-js@14.1.5/dist/assets/dmn-js-decision-table.css">
<link rel="stylesheet" href="https://unpkg.com/dmn-js@14.1.5/dist/assets/dmn-js-decision-table-controls.css">
<link rel="stylesheet" href="https://unpkg.com/dmn-js@14.1.5/dist/assets/dmn-js-literal-expression.css">
<link rel="stylesheet" href="https://unpkg.com/dmn-js@14.1.5/dist/assets/dmn-font/css/dmn.css">
<script src="https://unpkg.com/dmn-js@14.1.5/dist/dmn-modeler.development.js"></script>Download the complete modeler example.
The library is bundled as an UMD bundle and binds itself to the global DmnJS
variable.
const dmnJS = new DmnViewer({
container: '#canvas'
});
try {
const { warnings } = await dmnJS.importXML(xml);
if (warnings.length) {
console.log('import with warnings', warnings);
} else {
console.log('import successful');
}
// access active viewer (might be an editor, too!)
dmnJS
.getActiveViewer()
.get('canvas')
.zoom('fit-viewport');
} catch (err) {
console.log('something went wrong:', err);
}MIT