mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify[bot]
4b465465dd
Generated-By: mintlify-agent Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com>
141 lines
4.1 KiB
Plaintext
141 lines
4.1 KiB
Plaintext
---
|
|
title: "Mermaid"
|
|
description: "Crea diagramas de flujo, diagramas de secuencia y otras visualizaciones en tu documentación utilizando la sintaxis de Mermaid con renderizado automático."
|
|
keywords: ["Mermaid", "flowcharts", "diagrams"]
|
|
boost: 3
|
|
---
|
|
|
|
[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"
|
|
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
|
|
```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
|
|
```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
|
|
```mermaid actions={false}
|
|
flowchart LR
|
|
A --> B
|
|
```
|
|
````
|
|
|
|
Mostrar controles en la esquina superior izquierda:
|
|
|
|
````mdx
|
|
```mermaid placement="top-left"
|
|
flowchart LR
|
|
A --> B
|
|
```
|
|
````
|
|
|
|
Combina las dos propiedades:
|
|
|
|
````mdx
|
|
```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
|
|
```mermaid
|
|
// Tu código de diagrama mermaid aquí
|
|
```
|
|
````
|