This portion of the documentation has been deprecated. Please refer to the latest version Documentation for versions 7.0.0 and above. and the Upgrading section for information on the major functional changes moving from version 6 to version 7 and later.

Svelvet is available as an npm package.


To install and save in your package.json dependencies, run the command below using npm:

npm install svelvet clipboard icon

Or yarn:

yarn add svelvet clipboard icon

After you've installed Svelvet, head over to Basic Usage to see how to render the component.


We use the following terms to describe parts of a Svelvet flow diagram:

Node: A node is a draggable element that can be connected to other nodes.
Edge: An edge is the connecting line between two nodes.
Anchor: An anchor is the connecting point between the node and the edge.
Handle: A handle is the element or shape that appears at the start or end of each edge (e.g. semi-circle or arrowhead).