Escribe flowchart TD (de arriba abajo) o LR (de izquierda a derecha) y conecta nodos: A[Rectángulo] --> B{Decisión} -->|sí| C((Círculo)). Admite enlaces punteados -.-> y gruesos ==>, etiquetas en flechas, subgraph y estilos classDef. La vista previa se redibuja mientras escribes y se exporta a SVG o PNG a 2×.
Cómo se usa
- Elige un tipo de diagrama para cargar un ejemplo o escribe código Mermaid. La vista previa se actualiza poco después de dejar de escribir.
- Los errores muestran la línea y el mensaje del analizador; toca el error para seleccionar esa línea. El último diagrama correcto sigue visible, atenuado.
- Haz zoom con los botones o con Ctrl + rueda del ratón. Los colores siguen el modo claro u oscuro.
- Copia o descarga el SVG, o descarga un PNG al doble de tamaño. Activa Transparente para exportar sin fondo.
- Copia un enlace para compartir: el código va comprimido en el enlace tras el #.
- Mermaid dibuja los diagramas en tu navegador; tu texto nunca se sube. El editor recuerda tu último diagrama.
- Puedes abrir archivos .mmd o Markdown; se usa el primer bloque ```mermaid.
- Mermaid funciona en modo de seguridad estricto, así que los clics y el HTML en etiquetas están desactivados.
Por qué diagramas como código
Mermaid describe un diagrama en unas pocas líneas legibles en lugar de cajas arrastradas a mano. flowchart LR y luego A[Inicio] --> B{¿OK?} y B -->|sí| C[Publicar] ya dibujan una decisión. Al ser texto, el diagrama puede vivir junto al código en Git, revisarse en un pull request y actualizarse cambiando una línea; la disposición se calcula sola.
GitHub, GitLab, Notion, Obsidian y muchas herramientas de documentación muestran directamente los bloques ```mermaid, así que un diagrama escrito aquí se puede pegar tal cual en un README. Usa este editor para acertar con la sintaxis con respuesta inmediata y exporta SVG o PNG para los sitios que solo aceptan imágenes.
Qué tipo de diagrama elegir
Los diagramas de flujo muestran procesos y decisiones; los de secuencia, mensajes entre servicios o personas a lo largo del tiempo; los de clases, tipos y sus relaciones; los de estados, cómo algo pasa de un estado a otro; los entidad-relación, tablas de una base de datos con cardinalidad en pata de gallo; los de Gantt planifican tareas con fechas y dependencias; los circulares muestran partes de un todo; los mapas mentales parten de una idea; las líneas de tiempo ordenan hechos por periodos.
Consejos
Usa ID de nodo cortos y pon el texto legible entre corchetes: A[El cliente hace un pedido]. Pon entre comillas las etiquetas con caracteres especiales. Agrupa con subgraph en los diagramas de flujo y con bloques alt o loop en los de secuencia. Si el diagrama queda apretado, cambia la dirección de TD a LR o divídelo en dos.
Preguntas frecuentes
¿Qué es Mermaid?
Mermaid es una librería de JavaScript de código abierto que dibuja diagramas a partir de una sintaxis de texto parecida a Markdown. GitHub, GitLab y muchas wikis y apps de notas la admiten de forma nativa.
¿Puedo usar el diagrama en un README de GitHub?
Sí. Copia el código en un bloque que empiece por ```mermaid y GitHub lo dibuja. Si una plataforma no admite Mermaid, exporta SVG o PNG e inserta la imagen.
¿Por qué mi diagrama muestra un error de sintaxis?
El mensaje indica la línea y lo que esperaba el analizador. Las causas habituales son una flecha que falta, un corchete o comillas sin cerrar o una palabra reservada como end usada como ID; escríbela como End o entre comillas.
¿Cómo exporto una imagen en alta resolución?
Descarga PNG para obtener una imagen al doble del tamaño en pantalla, nítida en pantallas de alta densidad y presentaciones. Para imprimir o seguir editando, descarga SVG, que escala sin pérdida. Activa Transparente para quitar el fondo.
¿Puedo compartir un diagrama sin subirlo?
Sí. Copia el enlace para compartir: el código Mermaid va comprimido en la parte de la URL tras el #, que los navegadores no envían a los servidores. Al abrir el enlace se recupera el diagrama.
¿Funcionan los eventos de clic y las etiquetas HTML?
No. Mermaid se ejecuta aquí en modo de seguridad estricto, así que los clics, enlaces y HTML dentro de etiquetas están desactivados. El resto de la sintaxis se dibuja con normalidad.