Predefinição:Diagrama/doc

Esta é uma subpágina de documentação para Predefinição:Diagrama (Clique na ligação se você quer vê-la diretamente).
Ela contém informações sobre o uso, categorias e outros conteúdos que não são parte da predefinição propriamente dita.

Uso

Essa predefinição pretende simplificar a criação de diagramas, usando o módulo:Diagrama.

Simples

A predefinição aceita um número indeterminada de itens separados por uma barra vertical (|). Nesse exemplo, os itens são numerados (|1= |2= |3=), mas eles não são necessários para que o software entenda a sequência de números. Por exemplo, na sequência João|Pedro|Maria, "João" correspondente ao item 1 e "Maria" ao item 3. Para determinar as conexões, utilize o campo |lines=. As conexões são definidas por um único número, seguido de um hífen (-) e todos os demais números que devem ser conectados separados por vírgulas.

{{diagrama|1=João|2=Maria|3=Pedro|lines=1-2,3}}

Nesse exemplo, o diagrama vai fazer uma ligação entre o item 1 com os itens 2 e 3.

João
- Maria
- Pedro

{{diagrama|1=João|2=Maria|3=Pedro|4=Tiago|lines=1-2,3; 3-4}}

Nesse exemplo, o diagrama vai fazer uma ligação entre o item 1 com os itens 2 e 3. E o item 3 faz uma conexão com o item 4. Note a utilização de ponto e vírgula (;) para separar as conexões.

João
- Maria
- Pedro
  - Tiago

Campo group=

A predefinição permite a realização de conexões não ligadas diretamente na árvore genealógica com o campo group=. Ele funciona semelhante ao campo lines=, no entanto o primeiro número antes do hífen sempre deve ser aquele que está conectado diretamente na árvore genealógica, ou então ele será ignorado.

{{diagrama|1=João|2=Maria|3=Pedro|group=1-2|lines=1-3}}

Nesse exemplo, o diagrama vai fazer uma ligação entre o item 1 com o item 3. Além disso, uma conexão lateral entre o item 1 e o item 2 é realizado com o campo group=.

JoãoMaria
- Pedro

Campo type=

A predefinição permite que o diagrama evolua de cima para baixo ("vertical") ou da esquerda para direita ("horizontal"). Por padrão, o campo type= está definido como "vertical". O mesmo diagrama utilizado no exemplo acima está disponível abaixo, na horizontal:

{{diagrama|1=João|2=Maria|3=Pedro|4=Tiago|lines=1-2,3; 3-4|type=horizontal}}

Nesse exemplo, o diagrama vai fazer uma ligação entre o item 1 com os itens 2 e 3. E o item 3 faz uma conexão com o item 4. Note a utilização de type=horizontal.

João
- Maria
- Pedro
  - Tiago

Personalização

A predefinição aceita personalização individual de cada item. Você deve definir o número do item ao utilizar qualquer um dos campos abaixo. Por exemplo, para o item 1, você deve utilizar color1=, bg1=, border1= e style1=. Caso contrário, será aplicado em todos os itens. Verifique os campos:

color=: permite a escolha da cor do texto. Por padrão, assume a cor do texto atual da página. Isso é útil para acessibilidade entre o modo claro (texto preto) e modo escuro (texto branco).
bg=: permite a escolha do fundo. Por padrão, assume uma cor neutra cinza, também adaptada ao modo claro e modo escuro.
border=: permite a escolha do arredondamento da borda.
style=: permite a adição de qualquer código CSS. Você pode personalizar itens individuais ou o diagrama completo com esse campo.

Outro campo existente é align=, que não se aplica aos itens individuais. Aceita "left" (valor padrão, esquerda) e "right" (direita).

Campos title=, legend= e hide

title= permite estabelecer um título e legend= uma legenda no rodapé do diagrama. hide= deve ocultar o diagrama se for preenchido com qualquer texto, portanto deixe esse campo vazio caso não seja seu objetivo. Exemplo:

{{diagrama|1=João|2=Maria|3=Pedro|group=1-2|lines=1-3|title=Exemplo|legend=Fonte: Wikiversidade|hide=sim}}

Exemplo

JoãoMaria
- Pedro

Fonte: Wikiversidade

Exemplos

