Key Concepts

At its core, Svelte Flow is about creating interactive flowgraphs - a collection of nodes connected by edges. While this might sound simple in theory, Svelte Flow provides the foundation for building complex interactive diagrams:

• An infinite, interactive canvas for your flowgraph
• The ability to render and connect nodes with edges
• Everything is built using standard Svelte components

To help you understand the terminology we use throughout the documentation, take a look at the example flow below.

Here are the key terms you’ll encounter when working with Svelte Flow:

• Svelte Flow Component: The main component that renders your flowgraph
  • Svelte Flow Props: All configuration and data is passed through props
• Viewport: The visible area of your flowgraph that can be panned and zoomed
  • When we say something is “in the viewport,” it means it moves with the viewport’s transformation
• Base Styles: The essential CSS required for Svelte Flow to function properly
• Built-In Components: Ready-to-use components like Controls and MiniMap that enhance your flowgraph

With these concepts in mind, you’re ready to install Svelte Flow and start building your first flow!