Template:Diagram

This template uses Module:Diagram, a script written in the Lua programming language. To learn more about Lua, see Terraria Wiki:Lua.

CAUTION: Terraria Wiki code is complex!!!
If you want to use this code on another wiki, wiki.gg staff are not able to assist you.
Please consider picking a different wiki to adapt code from, or making your own templates!
Remember that content on a wiki is more important than fancy formatting.

Documentation The documentation below is transcluded from Template:Diagram/doc. (edit | history)

[purge]

For a common application of this template with many examples, see Category:Crafting tree subpages.

Quick reference: Jump to the list of connectors below.

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> | class = <CSS class name(s)> | id = <HTML ID> | boxstyle = <HTML styling of each box> | boxclass = <CSS class name(s) for each box> }}

summary

Description of 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.

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

Custom styling that will be applied on each box of the diagram.

boxclass

CSS class(es) that will be applied to each box of the diagram. The CSS class diagram-box is always added, which adds 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 _, 0 or O. 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).

Available connectors

Solid

,

v

.

6

)

+

(

I

`

^

'

9

?

-

&

_

Dashed

F

V

7

;

D

X

C

:

L

A

J

"

e

~

a

0

Mixed, vertical solid

r

y

n

]

$

[

c

h

j

Mixed, horizontal solid

p

u

q

E

x

3

b

t

d

Mixed, inner solid

/

Y

\

B

*

G

R

U

4

Mixed, 2 solids corner, 1 dashed

P

H

K

N

T

Z

S

Q

Mixed, 2 dasheds corner, 1 solid

f

g

k

s

o

m

w

z

Mixed, 2/4 lines, 1 solid

5

>

M

!

O

i

W

<

2

Arrows, solid

←

→

↑

↓

↔

↕

Arrows, dashed

⇠

⇢

⇡

⇣

⇄

⇅

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|#.

{{diagram
|NPC1|-|NPC1|#

| NPC1 = {{item|Guide}}
}}

Guide

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 = {{item|icons=n|Spiked Slime}}
| B3_cols = 4

| B4 = {{item|mode=image|size=100px|King Slime}}
| B4_cols = 5
| B4_rows = 3
}}

Short 1

Short 2

 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>_style.

{{diagram
|GREEN|~|BLESS|#

| boxstyle = font-style: italic;

| GREEN = Green
| GREEN_style = color: var(--theme-text-color-green);

| BLESS = Borderless
| BLESS_style = border: 0; font-weight: bold;
}}

Green

Borderless

Similarly, the $boxclass parameter is used to define CSS classes for all boxes, and the <box name>_class parameter adds additional classes to an individual box. All boxes will always have a class diagram-box.

Moreover, the <box name>_id parameter defines an HTML ID for an individual 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-border to remove the border (as achieved with box styling in the example above)
craft-station for 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_style = border-color: var(--oouihelper--themerelated);
| SIS = My little sister
| MOM = Mom
| DAD = Dad
| CALLY = [[Nymph|Aunt Calanthe]]
}}

 GladysSydney

Mom

Dad

Aunt Calanthe

My brother Joe

Me!

My little sister

Crafting tree

This example uses {{item}}'s options to avoid having to set these parameters on every single {{item}}.

{{options/set|item|icons=no|class=multi-line}}{{diagram|class=crafting-tree

|_|GdBar|_|Chain|_|PtBar|_|#
|_|_|`|v|-|'|_|`|-|v|'|_|_|#
|F|~|~|$|~|~|~|~|~|$|~|~|7|#
|:|_| T&C |_|_|_| T&C |_|:|#
|:| GdWatch |§| PtWatch |:|#
|L|~|~|~|~|~|y|~|~|~|~|~|J|#
|_| DepthMtr|I| Compass |_|#
|_|         |I|         |_|#
|_|         |I|         |_|#
|_|_|_|`|-|-|+|-|-|'|_|_|_|#
|_|_|_|_|_|_|@|_|_|_|_|_|_|#
|_|_|_|_|   GPS   |_|_|_|_|#

| PtBar = {{item|Platinum Bar}} × 10

| Chain = {{item|Chain}}

| GdBar = {{item|Gold Bar}} × 10

| T&C = {{item|mode=image|Table}} & {{item|mode=image|Chair}}
| T&C_class = craft-station

| GdWatch = {{item|Gold Watch}}
| GdWatch_cols = 5

| PtWatch = {{item|Platinum Watch}}
| PtWatch_cols = 5

| § = or
| §_cols = 1
| §_class = no-border

| DepthMtr =
{{item|Depth Meter}}<br/>
( {{inline block|<!--
-->{{item|mode=image|Cave Bat|size=13px}} <!--
-->{{item|mode=image|Giant Bat|size=21px}} <!--
-->{{item|mode=image|Jungle Bat|size=13px}} <!--
-->{{item|mode=image|Ice Bat|size=14px}} <!--
-->{{item|mode=image|Salamander|size=15px}} <!--
-->{{item|mode=image|Giant Shelly|size=18px}} <!--
-->{{item|mode=image|Crawdad|size=19px}}<br/><!--
--><span style{{=}}"font-size: 0.75em"><!--
-->Also craftable in {{icon|oldgen}}<!--
--></span>}} )
| DepthMtr_cols = 5
| DepthMtr_rows = 3

| Compass =
{{item|Compass}}<br/>
( {{inline block|<!--
-->{{item|mode=image|Salamander|size=15px}} <!--
-->{{item|mode=image|Giant Shelly|size=18px}} <!--
-->{{item|mode=image|Crawdad|size=19px}} <!--
-->{{item|mode=image|Mother Slime|size=22px}} <!--
-->{{item|mode=image|Piranha|size=14px}} <!--
-->{{item|mode=image|Snow Flinx|size=17px}} <!--
-->{{item|mode=image|Undead Viking|size=15px}} <!--
-->{{item|mode=image|Armored Viking|size=16px}}<br/><!--
--><span style{{=}}"font-size: 0.75em"><!--
-->Also dropped by {{item|mode=image|Mimic|size=x22px}} in {{icon|oldgen}}<!--
--></span>}} )
| Compass_cols = 5
| Compass_rows = 3

| @ = {{item|mode=image|Tinkerer's Workshop}}
| @_cols = 1
| @_class = craft-station

| GPS = {{item|GPS}}
| GPS_cols = 5

}}{{options/reset|item}}