Search code examples
javascriptjquerybpmnjointjsrappid

Label to flows in JointJS

I'm working with jointJs and Rappid. I know how to draw a bpmn diagram, as the photo I have attached. I'm drawing the elements, but I'm having some problems with rows (flows). Is there any way to add a flow label or name? As I added on my image in red color.

I have seen this in their documentation, but I can't see anything about labels

var flow = new joint.shapes.bpmn.Flow({
source: { id: task.id },
target: { id: annotation.id },
flowType: 'association'

});

enter image description here

Thanks,

Solution

  • You may want to look into dia.Link.prototype.labels, since BPMN Flows are just Links extensions (joint.shapes.bpmn.Flow = joint.dia.Link.extend({).

    An example to your flow:

    flow.label(0, // the label's index (you can have multiple labels per link/flow)
  {
    position: .5, // place it halfway on the link (0-1)
    attrs: {
        text: { fill: 'red', text: 'Label' }
    }
  }
);