Editor de diagramas Mermaid
- Los archivos no salen de tu dispositivo
- Se ejecuta en el navegador
- Gratis, sin registro ni marca de agua
Cómo usar Editor de diagramas Mermaid
Escribe código Mermaid y ve el diagrama mientras escribes: diagramas de flujo, de secuencia, de clases, de estado, ER, Gantt, circular, mapa mental, línea de tiempo y grafos de Git. Amplía y desplaza la vista previa, y luego exporta SVG o PNG hasta a 4×. El renderizado ocurre en tu navegador.
- 1
Escribe código Mermaid en el editor, o elige un diagrama en Ejemplo para empezar.
- 2
Elige un Tema: Predeterminado, Neutro, Oscuro o Bosque.
- 3
Revisa la vista previa. Desplázate o pellizca para ampliar, arrastra para moverte y usa Ajustar a la vista o Pantalla completa.
- 4
Define el Fondo y el tamaño PNG, haz clic en SVG o PNG para descargar, o en Copiar SVG / Copiar PNG para el portapapeles.
Preguntas frecuentes
¿El código de mi diagrama se envía a un servidor?
No. Mermaid se ejecuta dentro de la página, así que tu código y tus diagramas se quedan en el navegador. El código se guarda en local para que siga ahí la próxima vez.
¿Qué pasa cuando mi código tiene un error de sintaxis?
El error aparece debajo del editor con su número de línea, y la vista previa sigue mostrando el último diagrama que se renderizó.
¿Puedo exportar con un fondo transparente?
Sí. Pon Fondo en Transparente antes de exportar SVG o PNG.
¿Cómo obtengo un PNG más nítido?
Elige un tamaño PNG de 2×, 3× o 4×. Las dimensiones exactas en píxeles se muestran junto al ajuste.
¿Hay un atajo de teclado para guardar?
Ctrl/⌘ + S en el editor descarga el SVG. En la vista previa, + y − amplían, las flechas mueven, 0 vuelve al 100 % y F ajusta el diagrama.