Skip to main content

Mermaid.js

← Volver

Una herramienta basada en JavaScript que permite generar diagramas y visualizaciones utilizando texto inspirado en Markdown.

Contenidos mostrar

Descripción

Con Mermaid escribimos código simple y la herramienta se encarga de renderizar el dibujo automáticamente, sin necesidad de herramientas de diseño gráfico pesadas.

La gran ventaja de Mermaid es que trata a los diagramas como código. Esto ofrece importantes ventajas.

Control de versiones

Podemos comprobar qué cambió en un diagrama usando Git, igual que con el código fuente.

Rapidez

Si se tiene cierta práctica con JavaScript, resultará más rápido escribir un par de sencillas líneas que alinear flechas manualmente.

Integración

Viene integrado por defecto en plataformas como GitHub, GitLab, Notion o Obsidian.

Mermaid es extremadamente versátil. Entre la gran variedad de diagramas que nos permite quedar, los más comunes son:

  • diagramas de flujo para procesos y toma de decisiones.
  • diagramas de secuencia, ideales para ver cómo interactúan diferentes sistemas o APIs.
  • diagramas de Gantt para gestión de proyectos y elaboración de cronogramas.
  • diagramas de clases o entidad-relación para diseño de bases de datos y software.

Cómo usarlo

Editores online

El Mermaid Live Editor es el mejor lugar para probar el código sin instalar nada.

En Markdown

Si usamos un editor compatible, solo necesitaremos envolver el código entre bloques de triple comilla, seguidos de la palabra mermaid.

Integración web

Podemos incluir la librería en nuestro propio sitio web mediante un CDN para que los diagramas se generen dinámicamente.

Ejemplos

Si quisiéramos hacer un diagrama de flujo básico, el código se vería así:

graph TD
A[Inicio] –> B{¿Funciona?}
B — Sí –> C[¡Genial!] B — No –> D[Arreglarlo] D –> B

Crear un diagrama de Gantt en Mermaid es muy intuitivo. La estructura se basa en definir secciones y luego asignar tareas con fechas de inicio y duración (o fechas de fin).

A continuación, un ejemplo de un cronograma para el lanzamiento de un producto.

gantt

title Plan de lanzamiento de producto
dateFormat YYYY-MM-DD
section Fase de diseño
Investigación de mercado :a1, 2026-02-01, 7d
Prototipado :after a1, 10d
section Desarrollo
Frontend :2026-02-15, 12d
Backend :2026-02-15, 15d
Integración de API :active, 2026-03-01, 5d
section QA y lanzamiento
Pruebas Beta :2026-03-05, 10d
Lanzamiento oficial :milestone, 2026-03-15, 0d

Desglose de los comandos

  • title: el nombre que aparecerá arriba del diagrama.

  • dateFormat: define cómo vamos a escribir las fechas (ej. YYYY-MM-DD).

  • section: agrupa tareas relacionadas visualmente.

  • etiquetas de estado:

    • active: la tarea se muestra resaltada (en curso).

    • done: la tarea se muestra como completada.

    • crit: marca la tarea como parte de la ruta crítica (suele aparecer en rojo).

  • dependencias (after): permite que una tarea comience exactamente cuando termina otra (ej. after a1).

  • milestone: crea un evento puntual en el tiempo con duración cero.

Enlaces

Creado
Actualizado
Etiquetas:
Ir a Arriba