I want to customize the color of the line and arrow of the whole flowchart. How can I do it

Developers
1

I want to customize the color of the line and arrow of the whole flowchart. How can I do it.
What’s the best way，online help

2

I think this example will be a good starting point.

1 Like
3

Although I didn’t do it as you said, I simply realized what I needed. Thank you for your reply

// 自定义连线和箭头的颜色

    const drawConnection = bpmnRenderer.drawConnection

    let customConnectionColor = function(visuals, connection){

        let res = drawConnection.call(bpmnRenderer, visuals, connection)

        let eleId = visuals.childNodes[0].style['marker-end'].split('"')[1]

        let marker = document.querySelector(eleId)

        marker.childNodes[0].style.fill = customLineAndArrowColor

        marker.childNodes[0].style.stroke = customLineAndArrowColor

        visuals.childNodes[0].style.stroke = customLineAndArrowColor

        return res

    }

    bpmnRenderer.drawConnection = customConnectionColor

image

4

Another way of changing the default colors is via configuration:

const bpmnJS = new BpmnJS({
  bpmnRenderer: {
    defaultFillColor: 'green',
    defaultStrokeColor: 'yellow'
  }
});

Note that this changes the colors of all elements. If you only want to change the colors of connections you can either modify the renderer to always render connections in a custom color or modify the creation of connections so that they are created with a custom color attribute that the renderer can then pick up (already existing connections won’t be affected).

5

nobt, would you mind sharing your example ? I’m trying to do that in my project too : https://github.com/survivant/bpmn-demo

it would help you a lot… I’m not that familiar with javascript.

6

You can refer to this code to see if it can solve your problem https://github.com/nobt/bpmnjs-custom-line