1. Tuotteet
  2.   Kaavio
  3.   JavaScript
  4.   Flowy
 
  

JavaScript-kirjasto vuokaavioiden luomiseen ja muokkaamiseen Web Appsissa

Avoimen lähdekoodin JavaScript-sovellusliittymä verkkosovellusten luomiseen, jonka avulla voit luoda ja hallita mahtavia vuokaavioita helposti.

Flowy on erittäin hyödyllinen kirjasto, jonka avulla ohjelmistokehittäjät voivat luoda JavaScript-verkkosovelluksia vuokaavioiden luomiseen ja hallintaan helposti. Flowy.js on melko mukava ja käyttäjäystävällinen vuokaavion rakentaja, ja se voidaan helposti integroida muihin kirjastoihin. Kirjasto auttaa kehittäjiä luomaan automaatioohjelmistoja, mielenkartoitustyökaluja, organisaatiokaavioita, sukupuita ja paljon muuta. Tämä Flowy-kirjasto on avoimen lähdekoodin ja saatavilla MIT-lisenssillä, mikä tarkoittaa, että sitä voidaan käyttää vapaasti.

Flowy-kirjasto ei ainoastaan ​​näytä helposti vuokaavioita, vaan tukee myös täydellistä vedä ja pudota -editoria, jossa on loistava käyttöliittymä, paljon mukautusvaihtoehtoja, eletapahtumien kuuntelijoita ja muita upeita ominaisuuksia. Joitakin näistä ominaisuuksista ovat automaattinen napsautustuki, automaattinen vieritys, lohkojen uudelleenjärjestely, lohkojen valinta ja poistaminen, automaattinen lohkojen keskitys, olemassa olevien tiedostojen tuonti ja käyttö, mobiilituki, lohkojen helppo luominen, ehdollinen napsautus ja niin edelleen.

Previous Next

Flowyn käytön aloittaminen

Suositeltu tapa asentaa Flowy-kirjasto on käyttää NPM:ää. Käytä seuraavaa komentoa sujuvaan asennukseen

Asenna Flowy NPM:n kautta

  npm install flowy

Kloonaa Flowy GIT-varaston kautta

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

Vuokaavion luominen vetämällä ja pudottamalla JavaScriptin avulla

Flowy Library antaa ohjelmistokehittäjille mahdollisuuden luoda uuden vuokaavion JavaScript-sovellustensa sisään.Kirjastossa on tuki responsiivisen, ammattimaisen vuokaavion luomiseen vedä pudottamalla -ominaisuuden avulla. Ensin sinun on ehkä luotava elementti vuokaavion säilyttämiseksi. Sen jälkeen sinun on luotava ennalta määritetty lohko, joka voidaan lisätä vuokaavioon vetämällä ja pudottamalla.Voit helposti tehdä muutoksia, kuten hallita space b/t -elementtejä, siirtää lohkoa, muokata lohkoa, poistaa ei-toivottuja lohkoja ja paljon muuta.

Luo vuokaavio ilmaisen JavaScript-kirjaston kautta


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

Lisääminen & Solmun hallinta JavaScriptin kautta

Avoimen lähdekoodin Flowy Library sisältää tuen uusien solmujen lisäämiseen ohjelmallisesti JavaScript-sovelluksiin. Kirjaston avulla ohjelmoijat voivat ensin suunnitella lohkon ja sen jälkeen voit helposti viedä suunnittelutiedoston ja tallentaa sen tuettuun tiedostomuotoon. Se antaa ohjelmistokehittäjille myös mahdollisuuden tuoda olemassa oleva lohko, tehdä siihen muutoksia ja tallentaa se takaisin haluamaansa sijaintiin vain muutamalla koodirivillä. Flowy-tiimi työskentelee myös kaavion dynaamisen luomisen parissa, ja pian se on osa sitä.

Miten lisätään uusi solmu vuokaavioon JavaScript-kirjaston avulla?

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

Tuo vuokaavion tiedot JavaScriptin kautta

Avoimen lähdekoodin Flowy Library antaa ohjelmistokehittäjille mahdollisuuden tuoda vuokaavion tiedot omiin sovelluksiinsa.Kirjastossa on tuki kokonaisten vuokaavioiden tuomiseen helposti. Kun käytät tätä menetelmää, varmista, että syöte on ehdottoman luotettava, sillä tämä menetelmä ei voi tuoda herkkyyttä järjestelmääsi. Se mahdollistaa myös vuokaavion tietojen saamisen objektina sekä JSON-merkkijonona.

Kuinka tuodaan vuokaavion tiedot JavaScript API:n avulla?

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