# @flowdrop/flowdrop 中文文档

规范地址：https://npmcn.com/package/%40flowdrop/flowdrop/

版本：2\.18\.0
npm 元数据更新时间：2026-11-10T18:03:58.057Z
中文译文更新时间：2026-11-15T05:00:31.734Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40flowdrop/flowdrop
原文对照：https://npmcn.com/package/%40flowdrop/flowdrop/?lang=original
项目主页：https://github.com/flowdrop-io/flowdrop#readme
源码仓库：https://github.com/flowdrop-io/flowdrop

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：5.6 MB，893 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=20
- 运行依赖：6 个
- peer 依赖：svelte ^5\.29\.0，codemirror ^6\.0\.2，@xyflow/svelte ^1\.2，@iconify/svelte ^5\.0\.0，@codemirror/lint ^6\.9\.2，@codemirror/view ^6\.39\.14，@codemirror/state ^6\.5\.4，@codemirror/commands ^6\.10\.2，@codemirror/language ^6\.12\.1，@codemirror/lang-json ^6\.0\.2，@codemirror/autocomplete ^6\.20\.0，@codemirror/lang-markdown ^6\.5\.0，@codemirror/theme-one-dark ^6\.1\.3
- 首次发布：2026-03-10T23:28:06.881Z
- 最新版本发布：2026-11-10T18:03:57.872Z
- 近 30 天下载量：2082（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：57（近 12 个月 57 个）

## 中文简介

任何网络应用程序的可视工作流程编辑器。 你拥有后端。 数据归你所有 管弦乐是你的.

## 安装

```sh
npm install @flowdrop/flowdrop
```

也可以使用：`pnpm add @flowdrop/flowdrop`、`yarn add @flowdrop/flowdrop`、`bun add @flowdrop/flowdrop`

## README

