【亲测免费】探秘Flowy：打造网页流程图的利器！

2026-01-15 17:04:29作者：邵娇湘

演示动画

Flowy是一个轻巧的JavaScript库，让你在创建漂亮的流程图时轻松自如，就像魔法一样✨。从Dribbble到Twitter，再到实时演示，Flowy将创新的设计与易用性完美结合。

查看Dribbble设计 | 关注Twitter动态 | 体验在线示例

项目简介

Flowy的目标是简化那些希望在Web应用中实现流程图功能的开发者的工作。无论是构建自动化软件、思维导图工具还是简单的编程平台，只需几分钟就能将这个库集成进你的项目。

你可以通过GitHub赞助来支持这个项目和更多像它这样的优秀作品！❤️

由Alyssa X倾情打造。

技术分析

Flowy的核心特性包括：

可响应的拖放操作
自动吸附定位
自动滚动
块级重排
删除块
自动块居中
条件吸附
条件块移除
导入保存文件
移动设备支持
使用纯JavaScript编写（无依赖）
计划中的npm安装支持

想要提出新的功能建议？这里是你的舞台！

应用场景

Flowy适合于：

在线教育平台，用于创建教学流程图
协作工具，帮助团队规划项目或任务流
决策树应用，辅助用户做出明智选择
工具类网站，比如代码生成器或设计工具
更多依赖流程图的创意应用

特点与优势

简单易用：只需要几行代码即可快速集成到现有项目
高度定制：提供了丰富的回调函数和方法以适应各种需求
跨平台：支持桌面和移动设备，覆盖广泛用户群体
无额外负担：基于Vanilla JavaScript开发，无需额外引入其他库
社区活跃：作者积极维护，持续更新，接受用户反馈并改进

快速上手

引入flowy.min.js 和 flowy.min.css 文件，例如通过jsDelivr CDN：

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

创建一个容器元素，例如<div id="canvas"></div>来承载流程图。
创建可拖动的区块，赋予.create-flowy 类，如<div class="create-flowy">拖我</div>。

接下来，通过初始化Flowy开始你的流程图之旅！

初始化与运行

初始化

flowy(canvas, ongrab, onrelease, onsnap, onrearrange, spacing_x, spacing_y);

参数	类型	描述
`canvas`	HTML 元素	流程图容器
`ongrab`	函数（可选）	开始拖动时触发
`onrelease`	函数（可选）	结束拖动时触发
`onsnap`	函数（可选）	块吸附时触发
`onrearrange`	函数（可选）	块重排时触发
`spacing_x`	整数（可选）	水平间距，默认20px
`spacing_y`	整数（可选）	垂直间距，默认80px

定义可拖动块，需要添加.create-flowy 类。

示例

HTML

<div class="create-flowy">可以被拖动的块</div>
<div id="canvas"></div>

JavaScript

var spacing_x = 40;
var spacing_y = 100;
// 初始化Flowy
flowy(document.getElementById("canvas"), onGrab, onRelease, onSnap, onRearrange, spacing_x, spacing_y);
function onGrab(block){
	// 当用户抓住一个块
}
function onRelease(){
	// 当用户释放一个块
}
function onSnap(block, first, parent){
	// 当块与其他块吸附
}
function onRearrange(block, parent){
	// 当块被重新排列
}

回调函数

利用这些回调函数，你可以实现自定义行为。

开始拖动

function onGrab(block){
	// 当用户抓住一个块时
}

当用户抓取具有.create-flowy 类的块时触发。

参数	类型	描述
`block`	HTML 元素	被抓住的块

结束拖动

function onRelease(){
	// 当用户释放一个块时
}

无论块是否被放置或释放，只要松开手指都会触发。

吸附事件

function onSnap(block, first, parent){
	// 当块能吸附到父元素时
	return true;
}

当块可以吸附到另一个父元素时触发。你可以阻止吸附，或通过返回true允许吸附。

参数	类型	描述
`block`	HTML 元素	被抓住的块
`first`	布尔值	如果为`true`，表示这是画布上的第一个块
`parent`	HTML 元素	可以吸附的父元素

重排事件

function onRearrange(block, parent){
	// 当块被重排时
	return true;
}

当块在画布内被重新排列而没有找到合适的父元素时触发。你可以决定是否删除该块，或者通过返回true使其重新吸附回原来的父元素。

参数	类型	描述
`block`	HTML 元素	被抓住的块
`parent`	HTML 元素	可以吸附的父元素

方法

获取流程图数据

// 作为对象
flowy.output();
// 作为JSON字符串
JSON.stringify(flowy.output());

输出的JSON对象长这样：

{
  "html": "",
  "blockarr": [],
  "blocks": [
    {
      "id": 1,
      "parent": 0,
      "data": [
        {
          "name": "blockid",
          "value": "1"
        }
      ],
      "attr": [
        {
          "id": "block-id",
          "class": "block-class"
        }
      ]
    }
  ]
}

各项属性含义：

键	值类型	描述
`html`	字符串	包含画布数据
`blockarr`	数组	由库生成的块数组（用于导入）
`blocks`	数组	可读的块数组
`id`	整数	块的唯一标识
`parent`	整数	块所附加到的父元素的`id`（-1表示没有父元素）
`data`	对象数组	包含特定块内所有输入的数据
`name`	字符串	输入的名称属性
`value`	字符串	输入的值属性
`attr`	对象数组	包含特定块的所有数据属性