See something you'd like to change or add, but you've never edited an open encyclopædia before? This overview was written to help absolute beginners get started.

Help:Route diagrams

From A Storehouse of Knowledge
Jump to: navigation, search

This page describes how to add route diagrams to articles. It makes use of a custom-written MediaWiki "extension" (software which adds functionality to the core software) which allows users to build diagrams by placing a series of "tiles" on a grid formed by the cells of a HTML table.



The user provides instructions for building a diagram between a pair of <route> tags in the source code. The software reads this code, building a diagram as it reads the code. The software maintains a "cell pointer". Each entry is placed into the cell of the table indicated by the cell pointer, which is advanced to the next cell by indicators in the code.

This is best illustrated with an example, which produces the diagram shown (the box is not part of the result):

<route prefix="Rly">

The following explains each of these in order:

<route prefix="Rly"> The opening tag. This tag has a "prefix" attribute, indicating that all the tiles have a name beginning with "Rly.".
\ This tells the software to start a new row.
! This tells the software to start a new cell. The cell pointer is now at A1.
arrow-n Use tile Rly.arrow-n.png. The software sees that "arrow-n" doesn't contain a full stop, so adds "Rly." to the start, because that was set with the prefix attribute. It also adds the file type, .png.
; A semi-colon separates items in the same cell.
half-s This tells the software to use tile Rly.half-s.png. Again, the prefix and file type have been added by the software. Note that the cell pointer is still at cell A1; this now makes two tiles in the one cell. These two tiles are not side by side, but on top of each other. They have transparent backgrounds.
\ This tells the software to start a new row. The cell pointer is now on row 2.
! This tells the software to start a new cell. The cell pointer is now at A2.
n-s Use tile Rly.ns.png, representing a section of railway line. From the perspective of the diagram, the line is running from north to south (or vice versa).
stn Use tile Rly.stn.png. This tile representing a station is overlaid with the previous tile, producing the appearance of a station on the north-south section.
! This tells the software to start a new cell. The cell pointer is now at B2.
column-type=text This tells the software that all subsequent entries in this column (column B) are text, not tiles.
[[Midtown]] This is text that will appear as a link to another page. It is treated as text, rather than the name of a tile, because of the previous command.
</route> This closing tag marks the end of the diagram code.

Grid and tiles

The extension works by positioning image tiles relative to cells of a table, but not contained within them. Each cell is set to a fixed height and width by means of CSS settings, except that columns set to contain text only do not have a fixed width.

Each image tile is larger than the table cell it is tied to, which means that each tile overlaps the cells, and therefore the tiles, on each of its four sides and four corners. The larger dotted square around the station in the middle of the diagram at left shows the size of the tile compared to the cells, shown with the smaller dotted squares.

The extension

The extension allows for the user to place instructions on building a diagram between <route> tags in the source code.

The code indicates what tiles and text to use, and is normally arranged in the order that cells appear in a table. That is, cells are arranged as a sequence of individual cells in any number of rows.

The <route> tags themselves can also be given attributes.

The code between the <route> tags comprises the following:

  • Characters to separate the contents of one cell from the contents of another.
  • Characters to separate the contents of one row of the table from another.
  • The names of images which comprise the tiles which make up the diagram.
  • Text which appears in the diagram.
  • Instructions (commands) to set defaults, etc.

Each of these is explained in more detail below.

Tag attributes

The <route> tags can have a number of attributes controlling the appearance and behaviour of the diagram.

Attribute Value Example Explanation
grid "on" <route grid="on"> If there is a "grid" attribute set to "on", each cell of the table is given a dotted border.

This is intended to be used for debugging the code, and in pages listing the available tiles. By default, the attribute is not set.

link "on" <route link="on"> By default, images used in diagrams are not linked to the image itself, unlike other images on pages. Apart from cutting down the amount of code for a page, the reason for this is that diagrams are built from overlapping images, so if the images were linked, only the top-most image's link would be accessible. A reader clicking on the link would be taken to an image which only represents part of the area they clicked on, which could be confusing.

However, if there is a "link" attribute set to "on", the image will have the normal link to the original image in the file namespace. This is useful for pages listing the available tiles.

prefix Any valid prefix <route prefix="Rly"> A feature of the Route diagram extension is that users do not need to type common portions of tile names every time.

The Prefix attribute allows the user to set a prefix to the tile names. See more information below.

style Any valid CSS style <route style="background:yellow"> If the Style attribute is set, the table constructed for the diagram will have a style attribute set with the value provided here.

Content between tags

Start new cell

To start a new cell, include an exclamation mark (!).

Start new row

To start a new row, include a backslash (\).

Tile name

If a tile name prefix has been set (see prefixes, below), any tile name that does not contain a full stop will have the set prefix added to the start of the tile name.

Suppose that you want to use the tile shown at left. It's name is Goods.s-e.png. The software automatically provides the .png extension. So all you have to type is Goods.s-e. But if most or all of your tiles start of with "Goods.", you can set the prefix to be "Goods" and just type "s-e".


Text can be included quite readily, but you have to be careful to allow the software to distinguish between text and the name of a tile.

Text can be either left-aligned or right-aligned. The latter is useful for numeric text, such as distances or elevations.

To allow the software to distinguish between tile names and other text, you need to do one of the following:

  • Precede your text with "text=" or "text-right=". This tells the software that the following text is to be displayed as text, not interpreted as a tile name.
  • Set the column type to be text, with the "column-type=text" or "column-type=text-right". Once this is done, the software will treat all subsequent text in that column as text to be displayed. If you set a column to be text, then want to include a tile in that column, you can precede the tile name with "tile=".

Text can include Wikilinks, Wiki formatting, etc.

