建立流程

在接下來的章節中，我們將向您展示如何建立一個顯示簡單流程的 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 正常運作。

加入節點

現在基本設定已經完成，我們可以加入一些節點。為此，您需要使用一個可寫入的 store，其中包含一個節點物件的陣列，如下所示

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」）。邊會儲存在一個可寫入的 store 中，就像節點一樣

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 參考來獲得良好的概述。

安裝自訂節點