用于在 Web 应用程序中创建和编辑流程图的 JavaScript 库

开源 JavaScript API 用于创建 Web 应用程序,可以轻松生成和管理精彩的流程图。

Flowy 是一个非常有用的库,它使软件开发人员能够创建 JavaScript Web 应用程序,以便轻松创建和管理流程图。Flowy.js 是一个非常不错且用户友好的流程图构建器,可以轻松与其他库集成。该库可帮助开发人员创建自动化软件、思维导图工具、组织结构图、家谱等。此 Flowy 库是开源的,可在 MIT 许可下使用,这意味着可以免费使用。

Flowy 库不仅可以轻松显示流程图,还支持完整的拖放编辑器,具有出色的界面、大量自定义选项、手势事件监听器和其他令人惊叹的功能。其中一些功能包括自动捕捉支持、自动滚动、重新排列块、选择和删除块、自动块居中、导入和使用现有文件、移动支持、轻松创建块、条件捕捉等。

Previous Next

开始使用 Flowy

安装 Flowy 库的推荐方法是使用 NPM。请使用以下命令顺利安装

通过 NPM 安装 Flowy

  npm install flowy

通过 GIT 存储库克隆 Flowy

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

通过 JavaScript 使用拖放功能创建流程图

Flowy 库使软件开发人员能够在其 JavaScript 应用程序中创建新的流程图。该库支持使用拖放功能创建响应式专业流程图。首先,您需要创建一个元素来保存流程图。之后,您需要创建一个预定义块,可以通过拖放将其插入到流程图中。您可以轻松进行更改,例如管理元素之间的空间、替换块、编辑块、删除不需要的块等等。

通过免费的 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 添加和管理节点

开源 Flowy 库已包含对在 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 导入流程图数据

开源 Flowy 库使软件开发人员能够在自己的应用程序中导入流程图数据。该库支持轻松导入整个流程图。使用此方法时,请确保输入绝对可信,否则此方法会给您的系统带来易受攻击性。它还允许将流程图数据作为对象以及 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);

 中国人