Connection

A custom connection line component for Vue Flow-based canvases with animated bezier curve styling.

The Connection component provides a styled connection line for Vue Flow canvases. It renders an animated bezier curve with a circle indicator at the target end, using consistent theming through CSS variables.

The Connection component is designed to be used with the Canvas component. See the Workflow demo for a full example.

Install using CLI

AI Elements Vue

shadcn-vue CLI

npx ai-elements-vue@latest add connection

Install Manually

Copy and paste the following code in the same folder.

Connection.vue

index.ts

<script setup lang="ts">
import type { ConnectionLineProps } from '@vue-flow/core'
import { computed } from 'vue'

const props = defineProps<ConnectionLineProps>()

const HALF = 0.5

const pathD = computed(() => {
  const { sourceX, sourceY, targetX, targetY } = props
  const controlX1 = sourceX + (targetX - sourceX) * HALF
  const controlX2 = sourceX + (targetX - sourceX) * HALF
  return `M${sourceX},${sourceY} C ${controlX1},${sourceY} ${controlX2},${targetY} ${targetX},${targetY}`
})
</script>

<template>
  <g>
    <path
      class="animated"
      fill="none"
      stroke="var(--color-ring)"
      :stroke-width="1"
      :d="pathD"
    />

    <circle
      :cx="targetX"
      :cy="targetY"
      fill="#fff"
      :r="3"
      stroke="var(--color-ring)"
      :stroke-width="1"
    />
  </g>
</template>