Fluxogramas Mermaid: nós, decisões, rótulos e direção

Um fluxograma Mermaid é um modelo textual de nós e arestas. flowchart TD segue de cima para baixo e flowchart LR da esquerda para a direita. Escolha a direção pela história, não apenas pelo espaço disponível.

Separe a identidade do nó do seu rótulo

Use um ID curto e estável e o texto legível entre colchetes:

flowchart LR
  request[Receber solicitação] --> validate{Entrada válida?}
  validate -->|Sim| process[Processar pedido]
  validate -->|Não| reject[Retornar erros]

As arestas usam validate; o rótulo pode mudar sem reescrever conexões. IDs estáveis também facilitam estilos e revisão de diferenças.

Rotule os ramos de decisão

Um losango sem rótulos obriga o leitor a adivinhar. Use -->|Rótulo| e termos consistentes. Misturar true/false, sim/não e sucesso/falha em decisões equivalentes aumenta o esforço mental.

Use subgráficos para limites

flowchart LR
  subgraph Navegador
    edit[Editar fonte] --> render[Renderizar diagrama]
  end
  subgraph ArmazenamentoLocal
    draft[(Rascunho)]
  end
  edit --> draft

Limites são úteis para mostrar responsabilidade, confiança, implantação ou ciclo de vida. Não envolva cada par de nós em um subgráfico.

Evite surpresas comuns do analisador

Comece com um diagrama mínimo e adicione uma instrução por vez. Coloque entre aspas rótulos com pontuação problemática. end em minúsculas tem função especial em fluxogramas; use outra palavra. Observe também o e x logo após certas arestas, pois podem selecionar terminações especiais.

Projete para mudanças

Separe a visão geral dos processos detalhados, reduza cruzamentos e mantenha o nível de abstração. O editor Mermaid local valida exatamente a versão incluída no site.