1. Məhsullar
  2.   Diaqram
  3.   JavaScript
  4.   Flowy
 
  

Veb Tətbiqlərində Flowchart yaratmaq və redaktə etmək üçün JavaScript Kitabxanası

Asanlıqla zəhmli axın qrafiklərini yaratmağa və idarə etməyə imkan verən Veb Tətbiqləri yaratmaq üçün Açıq Mənbəli JavaScript API.

Flowy proqram tərtibatçılarına asanlıqla axın qrafiklərini yaratmaq və idarə etmək üçün JavaScript veb proqramları yaratmağa imkan verən çox faydalı kitabxanadır. Flowy.js olduqca gözəl və istifadəçi dostu bir axın qrafiki qurucusudur və digər kitabxanalarla asanlıqla inteqrasiya oluna bilər. Kitabxana tərtibatçılara avtomatlaşdırma proqramı, zehni xəritələşdirmə alətləri, təşkilat sxemləri, ailə ağacları və daha çox şey yaratmağa kömək edir. Bu Flowy kitabxanası açıq mənbədir və MIT lisenziyası altında mövcuddur, yəni ondan sərbəst istifadə edilə bilər.

Flowy kitabxanası təkcə axın qrafiklərini asanlıqla nümayiş etdirmir, həm də əla interfeys, çoxlu fərdiləşdirmə seçimləri, jest hadisəsi dinləyiciləri və digər heyrətamiz xüsusiyyətlərə malik tam sürüklə və burax redaktorunu dəstəkləyir. Bu funksiyalardan bəzilərinə Avtomatik snapping dəstəyi, avtomatik sürüşdürmə, blokların yenidən təşkili, blokların seçilməsi və çıxarılması, avtomatik blokun mərkəzləşdirilməsi, mövcud faylların idxalı və istifadəsi, mobil dəstək, bloklarınızı asan yaratmaq, şərti snapping və s. daxildir.

Previous Next

Flowy ilə işə başlamaq

Flowy kitabxanasını quraşdırmanın tövsiyə olunan yolu NPM-dən istifadə etməkdir. Düzgün quraşdırma üçün aşağıdakı əmrdən istifadə edin

NPM vasitəsilə Flowy quraşdırın

  npm install flowy

GIT Repository vasitəsilə Flowy-ni klonlayın

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

JavaScript vasitəsilə Çək və Bırak istifadə edərək axın cədvəli yaradın

Flowy Library proqram tərtibatçılarına JavaScript tətbiqləri daxilində yeni axın qrafiki yaratmaq imkanı verir.Kitabxana sürükləmə vasitəsindən istifadə edərək cavabdeh, peşəkar axın cədvəlinin yaradılması üçün dəstəyi daxil etmişdir. Birincisi, axın sxemini saxlamaq üçün element yaratmalı ola bilərsiniz. Bundan sonra, onu sürükleyip buraxmaqla axın sxeminə daxil edilə bilən əvvəlcədən təyin edilmiş blok yaratmalısınız.Boşluq b/t elementlərini idarə etmək, bloku dəyişdirmək, bloku redaktə etmək, arzuolunmaz blokları silmək və s. üçün asanlıqla dəyişikliklər edə bilərsiniz.

Pulsuz JavaScript Kitabxanası vasitəsilə Flowchart yaradın


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

Əlavə & JavaScript vasitəsilə qovşağın idarə edilməsi

Açıq mənbəli Flowy Kitabxanası JavaScript proqramları daxilində proqramlı şəkildə yeni qovşaqların əlavə edilməsi üçün dəstəyi ehtiva edir. Kitabxana proqram proqramçılarına əvvəlcə bloku dizayn etməyə imkan verir və bundan sonra siz dizayn faylını asanlıqla ixrac edə və dəstəklənən fayl formatında saxlaya bilərsiniz. O, həmçinin proqram tərtibatçılarına mövcud bloku idxal etmək, ona dəyişikliklər etmək və sadəcə bir neçə sətir kodla onu yenidən seçdikləri yerə saxlamaq imkanı verir. Axşamlı komanda həmçinin diaqramın dinamik generasiyası üzərində işləyir və tezliklə onun bir hissəsi olacaq.

JavaScript Kitabxanasından istifadə edərək Flowchart-a Yeni Node necə əlavə etmək olar?

// 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 vasitəsilə axın cədvəlinin məlumatlarını idxal edin

Açıq mənbəli Flowy Kitabxanası proqram tərtibatçılarına öz tətbiqləri daxilində axın cədvəlinin məlumatlarını idxal etmək imkanı verir.Kitabxana bütün axın qrafiklərini asanlıqla idxal etmək üçün dəstəyi daxil etmişdir. Bu metoddan istifadə edərkən, lütfən, girişin tamamilə etibarlı olduğuna əmin olun, bu üsul sisteminizə həssaslıq gətirə bilməsin. O, həmçinin JSON sətri kimi, axın cədvəli məlumatlarını obyekt kimi əldə etməyə imkan verir.

JavaScript API istifadə edərək Flowchart Datasını necə idxal etmək olar?

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);
 Azəri