2

Pitch: 8n8, um mapa visual para entender código, principalmente escrito por IA



Fluxo interno de uma função

Já faz um tempo que quase todo código que eu escrevo passa pela IA. E isso tem um efeito colateral chato: o código cresce bem mais rápido do que eu consigo ler. Peço uma coisa pequena, o agente mexe em vários arquivos em minutos, e isso me leva cada vez mais a só aceitar e confiar no teste que ele mesmo escreveu.A verdade é que no final eu não sei, quem chama quem, por onde o dado passa, o que mudou de fato no fluxo, só sei que funciona, ao menos parece.

Procurei alguma ferramenta para me auxiliar com isso, algo que mostrasse de forma visual e rápida, mas não achei nada que me servisse.
Ah, mas e o Obsidian, Graphify e outros? Eu até tentei, mas não me ajudou em muita coisa, não da maneira que eu queria. Eu queria algo mais próximo de um fluxograma, como aqueles que a gente desenha no excalidraw, algo tão simples quanto nós conectados por arestas, como o n8n, aquele que a gente brinca, mas facilita muito pra quem não quer ver a cara do código.

Tendo o n8n como refência e sem encontrar nada que me atendesse, comecei a fazer eu mesmo o que eu queria, daí surgiu o 8n8. E sim, o n8n não serviu apenas como inspiração pro conceito.

É extensão vscode ✅
É CLI e PWA ✅
É pacote npm ✅
É open source ✅

Fiz um vídeo curto mostrando do 8n8 em ação.

Como funciona

Você aponta uma pasta e ele desenha o mapa. Começa pelos arquivos e como eles se ligam. Aqui, por exemplo, um arquivo Python faz um POST pra uma rota, e o 8n8 liga isso ao arquivo TypeScript que atende essa rota:

Mapa de uma pasta com a ligação HTTP entre orders.py e server.ts

Clicando num nó você entra nele. Uma função vira o passo a passo dela: as chamadas, o if com os dois caminhos, a requisição HTTP, o banco e o retorno.

E qualquer nó abre o código de verdade, com arquivo e linha. Dá pra pedir um resumo, sugestões de melhoria e conversar sobre aquele trecho.

Painel do nó com o código de orders.py

Quem desenha o mapa não é a IA

Essa foi a decisão que mais pesou. Se a IA montasse o mapa, eu ia ter que revisar o mapa também, e aí não resolvia nada. Então quem faz isso é o Tree-sitter, que faz o parsing do código. O mesmo código gera sempre o mesmo mapa.

O LLM só entra pra escrever os resumos e as sugestões. Sem ele o mapa funciona normal, só fica sem os textos. Se você tem o Claude Code instalado, ele usa a sua assinatura e não precisa de chave. Também dá pra usar OpenRouter, OpenAI, Anthropic ou Ollama.

Por enquanto ele lê Python e TypeScript, e uma pasta misturando as duas vira um mapa só. Cada linguagem é um plugin separado, então adicionar outra não é um bicho de sete cabeças. Roda tudo local, sem servidor externo.

Pra testar

npx 8-n-8 .

Precisa de Node 22.13 ou mais novo. O pacote ficou 8-n-8 porque o npm não me deixou usar 8n8. Também tem uma extensão pro VS Code, que por enquanto você instala a partir do repositório.

É open source (GPL-3.0): github.com/Ferreira-Jefferson/8n8

Se testar, me conta o que achou, principalmente se ajudou a entender algum fluxo importante.
E se tem alguma linguagem que você queria ver lá, fala também.

Carregando publicação patrocinada...
1

Como você mostra no mapa uma chamada HTTP cuja URL vem da configuração? Eu ia querer distinguir as ligações confirmadas pelo código das que ainda precisam de conferência.

1

Ótima pergunta, obrigado!
O 8n8 ainda está em desenvolvimento e eu não tinha considerado esse ponto. Hoje o mapa não diferencia uma ligação provada pelo código de uma que depende de configuração. Vou aplicar uma melhoria para separar as duas: ligações confirmadas com linha cheia, e as que dependem de config marcadas como "a conferir".

1