نمایش مبدأ برای الگو:Tree chart/توضیحات

{{Lua|پودمان:Tree chart}}
{{distinguish|الگو:Graph:Chart}}<noinclude>
{{documentation subpage}}</noinclude><!--PLEASE ADD METADATA TO THE <includeonly> SECTION AT THE BOTTOM OF THIS PAGE
↓↓↓ EDIT TEMPLATE DOCUMENTATION BELOW THIS LINE ↓↓↓-->
==استفاده==
هر بار استفاده از این الگو یک سطر شجره‌نامه را می‌سازد که شامل جعبه‌ها و خطوط وصل‌کننده است. این الگو را باید به همراه {{tl|Tree chart/start}} و {{tl|Tree chart/end}} استفاده کرد. شجره‌نامه با استفاده از خصوصیت‌های [[سی‌اس‌اس]] به شکل جدول [[اچ‌تی‌ام‌ال]] نمایش داده می‌شود و ممکن است [[زبان نشانه‌گذاری]] [[ویکی]] نیز در جعبه‌ها به کار رفته باشد. طراحی الگو بر اساس الگوی سابق {{الگو|شجره‌نامه}} است که استفاده از آن مذموم شد.

==مثال ساده ==
این کد:
<pre dir=ltr><nowiki>
{{Tree chart/start|align=center|summary=مثال شجره‌نامه}}
{{Tree chart| | | |GrMa |~|y|~| GRP | |GrMa=بی‌بی|GRP=آقاجان}}
{{Tree chart| | | | | | | |)|-|-|-|.| }}
{{Tree chart| | | DAD |y| MOM | |SARAH|DAD=بابا|MOM=مامان|SARAH=[[خاله سارا]]}}
{{Tree chart| |,|-|-|-|+|-|-|-|.| | | }}
{{Tree chart| ALI | | ME  | | SIS | | |ALI=[[علی کوچولو]]|ME='''بنده!'''|SIS=همشیره}}
{{Tree chart/end}}
</nowiki></pre>

می‌دهد:
{{Tree chart/start|align=center|summary=مثال شجره‌نامه}}
{{Tree chart| | | |GrMa |~|y|~| GRP | |GrMa=بی‌بی|GRP=آقاجان}}
{{Tree chart| | | | | | | |)|-|-|-|.| }}
{{Tree chart| | | DAD |y| MOM | |SARAH|DAD=بابا|MOM=مامان|SARAH=[[خاله سارا]]}}
{{Tree chart| |,|-|-|-|+|-|-|-|.| | | }}
{{Tree chart| ALI | | ME  | | SIS | | |ALI=[[علی کوچولو]]|ME='''بنده!'''{{رچ}}|SIS=همشیره}}
{{Tree chart/end}}

این شجره‌نامه نشان می‌دهد که بنده برادر کوچکتری دارم به نام [[علی کوچولو]] و یک آبجی. مادرم ۲۰ سال پیش با پدرم ازدواج کرد. پدر و مادر مادرم را آقاجان و بی‌بی خطاب می‌کنم؛ والدین مادرم دختر دیگری دارند که ما بچه‌ها [[خاله سارا]] صدایش می‌کنیم. کد بالا جدولی با ۹ سطر و ۱۸ ستون ایجاد می‌کند که در زیر می‌بینیدش.

[[File:Chart template table structure.svg|center|450px|ساختار جدولی که با کد بالا درست می‌شود]]

==مثال سادهٔ تاشو ==
این کد از {{tl|chart top}} استفاده می‌کند:
<pre dir=ltr><nowiki>
{{chart top|مثال شجره‌نامه}}
{{Tree chart/start|align=center}}
{{Tree chart| | | |GrMa |~|y|~| GRP | |GrMa=بی‌بی|GRP=آقاجان}}
{{Tree chart| | | | | | | |)|-|-|-|.| }}
{{Tree chart| | | DAD |y| MOM | |SARAH|DAD=بابا|MOM=مامان|SARAH=[[خاله سارا]]}}
{{Tree chart| |,|-|-|-|+|-|-|-|.| | | }}
{{Tree chart| ALI | | ME  | | SIS | | |ALI=[[علی کوچولو]]|ME='''بنده!'''|SIS=همشیره}}
{{Tree chart/end}}
{{chart bottom}}
</nowiki></pre>

