Diagramas Mermaid

Cómo crear diagramas de flujo, secuencia y más.

Sintaxis Básica

```mermaid
graph TD
    A[Inicio] --> B[Proceso]
    B --> C[Fin]
```

Tipos de Diagramas

Diagrama de Flujo

graph TD
    A[Inicio] --> B{¿Condición?}
    B -->|Sí| C[Acción 1]
    B -->|No| D[Acción 2]
    C --> E[Fin]
    D --> E

Código:

```mermaid
graph TD
    A[Inicio] --> B{¿Condición?}
    B -->|Sí| C[Acción 1]
    B -->|No| D[Acción 2]
    C --> E[Fin]
    D --> E
```

Diagrama de Secuencia

sequenceDiagram
    Estudiante->>GitHub: Push código
    GitHub->>CI: Ejecutar tests
    CI-->>GitHub: Resultado
    GitHub-->>Estudiante: Notificación

Código:

```mermaid
sequenceDiagram
    Estudiante->>GitHub: Push código
    GitHub->>CI: Ejecutar tests
    CI-->>GitHub: Resultado
    GitHub-->>Estudiante: Notificación
```

Diagrama de Flujo Horizontal

graph LR
    A[Entrada] --> B[Proceso 1]
    B --> C[Proceso 2]
    C --> D[Salida]

Código:

```mermaid
graph LR
    A[Entrada] --> B[Proceso 1]
    B --> C[Proceso 2]
    C --> D[Salida]
```

Formas de Nodos

Tipos de Flechas

Estilos

Puedes agregar colores con style:

```mermaid
graph TD
    A[Correcto] --> B[Incorrecto]
    style A fill:#00ff41,stroke:#333
    style B fill:#ff6b35,stroke:#333
```

Colores del tema Eva01:

• Verde: #00ff41
• Morado: #9d4edd
• Naranja: #ff6b35
• Rojo: #ef233c

Características Especiales

Click para Expandir

Los diagramas tienen un botón “Expandir” que abre el diagrama en pantalla completa.

Tema Automático

Los diagramas adaptan sus colores al tema actual (oscuro/claro).

Ejemplos del Curso

Flujo de Git

```mermaid
graph TD
    A[Tu Repo Local] -->|git add| B[Staging]
    B -->|git commit| C[Commits Locales]
    C -->|git push| D[GitHub]
    D -->|PR| E[Repo Profesor]
```

Proceso de LLM

```mermaid
graph LR
    A[Texto] --> B[Tokenización]
    B --> C[Embeddings]
    C --> D[Transformer]
    D --> E[Predicción]
```

Workflow de Tareas

```mermaid
sequenceDiagram
    Estudiante->>Repo: Fork
    Estudiante->>Local: Clone
    Estudiante->>Local: Trabajo
    Estudiante->>GitHub: Push
    Estudiante->>Profesor: Pull Request
    Profesor-->>Estudiante: Review
```

Consejos

1. Mantén los diagramas simples - Máximo 8-10 nodos
2. Usa etiquetas descriptivas - Texto corto y claro
3. Orienta el flujo - TD (arriba-abajo) o LR (izquierda-derecha)
4. Prueba localmente - Verifica que renderiza bien

Recursos

• Documentación oficial de Mermaid
• Editor en línea

En producción (uu_framework): cómo se renderiza Mermaid

En este sitio, Mermaid se renderiza del lado del cliente (en el navegador) desde el layout base.

Puntos importantes para que funcione en deployment:

1. Siempre usa un bloque fenced con mermaid (esto es lo que genera la clase language-mermaid):

```mermaid
graph TD
  A --> B
```

2. No indentes el bloque ```mermaid (si lo indentas dentro de listas o quotes, a veces deja de detectarse como language-mermaid).
3. Tema automático: el sitio configura Mermaid con tema oscuro/claro según el tema del sitio.
   • Recomendación: evita hardcodear colores salvo que sea necesario, porque pueden verse mal en modo claro.
4. Diagrama expandible: los diagramas se envuelven en un contenedor con botón “Expandir” (modal).
5. Requisito de red: Mermaid se carga desde un CDN. Si alguien abre el sitio sin internet, los diagramas no se renderizan.