TRILHA 1

🌱 Fundamentos

Do problema concreto — chegar num repositório de 200 mil linhas e não saber por onde começar — ao primeiro grafo gerado pelo Understand Anything. Aqui você aprende o que a ferramenta faz, como ela representa um codebase, e como rodar o fluxo do zero.

3
Módulos
21
Tópicos
~2h30
Duração
Básico
Nível

Mapa da trilha

Como o dashboard se parece

Antes da teoria, veja o produto em movimento. Abaixo está o grafo estrutural gerado pelo /understand --full: cada nó é um arquivo do repositório, cada aresta um import ou chamada. Você navega pan/zoom, clica num nó e a sidebar mostra o conteúdo.

Animação do dashboard do Understand Anything mostrando o grafo estrutural de um codebase com nós e arestas, navegação por pan/zoom e abertura de sidebar ao clicar em um nó.
Dashboard real — visão estrutural do knowledge graph (clique em qualquer nó abre a sidebar Info)

Conteúdo detalhado

1.1 ~50 min

🧭 O que é Understand Anything e qual problema resolve

Por que ler código no escuro é caro, o que devs fazem hoje, e o que muda quando o repositório vira um grafo interativo.

O que é:

O cenário base do Understand Anything — entrar num repositório grande e gastar dias só para entender pastas, módulos e quem chama o quê.

Por que aprender:

Sem nomear o problema, ninguém adota a ferramenta. Esse tópico ancora a dor antes de mostrar a solução.

Conceitos-chave:

Tempo de onboarding, custo de troca de time, leitura passiva de código, fadiga de README.

O que é:

Mapeamento honesto das estratégias tradicionais de onboarding: ler docs, abrir o IDE no caos, perguntar no Slack, fazer pair com sênior.

Por que aprender:

Identificar onde cada técnica falha — docs desatualizadas, sêniores ocupados, grep sem contexto — justifica a necessidade de um grafo.

Conceitos-chave:

Tribal knowledge, bus factor, doc rot, navegação por símbolo, leitura linear vs estrutural.

O que é:

Um plugin open-source para Claude Code, Cursor, Copilot, Codex e outros agentes que combina análise estática (tree-sitter) com sumarização por LLM para produzir um dashboard interativo.

Por que aprender:

Entender que não é "mais um chatbot": é um pipeline que gera artefato visual persistente sobre o repositório.

Conceitos-chave:

Plugin, slash command, pipeline multi-agente, análise estática, sumarização determinística.

O que é:

Mapa das pessoas dentro de uma equipe que tipicamente perdem tempo navegando código: júnior em onboarding, PM tentando estimar, reviewer perdido em PR grande, arquiteto fazendo auditoria, suporte caçando bug.

Por que aprender:

Identificar sua persona acelera a adoção — cada uma usa o dashboard de um jeito.

Conceitos-chave:

Persona-adaptive UI, onboarding visual, PR review, auditoria arquitetural, root-cause analysis.

O que é:

Comparação direta: ler arquivo a arquivo vs. ver o grafo, perguntar no Slack vs. /understand-chat, fazer code review cego vs. /understand-diff.

Por que aprender:

Mudança de comportamento exige ver o ganho. Esse tópico mostra antes/depois.

Conceitos-chave:

Leitura estrutural, navegação visual, contexto persistente, tour guiado, impacto de diff.

O que é:

Auto-discovery: o plugin instala uma vez e os agentes (Claude Code, Cursor, Copilot, Codex, Gemini CLI, OpenCode, Vibe CLI) detectam os slash commands automaticamente.

Por que aprender:

Saber que o investimento de uso é portável entre clientes — não é vendor lock-in.

Conceitos-chave:

Plugin manifest, auto-discovery, fallback manual, multi-cliente, model: inherit.

Ver Completo
1.2 ~55 min

🕸️ O conceito de knowledge graph e o dashboard interativo

O que o Understand Anything realmente entrega: um grafo persistente em .understand-anything/ e uma UI 75% grafo + 25% sidebar.

O que é:

Um nó representa uma unidade do código — pode ser um arquivo, uma função, uma classe ou um conceito de domínio.

Por que aprender:

Sem entender o que é nó, o usuário não interpreta o grafo: confunde "muitos nós" com "muito código".

Conceitos-chave:

Tipo de nó, layer (API/Service/Data/UI/Util), summary, símbolos, path.

O que é:

Uma aresta liga dois nós — pode significar "importa", "chama", "estende", "depende de", "compõe".

Por que aprender:

A força do grafo está nas arestas. Sem elas você só tem uma lista de arquivos.

