Diagramas Mermaid

Escribe diagramas como texto en bloques de código delimitados. Jamdesk los renderiza como SVG en tiempo de 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 a abajo (TD), de izquierda a derecha (LR), de abajo a 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. Son ideales para documentar llamadas a API, flujos de autenticación o cualquier comunicación entre servicios. Los participantes aparecen como líneas de vida verticales, con mensajes que fluyen 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. Úsalos para documentar modelos de datos, mostrar relaciones entre entidades o diseñar arquitecturas de sistema. Muestran 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. Usa diagramas de estado para documentar estados de pedidos, flujos de trabajo de documentos o cualquier sistema con fases diferenciadas.

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

Diagramas de entidad-relación

Los diagramas ER documentan esquemas de bases de datos y modelos de datos. Muestran entidades (tablas), sus atributos (columnas) y las relaciones entre ellas. Los símbolos indican la 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 plazos de proyectos. Las tareas se muestran como barras horizontales a lo largo de una línea de tiempo, indicando duración, dependencias y trabajo paralelo. Úsalos para planificación de proyectos, documentación de sprints o roadmaps.

```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 trabajo de control de versiones. Muestran commits, ramas, fusiones y el historial general de un repositorio. Cada rama tiene un color diferente 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"
```

Gráficos de sectores

Los gráficos de sectores muestran datos proporcionales como porciones de un círculo. Úsalos para representar cuota de mercado, resultados de encuestas, asignación de recursos o cualquier dato en que las partes forman un todo. Limita las porciones a 6 o menos para mayor legibilidad.

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

Formas en diagramas de flujo

Las distintas formas transmiten diferentes significados en los diagramas de flujo:

Tipos de flechas

Las flechas indican la dirección del flujo y el tipo de relación:

Ajustar el tamaño de diagramas anchos

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

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

Consejos de estilo

Para crear 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 a abajo) para diagramas altos, LR (de izquierda a derecha) para los anchos.
• Limita cada diagrama a entre 10 y 15 nodos para mayor claridad.

Más información

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

¿Qué sigue?