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

JavaScript biblioteka, skirta kurti ir redaguoti žiniatinklio programose esančias srautines diagramas

Atvirojo kodo JavaScript API, skirta kurti žiniatinklio programas, leidžiančias lengvai generuoti ir valdyti nuostabias struktūrines schemas.

Flowy yra labai naudinga biblioteka, leidžianti programinės įrangos kūrėjams kurti „JavaScript“ žiniatinklio programas, kad būtų galima lengvai kurti ir valdyti srautų diagramas. Flowy.js yra gana gražus ir patogus struktūrinių schemų kūrimo įrankis, kurį galima lengvai integruoti su kitomis bibliotekomis. Biblioteka padeda kūrėjams sukurti automatizavimo programinę įrangą, minčių sudarymo įrankius, organizacines diagramas, šeimos medžius ir daug daugiau. Ši „Flowy“ biblioteka yra atvirojo kodo ir prieinama pagal MIT licenciją, o tai reiškia, kad ja galima laisvai naudotis.

Flowy biblioteka ne tik lengvai rodo struktūrines diagramas, bet ir palaiko visą vilkimo ir nuleidimo rengyklę su puikia sąsaja, daugybe tinkinimo parinkčių, gestų įvykių klausytojų ir kitų nuostabių funkcijų. Kai kurios iš šių funkcijų apima automatinio fiksavimo palaikymą, automatinį slinkimą, blokų pertvarkymą, blokų pasirinkimą ir pašalinimą, automatinį blokų centravimą, esamų failų importavimą ir naudojimą, mobiliojo ryšio palaikymą, paprastą blokų kūrimą, sąlyginį fiksavimą ir pan.

Previous Next

Darbo su Flowy pradžia

Rekomenduojamas būdas įdiegti „Flowy“ biblioteką yra naudoti NPM. Norėdami sklandžiai įdiegti, naudokite šią komandą

Įdiekite „Flowy“ per NPM

  npm install flowy

Klonuoti Flowy per GIT saugyklą

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

Sukurkite schemą naudodami „JavaScript“ vilkdami ir numesdami

„Flowy Library“ programinės įrangos kūrėjams suteikia galimybę sukurti naują schemą „JavaScript“ programose.Į biblioteką įtraukta pagalba kuriant reaguojančią, profesionalią schemą naudojant nuvilkimo funkciją. Pirma, jums gali tekti sukurti elementą, kuris laikytų struktūrinę schemą. Po to turite sukurti iš anksto nustatytą bloką, kurį galima įterpti į schemą vilkdami ir numesdami.Galite lengvai atlikti pakeitimus, pavyzdžiui, valdyti erdvės b/t elementus, perkelti bloką, redaguoti bloką, pašalinti nepageidaujamus blokus ir dar daugiau.

Sukurkite schemą naudodami nemokamą „JavaScript“ biblioteką


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

Pridėjimas & Mazgo valdymas naudojant JavaScript

Atvirojo kodo „Flowy Library“ palaiko programinį naujų mazgų įtraukimą „JavaScript“ programose. Biblioteka leidžia programuotojams pirmiausia sukurti bloką, o po to galite lengvai eksportuoti dizaino failą ir išsaugoti jį palaikomu failo formatu. Tai taip pat suteikia programinės įrangos kūrėjams teisę importuoti esamą bloką, atlikti jo pakeitimus ir išsaugoti jį atgal į pasirinktą vietą, naudojant tik kelias kodo eilutes. „Flowy“ komanda taip pat kuria dinamišką diagramos generavimą ir netrukus ji bus jos dalis.

Kaip pridėti naują mazgą prie schemos naudojant „JavaScript“ biblioteką?

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

Importuokite srautinės diagramos duomenis naudodami „JavaScript“

Atvirojo kodo Flowy biblioteka suteikia programinės įrangos kūrėjams galimybę importuoti srautinės diagramos duomenis į savo programas.Bibliotekoje yra palaikymas, leidžiantis lengvai importuoti visas srautines diagramas. Naudodami šį metodą įsitikinkite, kad įvestis yra visiškai patikima, nes šis metodas gali sukelti jūsų sistemos jautrumą. Tai taip pat leidžia gauti srautinės diagramos duomenis kaip objektą ir JSON eilutę.

Kaip importuoti schemos duomenis naudojant „JavaScript“ API?

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);
 Lietuvių