Graphviz DOT en VS Code con vista previa en vivo

Instala Graphviz Viewer, abre un archivo .dot o .gv y pulsa Ctrl+K V (Cmd+K V en Mac): el grafo aparece al lado y se actualiza mientras escribes, sin instalar Graphviz. La vista previa en vivo, los seis motores de layout, la búsqueda de nodos y la exportación a SVG y PNG del grafo abierto son gratis. Zovo Pro (USD 19, un solo pago) añade la exportación a PDF vectorial, la exportación de todos los grafos del espacio de trabajo y la exportación al guardar, y puedes probar cada herramienta 3 veces gratis.

Instalar en VS Code Página del Marketplace Open VSX (Cursor, Windsurf, VSCodium)

Gratis, licencia MIT. Extension ID zovo.zovo-graphviz-preview.

Pasos en VS Code

Instala Graphviz Viewer desde el Marketplace, o pulsa Ctrl+P (Cmd+P en macOS) y ejecuta ext install zovo.zovo-graphviz-preview.
Abre un archivo .dot o .gv y haz clic en el icono de vista previa de la barra del editor, o pulsa Ctrl+K V (Cmd+K V en Mac). El grafo se vuelve a dibujar 300 ms después de que dejes de escribir, sin necesidad de guardar.
Si hay un error de sintaxis, se subraya en el editor y aparece en el panel Problemas, mientras la vista previa conserva el último dibujo correcto. Haz clic en el aviso para llevar el cursor al error.
Arrastra para desplazarte y usa Ctrl o Cmd con la rueda del ratón para ampliar en el puntero. Fit y 1:1 restablecen la vista. Escribe en Find node para resaltar los nodos que coincidan, y haz clic en un nodo, una arista o un clúster para saltar a su línea en el código.
Elige el motor de layout en la barra de herramientas: dot, neato, fdp, sfdp, circo o twopi. Con “auto” se usa el atributo layout= del grafo o, si no lo tiene, dot.
Exporta el grafo abierto como SVG o como PNG al doble de resolución sobre fondo blanco. En archivos Markdown, los bloques de código dot, graphviz o gv se dibujan en la vista previa de Markdown de VS Code.

En Cursor, Windsurf y VSCodium

Estos editores instalan extensiones desde Open VSX. Abre la vista Extensions (Ctrl+Shift+X), busca zovo.zovo-graphviz-preview y pulsa Install. Su página en Open VSX es zovo/zovo-graphviz-preview. Después se usa igual que en VS Code.

Qué es gratis

Son gratis la vista previa en vivo con los seis motores de layout, los errores en el panel Problemas, la búsqueda de nodos, el salto del grafo al código, el desplazamiento y el zoom, la exportación a SVG y PNG del grafo abierto, los colores del tema y los bloques DOT en la vista previa de Markdown. Graphviz 16.1 viene incluido en la extensión como WebAssembly, así que no tienes que instalarlo y funciona sin conexión. Los layouts se calculan en un hilo aparte con un tiempo máximo, de modo que un grafo enorme no bloquea VS Code. Las exportaciones SVG y PNG usan los colores originales de Graphviz, no los del tema oscuro, para que el archivo se vea bien en un documento o una wiki. La extensión no hace llamadas de red por su cuenta ni tiene telemetría.

Qué añade Zovo Pro

Export All Graphs in Workspace exporta de una vez cada archivo .dot y .gv y cada bloque DOT de tus archivos Markdown como SVG, PNG, PDF o un único PDF con todos los grafos. La carpeta de salida graphviz-export reproduce la estructura de tus carpetas de código, así que no tienes que exportar las imágenes de la documentación una por una. Las otras herramientas Pro son Export to PDF (Vector, Title Page), que crea un PDF vectorial donde el texto sigue siendo texto, con páginas del tamaño del grafo o en A4 o Carta con portada y marcadores, y Export on Save, que mantiene actualizado el SVG, PNG o PDF junto al archivo fuente cada vez que guardas.

Cómo se usa Export All Graphs in Workspace (SVG/PNG/PDF)

Abre la carpeta del proyecto y ejecuta “Graphviz: Export All Graphs in Workspace (SVG/PNG/PDF) (Pro)” en la paleta de comandos.
Elige el formato. Los archivos se guardan en la carpeta graphviz-export, con la misma estructura de carpetas que el código fuente.

Export All Graphs in Workspace (SVG/PNG/PDF) funciona 3 veces gratis antes de pedir una licencia. Al abrir un archivo no aparece ninguna ventana emergente ni cuenta atrás.

Pagar con tarjeta, USD 19 una vez

Zovo Pro cuesta USD 19 en un solo pago. No es una suscripción y activa las herramientas Pro en todas las extensiones de Zovo. Después de pagar con tarjeta (Stripe), la clave de licencia aparece en la página siguiente. En VS Code, ejecuta "Enter Zovo Pro license key" desde la Command Palette y pega la clave. La clave se comprueba en tu equipo, sin conexión a la red.

Un equipo de 5 personas paga USD 59 en un solo pago, también con tarjeta. Todas las reglas y herramientas Pro están en la página de Zovo Pro (en inglés).

Lo que no hace

La exportación a PDF usa fuentes estándar (Times, Helvetica, Courier). Los caracteres fuera de los alfabetos de Europa occidental, como el chino o el cirílico, salen como “?” en el PDF, aunque se ven bien en SVG y PNG.
Los atributos image= y las imágenes en etiquetas HTML no se dibujan, a propósito.
Los grafos de más de 4096 KB no se calculan, y un layout que dura más de 15 segundos se detiene con un aviso (graphvizPreview.maxSourceKB, graphvizPreview.renderTimeoutSeconds).
Hay una vista previa por archivo, y no se restaura al reiniciar VS Code. Los errores solo se muestran mientras la vista previa está abierta.

Preguntas

¿La extensión es gratis?

Sí. La vista previa en vivo y la exportación a SVG y PNG del grafo abierto son gratis. La exportación a PDF, la exportación de todos los grafos y la exportación al guardar forman parte de Zovo Pro (USD 19, un solo pago). Puedes probar cada una 3 veces gratis, y un intento solo cuenta cuando la herramienta escribe sus archivos; cancelar o un error en el grafo no gastan ninguno.

¿Tengo que instalar Graphviz?

No. Graphviz 16.1 viene dentro de la extensión como WebAssembly y funciona sin conexión.

¿Funciona en Cursor?

Sí. La extensión también está publicada en Open VSX, así que puedes instalarla en Cursor, Windsurf y VSCodium.

Todas las funciones y ajustes están en la página de Graphviz Viewer (en inglés).

Comprobado con la versión 0.2.3 de la extensión el 2026-11-12.