Pular para o conteúdo principal

Guia rápido de fluxogramas no Mermaid

Fluxogramas conectam ações e decisões. Use subgrafos para separar responsabilidades ou sequência quando o foco for a ordem das mensagens entre sistemas.

Criar com o Editor de fluxogramas Mermaid →

Início rápido

Mantenha ids estáveis e rótulos entre aspas; as conexões usam os ids.

Mermaid
flowchart LR
  D["Rascunho do guia"] --> R{"Aprovado?"}
  R -->|Sim| P["Publicar guia"]
  R -->|Não| D

Carregando…

Referência de sintaxe

Referência de sintaxe
SintaxeSignificado
flowchart / graph / LR / RL / TB / TD / BTDeclara o diagrama e a direção; TD equivale a TB.
A[Text] / A(Text) / A([Text]) / A[[Text]] / A[(Text)]Notação clássica: retângulo, retângulo arredondado, estádio, subrotina e cilindro.
A((Text)) / A{Text} / A{{Text}} / A>Text] / A(((Text)))Círculo, losango, hexágono, forma assimétrica e círculo duplo.
A[/Text/] / A[\Text\] / A[/Text\] / A[\Text/]Paralelogramos e trapézios nas duas orientações.
A@{ shape: rect, label: "Text" }Escolha um nome canônico ou alias do catálogo.
--> / --- / -.-> / -.- / ==> / === / ~~~Setas, ligações simples, tracejadas, grossas e invisíveis.
<--> / o--o / x--x / --o / --xPontas bidirecionais, circulares e cruzadas.
A -->|Label| B / A -- Label --> B / A ----> BTexto e traços extras aumentam a distância mínima entre níveis, sem fixar pixels.
subgraph id [Label] / direction TB / endAgrupa nós; conexões externas podem substituir a direção interna.
classDef / class A,B name / A:::nameDefine e aplica estilos reutilizáveis.
style A / linkStyle 0 / e1@--> / class e1 nameEstiliza nós, conexões por índice desde zero ou com id; estas podem ser animadas.
click A href "URL" / click A callback "Tooltip"Cliques dependem do ambiente e são desativados no modo estrito.
A["`**Bold** and *italic*`"]Strings Markdown permitem ênfase e quebra automática.
A@{ icon: "fa:user", form: "square", pos: "t", h: 60 }Ícones precisam de um pacote registrado; há formas quadradas, circulares e arredondadas.
A@{ img: "/favicon.svg", label: "Text", w: 60, h: 60, constraint: "on" }Imagens precisam de uma URL acessível; aceitam tamanho e restrição de proporção.
config.layout: elk / config.flowchart.defaultRenderer: elkELK é opcional e precisa ser instalado e registrado pelo ambiente.
%% / accTitle: / accDescr:Comentários e descrições acessíveis.
@{ shape: rect } / proc / process / rectangleProcesso
@{ shape: rounded } / eventEvento
@{ shape: stadium } / terminal / pillPonto terminal
@{ shape: fr-rect } / subprocess / subproc / framed-rectangle / subroutineSubprocesso
@{ shape: cyl } / db / database / cylinderBanco de dados
@{ shape: datastore } / data-storeArmazenamento de dados
@{ shape: circle } / circInício
@{ shape: bang } / bangExplosão
@{ shape: cloud } / cloudNuvem
@{ shape: diam } / decision / diamond / questionDecisão
@{ shape: hex } / hexagon / preparePreparação condicional
@{ shape: lean-r } / lean-right / in-outEntrada/saída de dados
@{ shape: lean-l } / lean-left / out-inEntrada/saída de dados
@{ shape: trap-b } / priority / trapezoid-bottom / trapezoidAção prioritária
@{ shape: trap-t } / manual / trapezoid-top / inv-trapezoidOperação manual
@{ shape: dbl-circ } / double-circleFim
@{ shape: text }Bloco de texto
@{ shape: notch-rect } / card / notched-rectangleCartão
@{ shape: lin-rect } / lined-rectangle / lined-process / lin-proc / shaded-processProcesso hachurado
@{ shape: sm-circ } / start / small-circleInício
@{ shape: fr-circ } / stop / framed-circleFim
@{ shape: fork } / joinBifurcação/junção
@{ shape: hourglass } / hourglass / collateIntercalação
@{ shape: brace } / comment / brace-lComentário
@{ shape: brace-r }Comentário à direita
@{ shape: braces }Comentário entre chaves
@{ shape: bolt } / com-link / lightning-boltLigação de comunicação
@{ shape: doc } / doc / documentDocumento
@{ shape: delay } / half-rounded-rectangleAtraso
@{ shape: h-cyl } / das / horizontal-cylinderArmazenamento de acesso direto
@{ shape: lin-cyl } / disk / lined-cylinderArmazenamento em disco
@{ shape: curv-trap } / curved-trapezoid / displayTela
@{ shape: div-rect } / div-proc / divided-rectangle / divided-processProcesso dividido
@{ shape: tri } / extract / triangleExtração
@{ shape: win-pane } / internal-storage / window-paneArmazenamento interno
@{ shape: f-circ } / junction / filled-circleJunção
@{ shape: notch-pent } / loop-limit / notched-pentagonLimite de repetição
@{ shape: flip-tri } / manual-file / flipped-triangleArquivo manual
@{ shape: sl-rect } / manual-input / sloped-rectangleEntrada manual
@{ shape: docs } / documents / st-doc / stacked-documentVários documentos
@{ shape: st-rect } / procs / processes / stacked-rectangleVários processos
@{ shape: bow-rect } / stored-data / bow-tie-rectangleDados armazenados
@{ shape: cross-circ } / summary / crossed-circleResumo
@{ shape: tag-doc } / tag-doc / tagged-documentDocumento marcado
@{ shape: tag-rect } / tagged-rectangle / tag-proc / tagged-processProcesso marcado
@{ shape: flag } / paper-tapeFita de papel
@{ shape: odd }Forma assimétrica
@{ shape: lin-doc } / lined-documentDocumento pautado

