---
title: Mermaid
description: Renderiza diagramas Mermaid en línea en tu documentación.
url: https://docs.thally.io/es/components/mermaid
---

# Mermaid

Renderiza diagramas Mermaid en línea en tu documentación.

Usa `<Mermaid>` para incrustar diagramas de flujo, diagramas de secuencia, diagramas entidad-relación y cualquier otro tipo de diagrama compatible con [Mermaid](https://mermaid.js.org). Los diagramas se renderizan en el lado del cliente en la primera visualización.

## Diagrama de flujo

{`
flowchart LR
    A[Client] -->|Request| B(API Gateway)
    B --> C{Auth}
    C -->|Valid| D[Service]
    C -->|Invalid| E[401 Error]
`}

```mdx
<Mermaid>{`
flowchart LR
    A[Client] -->|Request| B(API Gateway)
    B --> C{Auth}
    C -->|Valid| D[Service]
    C -->|Invalid| E[401 Error]
`}</Mermaid>
```

## Diagrama de secuencia

{`
sequenceDiagram
    participant U as User
    participant A as API
    participant D as Database
    U->>A: POST /login
    A->>D: SELECT user WHERE email=?
    D-->>A: user row
    A-->>U: 200 OK + JWT
`}

```mdx
<Mermaid>{`
sequenceDiagram
    participant U as User
    participant A as API
    participant D as Database
    U->>A: POST /login
    A->>D: SELECT user WHERE email=?
    D-->>A: user row
    A-->>U: 200 OK + JWT
`}</Mermaid>
```

> **Note:**
  La definición de Mermaid debe pasarse como un hijo de cadena de plantilla literal (`{\`...\`}`), no como hijos JSX.

## Props

| Prop | Tipo | Descripción |
|---|---|---|
| `children` | `string` | Cadena de definición del diagrama Mermaid |