O exemplo abaixo mostra a árvore genealógica de William Shakespeare. Os pais do escritor recebem a cor de fundo rosa (itens 1 e 2), já seus filhos recebem a cor de fundo azul (itens 12, 13 e 14), seus netos receberam a cor amarela (itens 17, 18, 19 e 20) e seus irmãos a cor verde. William está no item 7 no exemplo abaixo e faz ligação com todos seus filhos (7-12,13,14). Uma legenda e uma cor de fundo estão presentes.

{{diagrama|John Shakespeare (c. 1531–1601)|Mary Arden (c. 1537–1608)|Joan (1558–1558)|Margaret (1562–1563)|Gilbert (1566–1612)|Joan (1569–1646)|William<br/>Shakespeare<br/> (1564–1616)|Anne (1571–1579)|Richard (1574–1613)|Edmund (1580–1607)|Anne<br/>Hathaway<br/> (1555–1623)|Susanna Hall (1583–1649)|Judith Quiney (1585–1662)|Hamnet Shakespeare (1585–1596)|John Hall (1575–1635)|Thomas Quiney (1589–1662)|Elisabeth Barnard (1608–1670)|Shakespeare Quiney (1616–1617)|Richard Quiney (1618–1639)|Thomas Quiney (1620–1639)|lines=1-3,4,5,6,7,8,9,10; 7-12,13,14; 12-17; 13-18,19,20|group=1-2; 7-11; 12-15; 13-16|bg12=lightblue|bg13=lightblue|bg14=lightblue|bg3=lightgreen|bg4=lightgreen|bg5=lightgreen|bg6=lightgreen|bg8=lightgreen|bg9=lightgreen|bg10=lightgreen|bg17=gold|bg18=gold|bg19=gold|bg20=gold|bg1=lightpink|bg2=lightpink|style7=font-weight:bold|legend=Baseado na [[w:en:Template:William Shakespeare family tree|Wikipédia em inglês]]|bg=var(--background-color-neutral-subtle)}}

Gera:

John Shakespeare (c. 1531–1601)Mary Arden (c. 1537–1608)
- Joan (1558–1558)
- Margaret (1562–1563)
- Gilbert (1566–1612)
- Joan (1569–1646)
- William
  Shakespeare
  (1564–1616)Anne
  Hathaway
  (1555–1623)
  - Susanna Hall (1583–1649)John Hall (1575–1635)
    - Elisabeth Barnard (1608–1670)
  - Judith Quiney (1585–1662)Thomas Quiney (1589–1662)
    - Shakespeare Quiney (1616–1617)
    - Richard Quiney (1618–1639)
    - Thomas Quiney (1620–1639)
  - Hamnet Shakespeare (1585–1596)
- Anne (1571–1579)
- Richard (1574–1613)
- Edmund (1580–1607)

Baseado na Wikipédia em inglês

O exemplo abaixo mostra os ascendentes do Rei Charles III do Reino Unido. O item 1 (Charles III) recebe um CSS personalizado (style1=), com um polígono em cor vermelha. Além dele, reis ou rainhas que governaram o país (itens 3, 6 e 12) receberam uma cor de fundo azul e cor de texto branco. O título está presente.

