diff --git a/concepts/05 UI Components/Diagram/10 Data Binding/10 Node and Edge Arrays.md b/concepts/05 UI Components/Diagram/10 Data Binding/10 Node and Edge Arrays.md
index e4dc8be743..9468b2a45e 100644
--- a/concepts/05 UI Components/Diagram/10 Data Binding/10 Node and Edge Arrays.md	
+++ b/concepts/05 UI Components/Diagram/10 Data Binding/10 Node and Edge Arrays.md	
@@ -20,7 +20,7 @@ During the binding process, the UI component creates a shape for every bound nod
         $("#diagram").dxDiagram({
             nodes: {
                 dataSource: new DevExpress.data.ArrayStore({
-                    key: "this",
+                    key: "id",
                     data: orgItems
                 }),
                 keyExpr: "id",
@@ -28,7 +28,7 @@ During the binding process, the UI component creates a shape for every bound nod
             },
             edges: {
                 dataSource: new DevExpress.data.ArrayStore({
-                    key: "this",
+                    key: "id",
                     data: orgLinks
                 }),
                 keyExpr: "id",
@@ -39,7 +39,7 @@ During the binding process, the UI component creates a shape for every bound nod
     });
         
     <!-- tab: data.js -->
-    var orgItems = [{  
+    const orgItems = [{  
         "id":"101",
         "text":"Development",
     },{  
@@ -50,7 +50,7 @@ During the binding process, the UI component creates a shape for every bound nod
         "text":"ASP.NET\nTeam",
     }];
 
-    var orgLinks = [{  
+    const orgLinks = [{  
         "id":"121",
         "from":"101",
         "to":"102",
@@ -243,7 +243,7 @@ During the binding process, the UI component creates a shape for every bound nod
 ##### React
 
     <!-- tab: App.js -->
-    import React, { useState, useEffect } from "react";
+    import React from "react";
     import Diagram, { Nodes, Edges } from "devextreme-react/diagram";
     import ArrayStore from "devextreme/data/array_store";
     import service from "./data.js";
diff --git a/concepts/05 UI Components/Diagram/10 Data Binding/20 Linear Array.md b/concepts/05 UI Components/Diagram/10 Data Binding/20 Linear Array.md
index c4c95e7bf7..be0adfbd10 100644
--- a/concepts/05 UI Components/Diagram/10 Data Binding/20 Linear Array.md	
+++ b/concepts/05 UI Components/Diagram/10 Data Binding/20 Linear Array.md	
@@ -20,7 +20,7 @@ During the binding process, the UI component creates a shape for every bound nod
         $("#diagram").dxDiagram({
             nodes: {
                 dataSource: new DevExpress.data.ArrayStore({
-                    key: "this",
+                    key: "ID",
                     data: employees
                 }),
                 keyExpr: "ID",
@@ -186,12 +186,12 @@ During the binding process, the UI component creates a shape for every bound nod
 
     export default {
         components: {
-            DxDiagram, DxNodes, DxEdges
+            DxDiagram, DxNodes
         },
         data() {
             return {
                 dataSource: new ArrayStore({
-                    key: 'id',
+                    key: 'ID',
                     data: service.getEmployees(),
                 })
             };
diff --git a/concepts/05 UI Components/Diagram/10 Data Binding/30 Hierarchical Array.md b/concepts/05 UI Components/Diagram/10 Data Binding/30 Hierarchical Array.md
index 7a82633d42..eb1fdc5c7c 100644
--- a/concepts/05 UI Components/Diagram/10 Data Binding/30 Hierarchical Array.md	
+++ b/concepts/05 UI Components/Diagram/10 Data Binding/30 Hierarchical Array.md	
@@ -10,6 +10,8 @@ Specify the following **required properties**: [nodes.keyExpr](/api-reference/10
 
 During the binding process, the UI component creates a shape for every bound node and all connectors that are between a node and its children. Note that the edges are not maintained as entities in a data source, thus the detached connector disappears after it is rebound.
 
+![Diagram - Node and Edge Arrays](/images/diagram/db-linear-array.png)
+
 ---
 ##### jQuery
 
@@ -18,7 +20,7 @@ During the binding process, the UI component creates a shape for every bound nod
         $("#diagram").dxDiagram({
             nodes: {
                 dataSource: new DevExpress.data.ArrayStore({
-                    key: "this",
+                    key: "ID",
                     data: employees
                 }),
                 keyExpr: "ID",
@@ -29,7 +31,7 @@ During the binding process, the UI component creates a shape for every bound nod
     });
 
     <!-- tab: data.js -->
-    var employees = [{
+    const employees = [{
         "ID": 3,
         "Full_Name": "Arthur Miller",
         "Title": "CTO",
@@ -62,6 +64,233 @@ During the binding process, the UI component creates a shape for every bound nod
         }]
     }];
 
----
+##### Angular
 
-![Diagram - Node and Edge Arrays](/images/diagram/db-linear-array.png)
+    <!-- tab: app.component.html -->
+    <dx-diagram>
+        <dxo-nodes
+            [dataSource]="dataSource"
+            keyExpr="ID"
+            textExpr="Title"
+            itemsExpr="Items"
+        >
+        </dxo-nodes>
+    </dx-diagram>
+
+    <!-- tab: app.component.ts -->
+    import { Component } from '@angular/core';
+    import ArrayStore from "devextreme/data/array_store";
+    import { Service } from "./app.service";
+
+    @Component({
+        selector: 'app-root',
+        templateUrl: './app.component.html',
+        styleUrls: ['./app.component.css'],
+        providers: [Service]
+    })
+    
+    export class AppComponent {
+        dataSource: ArrayStore;
+        constructor(service: Service) {
+            this.dataSource = new ArrayStore({
+            key: "ID",
+            data: service.getEmployees(),
+            });
+        }
+    }
+
+    <!-- tab: app.service.ts -->
+    import { Injectable } from "@angular/core";
+
+    export class Employee {
+        ID: number;
+        Full_Name: string;
+        Title: string;
+        Items: Employee[];
+    }
+
+    const employees = [{
+        "ID": 3,
+        "Full_Name": "Arthur Miller",
+        "Title": "CTO",
+        "Items": [{
+            "ID": 6,
+            "Full_Name": "Brett Wade",
+            "Title": "IT Manager",
+            "Items": [{
+                "ID": 21,
+                "Full_Name": "Taylor Riley",
+                "Title": "Network Admin",
+            }, {
+                "ID": 23,
+                "Full_Name": "Wally Hobbs",
+                "Title": "Programmer",
+            }, {
+                "ID": 24,
+                "Full_Name": "Brad Jameson",
+                "Title": "Programmer",
+            }]
+        }, {
+            "ID": 9,
+            "Full_Name": "Barb Banks",
+            "Title": "Support Manager",
+            "Items": [{
+                "ID": 18,
+                "Full_Name": "James Anderson",
+                "Title": "Support Assistant",
+            }]
+        }]
+    }];
+
+    @Injectable()
+    export class Service {
+        getEmployees() {
+            return employees;
+        }
+    }
+
+##### Vue
+
+    <!-- tab: App.vue -->
+    <template>
+    <DxDiagram>
+        <DxNodes
+            :data-source="dataSource"
+            :key-expr="'ID'"
+            :text-expr="'Title'"
+            :items-expr="'Items'"
+        />
+    </DxDiagram>
+    </template>
+
+    <script>
+    import {
+        DxDiagram, DxNodes
+    } from 'devextreme-vue/diagram';
+    import ArrayStore from 'devextreme/data/array_store';
+    import service from './data.js';
+
+    export default {
+        components: {
+            DxDiagram, DxNodes
+        },
+        data() {
+            return {
+                dataSource: new ArrayStore({
+                    key: 'ID',
+                    data: service.getEmployees(),
+                })
+            };
+        }
+    };
+    </script>
+
+    <!-- tab: data.js -->
+    const employees = [{
+        "ID": 3,
+        "Full_Name": "Arthur Miller",
+        "Title": "CTO",
+        "Items": [{
+            "ID": 6,
+            "Full_Name": "Brett Wade",
+            "Title": "IT Manager",
+            "Items": [{
+                "ID": 21,
+                "Full_Name": "Taylor Riley",
+                "Title": "Network Admin",
+            }, {
+                "ID": 23,
+                "Full_Name": "Wally Hobbs",
+                "Title": "Programmer",
+            }, {
+                "ID": 24,
+                "Full_Name": "Brad Jameson",
+                "Title": "Programmer",
+            }]
+        }, {
+            "ID": 9,
+            "Full_Name": "Barb Banks",
+            "Title": "Support Manager",
+            "Items": [{
+                "ID": 18,
+                "Full_Name": "James Anderson",
+                "Title": "Support Assistant",
+            }]
+        }]
+    }];
+
+    export default {
+        getEmployees() {
+            return employees;
+        }
+    }
+
+##### React
+
+    <!-- tab: App.js -->
+    import React from "react";
+    import Diagram, { Nodes } from "devextreme-react/diagram";
+    import ArrayStore from "devextreme/data/array_store";
+    import service from "./data.js";
+
+    const dataSource = new ArrayStore({
+        key: 'ID',
+        data: service.getEmployees(),
+    });
+
+    const App = () => {
+        return (
+            <Diagram>
+                <Nodes 
+                    dataSource={dataSource} 
+                    keyExpr="ID" 
+                    textExpr="Title" 
+                    itemsExpr="Items"
+                />
+            </Diagram>
+        );
+    };
+
+    export default App;
+
+    <!-- tab: data.js -->
+    const employees = [{
+        "ID": 3,
+        "Full_Name": "Arthur Miller",
+        "Title": "CTO",
+        "Items": [{
+            "ID": 6,
+            "Full_Name": "Brett Wade",
+            "Title": "IT Manager",
+            "Items": [{
+                "ID": 21,
+                "Full_Name": "Taylor Riley",
+                "Title": "Network Admin",
+            }, {
+                "ID": 23,
+                "Full_Name": "Wally Hobbs",
+                "Title": "Programmer",
+            }, {
+                "ID": 24,
+                "Full_Name": "Brad Jameson",
+                "Title": "Programmer",
+            }]
+        }, {
+            "ID": 9,
+            "Full_Name": "Barb Banks",
+            "Title": "Support Manager",
+            "Items": [{
+                "ID": 18,
+                "Full_Name": "James Anderson",
+                "Title": "Support Assistant",
+            }]
+        }]
+    }];
+
+    export default {
+        getEmployees() {
+            return employees;
+        }
+    }
+
+---
\ No newline at end of file
diff --git a/concepts/05 UI Components/Diagram/10 Data Binding/35 Diagram Layout.md b/concepts/05 UI Components/Diagram/10 Data Binding/35 Diagram Layout.md
index 2339044f98..8231417545 100644
--- a/concepts/05 UI Components/Diagram/10 Data Binding/35 Diagram Layout.md	
+++ b/concepts/05 UI Components/Diagram/10 Data Binding/35 Diagram Layout.md	
@@ -1,6 +1,7 @@
-The UI component creates a diagram layout based on the algorithm specified by the [autoLayout.orientation](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/nodes/autoLayout/orientation.md '/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/nodes/autoLayout/#orientation') and [autoLayout.type](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/nodes/autoLayout/type.md '/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/nodes/autoLayout/#type') properties.
+The UI component creates a diagram layout based on the algorithm specified by the [autoLayout.orientation](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/nodes/autoLayout/orientation.md "/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/nodes/autoLayout/#orientation") and [autoLayout.type](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/nodes/autoLayout/type.md "/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/nodes/autoLayout/#type") properties.
 
 ---
+
 ##### jQuery
 
     <!-- tab: index.js -->
@@ -16,19 +17,69 @@ The UI component creates a diagram layout based on the algorithm specified by th
         });
     });
 
+##### Angular
+
+    <!-- tab: app.component.html -->
+    <dx-diagram>
+        <dxo-nodes ...>
+            <dxo-auto-layout orientation="horizontal" type="tree"></dxo-auto-layout>
+        </dxo-nodes>
+    </dx-diagram>
+
+##### Vue
+
+    <!-- tab: App.vue -->
+    <template>
+    <DxDiagram>
+        <DxNodes ...>
+            <DxAutoLayout :orientation="'horizontal'" :type="'tree'"/>
+        </DxNodes>
+    </DxDiagram>
+    </template>
+
+    <script>
+    import {
+        DxDiagram, DxNodes, DxAutoLayout
+    } from 'devextreme-vue/diagram';
+
+    export default {
+        components: {
+            DxDiagram, DxNodes, DxAutoLayout
+        }
+    };
+    </script>
+
+##### React
+
+    <!-- tab: App.js -->
+    import React from "react";
+    import Diagram, { Nodes, AutoLayout } from "devextreme-react/diagram";
+
+    const App = () => {
+        return (
+            <Diagram>
+                <Nodes ...>
+                    <AutoLayout orientation="horizontal" type="tree" />
+                </Nodes>
+            </Diagram>
+        );
+    };
+
+    export default App;
+
 ---
 
-You can create a diagram layout based on shape coordinates maintained in a data source. Set the [leftExpr](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/nodes/leftExpr.md '/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/nodes/#leftExpr') and [topExpr](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/nodes/topExpr.md '/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/nodes/#topExpr') properties to names of data source fields that provide shape coordinates. 
+You can create a diagram layout based on shape coordinates maintained in a data source. Set the [leftExpr](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/nodes/leftExpr.md "/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/nodes/#leftExpr") and [topExpr](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/nodes/topExpr.md "/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/nodes/#topExpr") properties to names of data source fields that provide shape coordinates.
 
-If you bind a Diagram to an array of edges, you can specify a shape's connection point where an edge begins ([fromPointIndexExpr](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/edges/fromPointIndexExpr.md '/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/edges/#fromPointIndexExpr')) and ends ([toPointIndexExpr](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/edges/toPointIndexExpr.md '/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/edges/#toPointIndexExpr')) and provide additional points for connectors with the [pointsExpr](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/edges/pointsExpr.md '/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/edges/#pointsExpr') property.
+If you bind a Diagram to an array of edges, you can specify a shape's connection point where an edge begins ([fromPointIndexExpr](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/edges/fromPointIndexExpr.md "/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/edges/#fromPointIndexExpr")) and ends ([toPointIndexExpr](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/edges/toPointIndexExpr.md "/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/edges/#toPointIndexExpr")) and provide additional points for connectors with the [pointsExpr](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/edges/pointsExpr.md "/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/edges/#pointsExpr") property.
 
-Shape and edge point coordinates are specified in [units](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/units.md '/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/#units').
+Shape and edge point coordinates are specified in [units](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/units.md "/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/#units").
 
 [note]
 
-If the [autoLayout.type](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/nodes/autoLayout/type.md 'Documentation/ApiReference/UI_Components/dxDiagram/Configuration/nodes/autoLayout/#type') property is set to **auto** (default value), and both the [leftExpr](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/nodes/leftExpr.md '/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/nodes/#leftExpr') and [topExpr](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/nodes/topExpr.md '/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/nodes/#topExpr') properties are specified, the autolayout feature is disabled. The UI component creates a diagram layout based on the provided coordinates. If the position properties are not specified, the **auto** type denotes the **layered** layout.
+If the [autoLayout.type](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/nodes/autoLayout/type.md "Documentation/ApiReference/UI_Components/dxDiagram/Configuration/nodes/autoLayout/#type") property is set to **auto** (default value), and both the [leftExpr](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/nodes/leftExpr.md "/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/nodes/#leftExpr") and [topExpr](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/nodes/topExpr.md "/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/nodes/#topExpr") properties are specified, the autolayout feature is disabled. The UI component creates a diagram layout based on the provided coordinates. If the position properties are not specified, the **auto** type denotes the **layered** layout.
 
-If the [autoLayout.type](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/nodes/autoLayout/type.md 'Documentation/ApiReference/UI_Components/dxDiagram/Configuration/nodes/autoLayout/#type') property is set to **layered** or **tree**, predefined shape coordinates ([leftExpr](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/nodes/leftExpr.md '/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/nodes/#leftExpr') and [topExpr](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/nodes/topExpr.md '/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/nodes/#topExpr')) and edge points ([pointsExpr](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/edges/pointsExpr.md '/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/edges/#pointsExpr')) are ignored.
+If the [autoLayout.type](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/nodes/autoLayout/type.md "Documentation/ApiReference/UI_Components/dxDiagram/Configuration/nodes/autoLayout/#type") property is set to **layered** or **tree**, predefined shape coordinates ([leftExpr](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/nodes/leftExpr.md "/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/nodes/#leftExpr") and [topExpr](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/nodes/topExpr.md "/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/nodes/#topExpr")) and edge points ([pointsExpr](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/edges/pointsExpr.md "/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/edges/#pointsExpr")) are ignored.
 
 [/note]
 
@@ -40,7 +91,7 @@ If the [autoLayout.type](/api-reference/10%20UI%20Components/dxDiagram/1%20Confi
         $("#diagram").dxDiagram({
             nodes: {
                 dataSource: new DevExpress.data.ArrayStore({
-                    key: "this",
+                    key: "key",
                     data: orgItems
                 }),
                 autoLayout: {
@@ -53,7 +104,7 @@ If the [autoLayout.type](/api-reference/10%20UI%20Components/dxDiagram/1%20Confi
             },
             edges: {
                 dataSource: new DevExpress.data.ArrayStore({
-                    key: "this",
+                    key: "key",
                     data: orgLinks
                 }),
                 keyExpr: "key",
@@ -68,22 +119,22 @@ If the [autoLayout.type](/api-reference/10%20UI%20Components/dxDiagram/1%20Confi
     });
 
     <!-- tab: data.js -->
-    var orgItems = [
-      {  
+    const orgItems = [
+      {
             key: "101",
             left: 0.5,
             text: "Product Manager",
             top: 0.875,
       },
-      {  
+      {
             key: "102",
             left: 2.5,
             text: "Team",
             top: 0.5,
         },
     ];
-    var orgLinks = [  
-      {  
+    const orgLinks = [
+      {
             key: "1",
             from: "101",
             to: "102",
@@ -93,6 +144,274 @@ If the [autoLayout.type](/api-reference/10%20UI%20Components/dxDiagram/1%20Confi
       },
     ];
 
+##### Angular
+
+    <!-- tab: app.component.html -->
+    <dx-diagram units="in">
+        <dxo-nodes
+            [dataSource]="orgItemsDataSource"
+            keyExpr="key"
+            textExpr="text"
+            leftExpr="left"
+            topExpr="top"
+        >
+            <dxo-auto-layout type="off"></dxo-auto-layout>
+        </dxo-nodes>
+        <dxo-edges
+            [dataSource]="orgLinksDataSource"
+            keyExpr="key"
+            fromExpr="from"
+            toExpr="to"
+            fromPointIndexExpr="fromPoint"
+            toPointIndexExpr="toPoint"
+            pointsExpr="points"
+        ></dxo-edges>
+    </dx-diagram>
+
+    <!-- tab: app.component.ts -->
+    import { Component } from '@angular/core';
+    import ArrayStore from "devextreme/data/array_store";
+    import { Service } from "./app.service";
+
+    @Component({
+        selector: 'app-root',
+        templateUrl: './app.component.html',
+        styleUrls: ['./app.component.css'],
+        providers: [Service]
+    })
+    
+    export class AppComponent {
+        orgItemsDataSource: ArrayStore;
+
+        orgLinksDataSource: ArrayStore;
+
+        constructor(service: Service) {
+            this.orgItemsDataSource = new ArrayStore({
+                key: 'key',
+                data: service.getOrgItems(),
+            });
+            this.orgLinksDataSource = new ArrayStore({
+                key: 'key',
+                data: service.getOrgLinks(),
+            });
+        }
+    }
+
+    <!-- tab: app.service.ts -->
+    import { Injectable } from '@angular/core';
+
+    private class Point {
+        x: number;
+        y: number;
+    }
+
+    export class OrgItem {
+        key: string;
+        left: number;
+        text: string;
+        top: number;
+    }
+
+    export class OrgLink {
+        key: string;
+        from: string;
+        to: string;
+        fromPoint: number;
+        toPoint: number;
+        points: Point[];
+    }
+
+    const orgItems: OrgItem[] = [
+        {
+            key: "101",
+            left: 0.5,
+            text: "Product Manager",
+            top: 0.875,
+        },
+        {
+            key: "102",
+            left: 2.5,
+            text: "Team",
+            top: 0.5,
+            },
+        ];
+    const orgLinks: OrgLink[] = [
+        {
+            key: "1",
+            from: "101",
+            to: "102",
+            fromPoint: 1,
+            toPoint: 3,
+            points: [{x:1.5,y:1.125},{x:1.75,y:0.875},{x:2.5,y:0.875}],
+        },
+    ];
+
+    @Injectable()
+    export class Service {
+        getOrgItems() {
+            return orgItems;
+        }
+        getOrgLinks() {
+            return orgLinks;
+        }
+    }
+
+##### Vue
+
+    <!-- tab: App.vue -->
+    <template>
+        <DxDiagram units="in">
+            <DxNodes
+                :data-source="orgItemsDataSource"
+                :key-expr="'key'"
+                :text-expr="'tame'"
+                :left-expr="'left'"
+                :top-expr="'top'"
+            >
+                <DxAutoLayout :type="'off'" />
+            </DxNodes>
+            <DxEdges
+                :data-source="orgLinksDataSource"
+                :key-expr="'key'"
+                :from-expr="'from'"
+                :to-expr="'to'"
+                :from-point-index-expr="'fromPoint'"
+                :toPointIndexExpr="'toPoint'"
+                :points-expr="'points'"
+            />
+        </DxDiagram>
+    </template>
+    <script setup>
+    import {
+        DxDiagram, DxNodes, DxAutoLayout, DxEdges,
+    } from 'devextreme-vue/diagram';
+    import ArrayStore from 'devextreme/data/array_store';
+    import service from './data.js';
+
+    const orgItemsDataSource = new ArrayStore({
+        key: 'key',
+        data: service.getOrgItems(),
+    });
+    const orgLinksDataSource = new ArrayStore({
+        key: 'key',
+        data: service.getOrgLinks(),
+    });
+    </script>
+    
+    <!-- tab: data.js -->
+    const orgItems = [
+      {
+            key: "101",
+            left: 0.5,
+            text: "Product Manager",
+            top: 0.875,
+      },
+      {
+            key: "102",
+            left: 2.5,
+            text: "Team",
+            top: 0.5,
+        },
+    ];
+    const orgLinks = [
+      {
+            key: "1",
+            from: "101",
+            to: "102",
+            fromPoint: 1,
+            toPoint: 3,
+            points: [{x:1.5,y:1.125},{x:1.75,y:0.875},{x:2.5,y:0.875}],
+      },
+    ];
+
+    export default {
+        getOrgItems() {
+            return orgItems;
+        }
+        getOrgLinks() {
+            return orgLinks;
+        }
+    }
+
+##### React
+
+    <!-- tab: App.js -->
+    import React from 'react';
+    import Diagram, {
+        Nodes, AutoLayout, Edges, Toolbox, Group,
+    } from 'devextreme-react/diagram';
+    import ArrayStore from 'devextreme/data/array_store';
+    import service from './data.js';
+
+    const orgItemsDataSource = new ArrayStore({
+        key: 'key',
+        data: service.getOrgItems(),
+    });
+    const orgLinksDataSource = new ArrayStore({
+        key: 'key',
+        data: service.getOrgLinks(),
+    });
+
+    export default function App() {
+        return (
+            <Diagram units="in">
+                <Nodes
+                    dataSource={orgItemsDataSource}
+                    keyExpr="key"
+                    textExpr="text"
+                    leftExpr="left"
+                    topExpr="top"
+                >
+                    <AutoLayout type="off" />
+                </Nodes>
+                <Edges
+                    dataSource={orgLinksDataSource}
+                    keyExpr="key"
+                    fromExpr="from"
+                    toExpr="to"
+                    fromPointIndexExpr="fromPoint"
+                    toPointIndexExpr="toPoint"
+                    pointsExpr="points"
+                />
+            </Diagram>
+        );
+    }
+
+    <!-- tab: data.js -->
+    const orgItems = [
+      {
+            key: "101",
+            left: 0.5,
+            text: "Product Manager",
+            top: 0.875,
+      },
+      {
+            key: "102",
+            left: 2.5,
+            text: "Team",
+            top: 0.5,
+        },
+    ];
+    const orgLinks = [
+      {
+            key: "1",
+            from: "101",
+            to: "102",
+            fromPoint: 1,
+            toPoint: 3,
+            points: [{x:1.5,y:1.125},{x:1.75,y:0.875},{x:2.5,y:0.875}],
+      },
+    ];
+
+    export default {
+        getOrgItems() {
+            return orgItems;
+        }
+        getOrgLinks() {
+            return orgLinks;
+        }
+    }
+
 ---
 
-The Diagram UI component reloads the diagram every time the data source changes. The [onRequestLayoutUpdate](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/onRequestLayoutUpdate.md '/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/#onRequestLayoutUpdate') function is executed after diagram data is reloaded and allows you to specify whether the UI component should update the diagram layout.
\ No newline at end of file
+The Diagram UI component reloads the diagram every time the data source changes. The [onRequestLayoutUpdate](/api-reference/10%20UI%20Components/dxDiagram/1%20Configuration/onRequestLayoutUpdate.md "/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/#onRequestLayoutUpdate") function is executed after diagram data is reloaded and allows you to specify whether the UI component should update the diagram layout.