JavaScript-Bibliothek zum Erstellen und Bearbeiten von Flussdiagrammen in Web-Apps

Erste Schritte mit Flowy

Die empfohlene Methode zur Installation der Flowy-Bibliothek ist die Verwendung von NPM. Bitte verwenden Sie den folgenden Befehl für eine reibungslose Installation

  npm install flowy

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

Flussdiagramm per Drag & Drop über JavaScript erstellen

Die Flowy-Bibliothek bietet Softwareentwicklern die Möglichkeit, ein neues Flussdiagramm in ihren JavaScript-Apps zu erstellen. Die Bibliothek unterstützt die Erstellung eines reaktionsfähigen, professionellen Flussdiagramms per Drag & Drop. Zuerst müssen Sie ein Element erstellen, das das Flussdiagramm enthält. Danach müssen Sie einen vordefinierten Block erstellen, der per Drag & Drop in das Flussdiagramm eingefügt werden kann. Sie können problemlos Änderungen vornehmen, z. B. den Abstand zwischen Elementen verwalten, einen Block verschieben, einen Block bearbeiten, unerwünschte Blöcke entfernen und vieles mehr.

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

Knoten über JavaScript hinzufügen und verwalten

Die Open-Source-Bibliothek Flowy unterstützt das programmgesteuerte Hinzufügen neuer Knoten in JavaScript-Anwendungen. Die Bibliothek ermöglicht es Softwareprogrammierern, zuerst den Block zu entwerfen. Anschließend können Sie die Entwurfsdatei einfach exportieren und im unterstützten Dateiformat speichern. Außerdem haben Softwareentwickler die Möglichkeit, den vorhandenen Block zu importieren, Änderungen daran vorzunehmen und ihn mit nur ein paar Codezeilen am gewünschten Speicherort wieder zu speichern. Das Flowy-Team arbeitet auch an der dynamischen Generierung des Diagramms und bald wird es Teil davon sein.

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

Flussdiagrammdaten über JavaScript importieren

Die Open-Source-Bibliothek Flowy bietet Softwareentwicklern die Möglichkeit, die Daten des Flussdiagramms in ihre eigenen Anwendungen zu importieren. Die Bibliothek unterstützt den einfachen Import ganzer Flussdiagramme. Stellen Sie bei Verwendung dieser Methode sicher, dass die Eingabe absolut vertrauenswürdig ist, da diese Methode sonst Ihr System angreifbar machen kann. Sie ermöglicht außerdem den Abruf der Flussdiagrammdaten als Objekt sowie als JSON-Zeichenfolge.

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