模板:Tree chart/doc

此模板使用類似ASCII藝術的句法生成簡單系譜圖。它用HTML表格和CSS在適當的位置生成文字框和線條以構成家族樹，使用者在文本框內可以任意運用維基語法。

本模板是 {{familytree}} 的升級版，提供了更多連接線樣式和更加 flexible 的代碼實現。

可以使用 familytree.js 輔助編輯。

示例

例如下列代碼：

{{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}}

產生如下效果：

Grandma

Grandpa

Mom

Dad

Aunt Daisy

My brother Joe

Me!

My little sister

參數

模板接受至多99個未命名參數，每個參數代表一個「格子」或者一個「框」。

格子

格子內含有線狀元素，用來生成橫縱線條以及各種拐角以連接各個「框」。每一個格子用簡單的字符參數來描述，一個特別的例子是空格子，用一個空格來描述不含任何線條的格子。下面列出模板支持的格子類型：

Solid lines:

!			,			v			.
-			)			+			(
			`			^			'

Dashed lines:

:			F			V			7
~			D			%			C
			L			A			J

Dotted lines:

Q			S			M			T
P			H			R			G
			Y			W			Z

Dashes hrzntl solid vrtcl:

fy		y		ye
f		t		e
fh		h		he

Solid hrzntl dashes vrtcl:

dj		j		jc
d		*		c
di		i		ic

Solid hrzntl dot vrtcl:

kr		r		rl
k		a		l
kq		q		ql

Dashed hrzntl dot vrtcl:

kr2		r2		rl2
k2		a2		l2
kq2		q2		ql2

Dots hrzntl solid vrtcl:

om		m		mp
o		b		p
on		n		np

Dots hrzntl dashes vrtcl:

om2		m2		mp2
o2		b2		p2
on2		n2		np2

Miscellaneous (grey background not available in, or changed from, familytree):

k3		T2		l3		b3
G2		X		K		l4
		U

框

框內可以填寫任意的維基標記，框內的內容用附加命名變量的方法來加以描述。每一個框為三個格子寬，並且通常具有2px寬的黑邊。附加的變量可以取用任何合法的名字，但是建議不要使用單字符的名字以免與「格子」衝突。

某一行框的外形可以由參數border和boxstyle控制，前一個以px為單位控制框邊的寬度，後者可以為任意CSS語句，用來修飾框的外觀。

某一個框的外形可以由參數border_×××和boxstyle_×××控制，其中「×××」指的是這個框的名字。

例如下列代碼：

{{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}}

產生如下效果：

Box 1

Box 2

Box 3

Box 4

{{Tree chart/start}}模板也接受一個可選的style參數來制定整個表格的格式。

移植自 {{familytree}}

參數基本相同。唯須留意以下符號變化：

Mixed tiles that have changed

Tile	{{familytree}}	{{tree chart}}	Notes on parameters
	{,3	c	Change
	},E	d	Change
	#	t	Change
	[	e	Change
	]	f	Change
	t	i	Change
	u	j	Change
	b	di	Change
	c	fh	Change
	d	ic	Change
	j	he	Change
	n	ye	Change
	p	dj	Change
	q	jc	Change
	r	fy	Change

Miscellaneous tiles

Tile	{{familytree}}	{{tree chart}}	Notes on parameters
	G	G2	Change
	K	K	Same
	T	T2	Change
	U	U	Same
	X	X	Same
	k	l4	Change

比如：「k」，在 {{Familytree}} 中的效果是

但是在 {{tree chart}} 中的效果是

（作為替代，在 {{tree chart}}) 中使用 「l4」 來生成

。

{{familytree}} 允許使用 |}} 結尾，而對於本模板 {{Tree chart}}，需要移除多餘的 |。

使用 familytree.js 小工具，僅需修改每行的模板名，小工具就會自動適應更改。

教程

此範例可能對於第一次使用者有所幫助，當讀者掌握相應技巧後，並不需遵循此過程。

步驟一：首先在紙上把家族圖畫好，如下圖：

媽媽

爸爸

哥哥

我

妹妹

步驟二：考慮將這個圖放置在一個長方形中，圖形由一個個小的方格子所組成，填滿整個長方形（如同在拼圖），每個方格子為以下3種元素之任一：

• 連接用的線條，例如每個佔用1個方格子，若是較長的線則需要拼接。
• 文字與邊框，例如

  爸爸

  注意的是文字連同邊框一起佔用3個方格子，這是固定且不能自行定義的。
• 空格，即除以上兩種之外的空白處，每個空格即為1個方格子大小的空白。

按照這種方法，以上圖形可以用3行11列個方格子來表示，具體分解如下（這一步為關鍵步驟，如出錯會導致圖形的偏差）：

空格	空格	媽媽				爸爸			空格	空格
空格										空格
哥哥			空格	我			空格	妹妹

這裏特別提醒下對於空格數量的確認，你可能不能一下子看出第一行左側有2個空格，但是當你整齊地將圖形進行排列和劃分後，即能發現應該補足的空格數量。

步驟三：換成對應的代碼，每個方格子的代碼之間使用豎線條 | 來進行分隔：

• 看到連接線，比如 就是豎線條之間加一個y（請查看參數）
• 看到文字和方框，那就在豎線條之間加入文字（注意文字的方框不需要單獨的代碼）
• 看到空格，就是豎線條之間為一個空格

以下是替換後的結果，與上列表格一一對應：

| | | 妈妈 |y| 爸爸 | | |
| |,|-|-|-|+|-|-|-|.| |
| 哥哥 | | 我  | | 妹妹 |

馬上就要成功了，不過文字部分還要稍作處理，對於文字，你需要自行創造一個代碼填入該文字應該佔據的位置，然後在該行之後說明這種替代關係。

這裏比如把媽媽用 「Mum」表示，爸爸用「Dad」表示（當然這是你自己定義的，用爹、粑粑、bb之類的表示均可，但最好使用三個字符，因為使用三個字符時，上下行對齊，容易檢查）。在下面，「Mum」和「Dad」 兩個代碼已經替換了原有文字，而 「Mum=媽媽 | Dad=爸爸」則加在原有語句後面表示這種替代關係，注意，「Mum=媽媽」和「Dad=爸爸」之間是使用一條豎線 | 來進行分隔的，以此類推。

| | | Mum |y| Dad | | | Mum=妈妈 | Dad=爸爸

步驟四：按以下格式，即為完整的、可以使用的代碼：

{{Tree chart/start}}
{{Tree chart| | | Mum |y| Dad | | |Mum=妈妈|Dad=爸爸}}
{{Tree chart| |,|-|-|-|+|-|-|-|.| | }}
{{Tree chart| Bro | |  I  | | Sis |Bro=哥哥|I=我|Sis=妹妹}}
{{Tree chart/end}}

下面給出一個更大的家族圖與代碼，供參考，可以看到文字部分使用了一些維基語法：

奶奶

爺爺

媽媽

爸爸

叔叔

哥哥

我

妹妹

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