Implementation:FlowiseAI Flowise ConnectionLine

Knowledge Sources	FlowiseAI Flowise
Domains	Agent Flow Editor, Visual Canvas
Last Updated	2026-02-12 07:00 GMT

Overview

ConnectionLine is a memoized React component that renders a custom animated bezier connection line with color-coded edges and conditional labels in the AgentFlow v2 canvas.

Description

This component draws an SVG bezier path between two points during a drag-to-connect interaction in ReactFlow. It determines the connection color by looking up the source node name in the AGENTFLOW_ICONS constant, falling back to the theme primary color. For humanInputAgentflow, conditionAgentflow, and conditionAgentAgentflow nodes, it renders contextual edge labels (e.g., "proceed"/"reject" for human input, numeric index for conditions) using the ReactFlow EdgeLabelRenderer. An arrow-circle SVG icon is displayed at the target position.

Usage

Use this component as the connectionLineComponent prop in the ReactFlow instance within the AgentFlow v2 canvas. It is automatically invoked when a user drags from a node handle to create a new connection.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/views/agentflowsv2/ConnectionLine.jsx
• Lines: 1-102

Signature

const ConnectionLine = ({ fromX, fromY, toX, toY, fromPosition, toPosition }) => { ... }

export default memo(ConnectionLine)

Import

import ConnectionLine from '@/views/agentflowsv2/ConnectionLine'

I/O Contract

Inputs

Name	Type	Required	Description
fromX	number	No	X coordinate of the connection source point
fromY	number	No	Y coordinate of the connection source point
toX	number	No	X coordinate of the connection target point
toY	number	No	Y coordinate of the connection target point
fromPosition	any	No	Position handle of the source node (e.g., top, bottom, left, right)
toPosition	any	No	Position handle of the target node

Outputs

Name	Type	Description
JSX.Element	SVG group element	An animated bezier path with optional edge labels and a directional arrow icon at the target

Usage Examples

Basic Usage

import ConnectionLine from '@/views/agentflowsv2/ConnectionLine'

// Used as a prop in ReactFlow
<ReactFlow
    nodes={nodes}
    edges={edges}
    connectionLineComponent={ConnectionLine}
    // ...other props
/>

Related Pages

• Principle:FlowiseAI_Flowise_Edge_Connection