GraphMyCode –Visualize any codebase as an interactive knowledge graph,in-browser

FValero1 pts0 comments

GraphMyCode.com — Visualiza y entiende tu código como un grafo

GraphMyCode — Visualiza y entiende tu código como un grafo

GraphMyCode convierte cualquier repositorio en un grafo interactivo de dependencias 3D.<br>Analiza imports, exportaciones, clases y funciones directamente en el navegador,<br>sin instalación, sin servidores y sin subir tu código a ningún servicio externo.

¿Qué es GraphMyCode?

GraphMyCode es una herramienta web de visualización estática de código que genera grafos<br>navegables de las relaciones entre archivos, módulos, clases y funciones de cualquier<br>repositorio. El análisis se ejecuta íntegramente en el navegador usando WebAssembly<br>(tree-sitter) para el parsing y modelos de embeddings locales (HuggingFace Transformers)<br>para la agrupación semántica. No requiere registro ni configuración.

Modos de visualización

Grafo estructural: muestra todos los imports y exports entre archivos, clases y funciones con layout ForceAtlas2.

Agrupación semántica 3D: agrupa código por similitud funcional usando embeddings locales y UMAP, incluso sin dependencias directas.

Technical Debt City: representa cada archivo como un edificio 3D cuya altura indica su complejidad y acoplamiento.

Heatmap de dependencias: colorea los nodos según el número de imports entrantes para detectar acoplamiento excesivo y dependencias circulares.

Code Flow: genera un flowchart interactivo del flujo de ejecución de cualquier archivo, exportable como SVG.

Export Project Context — Contexto para agentes de IA

El botón "⬇ Export Project Context" genera un fichero project-context.md<br>que resume el grafo del proyecto: nodos más conectados, estructura de carpetas, dependencias<br>externas y grupos de código. Está diseñado para pegarse en un CLAUDE.md o<br>como system prompt de cualquier agente de IA.

En un proyecto de ~90 archivos, reduce el contexto necesario para Claude Code de<br>~100.000 tokens a ~2.000 tokens . El agente llega al problema real<br>más rápido y con menos alucinaciones sobre la estructura del proyecto.

Privacidad y procesamiento local

Tu código nunca sale de tu navegador. GraphMyCode usa WebAssembly y Web Workers para<br>ejecutar todo el análisis localmente. El único dato que viaja a servidores externos es<br>el contexto relevante cuando activas el chat IA con un proveedor externo (OpenAI, Gemini,<br>Anthropic u Ollama), y solo el fragmento de código relevante para tu pregunta.

Lenguajes soportados

TypeScript, JavaScript, Python, Go, Rust, Java, PHP, C, C++, C#, Swift, Kotlin, Ruby.

Casos de uso principales

Onboarding en proyectos nuevos: entiende la arquitectura en minutos en lugar de días.

Análisis de repositorios GitHub: analiza cualquier repo público sin clonarlo.

Detección de acoplamiento excesivo y dependencias circulares.

Planificación de refactorizaciones con análisis de impacto visual.

Code reviews con visión global de la arquitectura del PR.

Generación de contexto comprimido para Claude Code, Cursor y Copilot.

Consultas Cypher (Neo4j) sobre la arquitectura del proyecto.

Tecnología

Construido con React 19, Vite, Tailwind CSS, Three.js, Sigma.js y Graphology.<br>El análisis usa tree-sitter WASM para el parsing AST, HuggingFace Transformers.js<br>para embeddings locales, y LangChain para la integración multi-proveedor de IA.

Creado por Francisco Valero ·<br>Licencia PolyForm Noncommercial 1.0.0 (gratuito para uso no comercial)

para digo graphmycode dependencias como grafo

Related Articles