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 and took inspiration from 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.

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;