Editor de gráficos Mermaid

Edita localmente y previsualiza diagramas de flujo, diagramas de secuencia y otros gráficos de Mermaid en un modo de seguridad estricto; puedes descargar SVG o PNG.

Procesamiento local en el navegador
Esta página ha superado la comprobación del directorio público; activa JavaScript para usar todas las funciones.
Guía de uso

Cómo usar el editor de gráficos Mermaid

El código fuente del diagrama solo se analiza y renderiza en el navegador actual; no se carga. El renderizador utiliza un modo de seguridad estricto.

  1. Introducir el código fuente del diagrama

    Pega código Mermaid que no supere 128 KiB y selecciona el tema predeterminado, neutro, bosque u oscuro.

  2. Renderizar y corregir

    Haz clic en «Renderizar» para ver la vista previa aislada; los errores de sintaxis mostrarán su posición o información de análisis, lo que facilita volver al código fuente para corregirlos.

  3. Descargar gráfico

    Después de confirmar las etiquetas y las conexiones, exporte un SVG o PNG sometido a una limpieza de seguridad.

Limitaciones y notas

  • Solo se admite la sintaxis de Mermaid de la versión fijada actualmente por el sitio; las funciones experimentales, la sintaxis antigua y las extensiones de terceros pueden no ser compatibles.
  • El modo de seguridad estricto limita las etiquetas HTML, las devoluciones de llamada de clic, los enlaces externos y los scripts personalizados; algunas interacciones avanzadas no se mostrarán.
  • El código fuente, el número de instrucciones, los tokens léxicos, los nodos encadenados, el número de conexiones y el SVG tras el renderizado tienen límites de seguridad; las exportaciones PNG también están limitadas por el tamaño del lienzo.

Preguntas frecuentes

¿Por qué no se ejecuta la instrucción click?

La herramienta activa el modo de seguridad estricto: no ejecuta callbacks de enlaces ni scripts, para mantener el límite de seguridad de la vista previa local.

¿Cuál de SVG y PNG debo elegir?

SVG es adecuada para seguir editando y escalar sin pérdidas; PNG es más adecuada para documentos o plataformas sociales que no admiten SVG.

¿El gráfico se guarda automáticamente?

No. El código fuente solo se conserva en la memoria de la página actual; cópialo o descárgalo antes de salir.

Comentarios de la página¿Has encontrado un problema o tienes sugerencias de mejora?
Las funciones de retroalimentación deben usarse en la versión en línea

Envía tras activar JavaScript en la versión en línea; las funciones locales de la herramienta o del ejemplo no se verán afectadas.

Ir a la versión en línea para dar feedback