Core Concepts

How Does Svelvet Work?

A Svelvet flow component renders any number of nodes and edges. As a user of the component, you can pass arrays of nodes and edges as props to the Svelvet component. Under the hood, Svelvet will render the nodes with information provided in the nodes array and connect them with edges depending on its source and target IDs provided in the edges array, which correspond to the IDs of the nodes to connect.

Use Cases

There are many reasons why you may want to include a flow diagram in your application or website. Some of these use cases include:

  • User flows
  • Project management
  • HR organization charts
  • Operational procedures
  • Business planning
  • ... and so much more!

Below is a quick example of using Svelvet to display a diagram mapping out the purchase flow of an application.