Editor de Diagramas Mermaid
Escribe sintaxis Mermaid a la izquierda y observa cómo tu diagrama de flujo, de secuencia o de Gantt se renderiza en vivo a la derecha.
Todo lo que necesitas para crear diagramas como código
Vista previa en vivo instantánea
Observa cómo tu diagrama se renderiza en el momento en que escribes — sin paso de compilación, sin pulsar botones, sin esperas.
Todos los tipos de diagramas de Mermaid
Diagramas de flujo, de secuencia, de clases, de estados, diagramas de Gantt, mapas mentales y más — la sintaxis completa de Mermaid 11.
Selector de temas
Alterna entre los temas predeterminado, neutro y oscuro para que coincidan con tus documentos, diapositivas o paneles sin cambiar una línea de código.
Exporta SVG y PNG
Descarga un SVG vectorial nítido o un PNG de alta resolución, o copia el markup SVG directamente a tu portapapeles.
Privado, nada subido
Todo el renderizado ocurre localmente en tu navegador — tu diagrama nunca sale de tu dispositivo, sin límites de tamaño y sin cuenta.
Errores de sintaxis claros
Los diagramas inválidos se detectan al instante y se muestran con un error legible, así que puedes corregir la sintaxis rápido.
Acerca del Editor de Diagramas Mermaid
El Editor de Diagramas Mermaid es una herramienta gratuita en el navegador para escribir y previsualizar diagramas Mermaid. Escribe sintaxis Mermaid a la izquierda y ve cómo el diagrama renderizado se actualiza en vivo a la derecha, con tres temas integrados — predeterminado, neutro y oscuro. Cuando tu diagrama se vea bien, copia el código o el SVG, o descárgalo como SVG vectorial o PNG de alta resolución. Como todo se ejecuta localmente con la biblioteca de código abierto Mermaid, no hay subidas, ni límites de tamaño ni necesidad de cuenta.
Cómo crear un diagrama Mermaid
Tres pasos de la idea a un diagrama compartible.
Escribe tu diagrama como texto
Empieza desde la muestra integrada o escribe sintaxis Mermaid directamente — diagramas de flujo, de secuencia, de clases y más.
Míralo renderizar en vivo
El diagrama se actualiza automáticamente mientras editas. Cambia de tema con el menú desplegable para encontrar el aspecto que quieras.
Exporta o comparte
Copia el código Mermaid o el SVG, o descarga el diagrama como archivo SVG o PNG para documentos, diapositivas y README.
Cosas a saber
Los diagramas se renderizan con Mermaid 11 en modo de seguridad estricto, que sanea las etiquetas para que no se ejecute HTML ni scripts — los controladores de clic interactivos están desactivados en la vista previa. Los PNG exportados se renderizan a resolución 2x para impresiones nítidas, y todo se ejecuta localmente, así que no hay límite de tamaño de archivo.