> ## Documentation Index
> Fetch the complete documentation index at: https://www.mintlify.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Mermaid

> Crea diagramas de flujo, diagramas de secuencia y otras visualizaciones en tu documentación utilizando la sintaxis de Mermaid con renderizado automático.

[Mermaid](https://mermaid.js.org/) te permite crear diagramas de flujo, diagramas de secuencia, diagramas de Gantt y otros tipos de diagramas con 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 placement="top-right" theme={null}
  flowchart LR
    subgraph subgraph1
        direction TB
        top1[top] --> bottom1[bottom]
    end
    subgraph subgraph2
        direction TB
        top2[top] --> bottom2[bottom]
    end
    %% ^ These subgraphs are identical, except for the links to them:

    %% Link *to* subgraph1: subgraph1 direction is maintained
    outside --> subgraph1
    %% Enlace *dentro* de subgrafo2:
    %% subgrafo2 hereda la dirección del grafo de nivel superior (LR)
    outside ---> top2
```

````mdx Mermaid flowchart example theme={null}
```mermaid placement="top-right"
  flowchart LR
    subgraph subgraph1
        direction TB
        top1[top] --> bottom1[bottom]
    end
    subgraph subgraph2
        direction TB
        top2[top] --> bottom2[bottom]
    end
    %% ^ Estos subgrafos son idénticos, salvo por los enlaces hacia ellos:

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

<div id="elk-layout-support">
  ## Compatibilidad con el diseño ELK
</div>

Mintlify es compatible con el motor de diseño [ELK (Eclipse Layout Kernel)](https://www.eclipse.org/elk/) para diagramas Mermaid. ELK optimiza la disposición para reducir solapamientos y mejorar la legibilidad, lo cual es especialmente útil para diagramas grandes o complejos.

Para utilizar el diseño ELK en tus diagramas Mermaid, añade la directiva `%%{init: {'flowchart': {'defaultRenderer': 'elk'}}}%%` al principio de tu diagrama:

````mdx ELK layout example theme={null}
```mermaid
%%{init: {'flowchart': {'defaultRenderer': 'elk'}}}%%
flowchart LR
    A[Start] --> B[Process 1]
    B --> C[Process 2]
    B --> D[Process 3]
    C --> E[End]
    D --> E
```
````

<div id="interactive-controls">
  ## Controles interactivos
</div>

Todos los diagramas de Mermaid incluyen controles interactivos de zoom y desplazamiento. De forma predeterminada, los controles aparecen cuando la height del diagrama supera los 120px.

* **Acercar/alejar**: Usa los botones de zoom para aumentar o disminuir la escala del diagrama.
* **Desplazar**: Usa las flechas direccionales para moverte por el diagrama.
* **Restablecer vista**: Haz clic en el botón de restablecer para volver a la vista original.

Los controles son especialmente útiles para diagramas grandes o complejos que no caben por completo en el área visible.

<div id="properties">
  ## Propiedades
</div>

<ResponseField name="actions" type="boolean">
  Muestra u oculta los controles interactivos. Cuando está configurada, esta propiedad anula el comportamiento predeterminado (controles visibles cuando el height del diagrama supera los 120 px).
</ResponseField>

<ResponseField name="placement" type="string" default="bottom-right">
  Posición de los controles interactivos. Opciones: `top-left`, `top-right`, `bottom-left`, `bottom-right`.
</ResponseField>

<div id="examples">
  ### Ejemplos
</div>

Ocultar los controles de un diagrama:

````mdx theme={null}
```mermaid actions={false}
flowchart LR
    A --> B
```
````

Mostrar controles en la esquina superior izquierda:

````mdx theme={null}
```mermaid placement="top-left"
flowchart LR
    A --> B
```
````

Combina las dos propiedades:

````mdx theme={null}
```mermaid placement="top-left" actions={true}
flowchart LR
    A --> B
```
````

<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í
```
````


## Related topics

- [Descripción general](/es/components/index.md)
- [Scripts personalizados](/es/customize/custom-scripts.md)