ওয়েব অ্যাপে ফ্লোচার্ট তৈরি ও সম্পাদনা করতে জাভাস্ক্রিপ্ট লাইব্রেরি

NPM এর মাধ্যমে Flowy ইনস্টল করুন

  npm install flowy

GIT সংগ্রহস্থলের মাধ্যমে ক্লোন ফ্লোয়

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

ফ্রি জাভাস্ক্রিপ্ট লাইব্রেরির মাধ্যমে ফ্লোচার্ট তৈরি করুন

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

কিভাবে জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করে একটি ফ্লোচার্টে নতুন নোড যোগ করবেন?

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

জাভাস্ক্রিপ্ট 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);