mermaid

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

Sintaxis Forma
A[Texto] Rectángulo
A(Texto) Rectángulo redondeado
A{Texto} Diamante (decisión)
A((Texto)) Círculo
A>Texto] Bandera

Tipos de Flechas

Sintaxis Tipo
--> Flecha sólida
--- Línea sólida
-.- Línea punteada
-.-> Flecha punteada
==> Flecha gruesa
`–> texto

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