用于在 Web 应用程序中创建和编辑流程图的 JavaScript 库
开源 JavaScript API 用于创建 Web 应用程序,可以轻松生成和管理精彩的流程图。
Flowy 是一个非常有用的库,它使软件开发人员能够创建 JavaScript Web 应用程序,以便轻松创建和管理流程图。Flowy.js 是一个非常不错且用户友好的流程图构建器,可以轻松与其他库集成。该库可帮助开发人员创建自动化软件、思维导图工具、组织结构图、家谱等。此 Flowy 库是开源的,可在 MIT 许可下使用,这意味着可以免费使用。
Flowy 库不仅可以轻松显示流程图,还支持完整的拖放编辑器,具有出色的界面、大量自定义选项、手势事件监听器和其他令人惊叹的功能。其中一些功能包括自动捕捉支持、自动滚动、重新排列块、选择和删除块、自动块居中、导入和使用现有文件、移动支持、轻松创建块、条件捕捉等。
开始使用 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);