Diagramas de flujo Mermaid: nodos, decisiones, etiquetas y dirección

Un diagrama de flujo Mermaid es un modelo textual de nodos y conexiones. La primera línea selecciona el tipo y la dirección: flowchart TD va de arriba abajo y flowchart LR de izquierda a derecha. Elige según la historia que cuenta, no solo por el espacio disponible.

Separa la identidad del nodo de su etiqueta

Usa un ID breve y estable, y coloca el texto legible entre corchetes:

flowchart LR
  request[Recibir solicitud] --> validate{¿Entrada válida?}
  validate -->|Sí| process[Procesar pedido]
  validate -->|No| reject[Devolver errores]

Las conexiones usan validate; su etiqueta puede cambiar sin reescribirlas. Los ID estables también facilitan estilos y revisiones de diferencias.

Etiqueta las ramas de decisión

Un rombo sin etiquetas obliga a adivinar. Añade etiquetas breves con -->|Etiqueta| y usa una terminología consistente. Mezclar true/false, sí/no y éxito/error para decisiones equivalentes aumenta el esfuerzo mental.

Usa subgráficos para representar límites

flowchart LR
  subgraph Navegador
    edit[Editar código] --> render[Renderizar diagrama]
  end
  subgraph AlmacenamientoLocal
    draft[(Borrador)]
  end
  edit --> draft

Los límites son útiles cuando expresan responsabilidad, confianza, despliegue o ciclo de vida. No envuelvas cada pareja de nodos en un subgráfico.

Evita sorpresas comunes del analizador

Parte de un diagrama mínimo y añade una sentencia cada vez. Entrecomilla etiquetas con puntuación si se interpretan como sintaxis. En diagramas de flujo, end en minúsculas tiene una función especial; usa mayúscula u otra etiqueta. Vigila también o o x justo después de ciertas conexiones, porque pueden seleccionar terminaciones especiales.

Diseña pensando en el cambio

Divide una visión general y los procesos detallados, reduce cruces y mantén el mismo nivel de abstracción. Prueba y exporta el código con el editor Mermaid local, que verifica exactamente la versión incluida en el sitio.