Fluxograma de algoritmos e processos online

Ferramenta online para construir fluxogramas de algoritmos e de processos de negócio. O diagrama existe ao mesmo tempo como desenho e como texto Mermaid: você digita uma linha e surge um bloco, move um bloco e o texto muda, e o posicionamento manual sobrevive à edição do texto. O layout e as setas que contornam os blocos são calculados pelo próprio editor.

Como montar o fluxograma

1
Comece por um exemplo ou pelo texto

Quatro modelos: processo simples, bifurcação, algoritmo com laço e diagrama com raias. Uma linha como “A[Ação] --> B{Condição?}” cria dois blocos e uma seta.

2
Edite direto no diagrama

“Bloco” acrescenta um passo, “Ligar” puxa uma seta, um clique duplo muda o rótulo de um bloco ou de uma seta, e os blocos são arrastados com o mouse. Ctrl e a roda do mouse mudam o zoom.

3
Pegue o resultado

Na aba “Exportar”: PNG, SVG, PDF em folha A4, imagem na área de transferência, texto para README e um link que abre o diagrama inteiro.

🔥 Em alta agora
🗣️ Texto para Fala ✨ Melhorador de Vídeo ✂️ Cortar Áudio ✨ Melhorador de Áudio 🎭 Modificador de Voz 🎙️ Removedor de Vocal 🎬 Criar Vídeo a partir de Áudio 🎬 Cortar Vídeo

Monte o fluxograma por texto, com o mouse ou a partir de uma descrição

Clique duplo: rótulo · Tab: próximo passo · setas: mover · Ctrl+roda: zoom
Não sabe o que experimentar?
800+ ferramentas — abra uma surpresa
🎲 Surpreender

Recursos

Texto e desenho: um só documento
À esquerda o diagrama em desenho, à direita o mesmo processo em texto. Digite uma linha e surge um bloco; mova um bloco, troque a forma ou o rótulo de uma seta e o texto muda.
Mover um bloco não se perde ao editar o texto
O ajuste é guardado como deslocamento em relação ao lugar calculado pelo layout: acrescente três linhas, o diagrama se refaz e o seu bloco continua no mesmo lugar em relação aos vizinhos. Em editores que desenham a partir do texto, a reconstrução costuma apagar o posicionamento manual.
Fluxograma a partir de descrição ou de código
Descreva o processo em palavras ou cole código em Python, C, C++, Java, JavaScript ou Pascal: a rede neural devolve o texto do diagrama com condições, laços e entrada e saída. Ajustar com uma frase mantém os seus deslocamentos. Disponível com Premium.
As setas contornam os blocos em vez de atravessá-los
A linha segue na horizontal e na vertical e vira para um corredor livre entre as fileiras. O retorno “voltar ao passo 2” é levado pela lateral e não risca o desenho.
Formas que se leem sem legenda
Início e fim, ação, condição, entrada e saída, preparação, armazenamento, sub-rotina, conector: a notação habitual dos fluxogramas de algoritmos.
PNG, SVG, PDF e imagem na área de transferência
SVG é vetor para diagramação, PDF é uma folha A4 para TCC ou procedimento, PNG e a imagem copiada vão para o Word, um chat ou uma apresentação. O estilo preto e branco serve para impressão.

O que dá para fazer

  • Fazer um fluxograma de algoritmo com condições e laços
  • Desenhar um processo de negócio com raias por departamento
  • Montar um fluxograma a partir de código ou de uma descrição em palavras
  • Transformar texto Mermaid em desenho e vice-versa
  • Mover blocos para o seu layout sem perder o posicionamento automático
  • Exportar o diagrama em PDF numa folha A4 ou em SVG vetorial
  • Enviar o diagrama por link ou colar num README como bloco mermaid

Por que aqui

Os editores de diagramas se dividem em dois grupos. Uns constroem o desenho a partir do texto e, ao reconstruir, apagam o posicionamento dos blocos. Outros deixam mover tudo pixel a pixel, mas não têm fonte em texto, então o diagrama não pode ser gerado nem comparado entre versões. Aqui os dois lados convivem: o texto continua sendo Mermaid comum, e os ajustes manuais são uma camada à parte que sobrevive à reescrita.

Perguntas sobre fluxogramas

Movi um bloco e depois acrescentei uma linha ao texto. O ajuste vai se perder?

Não. O ajuste não é guardado como um ponto na tela, e sim como um deslocamento em relação ao lugar que o layout calculou para o bloco. O diagrama se refez inteiro com a nova linha, e o seu bloco foi junto, mantendo exatamente o deslocamento que você deu. O botão “Posições automáticas” no canto da tela remove todos os ajustes de uma vez.

Que código pode virar fluxograma?

Python, C, C++, C#, Java, JavaScript, Pascal e linguagens parecidas, até 4000 caracteres por vez. As condições são desenhadas como losangos com os rótulos “sim” e “não”, um laço como condição com retorno, entrada e saída como paralelogramos, e as funções do mesmo código como sub-rotinas. O resultado chega como texto do diagrama, então um bloco sobrando se remove com uma linha.

Por que a seta vai em zigue-zague e não em linha reta?

Uma linha reta até a fileira vizinha muitas vezes atravessa um bloco que não tem nada a ver. Aqui a seta vira para um corredor livre entre as fileiras: fica com um canto a mais, mas não risca nada e dá para ver onde ela chega.

Como desenhar um retorno ao passo anterior?

Escreva uma seta para trás, “D --> B”, ou clique em “Ligar” no bloco de baixo e depois no de cima. O editor percebe o ciclo, dispõe o diagrama de cima para baixo como sempre e leva o retorno pela lateral, para que seja lido como um retorno.

Dá para abrir o diagrama em outro editor?

Sim, o texto do diagrama é Mermaid comum. GitHub, GitLab, Notion, Obsidian e os editores Mermaid aceitam. “Para README” já copia como bloco ```mermaid, que o GitHub desenha como diagrama direto na descrição do projeto.

Como inserir o diagrama num TCC ou num procedimento?

Ou “PDF · A4”, que coloca o diagrama numa folha com margens de 15 mm em cerca de 300 pontos por polegada, ou “Copiar imagem” e Ctrl+V direto no Word. Para impressora preto e branco, escolha antes “P&B para impressão”: nessa impressora os preenchimentos coloridos saem como manchas cinza sob o texto.

O que vai dentro do link do diagrama?

O texto do diagrama e os deslocamentos dos seus blocos, compactados no endereço da página. Quem recebe abre o link, vê o mesmo diagrama com o mesmo posicionamento e pode editá-lo. O diagrama dessa pessoa não se perde: ele volta com Ctrl+Z.

💡 Quer que melhoremos esta ferramenta para você?

Podemos — e é! Envie uma mensagem rápida com sua ideia. Se quiser discutir em detalhes, deixe seu email e entraremos em contato. Pode ser anônimo.

Como você avalia esta ferramenta?

Obrigado pela sua avaliação!
Quer compartilhar mais? Deixe um comentário!
Obrigado! Seu comentário aparecerá após a moderação.
Para quem é esta ferramenta?
🎓 Estudantes 📚 Educadores & Professores 💻 Desenvolvedores & TI 📋 Produtividade

Ao enviar conteúdo, você confirma que está autorizado a divulgá-lo a terceiros e se compromete a não incluir dados pessoais de terceiros. Veja os Termos de Uso. Provedores de IA Tembrica é um produto independente. Não temos afiliação, endosso ou patrocínio dos criadores dos modelos e serviços listados aqui; os nomes constam apenas para informar com precisão qual motor executa cada ferramenta.

Publicado Atualizado Autor: