> ## Documentation Index
> Fetch the complete documentation index at: https://omer-914cc1c6.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Mermaid

> Muestra diagramas con Mermaid

[Mermaid](https://mermaid.js.org/) te permite crear diagramas de flujo, de secuencia, de Gantt y otros, a partir de texto y código.

Para ver la lista completa de tipos de diagramas compatibles y su sintaxis, consulta la [documentación de Mermaid](https://mermaid.js.org/intro/).

```mermaid theme={null}
  flowchart LR
    subgraph subgraph1
        direction TB
        top1[arriba] --> bottom1[abajo]
    end
    subgraph subgraph2
        direction TB
        top2[arriba] --> bottom2[abajo]
    end
    %% ^ Estos subgrafos son idénticos, excepto por los enlaces hacia ellos:

    %% Enlace *hacia* subgraph1: se mantiene la dirección de subgraph1
    outside --> subgraph1
    %% Enlace *dentro de* subgraph2:
    %% subgraph2 hereda la dirección del grafo de nivel superior (LR)
    outside ---> top2
```

````mdx Mermaid flowchart example theme={null}
```mermaid
  flowchart LR
    subgraph subgraph1
        direction TB
        top1[arriba] --> bottom1[abajo]
    end
    subgraph subgraph2
        direction TB
        top2[arriba] --> bottom2[abajo]
    end
    %% ^ Estos subgráficos son idénticos, excepto por los enlaces hacia ellos:

    %% Enlace *hacia* subgraph1: se mantiene la dirección de subgraph1
    outside --> subgraph1
    %% Enlace *dentro de* subgraph2:
    %% subgraph2 hereda la dirección del gráfico de nivel superior (LR)
    outside ---> top2
```
````

<div id="syntax">
  ## Sintaxis
</div>

Para crear un diagrama de Mermaid, escribe la definición del diagrama dentro de un bloque de código de Mermaid.

````mdx theme={null}
```mermaid
// Tu código de diagrama mermaid aquí
```
````