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. Библиотека включает поддержку создания адаптивной профессиональной блок-схемы с помощью функции перетаскивания. Сначала вам может потребоваться создать элемент для размещения блок-схемы. После этого вам необходимо создать предопределенный блок, который можно вставить в блок-схему, перетащив его. Вы можете легко вносить изменения, например управлять пробелами между элементами, перемещать блок, редактировать блок, удалять нежелательные блоки и многое другое.

Создание блок-схемы с помощью бесплатной библиотеки 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.

Как импортировать данные Flowchart с помощью 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);
 Русский