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

Knihovna JavaScript pro vytváření a úpravu vývojových diagramů ve webových aplikacích

Open Source JavaScript API pro vytváření webových aplikací, které umožňuje snadné generování a správu úžasných vývojových diagramů.

Flowy je velmi užitečná knihovna, která umožňuje vývojářům softwaru vytvářet webové aplikace JavaScript pro snadné vytváření a správu vývojových diagramů. Flowy.js je docela pěkný a uživatelsky přívětivý tvůrce vývojových diagramů a lze jej snadno integrovat s jinými knihovnami. Knihovna pomáhá vývojářům vytvářet automatizační software, nástroje myšlenkových map, organizační schémata, rodokmeny a mnoho dalšího. Tato knihovna Flowy je open source a je k dispozici pod licencí MIT, což znamená, že ji lze volně používat.

Knihovna Flowy nejen snadno zobrazuje vývojové diagramy, ale také podporuje kompletní editor drag & drop se skvělým rozhraním, spoustou možností přizpůsobení, posluchači událostí gest a dalšími úžasnými funkcemi. Některé z těchto funkcí zahrnují podporu automatického přichycení, automatické posouvání, přeuspořádání bloků, výběr a odstranění bloků, automatické centrování bloků, import a použití existujících souborů, mobilní podporu, snadné vytváření bloků, podmíněné přichytávání a tak dále.

Previous Next

Začínáme s Flowy

Doporučený způsob instalace knihovny Flowy je pomocí NPM. Pro bezproblémovou instalaci použijte prosím následující příkaz

Nainstalujte Flowy přes NPM

  npm install flowy

Klonujte Flowy přes úložiště GIT

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

Vytvořte vývojový diagram pomocí přetažení pomocí JavaScriptu

Knihovna Flowy poskytuje vývojářům softwaru možnost vytvořit nový vývojový diagram v aplikacích JavaScript.Knihovna zahrnula podporu pro vytváření responzivního profesionálního vývojového diagramu pomocí funkce drag the drop. Nejprve můžete potřebovat vytvořit prvek, který bude držet vývojový diagram. Poté musíte vytvořit předdefinovaný blok, který lze vložit do vývojového diagramu přetažením.Můžete snadno provádět změny, jako je správa prvků prostoru b/t, přemístění bloku, úprava bloku, odstranění nežádoucích bloků a další.

Vytvořte vývojový diagram prostřednictvím bezplatné knihovny 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);
        });

Přidání & Správa uzlu pomocí JavaScript

Open source Flowy Library obsahuje podporu pro přidávání nových uzlů programově do aplikací JavaScript. Knihovna umožňuje softwarovým programátorům nejprve navrhnout blok a poté můžete snadno exportovat soubor návrhu a uložit jej v podporovaném formátu souboru. Umožňuje také vývojářům softwaru importovat existující blok, provádět v něm změny a uložit jej zpět na místo podle vlastního výběru pomocí pouhých několika řádků kódu. Plynulý tým také pracuje na dynamickém generování diagramu a brzy bude jeho součástí.

Jak přidat nový uzel do vývojového diagramu pomocí knihovny 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,
});

Importujte data vývojového diagramu pomocí JavaScriptu

Open source Flowy Library poskytuje vývojářům softwaru možnost importovat data vývojového diagramu do jejich vlastních aplikací.Knihovna obsahuje podporu pro snadný import celých vývojových diagramů. Při použití této metody se prosím ujistěte, že vstup je absolutně důvěryhodný, ne, takže tato metoda může přinést do vašeho systému náchylnost. Umožňuje také získat data vývojového diagramu jako objekt a také řetězec JSON.

How to Import Flowchart's Data using 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);
 Čeština