Repolode
Enviar
alyssaxuu

alyssaxuu/flowy

Uma biblioteca minimalista de JavaScript puro para criar editores de fluxogramas com blocos arrastáveis e encaixe automático em apps web.

Ver no GitHub
Estrelas
12,143
Forks
1,043
Issues abertas
59
Último commit
há 2 anos

O que é?

Flowy é uma biblioteca JavaScript sem dependências que permite adicionar recursos de fluxograma a uma página web. Você marca elementos com a classe create-flowy para transformá-los em blocos arrastáveis e os posiciona em um elemento canvas. Os usuários podem arrastar os blocos para o canvas, onde eles se encaixam nos blocos-pai e formam ramificações conectadas.

A biblioteca oferece callbacks para eventos de pegar, soltar, encaixar e reorganizar, permitindo que seu código aprove ou rejeite conexões e reaja às ações dos usuários. O estado do fluxograma pode ser exportado como uma estrutura JSON com flowy.output() e restaurado mais tarde com flowy.import(), embora o método de importação insira HTML bruto e só deva ser usado com dados confiáveis. É possível remover blocos em massa com flowy.deleteBlocks(); não há suporte para remover blocos individualmente.

A instalação é feita vinculando um arquivo JavaScript e um arquivo CSS, atualmente pelo jsDelivr, e a biblioteca funciona em dispositivos móveis. A instalação via npm é indicada como ainda não suportada.

Recursos principais

  • 01Blocos arrastáveis com encaixe e centralização automáticos
  • 02Callbacks para eventos de pegar, soltar, encaixar e reorganizar
  • 03Encaixe condicional e remoção condicional de blocos
  • 04Exportação e importação de dados de fluxogramas em JSON
  • 05Funciona em dispositivos móveis e não tem dependências externas

Casos de uso

  • Criar um editor de automações ou fluxos de trabalho em um app web
  • Criar uma ferramenta de mapas mentais ou diagramas com nós conectados
  • Prototipar uma interface simples de programação visual

Início rápido

  1. 1

    Vincule a folha de estilos pelo jsDelivr

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.css">
  2. 2

    Vincule o script pelo jsDelivr

    <script src="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.js"></script>
  3. 3

    Crie um elemento canvas e blocos arrastáveis na sua página

  4. 4

    Inicialize o Flowy no canvas

    flowy(document.getElementById("canvas"), onGrab, onRelease, onSnap, onRearrange, spacing_x, spacing_y);

Antes de usar

  • A instalação via npm ainda não está disponível; use os links CDN ou copie os arquivos.
  • Não é possível remover blocos individualmente; só é possível excluir todos de uma vez.
  • O método de importação não sanitiza o HTML e é vulnerável a XSS quando usado com entradas não confiáveis.

Tópicos

#flowchart#drag-and-drop#javascript#diagrams#visual-programming#vanilla-js#engine#javascript-library#marketing#marketing-automation

Perguntas frequentes

O que é flowy?
Uma biblioteca minimalista de JavaScript puro para criar editores de fluxogramas com blocos arrastáveis e encaixe automático em apps web. Flowy é uma biblioteca JavaScript sem dependências que permite adicionar recursos de fluxograma a uma página web. Você marca elementos com a classe create-flowy para transformá-los em blocos arrastáveis e os posiciona em um elemento canvas. Os usuários podem arrastar os blocos para o canvas, onde eles se encaixam nos blocos-pai e formam ramificações conectadas.
flowy é gratuito? Qual é a licença?
flowy é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
flowy ainda é mantido?
Sem commits há mais de 6 meses. O último commit de flowy foi em 13 de jul. de 2024.
Para que posso usar flowy?
Criar um editor de automações ou fluxos de trabalho em um app web Criar uma ferramenta de mapas mentais ou diagramas com nós conectados Prototipar uma interface simples de programação visual
Como instalar flowy?
Vincule a folha de estilos pelo jsDelivr: <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.css"> Vincule o script pelo jsDelivr: <script src="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.js"></script> Crie um elemento canvas e blocos arrastáveis na sua página Inicialize o Flowy no canvas: flowy(document.getElementById("canvas"), onGrab, onRelease, onSnap, onRearrange, spacing_x, spacing_y);
Onde consigo flowy?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/alyssaxuu/flowy

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados