VisualDB 3D
Extensión de VS Code para navegar un esquema PostgreSQL como un universo 3D interactivo: cada tabla es un nodo, cada foreign key una arista.
La versión web original (FastAPI + React + Docker) se conserva en la rama main.
Uso
Ctrl+Shift+P → VisualDB: Open 3D Schema Explorer.- Introduce la conexión (host, puerto, usuario, contraseña, base de datos, SSL) y pulsa Connect.
- Navega: clic izquierdo rota, rueda acerca, clic derecho desplaza. Clic en un nodo para ver columnas, PK/FK e índices.
Comandos
| Comando |
Descripción |
VisualDB: Open 3D Schema Explorer |
Abre el panel |
VisualDB: Refresh Schema |
Vuelve a leer los metadatos de la BD |
VisualDB: Disconnect |
Cierra la conexión |
VisualDB: Clear Saved Connection |
Olvida la última conexión y la contraseña guardada |
La última conexión se recuerda entre sesiones. La contraseña (si marcas Save password) se guarda en el almacén seguro del sistema mediante SecretStorage y nunca se envía al webview.
Arquitectura
Webview (React Three Fiber + Zustand)
⇅ postMessage RPC (src/shared/protocol.ts)
Extension host (Node)
→ DbSession (pg Pool + caché de metadatos)
→ metadata.ts (information_schema / pg_catalog)
→ graph/builder.ts (grafo dirigido, layouts, métricas)
| Carpeta |
Contenido |
src/ |
Código del extension host: comandos, panel, sesión de BD, grafo |
src/shared/protocol.ts |
Tipos y métodos RPC compartidos por host y webview |
webview/ |
App React que se carga dentro del panel |
scripts/01_demo_schema.sql |
Esquema e-commerce de ejemplo (auth, shop, inventory) |
Layouts
- force — layout 3D dirigido por fuerzas (
d3-force-3d), determinista.
- sphere — distribución Fibonacci sobre una esfera.
Desarrollo
npm install
npm run build # extensión (esbuild) + webview (vite)
Pulsa F5 en VS Code para abrir una ventana Extension Development Host con la extensión cargada.
| Script |
Descripción |
npm run typecheck |
Comprueba tipos del host y del webview |
npm test |
Tests unitarios (vitest) |
npm run watch:extension / watch:webview |
Recompila al guardar |
npm run package |
Genera el .vsix instalable |
Postgres de prueba
docker run -d --name visualdb-pg -e POSTGRES_PASSWORD=postgres -p 5432:5432 postgres:16
docker cp scripts/01_demo_schema.sql visualdb-pg:/tmp/demo.sql
docker exec visualdb-pg psql -U postgres -f /tmp/demo.sql
Instalar el .vsix
npm run package
code --install-extension visualdb-3d-1.0.0.vsix
