How to add outline to diagram element

Developers
1

Hi,

I would like to add an outline to diagram elements to show the progress of the workflow.
How can i do that? i have looked at overlays example but this doesnt seem to cover outlines. Is there an api of overlays or outline in diagram.js?

2

Hello @Sionnach733,

you can style diagram elements by adding what we call a marker to an element. This marker is a css class which can be added to an element through the Canvas API, as the following:

// condition is true
if (condition) {
  canvas.addMarker(element, 'outline');
}

// condition is false
if (condition) {
  canvas.removeMarker(element, 'outline');
}

You can check see this behaviour in action on the following snippet:

from move/MoveVisuals:

// add dragging marker
forEach(allDraggedElements, function(e) {
  canvas.addMarker(e, MARKER_DRAGGING);
});

// remove dragging marker
forEach(allDraggedElements, function(e) {
  canvas.removeMarker(e, MARKER_DRAGGING);
});

Cheers,
Ricardo

3

HI, I have try and found that this marker can not be applied to “connection line”. for example, I would like to change the line to red line

4

What did you try? A marker cannot change the line color because embedded SVG will always overrule CSS assignments. You need to implement a custom renderer.