查看“Template:Tree chart/doc”的源代码

{{FromOtherWiki|interwiki=enwp|pagename=Template:Tree chart|copyright=cc|lsubtype=by-sa|lver=3.0}}

此模板使用类似[[ASCII艺术]]的句法生成简单系谱图。它用HTML表格和CSS在适当的位置生成文字框和线条以构成家族树，使用者在文本框内可以任意运用维基语法。

本模板是 {{tl|familytree}} 的升级版，提供了更多连接线样式和更加 flexible 的代码实现。

可以使用 [[User:Greykid/familytree.js|familytree.js]] 辅助编辑。

==示例==
例如下列代码：

<pre><nowiki>
{{Tree chart/start|align=center|summary=An example family tree}}
{{Tree chart| | | |GrMa |~|y|~| GRP | |GrMa=Grandma|GRP=Grandpa}}
{{Tree chart| | | | | | | |)|-|-|-|.| }}
{{Tree chart| | | MOM |y| DAD | |DAISY|MOM=Mom|DAD=Dad|DAISY=[[Aunt Daisy]]}}
{{Tree chart| |,|-|-|-|+|-|-|-|.| | | }}
{{Tree chart| JOE | | ME  | | SIS | | |JOE=My brother Joe|ME='''Me!'''|SIS=My little sister}}
{{Tree chart/end}}
</nowiki></pre>

产生如下效果：

{{Tree chart/start|align=center|summary=An example family tree}}
{{Tree chart| | | |GrMa |~|y|~| GRP | |GrMa=Grandma|GRP=Grandpa}}
{{Tree chart| | | | | | | |)|-|-|-|.| }}
{{Tree chart| | | MOM |y| DAD | |DAISY|MOM=Mom|DAD=Dad|DAISY=[[Aunt Daisy]]}}
{{Tree chart| |,|-|-|-|+|-|-|-|.| | | }}
{{Tree chart| JOE | | ME  | | SIS | | |JOE=My brother Joe|ME='''Me!'''|SIS=My little sister}}
{{Tree chart/end}}

==参数==
模板接受至多99个未命名参数，每个参数代表一个“格子”或者一个“框”。

=== 格子 ===
'''格子'''内含有线状元素，用来生成横纵线条以及各种拐角以连接各个“框”。每一个格子用简单的字符参数来描述，一个特别的例子是'''空格子'''，用一个空格来描述不含任何线条的格子。下面列出模板支持的格子类型：

