1. Productos
  2.   Diagrama
  3.   JavaScript
  4.   Flowy
 
  

Bibliothèque JavaScript pour créer et modifier des organigrammes dans des applications Web

API JavaScript Open Source pour créer des applications Web qui permet de générer et de gérer facilement des organigrammes impressionnants.

Flowy est une bibliothèque très utile qui permet aux développeurs de logiciels de créer des applications Web JavaScript pour créer et gérer des organigrammes en toute simplicité. Flowy.js est un générateur d'organigrammes assez agréable et convivial et peut être facilement intégré à d'autres bibliothèques. La bibliothèque aide les développeurs à créer des logiciels d'automatisation, des outils de cartographie mentale, des organigrammes, des arbres généalogiques et bien plus encore. Cette bibliothèque Flowy est open source et disponible sous la licence MIT, ce qui signifie qu'elle peut être utilisée librement.

La bibliothèque Flowy permet non seulement d'afficher facilement des organigrammes, mais prend également en charge un éditeur glisser-déposer complet avec une excellente interface, de nombreuses options de personnalisation, des écouteurs d'événements gestuels et d'autres fonctionnalités étonnantes. Certaines de ces fonctionnalités incluent la prise en charge de l'accrochage automatique, le défilement automatique, le réarrangement des blocs, la sélection et la suppression de blocs, le centrage automatique des blocs, l'importation et l'utilisation de fichiers existants, la prise en charge mobile, la création facile de vos blocs, l'accrochage conditionnel, etc.

Previous Next

Démarrage avec Flowy

La méthode recommandée pour installer la bibliothèque Flowy est d'utiliser NPM. Veuillez utiliser la commande suivante pour une installation fluide

Installer Flowy via NPM

  npm install flowy

Cloner Flowy via le référentiel GIT

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

Créer un organigramme par glisser-déposer via JavaScript

La bibliothèque Flowy offre aux développeurs de logiciels la possibilité de créer un nouvel organigramme dans leurs applications JavaScript. La bibliothèque prend en charge la création d'un organigramme réactif et professionnel à l'aide de la fonction glisser-déposer. Tout d'abord, vous devez créer un élément pour contenir l'organigramme. Ensuite, vous devez créer un bloc prédéfini qui peut être inséré dans l'organigramme en le faisant glisser et en le déposant. Vous pouvez facilement apporter des modifications pour gérer l'espace entre les éléments, déplacer un bloc, modifier un bloc, supprimer les blocs indésirables, etc.

Créer un organigramme via une bibliothèque JavaScript gratuite


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

Ajout et gestion de nœuds via JavaScript

La bibliothèque Open Source Flowy a inclus la prise en charge de l'ajout de nouveaux nœuds par programmation dans les applications JavaScript. La bibliothèque permet aux programmeurs de logiciels de concevoir d'abord le bloc, puis d'exporter facilement le fichier de conception et de l'enregistrer dans le format de fichier pris en charge. Elle donne également aux développeurs de logiciels la possibilité d'importer le bloc existant, d'y apporter des modifications et de le sauvegarder à l'emplacement de leur choix en quelques lignes de code seulement. L'équipe Flowy travaille également sur la génération dynamique du diagramme et il en fera bientôt partie.

Comment ajouter un nouveau nœud à un organigramme à l'aide de la bibliothèque 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,
});

Importer les données du diagramme de flux via JavaScript

La bibliothèque Open Source Flowy offre aux développeurs de logiciels la possibilité d'importer les données du diagramme de flux dans leurs propres applications. La bibliothèque a inclus la prise en charge de l'importation facile de diagrammes de flux entiers. Lorsque vous utilisez cette méthode, assurez-vous que l'entrée est absolument fiable, car cette méthode peut entraîner une vulnérabilité dans votre système. Elle permet également d'obtenir les données du diagramme de flux sous forme d'objet ainsi que de chaîne JSON.

Comment importer les données d'un organigramme à l'aide de 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);
 Español