Change Stroke Width of Flow


I want to change the Stroke Width of my Flows.
My code currently looks like this:

export default class CustomRenderer extends BaseRenderer {
    constructor(config, eventBus, bpmnRenderer, textRenderer, styles) {
        super(eventBus, HIGH_PRIORITY);
        const drawConnection = this.bpmnRenderer.drawConnection

        const customConnectionColor = function(visuals, connection){
            const color = 'red';

            const result =, visuals, connection);

            // identify element through markerEnd and find element in document for further usage
            const elementId = visuals.childNodes[0].style.markerEnd.split('"')[1];
            const marker = document.querySelector(elementId);

            // marker = arrow tip
            marker.childNodes[0].style.fill = color;
            marker.childNodes[0].style.stroke = color;

            // visuals = line of arrow
            visuals.childNodes[0].style.stroke = color;
            visuals.childNodes[0].style.strokeWidth = '20px';

            return result;

        bpmnRenderer.drawConnection = customConnectionColor

However, I don’t think that this is a very clean way, therefore I want to modify the code to be able to implement it into this file instead:

export default class CustomConnection extends CommandInterceptor {
	constructor(eventBus, modeling) {

		this.postExecuted(["connection.create"], ({ context }) => {
			const { connection } = context;
			const color = getColor(connection);
			if (color) {
				modeling.setColor(connection, { stroke: color });

		this.postExecuted(["element.updateProperties"], ({ context }) => {
			const { element, properties } = context;
			if (!isConnection(element)) {
			const color = getColor(element);
			const { di } = properties;
			if (color && !di) {
				modeling.setColor(element, { stroke: color });

How can I implement the logic into the second file?
I have tried to set strokeWidth through different methods but none seem to work.

You’ll need a custom renderer to render connections with a different stroke width. Stroke width is not a property you can set that will be picked up by the renderer.

As you can see in the first code block, I already have a custom renderer. But how do I tell the renderer to change the stroke width? I don’t think my current solution (see first code block) is the right way to go.

The stroke width is an attribute of the SVG: stroke-width - SVG: Scalable Vector Graphics | MDN You can see it in action here: diagram-js/DefaultRenderer.js at develop · bpmn-io/diagram-js · GitHub

I don’t have an svg because I want to change the stroke width of a Flow (aka connection). Can you tell me the way to do it for a Flow as well please?