Como ele é
Cartões brancos de cantos arredondados, cada um com as iniciais num círculo colorido, o nome em negrito, o cargo abaixo e um filete lateral na cor da equipe, ligados por linhas em ângulo reto com cantos suaves. Quem tem equipe mostra um selo com o número de subordinados diretos; clicar nele faz os cartões saírem de dentro do chefe e se encaixarem embaixo, e recolher os faz voltar. Grupos grandes da base aparecem empilhados para economizar largura. Buscar alguém acende, na cor de destaque, a linha que liga essa pessoa ao topo.
Você pode estar procurando isto se pediu algo assim
- organograma da empresa que abre e fecha os setores
- mostrar a estrutura da secretaria com cargos e equipes no site
- árvore de pessoas com nome e cargo que dê para navegar
- buscar um funcionário e ver a quem ele responde
- organograma bonito para a proposta comercial do cliente
- hierarquia da equipe do projeto em cartões ligados por linhas
- organograma acessível que funcione com o teclado
Também chamado de
- organograma
- org chart
- organizational chart
- árvore hierárquica
- hierarchy tree
- estrutura organizacional
- tree layout
Quando usar
- Portais institucionais que apresentam secretarias, diretorias e equipes
- Propostas comerciais que mostram a estrutura da equipe do projeto
- Intranets e sistemas de RH em que as pessoas procuram colegas e gestores
- Relatórios de governança com a cadeia de responsáveis por área
Quando evitar
- Pessoas com mais de um gestor, já que cada cartão tem um só chefe na árvore
- Redes de relacionamento sem hierarquia, que se leem com mais clareza num grafo
- Páginas que precisam de fotos das pessoas, já que o cartão mostra iniciais
Como pedir para a sua IA
Crie um organograma interativo para o portal institucional: layout automático em árvore sem sobreposição, ramos que abrem e fecham com animação, busca por nome ou cargo que destaca o caminho até a pessoa, zoom e pan, cores por equipe e navegação por setas com leitor de tela.
Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Linhagem
Como passo os dados da minha equipe para Linhagem?
Pela prop data, com uma árvore de pessoas: cada uma tem id, nome, cargo, equipe e a lista de subordinados. Linhagem dá uma cor a cada equipe, abre os níveis definidos em initialDepth e emite select e toggle; focusPerson e highlightPath centralizam alguém e mostram o caminho a partir do seu código.
Linhagem funciona com teclado e leitor de tela?
Sim. Linhagem segue o padrão de árvore acessível, com nível, posição e tamanho de cada grupo. Seta para baixo abre e entra na equipe, seta para cima volta ao chefe, as laterais passam pelos colegas do mesmo nível, Enter recolhe ou expande e digitar letras pula para o nome.
Linhagem funciona no celular?
Funciona. No celular, um dedo arrasta o organograma, dois dedos dão zoom em pinça e tocar no selo abre ou fecha a equipe. Em telas estreitas, Linhagem coloca a busca abaixo do título e esconde os rótulos dos botões, e as pilhas de cartões ajudam a caber na largura.
