1. Ürün:% s
  2.   Diyagram
  3.   JavaScript
  4.   Flowy
 
  

Web Uygulamalarında Akış Şemaları Oluşturmak ve Düzenlemek için JavaScript Kütüphanesi

Harika akış şemalarını kolaylıkla oluşturmanıza ve yönetmenize olanak tanıyan Web Uygulamaları Oluşturmak için Açık Kaynaklı JavaScript API'si.

Flowy, yazılım geliştiricilerinin akış şemalarını kolayca oluşturmak ve yönetmek için JavaScript web uygulamaları oluşturmasını sağlayan çok kullanışlı bir kütüphanedir. Flowy.js oldukça hoş ve kullanıcı dostu bir akış şeması oluşturucusudur ve diğer kütüphanelerle kolayca entegre edilebilir. Kütüphane, geliştiricilerin otomasyon yazılımları, zihin haritalama araçları, organizasyon şemaları, aile ağaçları ve çok daha fazlasını oluşturmasına yardımcı olur. Bu Flowy kütüphanesi açık kaynaklıdır ve MIT lisansı altında mevcuttur, bu da özgürce kullanılabileceği anlamına gelir.

Flowy kütüphanesi yalnızca akış şemalarını kolayca görüntülemekle kalmaz, aynı zamanda harika bir arayüz, birçok özelleştirme seçeneği, hareket olay dinleyicileri ve diğer harika özelliklerle eksiksiz bir sürükle ve bırak düzenleyicisini de destekler. Bu özelliklerden bazıları şunlardır: Otomatik tutturma desteği, otomatik kaydırma, blokların yeniden düzenlenmesi, blokları seçme ve kaldırma, otomatik blok ortalama, mevcut dosyaları içe aktarma ve kullanma, mobil destek, bloklarınızı kolayca oluşturma, koşullu tutturma vb.

Previous Next

Flowy ile Başlarken

Flowy kütüphanesini kurmanın önerilen yolu NPM kullanmaktır. Sorunsuz bir kurulum için lütfen aşağıdaki komutu kullanın

Flowy'yi NPM aracılığıyla yükleyin

  npm install flowy

Flowy'yi GIT Deposu aracılığıyla klonlayın

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

JavaScript ile Sürükle ve Bırak ile Akış Şeması Oluşturun

Flowy Kütüphanesi, yazılım geliştiricilerine JavaScript uygulamalarının içinde yeni bir akış şeması oluşturma olanağı sağlar. Kütüphane, sürükle ve bırak özelliğini kullanarak duyarlı, profesyonel bir akış şeması oluşturma desteğini içerir. İlk olarak, akış şemasını tutacak bir öğe oluşturmanız gerekebilir. Daha sonra, sürükle ve bırak ile akış şemasına eklenebilecek önceden tanımlanmış bir blok oluşturmanız gerekir. Öğeler arasındaki alanı yönetmek, bir bloğu yerinden oynatmak, bloğu düzenlemek, istenmeyen blokları kaldırmak ve daha fazlası gibi değişiklikleri kolayca yapabilirsiniz.

Ücretsiz JavaScript Kütüphanesi ile Akış Şeması Oluşturun


        // 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 ile Düğüm Ekleme ve Yönetme

Açık kaynaklı Flowy Kütüphanesi, JavaScript uygulamalarının içine programatik olarak yeni düğümler ekleme desteğini içerir. Kütüphane, yazılım programcılarının önce bloğu tasarlamalarına ve ardından tasarım dosyasını kolayca dışa aktarıp desteklenen dosya biçiminde kaydetmelerine olanak tanır. Ayrıca yazılım geliştiricilerine mevcut bloğu içe aktarma, üzerinde değişiklikler yapma ve sadece birkaç satır kodla istedikleri yere geri kaydetme gücü verir. Flowy ekibi ayrıca diyagramın dinamik üretimi üzerinde çalışıyor ve yakında bunun bir parçası olacak.

JavaScript Kütüphanesi Kullanılarak Akış Şemasına Yeni Düğüm Nasıl Eklenir?

// 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 ile Akış Şeması Verilerini İçe Aktarma

Açık Kaynak Flowy Kütüphanesi, yazılım geliştiricilerine akış şemasının verilerini kendi uygulamalarına içe aktarma olanağı sağlar. Kütüphane, tüm akış şemalarını kolayca içe aktarma desteğini içerir. Bu yöntemi kullanırken, lütfen girdinin kesinlikle güvenilir olduğundan emin olun, bu yöntem sisteminize duyarlılık getiremez. Ayrıca akış şeması verilerinin bir nesne ve JSON dizesi olarak alınmasına da olanak tanır.

JavaScript API'sini kullanarak Akış Şeması Verileri Nasıl İçeri Aktarılır?

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);
 Türkçe