Starting with diagram-js@7, bpmn-js@7, and dmn-js@11, using promises is the preferred way of using these libraries. Callbacks are deprecated and will likely be removed in future releases.
Switching from callbacks to promises is easy, as you'll see in this example. Even if your browser doesn't support promises, you can still polyfill them.
Following APIs return a Promise:
const modeler = new BpmnJS();
modeler.importXML(xml, (err, warnings) => {
// ...
});
const modeler = new BpmnJS();
try {
const result = await modeler.importXML(xml);
const { warnings } = result;
console.log(warnings);
} catch (err) {
console.log(err.message, err.warnings);
}const modeler = new BpmnJS();
modeler.importDefinitions(definitions, (err, warnings) => {
// ...
});
const modeler = new BpmnJS();
try {
const result = await modeler.importDefinitions(definitions);
const { warnings } = result;
console.log(warnings);
} catch (err) {
console.log(err.message, err.warnings);
}const modeler = new BpmnJS();
modeler.open(bpmnDiagram, (err, warnings) => {
// ...
});
const modeler = new BpmnJS();
try {
const result = await modeler.open(bpmnDiagram);
const { warnings } = result;
console.log(warnings);
} catch (err) {
console.log(err.message, err.warnings);
}const modeler = new BpmnJS();
modeler.saveXML(options, (err, xml) => {
// ...
});
const modeler = new BpmnJS();
try {
const result = await modeler.saveXML(options);
const { xml } = result;
console.log(xml);
} catch (err) {
console.log(err);
}const modeler = new BpmnJS();
modeler.saveSVG(options, (err, svgString) => {
// ...
});
const modeler = new BpmnJS();
try {
const result = await modeler.saveSVG(options);
const { svg } = result;
console.log(svg);
} catch (err) {
console.log(err);
}const modeler = new BpmnJS();
modeler.createDiagram((err, warnings) => {
// ...
});
const modeler = new BpmnJS();
try {
const result = await modeler.createDiagram();
const { warnings } = result;
console.log(warnings);
} catch (err) {
console.log(err.message, err.warnings);
}const modeler = new DmnJS();
modeler.importXML(xml, (err, warnings) => {
// ...
});
const modeler = new DmnJS();
try {
{ warnings } = await modeler.importXML(xml);
console.log(warnings);
} catch (err) {
console.log(err.message, err.warnings);
}const modeler = new DmnJS();
modeler.importXML(xml, (importErr, importWarnings) => {
modeler.open(modeler.getViews()[0], (err, warnings) => {
// ...
});
});
const modeler = new DmnJS();
try {
await modeler.importXML(xml);
const { warnings } = await modeler.open(modeler.getViews()[0]);
console.log(warnings);
} catch (err) {
console.log(err);
}const modeler = new DmnJS();
modeler.importXML(dmnXml, (importErr, importWarnings) => {
modeler.saveXML(options, (err, xml) => {
// ...
});
}
const modeler = new DmnJS();
try {
await modeler.importXML(dmnXml);
const { xml } = await modeler.saveXML(options);
console.log(xml);
} catch (err) {
console.log(err);
}const modeler = new DmnJS();
modeler.importXML(xml, (importErr, importWarnings) => {
modeler.saveSVG(options, (err, svgString) => {
// ...
});
}
const modeler = new BpmnJS();
try {
await modeler.importXML(xml);
const { svg } = await modeler.saveSVG(options);
console.log(svg);
} catch (err) {
console.log(err);
}MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent