Tipos de diagrama de Mermaid
Mermaid convierte descripciones breves de texto en diagramas. Cada guía explica para qué sirve el diagrama, muestra un ejemplo que puedes abrir en TryMermaid y enumera la sintaxis que necesitas.
¿Qué es un diagrama de Mermaid?
Mermaid es un lenguaje de texto para diagramas. Escribes una palabra clave para el tipo de diagrama y luego una línea por cada forma o conexión, y Mermaid lo dibuja. Como el diagrama es texto, vive en el control de versiones junto a tu código.
Cada tipo tiene una sintaxis breve pensada para un trabajo concreto. Elige el tipo según lo que quieres que entienda el lector; los grupos de abajo están ordenados así.
Procesos y flujos
Cómo ocurre algo: pasos, decisiones, mensajes y cambios de estado.
Diagrama de flujo
Lienzo visualMostrar los pasos y las decisiones de un proceso.
Diagrama de flujo: sintaxis y ejemplos →Diagrama de secuencia
Mostrar mensajes entre usuarios, servicios o API a lo largo del tiempo.
Diagrama de secuencia: sintaxis y ejemplos →Diagrama de estados
Describir los estados de algo y qué los cambia.
Diagrama de estados: sintaxis y ejemplos →
Diseño de software
Cómo se construye el software: código y datos.
Ideas
Ideas y esquemas alrededor de un tema.
¿Qué diagrama de Mermaid debo usar?
Empieza por lo que quieres mostrar. Todos los tipos de diagrama funcionan en el editor de código de TryMermaid con vista previa en directo, y los marcados como «Lienzo visual» también se editan arrastrando formas.
| Si quieres… | Usa | Palabra clave de Mermaid |
|---|---|---|
| Mostrar los pasos y las decisiones de un proceso | Diagrama de flujo | flowchart TD |
| Mostrar mensajes entre usuarios, servicios o API a lo largo del tiempo | Diagrama de secuencia | sequenceDiagram |
| Modelar las clases del código y cómo se relacionan | Diagrama de clases | classDiagram |
| Diseñar tablas de base de datos y sus relaciones | Diagrama entidad-relación | erDiagram |
| Describir los estados de algo y qué los cambia | Diagrama de estados | stateDiagram-v2 |
| Hacer una lluvia de ideas o un esquema alrededor de un tema | Mapa mental | mindmap |
Convierte un diagrama en imagen
Preguntas frecuentes sobre los diagramas de Mermaid
¿Cuántos tipos de diagrama admite Mermaid?
Más de 20. Cada tipo empieza con su propia palabra clave en la primera línea, como flowchart o sequenceDiagram. Aquí tienes guías en español de los más usados, y en inglés de 18 tipos.
¿Qué diagrama de Mermaid debo usar?
Empieza por lo que quieres que entienda el lector. Pasos y decisiones piden un diagrama de flujo; mensajes entre sistemas a lo largo del tiempo, un diagrama de secuencia; tablas de una base de datos, un diagrama entidad-relación. La tabla de esta página relaciona cada objetivo con su diagrama.
¿Dónde se ven los diagramas de Mermaid?
GitHub y GitLab dibujan Mermaid dentro de los bloques de código de Markdown, y también muchas herramientas de documentación y notas. En cualquier otro sitio, exporta el diagrama como PNG o SVG, o comparte un enlace.
¿Mermaid es gratis?
Sí. Mermaid es de código abierto con licencia MIT. En TryMermaid todos los tipos de diagrama funcionan en el plan gratuito, con exportación PNG y SVG y hasta 50 diagramas guardados; puedes empezar sin cuenta.