Custom Connection Type

Description

This example shows how to define a custom connection type instead of relying only on the built-in edge styles. A custom type lets you control path geometry, visual styling, interaction rules, and how a specific class of connection behaves in your editor.

That matters when connections carry meaning. Approval edges, fallback routes, data dependencies, validation paths, or system-to-system links often should not all look and behave the same.

Using a custom connection type is the right step when standard straight, segment, or bezier edges are close, but not quite enough for the product semantics you need.

Example

What this solves

• Reusable edge behavior for one specific connection category.
• Better visual distinction between different graph relationships.
• A safer path to domain-specific graph UX without forking the whole editor model.

This example is useful when you want a consistent custom edge type, not just one-off styling tweaks.

Related docs

• Connection Component
• Connection Marker Directive
• Connection Types Example
• Connection Gradients Example