Edge Markers

This example shows how to add markers to the start and end of edges in Svelte Flow. Edge markers are useful for indicating direction, type, or status of connections. You can use SVG markers to create custom arrowheads or other visual indicators.


<script lang="ts">
  import { SvelteFlow, Background, type Edge, type Node } from '@xyflow/svelte';
 
  import '@xyflow/svelte/dist/style.css';
 
  import { initialNodes, initialEdges } from './nodes-and-edges';
 
  // the custom edge marker is an SVG with a marker element.
  // That marker has the id "logo". We can use that id to reference it,
  // by using the markerStart and markerEnd edge options.
  import CustomEdgeMarker from './CustomEdgeMarker.svelte';
 
  let nodes = $state.raw<Node[]>(initialNodes);
  let edges = $state.raw<Edge[]>(initialEdges);
</script>
 
<SvelteFlow bind:nodes bind:edges fitView>
  <CustomEdgeMarker />
  <Background />
</SvelteFlow>