Definición básica
Un diagrama de flujo se compone de nodos (formas geométricas) y líneas de conexión (flechas o líneas). El código de Mermaid define cómo se construyen los nodos y las líneas de conexión, y admite varios tipos de flechas, flechas multidireccionales y enlaces arbitrarios con subgrafos.
Advertencia Si usas la palabra "end" en un nodo del diagrama de flujo, escribe con mayúscula la primera letra o toda la palabra (por ejemplo: "End" o "END"); si escribes "end" todo en minúsculas, el diagrama de flujo dará error.
Advertencia Si al conectar nodos del diagrama de flujo usas la letra "o" o "x" como primera letra, añade un espacio delante de la letra o escribe la letra en mayúscula (por ejemplo: "dev--- ops", "dev---Ops").
Un nodo (predeterminado)
Copiar
Insertar
---
title: Node
---
flowchart LR
id
id es el contenido que se muestra en el recuadro.
En la sintaxis de creación de diagramas de flujo, además de usar flowchart, también puedes usar graph.
Un nodo con texto
También puedes establecer para el recuadro un texto distinto del id. Si lo haces varias veces, el sistema tomará el último texto especificado para ese nodo. Además, si más adelante defines una línea de conexión para el nodo, puedes omitir la definición del texto; al renderizar el recuadro se usará el texto definido anteriormente.
Copiar
Insertar
---
title: Node with text
---
flowchart LR
id1[This is the text in the box]
Texto Unicode
Usa comillas dobles para encerrar el texto Unicode.
Copiar
Insertar
flowchart LR
id["This ❤ Unicode"]
Formato Markdown
Usa comillas dobles y comillas invertidas para encerrar el texto Markdown
Copiar
Insertar
flowchart LR
markdown["`This **is** _Markdown_`"]
newLines["`Line1
Line 2
Line 3`"]
markdown --> newLines
Dirección
Declara la dirección del diagrama de flujo
Indica que el diagrama de flujo se ordena de arriba hacia abajo (TD o TB)
Copiar
Insertar
flowchart TD
Start --> Stop
Las direcciones del diagrama de flujo incluyen:
- TB - de arriba hacia abajo
- TD - de arriba hacia abajo (igual que de arriba hacia abajo)
- BT - de abajo hacia arriba
- RL - de derecha a izquierda
- LR - de izquierda a derecha
Forma del nodo
Rectángulo redondeado
Copiar
Insertar
flowchart LR
id1(This is the text in the box)
Forma de estadio
Copiar
Insertar
flowchart LR
id1([This is the text in the box])
Subgrafo
Copiar
Insertar
flowchart LR
id1[[This is the text in the box]]
Base de datos
Copiar
Insertar
flowchart LR
id1[(Database)]
Círculo
Copiar
Insertar
flowchart LR
id1((This is the text in the circle))
Forma asimétrica
Copiar
Insertar
flowchart LR
id1>This is the text in the box]
Rombo
Copiar
Insertar
flowchart LR
id1{This is the text in the box}
Hexágono
Copiar
Insertar
flowchart LR
id1{{This is the text in the box}}
Paralelogramo
Copiar
Insertar
flowchart TD
id1[/This is the text in the box/]
Paralelogramo invertido
Copiar
Insertar
flowchart TD
id1[\This is the text in the box\]
Trapecio
Copiar
Insertar
flowchart TD
A[/ProcessOn\]
Trapecio invertido
Copiar
Insertar
flowchart TD
B[\ProcessOn/]
Doble círculo
Copiar
Insertar
flowchart TD
id1(((This is the text in the circle)))
Extensión de formas de nodo del diagrama de flujo de Mermaid
Mermaid ha introducido 30 formas nuevas para aumentar la flexibilidad y la precisión en la creación de diagramas de flujo. Estas nuevas formas ofrecen más opciones para representar visualmente procesos, decisiones, eventos, almacenamiento de datos y otros elementos del diagrama de flujo, mejorando así la claridad y el significado semántico.
Nueva sintaxis para definir formas
Mermaid ahora admite una sintaxis general para definir tipos de formas, adaptándose al número cada vez mayor de formas. Esta sintaxis te permite especificar una forma concreta para un nodo con un formato claro y flexible.
Copiar
Insertar
A@{ shape: rect }
Esta sintaxis crea el nodo A como un rectángulo. Se renderiza igual que [A] o A.
Lista completa de formas de nodo
A continuación se muestra la lista completa de las formas de nodo introducidas recientemente, junto con su significado, nombre corto y alias correspondientes:
| Nombre semántico | Sintaxis del gráfico | Nombre corto de la sintaxis | Alternativa de sintaxis | Descripción detallada |
|---|---|---|---|---|
| Tarjeta | Notched Rectangle | notch-rect | card, notched-rectangle | Representa una tarjeta |
| Ordenar | Hourglass | hourglass | collate | Representa una operación de ordenación |
| Enlace de comunicación | Lightning Bolt | bolt | com-link, lightning-bolt | Enlace de comunicación |
| Comentario | Curly Brace | brace | brace-l, comment | Añadir un comentario |
| Comentario a la derecha | Curly Brace | brace-r | Añadir un comentario | |
| Comentario con llaves en ambos lados | Curly Braces | braces | Añadir un comentario | |
| Entrada o salida de datos | Lean Right | lean-r | in-out, lean-right | Representa una entrada o salida |
| Entrada o salida de datos | Lean Left | lean-l | lean-left, out-in | Representa una salida o una entrada |
| Base de datos | Cylinder | cyl | cylinder, database, db | Almacenamiento de base de datos |
| Decisión | Diamond | diam | decision, diamond, question | Paso de decisión |
| Retardo | Half-Rounded Rectangle | delay | half-rounded-rectangle | Representa un retardo |
| Almacenamiento de acceso directo | Horizontal Cylinder | h-cyl | das, horizontal-cylinder | Almacenamiento de acceso directo |
| Almacenamiento en disco | Lined Cylinder | lin-cyl | disk, lined-cylinder | Almacenamiento en disco |
| Visualización | Curved Trapezoid | curv-trap | curved-trapezoid, display | Indica que la información se muestra en pantalla, terminal u otros dispositivos |
| Procesamiento dividido | Divided Rectangle | div-rect | div-proc, divided-process, divided-rectangle | Forma de procesamiento dividido |
| Documento | Document | doc | document | Representa un documento |
| Evento | Rounded Rectangle | rounded | event | Representa un evento |
| Extracción | Triangle | tri | extract, triangle | Proceso de extracción |
| Bifurcación/Fusión | Filled Rectangle | fork | join | Bifurcación o fusión en el diagrama de flujo |
| Almacenamiento interno | Window Pane | win-pane | internal-storage, window-pane | Almacenamiento interno |
| Punto de conexión | Filled Circle | f-circ | filled-circle, junction | Punto de conexión |
| Documento con línea | Lined Document | lin-doc | lined-document | Documento con línea |
| Proceso de línea/sombra | Lined Rectangle | lin-rect | lin-proc, lined-process, lined-rectangle, shaded-process | Forma de proceso con líneas |
| Límite de bucle | Trapezoidal Pentagon | notch-pent | loop-limit, notched-pentagon | Paso de límite de bucle |
| Archivo manual | Flipped Triangle | flip-tri | flipped-triangle, manual-file | Operación de archivo manual |
| Entrada manual | Sloped Rectangle | sl-rect | manual-input, sloped-rectangle | Paso de entrada manual |
| Operación manual | Trapezoid Base Top | trap-t | inv-trapezoid, manual, trapezoid-top | Representa una tarea manual |
| Multi-documento | Stacked Document | docs | documents, st-doc, stacked-document | 多个文档 |
| Multiproceso | Stacked Rectangle | st-rect | processes, procs, stacked-rectangle | 多个进程 |
| Forma irregular | Odd | odd | Forma irregular | |
| Cinta de papel | Flag | flag | paper-tape | Cinta de papel |
| Preparar condición | Hexagon | hex | hexagon, prepare | Paso de preparación o condición |
| Acción prioritaria | Trapezoid Base Bottom | trap-b | priority, trapezoid, trapezoid-bottom | Acción prioritaria |
| Proceso | Rectangle | rect | proc, process, rectangle | Forma de proceso estándar |
| Inicio | Circle | circle | circ | Punto de inicio |
| Inicio | Small Circle | sm-circ | small-circle, start | Pequeño círculo de inicio |
| Parada | Double Circle | dbl-circ | double-circle | Representa un punto de parada |
| Parada | Framed Circle | fr-circ | framed-circle, stop | Representa un punto de parada |
| Almacenar datos | Bow Tie Rectangle | bow-rect | bow-tie-rectangle, stored-data | Almacenar datos |
| Subgrafo | Framed Rectangle | fr-rect | framed-rectangle, subproc, subprocess, subroutine | Subgrafo, subproceso |
| Resumen | Crossed Circle | cross-circ | crossed-circle, summary | Resumen |
| Documento etiquetado | Tagged Document | tag-doc | tagged-document | Documento etiquetado |
| Proceso estandarizado | Tagged Rectangle | tag-rect | tag-proc, tagged-process, tagged-rectangle | 已标准进程 |
| Punto final | Stadium | stadium | pill, terminal | Punto final |
| Bloque de texto | Text Block | text | Bloque de texto |
A continuación se muestra un ejemplo de código de diagrama de flujo que usa las formas introducidas recientemente:
Copiar
Insertar
flowchart RL
A@{ shape: manual-file, label: "File Handling"}
B@{ shape: manual-input, label: "User Input"}
C@{ shape: docs, label: "Multiple Documents"}
D@{ shape: procs, label: "Process Automation"}
E@{ shape: paper-tape, label: "Paper Records"}
Proceso
Copiar
Insertar
flowchart TD
A@{ shape: rect, label: "This is a process" }
Evento
Copiar
Insertar
flowchart TD
A@{ shape: rounded, label: "This is an event" }
Subproceso
Copiar
Insertar
flowchart TD
A@{ shape: subproc, label: "This is a subprocess" }
Base de datos (cilindro)
Copiar
Insertar
flowchart TD
A@{ shape: cyl, label: "Database" }
Inicio (círculo)
Copiar
Insertar
flowchart TD
A@{ shape: circle, label: "Start" }
Forma irregular
Copiar
Insertar
flowchart TD
A@{ shape: odd, label: "Odd shape" }
Decisión (rombo)
Copiar
Insertar
flowchart TD
A@{ shape: diamond, label: "Decision" }
Preparar condición (hexágono)
Copiar
Insertar
flowchart TD
A@{ shape: hex, label: "Prepare conditional" }
Entrada/salida de datos (inclinada a la derecha)
Copiar
Insertar
flowchart TD
A@{ shape: lean-r, label: "Input/Output" }
Entrada/salida de datos (inclinada a la izquierda)
Copiar
Insertar
flowchart TD
A@{ shape: lean-l, label: "Input/Output" }
Acción prioritaria (trapecio)
Copiar
Insertar
flowchart TD
A@{ shape: trap-b, label: "Priority action" }
Operación manual (trapecio invertido)
Copiar
Insertar
flowchart TD
A@{ shape: trap-t, label: "Manual operation" }
Parada (doble círculo)
Copiar
Insertar
flowchart TD
A@{ shape: dbl-circ, label: "Stop" }
Bloque de texto
Copiar
Insertar
flowchart TD
A@{ shape: text, label: "This is a text block" }
Tarjeta (rectángulo con muesca)
Copiar
Insertar
flowchart TD
A@{ shape: notch-rect, label: "Card" }
Proceso con línea/sombra
Copiar
Insertar
flowchart TD
A@{ shape: lin-rect, label: "Lined process" }
Inicio (círculo pequeño)
Copiar
Insertar
flowchart TD
A@{ shape: sm-circ, label: "Small start" }
Parada (círculo con marco)
Copiar
Insertar
flowchart TD
A@{ shape: framed-circle, label: "Stop" }
Bifurcación/Fusión (rectángulo largo)
Copiar
Insertar
flowchart TD
A@{ shape: fork, label: "Fork or Join" }
Ordenar (reloj de arena)
Copiar
Insertar
flowchart TD
A@{ shape: hourglass, label: "Collate" }
Comentario (llaves)
Copiar
Insertar
flowchart TD
A@{ shape: comment, label: "Comment" }
Comentario a la derecha (llaves a la derecha)
Copiar
Insertar
flowchart TD
A@{ shape: brace-r, label: "Comment" }
Comentario (con llaves en ambos lados)
Copiar
Insertar
flowchart TD
A@{ shape: braces, label: "Comment" }
Enlace de comunicación (rayo)
Copiar
Insertar
flowchart TD
A@{ shape: bolt, label: "Communication link" }
Documento
Copiar
Insertar
flowchart TD
A@{ shape: doc, label: "Document" }
Retardo (rectángulo semirredondeado)
Copiar
Insertar
flowchart TD
A@{ shape: delay, label: "Delay" }
直接存取存储（水平圆柱）
Copiar
Insertar
flowchart TD
A@{ shape: das, label: "Direct access to storage" }
Almacenamiento en disco (cilindro con ranuras)
Copiar
Insertar
flowchart TD
A@{ shape: lin-cyl, label: "Disk storage" }
Visualización (forma de visualización)
Copiar
Insertar
flowchart TD
A@{ shape: curv-trap, label: "Display" }
Procesamiento dividido (rectángulo dividido)
Copiar
Insertar
flowchart TD
A@{ shape: div-rect, label: "Divided process" }
Extracción (triángulo pequeño)
Copiar
Insertar
flowchart TD
A@{ shape: tri, label: "Extract" }
Almacenamiento interno (panel de ventana)
Copiar
Insertar
flowchart TD
A@{ shape: win-pane, label: "Internal storage" }
Punto de conexión (círculo relleno)
Copiar
Insertar
flowchart TD
A@{ shape: f-circ, label: "Connect" }
Documento con línea
Copiar
Insertar
flowchart TD
A@{ shape: lin-doc, label: "Lined document" }
Límite de bucle (pentágono con muesca)
Copiar
Insertar
flowchart TD
A@{ shape: notch-pent, label: "Loop limit" }
Archivo manual (triángulo invertido)
Copiar
Insertar
flowchart TD
A@{ shape: flip-tri, label: "Manual file" }
Entrada manual (trapecio rectángulo)
Copiar
Insertar
flowchart TD
A@{ shape: sl-rect, label: "Manual input" }
Multi-documento (documentos apilados)
Copiar
Insertar
flowchart TD
A@{ shape: docs, label: "Multi-document" }
Multiproceso (rectángulos apilados)
Copiar
Insertar
flowchart TD
A@{ shape: processes, label: "Multiple processes" }
Cinta de papel (bandera)
Copiar
Insertar
flowchart TD
A@{ shape: flag, label: "Paper tape" }
Almacenar datos (rectángulo de pajarita)
Copiar
Insertar
flowchart TD
A@{ shape: bow-rect, label: "Data stored" }
Resumen (círculo con cruz)
Copiar
Insertar
flowchart TD
A@{ shape: cross-circ, label: "Summary" }
Documento etiquetado
Copiar
Insertar
flowchart TD
A@{ shape: tag-doc, label: "Tagged document" }
Proceso marcado
Copiar
Insertar
flowchart TD
A@{ shape: tag-rect, label: "Tagged process" }
Formas especiales en los diagramas de flujo de Mermaid
Mermaid también ha introducido imágenes para mejorar tus diagramas de flujo, permitiéndote incluirlas directamente en ellos y aportando más contexto visual y claridad.
Forma de imagen
Puedes usar image para insertar una imagen en el diagrama de flujo; la sintaxis para definir la imagen es la siguiente:
Copiar
Insertar
flowchart TD
A@{ img: "https://www.processon.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }
Parámetro
- img: la dirección URL de la imagen que se va a mostrar.
- label: la etiqueta de texto asociada a la imagen, puede ser cualquier cadena. Si no se define, no se mostrará ninguna etiqueta.
- pos: la posición de la etiqueta. Si no se define, la etiqueta se ubicará de forma predeterminada en la parte inferior de la imagen.
- w: el ancho de la imagen. Si no se define, se usa de forma predeterminada el ancho natural de la imagen.
- h: la altura de la imagen. Si no se define, se usa de forma predeterminada la altura natural de la imagen.
- constraint: determina si la imagen limita el tamaño del nodo. Esta configuración también garantiza que la imagen conserve su relación de aspecto original y ajusta la altura según el ancho. Si no se define, su valor predeterminado es off.
Las imágenes aportan flexibilidad adicional y atractivo visual a tus diagramas de flujo, haciéndolos más informativos y atractivos.
Conexiones entre nodos
Los nodos pueden conectarse mediante líneas de conexión y flechas. Existen diferentes tipos de enlaces y también se puede adjuntar una cadena de texto al enlace.
Enlace con flecha
Copiar
Insertar
flowchart LR
A-->B
Un enlace abierto
Copiar
Insertar
flowchart LR
A --- B
Enlace con texto
Copiar
Insertar
flowchart LR
A-- This is the text! ---B
o
Copiar
Insertar
flowchart LR
A --- | This is the text| B
Enlace con flecha y texto
Copiar
Insertar
flowchart LR
A-->|text|B
o
Copiar
Insertar
flowchart LR
A-- text -->B
Enlace discontinuo
Copiar
Insertar
flowchart LR
A-.->B;
Enlace discontinuo con texto
Copiar
Insertar
flowchart LR
A-. text .->B;
Enlace grueso
Copiar
Insertar
flowchart LR
A ==> B
Enlace grueso con texto
Copiar
Insertar
flowchart LR
A == |text| ==> B
Enlace invisible
Copiar
Insertar
flowchart LR
A ~~~ B
Conexión en cadena de enlaces
Copiar
Insertar
flowchart LR
A -- text --> B -- text2 --> C
También puedes declarar varios enlaces de nodo en la misma línea, como se muestra a continuación:
Copiar
Insertar
flowchart LR
a --> b & c--> d
También puedes describir dependencias, como en el siguiente código:
Copiar
Insertar
flowchart LR
a --> b & c--> d & e--> f
Si describieras el mismo gráfico con la sintaxis básica, necesitarías 8 líneas. Cabe recordar que abusar de este método puede dificultar la lectura de los diagramas de flujo en formato Markdown.
Copiar
Insertar
flowchart TB
a --> b
a --> c
b --> d
b --> e
c --> d
c --> e
d --> f
e --> f
Añadir un ID a la línea de conexión
Mermaid ahora admite añadir un ID a la línea de conexión, de forma similar a adjuntar un ID y metadatos a los nodos. Esta función sienta las bases para capacidades más avanzadas de estilo, clases y animación en las líneas de conexión.
Sintaxis:Para añadir un ID a la línea de conexión, antepón el ID a la sintaxis de la línea de conexión, seguido inmediatamente del carácter @. Por ejemplo:
Copiar
Insertar
flowchart LR
A e1@--> B
En este ejemplo, e1 es el ID de la línea de conexión que conecta A y B. Puedes usar este ID en definiciones o sentencias de estilo posteriores, igual que con un nodo.
Activar animación
Después de añadir un ID a la línea de conexión, puedes activar su animación definiendo las propiedades de la línea de conexión:
Copiar
Insertar
flowchart LR
A e1@==> B
e1@{ animate: true }
Esto indica a Mermaid que la línea de conexión e1 está animada.
Elegir el tipo de animación
En la versión inicial, se admiten dos velocidades de animación: fast y slow. Elegir un tipo de animación concreto es una forma sencilla de habilitar la animación y establecer su velocidad de una sola vez.
Copiar
Insertar
flowchart LR
A e1@--> B
e1@{ animation: fast }
这相当于 e1@{ animate: true, animation: fast }。
Animar con la sentencia classDef
También puedes animar la línea de conexión asignándole una clase y luego definiendo las propiedades de animación en una sentencia classDef. Por ejemplo:
Copiar
Insertar
flowchart LR
A e1@--> B
classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate
En este código:
- e1@--> 创建了一个 ID 为 e1 的连接线
- classDef animate define una clase llamada animate, con propiedades de estilo y animación.
- class e1 animate aplica la clase animate a la línea de conexión e1.
Nota sobre el escape de comas: al establecer la propiedad stroke-dasharray, recuerda escapar la coma como ,, ya que la coma se usa como separador en las definiciones de estilo de Mermaid.
Nuevos tipos de flecha
Admite nuevos tipos de flecha
- Línea de conexión con círculo relleno
- Línea de conexión con marca de cruz
Línea de conexión con círculo relleno
Copiar
Insertar
flowchart LR
A --o B
Línea de conexión con marca de cruz
Copiar
Insertar
flowchart LR
A --x B
Flecha multidireccional
Puedes usar flechas multidireccionales, por ejemplo:
Copiar
Insertar
flowchart LR
A o--o B
B <--> C
C x--x D
Longitud de la línea de conexión
Cada nodo del diagrama de flujo se asigna a un nivel en el gráfico renderizado según los nodos a los que está conectado, es decir, un nivel vertical u horizontal (según la dirección del diagrama de flujo). De forma predeterminada, un enlace puede abarcar cualquier número de niveles, pero puedes pedir que una conexión sea más larga que las demás añadiendo guiones adicionales en la definición de la conexión.
En este ejemplo, se han añadido dos guiones adicionales a la conexión del nodo B al nodo E, de modo que abarca dos niveles más que un enlace normal:
Copiar
Insertar
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
Cuando la etiqueta de la conexión se escribe en medio de la conexión, hay que añadir guiones adicionales a la derecha de la conexión. Este ejemplo es equivalente al anterior:
Copiar
Insertar
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B -- No ----> E[End]
Para las líneas punteadas o los enlaces gruesos, los caracteres que se deben añadir son el signo igual o el punto, como se muestra en la siguiente tabla:
| Longitud | 1 | 2 | 3 |
|---|---|---|---|
| Conexión normal | --- | ---- | ----- |
| Conexión normal con flecha | --> | ---> | ----> |
| Conexión gruesa | === | ==== | ===== |
| Conexión gruesa con flecha | ==> | ===> | ====> |
| Línea punteada | -.- | -..- | -...- |
| Línea punteada con flecha | -.- | -..-> | -...-> |
Caracteres especiales
Puedes poner el texto entre comillas para renderizar caracteres más problemáticos. Como se muestra en el siguiente ejemplo:
Copiar
Insertar
flowchart LR
id1["This is the (text) in the box"]
Codificación de entidades para escapar caracteres
Puedes escapar caracteres con la sintaxis del ejemplo.
Copiar
Insertar
flowchart LR
A["A double quote:#quot;"] --> B["A dec char:#9829;"]
El número indicado es decimal, por lo que # se puede codificar como #35. También se admite el uso de nombres de caracteres HTML.
Subgrafo
Copiar
Insertar
subgraph title
graph definition
end
A continuación se muestra un ejemplo:
Copiar
Insertar
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
También puedes establecer un id para el subgrafo.
Copiar
Insertar
flowchart TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
Diagrama de flujo
Con los gráficos de tipo diagrama de flujo, también puedes establecer líneas de conexión hacia y desde subgrafos, como en el siguiente diagrama de flujo.
Copiar
Insertar
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
Dirección del subgrafo
Al usar el tipo diagrama de flujo, puedes usar una sentencia de dirección para establecer la dirección de renderizado del subgrafo, como se muestra a continuación:
Copiar
Insertar
flowchart LR
subgraph TOP
direction TB
subgraph B1
direction RL
i1 -->f1
end
subgraph B2
direction BT
i2 -->f2
end
end
A --> TOP --> B
B1 --> B2
Limitaciones
Si algún nodo del subgrafo se conecta al exterior, se ignora la dirección del subgrafo. De lo contrario, el subgrafo hereda la dirección del gráfico principal:
Copiar
Insertar
flowchart LR
subgraph subgraph1
direction TB
top1[top] --> bottom1[bottom]
end
subgraph subgraph2
direction TB
top2[top] --> bottom2[bottom]
end
%% ^ These subgraphs are identical, except for the links to them:
%% Link *to* subgraph1: subgraph1 direction is maintained
outside --> subgraph1
%% Link *within* subgraph2:
%% subgraph2 inherits the direction of the top-level graph (LR)
outside ---> top2
Cadena Markdown
La cadena Markdown mejora los diagramas de flujo y los mapas mentales al ofrecer un tipo de cadena más flexible, que admite opciones de formato de texto como negrita y cursiva, y permite dividir el texto automáticamente dentro de la etiqueta.
Copiar
Insertar
flowchart LR
subgraph "One"
a("`The **cat**
in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}}
end
subgraph "`**Two**`"
c("`The **cat**
in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog")
end
- Para poner el texto en negrita, usa dos asteriscos (**) antes y después del texto.
- La cursiva usa un solo asterisco (*) antes y después del texto.
- Con las cadenas tradicionales, necesitas añadir la etiqueta <br> para que el texto se divida en el nodo. Sin embargo, la cadena Markdown divide el texto automáticamente cuando es demasiado largo, y basta con usar un salto de línea en lugar de la etiqueta <br> para comenzar una nueva línea.
Esta función se aplica a las etiquetas de nodo, las etiquetas de línea de conexión y las etiquetas de subgrafo
Se puede desactivar la división automática de línea usando una sintaxis específica
Copiar
Insertar
---
config:
markdownAutoWrap: false
---
graph LR
Comentario
Puedes introducir comentarios en el diagrama de flujo; el editor los ignorará. El comentario debe ocupar una línea propia y empezar con doble signo de porcentaje (%%). Todo el texto desde el inicio del comentario hasta la línea siguiente se considerará comentario, incluida cualquier sintaxis del diagrama de flujo.
Copiar
Insertar
flowchart LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
Estilo y clases
Estilo de enlace
Puedes establecer el estilo de los enlaces. Por ejemplo, puede que quieras diseñar un enlace que retrocede en el proceso; como los enlaces no tienen ID como los nodos, hay que decidir de otra forma el estilo que debe usar el enlace. Usa el número de orden con el que se definió el enlace, o usa un valor predeterminado para aplicarlo a todos los enlaces.
Copiar
Insertar
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
También puedes añadir estilo a varios enlaces separando los números de enlace con comas en una sola sentencia:
Copiar
Insertar
linkStyle 1,2,7 color:blue;
Establecer el estilo de curva de la línea de conexión
Si el método predeterminado no satisface tus necesidades, puedes establecer un estilo de curva para las líneas de conexión entre elementos. Los estilos de curva disponibles incluyen basis, bumpX, bumpY, cardinal, catmullRom, linear, monotoneX, monotoneY, natural, step, stepAfter y stepBefore.
En el siguiente ejemplo, un gráfico de izquierda a derecha usa el estilo de curva stepBefore.
Copiar
Insertar
%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
graph LR
Establecer el estilo del nodo
Puedes establecer un estilo específico para un nodo, como un borde más grueso o un color de fondo diferente.
Copiar
Insertar
flowchart LR
id1(Start)-->id2(Stop)
style id1 fill:#f99,stroke:#33d,stroke-width:4px
style id2 fill:#bfc,stroke:#f96,stroke-width:2px,color:#000,stroke-dasharray: 5 5
Clase
Es más cómodo que definir el estilo cada vez: define una clase de estilo y adjúntala a los nodos que necesiten una apariencia diferente.
La definición de clase es la siguiente:
Copiar
Insertar
classDef className fill:pink,stroke:#333,stroke-width:4px;
Además, también puedes definir el estilo de varias clases en una sola sentencia:
Copiar
Insertar
classDef firstClassName,secondClassName font-size:12pt;
Adjuntar una clase a un nodo se hace así:
Copiar
Insertar
class nodeId1 className;
También puedes adjuntar una clase a una lista de nodos en una sola sentencia:
Copiar
Insertar
class nodeId1,nodeId2 className;
Para añadir clases puedes usar el operador ::: para adjuntar el nombre de la clase al nodo, como se muestra a continuación:
Copiar
Insertar
flowchart LR
A:::someclass --> B
classDef someclass fill:#f96
Esta forma se puede usar al declarar varios enlaces entre nodos:
Copiar
Insertar
flowchart LR
A:::foo & B:::bar --> C:::foobar
classDef foo stroke:#f00
classDef bar stroke:#0f0
classDef foobar stroke:#00f
- En las declaraciones de gráficos, ahora las sentencias también pueden no terminar en punto y coma. A partir de la versión 0.2.16, terminar las sentencias de gráfico con punto y coma es solo opcional. Por lo tanto, la siguiente declaración de gráfico también es válida, igual que la declaración de gráfico antigua.
- Se permite un espacio entre vértices y enlaces. Sin embargo, no debe haber ningún espacio entre un vértice y su texto, ni entre un enlace y su texto. La declaración de gráfico antigua también sigue siendo válida, por lo que esta nueva función es opcional y tiene como objetivo mejorar la legibilidad.
A continuación se muestra la nueva declaración de línea de conexión, que también es válida igual que la declaración de línea de conexión antigua.
Copiar
Insertar
flowchart LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