که می‌دهد:
{{chart top|مثال شجره‌نامه}}
{{Tree chart/start|align=center}}
{{Tree chart| | | |GrMa |~|y|~| GRP | |GrMa=بی‌بی|GRP=آقاجان}}
{{Tree chart| | | | | | | |)|-|-|-|.| }}
{{Tree chart| | | DAD |y| MOM | |SARAH|DAD=بابا|MOM=مامان|SARAH=[[خاله سارا]]}}
{{Tree chart| |,|-|-|-|+|-|-|-|.| | | }}
{{Tree chart| ALI | | ME  | | SIS | | |ALI=[[علی کوچولو]]|ME='''بنده!'''{{رچ}}|SIS=همشیره}}
{{Tree chart/end}}
{{chart bottom}}

==پارامترها==
این جدول تعداد نامعینی از پارامترهای بی‌نام را قبول می‌کند که هر پارامتر نشان‌دهندهٔ یک '''کاشی''' یا '''جعبه''' است.
* '''جعبه‌ها''' می‌توانند حاوی [[زبان نشانه‌گذاری]] [[ویکی]] باشند. محتوای هر جعبه را پارامتر نامدار دیگری که بعداً  تعریف می‌شود مشخص می‌کند. عرض هر جعبه به اندازهٔ '''سه کاشی''' است و به صورت پیش‌فرض کادری به ضخامت دو پیکسل دارد. جعبه‌ها می‌توانند هر نامی که برای الگو معتبر باشد داشته باشند، به شرطی که دست‌کم دو نویسهٔ الفبایی داشته باشند.
* '''کاشی‌ها''' نمادهای خطوط وصل‌کنندهٔ جعبه‌ها به همدیگر هستند. کاشی‌ها شامل خطوط افقی و عمودی به همراه گوشه‌ها و تقاطع‌های مورد نیاز در چندین سبک گوناگون هستند. کاشی‌ها با استفاده از نام یک یا دو حرفی مخصوصشان مشخص می‌شوند: در مورد بیشتر کاشی‌ها، نویسه کمابیش شبیه ظاهر کاشی است. '''کاشی خالی''' نوع خاصی از کاشی هست که با یک نویسهٔ فاصله مشخص می‌شود. جدولی از کاشی‌های در دسترس در زیر آمده است. 

