Cómo convierte GraphMyCode
tu código en un grafo

Sube tu repositorio

Arrastra un ZIP de tu proyecto o pega la URL de un repositorio público de GitHub. GraphMyCode descarga o descomprime los archivos directamente en la memoria del navegador — ningún byte llega a un servidor externo.

Límite: hasta 250 archivos de código fuente por sesión, con un máximo de 200 KB por archivo.

Análisis AST con WebAssembly

Cada archivo pasa por tree-sitter, un parser incremental compilado a WebAssembly. GraphMyCode incluye gramáticas WASM para cada lenguaje soportado y las ejecuta localmente sin llamadas a red.

El parser extrae la estructura sintáctica completa: funciones, clases, interfaces, imports, exports y sus relaciones. No ejecuta el código — solo lo lee.

Construcción del grafo de conocimiento

Los símbolos extraídos y sus relaciones forman un grafo de conocimiento. Los nodos representan archivos, módulos, clases y funciones. Las aristas representan dependencias: imports, herencia, llamadas entre funciones.

El grafo detecta automáticamente dependencias circulares, módulos altamente acoplados y puntos de entrada del proyecto.

Layout y visualización

ForceAtlas2 calcula el layout del grafo mediante simulación de fuerzas: los nodos más relacionados se atraen entre sí, los independientes se repelen. El resultado es una distribución que revela la arquitectura real del proyecto.

GraphMyCode ofrece cinco modos de visualización:

Code Flow: flujo de ejecución por archivo

La vista Code Flow analiza un archivo individual con tree-sitter y genera un flowchart interactivo de su flujo de ejecución completo: funciones, clases, bloques if/else, bucles, bloques try/catch y los retornos relevantes.

El layout automático usa Dagre (algoritmo Sugiyama de grafos dirigidos acíclicos) para calcular las posiciones de los nodos. El resultado se puede exportar como SVG para incluirlo en documentación técnica.

Compatible con JS, TS, JSX, TSX y Python. El SVG exportado tiene fondo blanco y nodos con color de contorno por tipo.

Agrupación semántica Opcional

HuggingFace Transformers ejecuta un modelo de embeddings directamente en el navegador para generar representaciones vectoriales de cada símbolo. UMAP proyecta esos vectores en 3D para agrupar código funcionalmente similar — incluso cuando no hay dependencias directas entre archivos.

El resultado es el modo Agrupación semántica: un mapa 3D donde la proximidad espacial indica similitud de propósito, no solo de importaciones.

Chat con IA sobre tu código Opcional

Conecta tu proveedor LLM preferido — OpenAI, Gemini, Anthropic u Ollama local — y haz preguntas sobre tu codebase en lenguaje natural.

GraphMyCode construye el contexto a partir del grafo: qué archivos son relevantes para tu pregunta, cómo se relacionan, qué funciones están implicadas. El contexto relevante viaja al proveedor; el resto del código permanece en tu navegador.

Exporta el contexto del proyecto

Una vez construido el grafo, el botón ⬇ Export Project Context genera un fichero project-context.md directamente en el navegador sin llamadas externas.

El fichero contiene cinco secciones: un resumen narrativo compacto de los puntos de entrada más conectados (pensado para pegarse en un CLAUDE.md o como system prompt), la estructura de directorios con recuento de archivos por carpeta, los diez nodos con más conexiones, las dependencias externas detectadas (npm o PyPI, sin ruido de stdlib) y los grupos de código identificados por el algoritmo de comunidades Leiden.

Detección automática de agentes de IA. Antes de generar el export, GraphMyCode analiza el grafo en busca de señales que indiquen que el proyecto analizado es un agente de IA: imports de frameworks como anthropic, openai, langchain, pydantic_ai o @anthropic-ai/sdk; presencia de archivos de configuración como CLAUDE.md, AGENTS.md o .mcp.json; y funciones de orquestación o patrones de subagente. Si la confianza supera el umbral y al menos dos categorías distintas de señales están presentes, aparece el badge ⚡ Agent Mode Detected en la barra lateral y el fichero exportado incluye la nota correspondiente en su cabecera.

El análisis de detección es puramente local — solo regex y conteo sobre el grafo ya construido — y tarda menos de 200 ms independientemente del tamaño del proyecto.

La ventaja principal es reducir tokens y mejorar la calidad de respuesta del agente. Sin el export, cuando Claude Code arranca en tu proyecto hace una de estas dos cosas:

• Lee archivos uno a uno hasta entender la arquitectura → lento y caro en tokens
• Te pregunta "¿qué hace este proyecto?" → tú pierdes tiempo explicando

Con el .md pegado en CLAUDE.md, el agente arranca sabiendo:

• Cuáles son los archivos más importantes (app.py, database.py…)
• Qué hace cada capa (Backend, Components, Hooks…)
• Qué stack usa
• Cuáles son los entry points clave