Mermaid para Principiantes: De Cero a Héroe de Diagramas en 10 Minutos

Okay, te voy a contar un pequeño secreto.

¿Esos diagramas elegantes que ves en la documentación técnica? ¿Los diagramas de flujo en presentaciones? ¿Los diagramas de arquitectura que hacen que los ingenieros parezcan tener todo bajo control?

Son solo texto. En serio.

¿Qué es Mermaid?

Mermaid es una forma de crear diagramas usando comandos de texto simples. En lugar de arrastrar cajas en PowerPoint (doloroso), escribes algo como esto:

flowchart LR
    A[Inicio] --> B[Hacer Algo]
    B --> C[¡Listo!]

Y boom — obtienes un hermoso diagrama de flujo. Magia.

Tu primer diagrama en 60 segundos

Vamos a crear un flujo de proceso simple. Abre MermaidSnap y pega esto:

flowchart TD
    Despertar[Despertar] --> Cafe[Hacer Café]
    Cafe --> Trabajo[Empezar a Trabajar]
    Trabajo --> Almuerzo[Almuerzo]
    Almuerzo --> Trabajo2[Volver al Trabajo]
    Trabajo2 --> Fin[Ir a Casa]

Eso es todo. Acabas de hacer un diagrama. ¿Notas lo legible que es el código? TD significa "de arriba hacia abajo" — el diagrama fluye verticalmente.

Los bloques básicos

Cada diagrama Mermaid tiene dos partes:

1. Nodos — las cajas (A, B, C, etc.)
2. Conexiones — las flechas entre ellos (-->)

Diferentes corchetes te dan diferentes formas:

• [texto] — rectángulo
• (texto) — rectángulo redondeado
• (llaves alrededor del texto) — diamante (para decisiones)
• ((texto)) — círculo

Pruébalo tú mismo

La mejor forma de aprender es experimentar. Ve a MermaidSnap, elige una plantilla y empieza a cambiar cosas. Rompe. Arregla. Así es como aprendes.

Bienvenido al mundo de los diagramas. Te va a encantar.