Bpmn-to-image color specific elements and attach text

Developers Modeler
1

Hello,

I want to use bpmn-lint’s output of Syntax-Errors for my program. It calculates points, a grade etc. Then the output of my program should be able to call bpmn-to-image and not only show the reviewed bpmn, but also color specific elements e.g red and yellow (depending on the level of error made) and attach points and maybe an modelling advice to them.

Where should I get started? Is it fine to just edit the skeleton.html in bpmn-to-image for the coloring? How should I attach text?

2

Can you sketch a picture of what you want to achieve?

3

I hope this sketch is useful:
program_sketch

4

My first try was editing in this code from the color-example for bpmn-js (bpmn-js-examples/colors at master · bpmn-io/bpmn-js-examples · GitHub) inside the skeleton.html for bpmn-to-image to test colering for an specific bpmn-model:

async function openDiagram(bpmnXML, options) {

        // viewer instance, lazily initialized
        const bpmnViewer = getViewer();

        options = options || {};

        const minDimensions = options.minDimensions || {
          width: 0,
          height: 0
        };

        const title = options.title;

        const footer = options.footer;

        await bpmnViewer.importXML(bpmnXML);

        const viewbox = bpmnViewer.get('canvas').viewbox();
		
		<!-- begin: edited in -->
		var modeling = bpmnViewer.get('modeling');
		
		// Color via BPMN 2.0 Extension
		var elementToColor = elementRegistry.get('Activity_0g6tock');

		modeling.setColor([ elementToColor ], {
        stroke: 'red',
        <!-- end: edited in -->

But this isn’t working :sweat_smile:, resulting in an error with the ‘modeling’ parameter:

Error: Evaluation failed: Error: No provider for "modeling"! (Resolving: modeling)
    at o (file:///C:/Users/Leonard/AppData/Roaming/npm/node_modules/bpmn-to-image/node_modules/bpmn-js/dist/bpmn-viewer.production.min.js:2:67353)
    at Object.get (file:///C:/Users/Leonard/AppData/Roaming/npm/node_modules/bpmn-to-image/node_modules/bpmn-js/dist/bpmn-viewer.production.min.js:2:67151)
    at Qi.s [as get] (file:///C:/Users/Leonard/AppData/Roaming/npm/node_modules/bpmn-to-image/node_modules/bpmn-js/dist/bpmn-viewer.production.min.js:2:67686)
    at openDiagram (file:///C:/Users/Leonard/AppData/Roaming/npm/node_modules/bpmn-to-image/skeleton.html:107:29)
    at ExecutionContext._evaluateInternal (C:\Users\Leonard\AppData\Roaming\npm\node_modules\bpmn-to-image\node_modules\puppeteer\lib\cjs\puppeteer\common\ExecutionContext.js:218:19)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async ExecutionContext.evaluate (C:\Users\Leonard\AppData\Roaming\npm\node_modules\bpmn-to-image\node_modules\puppeteer\lib\cjs\puppeteer\common\ExecutionContext.js:107:16)
    at async printDiagram (C:\Users\Leonard\AppData\Roaming\npm\node_modules\bpmn-to-image\index.js:36:27)
    at async C:\Users\Leonard\AppData\Roaming\npm\node_modules\bpmn-to-image\index.js:130:7
    at async withPage (C:\Users\Leonard\AppData\Roaming\npm\node_modules\bpmn-to-image\index.js:103:5)
    at async convertAll (C:\Users\Leonard\AppData\Roaming\npm\node_modules\bpmn-to-image\index.js:121:3)

What’s going wrong? Is it because bpmn-to-image uses a canvas instead of a document?

5

That’s because bpmn-to-image uses a Viewer instance. Thus, modeling actions are not supported. So what you would have to do first is to replace the Viewer with a Modeler.

1 Like