1. Προϊόντα
  2.   Διάγραμμα
  3.   JavaScript
  4.   Flowy
 
  

Βιβλιοθήκη JavaScript για δημιουργία και επεξεργασία διαγραμμάτων ροής σε εφαρμογές Ιστού

Open Source JavaScript API για τη δημιουργία εφαρμογών Ιστού που επιτρέπει τη δημιουργία και τη διαχείριση εκπληκτικών διαγραμμάτων ροής με ευκολία.

Το Flowy είναι μια πολύ χρήσιμη βιβλιοθήκη που επιτρέπει στους προγραμματιστές λογισμικού να δημιουργούν εφαρμογές ιστού JavaScript για τη δημιουργία και τη διαχείριση διαγραμμάτων ροής με ευκολία. Το Flowy.js είναι ένα πολύ ωραίο και φιλικό προς το χρήστη πρόγραμμα δημιουργίας διαγραμμάτων ροής και μπορεί εύκολα να ενσωματωθεί με άλλες βιβλιοθήκες. Η βιβλιοθήκη βοηθά τους προγραμματιστές να δημιουργήσουν λογισμικό αυτοματισμού, εργαλεία χαρτογράφησης μυαλού, οργανογράμματα, οικογενειακά δέντρα και πολλά άλλα. Αυτή η βιβλιοθήκη Flowy είναι ανοιχτού κώδικα και διατίθεται υπό την άδεια MIT που σημαίνει ότι μπορεί να χρησιμοποιηθεί ελεύθερα.

Η βιβλιοθήκη Flowy όχι μόνο εμφανίζει εύκολα διαγράμματα ροής, αλλά υποστηρίζει επίσης ένα πλήρες πρόγραμμα επεξεργασίας μεταφοράς και απόθεσης με εξαιρετική διεπαφή, πολλές επιλογές προσαρμογής, προγράμματα ακρόασης συμβάντων με χειρονομίες και άλλες εκπληκτικές δυνατότητες. Ορισμένες από αυτές τις λειτουργίες περιλαμβάνουν υποστήριξη αυτόματης απόσπασης, αυτόματη κύλιση, αναδιάταξη μπλοκ, επιλογή και αφαίρεση μπλοκ, αυτόματο κεντράρισμα μπλοκ, εισαγωγή και χρήση υπαρχόντων αρχείων, υποστήριξη για κινητά, εύκολη δημιουργία των μπλοκ σας, απόσπαση υπό όρους και ούτω καθεξής.

Previous Next

Ξεκινώντας με το Flowy

Ο προτεινόμενος τρόπος εγκατάστασης της βιβλιοθήκης Flowy είναι η χρήση NPM. Χρησιμοποιήστε την ακόλουθη εντολή για ομαλή εγκατάσταση

Εγκαταστήστε το Flowy μέσω NPM

  npm install flowy

Κλωνοποίηση Flowy μέσω αποθετηρίου GIT

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

Δημιουργία διαγράμματος ροής χρησιμοποιώντας μεταφορά και απόθεση μέσω JavaScript

Η Βιβλιοθήκη Flowy δίνει στους προγραμματιστές λογισμικού τη δυνατότητα να δημιουργήσουν ένα νέο διάγραμμα ροής μέσα στις εφαρμογές τους JavaScript.Η βιβλιοθήκη έχει συμπεριλάβει υποστήριξη για τη δημιουργία ενός επαγγελματικού διαγράμματος ροής με απόκριση, χρησιμοποιώντας τη δυνατότητα drag the drop. Αρχικά, μπορεί να χρειαστεί να δημιουργήσετε ένα στοιχείο για να κρατήσετε το διάγραμμα ροής. Μετά από αυτό, πρέπει να δημιουργήσετε ένα προκαθορισμένο μπλοκ που μπορεί να εισαχθεί στο διάγραμμα ροής σύροντάς το και αποθέτοντας το.Μπορείτε εύκολα να κάνετε αλλαγές όπως η διαχείριση στοιχείων b/t χώρου, η μετατόπιση ενός μπλοκ, η επεξεργασία του μπλοκ, η κατάργηση των ανεπιθύμητων μπλοκ και πολλά άλλα.

Δημιουργία διαγράμματος ροής μέσω δωρεάν βιβλιοθήκης JavaScript


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

Προσθήκη & Διαχείριση κόμβου μέσω JavaScript

Η Open Source Flowy Library έχει συμπεριλάβει υποστήριξη για την προσθήκη νέων κόμβων μέσω προγραμματισμού εντός εφαρμογών JavaScript. Η βιβλιοθήκη επιτρέπει στους προγραμματιστές λογισμικού να σχεδιάσουν πρώτα το μπλοκ και μετά από αυτό, μπορείτε εύκολα να εξαγάγετε το αρχείο σχεδίασης και να το αποθηκεύσετε στην υποστηριζόμενη μορφή αρχείου. Δίνει επίσης στους προγραμματιστές λογισμικού τη δυνατότητα να εισαγάγουν το υπάρχον μπλοκ, να κάνουν αλλαγές σε αυτό και να το αποθηκεύσουν πίσω στην τοποθεσία της επιλογής τους με λίγες μόνο γραμμές κώδικα. Η ομάδα flowy εργάζεται επίσης στη δυναμική δημιουργία του διαγράμματος και σύντομα θα είναι μέρος του.

Πώς να προσθέσετε νέο κόμβο σε ένα διάγραμμα ροής χρησιμοποιώντας τη βιβλιοθήκη 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,
});

Εισαγωγή δεδομένων διαγράμματος ροής μέσω JavaScript

Η Open Source Flowy Library δίνει στους προγραμματιστές λογισμικού τη δυνατότητα να εισάγουν τα δεδομένα του διαγράμματος ροής μέσα στις δικές τους εφαρμογές.Η βιβλιοθήκη περιλαμβάνει υποστήριξη για την εύκολη εισαγωγή ολόκληρων διαγραμμάτων ροής. Όταν χρησιμοποιείτε αυτήν τη μέθοδο, βεβαιωθείτε ότι η είσοδος είναι απολύτως αξιόπιστη, όχι επομένως αυτή η μέθοδος μπορεί να προκαλέσει ευαισθησία στο σύστημά σας. Επιτρέπει επίσης τη λήψη των δεδομένων του διαγράμματος ροής ως αντικείμενο καθώς και ως συμβολοσειρά JSON.

Πώς να εισαγάγετε δεδομένα του διαγράμματος ροής χρησιμοποιώντας το 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);
 Ελληνικά