Svelte Flow Diagram

Early preview version...

Features

• svelte components as diagram nodes
• mousewheel zoom
• space to drag around

Install

npm i svelte-flow-diagram

Usage

The best way is to check out the example index route.

Example

Data passed to data will react to changes. Currently, props is only intended to be used for initial/static properties. The uuid of each node is available to the "content component" as a prop.

<script>
	import { Diagram } from 'svelte-flow-diagram';

	let diagram;

	// add a node
	diagram.insertNode({
		uuid: 'test-uuid-1', // optional, gets generated when omitted
		data: { ... }, // optional data
		components: {
			content: { component: MyNodeComponent, props: { ... } },
			connectors: {
				input: { component: MyInputConnector },
				output: { component: MyOutputConnector }
			}
		},
		inputNames: ['in'],
		outputNames: ['out'],
		position: { x: 200, y: 100 }
	});

    	// add another node
	diagram.insertNode({
		uuid: 'test-uuid-2', // optional, gets generated when omitted
		data: { ... }, // optional data
		components: {
			content: { component: MyNodeComponent, props: { ... } },
			connectors: {
				input: { component: MyInputConnector },
				output: { component: MyOutputConnector }
			}
		},
		inputNames: ['in'],
		outputNames: ['out'],
		position: { x: 400, y: 100 }
	});

    	// add a connection
	diagram.addConnection({
		uuid: 'test-connection', // optional, gets generated when omitted
		from: {
			name: 'out',
			uuid: 'test-uuid-1'
		},
		to: {
			name: 'in',
			uuid: 'test-uuid-2'
		}
	});
</script>

<Diagram bind:this={diagram} />

Methods

name	description
insertNode	insert a node
removeNode	remove a node (also removes associated connections)
addConnection	add a connection
removeConnection	remove a connection
clear	clears the diagram
setNodeData	update the data of the given node
setNodePosition	update the position of the given node

Props

name	default	description
nodes	{}	All of the nodes
connections	{}	All of the connections
zoomLevel	1	Zoom in or out; 1 => 100%
connectionRenderer	{}	Change the appearance of connections
zoomMin	0.1	minimal zoom level
zoomMax	5	maximal zoom level
zoomStep	0.1	increase/decrease zoom by this much per step

ConnectionRenderer

The connection line can be manipulated for the following states:

interface ConnectionRenderer {
	default?: (context: CanvasRenderingContext2D) => void;
	hovered?: (context: CanvasRenderingContext2D) => void;
	selected?: (context: CanvasRenderingContext2D) => void;
	creating?: (context: CanvasRenderingContext2D) => void;
}

Optional Events

name	payload	description
hoverConnection	{ uuid }	Is fired when hovering over a connection.
selectConnection	{ uuid }	Is fired when selecting a connection.

Development

Run test app

npm run dev

Build package

npm run package

Publish package

npm run publish