flowchart LR
D["Rascunho do guia"] --> R{"Aprovado?"}
R -->|Sim| P["Publicar guia"]
R -->|Não| D Carregando…
Mermaid 11.15.0
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 →Mantenha ids estáveis e rótulos entre aspas; as conexões usam os ids.
flowchart LR
D["Rascunho do guia"] --> R{"Aprovado?"}
R -->|Sim| P["Publicar guia"]
R -->|Não| D Carregando…
| Sintaxe | Significado |
|---|---|
| flowchart / graph / LR / RL / TB / TD / BT | Declara 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 / --x | Pontas bidirecionais, circulares e cruzadas. |
| A -->|Label| B / A -- Label --> B / A ----> B | Texto e traços extras aumentam a distância mínima entre níveis, sem fixar pixels. |
| subgraph id [Label] / direction TB / end | Agrupa nós; conexões externas podem substituir a direção interna. |
| classDef / class A,B name / A:::name | Define e aplica estilos reutilizáveis. |
| style A / linkStyle 0 / e1@--> / class e1 name | Estiliza 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: elk | ELK é opcional e precisa ser instalado e registrado pelo ambiente. |
| %% / accTitle: / accDescr: | Comentários e descrições acessíveis. |
| @{ shape: rect } / proc / process / rectangle | Processo |
| @{ shape: rounded } / event | Evento |
| @{ shape: stadium } / terminal / pill | Ponto terminal |
| @{ shape: fr-rect } / subprocess / subproc / framed-rectangle / subroutine | Subprocesso |
| @{ shape: cyl } / db / database / cylinder | Banco de dados |
| @{ shape: datastore } / data-store | Armazenamento de dados |
| @{ shape: circle } / circ | Início |
| @{ shape: bang } / bang | Explosão |
| @{ shape: cloud } / cloud | Nuvem |
| @{ shape: diam } / decision / diamond / question | Decisão |
| @{ shape: hex } / hexagon / prepare | Preparação condicional |
| @{ shape: lean-r } / lean-right / in-out | Entrada/saída de dados |
| @{ shape: lean-l } / lean-left / out-in | Entrada/saída de dados |
| @{ shape: trap-b } / priority / trapezoid-bottom / trapezoid | Ação prioritária |
| @{ shape: trap-t } / manual / trapezoid-top / inv-trapezoid | Operação manual |
| @{ shape: dbl-circ } / double-circle | Fim |
| @{ shape: text } | Bloco de texto |
| @{ shape: notch-rect } / card / notched-rectangle | Cartão |
| @{ shape: lin-rect } / lined-rectangle / lined-process / lin-proc / shaded-process | Processo hachurado |
| @{ shape: sm-circ } / start / small-circle | Início |
| @{ shape: fr-circ } / stop / framed-circle | Fim |
| @{ shape: fork } / join | Bifurcação/junção |
| @{ shape: hourglass } / hourglass / collate | Intercalação |
| @{ shape: brace } / comment / brace-l | Comentário |
| @{ shape: brace-r } | Comentário à direita |
| @{ shape: braces } | Comentário entre chaves |
| @{ shape: bolt } / com-link / lightning-bolt | Ligação de comunicação |
| @{ shape: doc } / doc / document | Documento |
| @{ shape: delay } / half-rounded-rectangle | Atraso |
| @{ shape: h-cyl } / das / horizontal-cylinder | Armazenamento de acesso direto |
| @{ shape: lin-cyl } / disk / lined-cylinder | Armazenamento em disco |
| @{ shape: curv-trap } / curved-trapezoid / display | Tela |
| @{ shape: div-rect } / div-proc / divided-rectangle / divided-process | Processo dividido |
| @{ shape: tri } / extract / triangle | Extração |
| @{ shape: win-pane } / internal-storage / window-pane | Armazenamento interno |
| @{ shape: f-circ } / junction / filled-circle | Junção |
| @{ shape: notch-pent } / loop-limit / notched-pentagon | Limite de repetição |
| @{ shape: flip-tri } / manual-file / flipped-triangle | Arquivo manual |
| @{ shape: sl-rect } / manual-input / sloped-rectangle | Entrada manual |
| @{ shape: docs } / documents / st-doc / stacked-document | Vários documentos |
| @{ shape: st-rect } / procs / processes / stacked-rectangle | Vários processos |
| @{ shape: bow-rect } / stored-data / bow-tie-rectangle | Dados armazenados |
| @{ shape: cross-circ } / summary / crossed-circle | Resumo |
| @{ shape: tag-doc } / tag-doc / tagged-document | Documento marcado |
| @{ shape: tag-rect } / tagged-rectangle / tag-proc / tagged-process | Processo marcado |
| @{ shape: flag } / paper-tape | Fita de papel |
| @{ shape: odd } | Forma assimétrica |
| @{ shape: lin-doc } / lined-document | Documento pautado |
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.
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…
Traços adicionais solicitam mais níveis de separação. Pontas expressam convenções; ligações invisíveis influenciam o layout.
flowchart LR
A["Estrutura"] -->|Pronto| B["Rascunho"]
B -.-> C["Revisão"]
C ==> D["Publicação"]
A ----> D
B o--o E["Lista de verificação"]
E x--x D
C ~~~ E Carregando…
A direção interna pode ser substituída por ligações de nós com o exterior. Ligue subgrafos inteiros quando precisar preservá-la.
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…
classDef define estilos; class ou ::: aplica. style altera um nó; linkStyle usa o índice de declaração e ids permitem estilos por ligação.
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…
nodeSpacing e rankSpacing ajustam o layout. ELK e pacotes de ícones precisam de registro; formas comuns funcionam sem essas extensões.
---
config:
flowchart:
nodeSpacing: 35
rankSpacing: 60
---
flowchart LR
A["Escrever"] --> B["Revisão"] --> C["Publicar"] Carregando…
Feche os colchetes e coloque o rótulo entre aspas.
Sintaxe inválida: veja a correção abaixo
flowchart LR
A[Draftflowchart LR
A["Rascunho"] --> B["Revisão"] Carregando…
end fecha um subgrafo; escolha outro id e use end só como rótulo entre aspas.
Este site desativa callbacks; use os links externos do editor.