How to set different colors to each flow type?

Hi, I want to change the colour (stroke) of connections between two elements for each different connection type.
For example, I want the Sequence Flow Connection line to be red and the Default Flow Connection Line to be blue.

I tried overriding the DrawConnection method, but it doesn’t get called.

Is there a better method or have I done something wrong?

P.S. I wanna define the colors on Application initialization and not draw programmatically a line with a specific colour (stroke).

Are these colors supposed to be exported as part of the XML as well?

The colors must be shown inside the XML, so yes

Then you’ll have to set colors on newly created connections (Example: Assign Color Example - CodeSandbox) and also on existing connections during import and export.

export default class MyCommandInterceptor extends CommandInterceptor {
	constructor(eventBus, modeling) {
		super(eventBus);

		this.postExecuted(["connection.create"], ({ context }) => {
			const { connection } = context;

			if (is(connection, "bpmn:SequenceFlow")) {
				modeling.setColor(connection, { stroke: "red" });
			} else if (is(connection, "bpmn:MessageFlow")) {
				modeling.setColor(connection, { stroke: "yellow" });
			} else {
				modeling.setColor(connection, {stroke: "green"});
			}
		});
	}
}

MyCommandInterceptor.$inject = ["eventBus", "modeling"];

image

I seems the type of the flow doesn’t change as my connections are always red. Do you know how to solve this?

Have you tried using different types of connections?

image

Yes, I have. I have tried three different types, namely the Sequence Flow, Default Flow and Conditional Flow as seen in the picture below, which are all red.
image

Furthermore, as you can see in the picture of the XML file, all connections have the same BPMN type: sequenceFlow.
image

How can I differentiate between these three and maybe future custom connection types?

PS: I can’t use the same connection you used for the blue connection as I have a custom palette and removed most of the native BPMN elements.

I updated the example to set the color based on these properties: Assign Color Example - CodeSandbox

image

Thank you, this worked!

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.