@minhkim/bpm

Lightweight BPM modeler built on diagram-js

Install

npm install @minhkim/bpm

Peer dependencies (install in your app):

npm install diagram-js bpmn-moddle bpmn-font diagram-js-direct-editing \
  inherits-browser min-dash min-dom tiny-svg ids

Styles

import '@minhkim/bpm/styles.css';

Usage

import { LightModeler, getJson, importJson, exportDiagram } from '@minhkim/bpm';

const container = document.getElementById('canvas');

const modeler = new LightModeler({ container });

await modeler.createDiagram();

// XML
const { xml } = await exportDiagram(modeler);

// JSON (BPMN moddle tree)
const { json } = await modeler.getJson();
await modeler.importJson(json);

modeler.destroy();

React

import { useEffect, useRef } from 'react';
import { LightModeler } from '@minhkim/bpm';
import '@minhkim/bpm/styles.css';

export default function BpmnEditor({ xml }) {
  const ref = useRef(null);
  const modelerRef = useRef(null);

  useEffect(() => {
    const modeler = new LightModeler({ container: ref.current });
    modelerRef.current = modeler;

    if (xml) {
      modeler.importXML(xml);
    } else {
      modeler.createDiagram();
    }

    return () => modeler.destroy();
  }, []);

  return <div ref={ref} style={{ width: '100%', height: '600px' }} />;
}

API

| Function | Description | |----------|-------------| | importDiagram(modeler, xml) | Load BPMN XML | | exportDiagram(modeler) | { xml } | | importJson(modeler, json) | Load moddle JSON tree | | getJson(modeler) | { json } with { version, definitions } | | modeler.createDiagram() | Empty diagram | | modeler.importXML(xml) | Inherited from BaseViewer | | modeler.saveXML(options) | Inherited from BaseViewer |

JSON format

getJson returns:

{
  "version": 1,
  "definitions": {
    "$type": "bpmn:Definitions",
    "id": "Definitions_1",
    "rootElements": [ ... ]
  }
}

Cross-references use { "$ref": "ElementId" }.