SvelteFlow Dynamic EdgeMarkers

[Everduin94]

Hello! First I wanted to say this is a really cool project and I've enjoyed working with it and seeing what it can do.

My question is about adding a basic MarkerType.Arrow to a custom edge via the markerEnd prop.

I have read the documentation

• Custom Edges: https://svelteflow.dev/examples/edges/custom-edge
• As well as the note here: https://svelteflow.dev/api-reference/components/base-edge#notes

However, (and I think a lot of the SvelteFlow documentation suffers from this), there aren't any examples of dynamically creating edges with a markerEnd. - i.e. When a user creates a new edge.

For example, in the Custom Edges example. All of the data is hard coded in a ts file. If you delete and re-apply the edge, the MarkerType is lost.

I have something like this. However, I don't see how I can set this markerEnd prop on the edges store when a user creates a new edge. - If I hard code the component prop to MarkerType.Arrow that doesn't work either. AFAIK, it's actually supposed to be some url(#id) value. But, I'm not sure what the url value is or how it's determined.

<script>
// .... custom edge props
export let markerEnd // <-- Always undefined on new edge
</script>

<BaseEdge path={edgePath} {markerEnd} />
<EdgeLabelRenderer>
  <!-- Custom stuff -->
</EdgeLabelRenderer>

[Everduin94]

For my use-case I believe I found an answer. - Passing defaultEdgeOptions={{markerEnd: { type: MarkerType.Arrow }}} to SvelteFlow.