Drawflow

其他资源 • 2025-08-04

Drawflow

简单的流库。

Drawflow使您可以轻松，快速地创建数据流。

仅安装一个JavaScript库和四行代码。

现场演示

?主题编辑生成器

目录

  • 特征
  • 安装
    • 跑步
  • 鼠标和钥匙
  • 编辑
    • 选项
  • 模块
  • 节点
    • 节点示例
    • 注册节点
  • 方法
    • 方法示例
  • 事件
    • 事件示例
  • 导出 /导入
    • 导出示例
  • 例子
  • 执照

特征

  • 阻力节点
  • 多个输入 /输出
  • 多个连接
  • 删除节点和连接
  • 添加/删除输入/输出
  • 重新路由连接
  • 数据同步节点
  • 放大 /退出
  • 清除数据模块
  • 支持模块
  • 编辑模式编辑，固定或查看
  • 进出口数据
  • 事件
  • 移动支持
  • 香草JavaScript（无依赖关系）
  • NPM
  • VUE支持组件节点&& nuxt

安装

下载或克隆存储库，然后复制DIST文件夹，CDN选项或NPM。

克隆

git克隆https://gi*thub.c*om*/jerosoler/drawflow.git

CDN

Drawflow.min.css"> # or version view releases https://*git*hub.*com/jerosoler/Drawflow/releases ">
# Last
< link rel =" stylesheet " href =" https://cdn.jsd*el*i*vr.net/gh/jerosoler/Drawflow/dist/ Drawflow .min.css " >
< script src =" https://cdn.jsd*el*i*vr.net/gh/jerosoler/Drawflow/dist/ Drawflow .min.js " >  script >
# or version view releases https://*git*hub.*com/jerosoler/Drawflow/releases
< link rel =" stylesheet " href =" https://unpkg**.co*m/Drawflow@x.x.xx/dist/ Drawflow .min.css " />
< script src =" https://unpkg**.co*m/Drawflow@x.x.xx/dist/ Drawflow .min.js " >  script >

NPM 

 npm i Drawflow

打字稿

外部包装。更多信息＃119 

 npm install - D @ types / Drawflow

进口

Drawflow ' import style Drawflow from ' Drawflow /dist/ Drawflow .min.css'">
 import Drawflow from ' Drawflow '
import style Drawflow from ' Drawflow /dist/ Drawflow .min.css'

要求

Drawflow ') var style Drawflow = require(' Drawflow /dist/ Drawflow .min.css')">
 var Drawflow = require ( ' Drawflow ' )
var style Drawflow = require ( ' Drawflow /dist/ Drawflow .min.css' )

创建Drawflow的父元素。 

 < div id =" Drawflow " >  div >

跑步

启动Drawflow 。

Drawflow"); const editor = new Drawflow (id); editor.start();">
 var id = document . getElementById ( " Drawflow " ) ;
const editor = new Drawflow ( id ) ;
editor . start ( ) ;
范围 类型 描述
ID 目的 模块的名称
使成为 目的 这是为Vue。
父母 目的 这是为Vue。父实例

对于VUE 2示例。 

 import Vue from 'vue'

// Pass render Vue
this . editor = new Drawflow ( id , Vue , this ) ;

对于VUE 3示例。

Drawflow(id, Vue); // Pass render Vue 3 Instance const internalInstance = getCurrentInstance() editor.value = new Drawflow (id, Vue, internalInstance.appContext.app._context);">
 import { h , getCurrentInstance , render } from 'vue'
const Vue = { version : 3 , h , render } ;

this . editor = new Drawflow ( id , Vue ) ;
// Pass render Vue 3 Instance
const internalInstance = getCurrentInstance ( )
editor . value = new Drawflow ( id , Vue , internalInstance . appContext . app . _context ) ;

nuxt

添加到nuxt.config.js文件

Drawflow'], ... }">
build: {
    transpile : [ ' Drawflow ' ] ,
    ...
  }

鼠标和钥匙

  • DEL键删除元素。
  • 右键单击以显示删除选项（移动长按）。
  • 左键按下以移动选择的编辑器或节点。
  • CTRL +鼠标车轮放大/输出（移动捏）。

编辑

您可以将编辑器更改为固定类型以阻止。只有编辑器才能移动。您可以在开始前将其放置。 

 editor . editor_mode = 'edit' ; // Default
editor . editor_mode = 'fixed' ; // Only scroll

您还可以调整缩放值。 

 editor . zoom_max = 1.6 ;
editor . zoom_min = 0.5 ;
editor . zoom_value = 0.1 ;

编辑选项

