From 182a6d9263e3853630a448463e34cc54f08ea4b0 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 20 Jun 2024 10:18:30 +0200
Subject: [PATCH] docs: add info on connection mode

---
 docs/src/guide/handle.md | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/docs/src/guide/handle.md b/docs/src/guide/handle.md
index 6ebc13fa..e2d817a1 100644
--- a/docs/src/guide/handle.md
+++ b/docs/src/guide/handle.md
@@ -147,7 +147,22 @@ const handleConnectable: HandleConnectableFunc = (node, connectedEdges) => {
 </template>
 ```
 
+## Connection Mode
 
+By default, Vue Flow will use `<VueFlow :connection-mode="ConnectionMode.Loose" />` which allows you to connect edges to any handle.
+That means connections between a `source` and another `source` type `<Handle>` are allowed.
+
+If you want to restrict connections to only be made between `source` and `target` type handles, you can set the `connection-mode` prop to `ConnectionMode.Strict`.
+
+```vue
+<script setup>
+import { ConnectionMode, VueFlow } from '@vue-flow/core'
+</script>
+
+<template>
+  <VueFlow :connection-mode="ConnectionMode.Strict" />
+</template>
+```
 
 ## Dynamic Handle Positions & Adding/Removing Handles Dynamically