Para pasar de Mermaid a imagen, exporta el diagrama a SVG o PDF con mermaid-cli.
Mermaid genera diagramas a partir de texto, lo que facilita mantenerlos junto a la documentación en un sistema de control de versiones. Para obtener un archivo que puedas insertar en un manuscrito, una diapositiva o un póster, tienes que elegir el formato y el tamaño. Si un PNG no tiene suficientes píxeles, puede verse borroso al imprimirlo al tamaño previsto.
Exportar desde la línea de comandos
@mermaid-js/mermaid-cli, que incluye el comando mmdc:npm install -g @mermaid-js/mermaid-cli
mmdc -i diagram.mmd -o diagram.svg # vector, preferred
mmdc -i diagram.mmd -o diagram.pdf # vector PDF
mmdc -i diagram.mmd -o diagram.png -s 3 # raster at 3x scale| Formato | Vectorial | Recomendado para | Evítalo si |
|---|---|---|---|
| SVG | Contenedor vectorial | Web y edición posterior | El destino no admite SVG |
| Contenedor vectorial | Manuscritos, impresión y diapositivas | El editor de destino no conserva los elementos que necesitas | |
| PNG | No | Vistas previas y destinos que exigen mapas de bits | No tiene suficientes píxeles para el tamaño final |
Ve la generación de figuras científicas con IA en acción
Observa cómo los investigadores crean figuras científicas listas para publicar a partir de descripciones de texto.
Explorar la herramientaOtras formas de exportar
mmdc se ejecuta desde la línea de comandos, puedes incluir el renderizado de diagramas en la compilación. Una práctica habitual es guardar los archivos fuente .mmd en el repositorio y generar las imágenes al compilar la documentación. Así, las imágenes se mantienen al día con el código fuente.- run: npm install -g @mermaid-js/mermaid-cli
- run: mmdc -i docs/architecture.mmd -o docs/architecture.svg
Ajustar el aspecto del diagrama
La configuración predeterminada de Mermaid está pensada para documentación, no para publicaciones. Conviene ajustar tres aspectos:
- Tema. Añade
theme: neutraldentro deconfigen la cabecera YAML del diagrama. Antes de elegir un tema para impresión, revisa el resultado al tamaño final. - Fuentes. Define
fontFamilyen la configuración y comprueba que la fuente elegida esté disponible en el entorno de renderizado. - Dirección. Usar
graph LRograph TDcambia la relación de aspecto. Esto puede marcar la diferencia cuando necesitas encajar el diagrama en una columna.
---
config:
theme: neutral
fontFamily: Helvetica
---
graph LR
A[Sample collection] --> B[Extraction]
B --> C[Sequencing]
C --> D[Analysis]
Cuándo conviene usar otra herramienta
Mermaid calcula automáticamente la distribución de los elementos y deja poco margen para ajustarla. Es una ventaja en la documentación, pero limita las figuras científicas en las que la composición transmite información.
Busca otra herramienta si necesitas colocar los elementos con precisión, seguir las convenciones visuales de una revista o representar relaciones reales mediante la posición, como la ubicación anatómica o una secuencia temporal. Una opción intermedia es crear la estructura en Mermaid, exportarla a SVG y terminarla en un editor vectorial. Ten en cuenta que esos retoques no se reproducirán al volver a generar el diagrama desde el código fuente.
Consejo
.mmd junto a la imagen exportada en el mismo commit. El código permite revisar los cambios y regenerar el diagrama; la imagen permite consultar el resultado directamente. Si conservas solo uno de los dos, pierdes la facilidad de revisión o de consulta.Crea figuras científicas ahora
Describe tu figura científica en lenguaje natural — obtén ilustraciones listas para publicar en minutos.
Probar gratisLecturas relacionadas
Lecturas relacionadas: Visualiza la investigación al instante con IA Texto a Figura, 10 mejores herramientas de ilustración científica en 2026.
