CodeGraph Viewer
Visualiza y navega por el grafo de conocimiento de tu código
📥 Descargar VSIX
·
GitHub
·
Reportar Bug
Extensión para VS Code que permite visualizar y navegar por los nodos del archivo codegraph.db generado por CodeGraph, el indexador semántico de código.
✨ Características
- 🧠 Visualización de grafos — Renderizado interactivo del grafo de conocimiento usando Cytoscape.js
- 🔍 Navegación — Haz doble clic en un nodo para abrir el archivo fuente en la línea exacta
- 📂 Explorador lateral — Navega por símbolos agrupados por tipo (clases, funciones, métodos, etc.) o por archivo
- 🔎 Búsqueda FTS — Búsqueda full-text sobre todos los símbolos indexados
- 🎯 Desde el editor — Selecciona un símbolo y haz clic derecho → "Focus Node in Graph" o "Preview Graph for Symbol"
- 🖱️ Hover — Al pasar el ratón sobre un símbolo, muestra información detallada y enlace al grafo
- 🔗 Open Source — Doble clic en un nodo del grafo abre el archivo fuente
- 🔄 Auto-sync — Se actualiza automáticamente cuando
codegraph.db cambia
- 🧩 Múltiples layouts — Force-directed (fcose), jerárquico (dagre), circular, concéntrico
- 📊 Panel de detalle — Información completa del nodo (firma, documentación, relaciones, callers/callees)
📦 Instalación
Descargar VSIX (recomendado)
Descarga el archivo .vsix desde la última release e instálalo:
code --install-extension codegraph-viewer-*.vsix
O desde VS Code: Extensiones → "..." → Install from VSIX...
Desde el código fuente
git clone https://github.com/SantiagoRoChi/Codegraph-Viewer.git
cd Codegraph-Viewer
npm install
npm run compile
npm run package
code --install-extension codegraph-viewer-*.vsix
🚀 Uso
Asegúrate de tener un proyecto indexado con CodeGraph:
cd tu-proyecto
codegraph init -i
Abre el proyecto en VS Code
Abre el CodeGraph Viewer:
- Click en el icono del Activity Bar
- O
Ctrl+Shift+P → CodeGraph: Open CodeGraph
Navega por el grafo:
- Click en un nodo → panel de detalle
- Doble clic → abre el archivo fuente
- Rueda → zoom
- Arrastrar → mover el lienzo
Desde el editor:
- Selecciona un símbolo → click derecho → "Focus Node in Graph"
- Pasa el ratón sobre un símbolo → información + enlace al grafo
⚙️ Configuración
| Propiedad |
Descripción |
Default |
codegraph.dbPath |
Ruta al archivo codegraph.db |
.codegraph/codegraph.db |
codegraph.graph.layout |
Algoritmo de layout inicial |
fcose |
codegraph.graph.nodeLimit |
Número máximo de nodos a renderizar |
1000 |
codegraph.graph.showEdgeLabels |
Mostrar etiquetas en las aristas |
false |
codegraph.graph.autosyncOnCommit |
Ejecutar codegraph sync en cada commit |
true |
codegraph.editor.codeLens |
Mostrar enlace "View in Graph" sobre definiciones |
true |
codegraph.editor.hover |
Mostrar información al pasar el ratón |
true |
🔧 Desarrollo
Requisitos
Compilar
npm install
npm run compile # Compilar TypeScript
npm run watch # Modo watch (recompila automáticamente)
Empaquetar
npm run package
Genera codegraph-viewer-<version>.vsix en la raíz del proyecto. Este archivo se puede instalar directamente en VS Code.
Publicar una Release
- Actualiza la versión en
package.json siguiendo semver
- Actualiza
CHANGELOG.md
- Crea un tag y pushea:
git tag v0.1.0
git push origin v0.1.0
- El pipeline de GitHub Actions generará automáticamente el
.vsix y creará una GitHub Release con el archivo adjunto
🤖 CI/CD
Este repositorio incluye un pipeline de GitHub Actions (.github/workflows/ci.yml) que:
- Compila la extensión en cada push/PR
- Genera el
.vsix en cada compilación (disponible como artefacto)
- Crea una Release automáticamente cuando se pushea un tag
v*, con el .vsix adjunto para descarga directa
Así cualquiera puede descargar la última versión desde la sección Releases del repositorio.
📄 Licencia
MIT
Hecho con ❤️ para desarrolladores que usan CodeGraph
