Fluxograma
Mapeie qualquer processo, decisão ou algoritmo
O que é um Fluxograma?
Um fluxograma mostra os passos de um processo e as decisões entre eles. É o diagrama mais universal: fluxos de onboarding, algoritmos, circuitos de aprovação, guias de resolução de problemas — se tem passos e escolhas, um fluxograma pode mostrá-lo.
O fluxograma aparece sempre que um processo tem de ser acordado antes de ser construído: RFC, runbooks, documentação de onboarding, guiões de suporte. A sua força são as ramificações — todos os caminhos que um pedido pode seguir, incluindo os que ninguém previu. A sua fraqueza são o tempo e a responsabilidade: um fluxograma diz o que acontece a seguir, nunca quem o faz nem quanto demora. Acrescente um subgraph por equipa, ou mude de tipo de diagrama.
Exemplo em tempo real
flowchart TD
A([Start]) --> B{Payment valid?}
B -->|Yes| C[Reserve stock]
B -->|No| D[Show error]
C --> E{In stock?}
E -->|Yes| F[Confirm order]
E -->|No| G[Notify customer]
F --> H([Done])
D --> H
G --> HQuando usar
Erros frequentes
Um nó chamado end quebra a análise
A palavra end fecha um subgraph, por isso um nó que a use como identificador dá erro de análise e não um aviso. Atribua outro id ao nó e ponha a palavra no rótulo: done([End]).
Parênteses num rótulo sem aspas
A[Pay (card)] falha, porque o Mermaid lê o parêntese interior como mais um delimitador de forma. Envolva o rótulo inteiro em aspas duplas — A["Pay (card)"] — o que também resolve aspas, cardinais e pontos e vírgulas.
Uma ligação externa anula o direction
A linha direction LR dentro de um subgraph é ignorada assim que uma ligação começa ou termina num dos seus nós: a caixa volta à direção do diagrama. Aponte a ligação para o id do subgraph e a direção interna resiste.
Sintaxe básica
flowchart TD
A[Rectangle] --> B{Decision}
B -->|Yes| C([Rounded])
B -->|No| D[(Database)]flowchart LRA primeira linha define a direção da disposição: TD ou TB de cima para baixo, LR da esquerda para a direita, BT e RL no sentido inverso. As cadeias longas leem-se melhor em LR.
B -->|Yes| C B -.->|timeout| DUm rótulo entre barras verticais explica porque é que um ramo é seguido. As setas pontilhadas marcam os caminhos excecionais; as setas grossas, escritas ==>, marcam o caminho nominal.
A["Pay (card)"] --> B{{Route}}Os delimitadores escolhem a forma: [] retângulo, {} decisão, () cantos redondos, {{}} hexágono, [()] base de dados. Ponha entre aspas qualquer rótulo com parênteses ou outra pontuação do Mermaid.
subgraph payments [Payment service] direction LR P1 --> P2 endUm subgraph desenha uma caixa com rótulo à volta de nós relacionados — um serviço, uma equipa ou uma fase. A sua própria linha direction faz essa caixa correr na horizontal enquanto a página corre na vertical.
Perguntas sobre este diagrama
Quando devo usar um fluxograma em vez de um diagrama de sequência?
Use um fluxograma para a lógica de um processo (passos e decisões). Use um diagrama de sequência quando vários atores ou sistemas trocam mensagens ao longo do tempo.
A IA consegue gerar um fluxograma a partir de uma descrição em texto?
Sim — descreva o processo em linguagem natural («o utilizador regista-se, verifica o e-mail, depois…») e o Mermaid Studio gera o fluxograma completo, pronto a editar.
O GitHub renderiza fluxogramas Mermaid num README?
Sim. Ponha o código num bloco delimitado com a etiqueta mermaid e o GitHub renderiza-o em READMEs, issues e pull requests; o GitLab e o Notion fazem o mesmo. Para ferramentas sem suporte nativo, exporte em SVG ou PNG.
Porque é que o Mermaid coloca os nós numa ordem que eu não escolhi?
A disposição é calculada, não escrita — não há coordenadas na sintaxe. Influencie-a mudando a direção, agrupando nós em subgraphs, reordenando as declarações de ligações, ou acrescentando uma ligação invisível (A ~~~ B) para empurrar um nó para baixo de outro.
Qual é a diferença entre graph e flowchart no Mermaid?
Ambos continuam a ser aceites na v11. graph é a palavra-chave original; flowchart aponta para o renderizador mais recente e é aquela para que a documentação e as formas recentes foram escritas. Use flowchart em tudo o que for novo.
Como colorir caixas específicas de um fluxograma?
De duas maneiras: style A fill:#eef,stroke:#66f para um único nó, ou classDef warn fill:#fee seguido de class B,C warn para reutilizar um estilo em vários. Ambas fazem parte do código, por isso as cores sobrevivem à exportação em PNG e SVG.
Fluxograma ou outro tipo de diagrama?
Fluxograma ou diagrama de estados?
Pergunte o que são as caixas. Se forem ações — verbos que alguém executa — o fluxograma é a escolha certa. Se forem condições em que o mesmo objeto permanece, à espera de um evento, use um diagrama de estados. O ciclo de vida de uma encomenda são estados; o circuito de aprovação à volta dele é um fluxograma.
Fluxograma ou mapa mental?
Um mapa mental é uma árvore estrita: uma raiz, um pai por nó, sem rótulos nos ramos e sem ciclos. A partir do momento em que dois ramos têm de convergir, ou em que uma seta precisa de uma condição escrita, o mapa mental ficou pequeno e o que quer é um fluxograma.
Crie já o seu Fluxograma
Descreva-o em linguagem natural — a IA escreve o código Mermaid por si.
Abrir o Mermaid Studio