Add proper marker usage description in documentation

[maliyshock]

Code of Conduct

• [X] I have read and agree to the xyflow contributor Code of Conduct

Which site are you suggesting a change for?

reactflow.dev

What content is affected by this change?

https://reactflow.dev/examples/edges/markers and https://reactflow.dev/examples/edges/custom-edges and https://reactflow.dev/api-reference/components/base-edge

What part(s) of the article would you like to see updated?

So basically there might be a case of customer edge with custom marker. So we need an example of BaseEdge component for this case

Right now it says: "markerEnd | stringThe id of the SVG marker to use at the end of the edge. This should be defined in a element in a separate SVG document or element."

But it is not exactly the truth, because if you put just an id it will not work. These examples will not work: <BaseEdge id={id} markerEnd="#marker" path={edgePath} style={{ strokeWidth: "4px" }} /> <BaseEdge id={id} markerEnd="marker" path={edgePath} style={{ strokeWidth: "4px" }} />

Instead you have to use "url(#marker)" in markerEnd prop. This will work

<BaseEdge id={id} markerEnd="url(#marker)" path={edgePath} style={{ strokeWidth: "4px" }} />

Additional information

No response

[moklick]

This is good feedback! We could extend our existing examples and give some more context here.

[printerscanner]

Updated here: https://github.com/xyflow/xyflow/pull/5390