探秘Flowy：打造网页流程图的利器！

探秘Flowy：打造网页流程图的利器！

项目地址:https://gitcode.com/alyssaxuu/flowy

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

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

项目简介

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

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

由Alyssa X倾情打造。

技术分析

Flowy的核心特性包括：

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

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

应用场景

Flowy适合于：

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

特点与优势

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

快速上手

1. 引入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>

2. 创建一个容器元素，例如<div id="canvas"></div>来承载流程图。
3. 创建可拖动的区块，赋予.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 | 对象数组 | 包含特定块的所有数据属性

导入流程图数据

flowy.import(output)

允许你导入最初通过flowy.output()导出的整个流程图。

参数 | 类型 | 描述 --- | --- | --- output | HTML 元素 | 从flowy.output()获取的数据

警告

此方法接受原始HTML而不进行清理，因此可能存在XSS漏洞。只有在输入绝对可信的情况下才能安全使用此方法，否则使用此方法可能会引入系统漏洞。

删除所有块

一次性清除所有块：

flowy.deleteBlocks()

目前没有单独删除块的方法，唯一的办法是手动分割分支。

加入Flowy的世界，感受无尽的创造可能！如果你有任何问题或反馈，请随时通过电子邮件hi@alyssax.com或Twitter联系我！希望Flowy对你的工作有所帮助！💖

项目地址:https://gitcode.com/alyssaxuu/flowy