Template:Diagram/doc

This template was originally ported from by Rye Greenwood, later, after a complete rewrite, the function was improved and the performance was greatly optimized.

Please note that some line drawing symbols are different from origin.

This is a template for rendering simple diagrams consisting of boxes and connecting lines such as 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.

Example usage
This code: 

Produces this:

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 describing the contents of the diagram table. Each parameter specifies a tile or a box. There are some special cases: A table of supported tiles is given below.
 * 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.
 * 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 without any content but take cell space as 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 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.

produces a result like this:

NOTE: If you make a mulit-rows cell, you must put 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 boxstyle. It be used to append arbitrary CSS declarations directly to the box style attributes. For example, the following code:



It 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:  .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, so you can use   selector (or more qualified,  ) to set default styles for boxes.