1. Produk
  2.   Diagram
  3.   JavaScript
  4.   Flowy
 
  

Pustaka JavaScript untuk Membuat & Mengedit Diagram Alir di Aplikasi Web

API JavaScript Sumber Terbuka untuk Membuat Aplikasi Web yang memungkinkan pembuatan dan pengelolaan diagram alur yang menakjubkan dengan mudah.

Flowy adalah pustaka yang sangat berguna yang memungkinkan pengembang perangkat lunak membuat aplikasi web JavaScript untuk membuat dan mengelola diagram alur dengan mudah. ​​Flowy.js adalah pembuat diagram alur yang cukup bagus dan mudah digunakan serta dapat dengan mudah diintegrasikan dengan pustaka lain. Pustaka ini membantu pengembang membuat perangkat lunak otomatisasi, alat pemetaan pikiran, bagan organisasi, silsilah keluarga, dan banyak lagi. Pustaka Flowy ini bersifat sumber terbuka dan tersedia di bawah lisensi MIT yang berarti dapat digunakan secara bebas.

Pustaka Flowy tidak hanya menampilkan diagram alur dengan mudah, tetapi juga mendukung editor drag & drop lengkap dengan antarmuka yang hebat, banyak opsi penyesuaian, pendengar acara gestur, dan fitur menakjubkan lainnya. Beberapa fitur ini meliputi dukungan snapping otomatis, pengguliran otomatis, penataan ulang blok, memilih dan menghapus blok, pemusatan blok otomatis, mengimpor dan menggunakan file yang ada, dukungan seluler, mudah membuat blok, snapping bersyarat, dan sebagainya.

Previous Next

Memulai dengan Flowy

Cara yang disarankan untuk menginstal pustaka Flowy adalah menggunakan NPM. Gunakan perintah berikut untuk instalasi yang lancar

Instal Flowy melalui NPM

  npm install flowy

Clone Flowy via GIT Repository

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

Buat Diagram Alir menggunakan Seret dan Lepas melalui JavaScript

Pustaka Flowy memberi pengembang perangkat lunak kemampuan untuk membuat diagram alir baru di dalam aplikasi JavaScript mereka. Pustaka ini telah menyertakan dukungan untuk pembuatan diagram alir responsif dan profesional menggunakan fasilitas seret dan lepas. Pertama, Anda perlu membuat elemen untuk menampung diagram alir. Setelah itu, Anda perlu membuat blok yang telah ditentukan sebelumnya yang dapat disisipkan ke dalam diagram alir dengan menyeret dan melepasnya. Anda dapat dengan mudah membuat perubahan seperti mengatur spasi antar elemen, memindahkan blok, mengedit blok, menghapus blok yang tidak diinginkan, dan banyak lagi.

Membuat Diagram Alir melalui Pustaka JavaScript Gratis


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

Menambahkan & Mengelola Node melalui JavaScript

Perpustakaan Flowy sumber terbuka telah menyertakan dukungan untuk menambahkan node baru secara terprogram di dalam aplikasi JavaScript. Pustaka ini memungkinkan pemrogram perangkat lunak untuk mendesain blok terlebih dahulu, lalu setelah itu, Anda dapat dengan mudah mengekspor berkas desain dan menyimpannya dalam format berkas yang didukung. Pustaka ini juga memberi pengembang perangkat lunak kemampuan untuk mengimpor blok yang ada, membuat perubahan padanya, dan menyimpannya kembali ke lokasi pilihan mereka hanya dengan beberapa baris kode. Tim flowy juga tengah mengerjakan pembuatan diagram secara dinamis dan segera hal itu akan menjadi bagian darinya.

Bagaimana Menambahkan Node Baru ke Diagram Alir 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,
});

Impor Data Diagram Alir melalui JavaScript

Perpustakaan Flowy sumber terbuka memberi pengembang perangkat lunak kemampuan untuk mengimpor data diagram alir ke dalam aplikasi mereka sendiri. Pustaka ini telah menyertakan dukungan untuk mengimpor seluruh diagram alir dengan mudah. ​​Saat menggunakan metode ini, pastikan bahwa masukan benar-benar tepercaya, bukan berarti metode ini dapat menimbulkan kerentanan pada sistem Anda. Metode ini juga memungkinkan mendapatkan data diagram alir sebagai objek serta string JSON.

Bagaimana cara mengimpor data diagram alir menggunakan 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);
 Indonesia