bpmn-js-copy-as-image

bpmn-js-copy-as-image

This project extends your bpmn-js editor to copy the current canvas selection as an image, or generate a PNG/SVG from a list of eleemnts.

Features

• generate SVG or PNG from a selection of diagram elements
• copy to system clipboard
  • triggered via CtrlOrCmd + Shift + C keyboard shortcut
  • triggered via copySelectionAsImage editor action

Usage

Depending on you use-case, include different parts of this project into your favorite BPMN editor.

Basic

To enable the keyboard shortcut and/or register the editor action, import CopyAsImageModule:

import BpmnModeler from 'bpmn-js/lib/Modeler';
import { CopyAsImageModule } from 'bpmn-js-copy-as-image';

const modeler = new BpmnModeler({
  container: '#container',
  additionalModules: [
    CopyAsImageModule
  ]
});

await modeler.importXML(/* ... */);

Programmatic use

If you want the programmatic API, import ElementsRendererModule:

import BpmnModeler from 'bpmn-js/lib/Modeler';
import { ElementsRendererModule } from 'bpmn-js-copy-as-image';

const modeler = new BpmnModeler({
  container: '#container',
  additionalModules: [
    ElementsRendererModule
  ]
});

await modeler.importXML(/* ... */);

const elementsRenderer = modeler.get('elementsRenderer');
const png = await elementsRenderer.renderAsPNG([ 'Task_1' ]);

Build and Run

# install dependencies
npm install

# run project, executing all tasks
npm run all

# start demo, in browser
npm start

Credits

The project was built on top of @nikku's native copy and paste example.

License

MIT