├── README.md ├── bundling ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ └── index.html ├── resources │ ├── dish-decision.dmn │ └── screenshot.png ├── src │ └── app.js └── webpack.config.js ├── dmn-compatibility ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── app.bundled.js │ └── index.html ├── resources │ ├── diagram11.dmn │ └── diagram13.dmn ├── src │ └── app.js └── webpack.config.js ├── modeler ├── README.md ├── diagram.dmn ├── modeler.html ├── modeler.png └── style.css ├── pre-packaged └── README.md ├── simple-bower └── README.md ├── simple-commonjs └── README.md └── starter ├── README.md ├── diagram.dmn ├── modeler.html ├── viewer.html └── viewer.png /README.md: -------------------------------------------------------------------------------- 1 | # dmn-js Examples 2 | 3 | This repository contains a number of examples showing how use and integrate 4 | [dmn-js](https://github.com/bpmn-io/dmn-js) it into your applications. 5 | 6 | 7 | ## Starter 8 | 9 | * [starter](./starter) - Getting started with [dmn-js](https://github.com/bpmn-io/dmn-js) using our [pre-packaged distribution](./pre-packaged). 10 | 11 | ## Basic 12 | 13 | * [bundling](./bundling) - an example how to install dmn-js via [npm](http://npmjs.org), use it in a node-style application and package it and the application code for the browser with [Webpack](https://webpack.js.org). 14 | 15 | ## Intermediate 16 | 17 | * [modeler](./modeler) - an example how to build a tabbed modeler using the dmn-js API. 18 | * [dmn-compatibility](./dmn-compatibility) - an example of using [dmn-js](https://github.com/bpmn-io/dmn-js) and [dmn-migrate](https://github.com/bpmn-io/dmn-migrate) to open DMN 1.1, 1.2 and 1.3 diagrams. 19 | 20 | ## License 21 | 22 | MIT _(unless noted otherwise)_ 23 | -------------------------------------------------------------------------------- /bundling/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | public/app.bundled.js 3 | tmp/ -------------------------------------------------------------------------------- /bundling/README.md: -------------------------------------------------------------------------------- 1 | # dmn-js bundling example 2 | 3 | This example showcases how add [dmn-js](https://github.com/bpmn-io/dmn-js) 4 | into a node-style application and bundle it for the browser using 5 | [Webpack](https://webpack.js.org). 6 | 7 | 8 | ## About 9 | 10 | This example uses dmn-js to embed the [dish-decision](https://demo.bpmn.io/dmn/s/check-order) diagram into a web application. 11 | 12 | ![example screenshot](./resources/screenshot.png "Screenshot of the example application") 13 | 14 | 15 | ## Usage Summary 16 | 17 | Install dmn-js via [npm](http://npmjs.org) 18 | 19 | ``` 20 | npm install --save dmn-js 21 | ``` 22 | 23 | Use it in your application 24 | 25 | ```javascript 26 | const dmnJS = new DmnViewer({ 27 | container: '#canvas' 28 | }); 29 | 30 | try { 31 | const { warnings } = await dmnJS.importXML(xml); 32 | 33 | if (warnings.length) { 34 | console.log('import with warnings', warnings); 35 | } else { 36 | console.log('import successful'); 37 | } 38 | 39 | dmnJS 40 | .getActiveViewer() 41 | .get('canvas') 42 | .zoom('fit-viewport'); 43 | } catch (err) { 44 | console.log('something went wrong:', err); 45 | } 46 | ``` 47 | 48 | Add an appropriate loader that understands the ES modules that [dmn-js](http://github.com/bpmn-io/dmn-js) ships with. 49 | 50 | Webpack, as seen in [the example](./webpack.config.js) understands ES modules out of the box and will combine the sources to a cross-browser understandable ES5 bundle. 51 | 52 | Bundle the `src/app.js` file for the browser with webpack: 53 | 54 | ``` 55 | webpack ./src/app.js -o public/app.bundled.js --mode development 56 | ``` 57 | 58 | To learn about more bundling options, checkout the [webpack-cli documentation](https://webpack.js.org/api/cli/). 59 | 60 | __Note:__ You may use another bundling setup, too. Options include, among others, Rollup or Browserify + Babelify. 61 | 62 | 63 | ## Building the Example 64 | 65 | Initialize the project dependencies via 66 | 67 | ``` 68 | npm install 69 | ``` 70 | 71 | To create the sample distribution in the `public` folder run 72 | 73 | ``` 74 | npm run all 75 | ``` 76 | 77 | 78 | ## License 79 | 80 | MIT 81 | -------------------------------------------------------------------------------- /bundling/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dmn-js-example-bundling", 3 | "version": "0.0.0", 4 | "description": "An example how to use dmn-js with npm + webpack", 5 | "main": "app/app.js", 6 | "scripts": { 7 | "all": "run-s bundle open", 8 | "bundle": "webpack", 9 | "bundle:watch": "webpack -w", 10 | "open": "open-cli ./public/index.html", 11 | "dev": "npm run bundle:watch" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "https://github.com/bpmn-io/dmn-js-examples" 16 | }, 17 | "keywords": [ 18 | "dmn-js-example" 19 | ], 20 | "author": { 21 | "name": "Nico Rehwaldt", 22 | "url": "https://github.com/nikku" 23 | }, 24 | "contributors": [ 25 | { 26 | "name": "bpmn.io contributors", 27 | "url": "https://github.com/bpmn-io" 28 | } 29 | ], 30 | "license": "MIT", 31 | "devDependencies": { 32 | "npm-run-all": "^4.1.5", 33 | "open-cli": "^7.0.0", 34 | "raw-loader": "^4.0.0", 35 | "webpack": "^5.93.0", 36 | "webpack-cli": "^4.7.2" 37 | }, 38 | "dependencies": { 39 | "dmn-js": "^17.2.0" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /bundling/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 27 | 28 | 32 | 33 | npm/browserify example - dmn-js-examples 34 | 35 | 36 | 37 |

