Connection Markers

Description

This guide shows how to set up different connection markers, allowing various markers to be displayed on connections between connectors. To enable this feature, add an SVG element with the f-connection-marker directive inside the f-connection component.

Markers are useful when the meaning of an edge matters: direction, approval, success/failure paths, or domain-specific relationship types. They help users read the graph faster without opening a separate legend.

They are also a straightforward way to make graph semantics visible without changing node layout or connection routing. That is valuable when a diagram should stay readable at a glance. For product teams, markers are often the fastest way to add visual meaning to a connection without building a custom edge renderer from scratch.

Example

Related docs

• Connection Marker Docs
• Connection Content Example