Renderizador de diagramas Mermaid

Renderiza diagramas Mermaid (flujo, secuencia, gantt) a SVG en tu navegador.

Tu código Mermaid se renderiza localmente en tu navegador y nada se sube a un servidor.

¿Necesitas reducir un diagrama exportado? Prueba el Optimizador de SVG.

Acerca de Renderizador de diagramas Mermaid

Este editor en vivo de Mermaid convierte el código Mermaid simple en diagramas renderizados mientras escribes, con un renderizado que empieza en el momento en que pegas. Suelta un diagrama de flujo, un diagrama de secuencia, un diagrama de gantt, un diagrama de clases o un diagrama de estados y observa cómo aparece el SVG al instante junto a tu fuente. Está pensado para desarrolladores, redactores técnicos y arquitectos que mantienen diagramas en docs, archivos README o notas de diseño y quieren una forma rápida de previsualizarlos y exportarlos. El renderizador de diagramas Mermaid detecta automáticamente los temas claro y oscuro para que coincidan con tu vista, reporta errores de sintaxis en línea para que los corrijas rápido y te permite descargar el resultado como un SVG limpio. Como todo se procesa localmente en tu navegador, la fuente de tu diagrama nunca sale de tu dispositivo y nada se sube a un servidor.

Características

Cómo usar Renderizador de diagramas Mermaid

  1. Pega o escribe tu código Mermaid en el cuadro de entrada.
  2. Observa cómo el diagrama se renderiza automáticamente en el panel de salida.
  3. Corrige cualquier mensaje de error de sintaxis en línea si aparece.
  4. Cambia el tema de tu navegador o app para previsualizar el estilo claro u oscuro.
  5. Haz clic en descargar para guardar el resultado como diagram.svg.

Ejemplo

Entrada

graph TD
  A[Start] --> B{Works?}
  B -->|Yes| C[Ship it]
  B -->|No| D[Fix it]
  D --> B

Salida

A rendered SVG flowchart: a Start box flows into a Works? decision diamond, the Yes branch points to Ship it, the No branch points to Fix it, and Fix it loops back to the decision.

Un diagrama de flujo sencillo renderizado a SVG descargable.

Errores comunes y solución de problemas

Preguntas frecuentes

¿Qué es el editor en vivo de Mermaid?
Es una herramienta en el navegador que convierte el código Mermaid en un diagrama renderizado en tiempo real, para que previsualices diagramas de flujo, diagramas de secuencia y más junto a tu fuente y los exportes como SVG.
¿Qué tipos de diagrama admite el editor en vivo de Mermaid?
Renderiza la sintaxis estándar de Mermaid, incluidos diagramas de flujo, diagramas de secuencia, diagramas de gantt, diagramas de clases y diagramas de estados, la misma sintaxis que se usa en GitHub y en muchas herramientas de docs.
¿Cómo exporto un diagrama de Mermaid como imagen?
Una vez que tu diagrama se renderice, haz clic en descargar para guardarlo como un archivo SVG que puedes incluir en docs o abrir en cualquier editor vectorial.
¿Por qué mi diagrama de Mermaid muestra un error de sintaxis?
El renderizador valida el código Mermaid y muestra el mensaje del analizador en línea; la mayoría de los errores provienen de una declaración de tipo de diagrama que falta o de corchetes y flechas sin balancear.
¿El diagrama renderizado coincide con mi modo oscuro?
Sí. El editor en vivo de Mermaid detecta si estás viendo en modo claro u oscuro y aplica el tema de Mermaid que coincide automáticamente.
¿Se mantiene privado el código de mi diagrama de Mermaid?
Sí. La fuente de tu Mermaid se renderiza localmente en tu navegador y nunca sale de tu dispositivo, así que nada se sube a un servidor.

Herramientas relacionadas

Todas las herramientas de ArrayKit