This example showcases how add dmn-js into a node-style application and bundle it for the browser using Webpack.
This example uses dmn-js to embed the dish-decision diagram into a web application.
Install dmn-js via npm
npm install --save dmn-js
Use it in your application
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');
}
dmnJS
.getActiveViewer()
.get('canvas')
.zoom('fit-viewport');
} catch (err) {
console.log('something went wrong:', err);
}Add an appropriate loader that understands the ES modules that dmn-js ships with.
Webpack, as seen in the example understands ES modules out of the box and will combine the sources to a cross-browser understandable ES5 bundle.
Bundle the src/app.js file for the browser with webpack:
webpack ./src/app.js -o public/app.bundled.js --mode development
To learn about more bundling options, checkout the webpack-cli documentation.
Note: You may use another bundling setup, too. Options include, among others, Rollup or Browserify + Babelify.
Initialize the project dependencies via
npm install
To create the sample distribution in the public folder run
npm run all
MIT