Web Toolarium

SIMULADOR DE FLUXOGRAMAS

Simulador de fluxogramas

Crie fluxogramas com variáveis, operações, ramificações e loops e acompanhe as mudanças nos valores durante a execução.

Berjalan di browser Salvamento automático Importação e exportação JSON Sem execução de JavaScript arbitrário Recomendado para computador

Recomendado para computador: posicionar, conectar e editar nós é mais fácil com um mouse.

EDITOR

Fluxograma

100%
Adicione nós para criar um fluxo
Delete: excluir seleçãoCtrl+Z UndoCtrl+Y RedoCtrl+S: salvarClique duplo: configurações
Salvo automaticamente no localStorage deste dispositivo

HOW TO USE

Crie, execute e acompanhe as mudanças nos valores

Adicione nós à esquerda e conecte cada porta de saída ao próximo nó. Edite as expressões em Configurações, à direita.

Por que usar? Só o diagrama não mostra qual ramo é seguido, como as variáveis mudam ou se um loop termina. Executá-lo permite confirmar a ordem das operações.

Use para Organize a lógica antes de programar, explique processos em aula, confira condições, cálculos e loops ou encontre erros antes da implementação.

  1. Abra Variáveis à direita e adicione variáveis numéricas, de texto ou booleanas
  2. Conecte os nós de Início ao Fim e adicione os dois ramos Yes / No a cada decisão
  3. Selecione “Etapa” para verificar o nó atual e as mudanças nas variáveis
  4. Salve os fluxos concluídos como JSON e gerencie versões em Abrir

As expressões usam uma linguagem restrita e segura. Nenhum JavaScript arbitrário é executado e fluxogramas ou variáveis não saem do navegador.

GUIDE

Noções básicas e uso de fluxogramas

Um fluxograma representa a ordem das operações e ramificações condicionais com formas e conexões. Esta ferramenta executa o fluxo criado.

O que é um fluxograma?

É um diagrama de tarefas ou programas com formas e conexões que avançam de cima para baixo. Ajuda a organizar e explicar operações ao mostrar sua ordem, ramificações e loops.

Função de cada forma

Terminal (início/fim)
Indica o início e o fim de um fluxo.
Configuração:Adicione um terminal de Início ou Fim pela lista à esquerda. Também é possível alterar o tipo em Configurações, à direita.
Exemplo:Início → Processo → Fim
Processo
Representa uma operação, como atribuir um valor a uma variável ou fazer um cálculo.
Configuração:Insira um nome de exibição e uma expressão de operação em Configurações, à direita. Escreva uma atribuição por linha.
Exemplo:Nome “Contagem” e expressão count = count + 1
Decisão
Avalia uma condição e segue por dois caminhos: Yes e No.
Configuração:Insira uma condição em Configurações, à direita, e conecte as saídas Yes e No.
Exemplo:Condição score >= 70. Se verdadeiro, siga Yes; se falso, siga No.
Exibição
Adiciona o resultado de um cálculo ou uma mensagem à Saída, à direita.
Configuração:Insira um nome de exibição e uma expressão de saída em Configurações, à direita.
Exemplo:Expressão de saída "count=" + count
Início do loop
Enquanto a condição for verdadeira, o fluxo entra no loop. Quando for falsa, continua após o loop.
Configuração:Insira uma condição em Configurações, à direita, e associe o fim do loop correspondente.
Exemplo:Condição count < 5. Se verdadeiro, entra no corpo; se falso, continua após o loop.
Fim do loop
No fim do corpo, o fluxo retorna ao início correspondente. Se a condição for falsa, continua após o loop.
Configuração:Selecione o início de loop correspondente em Configurações, à direita.
Exemplo:Coloque após a operação que incrementa count; o loop se repete enquanto count for menor que 5.

Como desenhar o fluxo

Etapas gerais

  1. Arraste uma forma da lista de nós à esquerda para a tela central.
  2. Organize as formas na ordem, do Início ao Fim. Arraste os nós para ajustar a posição.
  3. Clique em um nó para abrir o menu e escolha Editar operação para definir o nome ou a expressão.

Posicionamento e configuração por forma

Terminal (início/fim)

Posicionamento:Coloque um Início no começo do fluxo e um Fim no final.

Conexão:Conecte apenas um OUT de Início ao próximo nó e somente um IN em Fim. Fim não tem OUT.

Processo

Configuração:Escolha Editar operação para inserir um nome e uma expressão. Use uma atribuição por linha.

Conexão:Conecte o nó anterior a IN e um OUT ao próximo. Exemplo:count = count + 1

Decisão

Configuração:Insira uma condição cujo resultado seja true ou false .

Conexão:Conecte as saídas inferiores Yes e No a um nó cada. Exemplo:score >= 70

Exibição

Configuração:Insira um nome e uma expressão de saída. Ao executar, o resultado aparece em Saída à direita.

Conexão:Conecte o nó anterior a IN e um OUT ao próximo. Exemplo:"count=" + count

Início do loop

Configuração:Insira uma condição e associe este nó ao fim do loop com a mesma cor e número.

Conexão:Conecte um OUT ao início do corpo. Se a condição for false, o fluxo sai do loop automaticamente.

Fim do loop

Configuração:Selecione o início correspondente em Configurações e coloque este nó no fim do corpo do loop.

Conexão:Conecte um OUT à operação após o loop. Não crie uma conexão direta ao início; o retorno ocorre automaticamente.

