JointJS与Rappid中BPMN流程（Flow）添加标签的实现方法咨询

Hey there! I’ve tackled this exact issue before when working with JointJS and Rappid for BPMN diagrams, so let me walk you through how to add those red-labeled tags to your association flows.

The key here is that BPMN Flow shapes in JointJS support label configuration either through a dedicated label property or by directly modifying the attrs object—this is often buried in the general shape documentation rather than the specific BPMN section, which is probably why you missed it.

Modified Code with Label #

Here’s how to update your existing flow creation code to include a custom label (matching the red style from your image):

var flow = new joint.shapes.bpmn.Flow({
  source: { id: task.id },
  target: { id: annotation.id },
  flowType: 'association',
  // Add this label configuration
  label: {
    text: 'Your Custom Label',
    fill: '#ff0000', // Red color like your annotation
    fontSize: 12,
    fontWeight: 'bold',
    position: {
      distance: 25, // Adjust distance from the flow line
      offset: 0.5, // Place label in the middle of the flow
      args: { autoRotate: true } // Keep label aligned with the flow direction
    }
  }
});

Alternative: Direct Attrs Configuration #

If the label property doesn’t work as expected (some older JointJS versions might behave differently), you can directly target the flow’s label element via the attrs object:

var flow = new joint.shapes.bpmn.Flow({
  source: { id: task.id },
  target: { id: annotation.id },
  flowType: 'association',
  attrs: {
    '.label': {
      text: 'Your Custom Label',
      fill: '#ff0000',
      fontSize: 12,
      fontWeight: 'bold'
    }
  }
});

Quick Tips #

• Adjust distance and offset in the position object to fine-tune where the label sits relative to the flow.
• If you need multiple labels or more complex styling, you can add additional text elements using the markup property of the Flow shape, but the above methods should cover most use cases for simple tagged labels.

内容的提问来源于stack exchange，提问作者Zuri