{| style="float: left; margin-left: 1em;"
|+ '''خطوط توپر:'''
|-
| {{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;"
|+ '''خطوط تیره‌دار:'''
|-
| {{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;"
|+ '''خطوط نقطه‌دار:'''
|-
| {{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;"
|+'''عمودی توپر افقی تیره‌دار:'''
| {{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;"
|+ '''عمودی تیره‌دار افق توپر:'''
| {{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;"
|+'''عمودی نقطه‌دار افقی توپر:'''
| {{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;"
|+ '''عمودی نقطه‌دار افقی تیره‌دار:'''
| {{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;"
|+ '''عمودی توپر افقی نقطه‌دار:'''
| {{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;"
|+ '''عمودی تیره‌دار افقی نقطه‌دار:'''
| {{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}}
{|
|+ '''متفرقه''' (آن‌هایی که زمینه‌شان خاکستری است در الگوی {{الگو|شجره‌نامه}} نبودند یا تغییر کرده‌اند):<!-- 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}}
| {{big|<code>E</code>}} ||style="border:1px solid gray"| {{Tree chart/start}}{{Tree chart|E}}{{Tree chart/end}}
|}

==خصوصیات سبک==
ظاهر جعبه‌ها در هر سطر را می‌توان با استفاده از پارامترهای اختیاری زیر تغییر دارد:
* ''border'' ضخامت کادر جعبه را به پیکسل تعیین می‌کند،
* با ''boxstyle'' می‌توان هر اعلامیهٔ دلخواهی از سی‌اس‌اس را به خصوصیات سبک جعبه افزود. مثلاً کد زیر:

<pre dir=ltr><nowiki>
{{Tree chart/start}}
{{Tree chart|border=1|boxstyle=color:white; background:green; | | FOO |y| BAR | |FOO=جعبهٔ اول|BAR=جعبهٔ دوم}}
{{Tree chart| | |,|-|^|-|.| | }}
{{Tree chart|border=3|boxstyle=background:yellow; | | FOO | | BAR | |FOO=جعبهٔ سوم|BAR=جعبهٔ چهارم}}
{{Tree chart/end}}
</nowiki></pre>

که می‌دهد:

{{Tree chart/start}}
{{Tree chart|border=1|boxstyle=color:white; background:green; | | FOO |y| BAR | |FOO=جعبهٔ اول|BAR=جعبهٔ دوم}}
{{Tree chart| | |,|-|^|-|.| | }}
{{Tree chart|border=3|boxstyle=background:yellow; | | FOO | | BAR | |FOO=جعبهٔ سوم|BAR=جعبهٔ چهارم}}
{{Tree chart/end}}

حتی می‌توان خصوصیات سبک هر جعبه در سطر را به شکل تکی مشخص کرد، چنانکه در پایین می‌بینید:

<pre dir=ltr><nowiki>
{{Tree chart/start}}
{{Tree chart| | | | |CLEAR| | | | |CLEAR=جعبهٔ شفاف}}
{{Tree chart| |,|-|-|'|!|`|-|-|.| }}
{{Tree chart|RED  |~|GREEN|~|BLUE |RED=جعبهٔ قرمز|GREEN=جعبهٔ سبز|BLUE=جعبهٔ آبی
|boxstyle_RED  =color:white; background-color: red;
|boxstyle_GREEN=color:yellow; background-color: green;
|boxstyle_BLUE =color:white; background-color: blue;
}}
{{Tree chart/end}}
</nowiki></pre>

که می‌دهد:

{{Tree chart/start}}
{{Tree chart| | | | |CLEAR| | | | |CLEAR=جعبهٔ شفاف}}
{{Tree chart| |,|-|-|'|!|`|-|-|.| }}
{{Tree chart|RED  |~|GREEN|~|BLUE |RED=جعبهٔ قرمز|GREEN=جعبهٔ سبز|BLUE=جعبهٔ آبی
|boxstyle_RED  =color:white; background-color: red;
|boxstyle_GREEN=color:yellow; background-color: green;
|boxstyle_BLUE =color:white; background-color: blue;
}}
{{Tree chart/end}}

{{Warnsign|'''نکته:'''}} وقتی خصوصیات سبک یک جعبه را به صورت تکی مشخص می‌کنید، مطمئن شوید نام جعبه به سمت '''چپ''' منطقهٔ اختصاص‌یافته به آن چسبیده است  (مثل "<code dir=ltr>|RED&nbsp;&nbsp;|</code>" به جای "<code dir=ltr>|&nbsp;RED&nbsp;|</code>" در مثال بالا)

الگوی {{tl|Tree chart/start}} نیز پارامتر اختیاری {{para|style|dir=ltr}} را می‌پذیرد  که می‌تواند سبک‌های سی‌اس‌اس کل شجره‌نامه را تغییر دهد و نیز پارامتر اختیاری {{para|align|dir=ltr}} که با استفاده از آن می‌توان تراز شجره‌نامه را عوض کرد.

== جستارهای وابسته ==
* [[راهنما:ساخت شجره‌نامه]]: راهنمای جامع‌تر به همراه چند مثال
* [[:رده:الگو:شجره‌نامه]]
* [[الگو:Tree list]]
* [[الگو:Ahnentafel]]
<includeonly>{{Sandbox other|
|  {{When on user page | |
<!-- Categories below this line, please:-->
[[رده:الگو:قالب‌بندی تبارشناسی]]
[[رده:الگو:کارکردهای نمودار، نقشه، و قالب‌بندی گرافیکی]]
}} }}</includeonly>