此模板建基于{{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
|
