Svelte専用のFlowChartライブラリ - Svelvetの紹介

### はじめに
こちらは [Svelte Advent Calendar 2023](https://qiita.com/advent-calendar/2023/svelte)の23日目の投稿です。
今回はSvelvetというSvelte専用のフローチャートライブラリについて、簡単に説明できればと思います。

https://www.svelvet.io/
### Svelvetとは

https://github.com/open-source-labs/Svelvet/

> Svelvet is a lightweight component library for building dynamic, customizable node graphs

サイトに英語で記載している通りですが、Svelvetは、動的でカスタマイズ可能なノードグラフを構築するための軽量コンポーネントライブラリです。
簡単に言えばフローチャートライブラリです。

![スクリーンショット 2023-12-22 1.27.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307302/83fd08ae-0fe5-a9f7-ee0c-77316e8a02a9.png)
カスタムによっては↑みたいな良い感じのデータペースのER図も作成できます。


### インストール
``` bash
npm install svelvet
```
``` bash
yarn add svelvet
``` 

### 簡単な機能の紹介

結構色々な機能がありますが、今回は一番Basicなところのみ紹介します。
Svelvetは色々な機能がありますが、基本的に、Svelvet, Node, Anchor, Edgeで構成されています。

![スクリーンショット 2023-12-17 18.11.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307302/464f6710-bbec-b6f6-e9a6-6f750a3bbc4b.png)

ドキュメンテーションはこちら
https://svelvet.mintlify.app/introduction


#### Svelvet
https://svelvet.mintlify.app/components/svelvet

> Svelvet is the wrapping parent component that renders out nodes and edges. 

翻訳をすると、
→ Svelvetはノードとエッジをレンダリングするラップ親コンポーネントです。
で、わかりにくいですが、基本的にはフローチャートを乗せるCanvasで考えていいです。

SvelvetコンポーネントはCanvasを拡大・縮小、ミニマップ表示などのオプションが含まれています。

``` svelte: App.svelte
<script>
  import { Node, Svelvet, Minimap, Controls } from 'svelvet';
</script>

<Svelvet id="my-canvas" width="{500}" height="{500}" TD minimap controls locked>
  <Node />
  <Node id="alpha" bgColor="red" label="Default Node" />
</Svelvet>
```

#### Node
https://svelvet.mintlify.app/components/node

Nodeコンポーネントは、Svelvetを構成する基本要素です。

Nodeコンポーネントの定義は二つ存在していて、既定のNodeにPropを渡して色、枠、サイズ、位置などを制御しカスタマイズして、Svelvetコンポーネントの子として配置しレンダリングするのと、カスタムコンポーネントをNodeコンポーネントで包み、アクション、プロパティ、イベントを使用することができます。 コンポーネント全体をSvelvetコンポーネントの子として渡し、Svelvetコンポーネント上でレンダリングする方法があります。

``` svelte: App.svelte
<script>
  import { Node, Svelvet } from 'svelvet';
  import MyNode from './MyNode.svelte';
</script>

<Svelvet>
	<MyNode />
	<Node id="alpha" bgColor="red" label="Default Node" />
</Svelvet>
```

``` svelte: MyNode.svelte
<script lang="ts">
  import { Node } from 'svelvet';

  function handleClick(e: CustomEvent) {
    const { detail } = e;
    detail.node.bgColor.set('red');
  }
</script>

<Node id="55" let:grabHandle let:selected on:nodeClicked="{handleClick}">
  <div use:grabHandle class:selected class="my-component">
    <span>Click Me</span>
  </div>
</Node>
```
Nodeコンポーネントの下位要素として自由にタグを作成することができるため、必要な機能に応じて自由にNodeのコンポーネントを入れてカスタマイズすることができます。

#### Anchor
https://svelvet.mintlify.app/components/anchor

AnchorはNodeとNodeを繋ぐ接続地点になります。
Nodeコンポーネント下位要素として設定して、CSSを使用して任意の場所に配置ができます。
Anchorも他のコンポーネントと同じく、下位要素にHTMLタグを設定することでカスタマイズができます。

``` svelte: MyNode.svelte
<script lang="ts">
  import { Node, Anchor } from 'svelvet';
  import type { Connections } from 'svelvet';
  const connections: Connections = [["node1", "4"],["node2", "3"]]
</script>

<Node let:selected>
  <div class:selected>
    <div class="input-anchors">
      <Anchor bgColor="red" id="data-connection" input />
      <Anchor multiple input nodeConnect/>
    </div>
    <div class="output-anchors">
      <Anchor direction="east" {connections}  output />
    </div>
  </div>
</Node>

```

#### Edge
https://svelvet.mintlify.app/components/edge

EdgeはNodeとNodeの間をAnchorを介して繋ぐ線です。
Anchorコンポーネント下位要素として設定して、Nodeの間を繋ぐ線を作ります。

![スクリーンショット 2023-12-22 1.23.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307302/757fec7e-5913-cb54-2d17-1365f04b6dc5.png)

### Mermaid文法でフローチャート表示
Svelvetのいい機能として、Mermaid文法でフローチャートを表示することができます。
SvelvetコンポーネントのmermaidプロパティでMermaidコードの文字列を入れるだけでOK
特にカスタムしなくてもいい感じのフローが作成されます。

``` svelte: App.svelte
<script>
	import { Svelvet } from 'svelvet';

	const mermaidStr = `A[Start] --> B[何を食べるか]
    B --> |肉が食べたい| C[焼肉]
    B --> |魚が食べたい| D[寿司]
    C --> E[お腹いっぱい]
    D --> E
    E --> F[End]`;
</script>

<body>
	<Svelvet theme="dark" width={800} height={800} controls mermaid={mermaidStr} />
</body>
```

![スクリーンショット 2023-12-17 18.33.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307302/12716656-c6be-96d1-4ade-43c17aa7f705.png)

### 他のライブラリ
最近、React側のFlow chartライブラリでReact FlowにSvelte専用のSvelte Flowというライブラリを追加しましまた。

こちらもこれからSvelteのフローチャートライブラリの一つの選択肢になるかと思います。

https://svelteflow.dev/

https://github.com/xyflow/xyflow

### 最後に
今回はSvelvetというフローチャートライブラリについて超簡単に記載しました。
Svelteは良いフレームワークであり、今回紹介したSvelvetのように良いライブラリがたくさんありますが、まだコミュニティが活性化されていない状態になっています。
Svelte5というある意味大激変の変化、SvelteKitも2が発売され、さらに今後が期待されるフレームワークになると思いますので、これからも良い機能があったら紹介していこうと思います。
最後まで見ていただきありがとうございます！