1 | # cmmn-js - CMMN 1.1 for the web
|
2 |
|
3 | [![Build Status](https://travis-ci.org/bpmn-io/cmmn-js.svg?branch=develop)](https://travis-ci.org/bpmn-io/cmmn-js)
|
4 |
|
5 | View and edit CMMN 1.1 diagrams in the browser.
|
6 |
|
7 |
|
8 | ## Installation
|
9 |
|
10 | Use the library [pre-packaged](https://github.com/bpmn-io/cmmn-js-examples/tree/master/pre-packaged)
|
11 | or include it [via npm](https://github.com/bpmn-io/cmmn-js-examples/tree/master/bundling)
|
12 | into your node-style web-application.
|
13 |
|
14 | ## Usage
|
15 |
|
16 | To get started, create a [cmmn-js](https://github.com/bpmn-io/cmmn-js) instance
|
17 | and render [CMMN 1.1 diagrams](http://www.omg.org/spec/CMMN/1.1/) in the browser:
|
18 |
|
19 | ```javascript
|
20 | var xml; // my CMMN 1.1 xml
|
21 | var viewer = new CmmnJS({
|
22 | container: 'body'
|
23 | });
|
24 |
|
25 | viewer.importXML(xml, function(err) {
|
26 |
|
27 | if (err) {
|
28 | console.log('error rendering', err);
|
29 | } else {
|
30 | console.log('rendered');
|
31 | }
|
32 | });
|
33 | ```
|
34 |
|
35 | Checkout our [examples](https://github.com/bpmn-io/cmmn-js-examples) for many
|
36 | more supported usage scenarios.
|
37 |
|
38 |
|
39 | ### Dynamic Attach/Detach
|
40 |
|
41 | You may attach or detach the viewer dynamically to any element on the page, too:
|
42 |
|
43 | ```javascript
|
44 | var viewer = new CmmnJS();
|
45 |
|
46 | // attach it to some element
|
47 | viewer.attachTo('#container');
|
48 |
|
49 | // detach the panel
|
50 | viewer.detach();
|
51 | ```
|
52 |
|
53 |
|
54 | ## Resources
|
55 |
|
56 | * [Demo](http://demo.bpmn.io/cmmn)
|
57 | * [Issues](https://github.com/bpmn-io/cmmn-js/issues)
|
58 | * [Examples](https://github.com/bpmn-io/cmmn-js-examples)
|
59 | * [Forum](https://forum.bpmn.io)
|
60 |
|
61 |
|
62 | ## Building the Project
|
63 |
|
64 | Perform the following steps to build the library, including running all tests:
|
65 |
|
66 | ```
|
67 | cd cmmn-js
|
68 | npm install
|
69 | npm run all
|
70 | ```
|
71 |
|
72 | You may need to perform [additional project setup](./docs/project/SETUP.md) when
|
73 | building the latest development snapshot.
|
74 |
|
75 | Please checkout our [contributing guidelines](./.github/CONTRIBUTING.md) if you plan to
|
76 | file an issue or pull request.
|
77 |
|
78 |
|
79 | ## Related
|
80 |
|
81 | cmmn-js builds on top of a few additional powerful tools:
|
82 |
|
83 | * [cmmn-moddle](https://github.com/bpmn-io/cmmn-moddle): Read / write support for CMMN 1.1 XML in the browsers
|
84 | * [diagram-js](https://github.com/bpmn-io/diagram-js): Diagram rendering and editing toolkit
|
85 |
|
86 |
|
87 | ## License
|
88 |
|
89 | Use under the terms of the [bpmn.io license](http://bpmn.io/license).
|