Routers take an array of link vertices and transform them into an array of route points that the link should go through. The router property of a link can be accessed with the link.router() function.

The difference between vertices and the route is that the vertices are user-defined while the route is computed. The route inserts additional private vertices to complement user vertices as necessary (e.g. to make sure the route is orthogonal).

There are five built-in routers:

• 'manhattan' - smart orthogonal router
• 'metro' - smart octolinear router
• 'normal' - default simple router
• 'orthogonal' - basic orthogonal router
• 'oneSide' - restricted orthogonal router

Example:

link.router('orthogonal', {
    padding: 10
});

The default router is 'normal'; this can be changed with the defaultRouter paper option. Example:

paper.options.defaultRouter = {
    name: 'orthogonal',
    args: {
        padding: 10
    }
});

The 'manhattan' and 'metro' routers are our smart routers; they automatically avoid obstacles (elements) in their way.

The 'orthogonal', 'manhattan' and 'oneSide' routers generate routes consisting exclusively of vertical and horizontal segments. The 'metro' router generates routes consisting of orthogonal and diagonal segments.

JointJS also contains mechanisms to define one's own custom routers.

Note that the modular architecture of JointJS allows mixing-and-matching routers with connectors as desired; for example, a link may be specified to use the 'jumpover' connector on top of the 'manhattan' router:

var link = new joint.shapes.standard.Link();
link.source(rect);
link.target(rect2);
link.router('manhattan');
link.connector('jumpover');