1. Termékek
  2.   Diagram
  3.   JavaScript
  4.   Flowy
 
  

JavaScript-könyvtár folyamatábrák létrehozásához és szerkesztéséhez a webalkalmazásokban

Nyílt forráskódú JavaScript API webalkalmazások létrehozásához, amely lehetővé teszi fantasztikus folyamatábrák egyszerű létrehozását és kezelését.

A Flowy egy nagyon hasznos könyvtár, amely lehetővé teszi a szoftverfejlesztők számára, hogy JavaScript webalkalmazásokat hozzanak létre folyamatábrák egyszerű létrehozásához és kezeléséhez. A Flowy.js egy nagyon szép és felhasználóbarát folyamatábra-készítő, és könnyen integrálható más könyvtárakkal. A könyvtár segít a fejlesztőknek automatizálási szoftverek, gondolattérkép-eszközök, szervezeti diagramok, családfák és még sok más létrehozásában. Ez a Flowy könyvtár nyílt forráskódú, és az MIT licenc alatt érhető el, ami azt jelenti, hogy szabadon használható.

A Flowy könyvtár nemcsak egyszerűen megjeleníti a folyamatábrákat, hanem támogatja a teljes fogd és vidd szerkesztőt is nagyszerű felülettel, számos testreszabási lehetőséggel, gesztusesemény figyelőkkel és egyéb csodálatos funkciókkal. Néhány ilyen funkció magában foglalja az automatikus rögzítést, az automatikus görgetést, a blokkok átrendezését, a blokkok kiválasztását és eltávolítását, az automatikus blokkközpontosítást, a meglévő fájlok importálását és használatát, a mobil támogatást, a blokkok egyszerű létrehozását, a feltételes rögzítést és így tovább.

Previous Next

Kezdő lépések a Flowyval

A Flowy könyvtár telepítésének javasolt módja az NPM használata. Kérjük, használja a következő parancsot a zökkenőmentes telepítés érdekében

A Flowy telepítése NPM-en keresztül

  npm install flowy

Flowy klónozása a GIT tárolón keresztül

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

Folyamatábra létrehozása húzással JavaScripten keresztül

A Flowy Library lehetővé teszi a szoftverfejlesztők számára, hogy új folyamatábrát hozzanak létre JavaScript-alkalmazásaikon belül.A könyvtár támogatja egy reszponzív, professzionális folyamatábra létrehozását a drag the drop funkció használatával. Először is létre kell hoznia egy elemet a folyamatábra tárolására. Ezt követően létre kell hozni egy előre meghatározott blokkot, amely húzással beilleszthető a folyamatábrába.Könnyedén módosíthatja a tér b/t elemek kezelését, a blokk áthelyezését, a blokk szerkesztését, a nem kívánt blokkok eltávolítását stb..

Folyamatábra létrehozása ingyenes JavaScript-könyvtár segítségével


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

Hozzáadás és amp; Csomópont kezelése JavaScript-en keresztül

A nyílt forráskódú Flowy Library támogatja az új csomópontok programozott hozzáadását a JavaScript-alkalmazásokon belül. A könyvtár lehetővé teszi a szoftverprogramozók számára, hogy először megtervezzék a blokkot, majd ezt követően egyszerűen exportálhatják a tervfájlt, és elmenthetik a támogatott fájlformátumba. A szoftverfejlesztők számára lehetőséget ad a meglévő blokk importálására, módosítására és visszamentésére a választott helyre, mindössze néhány sornyi kóddal. A flowy csapat a diagram dinamikus generálásán is dolgozik, és hamarosan ez is része lesz.

Hogyan lehet új csomópontot hozzáadni egy folyamatábrához JavaScript-könyvtár használatával?

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

Importálja a folyamatábra adatait JavaScripten keresztül

A nyílt forráskódú Flowy Library lehetővé teszi a szoftverfejlesztők számára, hogy importálják a folyamatábra adatait saját alkalmazásaikba.A könyvtár támogatja a teljes folyamatábrák egyszerű importálását. Ennek a módszernek a használatakor ügyeljen arra, hogy a bemenet teljesen megbízható legyen, mert ez a módszer nem okozhat érzékenységet a rendszerben. Lehetővé teszi a folyamatábra adatainak objektumként és JSON-karakterláncként történő lekérését is.

Hogyan importálhatjuk a folyamatábra adatait JavaScript API használatával?

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);
 Magyar