Terraria Mods Wiki
Register
Advertisement

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 Template:Elnt 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 |summary=text 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:

    • Empty tile, specified by empty parameter input (empty string or space character(s) ). It will simply be ignored and will not produce any cell.
    • Space tile, specified by a _, 0 or O 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.

A table of supported tiles is given below.

Solid lines:
,
v
.
6
)
+
(
9
`
^
'
&
-
I
_
?
Dashed lines:
F
V
7
;
D
X
C
"
L
A
J
a
~
:
0
e
Mixed (1):
r
y
n
]
$
[
c
h
j
Mixed (2):
p
u
q
E
x
3
b
t
d
Mixed (3):
/
Y
\
B
*
G
R
U
4
Mixed (4):
i
M
!
W
<
2
>
5
Mixed (5):
P
H
f
g
K
N
k
s
T
Z
o
m
S
Q
w
z
Arrows:
  • 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.

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:

{{diagram
|_| FOO |~|~|y|~| BAR |_|#
|_|_|,|-|-|-|^|-|-|.|_|_|#
|_|_|I|_|_|_|_|   BAR2  |#
|  FOO2 |_|_|_|         |#
|_|_|_|_|_|_|_|         |#
|FOO=Box 1
|BAR=Box 2
|FOO2=Box 3
|FOO2_cols = 4
|BAR2=Box 4
|BAR2_cols = 5
|BAR2_rows = 3
}}

which produces a result like this:

Box 1Box 2
Box 4
Box 3

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

Style[]

Optional |style=, |class= and |id= 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 is used to append arbitrary CSS declarations directly to the box style attributes. For example, the following code:

{{diagram
|summary=Box 1 married to Box 2, with children Box 3 and Box 4

|boxstyle=background:#dfd; color:#000;

|_| FOO |y| BAR |_|#
|_|_|,|-|^|-|.|_|_|#
|_| FOO2|_| BAR2|_|#

|FOO=Box 1|BAR=Box 2
|FOO2=Box 3|BAR2=Box 4
}}

will produce a result like this:

Box 1Box 2
Box 3Box 4

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

{{diagram
|summary = White box with three children Red box, Green box, Blue box, all married to each other

|_|_|_|_|WHITE|_|_|_|_|#
|_|,|-|-|'|!|`|-|-|.|_|#
| RED |~|GREEN|~|BLUE |#

|WHITE= White box
|WHITE_boxstyle = background-color: #fff; color:#000;

|RED = Red box
|RED_boxstyle   = background-color: #faa; color:#000;

|GREEN = Green box
|GREEN_boxstyle = background-color: #afa; color:#000;

|BLUE = Blue box
|BLUE_boxstyle  = background-color: #aaf; color:#000;
}}

which produces the output:

White box
Red boxGreen boxBlue box

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

{{diagram
|summary = White box with three children Red box, Green box, Blue box, all married to each other

|_|_|_|_|WHITE|_|_|_|_|#
|_|,|-|-|'|!|`|-|-|.|_|#
| RED |~|GREEN|~|BLUE |#

|boxclass = box

|WHITE = White box
|WHITE_id = white-box | WHITE_class = type-A

|RED = Red box
|RED_class = box-red

|GREEN = Green box
|GREEN_class = type-A box-green

|BLUE = Blue box
|BLUE_class = type-B box-blue
}}

and CSS:

.box{
  /* for all boxes */
}
.type-A{
  /* styles for all type-A boxes */
}
.type-B{
  /* styles for all type-B boxes */
}
#white-box{
  /* styles for WHITE */
}
.box-red{
  /* styles for RED */
}
.box-green{
  /* styles for GREEN */
}
.box-blue{
  /* styles for BLUE */
}

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

Example usage[]

The code:

{{diagram
|summary=I have a brother Joe and a little sister: my mom married my dad, and my dad's parents were Gladys and Sydney; they had another child, Aunt Calanthe.

|_|_|_| GMa |~|y|~| GPa |_|#
|_|_|_|_|_|_|_|)|-|-|-|.|_|#
|_|_| MOM |y| DAD |_|DAISY|#
|_|,|-|-|-|+|-|-|-|.|_|_|_|#
| JOE |_| ME  |_| SIS |_|_|#

|GMa=Gladys
|GPa=Sydney
|JOE=My brother Joe
|ME='''Me!'''
|SIS=My little sister
|MOM=Mom
|DAD=Dad
|DAISY=[[Nymph|Aunt Calanthe]]
}}

produces this:

GladysSydney
MomDadAunt Calanthe
My brother JoeMe!My little sister
Advertisement