Conexões e regras

  1. Selecione Conectar ou Iniciar conexão no menu de um nó.
  2. Clique em OUT abaixo do nó de origem ou em Yes / No de uma decisão.
  3. Clique em IN acima do nó de destino para concluir a conexão.
  4. Um OUT comum permite uma conexão. Um IN pode receber conexões de vários nós.
  5. Ao conectar o mesmo OUT a outro nó, a conexão anterior é substituída automaticamente.
  6. Para excluir uma conexão, selecione-a e pressione Delete.
  7. Arraste os nós para evitar que as conexões se cruzem.
Apenas um OUT
Processo A
Processo B

Só pode sair uma conexão de um OUT. Ao conectá-lo a outro nó, a linha anterior é substituída.

IN aceita várias conexões
Processo A
Processo B
Processo C

Vários OUT podem se conectar ao IN do mesmo nó. Use isso para unir fluxos após uma ramificação.

Conecte Yes e No separadamente apenas em decisões. Associe início e fim do loop em Configurações, sem conectá-los diretamente.

Sobre os painéis à direita

Saída
Exibe em ordem os resultados dos nós Exibição executados. Nós ignorados por uma ramificação não são incluídos.
Observação:Antes de executar, aparece “Ainda não há saída”. Durante a execução, Saída é aberta automaticamente.
Variáveis
Cadastre nomes, tipos e valores iniciais. Durante a execução, os valores atuais são exibidos.
Histórico
Confira nós percorridos, condições e mudanças nas variáveis etapa por etapa.
Configurações
Edite o nome, a operação, a condição ou a expressão de saída do nó selecionado.

Como verificar a saída

  1. Insira uma expressão de saída nas configurações do nó Exibição. Exemplo:"count=" + count
  2. Use Etapa ou Executar para avançar até o nó Exibição.
  3. Quando um nó Exibição é executado, o resultado é adicionado à Saída.
  4. Se um nó Exibição for executado várias vezes em um loop, cada resultado será adicionado em ordem.
  5. Para conferir a saída desde o início, selecione Limpar no modo de edição antes de executar.

Exemplo:Variáveis count é 1 , a expressão de saída "count=" + count produz count=1 .

A edição fica desativada durante a execução; o painel à direita mostra valores e saída. Selecione Encerrar execução para voltar à edição.

Como executar

EtapaExecuta apenas o nó atual.

ExecutarExecuta automaticamente na velocidade escolhida.

PausarPausa a execução contínua.

Encerrar execuçãoEncerra a execução e volta à edição.

Velocidade: NormalSelecione a velocidade da execução contínua.

  1. Arraste uma forma da lista de nós à esquerda para a tela central.
  2. Arraste os nós na tela para posicioná-los.
  3. Clique em um nó para abrir o menu e escolha Editar operação para alterar seu conteúdo.
  4. Clique em uma conexão e pressione Delete para removê-la.
  5. Etapa executa um nó por vez; Executar inicia o modo automático. Selecione Encerrar execução para parar.
  6. Os projetos são salvos neste dispositivo e podem ser copiados em JSON.

Operadores aritméticos e exemplos

TipoSímboloExemploSignificado
Adição+score + 10Somar 10 a score
Subtração-count - 1Subtrair 1 de count
Multiplicação*price * quantityMultiplicar price por quantity
Divisão/total / 2Dividir total por 2
Resto%count % 2 == 0Verificar se é par

Operadores de comparação e lógicos

TipoSímboloExemploSignificado
Igual==score == 70score é igual a 70
Diferente!=score != 0score não é 0
Maior que>score > 70score é maior que 70
Maior ou igual a>=score >= 70score é pelo menos 70
Menor que<count < 5count é menor que 5
Menor ou igual a<=count <= 5count é no máximo 5
E&&score >= 70 && count < 5Ambas as condições são verdadeiras
ou||score < 0 || score > 100Uma das condições é verdadeira
NÃO!!isFinishedInverte um valor booleano

= atribui um valor em uma operação, enquanto== compara valores em uma condição.!isFinished Ao usar isFinished registre como variável booleana. Agrupe condições complexas entre parênteses, por exemplo (score + bonus) >= 70 .

Solução de erros de execução

Mensagem de erro Os motivos que impedem a execução aparecem abaixo dos controles. Os nós com problemas também são marcados na tela; corrija cada item indicado.

  1. Em caso de erro estrutural, confira o nome do nó e as conexões indicadas.
  2. Clique no nó, escolha Editar operação e corrija a expressão correspondente.
  3. Se faltar uma conexão, conecte a porta de saída à porta de entrada desejada.
  4. Se ocorrer um erro, encerre a execução, faça os ajustes e verifique novamente com Etapa.

Verificar conexões e estrutura

  • Use apenas um nó Início e conecte o fluxo até Fim.
  • Cada nó, exceto decisões e Fim, deve ter uma conexão seguinte.
  • Conecte um ramo Yes e um No em cada decisão.
  • Associe cada início de loop ao fim com o mesmo número.

Verificar expressões e valores

  • Use uma atribuição por linha e cadastre cada variável antes de usá-la.
  • Não misture tipos numéricos, texto e booleanos.
  • As condições de decisões e loops devem resultar em true ou false .
  • Verifique divisão por zero e parênteses ou textos sem fechamento.

LOCAL PROJECTS

Projetos salvos