1. Продукти
  2.   Диаграма
  3.   JavaScript
  4.   Flowy
 
  

JavaScript библиотека за създаване и редактиране на блок-схеми в уеб приложения

JavaScript API с отворен код за създаване на уеб приложения, които позволяват генериране и управление на страхотни блок-схеми с лекота.

Flowy е много полезна библиотека, която позволява на разработчиците на софтуер да създават JavaScript уеб приложения за създаване и управление на блок-схеми с лекота. Flowy.js е доста приятен и удобен за използване създател на блок-схеми и може лесно да се интегрира с други библиотеки. Библиотеката помага на разработчиците да създават софтуер за автоматизация, инструменти за картографиране на ума, организационни диаграми, родословни дървета и много други. Тази библиотека Flowy е с отворен код и се предлага под лиценза на MIT, което означава, че може да се използва свободно.

Библиотеката Flowy не само показва лесно блок-схеми, но също така поддържа пълен редактор с плъзгане и пускане със страхотен интерфейс, много опции за персонализиране, слушатели на събития на жестове и други невероятни функции. Някои от тези функции включват поддръжка за автоматично прихващане, автоматично превъртане, пренареждане на блокове, избиране и премахване на блокове, автоматично центриране на блокове, импортиране и използване на съществуващи файлове, мобилна поддръжка, лесно създаване на вашите блокове, условно прихващане и т.н.

Previous Next

Първи стъпки с Flowy

Препоръчителният начин за инсталиране на библиотеката Flowy е използването на NPM. Моля, използвайте следната команда за гладка инсталация

Инсталирайте Flowy чрез NPM

  npm install flowy

Клонирайте Flowy чрез GIT хранилище

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

Създаване на блок-схема чрез плъзгане и пускане чрез JavaScript

Библиотеката Flowy дава възможност на разработчиците на софтуер да създават нова блок-схема в своите JavaScript приложения.Библиотеката включва поддръжка за създаване на адаптивна, професионална блок-схема с помощта на възможността за плъзгане и пускане. Първо, може да се наложи да създадете елемент, който да държи блок-схемата. След това трябва да създадете предварително дефиниран блок, който може да бъде вмъкнат в блок-схемата чрез плъзгане и пускане.Можете лесно да правите промени, като например управление на пространствени b/t елементи, изместване на блок, редактиране на блок, премахване на нежелани блокове и др.

Създаване на блок-схема чрез безплатна JavaScript библиотека


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

Добавяне на & Управление на възел чрез JavaScript

Библиотеката Flowy с отворен код включва поддръжка за програмно добавяне на нови възли в приложения на JavaScript. Библиотеката позволява на софтуерните програмисти първо да проектират блока и след това можете лесно да експортирате файла с дизайна и да го запишете в поддържания файлов формат. Той също така дава на разработчиците на софтуер силата да импортират съществуващия блок, да правят промени в него и да го запазват обратно на избраното от тях място само с няколко реда код. Екипът на Flowy също работи върху динамичното генериране на диаграмата и скоро ще бъде част от нея.

Как да добавите нов възел към блок-схема с помощта на 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,
});

Импортиране на данни от блок-схема чрез JavaScript

Библиотеката Flowy с отворен код дава възможност на разработчиците на софтуер да импортират данните от блок-схемата в собствените си приложения.Библиотеката включва поддръжка за лесно импортиране на цели блок-схеми. Когато използвате този метод, моля, уверете се, че входът е абсолютно надежден, не е така, че този метод може да доведе до податливост на вашата система. Той също така позволява получаване на данните от блок-схемата като обект, както и JSON низ.

Как да импортирате данни от блок-схема с помощта на 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);
 Български