Column widths

All columns which have tiles in them are set to a fixed width (20px; controlled by CSS). All columns which do not have any tiles are allowed to be whatever width is required to provide room for the displayed text.

You can include text in columns which have tiles, but it will be positioned using a CSS style to "float" over anything else that is there (i.e. it has an attribute of position:absolute), so you need to be careful that it doesn't overlap something that it shouldn't.

This text controls the width of the third column.

This text is in the second column, which has tiles, so spreads across columns, and is too wide

Text that is in columns which have tiles can be offset horizontally and/or vertically with the same commands used to offset tiles, although some experimentation may be necessary to get the correct vertical offset.


Any text containing an equals sign (=) is assumed to be a command. These commands set or override defaults. Following is a list of the commands.

Command Value Example Applies to Explanation
cell= A cell address cell=D6 The cell pointer is set to point to the designated cell. For the purposes of this command, columns are numbered from left to right starting with "A" (and continuing after "Z" with "AA", "AB", and so on).

Rows are numbered from top to bottom, starting at 1.

One purpose of this command, in conjunction with the Prefix command, is to allow the user to specify all tiles of one prefix before all tiles of another prefix.

text= Any text, including with Wiki markup text=[[Flinders Street station]] Current item The text is output to the cell.
text-right= Any text, including with Wiki markup text=43.24km Current item The text is output to the cell, but right-aligned.
tile= A partial or full tile name tile=OldRly.stn Current item The text is treated as a partial or full tile name.
column-type= "text" or "text-right" or "tile" column=text Subsequent items in current column All subsequent entities in this column (unless otherwise specified or until this setting is changed) will be treated as text, right-aligned text, or tiles, as applicable. The default is "tile".
prefix= Text that is one of the conventional tile name prefixes (see below) prefix=OldRly All subsequent tiles All subsequent tile names which don't include a full stop will have this prefix added to the start of the tile name. A route-wide default can be set as an attribute to the <route> tag.
column-prefix= as above, or "" column-prefix=NewPas
All subsequent tiles in this column As above, but applies to the column only. An empty string after the equals sign means use the table-wide default (previous setting).
offset-x, offset-y fraction offset-x=0.5 All subsequent tiles in current cell Instead of being centred on the table cell, tile centres can be offset from the cell centre by a specified fraction. A common use for this is to offset tiles by a quarter or a half a cell width. Some text can also be offset; see in the text section above.
column-offset-x, column-offset-y fraction column-offset-y=0.25 All subsequent tiles in current column As above, but applies to the column.

The commands themselves are not case-sensitive.

Conventions on this site

Tiles exist for visually indicating the difference between the type of railway operation as well as whether the railway is open, closed, or planned/under construction.

The types of railway are as follows:

  • Normal railway
This indicates a railway which is a general carrier, which normally means that it carries both passenger and goods.
  • Passenger railway
This indicates a railway which exclusively carries passengers. This could be a metro, a tramway, a passenger-only suburban railway, or a very-high-speed passenger railway.
  • Goods line
This indicates a line which carries only goods trains.
  • Preserved railway
This indicates a railway which is a tourist railway, heritage railway, or preserved line.

If none of these types exactly describe a particular railway, the nearest type should be selected. For example, a goods-only railway that occasionally carries passenger trains for special events, charters, or diversions would still be shown as a goods railway.

The table below shows the colours used for each type of railway, along with the filename prefix that corresponds to that colour.

Open Closed Future
General railway Rly OldRly NewRly
Passenger line Pas OldPas NewPas
Goods line Goods OldGoods NewGoods
Preserved line Pres OldPres NewPres

How to overlap

When two or more tiles are used in the same cell, it is often necessary to ensure that they are placed in the correct order. The following two examples are of a junction where the line straight ahead is a goods-only line. Clearly the first example is how the diagram should appear. The difference between the two is the order in which the tiles are placed.

This code produces... ...this display


Bridges are another case where the order is important. We don't want what goes under the bridge to appear on top! Note that in this case, the order of the water relative to the bridge and railway are important, but the order of the bridge relative to the railway isn't.

This code produces... ...this display


Tunnels are a special case. Tunnel tiles have dashed lines in the background colour, in order to create visual breaks in the railway tile underneath. This avoids having to create separate tunnel tiles for every colour of railway tile.

Tunnel against normal background
Tunnel against darker background

This allows us to use the same tunnel on different railway types. In the following examples, each example uses one ordinary north-south route tile, as shown in the first example, with the same tunnel overlaid in each case.

Route box template

The {{route box}} template creates a box to hold a route diagram. By default, the box is floated to the right of the page, and includes links to a standard legend and to this page. It's one required parameter is the pair of route tags and the code between them.

This extension compared to Wikipedia's method

This extension produces similar results to Wikipedia's route diagrams, but does so by means of a different method. The code to produce it is completely different. Wikipedia uses complex templates with multiple parameters, whereas this extension uses code between <route> tags and a structure vaguely similar to Wiki table markup.

Another major difference is that Wikipedia's method uses separate images for almost every combination of route layout (although there is some limited capability of overlapping images), whereas this extension uses a smaller number of images but overlays them to make combinations. For example, in Wikipedia, the layouts below would be seven separate images, whereas the last four are here formed by overlaying combinations of the first three.

The following diagram uses only two different tiles. Wikipedia's method would require four different tiles, two for the curves, and two to fill in the bottom left corner of the top right cell and the top right corner of the bottom left cell. We can avoid the extra tiles because the tiles overlap the cell boundaries.

(showing cells)

(not showing cells)

List of tiles

See List of Route tiles for a list of tiles.

Personal tools

visitor navigation
contributor navigation