Conceitos-chave:

Tipo de aresta, direção, peso, dependência cíclica, fan-in/fan-out.

O que é:

O grafo vive como JSON em .understand-anything/knowledge-graph.json dentro do repositório. Pode ser versionado, compartilhado, regenerado.

Por que aprender:

Saber onde está o artefato permite versionar, automatizar e debugar quando algo dá errado.

Conceitos-chave:

Schema validation, intermediate files, gitignore, regeneração incremental.

O que é:

A tela é dividida em grafo (75%) à esquerda e sidebar de 360px à direita. Não tem chat panel nem editor Monaco — o foco é o grafo.

Por que aprender:

Conhecer o layout evita a frustração de procurar features no lugar errado.

Conceitos-chave:

React Flow, Zustand, TailwindCSS v4, dark luxury theme, DM Serif Display.

O que é:

Aba Info mostra ProjectOverview (default), NodeInfo (ao selecionar nó) ou LearnPanel (persona Learn). Aba Files mostra árvore derivada do grafo.

Por que aprender:

A sidebar é onde 80% da informação textual vive. Saber o que aparece quando muda a UX.

Conceitos-chave:

ProjectOverview, NodeInfo, LearnPanel, FileExplorer, persona switching.

O que é:

Clicar em um arquivo abre um viewer que sobe pela base da tela; um botão expande para modal full-screen. Conteúdo vem de /file-content.json via dev server, gated por token + allowlist.

Por que aprender:

Ver código no contexto do grafo (sem trocar de ferramenta) é o que diferencia o dashboard de uma planilha.

Conceitos-chave:

prism-react-renderer, access token, path allowlist, slide-up viewer, fullscreen modal.

O que é:

A navegação combina ações visuais (pan, zoom, click) com tours auto-gerados que ordenam nós por dependência — você "lê" o codebase na ordem certa.

Por que aprender:

Sem o tour, devs novos clicam aleatoriamente. Com tour, há um caminho.

Conceitos-chave:

Tour builder, ordenação topológica, fuzzy search, semantic search, layer view.

Ver Completo
1.3 ~45 min

⚙️ Fluxo de uso: do /understand ao dashboard e casos reais

Passo a passo de /understand --full, os cinco comandos auxiliares e três casos práticos do dia a dia.

O que é:

O comando principal: dispara o pipeline (project-scanner, file-analyzer, architecture-analyzer, tour-builder, graph-reviewer), monta o grafo e auto-aciona /understand-dashboard.

Por que aprender:

Esse é o ponto de entrada. Sem rodar essa linha, nada existe.

Conceitos-chave:

Auto-trigger, intermediate files, cleanup, model omitido para portabilidade.

O que é:

Sobe o dashboard React lendo .understand-anything/knowledge-graph.json + endpoint /file-content.json.

Por que aprender:

Saber abrir e fechar o dashboard sem depender do auto-trigger te dá controle.

Conceitos-chave:

Dev server, schema validation, error banner, token + allowlist.

O que é:

Modo conversa que usa o grafo como contexto — responde "onde está o auth?" com nós e caminhos reais.

Por que aprender:

É a porta de entrada para quem prefere texto a clicar no grafo.

Conceitos-chave:

Grounded answers, citação de nós, retrieval pelo grafo.

O que é:

Compara HEAD com uma branch/commit e mostra quais nós/arestas mudam de comportamento. Útil em PR review.

Por que aprender:

Você vê o "raio de impacto" sem ler todo o diff manualmente.

Conceitos-chave:

Ripple effect, fan-in afetado, regression risk, review priorizado.

O que é:

Recebe um arquivo/função e devolve explicação plain-English contextualizada por nós vizinhos do grafo.

Por que aprender:

É diferente de "ChatGPT olha o arquivo" — aqui a explicação cita quem chama e quem é chamado.

Conceitos-chave:

Contexto estrutural, vizinhança, leitura em camadas.

O que é:

Gera um roteiro passo a passo de quais nós ler primeiro, baseado em dependência e centralidade.

Por que aprender:

Substitui o "comece lendo o README" por uma sequência concreta de arquivos com explicação.

Conceitos-chave:

Centrality, dependency order, persona-adaptive, checklist de leitura.

O que é:

Três histórias concretas: dev novo no time, reviewer com PR de 40 arquivos, suporte caçando bug de produção.

Por que aprender:

Ver o ROI em situações reais consolida a adoção.

Conceitos-chave:

Time-to-first-PR, review velocity, MTTR, decisão baseada em grafo.

Ver Completo
← Voltar ao curso Próxima Trilha: Pipeline & Agentes →