Ver el código de «Plantilla:Tree chart/doc»

{{Lua|Tree chart}}
<noinclude>{{documentation subpage}}</noinclude>
<!--PLEASE ADD METADATA TO THE <includeonly> SECTION AT THE BOTTOM OF THIS PAGE

    EDIT TEMPLATE DOCUMENTATION BELOW THIS LINE-->

==Uso==
Esta plantilla produce un gráfico en una fila tipo "árbol genealógico" que consiste en recuadros y líneas de conexión basadas libremente en una sintaxis similar al [[ASCII art]]. Está destinado a usarse junto con {{tl|Tree chart/start}} y {{tl|Tree chart/end}}. El gráfico se muestra como tablas [[HTML]] utilizando los atributos [[CSS]], y puede contener [[wikitexto]] arbitrario dentro de los cuadros. Esta implementación se basó en la plantilla ahora obsoleta {{tl|Árbol genealógico}}.

'''NOTA:''' <u>La plantilla también funciona con el nombre abreviado de {{tl|chart}}.</u>

==Ejemplo básico==
Este código:
<pre><nowiki>
{{Tree chart/start|align=center|summary=Un ejemplo de árbol genealógico}}
{{Tree chart| | | |Aba |~|y|~| Abo | |Aba=Abuela|Abo=Abuelo}}
{{Tree chart| | | | | | | |)|-|-|-|.| }}
{{Tree chart| | | Mad |y| Pad | |DAISY|Mad=Madre|Pad=Padre|DAISY=[[Tía Daisy]]}}
{{Tree chart| |,|-|-|-|+|-|-|-|.| | | }}
{{Tree chart| JOE | | YO  | | HMA | | |JOE=Mi hermano Joe|YO='''¡Yo!'''|HMA=Mi hermana pequeña}}
{{Tree chart/end}}
</nowiki></pre>

produce esto:

{{Tree chart/start|align=center|summary=Un ejemplo de árbol genealógico}}
{{Tree chart| | | |Aba |~|y|~| Abo | |Aba=Abuela|Abo=Abuelo}}
{{Tree chart| | | | | | | |)|-|-|-|.| }}
{{Tree chart| | | Mad |y| Pad | |DAISY|Mad=Madre|Pad=Padre|DAISY=[[Tía Daisy]]}}
{{Tree chart| |,|-|-|-|+|-|-|-|.| | | }}
{{Tree chart| JOE | | YO  | | HMA | | |JOE=Mi hermano Joe|YO='''¡Yo!'''|HMA=Mi hermana pequeña}}
{{Tree chart/end}}

Este cuadro muestra visualmente la información de que tengo un hermano Joe y una hermana pequeña; mi madre se casó con mi padre; y los padres de mi padre eran abuela y abuelo; y los padres de mi padre tuvieron otro hijo, tía Daisy. El código anterior produce una tabla de tamaño 9 filas x 10 columnas como se muestra a continuación.
[[File:Chart template table structure.png|center|La estructura de la tabla creada usando el ejemplo anterior]]

==Ejemplo básico colapsable==
Este código usa {{tl|chart top}}:
<pre><nowiki>
{{chart top|Un ejemplo de árbol genealógico}}
{{Tree chart/start|align=center}}
{{Tree chart| | | |Aba |~|y|~| Abo | |Aba=Abuela|Abo=Abuelo}}
{{Tree chart| | | | | | | |)|-|-|-|.| }}
{{Tree chart| | | Mad |y| Pad | |DAISY|Mad=Madre|Pad=Padre|DAISY=[[Tía Daisy]]}}
{{Tree chart| |,|-|-|-|+|-|-|-|.| | | }}
{{Tree chart| JOE | | YO  | | HMA | | |JOE=Mi hermano Joe|YO='''¡Yo!'''|HMA=Mi hermana pequeña}}
{{Tree chart/end}}
{{chart bottom}}
</nowiki></pre>

