View source for Template:Diagram/doc

Copied from the terraria wiki
{{dablink|Quick reference: Jump to the [[#Connectors|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 {{elnt|https://witcher.fandom.com/Template:Family_tree|Witcher Wiki}}.

== Usage ==
<code>{{(}} '''diagram''' | ''&lt;input parameters&gt;'' | summary = ''&lt;description&gt;'' | style = ''&lt;HTML styling&gt;'' | boxstyle = ''&lt;HTML box styling&gt;'' | class = ''&lt;CSS class name(s)&gt;'' | id = ''&lt;HTML ID&gt;'' {{)}}</code>

; summary
Description of the overall layout of the tree. This summary is for {{wikipedia|accessibility}}: it is read aloud to visually impaired readers who use {{wikipedia|screen reader}}s, and is invisible to sighted readers.

; style, class, id
HTML attributes <code>style</code>, <code>class</code>, and <code>id</code>, respectively, set on the entire diagram. The diagram will always have the CSS class <code>diagram</code>. A special class designed for crafting trees is available: <code>crafting-tree</code>.

; 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 <code>#</code>. 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 <code>_</code>, <code>0</code> or <code>O</code>. 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).

{{infocard/start|class=compact|name=Available connectors}}
{{flexstart|style=column-gap:var(--layout-gap); row-gap:0}}
{{infocard/box/start|title=Solid}}
{| class="align-center" style="border-collapse: separate; border-spacing: 0 1em; margin-top: -1em;"
| <code>,</code><br/>{{diagram|class=diagramdoc|,}}
| <code>v</code><br/>{{diagram|class=diagramdoc|v}}
| <code>.</code><br/>{{diagram|class=diagramdoc|.}}
| <code>6</code><br/>{{diagram|class=diagramdoc|6}}
|-
| <code>)</code><br/>{{diagram|class=diagramdoc|)}}
| <code>+</code><br/>{{diagram|class=diagramdoc|+}}
| <code>(</code><br/>{{diagram|class=diagramdoc|(}}
| <code>I</code><br/>{{diagram|class=diagramdoc|I}}
|-
| <code>`</code><br/>{{diagram|class=diagramdoc|`}}
| <code>^</code><br/>{{diagram|class=diagramdoc|^}}
| <code>'</code><br/>{{diagram|class=diagramdoc|'}}
| <code>9</code><br/>{{diagram|class=diagramdoc|9}}
|-
| <code>?</code><br/>{{diagram|class=diagramdoc|?}}
| <code>-</code><br/>{{diagram|class=diagramdoc|-}}
| <code>&</code><br/>{{diagram|class=diagramdoc|&}}
| <code>_</code><br/>{{diagram|class=diagramdoc|_}}
|}
{{infocard/box/end}}

{{infocard/box/start|title=Dashed}}
{| class="align-center" style="border-collapse: separate; border-spacing: 0 1em; margin-top: -1em;"
| <code>F</code><br/>{{diagram|class=diagramdoc|F}}
| <code>V</code><br/>{{diagram|class=diagramdoc|V}}
| <code>7</code><br/>{{diagram|class=diagramdoc|7}}
| <code>;</code><br/>{{diagram|class=diagramdoc|;}}
|-
| <code>D</code><br/>{{diagram|class=diagramdoc|D}}
| <code>X</code><br/>{{diagram|class=diagramdoc|X}}
| <code>C</code><br/>{{diagram|class=diagramdoc|C}}
| <code>:</code><br/>{{diagram|class=diagramdoc|:}}
|-
| <code>L</code><br/>{{diagram|class=diagramdoc|L}}
| <code>A</code><br/>{{diagram|class=diagramdoc|A}}
| <code>J</code><br/>{{diagram|class=diagramdoc|J}}
| <code>"</code><br/>{{diagram|class=diagramdoc|"}}
|-
| <code>e</code><br/>{{diagram|class=diagramdoc|e}}
| <code>~</code><br/>{{diagram|class=diagramdoc|~}}
| <code>a</code><br/>{{diagram|class=diagramdoc|a}}
| <code>0</code><br/>{{diagram|class=diagramdoc|0}}
|}
{{infocard/box/end}}

