Guía rápida de diagramas de flujo en Mermaid

Inicio rápido

Mantén ids estables y escribe las etiquetas entre comillas; las aristas conectan los ids.

flowchart LR
  D["Borrador de guía"] --> R{"¿Aprobado?"}
  R -->|Sí| P["Publicar guía"]
  R -->|No| D

Referencia de sintaxis

Formas y etiquetas

El catálogo incluye las 48 formas estándar del motor 11.15 y sus alias. Usa @{ shape: ... } para las nuevas; las formas clásicas siguen disponibles.

flowchart TB
  A@{ shape: sl-rect, label: "Introducir título" }
  B@{ shape: doc, label: "Documento en borrador" }
  C@{ shape: diam, label: "¿Completo?" }
  D@{ shape: cyl, label: "Archivo" }
  A --> B --> C
  C -->|Sí| D
  C -->|No| A

Enlaces y distancias

Los guiones adicionales solicitan más niveles de separación. Las puntas ayudan a expresar convenciones; los enlaces invisibles influyen en la disposición.

flowchart LR
  A["Esquema"] -->|Listo| B["Borrador"]
  B -.-> C["Revisión"]
  C ==> D["Publicación"]
  A ----> D
  B o--o E["Lista de comprobación"]
  E x--x D
  C ~~~ E

Subgrafos

La dirección interna puede ceder ante conexiones de nodos con el exterior. Enlaza subgrafos completos cuando sea importante mantenerla.

flowchart LR
  subgraph prep ["Preparación"]
    direction TB
    A["Esquema"] --> B["Borrador"]
  end
  subgraph review ["Revisión"]
    direction TB
    C["Comprobar"] --> D["Aprobar"]
  end
  prep --> review

Estilos y Markdown

classDef define estilos y class o ::: los aplica. style afecta a un nodo; linkStyle usa el índice de declaración y los ids permiten estilos por arista.

flowchart LR
  A["`**Guía** en borrador`"]:::focus e1@--> B["Revisión"]
  B --> C["Publicar"]
  classDef focus fill:#d3e5ff,stroke:#0070f3,color:#171717
  class B focus
  style C stroke-width:2px
  linkStyle 1 stroke:#0070f3,stroke-width:2px
  classDef edge stroke:#0070f3
  class e1 edge

Espaciado y motor de disposición

nodeSpacing y rankSpacing ajustan el diseño. ELK y los paquetes de iconos requieren registro por el anfitrión; las formas normales no necesitan esas extensiones.

---
config:
  flowchart:
    nodeSpacing: 35
    rankSpacing: 60
---
flowchart LR
  A["Redactar"] --> B["Revisión"] --> C["Publicar"]

Errores frecuentes

flowchart LR
  A[Draft

flowchart LR
  A["Borrador"] --> B["Revisión"]

Limitaciones

• La disposición automática decide las posiciones exactas; los guiones no fijan píxeles.
• Las conexiones externas pueden anular la dirección del subgrafo.
• Los iconos necesitan paquetes, las imágenes recursos accesibles y ELK registro.

Guías rápidas relacionadas

• Guía rápida de diagramas por carriles en Mermaid →
• Guía rápida de diagramas de clases en Mermaid →
• Hoja de referencia de Mermaid →