Editor de diagramas Mermaid
Escribe Mermaid a un lado y el diagrama se dibuja al otro sobre la marcha. Un error se marca en su propia línea mientras la última versión buena sigue en pantalla. Todo se ejecuta en esta pestaña del navegador.
Cómo funciona
Mermaid es una forma de escribir un diagrama como texto. Unas pocas líneas como «A --> B» se convierten en un diagrama de flujo, un diagrama de secuencia, un diagrama de clases o de base de datos, un diagrama de Gantt o un mapa mental. GitHub, GitLab, Notion y la mayoría de las herramientas de documentación lo dibujan en el sitio, y por eso los diagramas de los README y de la documentación son tan a menudo Mermaid. Lo que no te dan es un buen lugar para escribirlos.
Este editor dibuja el diagrama mientras escribes. Cuando una línea está mal, esa línea se subraya y el mensaje dice qué esperaba Mermaid, mientras la última versión que funcionó sigue en pantalla, atenuada, para que la imagen no desaparezca cada vez que vas por la mitad de una flecha. Los diagramas grandes se pueden arrastrar y ampliar.
Cuando se vea bien, guárdalo como SVG, o como PNG con el tamaño adecuado para su destino: un documento, una diapositiva o una página impresa. También puedes copiarlo directamente al portapapeles. Tu borrador se guarda en este navegador entre visitas, y un enlace para compartir lleva el diagrama dentro del propio enlace, así que nada de él se almacena nunca en un servidor.
Cómo usarla
- 1 Escribe o pega Mermaid, abre un archivo .mmd o Markdown, o empieza con un ejemplo.
- 2 Mira la vista previa. Si una línea aparece subrayada, corrígela; el mensaje dice qué esperaba Mermaid.
- 3 Elige un aspecto, y arrastra o amplía la vista previa para revisar los detalles.
- 4 Descarga SVG o PNG, copia la imagen o copia un enlace para compartir el diagrama.
Conviene saber
- Al abrir un archivo Markdown se abre su primer bloque ```mermaid, así que puedes editar por separado el diagrama de un README.
- Elegir un ejemplo sustituye lo que hay en el editor, y Ctrl+Z recupera tu diagrama.
- SVG se mantiene nítido a cualquier tamaño y es lo que conviene usar en la web. PNG es lo que aceptan con más fiabilidad las diapositivas, las apps de mensajería y los procesadores de texto.
- Un tema definido dentro del diagrama con una línea %%{init}%% tiene prioridad sobre el ajuste de Aspecto.
- No se sube nada. El diagrama se dibuja en esta pestaña, y los enlaces para compartir lo guardan en la parte de la dirección que un navegador nunca envía a un servidor.
Compatibilidad con navegadores
- Chrome 94 y posteriores
- Firefox 93 y posteriores · a pleno rendimiento desde 113
- Safari 16.4 y posteriores
- Edge 94 y posteriores
Estas son las versiones más antiguas que tienen todo lo que usa la herramienta. Se calculan a partir de la propia herramienta, así que cambian cuando ella cambia.
Números de versión comprobados el 2026-09-04.
Preguntas frecuentes
¿Se sube mi diagrama a algún sitio?
No. Mermaid se ejecuta dentro de esta pestaña del navegador, y tu borrador solo se guarda en este navegador. Puedes comprobarlo en las herramientas de desarrollo de tu navegador, en la pestaña Red: escribir no envía nada.
¿Cómo funcionan los enlaces para compartir sin un servidor?
El diagrama se comprime y se escribe en la parte del enlace que va después del #. Los navegadores nunca envían esa parte al sitio web, así que el enlace abre el diagrama en el dispositivo de cualquiera sin que el propio sitio lo reciba. Un diagrama largo da un enlace largo.
¿Qué tipos de diagrama admite?
Todo lo que dibuja Mermaid 12: diagramas de flujo, de secuencia, de clases, de estados y de entidad relación, diagramas de Gantt, gráficos circulares, mapas mentales, líneas de tiempo, recorridos de usuario, grafos de Git, gráficos de cuadrantes, diagramas de Sankey y gráficos XY, y los más recientes de bloques, paquetes, arquitectura, kanban, radar y mapas de árbol.
¿Por qué aparece subrayada una línea?
Es donde Mermaid dejó de entender el diagrama. El mensaje de al lado es el del propio Mermaid e indica qué esperaba encontrar. A menudo el error real está justo antes, como un corchete o unas comillas que nunca se cerraron.
¿De qué tamaño será el PNG?
Depende de para qué sea. Para un documento, el doble del tamaño al que se dibuja el diagrama, que se mantiene nítido en pantallas de alta densidad. Para diapositivas, lo más grande que quepa en una pantalla 4K. Para imprimir, lo más grande que quepa en un A4 a 300 dpi. El botón muestra el tamaño exacto en píxeles antes de descargar.
¿Puedo editar un diagrama de mi README?
Sí. Abre el archivo Markdown y su primer bloque Mermaid se abre en el editor. Cuando termines, copia el texto de vuelta al archivo.
¿Es seguro abrir un diagrama que me ha enviado otra persona?
Los diagramas se dibujan en el modo estricto de Mermaid. Todo lo que podría ejecutar código se elimina, y una línea dentro del diagrama no puede desactivar ese modo.
Herramientas relacionadas
Tus archivos se procesan en tu dispositivo y no se suben; puedes comprobarlo en las herramientas de desarrollo de tu navegador, en la pestaña Red.