{{diagrama|title=Ascendência de Charles III|'''Charles III'''|Príncipe Philip|'''Elizabeth II'''|Príncipe Andrew|Princesa Alice|'''George VI'''|Lady Elizabeth Bowes-Lyon|George I|Olga Constantinovna|Príncipe Louis|Princesa Victoria|'''George V'''|Princesa Victoria|Claude Bowes-Lyon|Cecilia Cavendish-Bentinck|lines=1-2,3; 2-4,5; 3-6,7; 4-8,9; 5-10,11; 6-12,13; 7-14,15|type=horizontal|style1=clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); height:100px; width:130px;|bg1=red|color1=#fff|bg3=#36c|bg6=#36c|bg12=#36c|color3=#fff|color6=#fff|color12=#fff}}

Gera:

Ascendência de Charles III

Charles III
- Príncipe Philip
  - Príncipe Andrew
    - George I
    - Olga Constantinovna
  - Princesa Alice
    - Príncipe Louis
    - Princesa Victoria
- Elizabeth II
  - George VI
    - George V
    - Princesa Victoria
  - Lady Elizabeth Bowes-Lyon
    - Claude Bowes-Lyon
    - Cecilia Cavendish-Bentinck

Observações

Atualmente, a Wikipédia utiliza principalmente a predefinição Tree chart para gerar diagramas. Essa predefinição utiliza caixas para gerar as conexões entre os itens. No entanto, ela apresenta uma síntese complexa. Para fins de comparação, o mesmo diagrama apresentado na documentação da Wikipédia é apresentado abaixo:

Código de {{tree chart}}

Código de {{diagrama}}

{{Tree chart/start|align=center}}
{{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}}

{{diagrama
|Grandma|Grandpa|Mom|Dad|Aunt Daisy|My brother Joe|'''Me!'''|My little sister|lines=1-4,5; 4-6,7,8|group=1-2; 4-3}}

O código acima gera o seguinte diagrama:

GrandmaGrandpa
- DadMom
  - My brother Joe
  - Me!
  - My little sister
- Aunt Daisy

No entanto, a predefinição {{diagrama}} possui limitações. Não permite tantas personalizações quanto a predefinição usada na Wikipédia.

TemplateData

adicione diagramas nas páginas

Parâmetros do modelo
Este modelo prefere a formatação em linha dos parâmetros.
Parâmetro		Descrição	Tipo	Estado
1	`1`	nome do item 1	String	obrigatório
2	`2`	nome do item 2	Desconhecido	obrigatório
3	`3`	nome do item 3	String	sugerido
4	`4`	nome do item 4	String	sugerido
5	`5`	nome do item 5	String	sugerido
6	`6`	nome do item 6	String	sugerido
7	`7`	nome do item 7	String	sugerido
8	`8`	nome do item 8	String	sugerido
9	`9`	nome do item 9	String	sugerido
10	`10`	nome do item 10	String	sugerido
11	`11`	sem descrição	Desconhecido	opcional
12	`12`	sem descrição	Desconhecido	opcional
13	`13`	sem descrição	Desconhecido	opcional
14	`14`	sem descrição	Desconhecido	opcional
15	`15`	sem descrição	Desconhecido	opcional
16	`16`	sem descrição	Desconhecido	opcional
17	`17`	sem descrição	Desconhecido	opcional
18	`18`	sem descrição	Desconhecido	opcional
19	`19`	sem descrição	Desconhecido	opcional
20	`20`	sem descrição	Desconhecido	opcional
21	`21`	sem descrição	Desconhecido	opcional
22	`22`	sem descrição	Desconhecido	opcional
23	`23`	sem descrição	Desconhecido	opcional
24	`24`	sem descrição	Desconhecido	opcional
25	`25`	sem descrição	Desconhecido	opcional
26	`26`	sem descrição	Desconhecido	opcional
27	`27`	sem descrição	Desconhecido	opcional
28	`28`	sem descrição	Desconhecido	opcional
29	`29`	sem descrição	Desconhecido	opcional
30	`30`	sem descrição	Desconhecido	opcional
31	`31`	sem descrição	Desconhecido	opcional
32	`32`	sem descrição	Desconhecido	opcional
33	`33`	sem descrição	Desconhecido	opcional
34	`34`	sem descrição	Desconhecido	opcional
35	`35`	sem descrição	Desconhecido	opcional
36	`36`	sem descrição	Desconhecido	opcional
37	`37`	sem descrição	Desconhecido	opcional
38	`38`	sem descrição	Desconhecido	opcional
39	`39`	sem descrição	Desconhecido	opcional
40	`40`	sem descrição	Desconhecido	opcional
41	`41`	sem descrição	Desconhecido	opcional
42	`42`	sem descrição	Desconhecido	opcional
43	`43`	sem descrição	Desconhecido	opcional
44	`44`	sem descrição	Desconhecido	opcional
45	`45`	sem descrição	Desconhecido	opcional
46	`46`	sem descrição	Desconhecido	opcional
47	`47`	sem descrição	Desconhecido	opcional
48	`48`	sem descrição	Desconhecido	opcional
49	`49`	sem descrição	Desconhecido	opcional
50	`50`	sem descrição	Desconhecido	opcional
lines	`lines`	determine quais itens se conectam Exemplo 1-2,3; 3-4	String	obrigatório
group	`group`	determine conexões fora da árvore genealógica Exemplo 1-2	String	sugerido
align	`align`	defina o alinhamento do diagrama Valores sugeridos `left` `right`	String	opcional
style	`style`	defina estilo em CSS	String	opcional
title	`title`	defina um título ao diagrama	String	opcional
legend	`legend`	defina uma legenda no rodapé	String	opcional
hide	`hide`	oculte o diagrama se preenchido	String	opcional
color	`color`	defina a cor do texto do diagrama	String	opcional
bg	`bg`	defina a cor de fundo do diagrama	String	opcional