1. Produse
  2.   Diagramă
  3.   JavaScript
  4.   Flowy
 
  

Bibliotecă JavaScript pentru a crea și edita diagrame de flux în aplicații web

Open Source JavaScript API pentru a crea aplicații web care permite generarea și gestionarea cu ușurință a diagramelor flux minunate.

Flowy este o bibliotecă foarte utilă care le permite dezvoltatorilor de software să creeze aplicații web JavaScript pentru a crea și gestiona diagrame de flux cu ușurință. Flowy.js este un generator de diagrame de flux destul de frumos și ușor de utilizat și poate fi integrat cu ușurință cu alte biblioteci. Biblioteca ajută dezvoltatorii să creeze software de automatizare, instrumente de hărți mentale, organigrame, arbori genealogic și multe altele. Această bibliotecă Flowy este open source și disponibilă sub licența MIT, ceea ce înseamnă că poate fi utilizată în mod liber.

Biblioteca Flowy nu numai că afișează cu ușurință diagrame, dar acceptă și un editor complet de glisare și plasare, cu o interfață excelentă, o mulțime de opțiuni de personalizare, ascultători de evenimente cu gesturi și alte funcții uimitoare. Unele dintre aceste caracteristici includ suport pentru aprinderea automată, defilarea automată, rearanjarea blocurilor, selectarea și eliminarea blocurilor, centrarea automată a blocurilor, importarea și utilizarea fișierelor existente, suport mobil, crearea ușoară a blocurilor, fixarea condiționată și așa mai departe.

Previous Next

Noțiuni introductive cu Flowy

Modul recomandat de a instala biblioteca Flowy este utilizarea NPM. Vă rugăm să utilizați următoarea comandă pentru o instalare fără probleme

Instalați Flowy prin NPM

  npm install flowy

Clone Flowy via GIT Repository

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

Creați diagramă de flux utilizând glisați și plasați prin JavaScript

Biblioteca Flowy oferă dezvoltatorilor de software capacitatea de a crea o nouă diagramă de flux în aplicațiile lor JavaScript.Biblioteca a inclus suport pentru crearea unei diagrame de flux profesionale, receptive, folosind funcția de glisare și plasare. În primul rând, poate fi necesar să creați un element care să dețină diagrama de flux. După aceea, trebuie să creați un bloc predefinit care poate fi inserat în diagramă de flux prin glisarea și plasarea acestuia.Puteți face cu ușurință modificări în ceea ce privește gestionarea spațiului b/t elemente, deplasați un bloc, editați blocuri, eliminați blocurile nedorite și multe altele.

Creați diagramă de flux prin biblioteca JavaScript gratuită


        // 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);
        });

Adăugarea & Gestionarea nodului prin JavaScript

Biblioteca Flowy cu sursă deschisă a inclus suport pentru adăugarea de noduri noi în mod programatic în cadrul aplicațiilor JavaScript. Biblioteca permite programatorilor de software să proiecteze mai întâi blocul și apoi, după aceea, puteți exporta cu ușurință fișierul de proiectare și îl puteți salva în formatul de fișier acceptat. De asemenea, oferă dezvoltatorilor de software puterea de a importa blocul existent, de a-i face modificări și de a-l salva înapoi în locația dorită cu doar câteva linii de cod. Echipa fluidă lucrează și la generarea dinamică a diagramei și în curând va face parte din aceasta.

Cum se adaugă un nou nod la o diagramă de flux utilizând 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,
});

Importați datele diagramei de flux prin JavaScript

Biblioteca Flowy cu sursă deschisă oferă dezvoltatorilor de software capacitatea de a importa datele diagramei de flux în propriile aplicații.Biblioteca a inclus suport pentru importarea cu ușurință a diagramelor de flux întregi. Când utilizați această metodă, vă rugăm să vă asigurați că intrarea este absolut de încredere, nu astfel încât această metodă să poată aduce susceptibilitate în sistemul dumneavoastră. De asemenea, permite obținerea datelor diagramei flux ca obiect, precum și șir JSON.

Cum se importă datele diagramei de flux folosind API-ul 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);
 Română