diff --git a/package-lock.json b/package-lock.json
index fe74736..2426989 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@chenfengyuan/vue-qrcode": "^2.0.0",
         "pinia": "^3.0.1",
         "qrcode": "^1.5.4",
+        "vis-network": "^10.0.2",
         "vue": "^3.5.13",
         "vue-router": "^4.5.0"
       },
@@ -515,6 +516,19 @@
         "vue": "^3.0.0"
       }
     },
+    "node_modules/@egjs/hammerjs": {
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
+      "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/hammerjs": "^2.0.36"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.4",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.4.tgz",
@@ -1581,6 +1595,13 @@
       "integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==",
       "dev": true
     },
+    "node_modules/@types/hammerjs": {
+      "version": "2.0.46",
+      "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.46.tgz",
+      "integrity": "sha512-ynRvcq6wvqexJ9brDMS4BnBLzmr0e14d6ZJTEShTBWKymQiHwlAyGu0ZPEFI2Fh1U53F7tN9ufClWM5KvqkKOw==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -2434,6 +2455,19 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
+    "node_modules/component-emitter": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-2.0.0.tgz",
+      "integrity": "sha512-4m5s3Me2xxlVKG9PkZpQqHQR7bgpnN7joDMJ4yvVkVXngjoITG76IaZmzmywSeRTeTpc6N6r3H3+KyUurV8OYw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -3863,6 +3897,13 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/keycharm": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/keycharm/-/keycharm-0.4.0.tgz",
+      "integrity": "sha512-TyQTtsabOVv3MeOpR92sIKk/br9wxS+zGj4BG7CR8YbK4jM3tyIBaF0zhzeBUMx36/Q/iQLOKKOT+3jOQtemRQ==",
+      "license": "(Apache-2.0 OR MIT)",
+      "peer": true
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -5353,6 +5394,20 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
+    "node_modules/uuid": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-13.0.0.tgz",
+      "integrity": "sha512-XQegIaBTVUjSHliKqcnFqYypAd4S+WCYt5NIeRs6w/UAry7z8Y9j5ZwRRL4kzq9U3sD6v+85er9FvkEaBpji2w==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "uuid": "dist-node/bin/uuid"
+      }
+    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -5362,6 +5417,57 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/vis-data": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/vis-data/-/vis-data-8.0.3.tgz",
+      "integrity": "sha512-jhnb6rJNqkKR1Qmlay0VuDXY9ZlvAnYN1udsrP4U+krgZEq7C0yNSKdZqmnCe13mdnf9AdVcdDGFOzy2mpPoqw==",
+      "license": "(Apache-2.0 OR MIT)",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/visjs"
+      },
+      "peerDependencies": {
+        "uuid": "^3.4.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^13.0.0",
+        "vis-util": ">=6.0.0"
+      }
+    },
+    "node_modules/vis-network": {
+      "version": "10.0.2",
+      "resolved": "https://registry.npmjs.org/vis-network/-/vis-network-10.0.2.tgz",
+      "integrity": "sha512-qPl8GLYBeHEFqiTqp4VBbYQIJ2EA8KLr7TstA2E8nJxfEHaKCU81hQLz7hhq11NUpHbMaRzBjW5uZpVKJ45/wA==",
+      "license": "(Apache-2.0 OR MIT)",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/visjs"
+      },
+      "peerDependencies": {
+        "@egjs/hammerjs": "^2.0.0",
+        "component-emitter": "^1.3.0 || ^2.0.0",
+        "keycharm": "^0.2.0 || ^0.3.0 || ^0.4.0",
+        "uuid": "^3.4.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^13.0.0",
+        "vis-data": ">=8.0.0",
+        "vis-util": ">=6.0.0"
+      }
+    },
+    "node_modules/vis-util": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/vis-util/-/vis-util-6.0.0.tgz",
+      "integrity": "sha512-qtpts3HRma0zPe4bO7t9A2uejkRNj8Z2Tb6do6lN85iPNWExFkUiVhdAq5uLGIUqBFduyYeqWJKv/jMkxX0R5g==",
+      "license": "(Apache-2.0 OR MIT)",
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/visjs"
+      },
+      "peerDependencies": {
+        "@egjs/hammerjs": "^2.0.0",
+        "component-emitter": "^1.3.0 || ^2.0.0"
+      }
+    },
     "node_modules/vite": {
       "version": "6.3.5",
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
diff --git a/package.json b/package.json
index b41ec6d..928cafc 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@chenfengyuan/vue-qrcode": "^2.0.0",
     "pinia": "^3.0.1",
     "qrcode": "^1.5.4",
+    "vis-network": "^10.0.2",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"
   },
