Flow - Gerador de Fluxogramas a partir de Algoritmos

Este projeto é uma ferramenta web simples e interativa que gera fluxogramas visuais a partir de uma descrição textual de um algoritmo. É ideal para estudantes, professores e desenvolvedores que precisam criar rapidamente uma representação visual de uma lógica de programação.

Como Funciona

A ferramenta utiliza uma sintaxe simples e intuitiva para definir as etapas de um algoritmo. Basta descrever o fluxo usando palavras-chave específicas, e o fluxograma correspondente será gerado instantaneamente.

Formato do Algoritmo

Para gerar um fluxograma, você deve usar o seguinte formato no campo de texto:

• entrada: Define os dados de entrada do algoritmo.
• processamento: Descreve as operações e cálculos a serem realizados. Múltiplos passos podem ser separados por ; ou por quebras de linha.
• decisao: Representa uma condição ou desvio no fluxo (como um if).
• saida: Define os dados que serão exibidos como resultado.
• variaveis: Lista as variáveis utilizadas no algoritmo (opcional, para fins de documentação).
• descricao: Fornece uma breve explicação sobre o que o algoritmo faz (opcional).

Exemplo de Uso

Aqui está um exemplo de como descrever um algoritmo para calcular a média de três números:

entrada: n1, n2, n3
processamento: soma = n1 + n2 + n3; media = soma / 3
saida: soma, media
variaveis: n1, n2, n3, soma, media
descricao: Este algoritmo calcula a média de três números.

Tecnologias Utilizadas

• HTML5: Estrutura principal da página.
• CSS3: Estilização dos componentes e formas do fluxograma.
• JavaScript (ES6+): Lógica principal da aplicação.
• Vue.js (v3): Framework reativo para gerenciar o estado da aplicação e a renderização dos componentes.
• Bootstrap (v5): Framework CSS para a criação de um layout responsivo e moderno.
• html2canvas: Biblioteca para capturar o conteúdo de um elemento HTML e convertê-lo em uma imagem.
• AOS (Animate On Scroll): Biblioteca para animar elementos da página durante a rolagem.

Funcionalidades

• Geração Instantânea: O fluxograma é gerado em tempo real à medida que você digita.
• Formas Geométricas:
  • Elipse: Início e Fim.
  • Paralelogramo: Entrada de dados (entrada).
  • Retângulo: Processamento de dados (processamento).
  • Diamante: Tomada de decisão (decisao).
  • Documento: Saída de dados (saida).
• Exportação de Imagens:
  • Copiar como Imagem: Copia o fluxograma gerado para a área de transferência.
  • Baixar como Imagem: Faz o download do fluxograma como um arquivo PNG.
• Exemplos Prontos: A interface oferece exemplos para demonstrar o funcionamento da ferramenta.
• Limpeza Rápida: Um botão para limpar o formulário e o fluxograma.
• Verificação de Extração: Uma seção de "Verifique" permite que você veja como a ferramenta está interpretando cada parte do seu texto.

Como Executar o Projeto

Como este é um projeto puramente front-end, não há necessidade de um servidor ou de um processo de build. Basta abrir o arquivo index.html em qualquer navegador moderno.