Connection Marker

Selectors: svg[fMarker], f-connection-marker-circle, f-connection-marker-arrow
Classes: FConnectionMarker, FConnectionMarkerCircle, FConnectionMarkerArrow

Connection markers let you define reusable visuals for connection starts and ends.

There are now two ways to use them:

Built-in marker components for the common cases.
svg[fMarker] for fully custom SVG geometry.

Why / Use cases

Use connection markers when edge semantics should be visually explicit.

Typical use cases:

Distinguish direction or type of edge.
Show selected-state marker variants.
Match product branding with custom SVG marker geometry.
Reuse the same marker for both normal and selected states.

Use built-in markers when the default shapes are enough. Use svg[fMarker] when geometry, sizing, or branding must be custom.

How it works

Marker definitions are declared inside f-connection. During connection redraw, the library clones those definitions into the connection <defs> block and applies them to the rendered path.

Built-in markers hide the SVG boilerplate from the template, while svg[fMarker] gives you full control over the shape.

Built-in markers

`f-connection-marker-circle`

Use it when you want the default circular start marker.

By default it targets START_ALL_STATES.

`f-connection-marker-arrow`

Use it when you want the default arrow end marker.

By default it targets END_ALL_STATES.

Both built-in markers accept the same type input as custom markers, so you can override the default state mapping when needed.

Custom SVG markers

Use svg[fMarker] when the marker geometry, viewBox, refX, refY, or size should be fully custom.

API

Inputs

type: EFMarkerType | string; Default depends on the marker.
width: number; Default: 0 for svg[fMarker].
height: number; Default: 0 for svg[fMarker].
refX: number; Default: 0 for svg[fMarker].
refY: number; Default: 0 for svg[fMarker].
orient: string; Default: auto.
markerUnits: string; Default: strokeWidth.

Built-in markers expose only type, because their SVG geometry and marker metrics are already preconfigured.

Marker types

You can pass the enum or the short string aliases:

START or start
END or end
SELECTED_START or selected-start
SELECTED_END or selected-end
START_ALL_STATES or start-all-states
END_ALL_STATES or end-all-states

`EFMarkerType`

START_ALL_STATES expands to START and SELECTED_START. END_ALL_STATES expands to END and SELECTED_END.

Recommended usage

Use <f-connection-marker-circle /> and <f-connection-marker-arrow /> when the built-in shapes are enough.
Use START_ALL_STATES and END_ALL_STATES when the same marker should appear in both normal and selected states.
Use separate START / SELECTED_START or END / SELECTED_END markers only when the selected connection must look different.
Use svg[fMarker] when you need fully custom geometry.

Styling

.connection-marker is the shape class used inside examples and built-in marker templates.
Visible marker rendering happens on the connection path; marker declarations remain hidden source definitions.

Notes / Pitfalls

Marker dimensions and refX/refY must match your SVG path geometry; wrong values make markers look offset.
orient="auto" is usually the correct choice for arrow-like markers.
Built-in markers remove the need to write <svg> manually, but custom SVG markers remain the best option when branding matters.

Example

[example.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/libs/f-examples/connections/connection-markers/example.html [example.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/libs/f-examples/connections/connection-markers/example.ts [example.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/libs/f-examples/connections/connection-markers/example.scss