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