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

JavaScript-bibliotek för att skapa och redigera flödesscheman i webbappar

Open Source JavaScript API för att skapa webbappar som gör det enkelt att generera och hantera fantastiska flödesscheman.

Flowy är ett mycket användbart bibliotek som gör det möjligt för mjukvaruutvecklare att skapa JavaScript-webbappar för att skapa och hantera flödesscheman med lätthet. Flowy.js är en ganska trevlig och användarvänlig flödesschemabyggare och kan enkelt integreras med andra bibliotek. Biblioteket hjälper utvecklare att skapa automatiseringsprogram, mindmapping-verktyg, organisationsdiagram, släktträd och mycket mer. Detta Flowy-bibliotek är öppen källkod och tillgängligt under MIT-licensen, vilket innebär att det kan användas fritt.

Flowwy-biblioteket visar inte bara enkelt flödesscheman utan stöder också en komplett dra & släpp-redigerare med ett fantastiskt gränssnitt, massor av anpassningsalternativ, gesthändelser och andra fantastiska funktioner. Några av dessa funktioner inkluderar stöd för automatisk snappning, automatisk rullning, omarrangering av block, välj och ta bort block, automatisk blockcentrering, import och använd befintliga filer, mobilstöd, lätt att skapa dina block, villkorlig snapping och så vidare.

Previous Next

Komma igång med Flowy

Det rekommenderade sättet att installera Flowy-biblioteket är att använda NPM. Använd följande kommando för en smidig installation

Installera Flowy via NPM

  npm install flowy

Klona Flowy via GIT Repository

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

Skapa flödesschema med dra och släpp via JavaScript

Flowwy Library ger mjukvaruutvecklare möjlighet att skapa ett nytt flödesschema i sina JavaScript-appar.Biblioteket har inkluderat stöd för att skapa ett lyhört, professionellt flödesschema med hjälp av dra och släpp-funktionen. Först kan du behöva skapa ett element för att hålla flödesschemat. Efter det måste du skapa ett fördefinierat block som kan infogas i flödesschemat genom att dra och släppa det.Du kan enkelt göra ändringar för att hantera space b/t-element, flytta ett block, redigera block, ta bort oönskade block och mer.

Skapa flödesschema 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);
        });

Lägga till & Hantera nod via JavaScript

Öppen källkod Flowy Library har inkluderat stöd för att lägga till nya noder programmatiskt inuti JavaScript-applikationer. Biblioteket tillåter programvaruprogrammerare att först designa blocket och sedan efter det kan du enkelt exportera designfilen och spara den i det filformat som stöds. Det ger också mjukvaruutvecklare möjlighet att importera det befintliga blocket, göra ändringar i det och spara det tillbaka till den plats de väljer med bara ett par rader kod. Det flytande teamet arbetar också med den dynamiska genereringen av diagrammet och snart kommer det att vara en del av det.

Hur lägger man till ny nod i ett flödesschema med 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,
});

Importera flödesschemans data via JavaScript

Öppen källkod Flowy Library ger mjukvaruutvecklare möjlighet att importera flödesschemats data till sina egna applikationer.Biblioteket har inkluderat stöd för att enkelt importera hela flödesscheman. När du använder den här metoden, se till att ingången är absolut pålitlig, det är inte så att den här metoden kan ge känslighet i ditt system. Det gör det också möjligt att hämta flödesschemadata som ett objekt såväl som JSON-sträng.

Hur importerar man flödesschemats data med 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);
 Svenska