Editor de Diagramas Mermaid

Continuar na ferramenta

Mais páginas desta ferramenta

como fazer fluxograma online

Como fazer um fluxograma online com Mermaid

Um fluxograma Mermaid começa com a palavra-chave flowchart seguida da direção (TD para cima-para-baixo, LR para esquerda-para-direita). Este preset já carrega um fluxograma de aprovação pronto, edite o código e veja o resultado mudar na hora.

A sintaxe de fluxograma

Cada nó é um identificador curto seguido de um rótulo entre colchetes, como A[Início] para um retângulo ou B{Aprovado?} para um losango de decisão. As setas conectam nós com -->, e uma seta pode carregar um rótulo de condição com a sintaxe -->|texto|, o que é a base para representar ramificações do tipo "sim/não" sem nenhuma configuração extra.
É possível criar um laço apontando uma seta de volta para um nó já existente, como D --> B no exemplo, formando um ciclo de revisão. A forma do nó muda o significado visual: colchetes [texto] fazem um retângulo, chaves {texto} um losango de decisão e parênteses (texto) um retângulo de cantos arredondados.
Além de TD (ou o sinônimo TB, de cima para baixo) e LR, o Mermaid aceita mais duas direções: BT (de baixo para cima) e RL (da direita para a esquerda), o que dá quatro opções de orientação para o mesmo fluxograma sem reescrever nenhum nó. Comentários usam duas porcentagens (%% texto) e são ignorados pelo parser, úteis para anotar uma seção do código sem afetar o desenho. As setas também têm variações: -.-> desenha uma linha pontilhada e ==> uma linha grossa, ambas aceitando o mesmo rótulo condicional |texto| das setas normais.

Variações do exemplo

Trocar a direção

Entrada: flowchart LR
Saída esperada: fluxo da esquerda para a direita

Trocar TD por LR redesenha o mesmo fluxo na horizontal, útil para diagramas largos e curtos.

Adicionar uma terceira saída

Entrada: B -->|Talvez| F[Aguardar mais informação]
Saída esperada: novo caminho de decisão

Uma nova linha com o mesmo nó de origem (B) adiciona mais um ramo de decisão sem alterar o resto do diagrama.

Agrupar nós num subgraph

Entrada: subgraph Revisão B D end
Saída esperada: caixa com contorno ao redor de B e D

A palavra subgraph desenha uma caixa visual ao redor dos nós listados até o end correspondente, útil para separar etapas de um processo maior sem criar um novo diagrama.

FAQ da ferramenta completa

O que é Mermaid?

Mermaid é uma biblioteca JavaScript de código aberto que transforma texto simples, escrito em uma sintaxe própria parecida com Markdown, em diagramas renderizados como SVG. Em vez de desenhar caixas e setas manualmente em uma ferramenta gráfica, você descreve a estrutura do diagrama em algumas linhas de texto e a biblioteca calcula o layout e desenha o resultado.

Algum dado meu sai do navegador ao usar esta ferramenta?

Quais tipos de diagrama esta ferramenta suporta?

Como eu corrijo um erro de sintaxe no meu diagrama?

Dá para exportar ou incorporar o diagrama em outro lugar?

Esta ferramenta usa a sintaxe 'oficial' do Mermaid?

Existe algum limite de tamanho ou desempenho para os diagramas?

O editor funciona bem no celular?

Perguntas frequentes

Preciso instalar algo para usar essa sintaxe de fluxograma?

Não. A sintaxe roda inteira no navegador, através da biblioteca mermaid.js carregada por esta página. O mesmo código também funciona sem instalação em blocos de código Mermaid no GitHub, GitLab e Notion.

Dá para ter mais de um losango de decisão no mesmo fluxograma?

Sim. Basta adicionar outro nó com chaves {texto} e novas setas partindo dele; o Mermaid recalcula o layout automaticamente para acomodar quantos nós e decisões forem necessários.

O que acontece se eu errar a sintaxe de uma seta?

O editor mostra a mensagem de erro original do mermaid.js abaixo do código, geralmente indicando a linha problemática, e mantém o último fluxograma válido visível até você corrigir o texto.

Próximos passos

A sintaxe de fluxograma

Cada nó é um identificador curto seguido de um rótulo entre colchetes, como A[Início] para um retângulo ou B{Aprovado?} para um losango de decisão. As setas conectam nós com -->, e uma seta pode carregar um rótulo de condição com a sintaxe -->|texto|, o que é a base para representar ramificações do tipo "sim/não" sem nenhuma configuração extra.

É possível criar um laço apontando uma seta de volta para um nó já existente, como D --> B no exemplo, formando um ciclo de revisão. A forma do nó muda o significado visual: colchetes [texto] fazem um retângulo, chaves {texto} um losango de decisão e parênteses (texto) um retângulo de cantos arredondados.

Além de TD (ou o sinônimo TB, de cima para baixo) e LR, o Mermaid aceita mais duas direções: BT (de baixo para cima) e RL (da direita para a esquerda), o que dá quatro opções de orientação para o mesmo fluxograma sem reescrever nenhum nó. Comentários usam duas porcentagens (%% texto) e são ignorados pelo parser, úteis para anotar uma seção do código sem afetar o desenho. As setas também têm variações: -.-> desenha uma linha pontilhada e ==> uma linha grossa, ambas aceitando o mesmo rótulo condicional |texto| das setas normais.

Variações do exemplo

Trocar a direção

Entrada: flowchart LR
Saída esperada: fluxo da esquerda para a direita

Trocar TD por LR redesenha o mesmo fluxo na horizontal, útil para diagramas largos e curtos.

Adicionar uma terceira saída

Entrada: B -->|Talvez| F[Aguardar mais informação]
Saída esperada: novo caminho de decisão

Uma nova linha com o mesmo nó de origem (B) adiciona mais um ramo de decisão sem alterar o resto do diagrama.

Agrupar nós num subgraph

Entrada: subgraph Revisão B D end
Saída esperada: caixa com contorno ao redor de B e D

A palavra subgraph desenha uma caixa visual ao redor dos nós listados até o end correspondente, útil para separar etapas de um processo maior sem criar um novo diagrama.

FAQ da ferramenta completa

O que é Mermaid?

Algum dado meu sai do navegador ao usar esta ferramenta?

Quais tipos de diagrama esta ferramenta suporta?

Como eu corrijo um erro de sintaxe no meu diagrama?

Dá para exportar ou incorporar o diagrama em outro lugar?

Esta ferramenta usa a sintaxe 'oficial' do Mermaid?

Existe algum limite de tamanho ou desempenho para os diagramas?

O editor funciona bem no celular?

Perguntas frequentes

Preciso instalar algo para usar essa sintaxe de fluxograma?

Dá para ter mais de um losango de decisão no mesmo fluxograma?

Sim. Basta adicionar outro nó com chaves {texto} e novas setas partindo dele; o Mermaid recalcula o layout automaticamente para acomodar quantos nós e decisões forem necessários.

O que acontece se eu errar a sintaxe de uma seta?

O editor mostra a mensagem de erro original do mermaid.js abaixo do código, geralmente indicando a linha problemática, e mantém o último fluxograma válido visível até você corrigir o texto.