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

JavaScript-bibliotek til at oprette og redigere rutediagrammer i webapps

Open Source JavaScript API til at skabe webapps, der gør det nemt at generere og administrere fantastiske flowcharts.

Flowy er et meget nyttigt bibliotek, der gør det muligt for softwareudviklere at skabe JavaScript-webapps til at oprette og administrere flowcharts med lethed. Flowy.js er en ret flot og brugervenlig flowchart builder og kan nemt integreres med andre biblioteker. Biblioteket hjælper udviklere med at skabe automatiseringssoftware, mindmapping-værktøjer, organisationsdiagrammer, stamtræer og meget mere. Dette Flowy-bibliotek er open source og tilgængeligt under MIT-licensen, hvilket betyder, at det frit kan bruges.

Flowwy-biblioteket viser ikke kun nemt flowcharts, men understøtter også en komplet træk-og-slip-editor med en fantastisk grænseflade, masser af tilpasningsmuligheder, gestus-begivenhedslyttere og andre fantastiske funktioner. Nogle af disse funktioner inkluderer understøttelse af automatisk snapping, automatisk rulning, omarrangering af blokke, vælg og fjern blokke, automatisk blokcentrering, import og brug af eksisterende filer, mobilsupport, nem at oprette dine blokke, betinget snapping og så videre.

Previous Next

Kom godt i gang med Flowy

Den anbefalede måde at installere Flowy-biblioteket på er at bruge NPM. Brug venligst følgende kommando for en problemfri installation

Installer Flowy via NPM

  npm install flowy

Klon Flowy via GIT Repository

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

Opret rutediagram ved hjælp af træk og slip via JavaScript

The Flowy Library giver softwareudviklere mulighed for at oprette et nyt flowchart inde i deres JavaScript-apps.Biblioteket har inkluderet støtte til oprettelse af et responsivt, professionelt flowchart ved hjælp af træk og slip-funktionen. Først kan du være nødt til at oprette et element til at holde flowchartet. Derefter skal du oprette en foruddefineret blok, der kan indsættes i rutediagrammet ved at trække og slippe den.Du kan nemt foretage ændringer for at administrere space b/t-elementer, forskyde en blok, redigere blok, fjerne de uønskede blokke og mere.

Opret rutediagram 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);
        });

Tilføjelse af & Håndtering af node via JavaScript

Open source Flowy-biblioteket har inkluderet understøttelse til at tilføje nye noder programmatisk inde i JavaScript-applikationer. Biblioteket giver softwareprogrammører mulighed for først at designe blokken, og derefter kan du nemt eksportere designfilen og gemme den i det understøttede filformat. Det giver også softwareudviklere mulighed for at importere den eksisterende blok, foretage ændringer i den og gemme den tilbage til den placering, de selv vælger, med blot et par linjer kode. Det flowy team arbejder også på den dynamiske generering af diagrammet, og snart vil det være en del af det.

Hvordan tilføjer man ny node til et rutediagram ved hjælp af 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,
});

Importér flowcharts data via JavaScript

Open source Flowy Library giver softwareudviklere mulighed for at importere flowdiagrammets data i deres egne applikationer.Biblioteket har inkluderet understøttelse for let import af hele flowcharts. Når du bruger denne metode, skal du sørge for, at input er absolut tillid, det ikke så denne metode kan bringe modtagelighed ind i dit system. Det giver også mulighed for at få flowchartdata som et objekt såvel som JSON-streng.

Hvordan importeres flowcharts data ved hjælp af 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);
 Dansk