TABLA DE CONTENIDOS
TABLA DE CONTENIDOS
Sintaxis de diagramas de flujo de Mermaid: guía completa con ejemplos
Puntos clave: Un diagrama de flujo Mermaid es un diagrama que escribes como texto en lugar de dibujarlo a mano. Escribes algo como A --> B, y Mermaid genera dos cuadros conectados. Esta guía cubre todas las partes de la sintaxis, desde las formas básicas de los nodos hasta los estilos y los eventos de clic, además de cómo convertir ese código en un diagrama real y editable en Miro.
Tu diagrama de flujo ya está desactualizado
Ya sabes cómo va. Pasas veinte minutos en una herramienta de diagramas ajustando las cajas para que queden alineadas, evitando que las flechas se superpongan y haciendo que los colores parezcan intencionales. Lo exportas, lo subes al wiki y sigues con tu trabajo. Tres semanas después, el proceso cambió y nadie actualizó la imagen. Ahora la "fuente de la verdad" es una captura de pantalla de algo que dejó de ser cierto desde el último sprint.
Ese es el problema de tratar los diagramas como imágenes en lugar de código. Una imagen no puede compararse con un diff, ni ponerse bajo control de versiones, ni generarse por un agente de IA que acaba de leer tu repositorio de código. Un diagrama de flujo Mermaid sí puede.
¿Qué es un diagrama de flujo Mermaid?
Un diagrama de flujo Mermaid es un diagrama de flujo que defines usando sintaxis en texto plano en lugar de un lienzo de arrastrar y soltar. Escribes unas líneas que describen tus nodos y cómo se conectan, y Mermaid genera el diagrama automáticamente, con el diseño, las flechas y las formas.
Forma parte de Mermaid, una sintaxis de creación de diagramas de código abierto que también abarca diagramas de secuencia, diagramas de clases, cronogramas y muchos otros tipos de diagramas. Los diagramas de flujo son los más comunes, y con razón: casi cualquier proceso, árbol de decisiones o flujo de trabajo se puede representar como nodos y conexiones.
Mermaid ha cobrado nuevo impulso recientemente por una razón sencilla: los modelos de IA la escriben con fluidez. Pídele a un agente de IA que diagrame tu sistema y es muy probable que te entregue sintaxis de Mermaid, porque es el formato que más han practicado. Además, al modelo de lenguaje le resulta más fácil razonar sobre texto que sobre una imagen bidimensional, por lo que un agente puede hacer una edición precisa en tu diagrama en lugar de redibujarlo todo desde cero.
Sintaxis básica: dirección y declaración
Todo diagrama de flujo de Mermaid comienza con una palabra clave de dirección. Esa única línea decide si tu diagrama se lee de arriba hacia abajo o de izquierda a derecha, y es lo primero que escribirás siempre.
- TD o TB: de arriba hacia abajo
- BT: de abajo hacia arriba
- LR: de izquierda a derecha
- RL: de derecha a izquierda
flowchart TD A --> B B --> C style A fill:#fff6b6 style B fill:#fff6b6 style C fill:#fff6b6
flowchart LR Start --> Medium Medium --> End style A fill:#fff6b6 style B fill:#fff6b6 style C fill:#fff6b6Los nodos con nombres descriptivos (Start, Medium, End) se leen mucho mejor que las letras sueltas cuando tu diagrama supera unos pocos pasos. Usa letras para bocetos rápidos y cambia a etiquetas reales para cualquier cosa que vayas a compartir.
Formas de nodo: la sintaxis de corchetes define la forma
Los corchetes que rodean el texto del nodo determinan qué forma tendrá. No eliges la forma desde un menú. Simplemente escribe los símbolos correctos y Mermaid hace el resto.
flowchart TD A[Rectangle] B(Rounded) C([Stadium]) D[[Subroutine]] E[(Cylindrical)] F((Circle)) G>Asymmetric]Algunas de estas formas corresponden a casos de uso específicos que conviene conocer. Usa un rectángulo [texto] para un paso estándar del proceso, una forma tipo estadio ([texto]) para un punto de inicio o fin, y una subrutina [[texto]] cuando un nodo sea en realidad una llamada a un proceso separado y definido. Usa un cilindro [(texto)] cuando representes una base de datos o un almacén de datos, y un círculo ((texto)) para un punto único y autónomo en el flujo.
Mermaid incluye algunas formas más que vale la pena conocer, como el rombo para decisiones y el hexágono para pasos de preparación. Los caracteres especiales, como las barras o los signos de interrogación, requieren comillas alrededor de la etiqueta:
flowchart TDH{Rhombus} I{<!-- -->{Hexagon}} J["s3/"] K["s4!"] L(("s5?"))Conecta tus nodos con enlaces y flechas
Una flecha te muestra cómo un paso conduce al siguiente, y Mermaid te ofrece varias opciones según qué tan fuerte u opcional sea esa conexión.
flowchart tdA --> B %% solid arrowA --- B %% solid lineA -.-> B %% dottedA ==> B %% thickA -->|label| B %% with textA -- text --> B %% alt labelstyle A fill:#e7e7e7style B fill:#c6dcff linkStyle 5 stroke:#bd0a0a linkStyle 4 color:#bd0a0a,stroke:#6631d7Cada una indica algo diferente: --> es una flecha sólida estándar, --- es una línea sólida sin punta de flecha para una asociación más suelta, -.-> es una flecha punteada para rutas opcionales o asíncronas, y ==> es una flecha gruesa para marcar una ruta crítica. Para etiquetar una flecha, usa -->|label| o -- label -->. Ambos hacen lo mismo. Y linkStyle, al apuntar a una flecha según su posición en el diagrama (0 para la primera, 1 para la segunda y así sucesivamente), te permite cambiar el color de una conexión específica en lugar de todas las flechas del tablero.
También puedes conectar varios nodos en una sola línea en vez de escribir cada par:
flowchart tdA & B --> C & D %% multistyle A fill:#fff6b6 style B fill:#c6dcff style C fill:#edfaf2 style D fill:#ffc6c6Esa sola línea hace el mismo trabajo que cuatro instrucciones de flecha separadas. Es algo pequeño, pero mantiene legible el código de un diagrama muy cargado.
Agrupa y anida con subgrafos
Los sistemas reales tienen secciones: un frontend, un backend y un paso de pago que en realidad son tres pasos fingiendo ser uno. Los subgrafos te permiten encerrar nodos relacionados y hasta darle a ese recuadro su propia dirección de flujo interna.
flowchart TB subgraph frontend direction LR UI --> API end subgraph backend API --> DB end frontend --> backendDos cosas para recordar aquí. Primero, la dirección dentro de un subgrafo anula la dirección del diagrama de flujo padre, por lo que tu frontend puede ir de izquierda a derecha aun cuando el diagrama general vaya de arriba a abajo. Segundo, un subgrafo se puede enlazar como cualquier otro nodo; por eso, en el ejemplo de arriba, frontend --> backend funciona aunque ambos lados sean cajas que contienen otras cajas.
Temas y directivas %%{init}%%
Si quieres que los colores de un diagrama de flujo reflejen tu marca, la gravedad de un incidente o simplemente tu gusto, una directiva %%{init}%% te permite definirlos antes de dibujar un solo nodo. Debe ir en la primera línea de tu diagrama.
%%{init: { "theme": "base", "themeVariables": { "primaryColor": "#ADF0C7", "primaryTextColor": "#067429", "edgeLabelBackground": "#FFFEEE", "lineColor": "#36352F" }}}%%flowchart LR A[Start] --> B{Choice} B -->|yes| C[Done] B -->|no| D[Retry]Mermaid incluye cinco temas integrados: default, dark, forest, neutral y base. Solo base te da acceso al objeto themeVariables completo, así que si quieres colores personalizados en lugar de una paleta predeterminada, ese es el tema con el que debes empezar.
Interacción: eventos de clic y devoluciones de llamada
Un diagrama de flujo no tiene que ser estático. Puedes configurar un nodo para que abra un enlace, ejecute una función JavaScript o muestre un texto de ayuda al pasar el cursor, lo cual resulta útil cuando tu diagrama también hace las veces de documentación.
flowchart TD A[Visit Miro] B[Hover Tooltip] C[Open Docs] click A "https://miro.com" _blank click B callback "Tooltip" click C href "/docs" "Open docs"%% JS callback%% <script>%% const callback = (id) =>%% alert('Clicked ' + id);%% </script>Nodo A abre un enlace en una pestaña nueva. Nodo B ejecuta una función JavaScript llamada "callback" y muestra el texto al pasar el cursor "Tooltip." Nodo C abre un enlace relativo en la pestaña actual con su propio texto al pasar el cursor. Verás este patrón con más frecuencia en la documentación interna, donde un nodo del diagrama enlaza directamente al runbook o al ticket que representa.
Estilos: colores, clases y etiquetas Markdown
Los estilos puntuales funcionan bien para un solo nodo, pero pronto se vuelven repetitivos. classDef te permite definir un estilo una sola vez y reutilizarlo en todo tu diagrama, lo cual importa en cuanto tu diagrama de flujo tenga más de cinco o seis nodos.
flowchart LR A[Node A] B[Node B] C[Node C] D[Node D] --> E[Node E] %% Inline style style A fill:#f9f,stroke:#333,stroke-width:2px %% Reusable class definition classDef error fill:#fdd,stroke:#c00,color:#900 classDef success fill:#dfd,stroke:#0a0 %% Assign class class A,B error class C success %% Shorthand class assignment D:::success --> E:::errorPuedes asignar una clase de dos maneras: con class A,B error en su propia línea, o en línea con la forma abreviada D:::success. Ambas hacen lo mismo. Elige la que mantenga tu código más legible.
Para etiquetas más detalladas, Mermaid también admite formato básico de markdown dentro de nodos y aristas, siempre que primero deshabilites las etiquetas HTML:
---config: htmlLabels: false---flowchart LRsubgraph "One" a("`The **cat** in the hat`") -- "edge label" --> b{<!-- -->{"`The **dog** in the hog`"}}endsubgraph "`**Two**`" c("`The **cat** in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog")endIntegrándolo todo: ejemplo completo
Este flujo de inicio de sesión usa la mayor parte de lo explicado arriba en un solo diagrama: formas, subgráficos, clases de estilo, un bucle de reintento y un evento de clic.
flowchart TD Start((Start)) --> Login[/Enter creds/] Login --> Check{Valid?} Check -->|yes| Home[Dashboard]:::ok Check -->|no| Err[Show error]:::bad Err -.retry.-> Login Home ==> Logout([Logout]) subgraph auth direction LR Login --> Check end classDef ok fill:#dfd,stroke:#0a0 classDef bad fill:#fdd,stroke:#c00 click Home "/dashboard" _selfFíjate en lo poco que hay de nuevo. Son las mismas formas, flechas, subgraph y el patrón classDef de las secciones anteriores, combinados en algo que usarías en el trabajo real. La única forma nueva aquí es Login[/Enter creds/], un paralelogramo, que por convención de Mermaid suele usarse para un paso de entrada. La verdadera habilidad al escribir Mermaid no es memorizar cada símbolo. Es saber qué pocos patrones cubren la mayoría de tus diagramas.
Consulta todos los ejemplos de sintaxis en nuestra Hoja de referencia de Mermaid para diagramas de flujo.
Dónde los diagramas de flujo de Mermaid mejoran con Miro
Escribir el código es la mitad del trabajo. Alguien aún tiene que revisarlo, cuestionar una decisión y actualizarlo cuando el proceso cambie. Ahí es donde Mermaid solía quedarse corto: generabas un diagrama, pegabas una captura de pantalla en algún lugar y la conexión entre el código y la imagen se perdía en cuanto alguien la modificaba.
Miro cierra esa brecha con Structured Diagrams with Mermaid, actualmente en Beta pública. Pega la sintaxis de Mermaid en un tablero de Miro, o pídele a un agente de IA como Claude Code que genere uno directamente desde tu base de código, y se convierte en formas reales y editables de Miro, no en una imagen estática. El código Mermaid sigue siendo la fuente de la verdad: edita el diagrama de forma visual y el código subyacente se actualiza, así nunca se desincronizan.
Eso importa por varias razones. Tu equipo puede trabajar en el diagrama juntos en lugar de alrededor de él: comentar directamente en un nodo en vez de iniciar un hilo aparte en Slack, y todos se mantienen en el contexto de la decisión real. Como el diagrama sigue siendo Mermaid bajo el capó, un agente de IA puede leerlo, hacer una edición puntual o redactar un documento, como un registro de decisiones de arquitectura, a partir de los comentarios de tu equipo, listo para abrirse como un pull request. Y no estás atascado con el diseño de otra persona. Cambia la dirección del flujo, ajusta el espaciado o abre el panel de código y edita la sintaxis a mano, todo sin salir del tablero.
Los diagramas de flujo ya disfrutan de la experiencia completa de edición visual. Los diagramas de secuencia, de clases y de entidad-relación también se representan como formas nativas, pero por ahora trátalos como primariamente basados en código hasta que la edición visual los alcance.
Crea un diagrama de flujo con Mermaid en Miro
- Abre la barra de creación, selecciona Formatos, luego Diagrama y haz clic en Construir con código.
- Pega la sintaxis Mermaid que ya tengas, empieza desde una plantilla o pídele a tu agente de IA que genere un diagrama de flujo directamente desde tu repositorio o a partir de un conjunto de requisitos.
- Observa cómo se renderiza como formas nativas de Miro con un diseño automático, para que no tengas que mover las formas a mano para evitar que las líneas se crucen.
- Abre el diagrama en modo sin distracciones para editarlo directamente: haz clic en una forma para cambiar su etiqueta o estilo, ajusta la dirección del flujo, o abre el panel de código y edita la sintaxis Mermaid a mano.
- Invita a tu equipo a comentar directamente en el diagrama, justo donde se está tomando la decisión.
- Cuando termines, expórtalo como imagen, copia el código Mermaid de vuelta en tu repositorio o permite que tu agente lea el diagrama y los comentarios de tu equipo a través del servidor MCP de Miro.
Si ya conoces Mermaid, puedes empezar a escribir directamente en el panel de código. Si no, parte de una plantilla y aprende la sintaxis editando algo que ya funciona.
Más ejemplos de diagramas de flujo Mermaid para probar
No tienes que crear tu primer diagrama de flujo Mermaid desde cero. Cada una de estas plantillas es un tablero Mermaid real que puedes abrir, leer y editar, así que aprendes la sintaxis cambiando algo que ya funciona en lugar de mirar un lienzo vacío.
Introducción a los diagramas Mermaid en Miro
Este es el que debes abrir primero si nunca has escrito una línea de Mermaid. Recorre la sintaxis al ritmo de esta guía: palabras clave de dirección, formas de nodo, tipos de flechas y algunos ejemplos con estilo, cada uno acompañado de su diagrama renderizado justo al lado del código. Como es un tablero en vivo y no una página de referencia estática, puedes cambiar la etiqueta de un nodo o intercambiar una forma y ver cómo se actualiza la representación de inmediato. Esa retroalimentación inmediata es la forma más rápida de aprender qué hace realmente cada símbolo, en lugar de memorizar una tabla de sintaxis.
Flujo de autenticación de usuarios con código Mermaid
Este te ofrece un flujo de inicio de sesión ya funcional: un usuario ingresa sus credenciales, la app las verifica y el diagrama se bifurca hacia la ruta de éxito (el panel) o hacia la ruta de fallo para reintentar. Es similar al ejemplo completo que viste antes en esta guía, y es una buena plantilla si estás documentando cualquier tipo de flujo de autenticación, registro o aprobación que incluya un paso de validación en el medio. Cambia las etiquetas de los nodos y la lógica de ramificación por las tuyas, y tendrás tu propio diagrama de autenticación sin tocar el diseño.
Arquitectura técnica de microservicios
Esta es la plantilla a la que recurrir cuando tu diagrama supera un flujo lineal simple. Se basa en subgráficos, la misma técnica de agrupación que vimos antes en esta guía, para que puedas agrupar servicios, APIs y almacenes de datos en secciones claramente etiquetadas en lugar de dejar todos los nodos flotando en un único diagrama plano. Es un punto de partida sólido para la documentación de incorporación, las revisiones de arquitectura o cualquier diagrama en el que necesites mostrar cómo varios servicios se comunican entre sí, y no solo qué hace cada uno por separado.
Flujo de pedidos de comercio electrónico
Esta plantilla representa todo el proceso de comercio electrónico: navegación por el catálogo, procesamiento de pagos, cumplimiento en el backend y correos transaccionales automatizados.
Usa cualquiera de estas plantillas, reemplaza los pasos por los tuyos y tendrás un diagrama de flujo funcional en minutos, en lugar de empezar desde un lienzo en blanco.
Preguntas frecuentes
¿Qué es un diagrama de flujo de Mermaid? Un diagrama de flujo de Mermaid es un diagrama de flujo definido en texto plano usando la sintaxis de Mermaid en lugar de dibujarlo a mano. Describe los nodos y las flechas que los conectan, y Mermaid genera el diagrama automáticamente, incluyendo el diseño y las formas.
¿Cómo creo un diagrama de flujo con Mermaid? Empieza con una palabra clave de dirección como flowchart TD, luego añade nodos y flechas, por ejemplo A[Start] --> B[End]. Añade formas con corchetes, etiquetas en las flechas con -->|label|, y agrupa los pasos relacionados con subgraph.
¿Puedo aplicar estilo a un diagrama de flujo de Mermaid? Sí. Usa estilo en línea para cambios puntuales, classDef y class para estilos reutilizables en varios nodos, y la directiva %%{init}%% al inicio del diagrama para configurar un tema y colores personalizados.
¿Cómo uso los diagramas de flujo Mermaid en Miro? Abre la Barra de creación, elige Formatos, luego Diagrama y selecciona Crear con código. Pega tu sintaxis Mermaid o pídele a un agente de IA que la genere; Miro la renderiza como un diagrama nativo editable que puedes personalizar, comentar y compartir.
¿Qué ofrece Miro para los diagramas de flujo Mermaid? Structured Diagrams with Mermaid de Miro convierte el código Mermaid en formas nativas y editables, mantiene sincronizados el código y el diagrama cuando cualquiera de los dos cambia, y permite que agentes de IA generen o lean diagramas mediante el servidor MCP de Miro.
Pruébalo
La forma más rápida de aprender la sintaxis de diagramas de flujo Mermaid es escribir uno y ver cómo se renderiza. Abre el editor de diagramas Mermaid en Miro, pega uno de los ejemplos anteriores y empieza a modificarlo hasta que refleje tu proceso real.
Leer más
Empieza en segundos
