DotMDCómo escribir un diagrama de flujo de Mermaid:una dirección, nodos y flechas.
Un diagrama de flujo de Mermaid es texto en un bloque de código: nombras los nodos, los conectas con flechas y el diagrama se dibuja solo. Aquí tienes la sintaxis con ejemplos para copiar.
macOS 14 o posterior. Leer es gratis; editar y revisar se pagan una sola vez.
Respuesta rápida
Abre un bloque de código marcado como mermaid, escribe flowchart y una dirección, y lista los enlaces entre nodos. TD dibuja de arriba abajo y LR de izquierda a derecha. Una caja es [text], una decisión es {text} y --> es una flecha.
```mermaid
flowchart LR
A[Write spec] --> B{Approved?}
B -->|Yes| C[Build]
B -->|No| A
```·
Dirección
La primera línea nombra el tipo de diagrama y la dirección. Funcionan tanto flowchart como el antiguo graph.
TDoTB: de arriba abajoBT: de abajo arribaLR: de izquierda a derechaRL: de derecha a izquierda
Elige LR para un proceso corto que cabe en el ancho de una página y TD para uno más largo.
Formas de los nodos
Un nodo es un id, seguido opcionalmente de su texto entre corchetes. Los corchetes eligen la forma:
flowchart LR
a[Rectangle]
b(Rounded)
c([Stadium])
d[[Subroutine]]
e[(Database)]
f((Circle))
g{Decision}
h{{Hexagon}}
i[/Parallelogram/]Un nodo sin corchetes solo muestra su id. Puedes volver a mencionar un nodo más adelante solo por su id, así que la forma y el texto se escriben una vez.
Enlaces y etiquetas
Los enlaces unen dos nodos. La forma de la flecha indica el tipo de conexión:
flowchart LR
A --> B
B --- C
C -.-> D
D ==> E
E -->|label| F
F -- text --> G-->una flecha,---una línea sin punta-.->una flecha de puntos,==>una gruesa-->|label|o-- label -->pone texto en el enlaceA --> B & Cenlaza un nodo con varios, yA --> B --> Cencadena enlaces
Añade guiones para alargar un enlace, por ejemplo ---->, cuando un nodo necesite más espacio.
Subgrafos
Un subgrafo agrupa nodos en una caja con título. Empieza con subgraph y termina con end:
flowchart TD
subgraph client [Client]
A[Browser] --> B[App]
end
subgraph server [Server]
C[API] --> D[(Database)]
end
B --> CLa palabra entre corchetes es el título, y la que va antes es el id al que puedes enlazar. Un subgrafo puede tener su propia línea direction LR dentro, aunque la dirección se ignora si un nodo de dentro se enlaza con algo de fuera.
Un ejemplo completo
Juntándolo todo, aquí tienes un pequeño proceso de publicación con una decisión, una vuelta atrás y un paso agrupado:
flowchart TD
A([Start]) --> B[Write the change]
B --> C{Tests pass?}
C -->|No| B
C -->|Yes| D[Open a pull request]
subgraph review [Review]
D --> E{Approved?}
E -->|No| B
end
E -->|Yes| F[(Merge)]Léelo de arriba abajo: la forma de estadio marca el inicio, los rombos son preguntas, las flechas con etiqueta son las respuestas y la caja alrededor de dos nodos es la revisión. Nombrar cada decisión como una pregunta y cada flecha como su respuesta hace que un diagrama de flujo se lea sin explicación.
Comentarios y estilos
Una línea que empieza con %% es un comentario y no se dibuja. Para colorear nodos, define una clase y aplícala:
flowchart TD
%% the happy path
A[Start]:::good --> B[Done]:::good
classDef good fill:#d4f4dd,stroke:#2d7a46Mantén el estilo sobrio. La mayoría de los diagramas de flujo se leen mejor con menos colores, y los estilos pueden verse distintos en los temas claro y oscuro.
Errores habituales
- La palabra end en minúsculas como texto de un nodo rompe el diagrama. Escribe
Endo pon el texto entre comillas. - Un id de nodo que empieza por o o x justo después de un enlace, como
A---oB, se lee como un enlace de círculo o de cruz. Añade un espacio o ponlo en mayúscula. - Caracteres especiales en una etiqueta. Los corchetes, los paréntesis y los dos puntos necesitan comillas dobles:
A["Save (draft)"]. - Falta la primera línea. Sin
flowchart TDno se dibuja nada. - Demasiados nodos. Un diagrama de flujo con treinta cajas es difícil de leer. Divídelo o usa subgrafos.
Cuando un diagrama falla, Mermaid muestra un mensaje de error y el texto se queda en tu archivo para corregirlo.
Dibujarlo
GitHub dibuja los bloques de Mermaid en archivos Markdown, y DotMD también: sin conexión, en tema claro u oscuro para que coincida con la página. En el editor, Insert → Diagram pone un diagrama de flujo funcional en el documento y la vista previa se redibuja mientras escribes. La misma guía cubre los diagramas de secuencia, de clases, de estados, ER y de Gantt. Para la sintaxis de los delimitadores, consulta los bloques de código en Markdown.
Preguntas sobre los diagramas de flujo de Mermaid
¿Cómo escribo un diagrama de flujo en Mermaid?
Abre un bloque de código mermaid con flowchart TD (o LR) y añade enlaces como A[Start] --> B[End], uno por línea.
¿Qué diferencia hay entre TD y LR en un diagrama de flujo de Mermaid?
TD (top down, igual que TB) dibuja el diagrama de arriba abajo, y LR de izquierda a derecha.
¿Cómo añado texto a una flecha en Mermaid?
Ponlo entre barras verticales después de la flecha, A -->|Yes| B, o entre los guiones, A -- Yes --> B.
¿Por qué mi diagrama de flujo de Mermaid muestra un error?
Las causas habituales son un end en minúsculas en una etiqueta, que falte la primera línea o caracteres especiales en una etiqueta sin comillas dobles.