Diagramas Mermaid

Escribe diagramas como texto en bloques de código delimitados. Jamdesk los renderiza como SVG en el momento del build.

Uso básico

Usa un bloque de código delimitado con el identificador de lenguaje mermaid:

```mermaid
flowchart LR
    A[Start] --> B[Process] --> C[End]
```

Tipos de diagramas

Diagramas de flujo

La dirección puede ser de arriba abajo (TD), de izquierda a derecha (LR), de abajo arriba (BT), o de derecha a izquierda (RL).

```mermaid
flowchart TD
    A[User Request] --> B{Valid?}
    B -->|Yes| C[Process]
    B -->|No| D[Error]
    C --> E[Response]
    D --> E
```

Subgráficos

Agrupa nodos relacionados usando subgráficos. Esto ayuda a organizar diagramas de flujo complejos en secciones lógicas como "Frontend" y "Backend" o distintas etapas de un pipeline.

```mermaid
flowchart TB
    subgraph Frontend
        A[React App] --> B[Components]
    end
    subgraph Backend
        C[API Server] --> D[(Database)]
    end
    B -->|HTTP| C
```

Diagramas de secuencia

Los diagramas de secuencia muestran cómo interactúan los componentes a lo largo del tiempo. Usa un diagrama de secuencia para flujos de llamadas API y protocolos de autenticación. Los participantes aparecen como líneas de vida verticales, con mensajes fluyendo entre ellos.

```mermaid
sequenceDiagram
    participant Client
    participant Server
    participant Database

    Client->>Server: Request
    Server->>Database: Query
    Database-->>Server: Results
    Server-->>Client: Response
```

Diagramas de clases

Los diagramas de clases representan la estructura de sistemas orientados a objetos, como un modelo de datos o los tipos principales de un servicio. Muestran las clases con sus atributos, métodos y cómo se relacionan entre sí.

```mermaid
classDiagram
    class User {
        +String name
        +String email
        +login()
        +logout()
    }
    class Order {
        +int id
        +Date created
        +addItem()
        +checkout()
    }
    class Item {
        +String name
        +float price
    }
    User "1" --> "*" Order : places
    Order "1" --> "*" Item : contains
```

Diagramas de estado

Los diagramas de estado modelan el ciclo de vida de un objeto o proceso. Muestran todos los estados posibles y las transiciones entre ellos. Los estados de pedidos y los flujos de aprobación de documentos son ejemplos típicos.

```mermaid
stateDiagram-v2
    [*] --> Draft
    Draft --> Review
    Review --> Published
    Review --> Draft
    Published --> [*]
```

Diagramas entidad-relación

Los diagramas ER documentan esquemas de bases de datos y modelos de datos, mostrando entidades (tablas), sus atributos (columnas) y las relaciones entre ellas. Los símbolos indican cardinalidad: uno a uno, uno a muchos o muchos a muchos.

```mermaid
erDiagram
    USER ||--o{ ORDER : places
    ORDER ||--|{ ITEM : contains
    USER {
        string name
        string email
    }
    ORDER {
        int id
        date created
    }
```

Diagramas de Gantt

Los diagramas de Gantt visualizan cronogramas y calendarios de proyectos. Las tareas se muestran como barras horizontales a lo largo de una línea de tiempo, mostrando duración, dependencias y trabajo en paralelo. Un plan de proyecto o roadmap encaja de forma natural.

```mermaid
gantt
    title Project Timeline
    dateFormat YYYY-MM-DD
    section Planning
        Research       :a1, 2024-01-01, 7d
        Design         :a2, after a1, 5d
    section Development
        Backend        :b1, after a2, 14d
        Frontend       :b2, after a2, 14d
    section Launch
        Testing        :c1, after b1, 7d
        Deployment     :c2, after c1, 2d
```

Gráficos de Git

Los gráficos de Git visualizan estrategias de ramificación y flujos de control de versiones. Muestran commits, ramas, fusiones y el historial completo de un repositorio. Cada rama tiene un color distinto para facilitar su identificación.

```mermaid
gitGraph
    commit id: "Initial"
    branch feature
    checkout feature
    commit id: "Add login"
    commit id: "Add auth"
    checkout main
    merge feature id: "v1.0"
    branch release
    checkout release
    commit id: "Prep 1.1"
    checkout main
    branch hotfix
    checkout hotfix
    commit id: "Fix bug"
    checkout main
    merge hotfix id: "v1.0.1"
    checkout release
    commit id: "Final QA"
    checkout main
    merge release id: "v1.1"
```

Diagramas de línea de tiempo

Las líneas de tiempo muestran eventos a lo largo de periodos. Comienza con la palabra clave timeline, un title opcional y luego una línea por periodo con eventos separados por dos puntos:

```mermaid
timeline
    title Product Launch Timeline
    2024 : Research
         : First prototype
    2025 : Private beta
         : Public beta
    2026 : GA launch
```

Gráficos circulares

Los gráficos circulares muestran datos proporcionales como porciones de un círculo. Úsalos cuando las partes componen un todo, como cuota de mercado o resultados de encuestas. Limita las porciones a 6 o menos para mantener la legibilidad.

```mermaid
pie title Browser Market Share
    "Chrome" : 65
    "Safari" : 19
    "Firefox" : 10
    "Edge" : 4
    "Other" : 2
```

Formas de diagramas de flujo

Distintas formas transmiten distintos significados en los diagramas de flujo:

Tipos de flechas

Las flechas indican dirección de flujo y tipos de relación:

Ajustar el tamaño de diagramas anchos

Para diagramas anchos como los de Gantt o gráficos de Git complejos, puedes usar el componente Mermaid directamente con la prop minWidth para evitar que el diagrama se comprima:

<Mermaid minWidth="700px">
gantt
    title Wide Project Timeline
    ...
</Mermaid>

Consejos de estilo

Para diagramas efectivos:

• Mantenlo simple: divide los flujos complejos en varios diagramas más pequeños.
• Etiqueta tus flechas para explicar las transiciones.
• Elige una sola dirección: TD (de arriba abajo) para diagramas altos, LR (de izquierda a derecha) para los anchos.
• Limita cada diagrama a 10-15 nodos para mayor claridad.

Más información

Para la referencia completa de la sintaxis Mermaid, incluyendo funciones avanzadas como estilos, temas y tipos de diagramas adicionales, consulta la documentación oficial de Mermaid.

¿Qué sigue?