Link styling

Now when we know how to style elements, let's have a look on how to style links. You might be surprised but the way links are styled is exactly the same as with styling elements. Again, we need to know the SVG structure of links and then use either external CSS or the attr method of joint.dia.Link (which is actually the same as of joint.dia.Element). The SVG structure of links is the following:

<path class="connection"/>
<path class="marker-source"/>
<path class="marker-target"/>
<path class="connection-wrap"/>
<g class="labels" />
<g class="marker-vertices"/>
<g class="marker-arrowheads"/>
<g class="link-tools" />
Let's see an example:
link.attr({
    '.connection': { stroke: 'blue' },
    '.marker-source': { fill: 'red', d: 'M 10 0 L 0 5 L 10 10 z' },
    '.marker-target': { fill: 'yellow', d: 'M 10 0 L 0 5 L 10 10 z' }
});

I left the styling of the other links in this example out of this text. If you want to look at it anyway, inspect this page, find the tutorial.js script and search the function linkStyling().

Setting vertices on a link is as simple as:

link.set('vertices', [{ x: 300, y: 60 }, { x: 400, y: 60 }, { x: 400, y: 20 }])

If you prefer the link to not be sharply broken at the vertices but instead interpolated by a curve, set the smooth attribute:

link.set('smooth', true)