From 08b1cf5ca5d6447d8f2bf323cbace12ff1447f6e Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Tue, 25 Nov 2025 16:31:53 +0200
Subject: [PATCH 1/3] docs(Diagram): Add info about panning and selection

---
 components/diagram/overview.md | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/components/diagram/overview.md b/components/diagram/overview.md
index 35348dd49..706c1c1d7 100644
--- a/components/diagram/overview.md
+++ b/components/diagram/overview.md
@@ -228,6 +228,38 @@ The Diagram allows users to zoom the graph in and out for better perception. The
                 MinZoom="0" />
 ````
 
+## Pan
+
+The Diagram content may overflow the component boundaries if there are a lot of shapes or if the user zooms in. By default, the Diagram allows users to pan the content by holding the **Ctrl** key and dragging. The following code snippet shows the relevant parameters together with their default values.
+
+When both panning and [selection](#select) are enabled, make sure the two features use a different `Key`.
+
+>caption Pan-related Diagram parameters
+
+````RAZOR.skip-repl
+<TelerikDiagram>
+    <DiagramPannable Enabled="true" Key="@DiagramPannableKey.Ctrl" />
+</TelerikDiagram>
+````
+
+## Select
+
+Users can select a single shape or connection with a click. The Diagram also supports multiple selection through dragging a rectangular marquee. The following code snippet shows the relevant parameters together with their default values.
+
+Once the user selects some shapes and connections, they can drag them to another position or remove them with the **Del** key.
+
+When both [panning](#pan) and selection are enabled, make sure the two features use a different `Key`.
+
+>caption Selection-related Diagram parameters
+
+````RAZOR.skip-repl
+<TelerikDiagram>
+    <DiagramSelectable Enabled="true" Multiple="true" Key="@DiagramSelectableKey.None">
+        <DiagramSelectableStroke Color="black" DashType="@DashType.Dash" Width="1" />
+    </DiagramSelectable>
+</TelerikDiagram>
+````
+
 ## Events
 
 The Telerik Diagram fires events that enable the app to detect and react to user interactions with the component. Find out more about the [Diagram events and event arguments](slug:diagram-events).

From 8df43ec9ec401d31c369bb48dc5981b0ffb0b561 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Tue, 2 Dec 2025 12:42:23 +0200
Subject: [PATCH 2/3] Update components/diagram/overview.md

---
 components/diagram/overview.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/diagram/overview.md b/components/diagram/overview.md
index 706c1c1d7..a3772c225 100644
--- a/components/diagram/overview.md
+++ b/components/diagram/overview.md
@@ -246,7 +246,7 @@ When both panning and [selection](#select) are enabled, make sure the two featur
 
 Users can select a single shape or connection with a click. The Diagram also supports multiple selection through dragging a rectangular marquee. The following code snippet shows the relevant parameters together with their default values.
 
-Once the user selects some shapes and connections, they can drag them to another position or remove them with the **Del** key.
+Once the user selects some shapes and connections, they can drag them to another position or remove them with the `Del` key.
 
 When both [panning](#pan) and selection are enabled, make sure the two features use a different `Key`.
 

From 271e86b6b9d9ec544d14ec227500166c33b3f5e2 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Tue, 2 Dec 2025 12:42:42 +0200
Subject: [PATCH 3/3] Update components/diagram/overview.md

---
 components/diagram/overview.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/diagram/overview.md b/components/diagram/overview.md
index a3772c225..1f81d98a6 100644
--- a/components/diagram/overview.md
+++ b/components/diagram/overview.md
@@ -230,7 +230,7 @@ The Diagram allows users to zoom the graph in and out for better perception. The
 
 ## Pan
 
-The Diagram content may overflow the component boundaries if there are a lot of shapes or if the user zooms in. By default, the Diagram allows users to pan the content by holding the **Ctrl** key and dragging. The following code snippet shows the relevant parameters together with their default values.
+The Diagram content may overflow the component boundaries if there are a lot of shapes or if the user zooms in. By default, the Diagram allows users to pan the content by holding the `Ctrl` key and dragging. The following code snippet shows the relevant parameters together with their default values.
 
 When both panning and [selection](#select) are enabled, make sure the two features use a different `Key`.