インストールと要件

開始するには、マシンにnode.jsとnpm、yarn、またはpnpmがインストールされている必要があります。Svelte Flowパッケージは、@xyflow/svelteでnpmに公開されており、以下の方法でインストールできます。

npm install @xyflow/svelte

pnpm add @xyflow/svelte

yarn add @xyflow/svelte

bun add @xyflow/svelte

これで、アプリケーションにSvelte Flowコンポーネントとスタイルをインポートできます。

import { SvelteFlow } from '@xyflow/svelte';
 
// 👇 this is important! You need to import the styles for Svelte Flow to work
import '@xyflow/svelte/dist/style.css';

必要な経験

名前が示すように、Svelte FlowはSvelteライブラリです。つまり、Svelte開発者は使い慣れているでしょう。ストア、プロップ、コンポーネントなどの基本的なSvelte用語や概念にまだ慣れていない場合は、Svelte Flowを最大限に活用する前に、Svelteの基本を理解する必要があります。Svelteを初めて使用する場合は、「Svelteへようこそ」チュートリアルから始めることをお勧めします。