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