The shape of the link is determined by the `vertices`, `connector` and `router` properties.

The `vertices` array contains a list of points which are the points which the link should cross.

    link.get('vertices')
    link.set('vertices', [{ x: 100, y: 120 }, { x: 150, y: 60 }])

A `router` takes an array of vertices defined on the model and transforms them to an array of points (route) that the link should go through. The difference between vertices and the route is that vertices are user-defined whilst route is computed.

There are four built-in routers (manhattan, metro, orthogonal and oneSide) to your disposal. The first two are so called "smart routers" and they automatically avoid elements that are in their way.

The `orthogonal`, `manhattan` and `oneSide` routers generate points that can be connected by vertical and horizontal line segments only. The `metro` router generates points that can be connected also with diagonal line segments.

    link.set('router', { name: 'manhattan' });
    link.set('router', { name: 'oneSide' }});
    link.set('router', { name: 'metro' });
    link.set('router', { name: 'orthogonal' });

To keep backwards compatible it's possible to set the `manhattan` property to `true` in order to enable the orthogonal routing.

    // old approach
    link.set('manhattan', true)

The `manhattan` router has some additional useful options that determine how the algorithm behaves. These options can be passed into the `args` property and are:

- `excludeTypes` - an array of element types that should not be considered obstacles
- `excludeEnds` - either `'source'` or `'target'` string that tells the algorithm that the element at that specified end of the link should not be considered an obstacle
- `startDirections` - an array of sides of the link source element that the link can start from. The default is all the sides `['left', 'right', 'top', 'bottom']`. Change this in situations where you want the link to e.g. always start at the bottom of the source element (the value would be `['bottom']`)
- `endDirections` - an array of sides of the link target element that the link can stick to. The default is all the sides `['left', 'right', 'top', 'bottom']`

Example:

    link.set('router', {
        name: 'manhattan',
        args: {
            startDirections: ['top'],
            endDirections: ['bottom'],
            excludeTypes: ['myNamespace.MyCommentElement']
        }
    });

Complete list of options for `manhattan`:

startDirection | Array<string> | Possible starting directions from an element. Default is `['left', 'right', 'top', 'bottom']`.
endDirection | Array<string> | Possible ending directions to an element. Default is `['left', 'right', 'top', 'bottom']`.
excludeTypes | Array<string> | Should be any element with a certain type not to be consider as an obstacle.
step | number | Size of the step to find a route. Lower number -> higher complexity. `manhattan` performs the best when `step` has the same value as `dia.Paper.option.gridSize`.
perpendicular | boolean | Use of the perpendicular linkView option to connect center of element with first vertex.
maximumLoops | number | If number of route finding loops exceed the maximum, stops searching and returns fallback route. Higher number -> higher complexity.
excludeEnds | Array<string> | Should be source or target not to be consider as an obstacle.
maxAllowedDirectionChange | number | Maximum change of the direction.

The `oneSide` routes the link in a given direction, creating exactly three orthogonal segments. It accepts the following options.

- `side` - the direction of the route. Either `'left'`, `'right'`, `'top'` or `'bottom'` (default).
- `padding` - a minimal gap between a connection point and the first/last vertex. It defaults to `40`.

Example:

    link.set('router', {
        name: oneSide',
        args: {
            side: 'top',
            padding: 30
        }
    });

New routers can be defined in the `joint.routers.[name of your router]` namespace or passed directly as functions to the `router` property of your links. The router is a function of the form `function(vertices, args, linkView)` and must return an array of vertices that the link should go through.

A `connector` takes points returned by a router and generate SVG path commands so the link can be rendered. There are four connectors (normal, smooth, rounded and jumpover) to your disposal.

The `normal` connector connects points with straight lines. The `rounded` connector does the same but it smooths all the edges. The `smooth` connector interpolates the points using a cubic bezier curve.

    link.set('connector', { name: 'normal' });
    link.set('connector', { name: 'smooth' });

The curve of edges can be specified by `radius` argument passed to the `rounded` connector.

    link.set('connector', { name: 'rounded', args: { radius: 10 }});

The `jumpover` connector draws straight lines with small arcs at positions, where a link crosses an another. It accepts the following options.

- `size` - the size of the jump. It defaults to `5`.
- `type` - the style of the jump. Either `'arc'` (default), `'cubic'` (similar to arc, but uses normalized path data commands only) or `'gap'`.

    link.set('connector', { name: 'jumpover', args: { type: 'gap' }});

To keep backwards compatible it's possible to set the `smooth` property to `true` in order to enable smooth connector.

    // old approach
    link.set('smooth', true)

Note that code responsible for routing and rendering links is completely pluggable so the family of routers and connectors can be easily extended.

New connectors can be defined (similarly to routers) in the `joint.connectors.[name of your connector]` namespace or passed directly as functions to the `connector` property of your links. The connector is a function of the form `function(sourcePoint, targetPoint, vertices, args, linkView)` and must return a string representing the SVG path data that will be used to render the link.

Styling of the link is contained in the `attrs` property which has exactly the same structure as the `attrs` property of elements. Please refer to the joint.dia.Element section and joint.dia.Link sections of this page for more information on this.

Links also have the `z` property which is the z-level of the link. `z` property has exactly the same meaning as the `z` property of elements.