How to highlight a specific element

Cheers together,

i am a noop and do some experimental stuff with the bpmn-navigated-viewer.js. My wish is to highlight a specific element. Like the screenshot below.

What is the correct way to realize stuff like this. Unfortunately i wasn’t able to find some example project in your github.

My simple approach is:

var canvasElement = angular.element('#bpmn g[data-element-id="foo"] g rect');
if (canvasElement) {
  canvasElement.attr('style', 'stroke: red; stroke-width: 4px');


That kind of stuff is exactly what we expect people to do.

Did you have a look at this example

Does that answer your question? If not, let me know.


This might also serve as an example (not being a developer, I am not sure if I picked the right code)

In our tasklist we are doing the exact same thing as you ask for.

yes, this is very helpful to getting started with the BPMNViewer API. Is there any API documention like Angular doc in the web?

It’s important to know the following:

Access the overlays service via bpmnViewer.get('overlays') and add overlays to elements by id using the Overlays#add method.

Usage summary

yes!!! your second example of camunda tasklist to add some class definitions via canvas.addMarker(taskDefinitionKey, 'highlight'); is also very helpful.

currently our examples serve as documentation.

we will add more structured docs at a later stage for sure. currently we are focusing on more BPMN support along with clean code and tests.