Vista previa de Mermaid en VS Code

Instala Mermaid Viewer, abre un archivo .mmd o .mermaid y pulsa Ctrl+K V (Cmd+K V en Mac): el diagrama aparece al lado y se actualiza mientras escribes. La vista previa, la edición de bloques Mermaid en Markdown, el autocompletado y la exportación de un diagrama a PNG o SVG son gratis. Zovo Pro (USD 19, un solo pago) añade la exportación de todos los diagramas del espacio de trabajo, el PDF con portada 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.mermaid-viewer.

Pasos en VS Code

Instala Mermaid Viewer desde el Marketplace, o pulsa Ctrl+P (Cmd+P en macOS) y ejecuta ext install zovo.mermaid-viewer.
Abre un archivo .mmd o .mermaid y ejecuta “Mermaid Viewer: Open Diagram Editor (Text + Live Preview)” en la paleta de comandos para ver el código a la izquierda y el diagrama a la derecha. También puedes pulsar Ctrl+K V (Cmd+K V en Mac) o el icono de vista previa de la barra del editor.
En un archivo Markdown, encima de cada bloque mermaid aparece “Edit diagram”. El bloque se abre junto a una vista previa en vivo; al guardar, el texto vuelve a su bloque, y Deshacer en el archivo Markdown revierte el cambio.
Mientras escribes, la extensión sugiere tipos de diagrama, palabras clave, flechas y formas, y subraya en rojo la línea con el error. Para empezar desde cero, ejecuta “Mermaid Viewer: New Diagram from Template” y elige una de las 15 plantillas.
Abre el menú Export para guardar el diagrama como PNG con un ancho o alto exactos, o a 1x, 2x o 4x, o como SVG. La opción “Text labels for wikis” escribe las etiquetas como texto SVG simple, que se ve bien en las wikis de Azure DevOps y GitHub. Copy PNG y Copy SVG code copian el diagrama al portapapeles.
Para diagramas grandes, el zoom va del 1 % al 3200 % sobre el puntero. En el trackpad, dos dedos desplazan el diagrama y el gesto de pellizcar amplía.

En Cursor, Windsurf y VSCodium

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

Qué es gratis

Son gratis la vista previa en vivo, la edición de bloques Mermaid en archivos Markdown, la vista previa de un Markdown completo con todos sus diagramas, el autocompletado y los errores subrayados, las 15 plantillas, la vista Mermaid Diagrams del Explorador y la exportación de un diagrama a PNG o SVG, además de copiarlo al portapapeles. Mermaid 12.3.0 viene incluido en la extensión, así que funciona detrás de un proxy o sin conexión y nunca te pide iniciar sesión. La exportación SVG elimina el CSS que no se usa y redondea las coordenadas; en el ejemplo del proyecto, un diagrama de flujo pasó de 66 KB con el SVG de Mermaid a 35 KB. No hay cuenta, IA ni telemetría.

Qué añade Zovo Pro

Export All Diagrams in Workspace guarda cada diagrama de todos los archivos .mmd, .mermaid y Markdown de la carpeta como SVG, PNG o ambos en la carpeta mermaid-export, con la misma estructura de carpetas que el código fuente. Los diagramas que no se pueden dibujar aparecen al final en una lista. Así no tienes que exportar una por una las imágenes de tu documentación. Las otras herramientas Pro son Export Diagrams to PDF with a Title Page, que reúne todos los diagramas de un archivo en un PDF con una portada que los enumera, y Export on Save, que mantiene actualizados los archivos SVG o PNG junto al archivo fuente cada vez que guardas.

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

Abre la carpeta del proyecto y ejecuta “Mermaid Viewer: Export All Diagrams in Workspace (SVG/PNG) (Pro)” en la paleta de comandos.
Elige SVG, PNG o ambos.
Los diagramas se guardan en la carpeta mermaid-export, con la misma estructura de carpetas que el código fuente.

Export All Diagrams in Workspace (SVG/PNG) 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

Los diagramas de más de 500.000 caracteres o de más de 2000 enlaces no se dibujan, y el dibujo se detiene a los 10 segundos.
Los paquetes de iconos que se cargan desde internet no funcionan; los iconos integrados sí. Las fórmulas en etiquetas ($$...$$) pueden no verse bien.
La extensión no se integra en la vista previa de Markdown de VS Code: los diagramas se muestran en su propia vista previa.
Solo los archivos .mmd y .mermaid se reconocen como archivos Mermaid.

Preguntas

¿La extensión es gratis?

Sí. La vista previa en vivo, la edición en Markdown y la exportación de un diagrama a PNG o SVG son gratis. El PDF con portada, la exportación de todo el espacio de trabajo y la exportación al guardar forman parte de Zovo Pro (USD 19, un solo pago). Puedes probar cada una 3 veces gratis; en la exportación al guardar, una sesión de ventana cuenta como un intento.

¿Necesito una cuenta o conexión a internet?

No. Mermaid 12.3.0 viene incluido, así que la extensión dibuja sin conexión, también detrás de un proxy de empresa, y no pide iniciar sesió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 Mermaid Viewer (en inglés).

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