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

Biblioteka JavaScript do tworzenia i edycji diagramów przepływu w aplikacjach internetowych

Otwarty interfejs API JavaScript do tworzenia aplikacji internetowych, który umożliwia łatwe generowanie i zarządzanie niesamowitymi diagramami przepływu.

Flowy to bardzo przydatna biblioteka, która umożliwia programistom tworzenie aplikacji internetowych JavaScript do łatwego tworzenia i zarządzania schematami blokowymi. Flowy.js to całkiem niezły i przyjazny dla użytkownika kreator schematów blokowych, który można łatwo zintegrować z innymi bibliotekami. Biblioteka pomaga programistom tworzyć oprogramowanie automatyzujące, narzędzia do tworzenia map myśli, schematy organizacyjne, drzewa genealogiczne i wiele więcej. Ta biblioteka Flowy jest dostępna na licencji MIT, co oznacza, że ​​można jej swobodnie używać.

Biblioteka Flowy nie tylko łatwo wyświetla schematy blokowe, ale także obsługuje kompletny edytor typu „przeciągnij i upuść” ze świetnym interfejsem, wieloma opcjami dostosowywania, nasłuchiwaczami zdarzeń gestów i innymi niesamowitymi funkcjami. Niektóre z tych funkcji obejmują obsługę automatycznego przyciągania, automatyczne przewijanie, przestawianie bloków, zaznaczanie i usuwanie bloków, automatyczne centrowanie bloków, importowanie i używanie istniejących plików, obsługę urządzeń mobilnych, łatwe tworzenie bloków, warunkowe przyciąganie itd.

Previous Next

Pierwsze kroki z Flowy

Zalecanym sposobem instalacji biblioteki Flowy jest użycie NPM. Aby instalacja przebiegła bezproblemowo, użyj następującego polecenia

Zainstaluj Flowy za pomocą NPM

  npm install flowy

Klonuj Flowy za pomocą repozytorium GIT

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

Tworzenie schematu blokowego za pomocą przeciągania i upuszczania za pomocą JavaScript

Biblioteka Flowy daje programistom możliwość tworzenia nowego schematu blokowego w ich aplikacjach JavaScript. Biblioteka zawiera obsługę tworzenia responsywnego, profesjonalnego schematu blokowego za pomocą funkcji przeciągnij i upuść. Najpierw musisz utworzyć element do przechowywania schematu blokowego. Następnie musisz utworzyć wstępnie zdefiniowany blok, który można wstawić do schematu blokowego, przeciągając go i upuszczając. Możesz łatwo wprowadzać zmiany, takie jak zarządzanie przestrzenią między elementami, przesuwanie bloku, edytowanie bloku, usuwanie niechcianych bloków i wiele więcej.

Utwórz schemat blokowy za pomocą bezpłatnej biblioteki 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);
        });

Dodawanie i zarządzanie węzłem za pomocą JavaScript

Biblioteka Open Source Flowy obejmuje obsługę dodawania nowych węzłów programowo w aplikacjach JavaScript. Biblioteka pozwala programistom oprogramowania najpierw zaprojektować blok, a następnie można łatwo wyeksportować plik projektu i zapisać go w obsługiwanym formacie pliku. Daje ona również programistom oprogramowania możliwość zaimportowania istniejącego bloku, wprowadzenia w nim zmian i zapisania go z powrotem w wybranej lokalizacji za pomocą zaledwie kilku linijek kodu. Zespół Flowy pracuje również nad dynamicznym generowaniem diagramu i wkrótce stanie się on jego częścią.

Jak dodać nowy węzeł do schematu blokowego za pomocą biblioteki 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,
});

Importuj dane diagramu przepływu za pomocą JavaScript

Biblioteka Open Source Flowy daje programistom możliwość importowania danych diagramu przepływu do ich własnych aplikacji. Biblioteka zawiera obsługę łatwego importowania całych diagramów przepływu. Podczas korzystania z tej metody upewnij się, że dane wejściowe są absolutnie zaufane, ponieważ ta metoda może spowodować podatność na ataki w systemie. Umożliwia ona również pobieranie danych diagramu przepływu jako obiektu, a także jako ciągu JSON.

Jak importować dane z diagramu przepływu za pomocą interfejsu 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);
 Polski