Chuleta de sintaxis de Mermaid para diagramas de flujo

Dirección

La primera línea fija el tipo y la dirección:

• flowchart TD o flowchart TB: de arriba abajo
• flowchart LR: de izquierda a derecha
• flowchart BT y flowchart RL: en sentido inverso

La palabra clave antigua graph sigue funcionando, pero la actual es flowchart.

Formas de los nodos

Un nodo es un identificador seguido de una forma. El identificador se usa en las flechas; el texto es lo que se muestra.

flowchart TD
  A[Rectángulo: un paso]
  B(Rectángulo redondeado)
  C([Estadio: inicio o fin])
  D[[Subrutina: proceso predefinido]]
  E[(Base de datos)]
  F((Círculo))
  G{Rombo: ¿una decisión?}
  H{{Hexágono}}
  I[/Paralelogramo: entrada o salida/]

Se corresponden bastante con los símbolos clásicos del diagrama de flujo: estadio para inicio y fin, rectángulo para los pasos, rombo para las decisiones y paralelogramo para entradas y salidas.

Flechas y etiquetas

• A --> B: flecha
• A --- B: línea sin punta
• A -.-> B: flecha punteada
• A ==> B: flecha gruesa
• A -->|Sí| B o A -- Sí --> B: flecha con etiqueta
• A --> B --> C: encadenar
• A & B --> C: varios orígenes a la vez

Identificadores y etiquetas

Usa identificadores cortos y estables (revisar, pagar) y pon la etiqueta legible entre corchetes. Así, cambiar el texto de un nodo nunca rompe las flechas que apuntan a él.

Caracteres especiales y acentos

Las tildes y la ñ funcionan sin problema. Pon el texto entre comillas dobles cuando contenga corchetes, paréntesis u otros símbolos: A["Revisión (manual)"]. Dentro de las comillas, una comilla doble se escribe #quot;.

Comentarios

Las líneas que empiezan por %% se ignoran: %% PENDIENTE: añadir la rama de reembolso.

Errores habituales

• La palabra «end» en minúsculas como texto de un nodo puede romper el diagrama, porque end cierra los subgrafos. Escríbela con mayúscula o entre comillas.
• Identificadores que empiezan por «o» o «x» justo después de un enlace, como A---oB, crean terminaciones en círculo o en cruz. Añade un espacio o cambia el nombre del nodo.
• Paréntesis o corchetes sin comillas en el texto confunden al analizador.
• Reutilizar un identificador con otra forma: manda la primera declaración.

Un ejemplo completo

flowchart TD
  inicio([Solicitud de devolución]) --> fecha[Soporte revisa la fecha del pedido]
  fecha --> antiguo{¿Más de 30 días?}
  antiguo -->|Sí| rechazar[Rechazar e informar al cliente]
  antiguo -->|No| pagar[Finanzas reembolsa]
  rechazar --> fin([Fin])
  pagar --> fin

Para agrupar los pasos por equipo, sigue con subgrafos y estilos. Para publicar el resultado, consulta Mermaid en GitHub y GitLab.