此模板建基於{{Familytree}}，使用类似ASCII艺术的句法生成系谱图。它用HTML表格和CSS在适当的位置生成文字框和线条以构成家庭树，使用者在文本框内可以任意运用维基语法。
首先在紙上把家族圖畫好，如下圖：
選擇資料格最貼近左邊的一行，這裡選擇了「哥哥、我、妹妹」一行，按照排位寫以下代码：
{{chart | JOE | | ME | | SIS | | | JOE=哥哥|ME='''我'''|SIS=妹妹}}
留意名字兩旁要留空格，豎線代表框線，框線間也應留空格，再定義名字。接着便可根據符號代表的線條直接加入代碼：
{{chart | |,|-|-|-|+|-|-|-|.| | | }}
{{chart | JOE | | ME | | SIS | | | JOE=哥哥|ME='''我'''|SIS=妹妹}}
如此類推，便生成以下代碼：
{{chart/start}}
{{chart | | | | GRM |~|y|~| GRP | | GRM=奶奶|GRP=爷爷}}
{{chart | | | | | | | |)|-|-|-|.| }}
{{chart | | | MOM |y| DAD | |UNCLE| MOM=妈妈|DAD=爸爸|UNCLE=<s>長腿叔叔</s>}}
{{chart | |,|-|-|-|+|-|-|-|.| | | }}
{{chart | JOE | | ME | | SIS | | | JOE=哥哥|ME='''我'''|SIS=妹妹}}
{{chart/end}}
本模版中，每个参数代表一个“格子”或者一个“框”。
- 格子内含有线状元素，用来生成横纵线条以及各种拐角以连接各个“框”。每一个格子用简单的字符参数来描述，一个特别的例子是空格子，用一个空格来描述不含任何线条的格子。下面列出模版支持的格子类型：
實體線
! |
|
|
, |
|
|
v |
|
|
. |
|
|
- |
|
|
) |
|
|
+ |
|
|
( |
|
|
|
|
|
` |
|
|
^ |
|
|
' |
|
|
混合型
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 |
|
- 框内可以填写任意的维基标记，框内的内容用附加命名变量的方法来加以描述。每一个框为三个格子宽，并且通常具有2px宽的黑边。附加的变量可以取用任何合法的名字，但是建议不要使用单字符的名字以免与“格子”冲突。
框的外形可以由参数border和boxstyle控制，前一个以像素为单位控制框边的宽度，后者可以为任意CSS语句，用来修饰框的外观。{{chart/start}}模版接受一个可选的style参数来制定整个表格的格式。例如下列代码：
{{chart/start}}
{{chart|border=0|boxstyle=background:#dfd;| | FOO |y| BAR | |FOO=Box 1|BAR=Box 2}}
{{chart|border=0|boxstyle=background:#dfd;| | |,|-|^|-|.| | }}
{{chart|border=0|boxstyle=background:#dfd;| | FOO | | BAR | |FOO=Box 3|BAR=Box 4}}
{{chart/end}}
产生如下效果：
此外，也接受每個框有各自的外觀設定。例如下列代码：
{{chart/start}}
{{chart| | | | |CLEAR| | | | |CLEAR=Clear box}}
{{chart| |,|-|-|'|!|`|-|-|.| }}
{{chart|RED |~| GREEN |~|BLUE |RED=Red box|GREEN=Green box|BLUE=Blue box
|boxstyle_RED =background-color: #faa;
|boxstyle_ GREEN =background-color: #afa;
|boxstyle_BLUE =background-color: #aaf;
}}
{{chart/end}}
产生如下效果：
| | | | Clear box | | | | |
|
| | | | | | | | | | | | | | | |
| | | | | | | | |
| Red box | | Green box | | Blue box |
| |
- 注意本例中的RED、GREEN和BLUE所有相關參數，如果原始定義框位的名字前後存在空格，那麼在定義其CSS風格時就必須在「boxstyle_」後補充原有的空格數，所以一般來說並不建議在定義框名字時留有任何不必要的空格。
本模板基本對應{{Familytree}}的大部分參數，但有一些小改動編者必須先讀，首先是在Familytree中你可以以「|}}」完結一行模板，但在Chart中請移除那個不必要的直桿「|」，另外有5個樹枝的參數定義改名及新增兩個混合型丁字樹枝：
| 標題 |
{{family tree}} |
{{chart}} |
備註
|
|
{ |
c |
Change
|
|
} |
d |
Change
|
|
# |
t |
Change
|
|
[ |
e |
Change
|
|
] |
f |
Change
|
|
b |
di |
Change
|
|
c |
fh |
Change
|
|
d |
ic |
Change
|
|
j |
he |
Change
|
|
n |
ye |
Change
|
|
p |
om2 |
Change
|
|
q |
mp2 |
Change
|
|
r |
kr2 |
Change
|
Miscellaneous tiles
| Tile |
{{family tree}} |
{{chart}} |
備註
|
|
G |
G2 |
Change
|
|
K |
K |
Same
|
|
T |
T2 |
Change
|
|
U |
U |
Same
|
|
X |
X |
Same
|
|
k |
l4 |
Change
|