produce esto:
{{chart top|Un ejemplo de árbol genealógico}}
{{Tree chart/start|align=center}}
{{Tree chart| | | |Aba |~|y|~| Abo | |Aba=Abuela|Abo=Abuelo}}
{{Tree chart| | | | | | | |)|-|-|-|.| }}
{{Tree chart| | | Mad |y| Pad | |DAISY|Mad=Madre|Pad=Padre|DAISY=[[Tía Daisy]]}}
{{Tree chart| |,|-|-|-|+|-|-|-|.| | | }}
{{Tree chart| JOE | | YO  | | HMA | | |JOE=Mi hermano Joe|YO='''¡Yo!'''|HMA=Mi hermana pequeña}}
{{Tree chart/end}}
{{chart bottom}}

Este cuadro muestra visualmente la información de que tengo un hermano Joe y una hermana pequeña; mi madre se casó con mi padre; y los padres de mi padre eran abuela y abuelo; y los padres de mi padre tuvieron otro hijo, tía Daisy.

==Parámetros==
La plantilla acepta cualquier número de parámetros sin nombre y cada parámetro especifica un '''box''' (recuadro) o un '''tile''' (conector).
* '''Boxes''' (recuadros) pueden contener [[wikitexto]] arbitrario. El contenido de cada cuadro se especifica utilizando parámetros con nombre adicionales agregados a la llamada de plantilla. Cada recuadro tiene '''tres casillas de ancho''' y normalmente tiene un borde negro de dos píxeles de ancho. Los cuadros pueden tener cualquier nombre que sea un nombre de parámetro de plantilla válido, sujeto a un mínimo de dos caracteres alfabéticos.
* '''Tiles''' (conectores) son símbolos de dibujo lineal utilizados para conectar los recuadros. Cada conector ocupa '''una casilla de ancho'''. Consisten en varios estilos de líneas horizontales y verticales junto con esquinas y cruces según sea necesario. Las fichas se especifican utilizando su nombre de uno o dos caracteres: para las fichas más comunes, ese carácter es más o menos aproximado a la apariencia de la ficha. Un caso especial  es el '''conector vacío''', especificado por un solo carácter de espacio. A continuación se muestra una tabla de conectores disponibles:

