JavaScript-bibliotheek voor het maken en bewerken van stroomdiagrammen in web-apps

Aan de slag met Flowy

De aanbevolen manier om de Flowy-bibliotheek te installeren is met behulp van NPM. Gebruik de volgende opdracht voor een soepele installatie

  npm install flowy

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

Stroomdiagram maken met slepen en neerzetten via JavaScript

De Flowy-bibliotheek biedt softwareontwikkelaars de mogelijkheid om een ​​nieuw stroomdiagram te maken in hun JavaScript-apps. De bibliotheek heeft ondersteuning opgenomen voor het maken van een responsief, professioneel stroomdiagram met behulp van de drag-and-drop-functie. Eerst moet u een element maken om het stroomdiagram vast te houden. Daarna moet u een vooraf gedefinieerd blok maken dat in het stroomdiagram kan worden ingevoegd door het te slepen en neer te zetten. U kunt eenvoudig wijzigingen aanbrengen, zoals het beheren van ruimte tussen elementen, het verplaatsen van een blok, het bewerken van een blok, het verwijderen van ongewenste blokken en meer.

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

Node toevoegen en beheren via JavaScript

De open source Flowy Library heeft ondersteuning toegevoegd voor het programmatisch toevoegen van nieuwe nodes in JavaScript-applicaties. De bibliotheek stelt softwareprogrammeurs in staat om eerst het blok te ontwerpen en daarna kunt u het ontwerpbestand eenvoudig exporteren en opslaan in het ondersteunde bestandsformaat. Het geeft softwareontwikkelaars ook de mogelijkheid om het bestaande blok te importeren, er wijzigingen in aan te brengen en het terug op te slaan op de locatie van hun keuze met slechts een paar regels code. Het flowy-team werkt ook aan de dynamische generatie van het diagram en binnenkort zal het daar deel van uitmaken.

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

Importeer stroomdiagramgegevens via JavaScript

De open source Flowy Library biedt softwareontwikkelaars de mogelijkheid om de gegevens van het stroomdiagram te importeren in hun eigen applicaties. De bibliotheek heeft ondersteuning opgenomen voor het eenvoudig importeren van hele stroomdiagrammen. Zorg er bij het gebruik van deze methode voor dat de invoer absoluut vertrouwd is, anders kan deze methode kwetsbaarheid in uw systeem brengen. Het maakt het ook mogelijk om de stroomdiagramgegevens te verkrijgen als een object en als JSON-string.

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