Diagrama de Flujo Mermaid

Sintaxis de Diagrama de Flujo Mermaid

Los diagramas de flujo son el tipo de diagrama Mermaid más utilizado. Mapean procesos, árboles de decisión y flujos de sistema usando nodos conectados por bordes. La sintaxis se lee como una descripción del grafico: define nodos con sus formas, conectalos con flechas y, opcionalmente, agrupalos en subgrafos.

Dirección

La primera línea establece la dirección general del flujo:

flowchart TD    %% arriba a abajo (por defecto)
flowchart LR    %% izquierda a derecha
flowchart RL    %% derecha a izquierda
flowchart BT    %% abajo a arriba

Elige LR para flujos de proceso horizontales (líneas de tiempo, tuberias). Elige TD para jerarquias verticales (organigramas, árboles de decisión).

Formas de Nodos

Tipos de Borde

A --> B        %% flecha recta
A --- B        %% línea recta, sin flecha
A -.-> B       %% flecha punteada
A ==> B        %% flecha gruesa
A -->|etiqueta| B %% flecha con etiqueta

Subgrafos

Agrupa visualmente nodos relacionados:

flowchart LR
    subgraph Backend
        direction TB
        API --> DB
        API --> Cache
    end
    subgraph Frontend
        UI --> API
    end

Estilos

Aplica clases CSS o estilos en línea a nodos individuales:

flowchart TD
    A[Critico] --> B[Normal]
    style A fill:#f43f5e,color:#fff,stroke:#e11d48
    classDef success fill:#10b981,color:#fff
    B:::success

Patrones Practicos

Árbol de decisión

flowchart TD
    Inicio --> S1{Presupuesto > $1000?}
    S1 -- Si --> S2{Necesita velocidad?}
    S1 -- No --> Presupuesto[Plan gratuito]

Tuberia

flowchart LR
    Fuente --> Compilar --> Probar --> Desplegar --> Monitorear

Necesitas documentar el flujo de una API? El Diagrama de Secuencia Mermaid está diseñado para interacciones de solicitud/respuesta.