https://wiki.you107657.duckdns.org/index.php?action=history&feed=atom&title=Template%3ADiagram%2Fdoc Template:Diagram/doc - Revision history 2026-09-25T19:44:33Z Revision history for this page on the wiki MediaWiki 1.43.9 https://wiki.you107657.duckdns.org/index.php?title=Template:Diagram/doc&diff=4837&oldid=prev imported>Merge: merge.py 2026-09-25T10:55:52Z <p>merge.py</p> <p><b>New page</b></p><div>Copied from the terraria wiki<br /> {{dablink|Quick reference: Jump to the [[#Connectors|list of connectors]] below.}}<br /> <br /> 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.<br /> <br /> The idea for the template originates from the {{elnt|https://witcher.fandom.com/Template:Family_tree|Witcher Wiki}}.<br /> <br /> == Usage ==<br /> &lt;code&gt;{{(}} &#039;&#039;&#039;diagram&#039;&#039;&#039; | &#039;&#039;&amp;lt;input parameters&amp;gt;&#039;&#039; | summary = &#039;&#039;&amp;lt;description&amp;gt;&#039;&#039; | style = &#039;&#039;&amp;lt;HTML styling&amp;gt;&#039;&#039; | boxstyle = &#039;&#039;&amp;lt;HTML box styling&amp;gt;&#039;&#039; | class = &#039;&#039;&amp;lt;CSS class name(s)&amp;gt;&#039;&#039; | id = &#039;&#039;&amp;lt;HTML ID&amp;gt;&#039;&#039; {{)}}&lt;/code&gt;<br /> <br /> ; summary<br /> 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.<br /> <br /> ; style, class, id<br /> HTML attributes &lt;code&gt;style&lt;/code&gt;, &lt;code&gt;class&lt;/code&gt;, and &lt;code&gt;id&lt;/code&gt;, respectively, set on the entire diagram. The diagram will always have the CSS class &lt;code&gt;diagram&lt;/code&gt;. A special class designed for crafting trees is available: &lt;code&gt;crafting-tree&lt;/code&gt;.<br /> <br /> ; boxstyle<br /> Styling that will be applied on each box of the diagram. By default, each box has 2-pixels-wide rounded borders and some padding.<br /> <br /> ; All other parameters<br /> Layout and content of the diagram.<br /> <br /> === Layout and content ===<br /> All unnamed parameters describe the contents of the diagram table. Each parameter specifies either a &#039;&#039;&#039;connector&#039;&#039;&#039; or a &#039;&#039;&#039;box&#039;&#039;&#039;.<br /> <br /> There are two special types of unnamed parameters:<br /> * New row: specified by the character &lt;code&gt;#&lt;/code&gt;. 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.<br /> * Space: specified by the character &lt;code&gt;_&lt;/code&gt;, &lt;code&gt;0&lt;/code&gt; or &lt;code&gt;O&lt;/code&gt;. It will display empty space without a connector or a box, but still takes up content space.<br /> <br /> Empty unnamed parameters are ignored and will not have any effect on the output at all. <br /> <br /> ==== Connectors ====<br /> 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).<br /> <br /> {{infocard/start|class=compact|name=Available connectors}}<br /> {{flexstart|style=column-gap:var(--layout-gap); row-gap:0}}<br /> {{infocard/box/start|title=Solid}}<br /> {| class=&quot;align-center&quot; style=&quot;border-collapse: separate; border-spacing: 0 1em; margin-top: -1em;&quot;<br /> | &lt;code&gt;,&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|,}}<br /> | &lt;code&gt;v&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|v}}<br /> | &lt;code&gt;.&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|.}}<br /> | &lt;code&gt;6&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|6}}<br /> |-<br /> | &lt;code&gt;)&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|)}}<br /> | &lt;code&gt;+&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|+}}<br /> | &lt;code&gt;(&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|(}}<br /> | &lt;code&gt;I&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|I}}<br /> |-<br /> | &lt;code&gt;`&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|`}}<br /> | &lt;code&gt;^&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|^}}<br /> | &lt;code&gt;&#039;&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|&#039;}}<br /> | &lt;code&gt;9&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|9}}<br /> |-<br /> | &lt;code&gt;?&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|?}}<br /> | &lt;code&gt;-&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|-}}<br /> | &lt;code&gt;&amp;&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|&amp;}}<br /> | &lt;code&gt;_&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|_}}<br /> |}<br /> {{infocard/box/end}}<br /> <br /> {{infocard/box/start|title=Dashed}}<br /> {| class=&quot;align-center&quot; style=&quot;border-collapse: separate; border-spacing: 0 1em; margin-top: -1em;&quot;<br /> | &lt;code&gt;F&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|F}}<br /> | &lt;code&gt;V&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|V}}<br /> | &lt;code&gt;7&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|7}}<br /> | &lt;code&gt;;&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|;}}<br /> |-<br /> | &lt;code&gt;D&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|D}}<br /> | &lt;code&gt;X&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|X}}<br /> | &lt;code&gt;C&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|C}}<br /> | &lt;code&gt;:&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|:}}<br /> |-<br /> | &lt;code&gt;L&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|L}}<br /> | &lt;code&gt;A&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|A}}<br /> | &lt;code&gt;J&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|J}}<br /> | &lt;code&gt;&quot;&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|&quot;}}<br /> |-<br /> | &lt;code&gt;e&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|e}}<br /> | &lt;code&gt;~&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|~}}<br /> | &lt;code&gt;a&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|a}}<br /> | &lt;code&gt;0&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|0}}<br /> |}<br /> {{infocard/box/end}}<br /> <br /> {{infocard/box/start|title=Mixed, vertical solid}}<br /> {| class=&quot;align-center&quot; style=&quot;border-collapse: separate; border-spacing: 0 1em; margin-top: -1em;&quot;<br /> | &lt;code&gt;r&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|r}}<br /> | &lt;code&gt;y&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|y}}<br /> | &lt;code&gt;n&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|n}}<br /> |-<br /> | &lt;code&gt;]&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|]}}<br /> | &lt;code&gt;$&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|$}}<br /> | &lt;code&gt;[&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|[}}<br /> |-<br /> | &lt;code&gt;c&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|c}}<br /> | &lt;code&gt;h&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|h}}<br /> | &lt;code&gt;j&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|j}}<br /> |}<br /> {{infocard/box/end}}<br /> <br /> {{infocard/box/start|title=Mixed, horizontal solid}}<br /> {| class=&quot;align-center&quot; style=&quot;border-collapse: separate; border-spacing: 0 1em; margin-top: -1em;&quot;<br /> | &lt;code&gt;p&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|p}}<br /> | &lt;code&gt;u&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|u}}<br /> | &lt;code&gt;q&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|q}}<br /> |-<br /> | &lt;code&gt;E&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|E}}<br /> | &lt;code&gt;x&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|x}}<br /> | &lt;code&gt;3&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|3}}<br /> |-<br /> | &lt;code&gt;b&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|b}}<br /> | &lt;code&gt;t&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|t}}<br /> | &lt;code&gt;d&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|d}}<br /> |}<br /> {{infocard/box/end}}<br /> <br /> {{infocard/box/start|title=Mixed, inner solid}}<br /> {| class=&quot;align-center&quot; style=&quot;border-collapse: separate; border-spacing: 0 1em; margin-top: -1em;&quot;<br /> | &lt;code&gt;/&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|/}}<br /> | &lt;code&gt;Y&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|Y}}<br /> | &lt;code&gt;\&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|\}}<br /> |-<br /> | &lt;code&gt;B&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|B}}<br /> | &lt;code&gt;*&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|*}}<br /> | &lt;code&gt;G&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|G}}<br /> |-<br /> | &lt;code&gt;R&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|R}}<br /> | &lt;code&gt;U&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|U}}<br /> | &lt;code&gt;4&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|4}}<br /> |}<br /> {{infocard/box/end}}<br /> <br /> {{infocard/box/start|title=Mixed, 2 solids corner, 1 dashed}}<br /> {{flexstart|style=column-gap:1.5em}}<br /> {| class=&quot;align-center&quot; style=&quot;border-collapse: separate; border-spacing: 0 1em; margin-top: -1em;&quot;<br /> | &lt;code&gt;P&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|P}}<br /> | &lt;code&gt;H&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|H}}<br /> |-<br /> | &lt;code&gt;K&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|K}}<br /> | &lt;code&gt;N&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|N}}<br /> |}<br /> {| class=&quot;align-center&quot; style=&quot;border-collapse: separate; border-spacing: 0 1em; margin-top: -1em;&quot;<br /> | &lt;code&gt;T&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|T}}<br /> | &lt;code&gt;Z&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|Z}}<br /> |-<br /> | &lt;code&gt;S&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|S}}<br /> | &lt;code&gt;Q&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|Q}}<br /> |}<br /> {{flexend}}<br /> {{infocard/box/end}}<br /> <br /> {{infocard/box/start|title=Mixed, 2 dasheds corner, 1 solid}}<br /> {{flexstart|style=column-gap:1.5em}}<br /> {| class=&quot;align-center&quot; style=&quot;border-collapse: separate; border-spacing: 0 1em; margin-top: -1em;&quot;<br /> | &lt;code&gt;f&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|f}}<br /> | &lt;code&gt;g&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|g}}<br /> |-<br /> | &lt;code&gt;k&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|k}}<br /> | &lt;code&gt;s&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|s}}<br /> |-<br /> |}<br /> {| class=&quot;align-center&quot; style=&quot;border-collapse: separate; border-spacing: 0 1em; margin-top: -1em;&quot;<br /> | &lt;code&gt;o&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|o}}<br /> | &lt;code&gt;m&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|m}}<br /> |-<br /> | &lt;code&gt;w&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|w}}<br /> | &lt;code&gt;z&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|z}}<br /> |}<br /> {{flexend}}<br /> {{infocard/box/end}}<br /> <br /> {{infocard/box/start|title=Mixed, 2/4 lines, 1 solid}}<br /> {| class=&quot;align-center&quot; style=&quot;border-collapse: separate; border-spacing: 0 1em; margin-top: -1em;&quot;<br /> | &lt;code&gt;5&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|5}}<br /> | &lt;code&gt;&gt;&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|&gt;}}<br /> | &lt;code&gt;M&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|M}}<br /> |-<br /> | &lt;code&gt;!&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|!}}<br /> | &lt;code&gt;O&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|O}}<br /> | &lt;code&gt;i&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|i}}<br /> |-<br /> | &lt;code&gt;W&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|W}}<br /> | &lt;code&gt;&lt;&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|&lt;}}<br /> | &lt;code&gt;2&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|2}}<br /> |}<br /> {{infocard/box/end}}<br /> <br /> {{infocard/box/start|title=Arrows, solid}}<br /> {| class=&quot;align-center&quot; style=&quot;border-collapse: separate; border-spacing: 0 1em; margin-top: -1em;&quot;<br /> | &lt;code&gt;←&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|←}}<br /> | &lt;code&gt;→&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|→}}<br /> |-<br /> | &lt;code&gt;↑&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|↑}}<br /> | &lt;code&gt;↓&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|↓}}<br /> |}<br /> {{infocard/box/end}}<br /> <br /> {{infocard/box/start|title=Arrows, dashed}}<br /> {| class=&quot;align-center&quot; style=&quot;border-collapse: separate; border-spacing: 0 1em; margin-top: -1em;&quot;<br /> | &lt;code&gt;⇠&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|⇠}}<br /> | &lt;code&gt;⇢&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|⇢}}<br /> |-<br /> | &lt;code&gt;⇡&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|⇡}}<br /> | &lt;code&gt;⇣&lt;/code&gt;&lt;br/&gt;{{diagram|class=diagramdoc|⇣}}<br /> |}<br /> {{infocard/box/end}}<br /> {{flexend}}<br /> {{infocard/end}}<br /> <br /> ==== Boxes ====<br /> 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.<br /> <br /> In the following example, a box named &lt;code&gt;NPC1&lt;/code&gt; is defined with the content of {{tl|code=y|item|Guide}}. It is referenced in the layout of the diagram via its name: &lt;code&gt;|&#039;&#039;&#039;NPC1&#039;&#039;&#039;|-|&#039;&#039;&#039;NPC1&#039;&#039;&#039;|#&lt;/code&gt;.<br /> <br /> {{flexstart|style=gap:var(--layout-gap)|alignitems=center}}<br /> &lt;pre&gt;<br /> {{diagram<br /> |NPC1|-|NPC1|#<br /> <br /> | NPC1 = [[Guide]]<br /> }}<br /> &lt;/pre&gt;<br /> {{diagram<br /> |NPC1|-|NPC1|#<br /> <br /> | NPC1 = [[Guide]]<br /> }}<br /> {{flexend}}<br /> <br /> Each box is &#039;&#039;3 tiles wide&#039;&#039; and &#039;&#039;1 tile high&#039;&#039; by default. This size can be changed via the parameters &lt;code&gt;&#039;&#039;&amp;lt;box name&amp;gt;&#039;&#039;_cols&lt;/code&gt; (width) and &lt;code&gt;&#039;&#039;&amp;lt;box name&amp;gt;&#039;&#039;_rows&lt;/code&gt; (height).<br /> <br /> 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.<br /> <br /> {{flexstart|style=gap:var(--layout-gap)|alignitems=center}}<br /> &lt;pre&gt;<br /> {{diagram<br /> |_| B1 |~|~|y|~| B2 |_|#<br /> |_|_|,|-|-|-|^|-|-|.|_|_|#<br /> |_|_|I|_|_|_|_| B4 |#<br /> | B3 |_|_|_| |#<br /> |_|_|_|_|_|_|_| |#<br /> <br /> | B1 = Short 1<br /> <br /> | B2 = Short 2<br /> <br /> | B3 = [[Spiked Slime]]<br /> | B3_cols = 4<br /> <br /> | B4 = [[King Slime]]<br /> | B4_cols = 5<br /> | B4_rows = 3<br /> }}<br /> &lt;/pre&gt;<br /> {{diagram<br /> |_| B1 |~|~|y|~| B2 |_|#<br /> |_|_|,|-|-|-|^|-|-|.|_|_|#<br /> |_|_|I|_|_|_|_| B4 |#f<br /> | B3 |_|_|_| |#<br /> |_|_|_|_|_|_|_| |#<br /> <br /> | B1 = Short 1<br /> <br /> | B2 = Short 2<br /> <br /> | B3 = [[Spiked Slime]]<br /> | B3_cols = 4<br /> <br /> | B4 = [[King Slime]]<br /> | B4_cols = 5<br /> | B4_rows = 3<br /> }}<br /> {{flexend}}<br /> <br /> Caution: When changing the number of rows, the box name must be in the first row. For example, the following would &#039;&#039;not&#039;&#039; be allowed and cause unexpected results:<br /> <br /> {{flexstart}}<br /> &lt;pre&gt;<br /> | |#<br /> | B4 |#<br /> | |#<br /> &lt;/pre&gt;<br /> {{flexend}}<br /> <br /> === Styling ===<br /> Aside from the &lt;code&gt;$boxstyle&lt;/code&gt; parameter (which changes the appearance of all boxes), each box can be styled individually via the parameter &lt;code&gt;&#039;&#039;&amp;lt;box name&amp;gt;&#039;&#039;_boxstyle&lt;/code&gt;.<br /> <br /> {{flexstart|style=gap:var(--layout-gap)|alignitems=center}}<br /> &lt;pre&gt;<br /> {{diagram<br /> |GREEN|~|BLESS|#<br /> <br /> | boxstyle = font-style: italic;<br /> <br /> | GREEN = Green<br /> | GREEN_boxstyle = color: var(--theme-text-color-green);<br /> <br /> | BLESS = Borderless<br /> | BLESS_boxstyle = border: 0; font-weight: bold;<br /> }}<br /> &lt;/pre&gt;<br /> {{diagram<br /> |GREEN|~|BLESS|#<br /> <br /> | boxstyle = font-style: italic;<br /> <br /> | GREEN = Green<br /> | GREEN_boxstyle = color: var(--theme-text-color-green);<br /> <br /> | BLESS = Borderless<br /> | BLESS_boxstyle = border: 0; font-weight: bold;<br /> }}<br /> {{flexend}}<br /> <br /> Individual boxes can similarly also have CSS classes and IDs via the parameters &lt;code&gt;&#039;&#039;&amp;lt;box name&amp;gt;&#039;&#039;_class&lt;/code&gt; and &lt;code&gt;&#039;&#039;&amp;lt;box name&amp;gt;&#039;&#039;_id&lt;/code&gt;. All boxes will always have a class &lt;code&gt;diagram-box&lt;/code&gt;.<br /> <br /> &lt;pre&gt;<br /> {{diagram<br /> |_|_|MAIN |_|_|#<br /> |_|_|,|^|.|_|_|#<br /> |BOX1 |_| BOX2|#<br /> <br /> | MAIN = Top<br /> | MAIN_id = main-box | MAIN_class = bigfont<br /> <br /> | BOX1 = Left<br /> <br /> | BOX2 = Right<br /> | BOX2_class = bigfont<br /> }}<br /> &lt;/pre&gt;<br /> <br /> With the following CSS, the above diagram would be rendered as shown below.<br /> <br /> &lt;pre&gt;<br /> #main-box {<br /> background-color: var(--theme-text-background-color-highlight);<br /> }<br /> .diagram-box.bigfont {<br /> font-size: 130%;<br /> }<br /> &lt;/pre&gt;<br /> <br /> {{diagram|style=margin-top:0.5em<br /> |_|_|MAIN |_|_|#<br /> |_|_|,|^|.|_|_|#<br /> |BOX1 |_| BOX2|#<br /> <br /> | MAIN = Top<br /> | MAIN_id = main-box | MAIN_class = bigfont | MAIN_boxstyle = background-color: var(--theme-text-background-color-highlight); font-size: 130%;<br /> <br /> | BOX1 = Left<br /> <br /> | BOX2 = Right<br /> | BOX2_class = bigfont | BOX2_boxstyle = font-size: 130%;<br /> }}<br /> <br /> There are also some predefined classes available for diagram boxes:<br /> * &lt;code&gt;no-border&lt;/code&gt; to remove the border (as achieved with box styling in the example above)<br /> * &lt;code&gt;craft-station&lt;/code&gt; for appropriate styling of [[crafting stations]] in a crafting tree (i.e. no border and less padding)<br /> <br /> == Examples ==<br /> === Family tree ===<br /> {{flexstart|style=gap:var(--layout-gap)|alignitems=center}}<br /> &lt;pre&gt;<br /> {{diagram<br /> | summary = I have a brother Joe and a little sister:<br /> my mom married my dad, and my dad&#039;s parents were<br /> Gladys and Sydney; they had another child, Aunt Calanthe.<br /> <br /> |_|_|_| GMa |~|y|~| GPa |_|#<br /> |_|_|_|_|_|_|_|)|-|-|-|.|_|#<br /> |_|_| MOM |y| DAD |_|CALLY|#<br /> |_|,|-|-|-|+|-|-|-|.|_|_|_|#<br /> | JOE |_| ME |_| SIS |_|_|#<br /> <br /> | GMa = Gladys<br /> | GPa = Sydney<br /> | JOE = My brother Joe<br /> | ME = &#039;&#039;&#039;Me!&#039;&#039;&#039;<br /> | ME_boxstyle = border-color: var(--oouihelper--themerelated);<br /> | SIS = My little sister<br /> | MOM = Mom<br /> | DAD = Dad<br /> | CALLY = [[Nymph|Aunt Calanthe]]<br /> }}<br /> &lt;/pre&gt;<br /> {{diagram<br /> | summary = I have a brother Joe and a little sister:<br /> my mom married my dad, and my dad&#039;s parents were<br /> Gladys and Sydney; they had another child, Aunt Calanthe.<br /> <br /> |_|_|_| GMa |~|y|~| GPa |_|#<br /> |_|_|_|_|_|_|_|)|-|-|-|.|_|#<br /> |_|_| MOM |y| DAD |_|CALLY|#<br /> |_|,|-|-|-|+|-|-|-|.|_|_|_|#<br /> | JOE |_| ME |_| SIS |_|_|#<br /> <br /> | GMa = Gladys<br /> | GPa = Sydney<br /> | JOE = My brother Joe<br /> | ME = &#039;&#039;&#039;Me!&#039;&#039;&#039; | ME_boxstyle = border-color: var(--oouihelper--themerelated);<br /> | SIS = My little sister<br /> | MOM = Mom<br /> | DAD = Dad<br /> | CALLY = [[Nymph|Aunt Calanthe]]<br /> }}<br /> {{flexend}}<br /> <br /> &lt;noinclude&gt;<br /> {{category|Template documentation}}<br /> &lt;/noinclude&gt;</div> imported>Merge