Cronograma básico con título
Un historial cronológico mínimo con un evento por periodo.
timeline
title Historia del Producto
2024 : Primer prototipo
2025 : Beta privada
2026 : Lanzamiento públicoReferencia de sintaxis de diagramas
Hoja de referencia y guía de diagramas Mermaid
Copia un ejemplo práctico del diagrama que necesitas, mira cómo se renderiza y adapta las etiquetas y conexiones para tu documentación.
Patrón de sintaxis
```mermaid
flowchart LR
A[Write Markdown] --> B[Add Mermaid code]
B --> C[Preview diagram]
C --> D[Publish docs]
```Los bloques de código cercados con el identificador mermaid se renderizan en diagramas interactivos automáticamente.
sintaxis diagrama de flujo mermaid
Sintaxis de diagramas de flujo Mermaid
Usa un diagrama de flujo para mostrar cómo un proceso avanza de un paso al siguiente, incluyendo decisiones y rutas alternativas.
Sintaxis copiable
Diagramas de flujo
flowchart TD
A[Borrador en Markdown] --> B{¿Requiere diagrama?}
B -- Sí --> C[Escribir código Mermaid]
B -- No --> D[Publicar notas]
C --> E[Previsualizar y exportar]
E --> DVista previa renderizada
Procesos, bifurcaciones, decisiones, flujos de trabajo
Renderizando vista previa de Mermaid
La sintaxis permanece visible si JavaScript está desactivado.
Comienza con flowchart y elige TD (arriba-abajo) o LR (izquierda-derecha).
Usa corchetes para nodos de proceso y llaves para decisiones.
Etiqueta las conexiones entre guiones, por ejemplo -- Sí -->.
sintaxis diagrama de secuencia mermaid
Sintaxis de diagramas de secuencia Mermaid
Los diagramas de secuencia muestran mensajes en orden cronológico. Son ideales para llamadas API, autenticación y comunicación entre servicios.
Sintaxis copiable
Secuencia
sequenceDiagram
participant Usuario
participant App
participant Renderer
Usuario->>App: Pegar sintaxis Mermaid
App->>Renderer: Validar diagrama
Renderer-->>App: Vista previa SVG
App-->>Usuario: Opciones de exportaciónVista previa renderizada
APIs, flujos de petición-respuesta, mensajes de servicios
Renderizando vista previa de Mermaid
La sintaxis permanece visible si JavaScript está desactivado.
Declara los participantes para controlar el orden y nombres visibles.
Usa ->> para peticiones y -->> para respuestas.
Escribe el texto del mensaje después de dos puntos.
ejemplo cronograma mermaid
Sintaxis de cronogramas Mermaid
Los cronogramas organizan eventos en orden cronológico. Úsalos para historiales de versiones, hojas de ruta e hitos.
Sintaxis copiable
Cronograma
timeline
title Historia de Markdown
2004 : Creación de Markdown : John Gruber & Aaron Swartz
2011 : Estándar CommonMark
2014 : GitHub Flavored Markdown (GFM)
2026 : Herramientas TheMarkdownerVista previa renderizada
Historiales de versiones, hojas de ruta, cronología de proyectos
Renderizando vista previa de Mermaid
La sintaxis permanece visible si JavaScript está desactivado.
Más patrones de cronogramas
4 ejemplos de cronogramas Mermaid para copiar
Varios eventos en un mismo periodo
Añade más signos de dos puntos para agrupar hitos relacionados en un solo periodo.
timeline
title Plan de Lanzamiento 2026
T1 : Investigación de clientes : Hoja de ruta aprobada
T2 : Beta privada : Documentación
T3 : Disponibilidad general : Revisión de adopciónHoja de ruta por sprints
Agrupa los periodos de entrega con secciones para una hoja de ruta de software legible.
timeline
title Sprints de Software
section Descubrimiento
Sprint 1 : Definir alcance : Prototipo
section Entrega
Sprint 2 : Construir editor : Añadir validación
section Lanzamiento
Sprint 3 : Revisión de accesibilidad : LanzamientoHistorial de versiones
Documenta las versiones del software y los cambios destacados en orden cronológico.
timeline
title Historial de Versiones
v1.0 : Lanzamiento inicial : Editor principal
v1.1 : Exportación SVG : Tema oscuro
v2.0 : Constructor de cronogramas : Enlaces compartiblesComienza con la palabra clave timeline.
Define periodos seguidos de dos puntos y luego especifica eventos.
Usa dos puntos para separar múltiples eventos bajo el mismo periodo.
sintaxis diagrama er mermaid
Sintaxis de diagramas ER Mermaid
Los diagramas entidad-relación muestran entidades de bases de datos y sus conexiones. Úsalos para documentar esquemas o modelos de datos.
Sintaxis copiable
Diagramas ER
erDiagram
DOCUMENTO ||--o{ DIAGRAMA : contiene
DOCUMENTO {
string titulo
string formato
}
DIAGRAMA {
string tipo
string fuente
}Vista previa renderizada
Esquemas de bases de datos, modelos relacionales, contratos de datos
Renderizando vista previa de Mermaid
La sintaxis permanece visible si JavaScript está desactivado.
Declara erDiagram en la primera línea.
Define conexiones con símbolos como ||--o{ (uno a muchos).
Escribe las propiedades de tablas dentro de llaves.
sintaxis diagrama de clases mermaid
Sintaxis de diagramas de clases Mermaid
Los diagramas de clases muestran objetos, propiedades, métodos y relaciones. Útiles para documentar SDKs y arquitecturas orientadas a objetos.
Sintaxis copiable
Clases
classDiagram
class Documento {
+string titulo
+string formato
+convertToMarkdown()
}
class Diagrama {
+string tipo
+render()
}
Documento "1" --> "0..*" Diagrama : incluyeVista previa renderizada
Objetos, propiedades, clases, estructura de código
Renderizando vista previa de Mermaid
La sintaxis permanece visible si JavaScript está desactivado.
Comienza con classDiagram en la parte superior.
Usa + para miembros públicos y - para privados.
Especifica asociaciones con flechas como -->.
sintaxis diagrama de estados mermaid
Sintaxis de diagramas de estado Mermaid
Muestran los estados válidos de un sistema y las transiciones entre ellos. Úsalos para ciclos de vida de pedidos, modos o sesiones.
Sintaxis copiable
Estados
stateDiagram-v2
[*] --> Borrador
Borrador --> VistaPrevia: renderizar
VistaPrevia --> Error: error sintaxis
VistaPrevia --> Publicado: exportar
Error --> Borrador: corregir codigoVista previa renderizada
Ciclos de vida, modos, transiciones, operaciones
Renderizando vista previa de Mermaid
La sintaxis permanece visible si JavaScript está desactivado.
Usa stateDiagram-v2 para la sintaxis moderna de estados.
Representa el inicio y final usando [*].
Añade descripciones de transición tras dos puntos.
sintaxis diagrama de gantt mermaid
Sintaxis de diagramas de Gantt Mermaid
Los diagramas de Gantt sitúan tareas en un calendario con fechas, duraciones, hitos y dependencias.
Sintaxis copiable
Gantt
gantt
title Lanzamiento de Documentación
dateFormat YYYY-MM-DD
section Redacción
Escribir guía :a1, 2026-06-12, 2d
Revisar ejemplos :after a1, 1d
section Publicación
Capturas pantalla :1d
Lanzar página :1dVista previa renderizada
Planificación de proyectos, cronogramas, seguimiento de sprints
Renderizando vista previa de Mermaid
La sintaxis permanece visible si JavaScript está desactivado.
Declara dateFormat para que coincida con el formato de fechas.
Organiza elementos en secciones usando section.
Encadena dependencias usando after id-tarea.
sintaxis grafico circular mermaid
Sintaxis de gráficos circulares Mermaid
Muestran cómo diferentes categorías componen un total. Ideales para fuentes de tráfico o encuestas.
Sintaxis copiable
Gráficos circulares
pie showData
title Tipos de diagramas en documentación
"Diagramas de flujo" : 40
"Diagramas de secuencia" : 25
"Diagramas ER" : 20
"Otros" : 15Vista previa renderizada
Distribuciones, porcentajes, estadísticas
Renderizando vista previa de Mermaid
La sintaxis permanece visible si JavaScript está desactivado.
Usa pie showData para mostrar los números junto a las etiquetas.
Encierra entre comillas dobles los nombres con espacios.
Mantén una lista de sectores reducida para mayor claridad.
sintaxis mapa mental mermaid
Sintaxis de mapas mentales Mermaid
Organizan un tema central y sus ramificaciones mediante sangrías jerárquicas.
Sintaxis copiable
Mapas mentales
mindmap
root((Mermaid))
Markdown
Archivos README
Sitios de docs
Diagramas
Flujos
Secuencia
ERDVista previa renderizada
Estructuras de ideas, lluvia de ideas, jerarquías
Renderizando vista previa de Mermaid
La sintaxis permanece visible si JavaScript está desactivado.
Usa sangrías con espacios para anidar ramas secundarias.
Declara root((Nodo)) para un núcleo visual destacado.
Mantén los nombres cortos para un espaciado equilibrado.
Resolución de problemas
Errores comunes de sintaxis en Mermaid
La mayoría de los errores de Mermaid se deben a que falta el identificador del tipo de diagrama, a una flecha con puntuación incorrecta o a una etiqueta que necesita comillas dobles. Si un diagrama no compila, reduce el código a una sola relación y añade líneas poco a poco.
Falta el identificador del diagrama
Los bloques Mermaid necesitan una primera línea con la palabra clave (por ejemplo flowchart, sequenceDiagram o erDiagram) para que el analizador sepa qué estructura construir.
Puntuación incorrecta en las flechas
Las flechas dependen del tipo de diagrama. Los diagramas de flujo usan -->, mientras que los de secuencia requieren ->> y las respuestas -->>.
Caracteres especiales sin comillas
La puntuación dentro de una etiqueta puede confundirse con sintaxis de Mermaid. Envuelve la etiqueta en comillas dobles o mantén el ID del nodo separado de su texto visible.
Sangría inconsistente
Los mapas mentales y las hojas de ruta cronológicas dependen mucho del espaciado. Comprueba que los elementos hijos anidados tengan la misma sangría.
Preguntas frecuentes
¿Cómo está estructurada esta hoja de trucos de Mermaid?
Cada sección combina un bloque de código funcional con una vista previa renderizada y notas de sintaxis.
¿Puedo exportar diagramas Mermaid a formatos de imagen?
Sí. Pega el código en el editor de Mermaid y descarga SVG, PNG o PDF.
¿Son compatibles los diagramas Mermaid en GitHub?
Sí. GitHub, GitLab y Obsidian renderizan de forma nativa bloques ```mermaid en archivos Markdown.
Utilidades de sintaxis
Comentarios y caracteres especiales en Mermaid
Los comentarios y las etiquetas escapadas funcionan en todos los tipos de diagrama, así que no dependen de la sintaxis de cronogramas. Usa comentarios para notas de mantenimiento y entidades HTML cuando una etiqueta contenga signos de puntuación de la sintaxis.
Añadir un comentario de Mermaid
Las líneas que empiezan por
%%permanecen en el código fuente pero no se renderizan.Escapar la puntuación de la sintaxis
Usa una entidad HTML cuando los dos puntos formen parte de una etiqueta.