How should I change the color of the node in BpmnViewer?

import BpmnViewer from 'bpmn-js/lib/Viewer'

var elementRegistry = this.bpmnViewer.get('elementRegistry'),
          **modeling = this.bpmnViewer.get('modeling');**
      var elementToColor = elementRegistry.get('usertask1');
      modeling.setColor([ elementToColor ], {
        stroke: 'green',
        fill: 'rgba(0, 80, 0, 0.4)'

I really need help. thank you.

First, please make sure your Code is readable.

Modeling is not available in the Viewer, so you can’t use the functionality there. You would have to use the Modeler instead.

I just want to show my process diagrams,Don’t want to edit id, so i use Viewer,but i want to change the node color.

Then you would have to create a custom renderer

What @philippfromme said.

You don’t need to create a custom renderer. The bpmn-js default renderer can render colors. You can use low-level APIs to set the color without using Modeling:

const businessObject = element.businessObject;

businessObject.di.set('stroke', stroke);
businessObject.di.set('fill', fill);

const gfx = elementRegistry.getGraphics(element);

const type = element.waypoints ? 'connection' : 'shape';

graphicsFactory.update(type, element, gfx);
1 Like

I solved the problem by your way. thank you very much. @philippfromme @Niklas_Kiefer

1 Like

graphicsFactory ?? where did you get it? thank you

graphicsFactory ?? where did you get it? thank you

Please do not necrobump old topics. Instead link to this thread from new topic.