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

Бібліотека JavaScript для створення та редагування блок-схем у веб-програмах

API JavaScript з відкритим вихідним кодом для створення веб-програм, що дозволяє з легкістю створювати чудові блок-схеми та керувати ними.

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);
 Українська