Dish Decision Viewer

38 | 39 |
40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /bundling/resources/dish-decision.dmn: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | season 30 | 31 | 32 | 33 | 34 | guestCount 35 | 36 | 37 | 38 | 39 | 40 | "Winter" 41 | 42 | 43 | <= 8 44 | 45 | 46 | "Spareribs" 47 | 48 | 49 | 50 | 51 | "Winter" 52 | 53 | 54 | > 8 55 | 56 | 57 | "Pasta" 58 | 59 | 60 | 61 | 62 | "Summer" 63 | 64 | 65 | > 10 66 | 67 | 68 | "Light salad" 69 | 70 | 71 | 72 | 73 | "Summer" 74 | 75 | 76 | <= 10 77 | 78 | 79 | "Beans salad" 80 | 81 | 82 | 83 | 84 | "Spring" 85 | 86 | 87 | < 10 88 | 89 | 90 | "Stew" 91 | 92 | 93 | 94 | 95 | "Spring" 96 | 97 | 98 | >= 10 99 | 100 | 101 | "Steak" 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | temperature 114 | 115 | 116 | 117 | 118 | 119 | >30 120 | 121 | 122 | "Summer" 123 | 124 | 125 | 126 | 127 | <10 128 | 129 | 130 | "Winter" 131 | 132 | 133 | 134 | 135 | [10..30] 136 | 137 | 138 | "Spring" 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | dayType 154 | 155 | 156 | 157 | 158 | 159 | "Weekday" 160 | 161 | 162 | 4 163 | 164 | 165 | 166 | 167 | "Holiday" 168 | 169 | 170 | 10 171 | 172 | 173 | 174 | 175 | "Weekend" 176 | 177 | 178 | 15 179 | 180 | 181 | 182 | 183 | 184 | Week day or week end 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | -------------------------------------------------------------------------------- /bundling/resources/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bpmn-io/dmn-js-examples/8b3b95d2d49d48396ff92a8d2d6f9b40845a6b3c/bundling/resources/screenshot.png -------------------------------------------------------------------------------- /bundling/src/app.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import dishDecision from '../resources/dish-decision.dmn'; 4 | 5 | import DmnViewer from 'dmn-js'; 6 | 7 | 8 | async function asyncImportXml(xml) { 9 | const dmnJS = new DmnViewer({ 10 | container: '#canvas' 11 | }); 12 | 13 | try { 14 | const { warnings } = await dmnJS.importXML(xml); 15 | 16 | if (warnings.length) { 17 | console.log('import with warnings', warnings); 18 | } else { 19 | console.log('import successful'); 20 | } 21 | 22 | dmnJS 23 | .getActiveViewer() 24 | .get('canvas') 25 | .zoom('fit-viewport'); 26 | } catch (err) { 27 | console.log('something went wrong:', err); 28 | } 29 | } 30 | 31 | asyncImportXml(dishDecision); 32 | -------------------------------------------------------------------------------- /bundling/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | 3 | module.exports = { 4 | mode: 'development', 5 | entry: './src/app.js', 6 | output: { 7 | path: path.resolve(__dirname, 'public'), 8 | filename: 'app.bundled.js' 9 | }, 10 | module: { 11 | rules: [ 12 | { 13 | test: /\.dmn$/, 14 | use: { 15 | loader: 'raw-loader' 16 | } 17 | } 18 | ] 19 | } 20 | }; -------------------------------------------------------------------------------- /dmn-compatibility/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /dmn-compatibility/README.md: -------------------------------------------------------------------------------- 1 | # DMN Compatibility Example 2 | 3 | __Starting with `dmn-js@8` the library opens and produces DMN 1.3 files, only.__ 4 | 5 | This example shows how [dmn-js](https://github.com/bpmn-io/dmn-js) and [dmn-migrate](https://github.com/bpmn-io/dmn-migrate) can be combined to consume older DMN files (DMN 1.1, DMN 1.2), too. To achieve this, these files are migrated to valid DMN 1.3 diagrams before they get opened in the DMN toolkit. 6 | 7 | ```javascript 8 | import { migrateDiagram } from '@bpmn-io/dmn-migrate'; 9 | 10 | import DmnModeler from 'dmn-js/lib/Modeler'; 11 | 12 | const dmnModeler = new DmnModeler({ 13 | container: '#canvas' 14 | }); 15 | 16 | // (1) import DMN diagram 17 | async function importXML(xml) { 18 | 19 | // (1.1) migrate to DMN 1.3 if necessary 20 | xml = await migrateDiagram(xml); 21 | 22 | // (1.2) import DMN 1.3 diagram 23 | try { 24 | await dmnModeler.importXML(xml); 25 | } catch (err) { 26 | console.log(err); 27 | } 28 | } 29 | 30 | await importXML(someDMN_11XML); 31 | ``` 32 | 33 | ## Usage 34 | 35 | ```bash 36 | npm i && npm run all 37 | ``` 38 | 39 | ## License 40 | 41 | MIT 42 | -------------------------------------------------------------------------------- /dmn-compatibility/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dmn-compatibility", 3 | "version": "0.0.0", 4 | "description": "A DMN compatibility example", 5 | "scripts": { 6 | "all": "run-s bundle open", 7 | "bundle": "webpack", 8 | "bundle:watch": "webpack -w", 9 | "open": "open-cli ./public/index.html", 10 | "dev": "npm run bundle:watch" 11 | }, 12 | "author": "Philipp Fromme", 13 | "license": "MIT", 14 | "dependencies": { 15 | "@bpmn-io/dmn-migrate": "^0.4.2", 16 | "dmn-js": "^17.2.0", 17 | "file-drops": "^0.4.0" 18 | }, 19 | "devDependencies": { 20 | "npm-run-all": "^4.1.5", 21 | "open-cli": "^7.0.0", 22 | "raw-loader": "^4.0.0", 23 | "webpack": "^5.93.0", 24 | "webpack-cli": "^4.7.2" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /dmn-compatibility/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /dmn-compatibility/resources/diagram11.dmn: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | return getSeason(); 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | guestCount 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 8]]> 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 10]]> 115 | 116 | 117 | Best for the hot season! 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | temperature 176 | 177 | 178 | 179 | 180 | 181 | 30]]> 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | [10..30] 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | dayType 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 4 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 10 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 15 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | foobar 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | -------------------------------------------------------------------------------- /dmn-compatibility/resources/diagram13.dmn: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | return getSeason(); 30 | 31 | 32 | "Winter","Summer","Spring" 33 | 34 | 35 | 36 | 37 | guestCount 38 | 39 | 40 | 41 | 42 | "Spareribs","Pasta","Light salad","Beans salad","Stew","Steak" 43 | 44 | 45 | 46 | 47 | if 48 | foo 49 | then 50 | "Winter" 51 | else 52 | "Summer" 53 | 54 | 55 | <= 8 56 | 57 | 58 | "Spareribs" 59 | 60 | 61 | 62 | 63 | "Winter" 64 | 65 | 66 | > 8 67 | 68 | 69 | "Pasta" 70 | 71 | 72 | 73 | 74 | 75 | "Summer" 76 | 77 | 78 | > 10 79 | 80 | 81 | Best for the hot season! 82 | "Light salad" 83 | 84 | 85 | 86 | 87 | The "YEA" season 88 | seasonInput.endsWith("YEA") 89 | 90 | 91 | <= 10 92 | 93 | 94 | "Beans salad" 95 | 96 | 97 | 98 | 99 | 100 | "Spring" 101 | 102 | 103 | < 10 104 | 105 | 106 | "Stew" 107 | 108 | 109 | 110 | 111 | "Spring" 112 | 113 | 114 | <= 10 115 | Math.min( 116 | cellInput, 10 117 | ) == 10 118 | 119 | 120 | "Steak" 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | temperature 133 | 134 | 135 | 136 | 137 | 138 | >30 139 | 140 | 141 | "Summer" 142 | 143 | 144 | 145 | 146 | <10 147 | 148 | 149 | "Winter" 150 | 151 | 152 | 153 | 154 | [10..30] 155 | 156 | 157 | "Spring" 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | dayType 173 | 174 | 175 | 176 | 177 | 178 | "Weekday" 179 | 180 | 181 | 4 182 | 183 | 184 | 185 | 186 | "Holiday" 187 | 188 | 189 | 10 190 | 191 | 192 | 193 | 194 | "Weekend" 195 | 196 | 197 | 15 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | return "It's lit!"; 206 | 207 | 208 | 209 | foobar 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | -------------------------------------------------------------------------------- /dmn-compatibility/src/app.js: -------------------------------------------------------------------------------- 1 | import diagram from '../resources/diagram13.dmn'; 2 | 3 | import DmnModeler from 'dmn-js/lib/Modeler'; 4 | 5 | import fileDrop from 'file-drops'; 6 | 7 | import { migrateDiagram } from '@bpmn-io/dmn-migrate'; 8 | 9 | 10 | const dmnModeler = new DmnModeler({ 11 | container: '#canvas' 12 | }); 13 | 14 | // (1) import DMN diagram 15 | async function importXML(xml) { 16 | 17 | // (1.1) migrate to DMN 1.3 if necessary 18 | xml = await migrateDiagram(xml); 19 | 20 | // (1.2) import DMN 1.3 diagram 21 | try { 22 | await dmnModeler.importXML(xml); 23 | } catch (err) { 24 | console.log(err); 25 | } 26 | } 27 | 28 | importXML(diagram); 29 | 30 | // drag and drop DMN diagrams 31 | document.querySelector('#canvas').addEventListener('dragover', fileDrop(files => { 32 | const { contents } = files[ 0 ]; 33 | 34 | importXML(contents); 35 | })); 36 | -------------------------------------------------------------------------------- /dmn-compatibility/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | 3 | module.exports = { 4 | mode: 'development', 5 | entry: './src/app.js', 6 | output: { 7 | path: path.resolve(__dirname, 'public'), 8 | filename: 'app.bundled.js' 9 | }, 10 | module: { 11 | rules: [ 12 | { 13 | test: /\.dmn$/, 14 | use: { 15 | loader: 'raw-loader' 16 | } 17 | } 18 | ] 19 | } 20 | }; -------------------------------------------------------------------------------- /modeler/README.md: -------------------------------------------------------------------------------- 1 | # dmn-js Modeler Example 2 | 3 | This example showcases using the API of dmn-js to build a tabbed modeler. 4 | 5 | It builds upon the [starter example](https://github.com/bpmn-io/dmn-js-examples/tree/main/starter). 6 | 7 | [![modeler example screenshot](./modeler.png)](https://cdn.statically.io/dmn-io/dmn-js-examples/main/modeler/modeler.html) 8 | 9 | [Try it out](https://cdn.statically.io/gh/bpmn-io/dmn-js-examples/main/modeler/modeler.html). 10 | 11 | 12 | ## Usage Summary 13 | 14 | Open a view using `#getViews` and `#open` when clicking on a tab. 15 | 16 | ```javascript 17 | $('.editor-tabs').delegate('.tab', 'click', async function(e) { 18 | 19 | // get index of view from clicked tab 20 | const viewIdx = parseInt(this.getAttribute('data-id'), 10); 21 | 22 | // get view using index 23 | const view = dmnModeler.getViews()[viewIdx]; 24 | 25 | // open view 26 | try { 27 | await dmnModeler.open(view); 28 | } catch (err) { 29 | console.error('error opening tab', err); 30 | } 31 | }); 32 | ``` 33 | 34 | Update tabs whenever the views change. 35 | 36 | ```javascript 37 | dmnModeler.on('views.changed', function(event) { 38 | 39 | // get views from event 40 | const { views, activeView } = event; 41 | 42 | // clear tabs 43 | $tabs.empty(); 44 | 45 | // create a new tab for each view 46 | views.forEach(function(v, idx) { 47 | 48 | const className = CLASS_NAMES[v.type]; 49 | 50 | const tab = $(` 51 |
52 | 53 | ${v.element.name || v.element.id} 54 |
55 | `); 56 | 57 | $tabs.append(tab); 58 | }); 59 | }); 60 | ``` 61 | 62 | ## Licence 63 | 64 | MIT 65 | -------------------------------------------------------------------------------- /modeler/diagram.dmn: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | season 30 | 31 | 32 | 33 | 34 | guestCount 35 | 36 | 37 | 38 | 39 | 40 | "Winter" 41 | 42 | 43 | <= 8 44 | 45 | 46 | "Spareribs" 47 | 48 | 49 | 50 | 51 | "Winter" 52 | 53 | 54 | > 8 55 | 56 | 57 | "Pasta" 58 | 59 | 60 | 61 | 62 | "Summer" 63 | 64 | 65 | > 10 66 | 67 | 68 | "Light salad" 69 | 70 | 71 | 72 | 73 | "Summer" 74 | 75 | 76 | <= 10 77 | 78 | 79 | "Beans salad" 80 | 81 | 82 | 83 | 84 | "Spring" 85 | 86 | 87 | < 10 88 | 89 | 90 | "Stew" 91 | 92 | 93 | 94 | 95 | "Spring" 96 | 97 | 98 | >= 10 99 | 100 | 101 | "Steak" 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | temperature 114 | 115 | 116 | 117 | 118 | 119 | >30 120 | 121 | 122 | "Summer" 123 | 124 | 125 | 126 | 127 | <10 128 | 129 | 130 | "Winter" 131 | 132 | 133 | 134 | 135 | [10..30] 136 | 137 | 138 | "Spring" 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | dayType 154 | 155 | 156 | 157 | 158 | 159 | "Weekday" 160 | 161 | 162 | 4 163 | 164 | 165 | 166 | 167 | "Holiday" 168 | 169 | 170 | 10 171 | 172 | 173 | 174 | 175 | "Weekend" 176 | 177 | 178 | 15 179 | 180 | 181 | 182 | 183 | 184 | Week day or week end 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | -------------------------------------------------------------------------------- /modeler/modeler.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | dmn-js modeler example 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 36 | 37 | 38 |
39 |
40 |
41 |
42 |
43 |
44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 168 | 169 | 170 | -------------------------------------------------------------------------------- /modeler/modeler.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bpmn-io/dmn-js-examples/8b3b95d2d49d48396ff92a8d2d6f9b40845a6b3c/modeler/modeler.png -------------------------------------------------------------------------------- /modeler/style.css: -------------------------------------------------------------------------------- 1 | .dmn-js-parent { 2 | border: solid 1px #ccc; 3 | } 4 | 5 | .editor-tabs .tab { 6 | display: block; 7 | white-space: nowrap; 8 | background: white; 9 | padding: 5px; 10 | margin: -1px 2px 2px 2px; 11 | border: solid 1px #CCC; 12 | border-radius: 0 0 2px 2px; 13 | padding: 8px; 14 | font-family: 'Arial', sans-serif; 15 | font-weight: bold; 16 | cursor: default; 17 | font-size: 14px; 18 | color: #444; 19 | flex: 0 0 1%; 20 | } 21 | 22 | .editor-tabs { 23 | display: flex; 24 | flex-direction: row; 25 | position: relative; 26 | } 27 | 28 | .editor-tabs .tab:first-child { 29 | margin-left: 5px; 30 | } 31 | 32 | .editor-tabs .tab.active { 33 | border-top-color: white; 34 | } 35 | 36 | .editor-tabs .tab.active, 37 | .editor-tabs .tab:hover { 38 | border-bottom: solid 3px #52b415; 39 | margin-bottom: 0; 40 | } -------------------------------------------------------------------------------- /pre-packaged/README.md: -------------------------------------------------------------------------------- 1 | # dmn-js pre-packaged example 2 | 3 | This example showcases how to use the pre-packaged version(s) of [dmn-js](https://github.com/bpmn-io/dmn-js). 4 | 5 | 6 | ## About 7 | 8 | We provide pre-packaged versions of our toolkit via [unpkg](https://unpkg.com/dmn-js/dist/). 9 | 10 | This example shows how to embed these resources to integrate a DMN viewer or editor 11 | into a website. 12 | 13 | 14 | ## Embed pre-packaged Assets 15 | 16 | Download or simply include the relevant dependencies into your website: 17 | 18 | #### Viewer 19 | 20 | ```html 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | ``` 29 | 30 | Download the complete [viewer example](https://cdn.statically.io/gh/bpmn-io/dmn-js-examples/main/starter/viewer.html). 31 | 32 | #### Modeler 33 | 34 | ```html 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | ``` 45 | 46 | Download the complete [modeler example](https://cdn.statically.io/gh/bpmn-io/dmn-js-examples/main/starter/modeler.html). 47 | 48 | 49 | ## Use the Library 50 | 51 | The library is bundled as an UMD bundle and binds itself to the global `DmnJS` 52 | variable. 53 | 54 | ```javascript 55 | const dmnJS = new DmnViewer({ 56 | container: '#canvas' 57 | }); 58 | 59 | try { 60 | const { warnings } = await dmnJS.importXML(xml); 61 | 62 | if (warnings.length) { 63 | console.log('import with warnings', warnings); 64 | } else { 65 | console.log('import successful'); 66 | } 67 | 68 | // access active viewer (might be an editor, too!) 69 | dmnJS 70 | .getActiveViewer() 71 | .get('canvas') 72 | .zoom('fit-viewport'); 73 | } catch (err) { 74 | console.log('something went wrong:', err); 75 | } 76 | ``` 77 | 78 | ## License 79 | 80 | MIT 81 | -------------------------------------------------------------------------------- /simple-bower/README.md: -------------------------------------------------------------------------------- 1 | > Removed as of `dmn-js@1.0.0`. 2 | 3 | We've discontinued bower bundles with our `1.0.0` release of dmn-js. 4 | 5 | Checkout our [pre-packaged example](../pre-packaged) for alternative. -------------------------------------------------------------------------------- /simple-commonjs/README.md: -------------------------------------------------------------------------------- 1 | > Removed as of `dmn-js@1.0.0`. 2 | 3 | Checkout [bundling example](../bundling) for alternative. -------------------------------------------------------------------------------- /starter/README.md: -------------------------------------------------------------------------------- 1 | # dmn-js starter 2 | 3 | Try out our toolkit by downloading the [viewer](https://cdn.statically.io/gh/bpmn-io/dmn-js-examples/main/starter/viewer.html) or [modeler](https://cdn.statically.io/gh/bpmn-io/dmn-js-examples/main/starter/modeler.html) example. 4 | 5 | 6 | [![viewer example screenshot](./viewer.png)](https://cdn.statically.io/gh/bpmn-io/dmn-js-examples/main/starter/viewer.html) 7 | 8 | _Screenshot of the [viewer example](https://cdn.statically.io/gh/bpmn-io/dmn-js-examples/main/starter/viewer.html)._ 9 | -------------------------------------------------------------------------------- /starter/diagram.dmn: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | season 30 | 31 | 32 | 33 | 34 | guestCount 35 | 36 | 37 | 38 | 39 | 40 | "Winter" 41 | 42 | 43 | <= 8 44 | 45 | 46 | "Spareribs" 47 | 48 | 49 | 50 | 51 | "Winter" 52 | 53 | 54 | > 8 55 | 56 | 57 | "Pasta" 58 | 59 | 60 | 61 | 62 | "Summer" 63 | 64 | 65 | > 10 66 | 67 | 68 | "Light salad" 69 | 70 | 71 | 72 | 73 | "Summer" 74 | 75 | 76 | <= 10 77 | 78 | 79 | "Beans salad" 80 | 81 | 82 | 83 | 84 | "Spring" 85 | 86 | 87 | < 10 88 | 89 | 90 | "Stew" 91 | 92 | 93 | 94 | 95 | "Spring" 96 | 97 | 98 | >= 10 99 | 100 | 101 | "Steak" 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | temperature 114 | 115 | 116 | 117 | 118 | 119 | >30 120 | 121 | 122 | "Summer" 123 | 124 | 125 | 126 | 127 | <10 128 | 129 | 130 | "Winter" 131 | 132 | 133 | 134 | 135 | [10..30] 136 | 137 | 138 | "Spring" 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | dayType 154 | 155 | 156 | 157 | 158 | 159 | "Weekday" 160 | 161 | 162 | 4 163 | 164 | 165 | 166 | 167 | "Holiday" 168 | 169 | 170 | 10 171 | 172 | 173 | 174 | 175 | "Weekend" 176 | 177 | 178 | 15 179 | 180 | 181 | 182 | 183 | 184 | Week day or week end 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | -------------------------------------------------------------------------------- /starter/modeler.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hello World 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 30 | 31 | 32 |
33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 108 | 109 | 110 | -------------------------------------------------------------------------------- /starter/viewer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | dmn-js viewer example 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /starter/viewer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bpmn-io/dmn-js-examples/8b3b95d2d49d48396ff92a8d2d6f9b40845a6b3c/starter/viewer.png --------------------------------------------------------------------------------