Formas e rótulos

O catálogo inclui as 48 formas padrão do renderizador 11.15 e seus aliases. Use @{ shape: ... } para formas novas; a notação clássica continua válida.

Mermaid
flowchart TB
  A@{ shape: sl-rect, label: "Inserir título" }
  B@{ shape: doc, label: "Documento em rascunho" }
  C@{ shape: diam, label: "Completo?" }
  D@{ shape: cyl, label: "Arquivo" }
  A --> B --> C
  C -->|Sim| D
  C -->|Não| A

Carregando…

Subgrafos

A direção interna pode ser substituída por ligações de nós com o exterior. Ligue subgrafos inteiros quando precisar preservá-la.

Mermaid
flowchart LR
  subgraph prep ["Preparação"]
    direction TB
    A["Estrutura"] --> B["Rascunho"]
  end
  subgraph review ["Revisão"]
    direction TB
    C["Verificar"] --> D["Aprovar"]
  end
  prep --> review

Carregando…

Estilos e Markdown

classDef define estilos; class ou ::: aplica. style altera um nó; linkStyle usa o índice de declaração e ids permitem estilos por ligação.

Mermaid
flowchart LR
  A["`**Guia** em rascunho`"]:::focus e1@--> B["Revisão"]
  B --> C["Publicar"]
  classDef focus fill:#d3e5ff,stroke:#0070f3,color:#171717
  class B focus
  style C stroke-width:2px
  linkStyle 1 stroke:#0070f3,stroke-width:2px
  classDef edge stroke:#0070f3
  class e1 edge

Carregando…

Espaçamento e renderizador

nodeSpacing e rankSpacing ajustam o layout. ELK e pacotes de ícones precisam de registro; formas comuns funcionam sem essas extensões.

Mermaid
---
config:
  flowchart:
    nodeSpacing: 35
    rankSpacing: 60
---
flowchart LR
  A["Escrever"] --> B["Revisão"] --> C["Publicar"]

Carregando…

Erros comuns

Deixar uma forma aberta

Feche os colchetes e coloque o rótulo entre aspas.

Sintaxe inválida: veja a correção abaixo

flowchart LR
  A[Draft
Mermaid
flowchart LR
  A["Rascunho"] --> B["Revisão"]

Carregando…

Usar end como id

end fecha um subgrafo; escolha outro id e use end só como rótulo entre aspas.

Esperar cliques em modo estrito

Este site desativa callbacks; use os links externos do editor.

Limitações

  • O layout automático define posições; traços extras não fixam pixels.
  • Ligações externas podem substituir a direção interna.
  • Ícones precisam de pacotes, imagens de recursos acessíveis e ELK de registro.

Perguntas frequentes

Como escolher uma forma nova?
Use A@{ shape: nome, label: "Texto" } com um nome ou alias do catálogo.
Por que a direção do subgrafo é ignorada?
Ligações entre nós internos e externos podem fazer o subgrafo herdar a direção global.
Como estilizar uma só ligação?
Use linkStyle com índice desde zero ou aplique uma classe a um id de ligação.