Simplify Diagramming with Svelvet

Svelte is a frontend compiler that has been exploding in popularity because of its ease of use and great performance. Despite the excitement for this newcomer, Svelte’s ecosystem is still maturing and will need more time to match a toolbox of React’s size. One such tool that the React developers enjoy over Svelte developers is React-Flow, a component library that exists to simplify application diagramming and idea mapping.

Enter Svelvet

Svelvet is an open source Svelte component library which seeks to port React Flow functionality over to Svelte. This includes rendering nodes, edges, zoom and pan functionality. With Svelvet, idea-mapping and charting out application functionality is easier than ever!

Installation

Svelvet is available both as an npm and yarn package. To install Svelvet into your application you simply need to enter one of the commands below:

npm install svelvet

or

yarn add svelvet

Now that you’ve installed Svelvet into your Svelte application, you need to import it into the portion of code that will be using it like this:

import Svelvet from 'svelvet';

The Svelvet component library is composed of nodes and edges, these nodes and edges will render according to values you assign them in your application. In this example we will be rendering the nodes and edges with the information below:

Once you render the Svelvet component with the information you have just initialized you will see the diagram below:

Once rendered the user will be able to select and move nodes, zoom in and pan.

Future Plans
Although the base functionality of Svelvet is built out, there is room for additional features that would make Svelvet a more extensive library. Some functionality we would like to add to this library include:

• More styling and customization of nodes and edges
• Increase test coverage for scalability
• Conversion of the documentation website into a fullstack application which allows users to login, create and save Svelvet diagrams that they create
• Custom Error Handling

Contribute
Svelvet will continue to be a work in progress. If the functionality built out in this library is of any interest to you please feel free to contribute!

https://github.com/oslabs-beta/Svelvet

The Svelvet Team

Anu Sharma
LinkedIn: https://www.linkedin.com/in/anu-sharma-6936a686/
Github: https://github.com/anulepau

Andrew Widjaja
LinkedIn: https://www.linkedin.com/in/andrew-widjaja/
Github: https://github.com/andrew-widjaja

Aaron Willett
LinkedIn: https://www.linkedin.com/in/awillettnyc/
Github: https://github.com/awillettnyc

Alexander Zambrano
LinkedIn: https://www.linkedin.com/in/alexander-z-8b7716b0/
Github: https://github.com/azambran21

Documentation
https://www.svelvet.io