Change replace menu of connections


I want to change the Replace Menu if it’s called like that.

I want to have a custom icon and name representing the custom connection.

How can I do that?

What is your use-case for custom flows?

I think Custom Elements might be something you want to look into: bpmn-js-examples/custom-elements at master · bpmn-io/bpmn-js-examples · GitHub
It is mostly tailored for Tasks, but can be adopted to work for connections as well.

I already know how to change the colors of the flows when they are rendered through this post: How to set different colors to each flow type?

Now I want to be able to replace the black sequence flow with my custom red flow via the replace menu.
It should look like this:

The example you shared seems to only explain about the context pad but not about the replace menu (the box that pops up when you click on “change type”).
I want to be able to change the icon from the previous Flow to for example a red Sequence Flow and give it a custom name.

Hopefully this makes it more understandable. Do you have an idea how to do that?

What are the semantics of your custom connection? What is it?


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 });

CustomConnection.$inject = customConnectionList;


export function isConnection(element) {
	const { waypoints } = element;
	return waypoints;

export function isConditional(sequenceFlow) {
	return getBusinessObject(sequenceFlow).get("conditionExpression");

export function isDefault(sequenceFlow) {
	return (
		getBusinessObject(sequenceFlow).get("sourceRef").get("default") ===

Is this what you wanted? Because I’m not sure what you mean by semantics.

Well, was this what you meant by semantic?