Framework TypeScript transforma texto em infográficos editáveis com IA
Projeto da AntV combina sintaxe declarativa, templates, renderização SVG e integração com agentes de IA.
O AntV Infographic é um framework de geração e renderização de infográficos criado pela organização AntV. O projeto aparece em alta no ranking semanal do Trendshift, na posição #20, e acumulava 475 novas estrelas no período consultado. Sua proposta é transformar descrições textuais e dados estruturados em peças visuais, reduzindo o trabalho manual de criar layouts e permitindo que resultados gerados por IA sejam editados.
Dados rápidos
- Repositório: https://github.com/antvis/Infographic
- Licença: MIT
- Linguagem: TypeScript
- Popularidade: 6.173 estrelas e 486 forks
- Ranking: Trendshift semanal #20
- Consulta: 11 de agosto de 2026
Texto estruturado para gerar informação visual
O Infographic usa uma sintaxe declarativa, isto é, uma forma de descrever o resultado desejado sem programar cada elemento visual individualmente. No exemplo do README, o usuário informa um modelo, uma estrutura de dados e itens como rótulo, descrição e status.
Essa abordagem pode atender equipes que precisam converter conteúdo textual em apresentações visuais, fluxos ou resumos. Em vez de desenhar cada caixa e conexão, o desenvolvedor fornece uma estrutura que o mecanismo interpreta e renderiza.
O projeto também foi desenhado para uso com inteligência artificial. A sintaxe é apresentada como adequada à geração por IA e permite que uma saída parcial seja renderizada progressivamente durante uma transmissão.
Como instalar e renderizar
A instalação é feita como pacote npm, o gerenciador de pacotes do ecossistema JavaScript e TypeScript:
npm install @antv/infographic
Depois, o código importa a classe Infographic, define um contêiner, dimensões e a possibilidade de edição. A chamada render() recebe a descrição do infográfico:
import { Infographic } from '@antv/infographic';
const infographic = new Infographic({
container: '#container',
width: '100%',
height: '100%',
editable: true,
});
infographic.render(`
infographic list-row-simple-horizontal-arrow
data
lists
- label Step 1
desc Start
- label Step 2
desc In Progress
- label Step 3
desc Complete
`);
A saída é renderizada em SVG por padrão. O formato favorece fidelidade visual e edição posterior, segundo a documentação do projeto.
No modo de streaming, cada trecho recebido é acumulado em um buffer e enviado novamente ao método render(). Assim, uma interface pode mostrar a composição enquanto o texto gerado pela IA chega, em vez de esperar a resposta completa.
Onde o projeto pode ser usado
- Fluxos de etapas: estruturas como “Step 1”, “Step 2” e “Step 3” podem representar processos, progresso ou instruções.
- Resumos visuais: descrições e listas podem ser convertidas em composições mais fáceis de consultar.
- Conteúdo gerado por IA: agentes podem produzir a sintaxe do infográfico a partir de uma descrição textual.
- Materiais editáveis: o editor integrado permite ajustar resultados gerados automaticamente.
- Protótipos de visualização: templates e componentes prontos ajudam a testar diferentes apresentações sem construir todos os elementos do zero.
O README informa cerca de 200 templates, componentes para itens de dados e layouts. Também há temas predefinidos, incluindo estilos desenhados à mão, gradientes e padrões, com possibilidade de personalização.
O que diferencia o Infographic
A principal distinção está no foco em infográficos declarativos, e não apenas em gráficos convencionais. O projeto combina uma linguagem própria, templates, sistema de temas, editor integrado e saída SVG em um mesmo framework.
A integração com agentes também é organizada em “skills”, módulos voltados a tarefas específicas. Entre elas estão a criação de arquivos HTML com infográficos, a geração de sintaxe a partir de descrições, a criação de estruturas e itens personalizados e a atualização da biblioteca de templates.
O repositório documenta integrações com Claude Code e Codex. No Claude Code, as skills podem ser instaladas por marketplace ou manualmente a partir de um pacote publicado nas releases.
Maturidade, segurança e cuidados
O repositório foi criado em 11 de setembro de 2025. A versão mais recente informada é a 0.2.19, publicada em 6 de maio de 2026, e o último commit registrado ocorreu em 1º de junho de 2026. Esses dados situam o projeto em uma fase de desenvolvimento inicial de versão, embora a atividade pública inclua 22 issues abertas.
O código está sob licença MIT, mas a licença não elimina a necessidade de revisar o uso de conteúdos, imagens, dados e saídas produzidas por aplicações que utilizem o framework. Auditoria de segurança, política detalhada para dados enviados a modelos de IA, requisitos de compatibilidade e métricas de desempenho: não informado no repositório.
Também não estão informados no repositório os provedores de modelos de IA necessários, uma lista completa de dependências, garantias de estabilidade da API ou suporte comercial. Antes de adotar a ferramenta em produção, esses pontos devem ser verificados na documentação e no próprio código.
Resumo rápido
- Projeto: framework declarativo para gerar e renderizar infográficos
- Licença: MIT
- Linguagem: TypeScript
- Estrelas: 6.173
- Ranking: Trendshift semanal #20
- Risco principal: maturidade, segurança e requisitos de IA não informados no repositório
Fontes
Fontes
Como fazemos: nossa equipe monitora diariamente os repositórios de código aberto em maior alta e produz esta cobertura com apoio de modelos de linguagem, sempre a partir de dados verificados na fonte primária — repositório, documentação oficial e ranking público. Os números de estrelas e a posição no ranking refletem o momento da coleta. Entenda o método.