Add a link

As a next step, let's connect two Elements with a Link. We need to specify two Elements as the Link source and target, and we also need to make it clear that the Link belongs to our Graph:

const link = new shapes.standard.Link();
link.source(rect1);
link.target(rect2);
link.addTo(graph);

We can also give a label to our Link, and adjust its routing and appearance. For our example, we will make our Link orthogonal with bevelled corners:

link.appendLabel({
    attrs: {
        text: {
            text: 'to the'
        }
    }
});
link.router('orthogonal');
link.connector('straight', {  cornerType: 'line' });

See it in action

Note that the Link automatically adjusts to new positions of the Elements when they are dragged around:

• JointJS
• JointJS+

Open Sandbox

💡 Would you prefer to learn more about Links? We have many demos illustrating them on our Demos & examples page.