Template:Diagram/doc

This is a template for rendering simple diagrams consisting of boxes and connecting lines such as a family tree based on an ASCII art-like syntax. The trees are displayed as HTML tables using CSS attributes, and may contain arbitrary wiki markup within the boxes.

The template was originally ported from the family tree template on The Witcher Wiki by Rye Greenwood. To adjust it to the needs of Terraria Wiki, Westgrass completely rewrote it, improving the function and greatly optimizing the performance.

Please note that some line drawing symbols are different from the original.

Parameters
The  parameter should be used to describe the overall layout of the tree. This summary is for accessibility: it is read aloud to visually impaired readers who use screen readers, and is invisible to sighted readers.

Layout
All unnamed parameters describe the contents of the diagram table. Each parameter specifies a tile or a box.
 * Tiles are line drawing symbols consisting of horizontal and vertical lines and various corners and crossings thereof. Tiles are specified using single-character symbols that more or less approximate the shape of the tile in appearance.

There are some special cases: A table of supported tiles is given below.
 * Empty tile, specified by empty parameter input (empty string ). It will simply be ignored and will not produce any cell.
 * Space tile, specified by a,   or   character. It will produce a space cell that lacks content but takes cell space like other cells.
 * New row, specified by a  character. It will end the current row and start another row at the next parameter.

Each box is 3 tiles wide and 1 tile height by default, and normally has a 2 pixels wide blue border. The size of the box can be changed like this: 
 * Boxes can contain arbitrary wiki markup. The contents of boxes are specified using additional named parameters appended to the template call. Boxes can have any name that is a valid template parameter name, although single character names may be avoided to prevent conflicts with tile symbols.

which produces a result like this:

Note: If you make a multi-rows cell, you must put the box name in the first row.

Style
Optional,   and   parameters can be used to set CSS styles/class/id for the diagram table itself.

The appearance of the boxes may be controlled by the optional parameter. It is used to append arbitrary CSS declarations directly to the box style attributes. For example, the following code:



will produce a result like this:

Style attributes can even be set for individual boxes, as in the example below:



which produces the output:

Also, you can assign CSS by class/id, like this: 

and CSS:  .box{ /* for all boxes */ } .type-A{ /* styles for all type-A boxes */ } .type-B{ /* styles for all type-B boxes */ } /* styles for WHITE */ } .box-red{ /* styles for RED */ } .box-green{ /* styles for GREEN */ } .box-blue{ /* styles for BLUE */ }
 * 1) white-box{

Note: The diagram itself will always have a  class, and all boxes in diagrams will always have a   class.

Example usage
The code: 

produces this: