Con Mermaid, unas pocas líneas de texto se convierten en un diagrama. Markdown Preview Editor funciona como editor Mermaid con vista previa en directo: escribes el código del diagrama en un documento Markdown y la vista previa lo dibuja mientras tecleas. A diferencia de una herramienta de diagramas independiente, aquí el diagrama vive junto al texto que lo rodea, así que un documento de diseño, un README o un plan de clase se quedan en un solo archivo.
¿Qué es un diagrama Mermaid?
Un diagrama Mermaid es un gráfico descrito en texto plano. No arrastras cajas ni flechas: escribes líneas como A --> B y Mermaid coloca los elementos por ti. Admite diagramas de flujo, de secuencia, de Gantt, de estados y de clases, gráficos circulares, mapas mentales y más.
Al ser texto, el diagrama es fácil de cambiar, se guarda en el control de versiones y aparece en los diffs. GitHub, GitLab, Obsidian y muchas herramientas de documentación renderizan Mermaid, así que el mismo código funciona en todas ellas.
Cómo dibujar un diagrama
- Abre el editor. Entra en el editor online.
- Añade un bloque Mermaid. Escribe tres acentos graves seguidos de
mermaid, o usa el botón Diagrama Mermaid de la barra del editor avanzado para insertar una plantilla. - Escribe el diagrama. La vista previa de la derecha lo vuelve a dibujar mientras escribes, así que una flecha o un corchete que falte se ve enseguida.
- Guarda o comparte. Guarda el documento como
.md, expórtalo a HTML o imprímelo en PDF: los diagramas se incluyen.
Este es un primer diagrama de flujo:
markdown```mermaid
flowchart LR
A[Idea] --> B{¿Merece la pena?}
B -- sí --> C[Hacerlo]
B -- no --> D[Aparcarlo]
```
Tipos de diagramas disponibles
| Tipo | Empieza por | Útil para |
|---|---|---|
| Diagrama de flujo | flowchart TD / flowchart LR |
Procesos, decisiones, algoritmos |
| Diagrama de secuencia | sequenceDiagram |
API, inicios de sesión, recorridos de usuario |
| Diagrama de Gantt | gantt |
Planes de proyecto y cronogramas |
| Diagrama de estados | stateDiagram-v2 |
Estados de un pedido o de un documento |
| Diagrama de clases | classDiagram |
Modelos de datos y estructura del código |
| Gráfico circular | pie |
Partes de un total |
La sintaxis completa de cada tipo, con ejemplos listos para copiar, está en nuestra guía de diagramas Mermaid en Markdown.
Por qué usarlo
- Vista previa en directo. El diagrama se actualiza mientras escribes y los errores de sintaxis se ven al momento.
- Texto y diagramas juntos. Escribe la explicación, las fórmulas y el diagrama de flujo en un solo archivo Markdown.
- Privado. Los diagramas se dibujan en tu navegador. Tu código no se envía a ningún servidor.
- Gratis y de código abierto. Sin cuenta y sin límite de diagramas.
Limitaciones
- No hay descarga en PNG o SVG de un diagrama suelto. Los diagramas se exportan como parte del documento, en la exportación a HTML y en el PDF. Si necesitas una imagen independiente, las herramientas oficiales de Mermaid permiten exportarla.
- Los temas personalizados y los estilos por nodo son limitados: los diagramas usan un aspecto limpio por defecto que se adapta al tema claro u oscuro.
- Los diagramas se escriben como código; no hay edición visual arrastrando elementos.
¿Quieres ver un archivo Markdown que ya tiene diagramas? Usa el visor Markdown o vuelve a la página de inicio del editor Markdown.
Preguntas frecuentes
¿Este editor Mermaid es gratis?
Sí. Es gratuito y de código abierto, sin registro y sin límites.
¿Qué tipos de diagramas Mermaid se admiten?
Diagramas de flujo, de secuencia, de Gantt, de estados, de clases y de entidad-relación, gráficos circulares, mapas mentales, líneas de tiempo y el resto de tipos que admite Mermaid.
¿Puedo exportar un diagrama Mermaid?
Los diagramas se incluyen al exportar el documento a HTML o al imprimirlo en PDF. No hay descarga en PNG o SVG de un diagrama suelto.
¿Por qué no se muestra mi diagrama Mermaid?
Casi siempre es un error de sintaxis: falta una flecha, hay un corchete sin cerrar o una etiqueta sin comillas contiene caracteres especiales. La primera línea debe indicar el tipo de diagrama, por ejemplo flowchart TD.
¿El editor envía el código de mi diagrama a algún sitio?
No. El diagrama se dibuja en tu navegador y el documento se queda en tu dispositivo.