diff --git a/src/components/EditorWindow.vue b/src/components/EditorWindow.vue
index 1423a5d..60981b6 100644
--- a/src/components/EditorWindow.vue
+++ b/src/components/EditorWindow.vue
@@ -1,5 +1,55 @@
 <script setup lang="ts">
-  import HeaderBlock from './HeaderBlock.vue';
+
+import { ref, onMounted } from 'vue'
+import HeaderBlock from './HeaderBlock.vue';
+import { Data, Network } from 'vis-network'
+import { getGraph } from './client';
+
+const network = ref<HTMLElement>()
+
+interface GraphNode {
+  id: number
+  label: string
+  color?: string
+}
+
+interface GraphEdge {
+  from: number
+  to: number
+  arrows: string
+}
+
+const nodes = ref<GraphNode[]>([
+  { id: 1, label: 'Начало' },
+  { id: 2, label: 'Шаг 1' },
+  { id: 3, label: 'Шаг 2' },
+  { id: 4, label: 'Шаг 3' },
+  { id: 5, label: 'Конец' },
+  { id: 6, label: 'Параллельный процесс' },
+])
+
+const edges = ref<GraphEdge[]>([
+  { from: 1, to: 2, arrows: 'to' },
+  { from: 2, to: 3, arrows: 'to' },
+  { from: 3, to: 4, arrows: 'to' },
+  { from: 4, to: 5, arrows: 'to' },
+  { from: 2, to: 6, arrows: 'to' },
+  { from: 6, to: 4, arrows: 'to' },
+])
+
+onMounted(async () => {
+  if (!network.value) return
+
+  const graph = await getGraph()
+
+  const data = {
+    nodes: graph.nodes,
+    edges: graph.edges
+  }
+
+  const options = {}
+  new Network(network.value, data, options)
+})
 </script>
 
 <template>
@@ -9,24 +59,14 @@
     </div>
   </HeaderBlock>
 
-  <div class="three-columns">
-    <div class="column left">Левая (узкая)</div>
-    <div class="column center">Центральная (широкая)</div>
-    <div class="column right">Правая (узкая)</div>
-  </div>
+  <div ref="network" class="graph-container"></div>
 </template>
 
 <style scoped>
-  .three-columns {
-    display: grid;
-    grid-template-columns: 1fr 2fr 1fr; /* Соотношение 1:2:1 */
-    gap: 20px;
-    height: 100%;
-  }
-
-  .column {
-    border: 1px solid #e0e0e0;
-    padding: 20px;
-    margin: 5px;
-  }
+.graph-container {
+  width: 100%;
+  height: 700px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+}
 </style>
diff --git a/src/components/client.ts b/src/components/client.ts
index 515f903..e440b19 100644
--- a/src/components/client.ts
+++ b/src/components/client.ts
@@ -117,6 +117,21 @@ export const apiDownloadQrCodesFile = async () => {
   }
 }
 
+export const getGraph = async () => {
+  try {
+    const response = await fetch(
+      getApiUrl("/graph")
+    )
+    if (!response.ok) {
+      throw new Error(`http error status: ${response.status}`)
+    }
+    return await response.json()
+  } catch (error) {
+    console.error('[apiDownloadQrCodesFile] error:', error)
+    throw error
+  }
+}
+
 function getApiUrl(path: string) {
   return  "http://" + window.location.host.split(":")[0] + ":8090" + path
 }