Diagrama de flujo
Mapea cualquier proceso, decisión o algoritmo
¿Qué es un Diagrama de flujo?
Un diagrama de flujo muestra los pasos de un proceso y las decisiones entre ellos. Es el diagrama más universal: flujos de onboarding, algoritmos, cadenas de aprobación, guías de resolución de problemas — si tiene pasos y elecciones, un diagrama de flujo puede mostrarlo.
Los diagramas de flujo aparecen allí donde un proceso debe consensuarse antes de construirse: RFC, runbooks, documentación de onboarding, guiones de soporte. Su punto fuerte son las ramificaciones — todos los caminos que puede tomar una petición, incluidos los que nadie previó. Su punto débil son el tiempo y la responsabilidad: un diagrama de flujo dice qué ocurre después, nunca quién lo hace ni cuánto tarda. Añade un subgraph por equipo, o cambia de tipo de diagrama.
Ejemplo en directo
flowchart TD
A([Start]) --> B{Payment valid?}
B -->|Yes| C[Reserve stock]
B -->|No| D[Show error]
C --> E{In stock?}
E -->|Yes| F[Confirm order]
E -->|No| G[Notify customer]
F --> H([Done])
D --> H
G --> HCuándo usarlo
Errores frecuentes
Un nodo llamado end rompe el análisis
La palabra end cierra un subgraph, así que un nodo que la use como identificador provoca un error de análisis, no un aviso. Cámbiale el identificador y pon la palabra en la etiqueta: done([End]).
Paréntesis sin comillas en una etiqueta
A[Pay (card)] falla porque Mermaid lee el paréntesis interior como otro delimitador de forma. Encierra toda la etiqueta entre comillas dobles — A["Pay (card)"] —, lo que también cubre comillas, almohadillas y puntos y coma.
Un enlace que cruza anula direction
direction LR dentro de un subgraph se ignora en cuanto un enlace empieza o termina en uno de sus nodos: el bloque vuelve a la dirección del diagrama. Apunta el enlace al identificador del subgraph y la dirección interna se conserva.
Sintaxis básica
flowchart TD
A[Rectangle] --> B{Decision}
B -->|Yes| C([Rounded])
B -->|No| D[(Database)]flowchart LRLa primera línea fija la dirección: TD o TB de arriba abajo, LR de izquierda a derecha, BT y RL a la inversa. Las cadenas largas se leen mejor en LR.
B -->|Yes| C B -.->|timeout| DUna etiqueta entre barras verticales explica por qué se toma una rama. Las flechas punteadas marcan los caminos excepcionales; las gruesas, escritas ==>, marcan el nominal.
A["Pay (card)"] --> B{{Route}}Los corchetes eligen la forma: [] rectángulo, {} decisión, () redondeado, {{}} hexágono, [()] base de datos. Entrecomilla cualquier etiqueta con paréntesis u otra puntuación de Mermaid.
subgraph payments [Payment service] direction LR P1 --> P2 endUn subgraph dibuja un recuadro con título alrededor de nodos afines — un servicio, un equipo, una fase. Su línea direction hace que ese bloque fluya en horizontal aunque la página baje.
Preguntas sobre este diagrama
¿Cuándo debo usar un diagrama de flujo en lugar de un diagrama de secuencia?
Usa un diagrama de flujo para la lógica de un proceso (pasos y decisiones). Usa un diagrama de secuencia cuando varios actores o sistemas intercambian mensajes a lo largo del tiempo.
¿Puede la IA generar un diagrama de flujo a partir de una descripción en texto?
Sí — describe el proceso en lenguaje natural («el usuario se registra, verifica su correo, luego…») y Mermaid Studio genera el diagrama de flujo completo, listo para editar.
¿GitHub renderiza los diagramas de flujo Mermaid en un README?
Sí. Pon el código en un bloque delimitado con la etiqueta mermaid y GitHub lo renderiza en READMEs, issues y pull requests; GitLab y Notion hacen lo mismo. Para herramientas sin soporte nativo, exporta en SVG o PNG.
¿Por qué Mermaid coloca mis nodos en un orden que yo no he elegido?
La disposición se calcula, no se escribe: la sintaxis no tiene coordenadas. Influye en ella cambiando la dirección, agrupando nodos en subgraphs, reordenando las declaraciones de enlaces o añadiendo un enlace invisible (A ~~~ B) para empujar un nodo hacia abajo.
¿Cuál es la diferencia entre graph y flowchart en Mermaid?
Las dos siguen siendo válidas en la v11. graph es la palabra clave original; flowchart apunta al renderizador más reciente y es la que usan la documentación y las formas nuevas. Para lo nuevo, usa flowchart.
¿Cómo doy color a cajas concretas de un diagrama de flujo?
De dos formas: style A fill:#eef,stroke:#66f para un solo nodo, o classDef warn fill:#fee seguido de class B,C warn para reutilizar un estilo en varios. Ambas viven en el código, así que los colores sobreviven a la exportación PNG y SVG.
¿Diagrama de flujo u otro tipo de diagrama?
¿Diagrama de flujo o diagrama de estados?
Pregúntate qué son las cajas. Si son acciones — verbos que alguien ejecuta —, acertarás con el diagrama de flujo. Si son situaciones en las que un mismo objeto espera un evento, usa estados. El ciclo de vida de un pedido son estados; la aprobación que lo rodea, un flujo.
¿Diagrama de flujo o mapa mental?
Un mapa mental es un árbol estricto: una sola raíz, un único padre por nodo, sin etiquetas en las ramas y sin bucles. En cuanto dos ramas deban converger, o una flecha necesite una condición escrita, el mapa mental se te queda pequeño.
Crea tu Diagrama de flujo ahora
Descríbelo en lenguaje natural — la IA escribe el código Mermaid por ti.
Abrir Mermaid Studio