Mermaid a SVG: exporta diagramas de secuencia para documentos
Exporta Mermaid a SVG para documentos y diapositivas. Prueba una secuencia corta, descarga los archivos SVG y PNG y revisa el resultado en tu app.
Un diagrama que se ve claro en el editor puede perder nitidez al ampliarlo en una diapositiva. Exportar Mermaid a SVG permite cambiar el tamaño de un archivo vectorial para documentación y presentaciones. Abre el conversor de Mermaid a imagen y guarda la fuente junto al resultado.
- Abre la herramienta y haz clic en el diagrama para editar el código.
- Pega el código Mermaid y haz clic fuera del editor para ver el resultado.
- Abre Ajustes, selecciona Salida y elige SVG.
- Cierra los ajustes y pulsa Descargar imagen. Abre el SVG en un navegador y pruébalo después en el documento o la diapositiva de destino.
El editor acepta código Mermaid. Si lo guardas dentro de un bloque Markdown, pega solo el contenido del bloque.
El ejemplo muestra cuatro mensajes entre quien escribe, el editor y el exportador. Las etiquetas son breves para dejar espacio a las flechas. Pega la fuente en la herramienta para reproducirlo.
```mermaid
sequenceDiagram
participant Writer
participant Editor
participant Exporter
Writer->>Editor: Paste diagram source
Editor-->>Writer: Show preview
Writer->>Exporter: Choose SVG
Exporter-->>Writer: Download diagram
```
Los dos archivos se descargaron con los controles de exportación de la herramienta a partir de la misma fuente. Revisa los tres participantes, los cuatro mensajes y la marca situada debajo del diagrama. Para ampliar la interacción, consulta la guía de sintaxis de secuencias de Mermaid.
Abre el archivo en la aplicación donde lo usarás antes de cerrar el documento. Revisa las fuentes, las puntas de flecha, las etiquetas y el borde inferior. Amplía la imagen para inspeccionarla y compruébala después al tamaño de lectura.
Si la herramienta de publicación solo acepta imágenes de mapa de bits, elige PNG en los mismos ajustes y exporta de nuevo. Revisa esa imagen al tamaño previsto. En secuencias largas, acorta las etiquetas o reparte el contenido en varios diagramas.
Conserva el texto Mermaid junto a la imagen. Cuando cambie un mensaje, edita la fuente y exporta un SVG nuevo. Añade un pie que explique el punto principal de la interacción. Puedes crear el SVG aquí.