1. Produtos
  2.   Diagrama
  3.   JavaScript
  4.   Flowy
 
  

Biblioteca JavaScript para criar e editar fluxogramas em aplicações web

API JavaScript de código aberto para criar aplicações Web que lhe permitem gerar e gerir fluxogramas incríveis com facilidade.

Flowy é uma biblioteca muito útil que permite aos programadores de software criar aplicações web JavaScript para criar e gerir fluxogramas com facilidade. O Flowy.js é um construtor de fluxogramas muito bom e fácil de usar e pode ser facilmente integrado com outras bibliotecas. A biblioteca ajuda os programadores a criar software de automatização, ferramentas de mapeamento mental, organogramas, árvores genealógicas e muito mais. Esta biblioteca Flowy é de código aberto e está disponível sob a licença do MIT, o que significa que pode ser utilizada gratuitamente.

A biblioteca Flowy não só exibe fluxogramas facilmente, como também suporta um editor completo de arrastar e largar com uma excelente interface, muitas opções de personalização, ouvintes de eventos de gestos e outras características incríveis. Algumas destas características incluem suporte para ajuste automático, rolagem automática, reorganização de blocos, seleção e remoção de blocos, centralização automática de blocos, importação e utilização de ficheiros existentes, suporte móvel, facilidade de criação de blocos, ajuste condicional e assim por diante.

Previous Next

Introdução ao Flowy

A forma recomendada de instalar a biblioteca Flowy é utilizando NPM. Utilize o seguinte comando para uma instalação sem problemas

Instalar o Flowy via NPM

  npm install flowy

Clone Flowy via repositório GIT

  git clone https://github.com/alyssaxuu/flowy.gitt

Criar fluxograma utilizando arrastar e largar via JavaScript

A Biblioteca Flowy oferece aos programadores de software a possibilidade de criar um novo fluxograma dentro das suas aplicações JavaScript.A biblioteca inclui suporte para a criação de um fluxograma profissional e responsivo, utilizando a funcionalidade de arrastar e largar. Primeiro, pode ser necessário criar um elemento para conter o fluxograma. Depois disso, precisa de criar um bloco predefinido que pode ser inserido no fluxograma arrastando-o e largando-o.Pode fazer alterações facilmente para gerir elementos de espaço b/t, deslocar um bloco, editar bloco, remover blocos indesejados e muito mais.

Criar fluxograma através da biblioteca JavaScript gratuita


        // Initialize the flowchart on the canvas div
        const canvas = document.getElementById('canvas');
        flowy(canvas);

        // Create some nodes and connect them
        const node1 = flowy.add_node('Start', 'node-1');
        const node2 = flowy.add_node('Process', 'node-2');
        flowy.connect(node1, node2);

        // Add some properties to nodes
        flowy.set_property(node1, 'color', 'blue');
        flowy.set_property(node2, 'text', 'Hello World');

        // Serialize and log the flowchart
        document.getElementById('serialize').addEventListener('click', () => {
            console.log(flowy.serialize());
        });

        // Load the serialized flowchart
        document.getElementById('load').addEventListener('click', () => {
            const json = prompt('Enter JSON:');
            flowy.load(json);
        });

Adicionando & Gerir o Nó via JavaScript

A biblioteca Flowy de código aberto inclui suporte para adicionar novos nós programaticamente dentro de aplicações JavaScript. A biblioteca permite que os programadores de software projetem primeiro o bloco e, depois disso, pode exportar facilmente o ficheiro de design e guardá-lo no formato de ficheiro suportado. Também dá aos programadores de software o poder de importar o bloco existente, fazer alterações nele e guardá-lo no local da sua escolha com apenas algumas linhas de código. A equipa flowy está também a trabalhar na geração dinâmica do diagrama e em breve fará parte dele.

Como adicionar um novo nó a um fluxograma utilizando a biblioteca JavaScript?

// create a new instance of the Flowy library
const canvas = document.getElementById("canvas");
const flowy = new Flowy(canvas);

// add a new node to the canvas

const node = flowy.addNode({
  text: "New Node",
  x: 100,
  y: 100,
  draggable: true,
  resizable: true,
  deletable: true,
});

Importar dados do fluxograma através de JavaScript

A Flowy Library de código aberto oferece aos programadores de software a possibilidade de importar os dados do fluxograma dentro das suas próprias aplicações.A biblioteca inclui suporte para a importação de fluxogramas inteiros com facilidade. Ao utilizar este método, certifique-se de que a entrada é absolutamente fiável, pois este método não pode trazer suscetibilidade ao seu sistema. Permite também obter os dados do fluxograma como um objeto e também como uma string JSON.

Como importar dados do fluxograma utilizando API JavaScript?

const canvas = document.getElementById('canvas');
const flowy = new Flowy(canvas);

const data = {
  nodes: [
    { id: "node1", content: "Start", x: 100, y: 100 },
    { id: "node2", content: "Step 1", x: 250, y: 100 },
    { id: "node3", content: "Step 2", x: 250, y: 200 },
    { id: "node4", content: "End", x: 400, y: 150 }
  ],
  edges: [
    { source: "node1", target: "node2" },
    { source: "node2", target: "node3" },
    { source: "node3", target: "node4" }
  ]
};

flowy.load(data);
 Português