वेब ऐप्स में फ़्लोचार्ट बनाने और संपादित करने के लिए जावास्क्रिप्ट लाइब्रेरी

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

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