范围 类型 默认 描述
重新路由 布尔 错误的 主动重新路由
reroute_fix_curvature 布尔 错误的 修复添加点
曲率 数字 0.5 曲率
reroute_curvature_start_end 数字 0.5 曲面重新路由第一点和LAS点
reroute_curvaturation 数字 0.5 曲面重新路由
reroute_width 数字 6 重新路由的宽度
line_path 数字 5 线的宽度
force_first_input 布尔 错误的 强制第一个输入将连接放在节点顶部
editor_mode 文本 编辑 编辑编辑，修复了已修复的节点但可用的输入字段，仅查看以查看
飞涨 数字 1 默认缩放
zoom_max 数字 1.6 默认缩放最大
zoom_min 数字 0.5 默认变焦最小
zoom_value 数字 0.1 默认缩放值更新
ZOOM_LAST_VALUE 数字 1 默认缩放最后值
draggable_inputs 布尔 真的 在单击输入上拖动节点
USEUUID 布尔 错误的 将UUID用作节点ID代替整数索引。仅影响新创建的节点，不影响导入的节点

重新路由

主动重新路由连接。在开始或导入之前使用。 

 editor . reroute = true ;

使用双击线连接创建点。双击点以进行删除。

模块

在不同的编辑器中分开您的流量。 

 editor . addModule ( 'nameNewModule' ) ;
editor . changeModule ( 'nameNewModule' ) ;
editor . removeModule ( 'nameModule' ) ;
// Default Module is Home
editor . changeModule ( 'Home' ) ;

删除模块是否在同一模块中，将其重定向到家庭模块

节点

添加节点很简单。 

 editor . addNode ( name , inputs , outputs , posx , posy , class , data , html ) ;
范围 类型 描述
姓名 文本 模块的名称
输入 数字 DE输入数量
输出 数字 DE输出数量
pos_x 数字 左开始节点的位置
铭文 数字 在开始节点上的位置
班级 文本 将className添加到de node。多个班级名称被空间隔开
数据 JSON 传递到节点的数据
html 文本 html在节点或寄存器节点的名称上绘制。
TypeNode 布尔和文字 默认为false，对象html，vue的vue

您可以在输入，TextAarea中使用属性df-*，也可以选择与节点数据同步和可满足的。

trributs倍增父母支持df - * - *...

节点示例

`; var data = { "name": '' }; editor.addNode('github', 0, 1, 150, 300, 'github', data, html);">
 var html = `


