Concepts

Take a couple of nodes and draw an edge between them: You got yourself a flowgraph. This might seem like a very brief definition, but it is the essence of what Svelte Flow solves:

• An interactive, infinite canvas
• You can position nodes on the canvas
• Nodes can be connected with edges
• It’s just regular Svelte components

To get up to speed with the terminologies we use, check out the flowgraph below.

Some terminologies you need to be aware when we talk about working with Svelte Flow in your code:

• Svelte Flow Component: The main component that renders the flowgraph
• Svelte Flow Props: Configure Svelte Flow and pass data via its props
• Viewport: The visible area of the flowgraph, that can be panned and zoomed.
  • “In the viewport” means something is moving with the transformation of the viewport.
• Base Styles: The minimal css that needs to be imported to make Svelte Flow work
• Built-In Components: Some additional plug and play components that are included in the package

<script>
  import { SvelteFlow, Panel, Minimap, Controls } from '@xyflow/svelte';
 
  // The Base Styles are the bare minimum css you need to import
  // import '@xyflow/svelte/dist/base.css';
 
  // We recommend the Default Styles, which include the Base Styles
  // and some initial styling for the nodes and edges.
  import '@xyflow/svelte/dist/style.css';
</script>
 
<!--
 This is the "Svelte Flow Component". It is the heart of your flowgraph.
 You pass your nodes & edges as well as all your options to it via props.
 We refer to them as the "Svelte Flow Props". There are a lot of them!
-->
<SvelteFlow
  fitView
  colorMode="dark"
  onconnect={() => console.log('Congrats, you connected two nodes!')}
>
  <!--
    Anything you render inside the Svelte Flow Component will be overlayed on the viewport.
    This is useful for things like panels, buttons and the minimap —
    everything that is fixed and should NOT move with the viewport.
  -->
  <Panel position="top-left">
    <h1>Welcome to Svelte Flow</h1>
  </Panel>
  <Minimap />
  <Controls />
</SvelteFlow>

Now you know everything you need to understand pretty much everything we refer to in the docs. Next, you’ll learn everything about Nodes & Edges.