{{infocard/box/start|title=Mixed, vertical solid}}
{| class="align-center" style="border-collapse: separate; border-spacing: 0 1em; margin-top: -1em;"
| <code>r</code><br/>{{diagram|class=diagramdoc|r}}
| <code>y</code><br/>{{diagram|class=diagramdoc|y}}
| <code>n</code><br/>{{diagram|class=diagramdoc|n}}
|-
| <code>]</code><br/>{{diagram|class=diagramdoc|]}}
| <code>$</code><br/>{{diagram|class=diagramdoc|$}}
| <code>[</code><br/>{{diagram|class=diagramdoc|[}}
|-
| <code>c</code><br/>{{diagram|class=diagramdoc|c}}
| <code>h</code><br/>{{diagram|class=diagramdoc|h}}
| <code>j</code><br/>{{diagram|class=diagramdoc|j}}
|}
{{infocard/box/end}}

{{infocard/box/start|title=Mixed, horizontal solid}}
{| class="align-center" style="border-collapse: separate; border-spacing: 0 1em; margin-top: -1em;"
| <code>p</code><br/>{{diagram|class=diagramdoc|p}}
| <code>u</code><br/>{{diagram|class=diagramdoc|u}}
| <code>q</code><br/>{{diagram|class=diagramdoc|q}}
|-
| <code>E</code><br/>{{diagram|class=diagramdoc|E}}
| <code>x</code><br/>{{diagram|class=diagramdoc|x}}
| <code>3</code><br/>{{diagram|class=diagramdoc|3}}
|-
| <code>b</code><br/>{{diagram|class=diagramdoc|b}}
| <code>t</code><br/>{{diagram|class=diagramdoc|t}}
| <code>d</code><br/>{{diagram|class=diagramdoc|d}}
|}
{{infocard/box/end}}

{{infocard/box/start|title=Mixed, inner solid}}
{| class="align-center" style="border-collapse: separate; border-spacing: 0 1em; margin-top: -1em;"
| <code>/</code><br/>{{diagram|class=diagramdoc|/}}
| <code>Y</code><br/>{{diagram|class=diagramdoc|Y}}
| <code>\</code><br/>{{diagram|class=diagramdoc|\}}
|-
| <code>B</code><br/>{{diagram|class=diagramdoc|B}}
| <code>*</code><br/>{{diagram|class=diagramdoc|*}}
| <code>G</code><br/>{{diagram|class=diagramdoc|G}}
|-
| <code>R</code><br/>{{diagram|class=diagramdoc|R}}
| <code>U</code><br/>{{diagram|class=diagramdoc|U}}
| <code>4</code><br/>{{diagram|class=diagramdoc|4}}
|}
{{infocard/box/end}}

{{infocard/box/start|title=Mixed, 2 solids corner, 1 dashed}}
{{flexstart|style=column-gap:1.5em}}
{| class="align-center" style="border-collapse: separate; border-spacing: 0 1em; margin-top: -1em;"
| <code>P</code><br/>{{diagram|class=diagramdoc|P}}
| <code>H</code><br/>{{diagram|class=diagramdoc|H}}
|-
| <code>K</code><br/>{{diagram|class=diagramdoc|K}}
| <code>N</code><br/>{{diagram|class=diagramdoc|N}}
|}
{| class="align-center" style="border-collapse: separate; border-spacing: 0 1em; margin-top: -1em;"
| <code>T</code><br/>{{diagram|class=diagramdoc|T}}
| <code>Z</code><br/>{{diagram|class=diagramdoc|Z}}
|-
| <code>S</code><br/>{{diagram|class=diagramdoc|S}}
| <code>Q</code><br/>{{diagram|class=diagramdoc|Q}}
|}
{{flexend}}
{{infocard/box/end}}

{{infocard/box/start|title=Mixed, 2 dasheds corner, 1 solid}}
{{flexstart|style=column-gap:1.5em}}
{| class="align-center" style="border-collapse: separate; border-spacing: 0 1em; margin-top: -1em;"
| <code>f</code><br/>{{diagram|class=diagramdoc|f}}
| <code>g</code><br/>{{diagram|class=diagramdoc|g}}
|-
| <code>k</code><br/>{{diagram|class=diagramdoc|k}}
| <code>s</code><br/>{{diagram|class=diagramdoc|s}}
|-
|}
{| class="align-center" style="border-collapse: separate; border-spacing: 0 1em; margin-top: -1em;"
| <code>o</code><br/>{{diagram|class=diagramdoc|o}}
| <code>m</code><br/>{{diagram|class=diagramdoc|m}}
|-
| <code>w</code><br/>{{diagram|class=diagramdoc|w}}
| <code>z</code><br/>{{diagram|class=diagramdoc|z}}
|}
{{flexend}}
{{infocard/box/end}}

{{infocard/box/start|title=Mixed, 2/4 lines, 1 solid}}
{| class="align-center" style="border-collapse: separate; border-spacing: 0 1em; margin-top: -1em;"
| <code>5</code><br/>{{diagram|class=diagramdoc|5}}
| <code>></code><br/>{{diagram|class=diagramdoc|>}}
| <code>M</code><br/>{{diagram|class=diagramdoc|M}}
|-
| <code>!</code><br/>{{diagram|class=diagramdoc|!}}
| <code>O</code><br/>{{diagram|class=diagramdoc|O}}
| <code>i</code><br/>{{diagram|class=diagramdoc|i}}
|-
| <code>W</code><br/>{{diagram|class=diagramdoc|W}}
| <code><</code><br/>{{diagram|class=diagramdoc|<}}
| <code>2</code><br/>{{diagram|class=diagramdoc|2}}
|}
{{infocard/box/end}}

{{infocard/box/start|title=Arrows, solid}}
{| class="align-center" style="border-collapse: separate; border-spacing: 0 1em; margin-top: -1em;"
| <code>←</code><br/>{{diagram|class=diagramdoc|←}}
| <code>→</code><br/>{{diagram|class=diagramdoc|→}}
|-
| <code>↑</code><br/>{{diagram|class=diagramdoc|↑}}
| <code>↓</code><br/>{{diagram|class=diagramdoc|↓}}
|}
{{infocard/box/end}}

{{infocard/box/start|title=Arrows, dashed}}
{| class="align-center" style="border-collapse: separate; border-spacing: 0 1em; margin-top: -1em;"
| <code>⇠</code><br/>{{diagram|class=diagramdoc|⇠}}
| <code>⇢</code><br/>{{diagram|class=diagramdoc|⇢}}
|-
| <code>⇡</code><br/>{{diagram|class=diagramdoc|⇡}}
| <code>⇣</code><br/>{{diagram|class=diagramdoc|⇣}}
|}
{{infocard/box/end}}
{{flexend}}
{{infocard/end}}

==== 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 <code>NPC1</code> is defined with the content of {{tl|code=y|item|Guide}}. It is referenced in the layout of the diagram via its name: <code>|'''NPC1'''|-|'''NPC1'''|#</code>.

{{flexstart|style=gap:var(--layout-gap)|alignitems=center}}
<pre>
{{diagram
|NPC1|-|NPC1|#

| NPC1 = [[Guide]]
}}
</pre>
{{diagram
|NPC1|-|NPC1|#

| NPC1 = [[Guide]]
}}
{{flexend}}

Each box is ''3 tiles wide'' and ''1 tile high'' by default. This size can be changed via the parameters <code>''&lt;box name&gt;''_cols</code> (width) and <code>''&lt;box name&gt;''_rows</code> (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.

{{flexstart|style=gap:var(--layout-gap)|alignitems=center}}
<pre>
{{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
}}
</pre>
{{diagram
|_|  B1 |~|~|y|~| B2  |_|#
|_|_|,|-|-|-|^|-|-|.|_|_|#
|_|_|I|_|_|_|_|   B4    |#f
|   B3  |_|_|_|         |#
|_|_|_|_|_|_|_|         |#

| B1 = Short 1

| B2 = Short 2

| B3 = [[Spiked Slime]]
| B3_cols = 4

| B4 = [[King Slime]]
| B4_cols = 5
| B4_rows = 3
}}
{{flexend}}

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:

{{flexstart}}
<pre>
|         |#
|   B4    |#
|         |#
</pre>
{{flexend}}

=== Styling ===
Aside from the <code>$boxstyle</code> parameter (which changes the appearance of all boxes), each box can be styled individually via the parameter <code>''&lt;box name&gt;''_boxstyle</code>.

{{flexstart|style=gap:var(--layout-gap)|alignitems=center}}
<pre>
{{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;
}}
</pre>
{{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;
}}
{{flexend}}

Individual boxes can similarly also have CSS classes and IDs via the parameters <code>''&lt;box name&gt;''_class</code> and <code>''&lt;box name&gt;''_id</code>. All boxes will always have a class <code>diagram-box</code>.

<pre>
{{diagram
|_|_|MAIN |_|_|#
|_|_|,|^|.|_|_|#
|BOX1 |_| BOX2|#

| MAIN = Top
| MAIN_id = main-box | MAIN_class = bigfont

| BOX1 = Left

| BOX2 = Right
| BOX2_class = bigfont
}}
</pre>

With the following CSS, the above diagram would be rendered as shown below.

<pre>
#main-box {
    background-color: var(--theme-text-background-color-highlight);
}
.diagram-box.bigfont {
    font-size: 130%;
}
</pre>

{{diagram|style=margin-top:0.5em
|_|_|MAIN |_|_|#
|_|_|,|^|.|_|_|#
|BOX1 |_| BOX2|#

| MAIN = Top
| MAIN_id = main-box | MAIN_class = bigfont | MAIN_boxstyle = background-color: var(--theme-text-background-color-highlight); font-size: 130%;

| BOX1 = Left

| BOX2 = Right
| BOX2_class = bigfont | BOX2_boxstyle = font-size: 130%;
}}

There are also some predefined classes available for diagram boxes:
* <code>no-border</code> to remove the border (as achieved with box styling in the example above)
* <code>craft-station</code> for appropriate styling of [[crafting stations]] in a crafting tree (i.e. no border and less padding)

== Examples ==
=== Family tree ===
{{flexstart|style=gap:var(--layout-gap)|alignitems=center}}
<pre>
{{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]]
}}
</pre>
{{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]]
}}
{{flexend}}

<noinclude>
{{category|Template documentation}}
</noinclude>