{| style="float: left; margin-left: 1em;"
|+ '''Líneas sólidas:'''
|-
| {{grande|<code>!</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|!}}{{Tree chart/end}} || &nbsp;
| {{grande|<code>,</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|,}}{{Tree chart/end}} || &nbsp;
| {{grande|<code>v</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|v}}{{Tree chart/end}} || &nbsp;
| {{grande|<code>.</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|.}}{{Tree chart/end}} || &nbsp;
|-
| {{grande|<code>-</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|-}}{{Tree chart/end}} || &nbsp;
| {{grande|<code>)</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|)}}{{Tree chart/end}} || &nbsp;
| {{grande|<code>+</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|+}}{{Tree chart/end}} || &nbsp;
| {{grande|<code>(</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|(}}{{Tree chart/end}} || &nbsp;
|-
| || ||
| {{grande|<code>`</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|`}}{{Tree chart/end}} || &nbsp;
| {{grande|<code>^</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|^}}{{Tree chart/end}} || &nbsp;
| {{grande|<code>'</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|'}}{{Tree chart/end}} || &nbsp;
|}
{| style="float: left; margin-left: 1em;"
|+ '''Líneas de guiones:'''
|-
| {{grande|<code>:</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|:}}{{Tree chart/end}} || &nbsp;
| {{grande|<code>F</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|F}}{{Tree chart/end}} || &nbsp;
| {{grande|<code>V</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|V}}{{Tree chart/end}} || &nbsp;
| {{grande|<code>7</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|7}}{{Tree chart/end}} || &nbsp;
|-
| {{grande|<code>~</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|~}}{{Tree chart/end}} || &nbsp;
| {{grande|<code>D</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|D}}{{Tree chart/end}} || &nbsp;
| {{grande|<code>%</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|%}}{{Tree chart/end}} || &nbsp;
| {{grande|<code>C</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|C}}{{Tree chart/end}} || &nbsp;
|-
| || ||
| {{grande|<code>L</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|L}}{{Tree chart/end}} || &nbsp;
| {{grande|<code>A</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|A}}{{Tree chart/end}} || &nbsp;
| {{grande|<code>J</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|J}}{{Tree chart/end}} || &nbsp;
|}
{| style="float: left; margin-left: 1em;"
|+ '''Líneas punteadas:'''
|-
| {{grande|<code>Q</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|Q}}{{Tree chart/end}} || &nbsp;
| {{grande|<code>S</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|S}}{{Tree chart/end}} || &nbsp;
| {{grande|<code>M</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|M}}{{Tree chart/end}} || &nbsp;
| {{grande|<code>T</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|T}}{{Tree chart/end}} || &nbsp;
|-
| {{grande|<code>P</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|P}}{{Tree chart/end}} || &nbsp;
| {{grande|<code>H</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|H}}{{Tree chart/end}} || &nbsp;
| {{grande|<code>R</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|R}}{{Tree chart/end}} || &nbsp;
| {{grande|<code>G</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|G}}{{Tree chart/end}} || &nbsp;
|-
| || ||
| {{grande|<code>Y</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|Y}}{{Tree chart/end}} || &nbsp;
| {{grande|<code>W</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|W}}{{Tree chart/end}} || &nbsp;
| {{grande|<code>Z</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|Z}}{{Tree chart/end}} || &nbsp;
|}

{| style="float: left; margin-left: 1em;"
|+'''Guiones horiz  sólido vert:'''
| {{grande|<code>fy</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|fy}}{{Tree chart/end}}
| {{grande|<code>y</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|y}}{{Tree chart/end}}
| {{grande|<code>ye</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|ye}}{{Tree chart/end}}
|-
| {{grande|<code>f</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|f}}{{Tree chart/end}}
| {{grande|<code>t</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|t}}{{Tree chart/end}}
| {{grande|<code>e</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|e}}{{Tree chart/end}} 
|-
| {{grande|<code>fh</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|fh}}{{Tree chart/end}}
| {{grande|<code>h</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|h}}{{Tree chart/end}}
| {{grande|<code>he</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|he}}{{Tree chart/end}}
|}

{| style="float: left; margin-left: 1em;"
|+ '''Sólido horiz guiones vert:'''
| {{grande|<code>dj</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|dj}}{{Tree chart/end}}
| {{grande|<code>j</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|j}}{{Tree chart/end}}
| {{grande|<code>jc</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|jc}}{{Tree chart/end}}
|-
| {{grande|<code>d</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|d}}{{Tree chart/end}}
| {{grande|<code>*</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|*}}{{Tree chart/end}}
| {{grande|<code>c</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|c}}{{Tree chart/end}}
|-
| {{grande|<code>di</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|di}}{{Tree chart/end}}
| {{grande|<code>i</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|i}}{{Tree chart/end}}
| {{grande|<code>ic</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|ic}}{{Tree chart/end}}
|}

{| style="float: left; margin-left: 1em;"
|+'''Sólido horiz puntos vert:'''
| {{grande|<code>kr</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|kr}}{{Tree chart/end}} 
| {{grande|<code>r</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|r}}{{Tree chart/end}} 
| {{grande|<code>rl</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|rl}}{{Tree chart/end}} 
|-
| {{grande|<code>k</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|k}}{{Tree chart/end}}
| {{grande|<code>a</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|a}}{{Tree chart/end}}
| {{grande|<code>l</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|l}}{{Tree chart/end}}
|-
| {{grande|<code>kq</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|kq}}{{Tree chart/end}}
| {{grande|<code>q</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|q}}{{Tree chart/end}}
| {{grande|<code>ql</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|ql}}{{Tree chart/end}}
|}
{| style="float: left; margin-left: 1em;"
|+ '''Guiones horiz puntos vert:'''
| {{grande|<code>kr2</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|kr2}}{{Tree chart/end}}
| {{grande|<code>r2</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|r2}}{{Tree chart/end}} 
| {{grande|<code>rl2</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|rl2}}{{Tree chart/end}}
|-
| {{grande|<code>k2</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|k2}}{{Tree chart/end}} 
| {{grande|<code>a2</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|a2}}{{Tree chart/end}}
| {{grande|<code>l2</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|l2}}{{Tree chart/end}}
|-
|{{grande|<code>kq2</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|kq2}}{{Tree chart/end}}
| {{grande|<code>q2</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|q2}}{{Tree chart/end}}
| {{grande|<code>ql2</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|ql2}}{{Tree chart/end}}
|}

{| style="float: left; margin-left: 1em;"
|+ '''Puntos horiz sólido vert:'''
| {{grande|<code>om</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|om}}{{Tree chart/end}}
| {{grande|<code>m</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|m}}{{Tree chart/end}}
| {{grande|<code>mp</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|mp}}{{Tree chart/end}}
|-
| {{grande|<code>o</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|o}}{{Tree chart/end}}
| {{grande|<code>b</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|b}}{{Tree chart/end}}
| {{grande|<code>p</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|p}}{{Tree chart/end}}
|-
| {{grande|<code>on</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|on}}{{Tree chart/end}}
| {{grande|<code>n</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|n}}{{Tree chart/end}}
| {{grande|<code>np</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|np}}{{Tree chart/end}} 
|}

{| style="float: left; margin-left: 1em;"
|+ '''Puntos horiz guiones vert:'''
| {{grande|<code>om2</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|om2}}{{Tree chart/end}}
| {{grande|<code>m2</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|m2}}{{Tree chart/end}}
| {{grande|<code>mp2</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|mp2}}{{Tree chart/end}}
|-
| {{grande|<code>o2</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|o2}}{{Tree chart/end}}
| {{grande|<code>b2</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|b2}}{{Tree chart/end}}
| {{grande|<code>p2</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|p2}}{{Tree chart/end}}
|-
| {{grande|<code>on2</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|on2}}{{Tree chart/end}}
| {{grande|<code>n2</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|n2}}{{Tree chart/end}}
| {{grande|<code>np2</code>}} || style="border: 1px solid gray;" | {{Tree chart/start}}{{Tree chart|np2}}{{Tree chart/end}} 
|}

{{clear}}
{|
|+ '''Varios:'''<!-- This subset is an insufficient set or questionable, but maps onto tiles that exist in {{familytree}}: -->
|-
| ||
| {{grande|<code>T2</code>}} ||style="border:1px solid gray"| {{Tree chart/start}}{{Tree chart|T2}}{{Tree chart/end}}
|-
| {{grande|<code>G2</code>}} ||style="border:1px solid gray"| {{Tree chart/start}}{{Tree chart|G2}}{{Tree chart/end}}
| {{grande|<code>X</code>}} ||style="border:1px solid gray"| {{Tree chart/start}}{{Tree chart|X}}{{Tree chart/end}}
| {{grande|<code>K</code>}} ||style="border:1px solid gray"| {{Tree chart/start}}{{Tree chart|K}}{{Tree chart/end}}
| {{grande|<code>l4</code>}} ||style="border:1px solid gray"| {{Tree chart/start}}{{Tree chart|l4}}{{Tree chart/end}}
|-
| ||
| {{grande|<code>U</code>}} ||style="border:1px solid gray"| {{Tree chart/start}}{{Tree chart|U}}{{Tree chart/end}}
|}

==Atributos de estilo==
La apariencia de los cuadros en una fila se puede controlar mediante los siguientes parámetros de plantilla opcionales:
* ''border'' especifica el ancho del borde del cuadro en píxeles,
* ''boxstyle'' se puede usar para agregar declaraciones arbitrarias [[CSS]] directamente a los atributos de estilo de caja. Por ejemplo, el siguiente código:

<pre><nowiki>
{{Tree chart/start}}
{{Tree chart|border=1|boxstyle=color:white; background:green; | | FOO |y| BAR | |FOO=Box 1|BAR=Box 2}}
{{Tree chart| | |,|-|^|-|.| | }}
{{Tree chart|border=3|boxstyle=background:yellow; | | FOO | | BAR | |FOO=Box 3|BAR=Box 4}}
{{Tree chart/end}}
</nowiki></pre>

produce este cuadro:

{{Tree chart/start}}
{{Tree chart|border=1|boxstyle=color:white; background:green;  | | FOO |y| BAR | |FOO=Box 1|BAR=Box 2}}
{{Tree chart| | |,|-|^|-|.| | }}
{{Tree chart|border=3|boxstyle=background:yellow; | | FOO | | BAR | |FOO=Box 3|BAR=Box 4}}
{{Tree chart/end}}

Los atributos de estilo incluso se pueden establecer para cuadros individuales dentro de cada fila, como en el siguiente ejemplo:

<pre><nowiki>
{{Tree chart/start}}
{{Tree chart| | | | |CLEAR| | | | |CLEAR=Clear box}}
{{Tree chart| |,|-|-|'|!|`|-|-|.| }}
{{Tree chart|RED  |~|GREEN|~|BLUE |RED=Red box|GREEN=Green box|BLUE=Blue box
|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>

que produce esto:

{{Tree chart/start}}
{{Tree chart| | | | |CLEAR| | | | |CLEAR=Clear box}}
{{Tree chart| |,|-|-|'|!|`|-|-|.| }}
{{Tree chart|RED  |~|GREEN|~|BLUE |RED=Red box|GREEN=Green box|BLUE=Blue box
|boxstyle_RED  =color:white; background-color: red;
|boxstyle_GREEN=color:yellow; background-color: green;
|boxstyle_BLUE =color:white; background-color: blue;
}}
{{Tree chart/end}}

'''Nota:''' Al especificar atributos de estilo para cuadros con nombre individuales, asegúrese de que los nombres de los cuadros estén alineados con el lado '''izquierdo''' del área reservada para ellos en la llamada de plantilla (como en "<code>|RED&nbsp;&nbsp;|</code>"en lugar de"<code>|&nbsp;RED&nbsp;|</code>" en el ejemplo anterior), de lo contrario, la plantilla terminará buscando un parámetro de estilo con espacios en su nombre.

La plantilla {{tl|Tree chart/start}} también acepta un parámetro opcional {{param|style}} que se puede usar para establecer estilos CSS para todo el diagrama, y un parámetro opcional {{param|align}} para establecer la alineación del gráfico.

== Migración desde ''Árbol genealógico''==
La plantilla {{tl|tree chart}} es ampliamente compatible con la plantilla anterior {{tl|Árbol genealógico}}. Sin embargo, para usar la funcionalidad adicional que se ofrece con esta plantilla, los diagramas deben actualizarse para usar {{tl|tree chart}} en su lugar. Muchos diagramas de {{tl|Árbol genealógico}} pueden modificarse para usar {{tl|tree chart}} simplemente reemplazando el wikitexto <code>Árbol genealógico</code> por <code>tree chart</code>. Algunos de los conectores "mixtos" tuvieron que ser renombrados, y los diagramas {{tl|Árbol genealógico}} que usan estos conectores tendrán que hacer algunos cambios. Además, se han incluido tres conectores "varios" en esta lista que no han cambiado: <code>K, U, X.</code>

{| class="wikitable" style="text-align:center; float: left; margin-left: 1em;"
|+Conectores modificados
!Tile!!{{tl|Árbol genealógico}}!!{{tl|tree chart}}||Notas sobre<br />parámetros
|-
|{{Tree chart/start}}{{Tree chart|c}}{{Tree chart/end}}||<code>{</code>||<code>c</code>||Cambiado
|-
|{{Tree chart/start}}{{Tree chart|d}}{{Tree chart/end}}||<code>}</code>||<code>d</code>||Cambiado
|-
|{{Tree chart/start}}{{Tree chart|t}}{{Tree chart/end}}||<code>#</code>||<code>t</code>||Cambiado
|-
|{{Tree chart/start}}{{Tree chart|e}}{{Tree chart/end}}||<code>[</code>||<code>e</code>||Cambiado
|-
|{{Tree chart/start}}{{Tree chart|f}}{{Tree chart/end}}||<code>]</code>||<code>f</code>||Cambiado
|-
|{{Tree chart/start}}{{Tree chart|di}}{{Tree chart/end}}||<code>b</code>||<code>di</code>||Cambiado
|-
|{{Tree chart/start}}{{Tree chart|fh}}{{Tree chart/end}}||<code>c</code>||<code>fh</code>||Cambiado
|-
|{{Tree chart/start}}{{Tree chart|ic}}{{Tree chart/end}}||<code>d</code>||<code>ic</code>||Cambiado
|-
|{{Tree chart/start}}{{Tree chart|he}}{{Tree chart/end}}||<code>j</code>||<code>he</code>||Cambiado
|-
|{{Tree chart/start}}{{Tree chart|ye}}{{Tree chart/end}}||<code>n</code>||<code>ye</code>||Cambiado
|-
|{{Tree chart/start}}{{Tree chart|om2}}{{Tree chart/end}}||<code>p</code>||<code>om2</code>||Cambiado
|-
|{{Tree chart/start}}{{Tree chart|mp2}}{{Tree chart/end}}||<code>q</code>||<code>mp2</code>||Cambiado
|-
|{{Tree chart/start}}{{Tree chart|kr2}}{{Tree chart/end}}||<code>r</code>||<code>kr2</code>||Cambiado
|}

{| class="wikitable" style="text-align:center; float: left; margin-left: 1em;"
|+Conectores varios
!Conector!!{{tl|Árbol genealógico}}!!{{tl|tree chart}}||Notas sobre<br />parámetros
|-
|{{Tree chart/start}}{{Tree chart|G2}}{{Tree chart/end}}||<code>G</code>||<code>G2</code>||Cambiado
|-
||{{Tree chart/start}}{{Tree chart|K}}{{Tree chart/end}}||<code>K</code>||<code>K</code>||Igual
|-
|{{Tree chart/start}}{{Tree chart|T2}}{{Tree chart/end}}||<code>T</code>||<code>T2</code>||Cambiado
|-
||{{Tree chart/start}}{{Tree chart|U}}{{Tree chart/end}}||<code>U</code>||<code>U</code>||Igual
|-
||{{Tree chart/start}}{{Tree chart|X}}{{Tree chart/end}}||<code>X</code>||<code>X</code>||Igual
|-
|{{Tree chart/start}}{{Tree chart|l4}}{{Tree chart/end}}||<code>k</code>||<code>l4</code>||Cambiado
|}
{{clear}}
Al convertir de {{tl|Árbol genealógico}} a {{tl|tree chart}} se debe tener cuidado con todos los glifos mencionados en esta sección para generar conectores con {{tl|Árbol genealógico}}, teniendo cuidado al modificarlos para que los conectores no se alteren, siendo reemplazados por conectores inapropiados de {{tl|tree chart}}.
{|
|-
|Por ejemplo: el glifo "[[k]]" genera el conector
|style="border:1px solid gray"|{{familytree/start}}{{Árbol genealógico|k}}{{familytree/end}} 
|con {{tl|Árbol genealógico}} 
|pero
|style="border:1px solid gray"|{{Tree chart/start}}{{Tree chart|k}}{{Tree chart/end}}
|con {{tl|tree chart}}
|(en vez de usar "l4" para generar
|style="border:1px solid gray"|{{Tree chart/start}}{{Tree chart|l4}}{{Tree chart/end}}
|con {{tl|tree chart}}).
|}

Por último, si algún uso de la plantilla {{tl|Árbol genealógico}} termina con <code>|}}</code>, esa barra vertical debe eliminarse, dejando la última celda en esa fila que contenga texto o un espacio.

La herramienta familytree.js se puede usar para convertir las distintas sintaxis. Simplemente cámbiese la etiqueta de inicio editando el código, luego hágase clic en "Art&nbsp;→&nbsp;Plantillas" para volver a la vista de wikitexto. Las otras plantillas se actualizarán para que coincidan.

== Véase también ==
* [[:en:Hispanopedia:Family trees]] for other methods.
* [[:en:User:GregU/familytree.js|familytree.js]], una herramienta para la fácil creación o actualización de diagramas utilizando estas plantillas
* [[:en:Category:Family tree templates]]
* [[:en:Template:Nerva–Antonine family tree]], un ejemplo muy completo
* [[Familia Kennedy]], otro ejemplo muy completo
* [[Plantilla:Árbol genealógico]]
* [[Plantilla:Ahnentafel]]

<includeonly>
[[Categoría:Hispanopedia:Plantillas de diagramas]]
[[Categoría:Hispanopedia:Plantillas de genealogía]]
</includeonly>