Convertidor online gratuito de MERMAID a SVG

Qué es el formato MERMAID

En el contexto de los mapas mentales y los diagramas de flujo, un archivo MERMAID es un archivo de código fuente de texto plano que contiene sintaxis de Mermaid, normalmente guardado con la extensión .mmd o .mermaid. El código fuente describe diagramas de flujo, diagramas de secuencia, diagramas de clases, diagramas de estados, diagramas entidad-relación y mapas mentales, en lugar de almacenar una imagen terminada.

Los archivos de Mermaid se crean o editan en Mermaid Live Editor, Visual Studio Code con una extensión de Mermaid, Obsidian y sistemas de documentación compatibles con bloques de Mermaid. Al abrir el archivo en un editor de texto se muestran declaraciones como flowchart TD o mindmap; esas declaraciones deben ser renderizadas por un motor compatible con Mermaid.

Qué es el formato SVG

SVG, o Scalable Vector Graphics, es un formato de imagen basado en XML que almacena trazados, formas y texto. Los navegadores, las herramientas de documentación, los editores vectoriales y muchas aplicaciones de publicación pueden mostrarlo sin un entorno de ejecución de Mermaid.

Un SVG permanece nítido al ampliarse, generalmente escala mejor que una captura de pantalla rasterizada y puede recibir estilos o editarse en aplicaciones como Inkscape. El archivo exportado es el diagrama renderizado, no el código fuente original de Mermaid, por lo que cambiar posteriormente la estructura del diagrama resulta más sencillo desde el archivo .mmd.

Cómo convertir MERMAID a SVG

Uso de Mermaid CLI

Mermaid CLI es el método de escritorio o de línea de comandos más directo y requiere Node.js. Instala el renderizador con:

npm install -g @mermaid-js/mermaid-cli

Guarda el código fuente como diagram.mmd y, a continuación, renderízalo con:

mmdc -i diagram.mmd -o diagram.svg

La opción -i especifica el código fuente de Mermaid y -o especifica la salida SVG. Para un diagrama que utilice un tema personalizado o un archivo de configuración, pásalo con:

mmdc -i diagram.mmd -o diagram.svg -c mermaid-config.json

También puedes renderizar directamente con npx sin una instalación global:

npx -p @mermaid-js/mermaid-cli mmdc -i diagram.mmd -o diagram.svg

Uso de Mermaid Live Editor

Abre el código fuente en Mermaid Live Editor, comprueba la vista previa renderizada para detectar errores de sintaxis y, a continuación, utiliza Actions → Export Diagram → SVG o el control de exportación SVG equivalente. Guarda el archivo descargado con una extensión .svg. Este método resulta adecuado cuando no se puede instalar Node.js, pero depende de la versión de Mermaid compatible con el editor y de las funciones de diagramas disponibles.

Uso del convertidor en línea integrado

Puedes convertir el archivo de forma gratuita en 101convert.com sin instalar software: carga el archivo .mmd o .mermaid, elige SVG como formato de salida, inicia la conversión y descarga el archivo .svg resultante.

Consideraciones sobre calidad y compatibilidad

Los errores de conversión suelen deberse a sintaxis de Mermaid no compatible, dependencias de diagramas faltantes o sangría no válida en estructuras como los mapas mentales. Renderiza el código fuente antes de exportarlo e inspecciona el SVG en el tamaño de visualización previsto.

La salida SVG puede depender de las fuentes disponibles, del renderizado del navegador, de la versión de Mermaid y de la configuración del tema. Si la apariencia exacta es importante, utiliza una fuente común o convierte el texto en trazados en un editor vectorial después de la exportación; convertir el texto en trazados dificulta la edición posterior del texto.

Algunos consumidores de SVG restringen los estilos incrustados, los scripts, los hipervínculos o los elementos XML externos. Para obtener la máxima compatibilidad, utiliza un SVG estático simple y elimina las funciones interactivas que dependan de JavaScript. Conserva el archivo original de Mermaid junto al SVG para que el diagrama siga siendo editable a nivel estructural.