Template:Diagram/doc

[清除缓存]

这是文档页面，它应该被放置到Template:Diagram，查看Template:Documentation以获取更多信息。

此模板及其文档搬运自英文Terraria Wiki页面Template:Diagram。

引入时，来源页面的修订版本为1175616，其文档页的修订版本为1175615。
这些内容依据CC BY-NC-SA 3.0协议引入。原贡献者请参见原页面的历史。
经过双方编者的修改，这些内容与来源可能存在差异。
这些内容无需与来源保持同步。

此模板使用了模块:Diagram，这些脚本均使用Lua编写。
更多详情，请参阅维基百科:Lua和MediaWiki:扩展:Scribunto。

本模板使用以下模板样式：

Template:Diagram/styles.css

From Terraria Wiki, CC BY-NC-SA 3.0.

Styles from Terraria Wiki, CC BY-NC-SA 3.0, stored here on this site.

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:Family tree on The Witcher Wiki 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 1

Box 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 1

Box 2

Box 3

Box 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 box

Green box

Blue 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:

Gladys

Sydney

Mom

Dad

Aunt Calanthe

My brother Joe

Me!

My little sister