Saltar al contenido principal
Mermaid 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.
Mermaid flowchart example
```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
```

​
Compatibilidad con el diseño ELK

Mintlify es compatible con el motor de diseño ELK (Eclipse Layout Kernel) 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:
ELK layout example
```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
```

​
Controles interactivos

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.

​
Propiedades

​
actions
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).
​
placement
string
predeterminado:"bottom-right"
Posición de los controles interactivos. Opciones: top-left, top-right, bottom-left, bottom-right.

​
Ejemplos

Ocultar los controles de un diagrama: 
```mermaid actions={false}
flowchart LR
    A --> B
```
Mostrar controles en la esquina superior izquierda: 
```mermaid placement="top-left"
flowchart LR
    A --> B
```
Combina las dos propiedades: 
```mermaid placement="top-left" actions={true}
flowchart LR
    A --> B
```

​
Sintaxis

Para crear un diagrama de Mermaid, escribe la definición del diagrama dentro de un bloque de código de Mermaid. 
```mermaid
// Tu código de diagrama mermaid aquí
```