TABLA DE CONTENIDOS
TABLA DE CONTENIDOS
Al registrarte, aceptas las Condiciones del Servicio y la Política de Privacidad de Miro.
Sintaxis de diagramas de flujo Mermaid: guía completa con ejemplos
Puntos clave: Un diagrama de flujo de Mermaid es un diagrama que escribes como texto en lugar de dibujar 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 funciona. Pasas veinte minutos en una herramienta para crear diagramas, consiguiendo que las cajas queden alineadas, que las flechas dejen de superponerse y que los colores luzcan 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 no ha sido cierto desde el último sprint.
Ese es el problema de tratar los diagramas como imágenes en lugar de código. Una imagen no se puede comparar automáticamente para ver los cambios, ni poner bajo control de versiones, ni generar por un agente de IA que acaba de leer tu base de código. Un diagrama de flujo de Mermaid sí puede.
¿Qué es un diagrama de flujo de Mermaid?
Un diagrama de flujo de Mermaid es un diagrama que defines usando sintaxis de texto plano en lugar de un lienzo de arrastrar y soltar. Escribes unas pocas líneas describiendo tus nodos y cómo se conectan, y Mermaid genera el diagrama automáticamente, incluyendo el diseño, las flechas y las formas.
Forma parte de Mermaid, una sintaxis 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 puede representarse como nodos y conexiones.
Mermaid ha ganado nuevo impulso recientemente por una razón sencilla: los modelos de IA lo escriben con fluidez. Pídele a un agente de codificación de IA que diagrame tu sistema, y hay una buena probabilidad de que te entregue la sintaxis de Mermaid, porque es el formato que más ha practicado. El texto también es más fácil de procesar para un modelo de lenguaje que una imagen bidimensional, por lo que un agente puede editar tu diagrama con precisión en lugar de redibujarlo por completo.
Sintaxis básica: dirección y declaración
Cada diagrama de flujo de Mermaid comienza con una palabra clave de dirección. Esa única línea determina 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 nombre y descriptivos (Start, Medium, End) se leen mucho mejor que letras sueltas cuando tu diagrama supera unos pocos pasos. Usa letras para bocetos rápidos y cambia a etiquetas reales para cualquier cosa que pienses compartir.
Formas de los nodos: la sintaxis de corchetes define la forma
Los corchetes que rodean el texto de un nodo determinan la forma que se mostrará. No eliges una forma desde un menú. Simplemente escribes los símbolos correctos y Mermaid se encarga del resto.
flowchart TD A[Rectangle] B(Rounded) C([Stadium]) D[[Subroutine]] E[(Cylindrical)] F((Circle)) G>Asymmetric]Algunas de estas formas se aplican a casos de uso concretos que vale la pena conocer. Usa un rectángulo [texto] para un paso estándar del proceso, una forma de estadio ([texto]) para un punto de inicio o final, y una subrutina [[texto]] cuando un nodo es 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 conviene 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, necesitan comillas alrededor de la etiqueta:
flowchart TDH{Rhombus} I{<!-- -->{Hexagon}} J["s3/"] K["s4!"] L(("s5?"))Conecta tus nodos
Una flecha muestra cómo un paso conduce al siguiente, y Mermaid te ofrece más de una variante según cuán sólida 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 distinto: --> es una flecha sólida estándar, --- es una línea sólida sin punta para una asociación más laxa, -.-> es una flecha punteada para rutas opcionales o asíncronas, y ==> es una flecha gruesa para señalar un camino crítico. Para etiquetar una flecha, usa cualquiera de los dos: -->|label| o -- label -->. Ambas funcionan igual. Y linkStyle, al apuntar a una flecha por su posición en el diagrama (0 para la primera, 1 para la segunda, y así sucesivamente), te permite recolorear 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 lugar de escribir cada par por separado:
flowchart tdA & B --> C & D %% multistyle A fill:#fff6b6 style B fill:#c6dcff style C fill:#edfaf2 style D fill:#ffc6c6Esa única línea hace el mismo trabajo que cuatro declaraciones de flechas separadas. Es algo pequeño, pero mantiene legible el código de un diagrama muy cargado.
Subgrafos: agrupar y anidar
Los sistemas reales tienen secciones: un frontend, un backend, un paso de pago que en realidad son tres pasos que fingen ser uno. Los subgrafos te permiten encerrar nodos relacionados en un mismo recuadro e incluso 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 que conviene recordar aquí. Primero, la dirección dentro de un subgrafo anula la dirección del diagrama de flujo principal, así que tu frontend puede ir de izquierda a derecha aun cuando el diagrama general vaya de arriba a abajo. Segundo, un subgrafo puede enlazarse como cualquier otro nodo; por eso el ejemplo frontend --> backend de arriba funciona aunque ambos lados sean cajas llenas de otras cajas.
Temas y directiva init
Si quieres que los colores de un diagrama de flujo coincidan con tu marca, con la severidad de un incidente o simplemente con 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 por qué ser estático. Puedes conectar un nodo para que abra un enlace, ejecute una función JavaScript o muestre un texto al pasar el cursor, lo cual resulta muy útil cuando tu diagrama sirve también como 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>El nodo A abre un enlace en una pestaña nueva. El nodo B ejecuta una función de JavaScript llamada callback y muestra el texto emergente "Tooltip." El nodo C abre un enlace relativo en la pestaña actual con su propio texto emergente. Verás este patrón con más frecuencia en la documentación interna, donde un nodo del diagrama enlaza directamente con el runbook o el ticket que representa.
Estilo: colores, clases y etiquetas Markdown
Los estilos puntuales funcionan para un solo nodo, pero se vuelven repetitivos rápidamente. classDef te permite definir un estilo una sola vez y reutilizarlo en todo tu diagrama, algo que importa en cuanto tu diagrama de flujo supera los 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 sintaxis abreviada D:::success. Ambas hacen lo mismo. Elige la que mantenga tu código más legible.
Para etiquetas más ricas, Mermaid también permite el formato básico de Markdown dentro de nodos y enlaces, 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")endUn ejemplo completo
Este flujo de inicio de sesión utiliza la mayoría de lo visto arriba en un solo diagrama: formas, subgraph, 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, subgrafo y el patrón classDef de las secciones anteriores, combinados en algo que usarías en el trabajo. La única forma nueva aquí es Iniciar sesión[/Introduce credenciales/], un paralelogramo que la convención de Mermaid suele usar para un paso de entrada. La verdadera habilidad al escribir Mermaid no es memorizar cada símbolo. Es saber qué pequeño conjunto de patrones cubre la mayoría de tus diagramas.
Consulta todos los ejemplos de sintaxis en nuestra Hoja de referencia de Mermaid para diagramas de flujo.
Mermaid en Miro: diagramas de flujo aún mejores
Escribir el código es solo la mitad del trabajo. Todavía tienes 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 en algún lugar y perdías la conexión entre el código y la imagen en cuanto alguien la tocaba.
Miro cierra esa brecha con Structured Diagrams with Mermaid, actualmente en Beta pública. Pega la sintaxis Mermaid en un tablero de Miro, o pídele a un agente de IA como Claude Code que genere un diagrama directamente desde tu base de código, y se representará como formas reales y editables de Miro, no como una imagen estática. El código Mermaid sigue siendo la fuente de la verdad: edita el diagrama visualmente y el código subyacente se actualiza, así que ambos nunca se desincronizan.
Eso importa por varias razones. Tu equipo puede trabajar directamente en el diagrama en lugar de hacerlo por fuera: deja un comentario directamente en un nodo en lugar de empezar un hilo paralelo en Slack, y todos permanecen 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, por ejemplo un registro de decisión de arquitectura, a partir de los comentarios de tu equipo, listo para abrirse como pull request. Además, no estás atascado con el diseño de otra persona. Cambia la dirección del flujo, ajusta los espacios o abre el panel de código y edita la sintaxis a mano, todo sin salir del tablero.
Los diagramas de flujo ya cuentan con 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 basados en código hasta que la edición visual los alcance.
Crea un diagrama de flujo Mermaid en Miro
- Abre la barra de creación, selecciona Formatos, luego Diagrama y haz clic en Crear con código.
- Pega la sintaxis de Mermaid que ya tienes, comienza desde una plantilla, o pide a tu agente de IA que genere un diagrama de flujo directamente desde tu repositorio de código o a partir de un conjunto de requisitos.
- Observa cómo se representa con formas nativas de Miro y un diseño automático, para que no tengas que mover las cajas 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 de Mermaid a mano.
- Invita a tu equipo a comentar directamente sobre el diagrama, justo donde se está tomando la decisión.
- Cuando termines, expórtalo como imagen, copia el código Mermaid de vuelta a 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, comienza desde una plantilla y aprende la sintaxis editando algo que ya funcione.
Más ejemplos de diagramas de flujo Mermaid para probar
No tienes que escribir tu primer diagrama de flujo Mermaid desde cero. Cada una de estas plantillas es un tablero Mermaid real que puedes abrir, leer y editar, de modo que aprendes la sintaxis cambiando algo que ya funciona en lugar de quedarte frente a un lienzo vacío.
Introducción a los diagramas Mermaid en Miro
Esta es la 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 los nodos, tipos de flecha y algunos ejemplos con estilos, 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 vista al instante. Ese ciclo de retroalimentación inmediato 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 usuario con código Mermaid
Esta plantilla te ofrece un flujo de inicio de sesión funcional ya listo: un usuario introduce las credenciales, la aplicación las verifica, y el diagrama se bifurca en un camino de éxito hacia el panel o en un camino de fallo que regresa a un reintento. Es similar en espíritu al ejemplo completo anterior en esta guía, y es una buena plantilla para usar si estás documentando cualquier tipo de autenticación, registro o flujo de aprobación con 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 plantilla es la que debes usar cuando tu diagrama deje de ser un flujo lineal simple. Está construida alrededor de los subgrafos, la misma técnica de agrupación que se explicó antes en esta guía, para que puedas encerrar servicios, APIs y almacenes de datos en secciones claramente etiquetadas, en lugar de dejar que cada nodo flote en un único diagrama plano. Es un buen punto de partida 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í, no solo lo que hace cada uno por separado.
Flujo de pedidos de comercio electrónico
Esta plantilla cubre todo el proceso de comercio electrónico: navegación por el catálogo, procesamiento de pagos, ejecución de pedidos en el backend y correos transaccionales automatizados.
Elige cualquiera de estas plantillas, sustituye 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 con Mermaid? Un diagrama de flujo con Mermaid es un diagrama definido en texto plano que utiliza 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, aplicando 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 agrega nodos y flechas, por ejemplo A[Start] --> B[End]. Agrega formas con corchetes, etiquetas en las flechas con -->|label|, y agrupa pasos relacionados con subgraph.
¿Puedo aplicar estilos a un diagrama de flujo con 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 establecer 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, y Miro la convierte en 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 reales y editables, mantiene el código y el diagrama sincronizados cuando cualquiera de los dos cambia, y permite que agentes de IA generen diagramas o los lean a través del 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
