Como ele é
Parece uma constelação vista de cima: milhares de pontos coloridos, um tom para cada comunidade, ligados por fios finos e translúcidos. Ao abrir, a rede se espalha e se acomoda sozinha em aglomerados, enquanto um selo no topo mostra o progresso até ficar estável. Os nós mais conectados são maiores e ganham rótulo. Passar o mouse sobre um ponto acende os vizinhos e mostra um balão com nome, grupo e número de conexões. Clicar abre um cartão com as principais ligações e o botão de fixar. A busca no topo faz a câmera voar até o nó. O fundo padrão é quase branco.
Você pode estar procurando isto se pediu algo assim
- aquele grafo de pontos ligados tipo o do Obsidian para o meu site
- mapa de conexões entre pessoas, projetos e empresas que dá para explorar
- rede de nós que se organiza sozinha e mostra os grupos por cor
- visualizar a base de conhecimento do meu agente de IA como uma rede
- grafo com milhares de pontos que não trave o navegador
- buscar um item e a tela dar zoom até ele no meio da rede
- mostrar o ecossistema de parceiros como uma teia interativa
Também chamado de
- grafo de forças
- force-directed graph
- grafo de conhecimento
- knowledge graph
- network graph
- visualização de redes
- graph visualization
Quando usar
- Mapas de ecossistemas de inovação, com empresas, pessoas, projetos e editais
- Bases de conhecimento de agentes de IA, para mostrar o que está ligado a quê
- Análise de redes em painéis de pesquisa, inteligência ou relacionamento
- Seções de destaque que querem mostrar escala e conexões de forma explorável
Quando evitar
- Hierarquias simples, como organogramas, que ficam mais claras em árvore
- Páginas que já têm outro efeito WebGL pesado
- Aparelhos sem WebGL2, em que o modo CPU limita o grafo a 2.500 nós por padrão
Como pedir para a sua IA
Crie um grafo de conhecimento interativo com simulação de forças na GPU para mapear o ecossistema da minha plataforma: cores por comunidade, busca com voo de câmera, vizinhança no hover, nós fixáveis, modo CPU quando não houver WebGL2, pausa fora da tela e uma tabela oculta para leitores 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 Constelação
Constelação funciona sem WebGL2?
Funciona. Se o aparelho não tiver WebGL2 com render em float, Constelação troca automaticamente para uma simulação em CPU desenhada com Canvas 2D e as mesmas fórmulas, limitada a 2.500 nós por padrão pela prop cpuLimit. O selo no topo mostra qual modo está ativo.
Posso usar meus próprios dados em Constelação?
Pode. Passe nodes com id, rótulo e grupo e edges com origem e destino; Constelação colore por grupo, calcula quantas conexões cada nó tem e emite eventos ao selecionar ou fixar. Sem dados, o componente gera uma rede de demonstração com hubs, 10 mil nós e 12 comunidades a partir de uma semente.
Constelação respeita quem prefere menos movimento?
Sim. Com a preferência de movimento reduzido ativa, Constelação calcula o layout sem mostrar os quadros intermediários e exibe a rede já estável, e a câmera pula direto para o destino em vez de voar. A simulação também para quando o grafo sai da tela.
