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

はじめに

こちらは Svelte Advent Calendar 2023の23日目の投稿です。
今回はSvelvetというSvelte専用のフローチャートライブラリについて、簡単に説明できればと思います。

Svelvetとは

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

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

カスタムによっては↑みたいな良い感じのデータペースのER図も作成できます。

インストール

npm install svelvet

yarn add svelvet

簡単な機能の紹介

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

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

Svelvet

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

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

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

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

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

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

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>

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

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

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

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

Mermaid文法でフローチャート表示

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

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>

他のライブラリ

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

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

最後に

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