# @adipanda/xyflow-svelte 中文文档

规范地址：https://npmcn.com/package/%40adipanda/xyflow-svelte/

版本：1\.5\.7-krea\.0
npm 元数据更新时间：2026-01-16T05:39:38.924Z
中文译文更新时间：2026-11-06T09:37:29.530Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40adipanda/xyflow-svelte
原文对照：https://npmcn.com/package/%40adipanda/xyflow-svelte/?lang=original
项目主页：https://svelteflow.dev/
源码仓库：https://github.com/xyflow/xyflow

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

- 包体积（解压后）：387 kB，268 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：svelte ^5\.25\.0
- 首次发布：2026-01-06T02:56:10.714Z
- 最新版本发布：2026-01-16T05:39:38.794Z
- 近 30 天下载量：3567（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：8（近 12 个月 8 个）

## 中文简介

Svelte Flow - 一个高度自定义的Svelte库,用于构建以节点为基础的编辑器,工作流程系统,图表等.

## 安装

```sh
npm install @adipanda/xyflow-svelte
```

也可以使用：`pnpm add @adipanda/xyflow-svelte`、`yarn add @adipanda/xyflow-svelte`、`bun add @adipanda/xyflow-svelte`

## README

![readme-header](https://user-images.githubusercontent.com/2857535/279691030-dd853bef-88c5-433b-a51a-10294dc82d2b.svg#gh-light-mode-only) ![readme-header-dark](https://user-images.githubusercontent.com/2857535/279691048-accf12e0-da89-4c79-8d66-dee0c43585cd.svg#gh-dark-mode-only)

![GitHub License MIT](https://img.shields.io/github/license/wbkd/react-flow?color=%23ff0072) ![npm downloads](https://img.shields.io/npm/dt/@xyflow/svelte?color=%23FF0072&label=downloads)

Svelte Flow是一个高度自定义的组件,用于构建交互式图和以节点为基础的编辑器,由React Flow的创造者所建造.

☣️ **Svelte Flow仍然处于α并正在被大量开发中. API相对稳定,但有些情况可能会改变.** ☣️

[开始](https://svelteflow.dev/learn) | [页:1](https://svelteflow.dev/api-reference/svelte-flow) | [实例](https://svelteflow.dev/examples/overview) | [调和](https://discord.gg/RVmnytFmGW)

## 关键特性

-   **易于使用 :** 框外支持无缝缩放和平板、单和多选择图形元素和键盘快捷键
-   **自定义 :** 不同 [节点](https://svelteflow.dev/examples) 财务报告和审定财务报表 [边缘类型](https://svelteflow.dev/examples/edges/edge-types) 并支持带有多个手柄和自定义边缘的自定义节点
-   **快速渲染 :** 只有已更改的节点被重新提交
-   **虎克和乌蒂尔斯:** [钩子](https://svelteflow.dev/api-reference/hooks) 用于处理节点、边缘和取景口及图表 [帮助函数](https://svelteflow.dev/api-reference/utils)
-   **插件组件 :** [背景情况](https://svelteflow.dev/api-reference/components/background), (中文(简体) ), [最小映射](https://svelteflow.dev/api-reference/components/minimap) 财务报告和审定财务报表 [控件](https://svelteflow.dev/api-reference/components/controls)
-   **可靠性**: 写入 [字体](https://www.typescriptlang.org/) 测试 [剧作家](https://www.playwright.dev/)

## 安装

获得斯维尔特流最新版本的最简单方式是通过npm,纱线或pnpm来安装:

```sh
npm install @xyflow/svelte
```

## 开始

您只需要几行就可以获得一个完全交互的流(例如选择并拖动节点或泛并缩放). 如果你想学习更多,请参考 [学习部分](https://svelteflow.dev/learn),则 [实例](https://svelteflow.dev/examples) 或 [API 参考](https://svelteflow.dev/api-reference)。 。 。 .

```svelte
<script lang="ts">
  import { writable } from 'svelte/store';
  import { SvelteFlow, Controls, Background, BackgroundVariant, MiniMap } from '@xyflow/svelte';

  // you need to import the styles for Svelte Flow to work
  // if you just want to load the basic styleds, you can import '@xyflow/svelte/dist/base.css'
  import '@xyflow/svelte/dist/style.css';

  // We are using writables for the nodes and edges to sync them easily. When a user drags a node for example, Svelte Flow updates its position. This also makes it easier to update nodes in user land.
  const nodes = writable([
    {
      id: '1',
      type: 'input',
      data: { label: 'Input Node' },
      position: { x: 0, y: 0 }
    },
    {
      id: '2',
      type: 'custom',
      data: { label: 'Node' },
      position: { x: 0, y: 150 }
    }
  ]);

  // same for edges
  const edges = writable([
    {
      id: '1-2',
      type: 'default',
      source: '1',
      target: '2',
      label: 'Edge Text'
    }
  ]);
</script>

<SvelteFlow {nodes} {edges} fitView on:nodeclick={(event) => console.log('on node click', event)}>
  <Controls />
  <Background variant={BackgroundVariant.Dots} />
  <MiniMap />
</SvelteFlow>
```

## 如何贡献

**告诉我们你做了什么:** 丢进我们家 [Discord 服务器](https://discord.com/invite/Bqt6xrs), (中文(简体) ), [微博](https://twitter.com/reactflowdev) 或者发邮件给我们 [信息库@xyflow.com](mailto:info@xyflow.com)

**社区参与:** 问和回答我们的问题 [Discord 服务器](https://discord.com/invite/Bqt6xrs) 或者跳进Github的讨论.

**断层臭虫 :** 我们不能把他们全部抓起来。 先检查现有议题及讨论.

**财政支助:** 如果你是一个组织 谁希望确保斯维尔特流 继续维持 [信息库@xyflow.com](mailto:info@xyflow.com)

当然,我们爱Github明星

## 发展

如果您想要检查当前版本, 您需要从根目录中运行以下命令 :

1.  `pnpm install` - 安装依赖关系
2.  `pnpm build` 有一次必须完成
3.  `pnpm dev` - 启动 dev 服务器

现在,您可以在http://127.0.0.1:5173下查阅这些例子

## 维护者

Svelte Flow由后面的团队维护 [xy流量](https://xyflow.com/)如果你需要帮助或想和我们谈谈合作,请通过我们 [联系表单](https://xyflow.com/contact) 或加入我们 [Discord 服务器](https://discord.gg/Bqt6xrs)。 。 。 .

-   • 克里斯托弗 [微博](https://twitter.com/chrtze) 二. 支助 [吉图布](https://github.com/chrtze)
-   • 海利 [微博](https://twitter.com/hayleighdotdev) 二. 支助 [吉图布](https://github.com/hayleigh-dot-dev)
-   约翰·克林克(签名) [网站](https://johnrobbdesign.com/) 二. 支助 [马斯多登](https://mastodon.social/@johnrobbjr)
-   • 莫里茨 [微博](https://twitter.com/moklick) 二. 支助 [吉图布](https://github.com/moklick)
-   • 彼得 [吉图布](https://github.com/peterkogo)

# 许可证

丝绒花是 [麻省理工学院执照](https://npmcn.com/package/LICENSE)。 。 。 .

## 常见问题

### @adipanda/xyflow-svelte 是什么？

Svelte Flow - 一个高度自定义的Svelte库,用于构建以节点为基础的编辑器,工作流程系统,图表等\.

### 如何安装 @adipanda/xyflow-svelte？

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

### @adipanda/xyflow-svelte 支持 TypeScript 吗？

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

### @adipanda/xyflow-svelte 支持 ESM 还是 CommonJS？

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

### @adipanda/xyflow-svelte 可以商用吗？

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

### @adipanda/xyflow-svelte 的下载量有多少？

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

### @adipanda/xyflow-svelte 还在维护吗？

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