alyssaxuu/flowy

这是什么？

核心功能

• 01拖拽块并自动吸附、居中
• 02提供拾起、释放、吸附、重排的回调函数
• 03支持条件吸附和条件删除块
• 04可将流程图数据导出为 JSON 并重新导入
• 05移动端可用，无外部依赖

适用场景

• 在网页应用中搭建自动化或工作流编辑器
• 开发连接节点的思维导图或图表工具
• 制作简单的可视化编程界面原型

快速上手

1. 1

   从 jsDelivr 引入样式表

   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.css">
2. 2

   从 jsDelivr 引入脚本

   <script src="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.js"></script>
3. 3

   在页面中创建画布元素和可拖拽的方块

4. 4

   在画布上初始化 Flowy

   flowy(document.getElementById("canvas"), onGrab, onRelease, onSnap, onRearrange, spacing_x, spacing_y);

使用前须知

• !尚不支持 npm 安装，需使用 CDN 链接或手动复制文件。
• !无法单独删除方块，只能一次性删除所有方块。
• !导入方法不会对 HTML 进行清理，处理不可信输入时存在 XSS 风险。

标签

常见问题

flowy 是什么？

一个极简的原生 JavaScript 库，用于在网页中构建可拖拽、自动吸附的流程图编辑器。 Flowy 是一个无依赖的 JavaScript 库，可以为网页添加流程图功能。开发者只需给可拖拽的元素加上 create-flowy 类名，再放入一个 canvas 容器，用户就能把块拖到画布上，块之间会自动吸附并连接成分支。

flowy 可以免费使用吗？用的什么许可证？

flowy 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

flowy 还在维护吗？

超过半年未提交。flowy 最近一次提交是在 2024年7月13日。

flowy 适合用来做什么？

在网页应用中搭建自动化或工作流编辑器 开发连接节点的思维导图或图表工具 制作简单的可视化编程界面原型

flowy 怎么安装和运行？

从 jsDelivr 引入样式表: <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.css"> 从 jsDelivr 引入脚本: <script src="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.js"></script> 在页面中创建画布元素和可拖拽的方块 在画布上初始化 Flowy: flowy(document.getElementById("canvas"), onGrab, onRelease, onSnap, onRearrange, spacing_x, spacing_y);

在哪里获取 flowy？

源代码和安装说明在 GitHub 上：https://github.com/alyssaxuu/flowy