https://github.com/bptlab/openbpt-modeler-bpmn-q
A BPMN-Q modeler based on the diagram-js library.
https://github.com/bptlab/openbpt-modeler-bpmn-q
Last synced: 4 months ago
JSON representation
A BPMN-Q modeler based on the diagram-js library.
- Host: GitHub
- URL: https://github.com/bptlab/openbpt-modeler-bpmn-q
- Owner: bptlab
- License: mit
- Created: 2025-09-15T15:38:04.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-09-15T15:53:47.000Z (9 months ago)
- Last Synced: 2025-09-17T22:54:23.859Z (9 months ago)
- Language: JavaScript
- Size: 374 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# bpmn-q-js
BPMN-Q modeling tool for viewing and editing BPMN-Q queries in the browser. Supports the import and export of .xml files.
The tool is based on [ptn-js](https://github.com/MaximilianKoenig/ptn-js) and took inspiration from [bpmn-js](https://github.com/bpmn-io/bpmn-js).
## Usage
To integrate the modeler, create a bpmn-q-js instance, bind it to the canvas, and import a model or create a new one.
```javascript
import BPMNQModeler from "bpmn-q-js/lib/bpmnqmodeler/BPMNQModeler";
import "bpmn-q-js/assets/bpmnq-js.css";
const xml = '...'; // your BPMN-Q XML
const canvas = '...'; // the HTML element the modeler should use as canvas
const modeler = new BPMNQModeler({
container: canvas,
keyboard: [
bindTo: canvas
]
});
await modeler.importXML(xml);
// await modeler.createNew(); Alternatively, this creates an empty diagram
const xmlExport = (await modeler.saveXML()).xml;
```