Feature Overview

This is an overview example with all the built-in features of Svelte Flow. You can see different node types (input, default, output), edge types (bezier, step and smoothstep), edge labels and custom styled edge labels. On the bottom left you see the Controls and on the bottom right the MiniMap component.


<script module>
  import type { Node, NodeProps } from '@xyflow/svelte';
 
  export type AnnotationNode = Node<{
    label: string;
    level: number;
    arrowStyle?: string;
  }>;
</script>
 
<script lang="ts">
  let { data }: NodeProps<AnnotationNode> = $props();
</script>
 
<div class="annotation-content">
  <div class="annotation-level">{data.level}.</div>
  <div>{data.label}</div>
</div>
{#if data.arrowStyle}
  <div class="annotation-arrow" style={data.arrowStyle}>⤹</div>
{/if}