1. Prodotti
  2.   Diagramma
  3.   JavaScript
  4.   Flowy
 
  

Libreria JavaScript per creare e modificare diagrammi di flusso nelle app Web

API JavaScript open source per creare applicazioni Web che consentono di generare e gestire facilmente diagrammi di flusso straordinari.

Flowy è una libreria molto utile che consente agli sviluppatori di software di creare app Web JavaScript per creare e gestire diagrammi di flusso con facilità. Flowy.js è un generatore di diagrammi di flusso piuttosto carino e intuitivo e può essere facilmente integrato con altre librerie. La libreria aiuta gli sviluppatori a creare software di automazione, strumenti di mappe mentali, organigrammi, alberi genealogici e molto altro. Questa libreria Flowy è open source e disponibile con licenza MIT, il che significa che può essere utilizzata liberamente.

La libreria Flowy non solo visualizza facilmente i diagrammi di flusso, ma supporta anche un editor drag & drop completo con un'interfaccia fantastica, molte opzioni di personalizzazione, listener di eventi gestuali e altre fantastiche funzionalità. Alcune di queste funzionalità includono il supporto per l'aggancio automatico, lo scorrimento automatico, la riorganizzazione dei blocchi, la selezione e la rimozione dei blocchi, la centratura automatica dei blocchi, l'importazione e l'utilizzo di file esistenti, il supporto mobile, la facilità di creazione dei blocchi, l'aggancio condizionale e così via.

Previous Next

Introduzione a Flowy

Il metodo consigliato per installare la libreria Flowy è tramite NPM. Per un'installazione senza problemi, utilizzare il seguente comando

Installa Flowy tramite NPM

  npm install flowy

Clona Flowy tramite repository GIT

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

Crea un diagramma di flusso tramite trascinamento e rilascio tramite JavaScript

La libreria Flowy offre agli sviluppatori software la possibilità di creare un nuovo diagramma di flusso all'interno delle loro app JavaScript. La libreria ha incluso il supporto per la creazione di un diagramma di flusso reattivo e professionale tramite la funzione di trascinamento e rilascio. Per prima cosa, potresti dover creare un elemento per contenere il diagramma di flusso. Dopodiché, devi creare un blocco predefinito che può essere inserito nel diagramma di flusso trascinandolo e rilasciandolo. Puoi facilmente apportare modifiche come gestire lo spazio tra gli elementi, spostare un blocco, modificare un blocco, rimuovere i blocchi indesiderati e altro ancora.

Crea un diagramma di flusso tramite la libreria JavaScript gratuita


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

Aggiunta e gestione di nodi tramite JavaScript

La libreria Flowy open source ha incluso il supporto per l'aggiunta di nuovi nodi a livello di programmazione all'interno di applicazioni JavaScript. La libreria consente ai programmatori software di progettare prima il blocco e poi, in seguito, di esportare facilmente il file di progettazione e salvarlo nel formato di file supportato. Offre inoltre agli sviluppatori software il potere di importare il blocco esistente, apportare modifiche e salvarlo nuovamente nella posizione desiderata con solo un paio di righe di codice. Il team di Flowy sta anche lavorando alla generazione dinamica del diagramma e presto ne farà parte.

Come aggiungere un nuovo nodo a un diagramma di flusso utilizzando la libreria JavaScript?

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

Importa i dati del diagramma di flusso tramite JavaScript

La libreria Open source Flowy offre agli sviluppatori software la possibilità di importare i dati del diagramma di flusso all'interno delle proprie applicazioni. La libreria ha incluso il supporto per importare interi diagrammi di flusso con facilità. Quando si utilizza questo metodo, assicurarsi che l'input sia assolutamente attendibile, altrimenti questo metodo può portare vulnerabilità nel sistema. Consente inoltre di ottenere i dati del diagramma di flusso come oggetto e come stringa JSON.

Come importare i dati del diagramma di flusso utilizzando l'API JavaScript?

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