1. Produk
  2.   Gambar rajah
  3.   JavaScript
  4.   Flowy
 
  

Perpustakaan JavaScript untuk Mencipta & Mengedit Carta Aliran dalam Apl Web

API JavaScript Sumber Terbuka untuk Mencipta Apl Web yang membolehkan menjana dan mengurus carta alir yang hebat dengan mudah.

Flowy ialah perpustakaan yang sangat berguna yang membolehkan pembangun perisian mencipta apl web JavaScript untuk mencipta dan mengurus carta alir dengan mudah. Flowy.js ialah pembina carta alir yang cukup bagus dan mesra pengguna dan boleh disepadukan dengan mudah dengan perpustakaan lain. Perpustakaan membantu pembangun untuk mencipta perisian automasi, alat pemetaan minda, carta organisasi, salasilah keluarga dan banyak lagi. Pustaka Flowy ini adalah sumber terbuka dan tersedia di bawah lesen MIT yang bermaksud ia boleh digunakan secara bebas.

Pustaka Flowy bukan sahaja memaparkan carta alir dengan mudah tetapi juga menyokong editor seret & lepas yang lengkap dengan antara muka yang hebat, banyak pilihan penyesuaian, pendengar acara gerak isyarat dan ciri hebat lain. Beberapa ciri ini termasuk Sokongan snap automatik, tatal automatik, penyusunan semula blok, pilih dan alih keluar blok, pemusatan blok automatik, import dan gunakan fail sedia ada, sokongan mudah alih, mudah untuk membuat blok anda, snap bersyarat dan sebagainya.

Previous Next

Bermula dengan Flowy

Cara yang disyorkan untuk memasang pustaka Flowy adalah menggunakan NPM. Sila gunakan arahan berikut untuk pemasangan yang lancar

Pasang Flowy melalui NPM

  npm install flowy

Klon Flowy melalui Repositori GIT

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

Buat Carta Aliran menggunakan Seret dan Lepas melalui JavaScript

Pustaka Flowy memberi pembangun perisian keupayaan untuk mencipta carta alir baharu dalam apl JavaScript mereka.Perpustakaan ini telah menyertakan sokongan untuk penciptaan carta alir yang responsif dan profesional menggunakan kemudahan drag the drop. Pertama, anda perlu mencipta elemen untuk memegang carta alir. Selepas itu, anda perlu mencipta blok yang telah ditetapkan yang boleh dimasukkan ke dalam carta alir dengan menyeret dan menjatuhkannya.Anda boleh membuat perubahan dengan mudah seperti mengurus elemen ruang b/t, menggantikan blok, mengedit blok, mengalih keluar blok yang tidak diingini dan banyak lagi.

Buat Carta Aliran melalui Perpustakaan JavaScript Percuma


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

Menambah & Mengurus Nod melalui JavaScript

Pustaka Flowy sumber Terbuka telah menyertakan sokongan untuk menambah nod baharu secara pemprograman dalam aplikasi JavaScript. Perpustakaan membenarkan pengaturcara perisian untuk mereka bentuk blok dahulu dan kemudian selepas itu, anda boleh mengeksport fail reka bentuk dengan mudah dan menyimpannya dalam format fail yang disokong. Ia juga memberikan pembangun perisian kuasa untuk mengimport blok sedia ada, membuat perubahan padanya dan menyimpannya semula ke lokasi pilihan mereka dengan hanya beberapa baris kod. Pasukan flowy juga sedang mengusahakan penjanaan dinamik rajah dan tidak lama lagi ia akan menjadi sebahagian daripadanya.

Bagaimana untuk Menambah Nod Baharu pada Carta Aliran menggunakan Pustaka 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,
});

Import Data Carta Aliran melalui JavaScript

Pustaka Flowy sumber Terbuka memberi pembangun perisian keupayaan untuk mengimport data carta alir dalam aplikasi mereka sendiri.Perpustakaan telah menyertakan sokongan untuk mengimport keseluruhan carta alir dengan mudah. Apabila menggunakan kaedah ini, sila pastikan bahawa input benar-benar dipercayai, bukan supaya kaedah ini boleh membawa kerentanan ke dalam sistem anda. Ia juga membenarkan mendapatkan data carta alir sebagai objek serta rentetan JSON.

Bagaimana untuk Mengimport Data Carta Aliran menggunakan 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);
 Melayu