Saltar al contenido principal

Mermaid 11.15.0

Guía rápida de diagramas por carriles en Mermaid

Mermaid no tiene diagramas por carriles nativos. Usa un subgrafo por rol; elige secuencia para mensajes o architecture-beta para grupos de infraestructura.

Crear con el Editor de diagramas de flujo Mermaid →

Inicio rápido

Crea un subgrafo por rol y enlaza acciones de distintos roles mediante ids.

Mermaid
Abrir en el editor → 
flowchart LR
  subgraph author ["Autor"]
    direction TB
    A["Borrador"] --> B["Revisar"]
  end
  subgraph reviewer ["Revisor"]
    direction TB
    C["Comprobar"] --> D["Aprobar"]
  end
  A --> C
  C --> B
  B --> D

Cargando…

Referencia de sintaxis

Referencia de sintaxis
SintaxisSignificado
flowchart LR / flowchart TBUsa flowchart; swimlane no es una palabra de diagrama válida.
subgraph laneId ["Role"] / endAgrupa acciones por rol; los ids de carriles y nodos deben ser distintos.
direction TB / direction LRSolicita una dirección interna; las conexiones externas pueden anularla.
A --> B / A -->|Handoff| BConecta acciones entre carriles y etiqueta la transferencia.
laneA --> laneB / A ~~~ BLos enlaces entre subgrafos e invisibles influyen en el orden sin fijar coordenadas.
style laneId fill:#f5f5f5,stroke:#a1a1a1Modifica el fondo y borde del subgrafo.
classDef / class A name / A:::nameAplica estilos reutilizables a los nodos de acción.
%% / accTitle: / accDescr:Comentarios y descripciones accesibles; también funciona el resto de la sintaxis flowchart.

Estructura por responsabilidad

Cada acción pertenece a un rol. Usa ids de carril para grupos e ids de nodo para acciones; enlazar grupos completos preserva mejor la dirección interna.

Mermaid
Abrir en el editor → 
flowchart LR
  subgraph writer ["Redactor"]
    direction TB
    A["Esquema"] --> B["Borrador"]
  end
  subgraph editor ["Editor"]
    direction TB
    C["Revisión"] --> D["Dar visto bueno"]
  end
  writer --> editor

Cargando…

Transferencias entre carriles

Las conexiones entre acciones representan transferencias precisas, pero pueden hacer que el subgrafo herede la dirección global.

Mermaid
Abrir en el editor → 
flowchart TB
  subgraph requester ["Solicitante"]
    direction LR
    A["Enviar"] --> B["Responder"]
  end
  subgraph approver ["Responsable de aprobación"]
    direction LR
    C["Evaluar"] --> D["Aprobar"]
  end
  A -->|Solicitud| C
  C -->|Cambios| B
  B --> D

Cargando…

Fondos y estilos

style modifica el carril y classDef las acciones. Mantén texto y bordes legibles; el color complementa la etiqueta del rol.

Mermaid
Abrir en el editor → 
flowchart LR
  subgraph drafting ["Redacción"]
    A["Redactar"]:::action
  end
  subgraph checking ["Comprobación"]
    B["Revisión"]:::action
  end
  A --> B
  style drafting fill:#f5f5f5,stroke:#a1a1a1
  style checking fill:#d3e5ff,stroke:#0070f3
  classDef action fill:#ffffff,stroke:#171717,color:#171717

Cargando…

Espaciado sin carriles fijos

rankSpacing separa transferencias y nodeSpacing acciones. Mermaid controla orden, anchura y posiciones; divide los procesos largos.

Mermaid
Abrir en el editor → 
---
config:
  flowchart:
    nodeSpacing: 40
    rankSpacing: 70
---
flowchart LR
  subgraph drafting ["Redacción"]
    A["Redactar"]
  end
  subgraph review ["Revisión"]
    B["Comprobar"]
  end
  A --> B

Cargando…

Errores frecuentes

Usar swimlane como palabra clave

Empieza con flowchart y crea subgrafos.

Sintaxis incorrecta: ejemplo corregido abajo

swimlane
  Author --> Reviewer
Mermaid
Abrir en el editor → 
flowchart LR
  subgraph author ["Autor"]
    A["Borrador"]
  end
  subgraph reviewer ["Revisor"]
    B["Comprobar"]
  end
  A --> B

Cargando…

Suponer anchuras iguales

Los subgrafos se ajustan a su contenido; los enlaces invisibles no crean una cuadrícula fija.

Limitaciones

  • El orden y la anchura solo se controlan indirectamente; la disposición puede reordenar nodos.
  • Las conexiones entre carriles pueden anular la dirección interna.
  • Los procesos largos se saturan rápidamente.
  • architecture-beta sirve para infraestructura y secuencia para mensajes; ninguno sustituye carriles nativos.

Preguntas frecuentes

¿Tiene Mermaid carriles nativos?
No: se aproximan con subgrafos de flowchart.
¿Puedo fijar anchuras iguales?
No hay una opción nativa; depende del contenido y la disposición.
¿Cuándo conviene un diagrama de secuencia?
Cuando lo principal sea quién envía cada mensaje y en qué orden.