はじめに
こちらは 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を拡大・縮小、ミニマップ表示などのオプションが含まれています。
<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コンポーネント上でレンダリングする方法があります。
<script>
import { Node, Svelvet } from 'svelvet';
import MyNode from './MyNode.svelte';
</script>
<Svelvet>
<MyNode />
<Node id="alpha" bgColor="red" label="Default Node" />
</Svelvet>
<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タグを設定することでカスタマイズができます。
<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
特にカスタムしなくてもいい感じのフローが作成されます。
<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が発売され、さらに今後が期待されるフレームワークになると思いますので、これからも良い機能があったら紹介していこうと思います。
最後まで見ていただきありがとうございます！