Mermaid
flowchart LR
subgraph author ["Autor"]
direction TB
A["Rascunho"] --> B["Revisar"]
end
subgraph reviewer ["Revisor"]
direction TB
C["Verificar"] --> D["Aprovar"]
end
A --> C
C --> B
B --> DCarregando…
Mermaid 11.15.0
Guia rápido de diagramas de raias no Mermaid
Mermaid não tem raias nativas. Use um subgrafo por papel; escolha sequência para mensagens ou architecture-beta para grupos de infraestrutura.
Criar com o Editor de fluxogramas Mermaid →Início rápido
Crie um subgrafo por papel e conecte ações de papéis diferentes pelos ids.
Referência de sintaxe
| Sintaxe | Significado |
|---|---|
| flowchart LR / flowchart TB | Use flowchart; swimlane não é uma palavra de diagrama válida. |
| subgraph laneId ["Role"] / end | Agrupa ações por papel; ids de raias e nós devem ser distintos. |
| direction TB / direction LR | Solicita direção interna; ligações externas podem substituí-la. |
| A --> B / A -->|Handoff| B | Conecta ações entre raias e rotula a transferência. |
| laneA --> laneB / A ~~~ B | Ligações entre subgrafos e invisíveis influenciam a ordem sem fixar coordenadas. |
| style laneId fill:#f5f5f5,stroke:#a1a1a1 | Altera fundo e borda do subgrafo. |
| classDef / class A name / A:::name | Aplica estilos reutilizáveis aos nós de ação. |
| %% / accTitle: / accDescr: | Comentários e descrições acessíveis; o restante de flowchart também funciona. |
Estrutura por responsabilidade
Cada ação pertence a um papel. Use ids de raia para grupos e ids de nó para ações; ligar grupos inteiros preserva melhor a direção interna.
Mermaid
flowchart LR
subgraph writer ["Redator"]
direction TB
A["Estrutura"] --> B["Rascunho"]
end
subgraph editor ["Editor"]
direction TB
C["Revisão"] --> D["Validar"]
end
writer --> editorCarregando…
Transferências entre raias
Conexões entre ações representam transferências precisas, mas podem fazer o subgrafo herdar a direção global.
Mermaid
flowchart TB
subgraph requester ["Solicitante"]
direction LR
A["Enviar"] --> B["Responder"]
end
subgraph approver ["Aprovador"]
direction LR
C["Avaliar"] --> D["Aprovar"]
end
A -->|Solicitação| C
C -->|Alterações| B
B --> DCarregando…
Fundos e estilos
style modifica a raia e classDef as ações. Preserve legibilidade; a cor complementa o rótulo do papel.
Mermaid
flowchart LR
subgraph drafting ["Redação"]
A["Escrever"]:::action
end
subgraph checking ["Verificação"]
B["Revisão"]:::action
end
A --> B
style drafting fill:#f5f5f5,stroke:#a1a1a1
style checking fill:#d3e5ff,stroke:#0070f3
classDef action fill:#ffffff,stroke:#171717,color:#171717Carregando…
Espaçamento sem raias fixas
rankSpacing separa transferências e nodeSpacing ações. Mermaid controla ordem, largura e posições; divida processos longos.
Mermaid
---
config:
flowchart:
nodeSpacing: 40
rankSpacing: 70
---
flowchart LR
subgraph drafting ["Redação"]
A["Escrever"]
end
subgraph review ["Revisão"]
B["Verificar"]
end
A --> BCarregando…
Erros comuns
Usar swimlane como palavra-chave
Comece com flowchart e crie subgrafos.
Sintaxe inválida: veja a correção abaixo
swimlane
Author --> Reviewer Mermaid
flowchart LR
subgraph author ["Autor"]
A["Rascunho"]
end
subgraph reviewer ["Revisor"]
B["Verificar"]
end
A --> BCarregando…
Supor larguras iguais
Subgrafos se ajustam ao conteúdo; ligações invisíveis não criam uma grade fixa.
Limitações
- Ordem e largura são controladas indiretamente; o layout pode reordenar nós.
- Conexões entre raias podem substituir a direção interna.
- Processos longos ficam congestionados rapidamente.
- architecture-beta serve para infraestrutura e sequência para mensagens; nenhum oferece raias nativas.
Perguntas frequentes
Mermaid tem raias nativas?
Não: este guia aproxima raias usando subgrafos de flowchart.
Posso fixar larguras iguais?
Não há opção nativa; depende do conteúdo e do layout.
Quando preferir sequência?
Quando o foco for quem envia cada mensagem e em qual ordem.