draw.io

Draw.io - Custom arrow with object in middle


I would like to create my custom arrow similar to Message Flow 2 arrow of draw.io palette.

BPMN General -> Message Flow 2

The mentioned arrow has an object in the middle and they behave nicely; middle object not gets resized, it moves with the line, stays upright etc. When inspecting the style of this arrow I only see the individual elements but not any expression binding them.

Arrow:

startArrow=oval;startFill=0;startSize=7;endArrow=block;endFill=0;endSize=10;dashed=1;html=1;strokeWidth=2;align=center;

Object in middle:

shape=message;html=1;outlineConnect=0;

I tried grouping an arrow with an object but could not reach the same result; the group no longer behaves as an arrow.


Solution

  • It's possible, but I don't know clean way of doing this. To understand how Message Flow 2 works you can either look at the code:

    var edge = new mxCell('', new mxGeometry(0, 0, 0, 0), 'startArrow=oval;startFill=0;startSize=7;endArrow=block;endFill=0;endSize=10;dashed=1;html=1;');
    edge.geometry.setTerminalPoint(new mxPoint(0, 0), true);
    edge.geometry.setTerminalPoint(new mxPoint(100, 0), false);
    edge.geometry.relative = true;
    edge.edge = true;
    
    var cell = new mxCell('', new mxGeometry(0, 0, 20, 14), 'shape=message;html=1;outlineConnect=0;');
    cell.geometry.relative = true;
    cell.vertex = true;
    cell.geometry.offset = new mxPoint(-10, -7);
    edge.insert(cell);
    

    or at diagram's XML (which you can find in menu Extras -> Edit Diagram)

    ...
    <mxCell id="YzitZNannA--EQJoASZJ-14" value="" style="startArrow=oval;startFill=0;startSize=7;endArrow=block;endFill=0;endSize=10;dashed=1;html=1;" edge="1" parent="1">
      <mxGeometry relative="1" as="geometry">
        <mxPoint x="370" y="160" as="sourcePoint" />
        <mxPoint x="470" y="160" as="targetPoint" />
      </mxGeometry>
    </mxCell>
    <mxCell id="YzitZNannA--EQJoASZJ-15" value="" style="shape=message;html=1;outlineConnect=0;" vertex="1" parent="YzitZNannA--EQJoASZJ-14">
      <mxGeometry width="20" height="14" relative="1" as="geometry">
        <mxPoint x="-10" y="-7" as="offset" />
      </mxGeometry>
    </mxCell>
    ...
    

    From here you can see two things:

    1. Object inside must have arrow object set as its parent. I don't know any way to do that other then js code, or direct change in Edit Diagram dialog.
    2. Geometry must be relative. This can be set by Edit Diagram dialog or with Edit -> Edit Geometry option.