Template:Diagram/doc
Copied from the terraria wiki
This template renders diagrams consisting of boxes (which may contain arbitrary wiki markup) and connecting lines, such as a family tree or crafting tree. The input for a diagram is based on an ASCII art-like syntax and its output consists of an HTML table.
The idea for the template originates from the Witcher Wiki.
Usage
{ diagram | <input parameters> | summary = <description> | style = <HTML styling> | boxstyle = <HTML box styling> | class = <CSS class name(s)> | id = <HTML ID> }
- summary
Description of the overall layout of the tree. This summary is for [[wikipedia:Template:Wikipedia/l10n{{#forargs:$|_key|_value|}}:accessibility|accessibility]]: it is read aloud to visually impaired readers who use [[wikipedia:Template:Wikipedia/l10n{{#forargs:$|_key|_value|}}:screen reader|screen reader]]s, and is invisible to sighted readers.
- style, class, id
HTML attributes style, class, and id, respectively, set on the entire diagram. The diagram will always have the CSS class diagram. A special class designed for crafting trees is available: crafting-tree.
- boxstyle
Styling that will be applied on each box of the diagram. By default, each box has 2-pixels-wide rounded borders and some padding.
- All other parameters
Layout and content of the diagram.
Layout and content
All unnamed parameters describe the contents of the diagram table. Each parameter specifies either a connector or a box.
There are two special types of unnamed parameters:
- New row: specified by the character
#. It will end a row of the diagram and start another row at the next parameter. It is recommended to also start a new row in the template transclusion code for readability, although that is not required. - Space: specified by the character
_,0orO. It will display empty space without a connector or a box, but still takes up content space.
Empty unnamed parameters are ignored and will not have any effect on the output at all.
Connectors
Connectors are the lines between boxes and can constitute horizontal and vertical lines, crossings thereof, and corners. They are specified using single-character symbols that more or less approximate the shape of the connector in appearance (at least in the basic cases).
, |
v |
. |
6 | ||||||||||||||||
) |
+ |
( |
I | ||||||||||||||||
` |
^ |
' |
9 | ||||||||||||||||
? |
- |
& |
_ | ||||||||||||||||
F |
V |
7 |
; | ||||||||||||||||
D |
X |
C |
: | ||||||||||||||||
L |
A |
J |
" | ||||||||||||||||
e |
~ |
a |
0 | ||||||||||||||||
r |
y |
n | ||||||||||||
] |
$ |
[ | ||||||||||||
c |
h |
j | ||||||||||||
p |
u |
q | ||||||||||||
E |
x |
3 | ||||||||||||
b |
t |
d | ||||||||||||
/ |
Y |
\ | ||||||||||||
B |
* |
G | ||||||||||||
R |
U |
4 |
P |
H | |||||||
K |
N |
T |
Z | ||||||||
S |
Q | ||||||||
f |
g | |||||||
k |
s |
o |
m | ||||||||
w |
z | ||||||||
5 |
> |
M | ||||||||||||
! |
O |
i | ||||||||||||
W |
< |
2 | ||||||||||||
← |
→ | ||||||||
↑ |
↓ | ||||||||
⇠ |
⇢ | ||||||||
⇡ |
⇣ | ||||||||
Boxes
Boxes are defined by custom names, though single-character names should be avoided to prevent conflicts with the connector identifiers. The content of a box is specified by a template parameter which has the name of the box. It can contain arbitrary wiki markup.
In the following example, a box named NPC1 is defined with the content of {{item|Guide}}. It is referenced in the layout of the diagram via its name: |NPC1|-|NPC1|#.
Each box is 3 tiles wide and 1 tile high by default. This size can be changed via the parameters <box name>_cols (width) and <box name>_rows (height).
In the following example, the sizes of boxes 3 and 4 are changed to accommodate some larger content. Notice how the layout code also changes – this is not required but ensures much-needed readability, especially when diagrams get bigger.
{{diagram
|_| B1 |~|~|y|~| B2 |_|#
|_|_|,|-|-|-|^|-|-|.|_|_|#
|_|_|I|_|_|_|_| B4 |#
| B3 |_|_|_| |#
|_|_|_|_|_|_|_| |#
| B1 = Short 1
| B2 = Short 2
| B3 = [[Spiked Slime]]
| B3_cols = 4
| B4 = [[King Slime]]
| B4_cols = 5
| B4_rows = 3
}}
| Short 1 | Short 2 | ||||||||||||||||||||||||||||||||||||||||||
| King Slime | Spiked Slime | ||||||||||||||||||||||||||||||||||||||||||
Caution: When changing the number of rows, the box name must be in the first row. For example, the following would not be allowed and cause unexpected results:
| |# | B4 |# | |#
Styling
Aside from the $boxstyle parameter (which changes the appearance of all boxes), each box can be styled individually via the parameter <box name>_boxstyle.
{{diagram
|GREEN|~|BLESS|#
| boxstyle = font-style: italic;
| GREEN = Green
| GREEN_boxstyle = color: var(--theme-text-color-green);
| BLESS = Borderless
| BLESS_boxstyle = border: 0; font-weight: bold;
}}
| Green | Borderless | ||||||||||||
Individual boxes can similarly also have CSS classes and IDs via the parameters <box name>_class and <box name>_id. All boxes will always have a class diagram-box.
{{diagram
|_|_|MAIN |_|_|#
|_|_|,|^|.|_|_|#
|BOX1 |_| BOX2|#
| MAIN = Top
| MAIN_id = main-box | MAIN_class = bigfont
| BOX1 = Left
| BOX2 = Right
| BOX2_class = bigfont
}}
With the following CSS, the above diagram would be rendered as shown below.
#main-box {
background-color: var(--theme-text-background-color-highlight);
}
.diagram-box.bigfont {
font-size: 130%;
}
| Top | |||||||||||||
| Left | Right | ||||||||||||
There are also some predefined classes available for diagram boxes:
no-borderto remove the border (as achieved with box styling in the example above)craft-stationfor appropriate styling of crafting stations in a crafting tree (i.e. no border and less padding)
Examples
Family tree
{{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 |_|CALLY|#
|_|,|-|-|-|+|-|-|-|.|_|_|_|#
| JOE |_| ME |_| SIS |_|_|#
| GMa = Gladys
| GPa = Sydney
| JOE = My brother Joe
| ME = '''Me!'''
| ME_boxstyle = border-color: var(--oouihelper--themerelated);
| SIS = My little sister
| MOM = Mom
| DAD = Dad
| CALLY = [[Nymph|Aunt Calanthe]]
}}
| Gladys | Sydney | ||||||||||||||||||||||||
| Mom | Dad | Aunt Calanthe | |||||||||||||||||||||||
| My brother Joe | Me! | My little sister | |||||||||||||||||||||||
Template:Category/db-en[[Category:Template:Tr ]]