flowy README

The project's README from github.com/alyssaxuu/flowy. As one markdown file: README.md.

Flowy

Demo
A javascript library to create pretty flowcharts with ease ✨

Dribbble | Twitter | Live demo

Flowy makes creating WebApps with flowchart functionality an incredibly simple task. Build automation software, mind mapping tools, or simple programming platforms in minutes by implementing the library into your project.

You can support this project (and many others) through GitHub Sponsors! ❤️

Made by Alyssa X

Table of contents

Features

Currently, Flowy supports the following:

You can suggest new features here

Installation

Adding Flowy to your WebApp is incredibly simple:

  1. Link flowy.min.js and flowy.min.css to your project. Through jsDelivr:
<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>
  1. Create a canvas element that will contain the flowchart (for example, <div id="canvas"></div>)
  2. Create the draggable blocks with the .create-flowy class (for example, <div class="create-flowy">Grab me</div>)

Running Flowy

Initialization

flowy(canvas, ongrab, onrelease, onsnap, onrearrange, spacing_x, spacing_y);
Parameter Type Description
canvas javascript DOM element The element that will contain the blocks
ongrab function (optional) Function that gets triggered when a block is dragged
onrelease function (optional) Function that gets triggered when a block is released
onsnap function (optional) Function that gets triggered when a block snaps with another one
onrearrange function (optional) Function that gets triggered when blocks are rearranged
spacing_x integer (optional) Horizontal spacing between blocks (default 20px)
spacing_y integer (optional) Vertical spacing between blocks (default 80px)

To define the blocks that can be dragged, you need to add the class .create-flowy

Example

HTML

<div class="create-flowy">The block to be dragged</div>
<div id="canvas"></div>

Javascript

var spacing_x = 40;
var spacing_y = 100;
// Initialize Flowy
flowy(document.getElementById("canvas"), onGrab, onRelease, onSnap, onRearrange, spacing_x, spacing_y);
function onGrab(block){
	// When the user grabs a block
}
function onRelease(){
	// When the user releases a block
}
function onSnap(block, first, parent){
	// When a block snaps with another one
}
function onRearrange(block, parent){
	// When a block is rearranged
}

Callbacks

In order to use callbacks, you need to add the functions when initializing Flowy, as explained before.

On grab

function onGrab(block){
	// When the user grabs a block
}

Gets triggered when a user grabs a block with the class create-flowy

Parameter Type Description
block javascript DOM element The block that has been grabbed

On release

function onRelease(){
	// When the user lets go of a block
}

Gets triggered when a user lets go of a block, regardless of whether it attaches or even gets released in the canvas.

On snap

function onSnap(block, first, parent){
	// When a block can attach to a parent
	return true;
}

Gets triggered when a block can attach to another parent block. You can either prevent the attachment, or allow it by using return true;

Parameter Type Description
block javascript DOM element The block that has been grabbed
first boolean If true, the block that has been dragged is the first one in the canvas
parent javascript DOM element The parent the block can attach to

On rearrange

function onRearrange(block, parent){
	// When a block is rearranged
	return true;
}

Gets triggered when blocks are rearranged and are dropped anywhere in the canvas, without a parent to attach to. You can either allow the blocks to be deleted, or prevent it and thus have them re-attach to their previous parent using return true;

Parameter Type Description
block javascript DOM element The block that has been grabbed
parent javascript DOM element The parent the block can attach to

Methods

Get the flowchart data

// As an object
flowy.output();
// As a JSON string
JSON.stringify(flowy.output());

The JSON object that gets outputted looks like this:

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

Here's what each property means:

Key Value type Description
html string Contains the canvas data
blockarr array Contains the block array generated by the library (for import purposes)
blocks array Contains the readable block array
id integer Unique value that identifies a block
parent integer The id of the parent a block is attached to (-1 means the block has no parent)
data array of objects An array of all the inputs within a certain block
name string The name attribute of the input
value string The value attribute of the input
attr array of objects Contains all the data attributes of a certain block

Import the flowchart data

flowy.import(output)

Allows you to import entire flowcharts initially exported using the previous method, flowy.output()

Parameter Type Description
output javascript DOM element The data from flowy.output()

Warning

This method accepts raw HTML and does not sanitize it, therefore this method is vulnerable to XSS. The only safe use for this method is when the input is absolutely trusted, if the input is not to be trusted the use this method can introduce a vulnerability in your system.

Delete all blocks

To remove all blocks at once use:

flowy.deleteBlocks()

Currently there is no method to individually remove blocks. The only way to go about it is by splitting branches manually.

Feel free to reach out to me through email at [email protected] or on Twitter if you have any questions or feedback! Hope you find this useful 💜

flowy (alyssaxuu/flowy)

Searching Database…

12.1K ·GitHub
Flowy
这是什么？Flowy 是一个极简的 JavaScript 库，用于在网页应用里搭建流程图：用户把区块拖到画布上，让它们相互吸附连接，还能随意重新排列。
它是一个独立的流程图应用，还是一个能嵌入我自己网页应用的库？是一个库，不是独立应用——你把它放进自己的网页，指向一个 canvas 元素，这个元素就变成了可以交互操作的流程图画布。
怎么把它加到项目里？引入 flowy.min.js 和 flowy.min.css（用 jsDelivr 就行），创建一个 canvas 元素，给可以拖动的区块加上 .create-flowy 类，然后在这个画布上初始化 Flowy。
我需要先装 npm、打包工具或其他 JavaScript 库吗？不需要——它是纯原生 JavaScript，没有任何依赖，目前也没有 npm 包，所以直接把这两个文件引入页面就行了。
能从画布上删除单独一个区块吗？不能——目前还没有删除单个区块的方法。你只能一次性删除全部区块，或者手动重新排列、拆分分支。
在手机浏览器上能用吗？可以——移动端支持是 Flowy 官方列出的特性之一，拖放操作也做了响应式处理，从一开始就考虑了触屏使用。
用 Flowy 能做什么？任何需要流程图界面的东西：README 提到可以用于自动化软件、思维导图工具或简单的编程平台，几分钟内就能集成到你自己的项目里。
区块之间的间距可以调整吗？可以——初始化时可以设置 spacingx 和 spacingy，默认区块之间水平间距为 20px，垂直间距为 80px。
导出的流程图 JSON 里包含什么内容？每个区块有 id、父区块的 id（没有父区块时为 -1）、输入项名称和值的数组，以及它的 data 属性，同时还包含画布的 HTML 和库内部维护的区块数组。
为什么 README 要提醒注意导入方式？因为导入功能会原样接受 HTML，不做任何安全过滤，加载不可信的数据可能让你的应用遭受 XSS 攻击——只导入你完全信任的内容。
What are similar projects?mermaid, dragula, list.js, xyflow, not-paid, skrollr, flatpickr, LogicFlow
Which topics is it in?diagramming, mindmap, minimal, flowchart, marketing-automation, engine, diagrams, vanilla-javascript, drag-and-drop, no-dependencies, marketing, visualization
Creator
alyssaxuu
Size
0.4 MB
Stars
12.1K
Updated
CommitJul 02
Age
6y
Commits · 90 Days