Subgrafos y estilos en Mermaid

Subgrafos

Un subgrafo enmarca un grupo de nodos con un título:

flowchart TD
  subgraph cliente["Cliente"]
    A([Enviar solicitud])
  end
  subgraph ventas["Gestor comercial"]
    B[Revisar solicitud]
    C{¿Completa?}
  end
  subgraph backoffice["Back office"]
    D[Verificación KYC]
  end
  A --> B --> C
  C -->|No| A
  C -->|Sí| D

Los nodos declarados dentro de un subgrafo le pertenecen. Las flechas se pueden declarar en cualquier sitio, y también puedes conectar directamente con el identificador de un subgrafo.

Imitar carriles

Mermaid no tiene un diagrama de carriles específico, pero un subgrafo por responsable da un resultado muy parecido y conserva la información clave de un diagrama de carriles: quién hace cada paso. La exportación Mermaid de Flowchartio usa exactamente este patrón, con un subgrafo por carril.

Dentro de un subgrafo puedes fijar su propia dirección con una línea direction LR. Ten en cuenta que, si los nodos del subgrafo se conectan con nodos de fuera, el motor puede ignorar esa dirección.

Estilos con clases

Define una clase una vez y aplícala a varios nodos:

flowchart LR
  A[Paso manual] --> B[Paso automático]
  classDef auto stroke-dasharray: 4 3
  class B auto

El atajo B:::auto aplica la clase al declarar el nodo. Usa clases para marcar pasos automáticos, pasos en revisión o el camino crítico.

Estilo de un nodo o de un enlace

• style A stroke-width:3px cambia un solo nodo.
• linkStyle 0 stroke-width:3px cambia el primer enlace (los enlaces se numeran por orden de declaración).

Mejor clases que estilos sueltos: son más fáciles de mantener y mantienen el diagrama coherente.

La exportación de Flowchartio

En el archivo .mmd, cada carril se convierte en un subgrafo con el nombre del responsable, y cada paso se declara dentro del subgrafo de su responsable. Las flechas se declaran después de los subgrafos, con las etiquetas de las decisiones. Puedes pegar el archivo tal cual y añadir tus propias clases, por ejemplo para resaltar los pasos automáticos, sin tocar la estructura.

Que siga siendo legible

• El estilo debe transmitir significado, no decorar.
• No dependas solo del color: combínalo con etiquetas o tipos de línea, para que se lea bien impreso y por personas con daltonismo.
• Las plataformas aplican su propio tema (claro u oscuro): prueba el resultado donde se va a ver.

Vuelve a lo básico con la chuleta de sintaxis o consulta qué formato de exportación encaja con tu destino.