![FlowDrop](https://raw.githubusercontent.com/flowdrop-io/flowdrop/main/libs/flowdrop/static/logo.svg)

# 流程DropTM

![GitHub build status](https://img.shields.io/github/actions/workflow/status/flowdrop-io/flowdrop/docker-publish.yml?style=flat-square&label=Build) [![npm](https://img.shields.io/npm/v/@flowdrop/flowdrop?style=flat-square)](https://www.npmjs.com/package/@flowdrop/flowdrop) ![NPM Unpacked Size](https://img.shields.io/npm/unpacked-size/%40flowdrop%2Fflowdrop?style=flat-square) ![npm type definitions](https://img.shields.io/npm/types/@flowdrop/flowdrop?style=flat-square) [![NPM Downloads](https://img.shields.io/npm/d18m/%40flowdrop%2Fflowdrop)](http://npmjs.com/package/@flowdrop/flowdrop)

**在分钟内而不是几个月内建立美丽的工作流程编辑器.**

使用 Svelte 5 和 @xyflow/ svelte 创建的出色的工作流程编辑器.  
你拥有后端。 数据归你所有 管弦乐是你的.

[快速启动](https://flowdrop.mintlify.app/docs/quickstart) 二. 支助 [特征](https://npmcn.com/package/%40flowdrop/flowdrop/#readme-features) 二. 支助 [一体化](https://npmcn.com/package/%40flowdrop/flowdrop/#readme-integration) 二. 支助 [文档](https://flowdrop.mintlify.app/)

![FlowDrop Screenshot](https://raw.githubusercontent.com/flowdrop-io/flowdrop/main/libs/flowdrop/static/FlowDrop-Screenshot.jpg)

_以拖放简便方式构建AI动力工作流程. 连接节点,配置输入/输出,并可视化整个管道._

## 为什么是FlowDrop?

大部分的工作流程工具是SaaS平台将您锁定在其中. 你的数据是放在他们的服务器上的 你的处决逻辑在他们的云里运行。 每个工作流程,每个用户,每个运行.

**FlowDrop是不一样的.**

FlowDrop是一个纯粹的视觉编辑器. 你执行后端。 你控制着管弦乐 你的工作流程运行在你的基础设施上, 你的安全政策,在你的尺度.

没有供应商锁定。 没有数据离开你的墙壁。 没有意外的账单.

```bash
npm install @flowdrop/flowdrop
```

> **说明:** 流程Drop 支持 **每页多个编辑器实例** – – – 每座山都有自己的孤立状态容器. 见 [结构说明](https://npmcn.com/package/%40flowdrop/flowdrop/#readme-architecture-notes) 详细情况.

你得到一个生产准备的工作流程UI。 你完全控制着一切.

## 快速启动

```svelte
<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 Node Types](https://raw.githubusercontent.com/flowdrop-io/flowdrop/main/libs/flowdrop/static/Node-Types.jpg)

_从简单的触发到复杂的分支逻辑,每个节点类型都是针对特定的工作流程模式而设计的._

## 主题

FlowDrop包含一个带有内置光/暗支持的主题系统:

```svelte
<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默认相捆. 也可以通过自定义的主题对象,用自有的外观符号来全面控制光和暗色调.

```javascript
// Via the mount API
const app = await mountFlowDropApp(container, {
  theme: 'minimal'
  // or a custom theme object:
  // theme: { name: 'minimal', skin: { tokens: { primary: '#e11d48' } } }
});
```

## 自定义信件

每个用户化字符串都通过一个键入 `Messages` 树。 通过回调以覆盖任意子集 :

```svelte
<App messages={() => ({ form: { schema: { save: 'Apply' } } })} />
```

将调用回线到您的 i18n 库(paraglide-js, sveltekit-i18n等) —— 地方变化自动传播. 见 [i18n 自定义信件指南( C)](https://flowdrop.mintlify.app/guides/i18n) 完全的形状和一个滑翔伞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 (英语)](https://api.flowdrop.io/)。 。 。 .

## 一体化

### 斯维尔特( Native)

```svelte
<script>
  import { WorkflowEditor, NodeSidebar } from '@flowdrop/flowdrop/editor';
</script>

<div class="flex h-screen">
  <NodeSidebar {nodes} />
  <WorkflowEditor />
</div>
```

### 香草JS/反应/Vue/角

```javascript
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();
```

### 企业一体化

```javascript
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 配置

以秒连接到任何后端 :

```typescript
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的外观是通过 [主题系统](https://npmcn.com/package/%40flowdrop/flowdrop/#readme-themes)。对于精细的控件,也可以覆盖单个 CSS 自定义属性:

```css
:root {
  --fd-background: #0a0a0a;
  --fd-primary: #6366f1;
  --fd-border: #27272a;
  --fd-foreground: #fafafa;
}
```

## 部署

### 多克( 建议)

```bash
cd ../../apps/example-client-docker
cp env.example .env
docker-compose up -d
```

### 节点.js

```bash
npm run build
FLOWDROP_API_BASE_URL=http://your-backend/api node build
```

运行时配置意味着你一次构建 并部署到中转,生产, 或任何地方 与公正的环境变量.

## 规格

编辑器执行 [FlowDrop 工作流程规格](https://flowdrop.io/spec/), 第1.0版:FlowDrop工作流程遵守的规则,独立于任何一项执行。 该规格有386个编号规则(217个核心,167个扩展,2个可选),涵盖一个工作流程是如何被写出,存储,验证和执行的,并附有针对您可以运行在您自己的后端的硬壳和相容性固定装置的裁决. 规则也作为 [机器可读JSON](https://flowdrop.io/spec/rules.json),源头打开 [GitHub 图像](https://github.com/flowdrop-io/flowdrop-spec)。 。 。 .

## 文档

| 资源 | 说明 |
| --- | --- |
| [QUICK START.md (中文(简体) )](https://flowdrop.mintlify.app/docs/quickstart) | 5分钟后出发 |
| [API 文档](https://flowdrop.io/docs/api/) | REST API 规格 |
| [工作流程规格](https://flowdrop.io/spec/) | 工作流程规则 |
| [变动情况](https://github.com/flowdrop-io/flowdrop/blob/main/libs/flowdrop/CHANGELOG.md) | 版本历史 |

## 发展

```bash
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 所建

## 常见问题

### @flowdrop/flowdrop 是什么？

任何网络应用程序的可视工作流程编辑器。 你拥有后端。 数据归你所有 管弦乐是你的\.

### 如何安装 @flowdrop/flowdrop？

在项目目录运行 npm install @flowdrop/flowdrop，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：svelte（^5\.29\.0）、@xyflow/svelte（^1\.2）、@iconify/svelte（^5\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @flowdrop/flowdrop 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @flowdrop/flowdrop 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @flowdrop/flowdrop 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=20。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @flowdrop/flowdrop 可以商用吗？

@flowdrop/flowdrop 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @flowdrop/flowdrop 的下载量有多少？

根据 npm 官方下载统计，@flowdrop/flowdrop 在 2026/10/15 – 2026/11/13 这 30 天内被下载 2,082 次，日均约 69 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @flowdrop/flowdrop 还在维护吗？

最新版本 2\.18\.0 发布于 2026/11/11（5 天前）；至今共发布 57 个版本，其中过去 12 个月发布了 57 个；首次发布于 2026/03/11。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。