` ;
var data = { "name" : '' } ;

editor . addNode ( 'github' , 0 , 1 , 150 , 300 , 'github' , data , html ) ;

注册节点

可以重复使用的注册节点。

Drawflow!!"; editor.registerNode('test', html); // Use editor.addNode('github', 0, 1, 150, 300, 'github', data, 'test', true); // For vue import component from '~/components/testcomponent.vue' editor.registerNode('name', component, props, options); // Use for vue editor.addNode('github', 0, 1, 150, 300, 'github', data, 'name', 'vue');">
 var html = document . createElement ( "div" ) ;
html . innerHTML =  "Hello Drawflow !!" ;
editor . registerNode ( 'test' , html ) ;
// Use
editor . addNode ( 'github' , 0 , 1 , 150 , 300 , 'github' , data , 'test' , true ) ;

// For vue
import component from '~/components/testcomponent.vue'
editor . registerNode ( 'name' , component , props , options ) ;
// Use for vue
editor . addNode ( 'github' , 0 , 1 , 150 , 300 , 'github' , data , 'name' , 'vue' ) ;
范围 类型 描述
姓名 文本 模块已注册的名称。
html 文本 html到绘制或VUE组件。
道具 JSON 仅用于Vue。组件的道具。不需要
选项 JSON 仅用于Vue。组件的选项。不需要

方法

其他可用功能。

Mehtod 描述
zoom_in（） 增量Zoom +0.1
zoom_out（） 减速-0.1
getNodeFromid（id） 获取节点的信息。例如：ID：5
getNodesFromName（名称） 返回节点ID的数组。例如：名称：电报
removenodeid（id） 删除节点。 EX ID：node-x
UPDATATENODEDATAFOMID 更新数据元素。例如：5，{名称：' Drawflow '}
addNodeInput（ID） 将输入添加到节点。 EX ID：5
AddNodeOutput（ID） 将输出添加到节点。 EX ID：5
removenodeInput（ID，input_class） 删除输入到节点。 EX ID：5，Input_2
removEnodeOutput（ID，output_class） 删除输出到节点。 EX ID：5，output_2
addConnection（id_output，id_input，output_class，input_class） 添加连接。例如：15,16，'output_1'，'input_1'
removesingLeconNection（ID_OUTPUT，ID_INPUT，output_class，input_class） 删除连接。例如：15,16，'output_1'，'input_1'
UpdateConnectionNodes（ID） 来自节点EX ID的更新连接位置：node-x
removeConnectionNodeid（ID） 删除节点连接。 EX ID：node-x
getModuleFromNodeID（ID） 获取模块的名称在哪里ID。 EX ID：5
clearModuleselectectectear（） 选择的模块的清晰数据
清除（） 清除所有模块和模块的所有数据删除。

方法示例

 editor . removeNodeId ( 'node-4' ) ;

事件

您可以检测正在发生的事件。

可用事件列表：

事件 返回 描述
结节 ID 节点的ID
肿瘤 ID 节点的ID
nodatatachanged ID 节点df-*属性的ID更改。
nodeSelectect ID 节点的ID
节点选择 真的 取消选择节点
nodemaved ID 节点的ID
连接start {output_id，output_class} 选定的节点和输出的ID
ConnectionCancel 真的 连接取消
连接创建 {output_id，input_id，output_class，input_class} ID的节点和输出/输入选择
连接授予 {output_id，input_id，output_class，input_class} ID的节点和输出/输入选择
连接选择 {output_id，input_id，output_class，input_class} ID的节点和输出/输入选择
ConnectionUnselected 真的 取消选择连接
AddReroute ID 节点输出的ID
REMOVEREROUTE ID 节点输出的ID
重新布置 ID 节点输出的ID
模块化 姓名 模块的名称
模块化 姓名 模块的名称
调制 姓名 模块的名称
点击 事件 点击事件
点击端 事件 单击更改后
ContextMenu 事件 单击第二个按钮鼠标事件
莫斯莫夫 {x，y} 位置
MouseUp 事件 MouseUp事件
钥匙 事件 关键事件
飞涨 zoom_level 缩放水平
翻译 {x，y} 位置翻译编辑器
进口 进口 完成导入
出口 数据 数据导出

事件示例

 editor . on ( 'nodeCreated' , function ( id ) {
  console . log ( "Node created " + id ) ;
} )

导出 /导入

您可以导出和导入数据。 

 var exportdata = editor . export ( ) ;
editor . import ( exportdata ) ;

导出示例

导出数据的示例：

Drawflow": { "Home": { "data": {} }, "Other": { "data": { "16": { "id": 16, "name": "facebook", "data": {}, "class": "facebook", "html": "n n Facebook Message n n ", "inputs": {}, "outputs": { "output_1": { "connections": [ { "node": "17", "output": "input_1" } ] } }, "pos_x": 226, "pos_y": 138 }, "17": { "id": 17, "name": "log", "data": {}, "class": "log", "html": "n n Save log file n n ", "inputs": { "input_1": { "connections": [ { "node": "16", "input": "output_1" } ] } }, "outputs": {}, "pos_x": 690, "pos_y": 129 } } } } } ">
{
    " Drawflow " : {
        "Home" : {
            "data" : {}
        },
        "Other" : {
            "data" : {
                "16" : {
                    "id" : 16 ,
                    "name" : " facebook " ,
                    "data" : {},
                    "class" : " facebook " ,
                    "html" : "n        
n          
 Facebook Message
n        
n        ",
                    "inputs" : {},
                    "outputs" : {
                        "output_1" : {
                            "connections" : [
                                {
                                    "node" : " 17 " ,
                                    "output" : " input_1 "
                                }
                            ]
                        }
                    },
                    "pos_x" : 226 ,
                    "pos_y" : 138
                },
                "17" : {
                    "id" : 17 ,
                    "name" : " log " ,
                    "data" : {},
                    "class" : " log " ,
                    "html" : "n            
n              
 Save log file
n            
n            ",
                    "inputs" : {
                        "input_1" : {
                            "connections" : [
                                {
                                    "node" : " 16 " ,
                                    "input" : " output_1 "
                                }
                            ]
                        }
                    },
                    "outputs" : {},
                    "pos_x" : 690 ,
                    "pos_y" : 129
                }
            }
        }
    }
}

例子

查看文件夹文档中的完整示例。
还有一个示例如何在自定义元素中使用Drawflow 。 （基于litelement）。

执照

麻省理工学院许可证

下载源码

通过命令行克隆项目:

git clone https://github.com/jerosoler/Drawflow.git

相关文章

webglstudio.js

2025-08-04

lite xl

2025-08-04

vim.wasm

2025-08-04

yn

2025-08-05

推荐阅读

向上：银河游戏免安装正式版

2026-01-23

风暴驭使正式中文版

2026-01-23

冥河：贪婪之刃中文试玩版

2026-01-23

超级键盘侠免安装绿色中文版

2026-01-23