{| style="float: left; margin-left: 1em;"
|+ '''Solid lines:'''
|-
| {{big|<code>!</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|!}}{{Tree chart/end}} || &nbsp;
| {{big|<code>,</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|,}}{{Tree chart/end}} || &nbsp;
| {{big|<code>v</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|v}}{{Tree chart/end}} || &nbsp;
| {{big|<code>.</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|.}}{{Tree chart/end}} || &nbsp;
|-
| {{big|<code>-</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|-}}{{Tree chart/end}} || &nbsp;
| {{big|<code>)</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|)}}{{Tree chart/end}} || &nbsp;
| {{big|<code>+</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|+}}{{Tree chart/end}} || &nbsp;
| {{big|<code>(</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|(}}{{Tree chart/end}} || &nbsp;
|-
| || ||
| {{big|<code>`</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|`}}{{Tree chart/end}} || &nbsp;
| {{big|<code>^</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|^}}{{Tree chart/end}} || &nbsp;
| {{big|<code>'</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|'}}{{Tree chart/end}} || &nbsp;
|}
{| style="float: left; margin-left: 1em;"
|+ '''Dashed lines:'''
|-
| {{big|<code>:</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|:}}{{Tree chart/end}} || &nbsp;
| {{big|<code>F</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|F}}{{Tree chart/end}} || &nbsp;
| {{big|<code>V</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|V}}{{Tree chart/end}} || &nbsp;
| {{big|<code>7</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|7}}{{Tree chart/end}} || &nbsp;
|-
| {{big|<code>~</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|~}}{{Tree chart/end}} || &nbsp;
| {{big|<code>D</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|D}}{{Tree chart/end}} || &nbsp;
| {{big|<code>%</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|%}}{{Tree chart/end}} || &nbsp;
| {{big|<code>C</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|C}}{{Tree chart/end}} || &nbsp;
|-
| || ||
| {{big|<code>L</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|L}}{{Tree chart/end}} || &nbsp;
| {{big|<code>A</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|A}}{{Tree chart/end}} || &nbsp;
| {{big|<code>J</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|J}}{{Tree chart/end}} || &nbsp;
|}
{| style="float: left; margin-left: 1em;"
|+ '''Dotted lines:'''
|-
| {{big|<code>Q</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|Q}}{{Tree chart/end}} || &nbsp;
| {{big|<code>S</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|S}}{{Tree chart/end}} || &nbsp;
| {{big|<code>M</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|M}}{{Tree chart/end}} || &nbsp;
| {{big|<code>T</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|T}}{{Tree chart/end}} || &nbsp;
|-
| {{big|<code>P</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|P}}{{Tree chart/end}} || &nbsp;
| {{big|<code>H</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|H}}{{Tree chart/end}} || &nbsp;
| {{big|<code>R</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|R}}{{Tree chart/end}} || &nbsp;
| {{big|<code>G</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|G}}{{Tree chart/end}} || &nbsp;
|-
| || ||
| {{big|<code>Y</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|Y}}{{Tree chart/end}} || &nbsp;
| {{big|<code>W</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|W}}{{Tree chart/end}} || &nbsp;
| {{big|<code>Z</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|Z}}{{Tree chart/end}} || &nbsp;
|}

{| style="float: left; margin-left: 1em;"
|+'''Dashes hrzntl  solid vrtcl:'''
| {{big|<code>fy</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|fy}}{{Tree chart/end}}
| {{big|<code>y</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|y}}{{Tree chart/end}}
| {{big|<code>ye</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|ye}}{{Tree chart/end}}
|-
| {{big|<code>f</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|f}}{{Tree chart/end}}
| {{big|<code>t</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|t}}{{Tree chart/end}}
| {{big|<code>e</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|e}}{{Tree chart/end}} 
|-
| {{big|<code>fh</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|fh}}{{Tree chart/end}}
| {{big|<code>h</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|h}}{{Tree chart/end}}
| {{big|<code>he</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|he}}{{Tree chart/end}}
|}

{| style="float: left; margin-left: 1em;"
|+ '''Solid hrzntl dashes vrtcl:'''
| {{big|<code>dj</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|dj}}{{Tree chart/end}}
| {{big|<code>j</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|j}}{{Tree chart/end}}
| {{big|<code>jc</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|jc}}{{Tree chart/end}}
|-
| {{big|<code>d</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|d}}{{Tree chart/end}}
| {{big|<code>*</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|*}}{{Tree chart/end}}
| {{big|<code>c</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|c}}{{Tree chart/end}}
|-
| {{big|<code>di</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|di}}{{Tree chart/end}}
| {{big|<code>i</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|i}}{{Tree chart/end}}
| {{big|<code>ic</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|ic}}{{Tree chart/end}}
|}

{| style="float: left; margin-left: 1em;"
|+'''Solid hrzntl dot vrtcl:'''
| {{big|<code>kr</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|kr}}{{Tree chart/end}} 
| {{big|<code>r</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|r}}{{Tree chart/end}} 
| {{big|<code>rl</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|rl}}{{Tree chart/end}} 
|-
| {{big|<code>k</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|k}}{{Tree chart/end}}
| {{big|<code>a</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|a}}{{Tree chart/end}}
| {{big|<code>l</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|l}}{{Tree chart/end}}
|-
| {{big|<code>kq</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|kq}}{{Tree chart/end}}
| {{big|<code>q</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|q}}{{Tree chart/end}}
| {{big|<code>ql</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|ql}}{{Tree chart/end}}
|}
{| style="float: left; margin-left: 1em;"
|+ '''Dashed hrzntl dot vrtcl:'''
| {{big|<code>kr2</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|kr2}}{{Tree chart/end}}
| {{big|<code>r2</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|r2}}{{Tree chart/end}} 
| {{big|<code>rl2</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|rl2}}{{Tree chart/end}}
|-
| {{big|<code>k2</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|k2}}{{Tree chart/end}} 
| {{big|<code>a2</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|a2}}{{Tree chart/end}}
| {{big|<code>l2</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|l2}}{{Tree chart/end}}
|-
|{{big|<code>kq2</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|kq2}}{{Tree chart/end}}
| {{big|<code>q2</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|q2}}{{Tree chart/end}}
| {{big|<code>ql2</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|ql2}}{{Tree chart/end}}
|}

{| style="float: left; margin-left: 1em;"
|+ '''Dots hrzntl solid vrtcl:'''
| {{big|<code>om</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|om}}{{Tree chart/end}}
| {{big|<code>m</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|m}}{{Tree chart/end}}
| {{big|<code>mp</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|mp}}{{Tree chart/end}}
|-
| {{big|<code>o</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|o}}{{Tree chart/end}}
| {{big|<code>b</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|b}}{{Tree chart/end}}
| {{big|<code>p</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|p}}{{Tree chart/end}}
|-
| {{big|<code>on</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|on}}{{Tree chart/end}}
| {{big|<code>n</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|n}}{{Tree chart/end}}
| {{big|<code>np</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|np}}{{Tree chart/end}} 
|}

{| style="float: left; margin-left: 1em;"
|+ '''Dots hrzntl dashes vrtcl:'''
| {{big|<code>om2</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|om2}}{{Tree chart/end}}
| {{big|<code>m2</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|m2}}{{Tree chart/end}}
| {{big|<code>mp2</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|mp2}}{{Tree chart/end}}
|-
| {{big|<code>o2</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|o2}}{{Tree chart/end}}
| {{big|<code>b2</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|b2}}{{Tree chart/end}}
| {{big|<code>p2</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|p2}}{{Tree chart/end}}
|-
| {{big|<code>on2</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|on2}}{{Tree chart/end}}
| {{big|<code>n2</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|n2}}{{Tree chart/end}}
| {{big|<code>np2</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|np2}}{{Tree chart/end}} 
|}

{{clear}}
{|
|+ '''Miscellaneous''' (grey background not available in, or changed from, familytree):<!-- This subset is an insufficient set or questionable, but some map onto tiles that exist in {{familytree}}: -->
|-
| {{big|<code>k3</code>}} ||style="border:1px solid gray; background:lightgray;"| {{Tree chart/start}}{{Tree chart|k3}}{{Tree chart/end}}
| {{big|<code>T2</code>}} ||style="border:1px solid gray; background:lightgray;"| {{Tree chart/start}}{{Tree chart|T2}}{{Tree chart/end}}
| {{big|<code>l3</code>}} ||style="border:1px solid gray; background:lightgray;"| {{Tree chart/start}}{{Tree chart|l3}}{{Tree chart/end}}
| {{big|<code>b3</code>}} ||style="border:1px solid gray; background:lightgray;"| {{Tree chart/start}}{{Tree chart|b3}}{{Tree chart/end}}
|-
| {{big|<code>G2</code>}} ||style="border:1px solid gray; background:lightgray;"| {{Tree chart/start}}{{Tree chart|G2}}{{Tree chart/end}}
| {{big|<code>X</code>}} ||style="border:1px solid gray"| {{Tree chart/start}}{{Tree chart|X}}{{Tree chart/end}}
| {{big|<code>K</code>}} ||style="border:1px solid gray"| {{Tree chart/start}}{{Tree chart|K}}{{Tree chart/end}}
| {{big|<code>l4</code>}} ||style="border:1px solid gray; background:lightgray;"| {{Tree chart/start}}{{Tree chart|l4}}{{Tree chart/end}}
|-
| ||
| {{big|<code>U</code>}} ||style="border:1px solid gray"| {{Tree chart/start}}{{Tree chart|U}}{{Tree chart/end}}
|}

=== 框 ===
'''框'''内可以填写任意的维基标记，框内的内容用附加命名变量的方法来加以描述。每一个框为'''三个格子'''宽，并且通常具有2px宽的黑边。附加的变量可以取用任何合法的名字，但是建议不要使用单字符的名字以免与“格子”冲突。

某一行框的外形可以由参数'''border'''和'''boxstyle'''控制，前一个以px为单位控制框边的宽度，后者可以为任意CSS语句，用来修饰框的外观。

某一个框的外形可以由参数'''border_×××'''和'''boxstyle_×××'''控制，其中“×××”指的是这个框的名字。

例如下列代码：

<pre><nowiki>
{{Tree_chart/start}}
{{Tree_chart|boxstyle=background:#dfd;| |FOO |y|BAR| |FOO=Box 1|BAR=Box 2}}
{{Tree_chart| | |,|-|^|-|.| | }}
{{Tree_chart| |FOO| |BAR| |FOO=Box 3|border_FOO=0|boxstyle_FOO=background:#dfd;border:2px red solid;|BAR=Box 4}}
{{Tree_chart/end}}
</nowiki></pre>

产生如下效果：

{{Tree_chart/start}}
{{Tree_chart|boxstyle=background:#dfd;| |FOO |y|BAR| |FOO=Box 1|BAR=Box 2}}
{{Tree_chart| | |,|-|^|-|.| | }}
{{Tree_chart| |FOO| |BAR| |FOO=Box 3|border_FOO=0|boxstyle_FOO=background:#dfd;border:2px red solid;|BAR=Box 4}}
{{Tree_chart/end}}


{{tl|Tree chart/start}}模板也接受一个可选的'''style'''参数来制定整个表格的格式。
<!--==可折叠版==
这段代码使用了 {{tl|chart top}}:
<pre><nowiki>
{{chart top|An example family tree}}
{{Tree chart/start|align=center}}
{{Tree chart| | | |GrMa |~|y|~| GRP | |GrMa=Grandma|GRP=Grandpa}}
{{Tree chart| | | | | | | |)|-|-|-|.| }}
{{Tree chart| | | MOM |y| DAD | |DAISY|MOM=Mom|DAD=Dad|DAISY=[[Aunt Daisy]]}}
{{Tree chart| |,|-|-|-|+|-|-|-|.| | | }}
{{Tree chart| JOE | | ME  | | SIS | | |JOE=My brother Joe|ME='''Me!'''|SIS=My little sister}}
{{Tree chart/end}}
{{chart bottom}}
</nowiki></pre>

{{chart top|An example family tree}}
{{Tree chart/start|align=center}}
{{Tree chart| | | |GrMa |~|y|~| GRP | |GrMa=Grandma|GRP=Grandpa}}
{{Tree chart| | | | | | | |)|-|-|-|.| }}
{{Tree chart| | | MOM |y| DAD | |DAISY|MOM=Mom|DAD=Dad|DAISY=[[Aunt Daisy]]}}
{{Tree chart| |,|-|-|-|+|-|-|-|.| | | }}
{{Tree chart| JOE | | ME  | | SIS | | |JOE=My brother Joe|ME='''Me!'''|SIS=My little sister}}
{{Tree chart/end}}
{{chart bottom}}
-->

==移植自 {{tl|familytree}}==
参数基本相同。唯须留意以下符号变化：

{|  class="wikitable" style="text-align:center; float: left; margin-left: 1em;"
|+Mixed tiles that have changed
!Tile!!{{tl|familytree}}!!{{tl|tree chart}}||Notes on parameters
|-
|{{Tree chart/start}}{{Tree chart|c}}{{Tree chart/end}}||<code>{</code>,<code>3</code>||<code>c</code>||Change
|-
|{{Tree chart/start}}{{Tree chart|d}}{{Tree chart/end}}||<code>}</code>,<code>E</code>||<code>d</code>||Change
|-
|{{Tree chart/start}}{{Tree chart|t}}{{Tree chart/end}}||<code>#</code>||<code>t</code>||Change
|-
|{{Tree chart/start}}{{Tree chart|e}}{{Tree chart/end}}||<code>[</code>||<code>e</code>||Change
|-
|{{Tree chart/start}}{{Tree chart|f}}{{Tree chart/end}}||<code>]</code>||<code>f</code>||Change
|-
|{{Tree chart/start}}{{Tree chart|i}}{{Tree chart/end}}||<code>t</code>||<code>i</code>||Change
|-
|{{Tree chart/start}}{{Tree chart|j}}{{Tree chart/end}}||<code>u</code>||<code>j</code>||Change
|-
|{{Tree chart/start}}{{Tree chart|di}}{{Tree chart/end}}||<code>b</code>||<code>di</code>||Change
|-
|{{Tree chart/start}}{{Tree chart|fh}}{{Tree chart/end}}||<code>c</code>||<code>fh</code>||Change
|-
|{{Tree chart/start}}{{Tree chart|ic}}{{Tree chart/end}}||<code>d</code>||<code>ic</code>||Change
|-
|{{Tree chart/start}}{{Tree chart|he}}{{Tree chart/end}}||<code>j</code>||<code>he</code>||Change
|-
|{{Tree chart/start}}{{Tree chart|ye}}{{Tree chart/end}}||<code>n</code>||<code>ye</code>||Change
|-
|{{Tree chart/start}}{{Tree chart|dj}}{{Tree chart/end}}||<code>p</code>||<code>dj</code>||Change
|-
|{{Tree chart/start}}{{Tree chart|jc}}{{Tree chart/end}}||<code>q</code>||<code>jc</code>||Change
|-
|{{Tree chart/start}}{{Tree chart|fy}}{{Tree chart/end}}||<code>r</code>||<code>fy</code>||Change
|}

{| class="wikitable" style="text-align:center; float: left; margin-left: 1em;"
|+Miscellaneous tiles
!Tile!!{{tl|familytree}}!!{{tl|tree chart}}||Notes on parameters
|-
|{{Tree chart/start}}{{Tree chart|G2}}{{Tree chart/end}}||<code>G</code>||<code>G2</code>||Change
|-
||{{Tree chart/start}}{{Tree chart|K}}{{Tree chart/end}}||<code>K</code>||<code>K</code>||Same
|-
|{{Tree chart/start}}{{Tree chart|T2}}{{Tree chart/end}}||<code>T</code>||<code>T2</code>||Change
|-
||{{Tree chart/start}}{{Tree chart|U}}{{Tree chart/end}}||<code>U</code>||<code>U</code>||Same
|-
||{{Tree chart/start}}{{Tree chart|X}}{{Tree chart/end}}||<code>X</code>||<code>X</code>||Same
|-
|{{Tree chart/start}}{{Tree chart|l4}}{{Tree chart/end}}||<code>k</code>||<code>l4</code>||Change
|}
{{clear}}

{|
|-
|比如：“<code>k</code>”，在 {{tl|Familytree}} 中的效果是
|style="border:1px solid gray"|{{Tree chart/start}}{{Tree chart|l4}}{{Tree chart/end}} 
|但是在 {{tl|tree chart}} 中的效果是
|style="border:1px solid gray"|{{Tree chart/start}}{{Tree chart|k}}{{Tree chart/end}}
|（作为替代，在 {{tl|tree chart}}) 中使用 “l4” 来生成
|style="border:1px solid gray"|{{Tree chart/start}}{{Tree chart|l4}}{{Tree chart/end}}
|。
|}

{{tl|familytree}} 允许使用 <code><nowiki>|}}</nowiki></code> 结尾，而对于本模板 {{tl|Tree chart}}，需要移除多余的 <code>|</code>。

使用 [[User:Greykid/familytree.js|familytree.js]] 小工具，仅需修改每行的模板名，小工具就会自动适应更改。

==教程==
此范例可能对于第一次使用者有所帮助，当读者掌握相应技巧后，并不需遵循此过程。

步骤一：首先在紙上把家族圖畫好，如下圖：
{{Tree chart/start}}
{{Tree chart| | | Mum |y| Dad |Mum=妈妈|Dad=爸爸}}
{{Tree chart| |,|-|-|-|+|-|-|-|.| | }}
{{Tree chart| Bro | |  I  | | Sis |Bro=哥哥|I=我|Sis=妹妹}}
{{Tree chart/end}}


步骤二：考虑将这个图放置在一个长方形中，图形由一个个小的方格子所组成，填满整个长方形（如同在[[拼图]]），每个方格子为以下3种元素之任一：
*连接用的线条，例如{{Tree chart/start}}{{Tree chart|y}}{{Tree chart/end}}每个占用1个方格子，若是较长的线则需要拼接。
*文字与边框，例如{{Tree chart/start}}{{Tree chart| bb | bb=&nbsp; &nbsp; &nbsp; &nbsp; 爸爸 &nbsp; &nbsp; &nbsp; &nbsp; }}{{Tree chart/end}}注意的是文字连同边框一起占用3个方格子，这是固定且不能自行定义的。
*空格，即除以上两种之外的空白处，每个空格即为1个方格子大小的空白。

按照这种方法，以上图形可以用3行11列个方格子来表示，具体分解如下（这一步为关键步骤，如出错会导致图形的偏差）：

 {| class="wikitable" style="text-align:center"
|-
| 空格 || 空格 || colspan="3" |妈妈|| {{Tree chart/start}}{{Tree chart|y}}{{Tree chart/end}} || colspan="3" |爸爸|| 空格 || 空格
|-
| 空格 || {{Tree chart/start}}{{Tree chart|,}}{{Tree chart/end}} || {{Tree chart/start}}{{Tree chart|-}}{{Tree chart/end}} ||  {{Tree chart/start}}{{Tree chart|-}}{{Tree chart/end}} ||  {{Tree chart/start}}{{Tree chart|-}}{{Tree chart/end}}|| {{Tree chart/start}}{{Tree chart|+}}{{Tree chart/end}}  ||  {{Tree chart/start}}{{Tree chart|-}}{{Tree chart/end}} ||  {{Tree chart/start}}{{Tree chart|-}}{{Tree chart/end}} ||  {{Tree chart/start}}{{Tree chart|-}}{{Tree chart/end}} ||  {{Tree chart/start}}{{Tree chart|.}}{{Tree chart/end}} || 空格
|-
| colspan="3" |哥哥|| 空格 || colspan="3" |我|| 空格 || colspan="3" |妹妹
|}
这里特别提醒下对于空格数量的确认，你可能不能一下子看出第一行左侧有2个空格，但是当你整齐地将图形进行排列和划分后，即能发现应该补足的空格数量。


步骤三：换成对应的代码，每个方格子的代码之间使用竖线条 | 来进行分隔：

* 看到连接线，比如 {{Tree chart/start}}{{Tree chart|y}}{{Tree chart/end}} 就是竖线条之间加一个y（请查看参数）
* 看到文字和方框，那就在竖线条之间加入文字（注意文字的方框不需要单独的代码）
* 看到空格，就是竖线条之间为一个空格

以下是替换后的结果，与上列表格一一对应：

<pre><nowiki>
| | | 妈妈 |y| 爸爸 | | |
| |,|-|-|-|+|-|-|-|.| |
| 哥哥 | | 我  | | 妹妹 |
</nowiki></pre>

马上就要成功了，不过文字部分还要稍作处理，对于文字，你需要自行创造一个代码填入该文字应该占据的位置，然后在该行之后说明这种替代关系。

这里比如把妈妈用 “Mum”表示，爸爸用“Dad”表示（当然这是你自己定义的，用爹、粑粑、bb之类的表示均可，但最好使用三个字符，因为使用三个字符时，上下行对齐，容易检查）。在下面，“Mum”和“Dad” 两个代码已经替换了原有文字，而 “Mum=妈妈 | Dad=爸爸”则加在原有语句后面表示这种替代关系，注意，“Mum=妈妈”和“Dad=爸爸”之间是使用一条竖线 | 来进行分隔的，以此类推。

<pre><nowiki>
| | | Mum |y| Dad | | | Mum=妈妈 | Dad=爸爸
</nowiki></pre>


步骤四：按以下格式，即为完整的、可以使用的代码：
<pre><nowiki>
{{Tree chart/start}}
{{Tree chart| | | Mum |y| Dad | | |Mum=妈妈|Dad=爸爸}}
{{Tree chart| |,|-|-|-|+|-|-|-|.| | }}
{{Tree chart| Bro | |  I  | | Sis |Bro=哥哥|I=我|Sis=妹妹}}
{{Tree chart/end}}
</nowiki></pre>

下面给出一个更大的家族图与代码，供参考，可以看到文字部分使用了一些维基语法：

{{Tree chart/start}}
{{Tree chart| | | | 奶 |~|y|~| 爷 | | 奶=奶奶|爷=爷爷}}
{{Tree chart| | | | | | | |)|-|-|-|.| }}
{{Tree chart| | | 妈 |y| 爸 | |叔| 妈=妈妈|爸=爸爸|叔=<s>叔叔</s>}}
{{Tree chart| |,|-|-|-|+|-|-|-|.| | | }}
{{Tree chart| 哥 | | 俺 | | 妹 | | | 哥=哥哥|俺='''我'''|妹=[[妹妹]]}}
{{Tree chart/end}}

<pre><nowiki>
{{Tree chart/start}}
{{Tree chart| | | | 奶 |~|y|~| 爷 | | 奶=奶奶|爷=爷爷}}
{{Tree chart| | | | | | | |)|-|-|-|.| }}
{{Tree chart| | | 妈 |y| 爸 | |叔| 妈=妈妈|爸=爸爸|叔=<s>叔叔</s>}}
{{Tree chart| |,|-|-|-|+|-|-|-|.| | | }}
{{Tree chart| 哥 | | 俺 | | 妹 | | | 哥=哥哥|俺='''我'''|妹=[[妹妹]]}}
{{Tree chart/end}}
</nowiki></pre>

<includeonly>[[Category:表格模板]][[Category:格式模板]][[Category:功能模板]]</includeonly><noinclude>[[Category:模板文档]]</noinclude>