流程DropTM
在分钟内而不是几个月内建立美丽的工作流程编辑器.
使用 Svelte 5 和 @xyflow/ svelte 创建的出色的工作流程编辑器.
你拥有后端。 数据归你所有 管弦乐是你的.
快速启动 二. 支助 特征 二. 支助 一体化 二. 支助 文档
以拖放简便方式构建AI动力工作流程. 连接节点,配置输入/输出,并可视化整个管道.
为什么是FlowDrop?
大部分的工作流程工具是SaaS平台将您锁定在其中. 你的数据是放在他们的服务器上的 你的处决逻辑在他们的云里运行。 每个工作流程,每个用户,每个运行.
FlowDrop是不一样的.
FlowDrop是一个纯粹的视觉编辑器. 你执行后端。 你控制着管弦乐 你的工作流程运行在你的基础设施上, 你的安全政策,在你的尺度.
没有供应商锁定。 没有数据离开你的墙壁。 没有意外的账单.
npm install @flowdrop/flowdrop
说明: 流程Drop 支持 每页多个编辑器实例 – – – 每座山都有自己的孤立状态容器. 见 结构说明 详细情况.
你得到一个生产准备的工作流程UI。 你完全控制着一切.
快速启动
<script lang="ts">
import { App } from '@flowdrop/flowdrop';
import '@flowdrop/flowdrop/styles/base.css';
</script>
<App />
五行经. 一个全功能的工作流程编辑器.
特征
| 只有视觉编辑器 | 纯UI组件. 没有隐藏后端, 没有外部依赖 |
| 你拥有一切 | 您的数据,您的服务器, 您的管弦逻辑, 您的安全政策 |
| 后端不可知论 | 连接到任意 API: Drupal, Laravel, Express, FastAPI, 或者你自己的 |
| 8 内建节点类型 | 从简单的图标到复杂的网关逻辑 |
| 框架灵活性 | 用作Svelte组件或挂入React、Vue、Angular或香草JS |
| 在任何地方部署 | 运行时配置意味着建立一次,部署在任何地方 |
结构说明
- 每页多例. 每个挂载都有自己的
FlowDropInstance状态容器(工作流程、撤销/重做历史、操场会话、注册、 API 上下文、草稿),所以同一页上的编辑器完全隔离。 2.0中没有模块级商店 API —— 解析状态getInstance()在组件树或挂载控件内.instance在外边。 第一次登山没有instanceId成为页面默认实例; 通过instanceId用于扩展其草稿/平面存储密钥。 主题和设置在设计上仍为页面全球. - 需要Svelte 5号车. FlowDrop 使用 Svelte 5 径(
$state, (中文(简体) ),$derived, (中文(简体) ),$effect) 整个。 斯维尔特4号不支持. - 仅限现代浏览器. 库以ES2020+为目标,不包括用于更古老浏览器的多填充.
节点类型
拥有8个设计优美节点类型的流道舰:
| 类型 | 目的 |
|---|---|
default | 配有投入/产出的全功能节点 |
simple | 紧凑、高效空间布局 |
square | 只有图标的最小设计 |
tool | AI 代理工具节点 |
gateway | 有条件的分支逻辑 |
terminal | 开始/结束工作流程点 |
note | 标记下的文件块 |
idea | 类似 BPMN 的概念流节点 |
从简单的触发到复杂的分支逻辑,每个节点类型都是针对特定的工作流程模式而设计的.
主题
FlowDrop包含一个带有内置光/暗支持的主题系统:
<script lang="ts">
import { App } from '@flowdrop/flowdrop';
import '@flowdrop/flowdrop/styles';
</script>
<!-- Built-in themes: 'default' or 'minimal' -->
<App theme="minimal" />
主题将可视皮肤(CSS sorth specette)与行为UI默认相捆. 也可以通过自定义的主题对象,用自有的外观符号来全面控制光和暗色调.
// Via the mount API
const app = await mountFlowDropApp(container, {
theme: 'minimal'
// or a custom theme object:
// theme: { name: 'minimal', skin: { tokens: { primary: '#e11d48' } } }
});
自定义信件
每个用户化字符串都通过一个键入 Messages 树。 通过回调以覆盖任意子集 :
<App messages={() => ({ form: { schema: { save: 'Apply' } } })} />
将调用回线到您的 i18n 库(paraglide-js, sveltekit-i18n等) —— 地方变化自动传播. 见 i18n 自定义信件指南( C) 完全的形状和一个滑翔伞j的榜样.
子模块导出
FlowDrop 提供可树动子模块输出,这样您只能导入您需要的东西 :
| 导出路径 | 目录 |
|---|---|
@flowdrop/flowdrop | 斯林门: App,挂载函数, createFlowDropInstance, (中文(简体) ), getInstance类型 |
@flowdrop/flowdrop/core | 只有类型和公用事业(无严重依赖性) |
@flowdrop/flowdrop/editor | 工作流程编辑、商店、服务 |
@flowdrop/flowdrop/form | SchemaForm, 窗体字段, 注册 |
@flowdrop/flowdrop/form/code | 代码编辑器字段( CodeMiror) |
@flowdrop/flowdrop/form/markdown | 标记下编辑器字段 |
@flowdrop/flowdrop/display | 标记下显示组件 |
@flowdrop/flowdrop/ui | 设计-系统组件:原始、表面、输入、文本区(实验用 2.x) |
@flowdrop/flowdrop/playground | 游戏场组件和服务 |
@flowdrop/flowdrop/settings | 设置小组、仓库、服务 |
@flowdrop/flowdrop/styles | 基础 CSS 样式表 |
@flowdrop/flowdrop/schema | JSON计划 |
@flowdrop/flowdrop/openapi | FlowDrop后端 API 的 OpenAPI spec (YAML) |
@flowdrop/flowdrop/webmcp | 浏览器代理的 WebMCP 编辑工具 : attachWebMCP, (中文(简体) ), createToolRuntime, 批准门( 2.x 实验) |
标记条目 实验 可以在他们的API结算时更改小版本;每个更改都在变换组中列出。 键入一个小版本( E)~2.16.0) 如果你依赖一个。 所有其他条目都遵循语义化版本.
OpenAPI 光谱
FlowDrop后端 API 船的完整 OpenAPI spec 与软件包, 版本匹配到您安装的放行 。 它定义了节点配置 / 形式元素 schema ()ConfigProperty),游乐场信息,以及每个终点. 解决它从 @flowdrop/flowdrop/openapi,或者直接读取在 node_modules/@flowdrop/flowdrop/dist/openapi/v1/openapi.yaml当撰写节点配置图时, 将您的 AI 助手指向该文件 。 最新的光谱也可以浏览于 api. flowdrop.io (英语)。 。 。 .
一体化
斯维尔特( Native)
<script>
import { WorkflowEditor, NodeSidebar } from '@flowdrop/flowdrop/editor';
</script>
<div class="flex h-screen">
<NodeSidebar {nodes} />
<WorkflowEditor />
</div>
香草JS/反应/Vue/角
import { mountFlowDropApp, createEndpointConfig } from '@flowdrop/flowdrop';
const app = await mountFlowDropApp(document.getElementById('editor'), {
workflow: myWorkflow,
endpointConfig: createEndpointConfig('/api/flowdrop'),
eventHandlers: {
onDirtyStateChange: (isDirty) => console.log('Unsaved changes:', isDirty),
onAfterSave: (workflow) => console.log('Saved!', workflow)
}
});
// Full control over the editor
app.save();
app.getWorkflow();
app.destroy();
企业一体化
import { mountFlowDropApp, CallbackAuthProvider } from '@flowdrop/flowdrop';
const app = await mountFlowDropApp(container, {
// Dynamic token refresh
authProvider: new CallbackAuthProvider({
getToken: () => authService.getAccessToken(),
onUnauthorized: () => authService.refreshToken()
}),
// Lifecycle hooks
eventHandlers: {
onBeforeUnmount: (workflow, isDirty) => {
if (isDirty) saveDraft(workflow);
}
},
// Auto-save, toasts, and more
features: {
autoSaveDraft: true,
autoSaveDraftInterval: 30000
}
});
API 配置
以秒连接到任何后端 :
import { createEndpointConfig } from '@flowdrop/flowdrop';
const config = createEndpointConfig('https://api.example.com', {
endpoints: {
nodes: { list: '/nodes', get: '/nodes/{id}' },
workflows: {
list: '/workflows',
get: '/workflows/{id}',
create: '/workflows',
update: '/workflows/{id}',
execute: '/workflows/{id}/execute'
}
}
});
自定义
建议如何自定义FlowDrop的外观是通过 主题系统。对于精细的控件,也可以覆盖单个 CSS 自定义属性:
:root {
--fd-background: #0a0a0a;
--fd-primary: #6366f1;
--fd-border: #27272a;
--fd-foreground: #fafafa;
}
部署
多克( 建议)
cd ../../apps/example-client-docker
cp env.example .env
docker-compose up -d
节点.js
npm run build
FLOWDROP_API_BASE_URL=http://your-backend/api node build
运行时配置意味着你一次构建 并部署到中转,生产, 或任何地方 与公正的环境变量.
规格
编辑器执行 FlowDrop 工作流程规格, 第1.0版:FlowDrop工作流程遵守的规则,独立于任何一项执行。 该规格有386个编号规则(217个核心,167个扩展,2个可选),涵盖一个工作流程是如何被写出,存储,验证和执行的,并附有针对您可以运行在您自己的后端的硬壳和相容性固定装置的裁决. 规则也作为 机器可读JSON,源头打开 GitHub 图像。 。 。 .
文档
| 资源 | 说明 |
|---|---|
| QUICK START.md (中文(简体) ) | 5分钟后出发 |
| API 文档 | REST API 规格 |
| 工作流程规格 | 工作流程规则 |
| 变动情况 | 版本历史 |
发展
pnpm install # Install dependencies
pnpm dev # Start dev server
pnpm build # Build library
pnpm test # Run all tests
pnpm storybook # Launch Storybook
捐款
FlowDrop稳定了. 捐款将很快开始。 继续更新.
流线 - 你拥有的视觉工作流程编辑器
由QQ Svelte 5 和 @ xyflow/ svelte 所建