1. Produkter
  2.   Diagram
  3.   JavaScript
  4.   Flowy
 
  

JavaScript-bibliotek for å lage og redigere flytskjemaer i webapper

Open Source JavaScript API for å lage webapper som gjør det enkelt å generere og administrere fantastiske flytskjemaer.

Flowy er et veldig nyttig bibliotek som gjør det mulig for programvareutviklere å lage JavaScript-nettapper for å lage og administrere flytskjemaer med letthet. Flowy.js er en ganske fin og brukervennlig flytskjemabygger og kan enkelt integreres med andre biblioteker. Biblioteket hjelper utviklere med å lage automatiseringsprogramvare, tankekartverktøy, organisasjonskart, slektstrær og mye mer. Dette Flowy-biblioteket er åpen kildekode og tilgjengelig under MIT-lisensen, noe som betyr at det kan brukes fritt.

Flowy-biblioteket viser ikke bare enkelt flytskjemaer, men støtter også et komplett dra-og-slipp-redigeringsprogram med et flott grensesnitt, mange tilpasningsalternativer, lyttere til gesthendelser og andre fantastiske funksjoner. Noen av disse funksjonene inkluderer støtte for automatisk snapping, automatisk rulling, omorganisering av blokker, velg og fjern blokker, automatisk blokksentrering, import og bruk av eksisterende filer, mobilstøtte, enkel å lage blokker, betinget snapping og så videre.

Previous Next

Kom i gang med Flowy

Den anbefalte måten å installere Flowy-biblioteket på er å bruke NPM. Bruk følgende kommando for en jevn installasjon

Installer Flowy via NPM

  npm install flowy

Klon Flowy via GIT Repository

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

Lag flytskjema med Dra og slipp via JavaScript

The Flowy Library gir programvareutviklere muligheten til å lage et nytt flytskjema i JavaScript-appene deres.Biblioteket har inkludert støtte for å lage et responsivt, profesjonelt flytskjema ved å bruke dra-slipp-funksjonen. Først må du lage et element for å holde flytskjemaet. Etter det må du lage en forhåndsdefinert blokk som kan settes inn i flytskjemaet ved å dra og slippe den.Du kan enkelt gjøre endringer for å administrere space b/t-elementer, forskyve en blokk, redigere blokk, fjerne uønskede blokker og mer.

Lag flytskjema via gratis 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);
        });

Legg til & Administrere node via JavaScript

Open source Flowy Library har inkludert støtte for å legge til nye noder programmatisk inne i JavaScript-applikasjoner. Biblioteket lar programvareprogrammerere først designe blokken, og deretter kan du enkelt eksportere designfilen og lagre den i det støttede filformatet. Det gir også programvareutviklere muligheten til å importere den eksisterende blokken, gjøre endringer i den og lagre den tilbake til ønsket sted med bare et par linjer med kode. Det flytende teamet jobber også med den dynamiske genereringen av diagrammet, og snart vil det være en del av det.

Hvordan legge til ny node i et flytskjema ved hjelp av JavaScript-biblioteket?

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

Importer flytskjemadata via JavaScript

Open source Flowy Library gir programvareutviklere muligheten til å importere flytskjemaets data i sine egne applikasjoner.Biblioteket har inkludert støtte for enkel import av hele flytskjemaer. Når du bruker denne metoden, sørg for at inndataene er absolutt klarert, det er ikke slik at denne metoden kan bringe følsomhet inn i systemet ditt. Det gjør det også mulig å hente flytskjemadataene som et objekt så vel som JSON-streng.

Hvordan importerer du flytskjemadata ved hjelp av 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);
 Norsk