Editor de fluxogramas: formas, setas e rótulos Sim/Não direto no navegador.
O fluxograma é desenhado no seu navegador e não é enviado para lugar nenhum.
O que o editor faz
Símbolos da norma ISO 5807, setas que contornam as formas sozinhas e se prendem aos lados delas, e rótulos Sim/Não nas saídas das decisões. O botão “+” coloca a próxima forma já ligada, e “Organizar” arruma o diagrama inteiro. O diagrama é salvo no seu navegador enquanto você trabalha, e dá para baixá-lo em PNG, SVG ou PDF, ou como código Mermaid.
Exemplos: Par ou ímpar O maior de três Soma de 1 a N Verificação de senha
Como colocar um fluxograma no Word ou no Google Docs
- Word 2019 e Microsoft 365: SVG. Insira como qualquer imagem, e o diagrama continua nítido em qualquer zoom.
- Google Docs e versões antigas do Word: PNG a 300 dpi. Escolha a largura “A4, margens padrão do Word” ou “US Letter”, e a imagem ocupará exatamente a largura do texto.
- LaTeX: PDF ajustado ao diagrama, que o \includegraphics insere sem perder nitidez.
- O mais rápido: “Copiar imagem” na janela “Baixar” e depois Ctrl+V direto no documento.
Os PNG e SVG baixados aqui levam o próprio diagrama dentro: arraste o arquivo de volta para a folha e continue editando.
Símbolos do fluxograma e o que significam
Os nomes são os mesmos do painel de formas. As cinco primeiras aparecem em quase todo exercício escolar; as outras servem para diagramas segundo a ISO 5807.
| Forma | Nome | Quando usar |
|---|---|---|
| Início / fim | Início e fim de um algoritmo, entrada e saída de uma sub-rotina. | |
| Processo | Um cálculo ou qualquer ação: atribuição, conta, comando. | |
| Decisão | Um teste de condição: o losango tem duas saídas, Sim e Não. | |
| Entrada / saída | Entrada e saída de dados quando o meio não importa. | |
| Sub-rotina | A chamada de uma sub-rotina ou função descrita à parte. | |
| Preparação | A preparação de um laço: valores iniciais como i = 1. | |
| Início do laço | O limite superior de um laço, em par com um Fim do laço de mesmo nome. | |
| Fim do laço | O limite inferior de um laço; a condição de saída vai em um dos dois limites. | |
| Conector | Uma interrupção da linha: a seta continua no conector com o mesmo rótulo. | |
| Conector de página | Um salto para outra página. Usado em livros didáticos; a ISO 5807 tem só o conector comum. | |
| Comentário | Uma observação sobre uma forma, ligada a ela por uma linha tracejada. | |
| Entrada manual | Dados digitados à mão, por exemplo pelo teclado. | |
| Operação manual | Uma ação feita por uma pessoa. | |
| Documento | Dados em papel: impressão, formulário, relatório. | |
| Exibição | Dados mostrados na tela. | |
| Dados armazenados | Dados armazenados quando o meio não importa. | |
| Memória interna | Dados na memória principal. | |
| Armazenamento de acesso sequencial | Dados em um meio lido em ordem, como uma fita. | |
| Armazenamento de acesso direto | Dados em um meio de acesso direto, como um disco. | |
| Cartão perfurado | Dados em um cartão perfurado. | |
| Fita perfurada | Dados em uma fita de papel perfurada. | |
| Processamento paralelo | O início ou o fim de ações que acontecem ao mesmo tempo. | |
| Reticências | Uma parte do diagrama que não é desenhada inteira. |
Fluxogramas segundo a ISO 5807
O estilo “ISO 5807” do painel dá às formas as proporções da norma: altura a, largura 1,5a, com a de 15 a 30 mm, texto de 10 a 14 pt e pontas de seta só contra o fluxo ou em todas as linhas. Nesse estilo as formas não crescem com o texto: se ele não couber, uma dica avisa.
O ícone de dicas mostra onde o diagrama foge da norma: uma decisão com menos de duas saídas, uma saída sem rótulo, uma forma sem entrada ou sem saída, falta de início ou de fim.
Um diagrama a partir de código Mermaid
Peça a um chatbot que desenhe um fluxograma em código Mermaid e cole a resposta inteira, mesmo com texto em volta do código, com “Colar código” ou Ctrl+V direto na folha. As formas, as setas e os rótulos vêm junto, e o layout se faz sozinho. Para o caminho inverso, use “Copiar código Mermaid” na janela “Baixar”.
Teclado
- Enter — editar o texto da forma
- Ctrl + Enter — terminar o texto e colocar a próxima forma
- Ctrl + ←↑→↓ — uma forma ligada nessa direção
- ←↑→↓ — mover a seleção
- Shift + ←↑→↓ — movê-la em passos maiores
- Ctrl + Z, Ctrl + Shift + Z — desfazer e refazer
- Ctrl + D — duplicar
- Delete — excluir
- Space + arrastar — mover a folha
- Ctrl + roda do mouse — zoom
Para testar o algoritmo em código, experimente o ambiente Python.
Perguntas frequentes
Tem marca d’água?
Não. PNG, SVG e PDF são baixados limpos, sem marca d’água e sem cadastro.
Onde meus diagramas ficam salvos?
Só no seu navegador; nada vai para um servidor. O navegador pode apagar os dados do site quando falta espaço ou se o site não é aberto há muito tempo, então baixe os diagramas importantes como arquivo: “Baixar arquivo do diagrama” na janela “Baixar” ou em “Meus diagramas”.
Funciona no celular?
Sim. A forma se move com o dedo, a folha arrastando num lugar vazio, e o zoom é com dois dedos. Um toque duplo abre a edição do texto, um toque longo abre o menu de ações, e as formas ficam no painel de baixo.
Como faço um fluxograma segundo a ISO 5807?
Escolha o estilo “ISO 5807”, ajuste o tamanho a e a fonte, e confira o diagrama com as dicas. Para um trabalho ou TCC, baixe PNG a 300 dpi ou SVG.
Por que não dá para selecionar o texto do PDF?
No PDF as letras são desenhadas como contornos, então o diagrama fica igual em qualquer computador, mesmo sem as nossas fontes. Se precisar de texto selecionável, baixe o SVG com “Manter o texto como texto” marcado.
Em que idiomas posso escrever nas formas?
Em qualquer idioma do site, inclusive da direita para a esquerda e com caracteres chineses e japoneses: as fontes Noto são carregadas conforme o seu texto. O urdu é escrito em letra naskh, não em nastaliq, porque uma fonte nastaliq pesa mais de um megabyte. Emojis e caracteres de outras escritas saem com a fonte do sistema no PNG e ficam fora do PDF; a janela “Baixar” avisa.
Qual pode ser o tamanho de um diagrama?
Não há limite. Um diagrama com 200 formas e 300 setas se move com fluidez mesmo num celular lento: enquanto você arrasta, as setas são desenhadas como dobras simples, e o caminho exato é traçado quando você solta a forma.
É grátis para usar?
Sim, totalmente grátis e sem cadastro. A ferramenta roda inteiramente no seu navegador: o arquivo nunca vai para um servidor, então o servidor não gasta nem CPU nem tráfego — não há nada a cobrar. Sem marcas d’água, sem limites de tamanho ou de quantidade de arquivos.