构建流程

在以下部分，我们将向您展示如何创建一个显示简单流程的 Svelte 组件。我们假设您已经安装了 Svelte Flow，并希望您已准备好使用 Svelte Flow 创建您的第一个组件。

入门

让我们添加一个带有 Controls 和 Background 组件的 SvelteFlow 组件。为此，我们从 @xyflow/svelte 包中导入这些组件

import { SvelteFlow, Background, Controls } from '@xyflow/svelte';
// 👇 always import the styles
import '@xyflow/svelte/dist/style.css';

现在您可以在您的组件中像这样使用它们

<script lang="ts">
const data: string = "world";
</script>

<h1>Hello {data}</h1>

<style>
h1 {
  font-size: 1.5rem;
}
</style>

只读

现在您可以通过拖动画布进行平移，以及通过滚动鼠标或使用控制面板按钮进行缩放。

这里有三个重要事项需要注意

您需要**导入样式**。否则，Svelte Flow 看起来很奇怪，而且无法正常工作。
**父容器需要宽度和高度**，因为 Svelte Flow 使用其父级尺寸。
如果您**在一个页面上有多个流程**，您需要为每个组件传递一个唯一的 id 属性以使 Svelte Flow 正常工作。

添加节点

现在基础已经设置好了，我们可以添加一些节点。为此，您需要创建一个包含一组可写存储的数组，其中包含节点对象，如下所示

import { writable } from 'svelte/store';
 
const nodes = writable([
  {
    id: '1', // required and needs to be a string
    position: { x: 0, y: 0 }, // required
    data: { label: 'hey' }, // required
  },
  {
    id: '2',
    position: { x: 100, y: 100 },
    data: { label: 'world' },
  },
]);

如果我们将这些节点添加到我们的 SvelteFlow 组件中，我们可以在屏幕上看到它们

<script lang="ts">
const data: string = "world";
</script>

<h1>Hello {data}</h1>

<style>
h1 {
  font-size: 1.5rem;
}
</style>

只读

有很多选项可以配置节点。您可以在节点选项网站上查看所有选项列表。

这是一个很好的开始！您已经可以做很多事情

**拖动节点**
**选择节点**，方法是单击它们
**删除节点**，方法是按 Backspace 键
**多选节点**，方法是按住 Shift 键创建一个选择框

用边连接节点

现在我们有了两个节点，让我们用边连接它们。

要创建边，我们需要指定两个属性：源节点（边起点）和目标节点（边终点）。我们使用两个节点的 id 来指定这一点（在我们的示例中，我们的两个节点的 id 分别为“1”和“2”）。边存储在可写存储中，就像节点一样

import { writable } from 'svelte/store';
 
const edges = writable([{ id: '1-2', source: '1', target: '2' }]);

<script lang="ts">
const data: string = "world";
</script>

<h1>Hello {data}</h1>

<style>
h1 {
  font-size: 1.5rem;
}
</style>

只读

就像节点一样，边也有很多选项。您可以选择类型，定义起点和终点标记、标签，以及更改样式。您可以在边选项网站上查看所有选项列表。

微调流程

现在我们有了基本的流程，让我们稍微微调一下。您可以使用 fitView 属性自动将所有节点调整到视窗中。

如果您想要除白色以外的其他背景，您可以使用 Background 组件的 bgColor 属性轻松调整它。如您所见，我们还使用了 patternColor 属性来更改背景图案的颜色。您还可以使用 variant 属性更改图案。

默认情况下，控制面板带有放大、缩小、调整视窗和锁定按钮。例如，您可以通过设置 showLock={false} 来移除锁定按钮。

<script lang="ts">
const data: string = "world";
</script>

<h1>Hello {data}</h1>

<style>
h1 {
  font-size: 1.5rem;
}
</style>

只读

您可以做的事情还有很多！您可以通过查看示例或 API 参考来获得很好的概览。

安装自定义节点