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 lang="ts">
  import { type NodeProps } from '@xyflow/svelte';
  import type { AnnotationNode } from './types';
 
  type $$Props = NodeProps<AnnotationNode>;
  $$restProps;
 
  export let data: $$Props['data'];
</script>
 
<div style="padding: 10px; display: flex">
  <div style="marginRight: 4px">{data.level}.</div>
  <div>{data.label}</div>
</div>
{#if data.arrowStyle}
  <div class="arrow" style={data.arrowStyle}>⤹</div>
{/if}