DHTMLX · Izobov · Jul 2, 2024 · Jun 24, 2024 · Jun 24, 2024 · Jun 25, 2024
diff --git a/.gitignore b/.gitignore
@@ -1,46 +1,29 @@
-# compiled output
-/dist
-/tmp
-/out-tsc
-/docs
-/storybook-static
-# Only exists if Bazel was run
-/bazel-out
-
-# dependencies
 /node_modules
+/dist
 
-# profiling files
-chrome-profiler-events*.json
-speed-measure-plugin*.json
-
-# IDEs and editors
-/.idea
-.project
-.classpath
-.c9/
-*.launch
-.settings/
-*.sublime-workspace
+# Environment variables
+.env
+.env.local
+.env.*.local
 
-# IDE - VSCode
-.vscode/*
-!.vscode/settings.json
-!.vscode/tasks.json
-!.vscode/launch.json
-!.vscode/extensions.json
-.history/*
+# Debug logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
 
-# misc
-/.sass-cache
-/connect.lock
-/coverage
-/libpeerconnection.log
-npm-debug.log
-yarn-error.log
-testem.log
-/typings
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
 
-# System Files
+# Operating System Files
 .DS_Store
 Thumbs.db
+
+# Temporary files
+.tmp
+.temp
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+@dhx:registry=https://npm.dhtmlx.com/
diff --git a/.prettierrc.json b/.prettierrc.json
diff --git a/.storybook/main.js b/.storybook/main.js
diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html
diff --git a/.storybook/manager.js b/.storybook/manager.js
diff --git a/.storybook/preview.js b/.storybook/preview.js
diff --git a/README.md b/README.md
@@ -1,38 +1,38 @@
-<p align="center">
-	<a href="https://dhtmlx.github.io/vue-diagram-demo/?path=/story/org-chart-editor--img-card"><img src="https://raw.githubusercontent.com/DHTMLX/vue-suite-demo/master/public/Logo.svg" width="150" height="55"></a>
-</p>
+# DHTMLX Diagram with Vue Demo
 
-# DHTMLX Diagram + Vue
+[![dhtmlx.com](https://img.shields.io/badge/made%20by-DHTMLX-blue)](https://dhtmlx.com/)
 
-## Installation
+![DHTMLX Diagram with Vue Demo](https://raw.githubusercontent.com/DHTMLX/vue-diagram-demo/master/diagram.png)
 
-`npm install` or `yarn`
+## How to start
 
-## Local development
+Clone the repository or download files.
 
-`npm run storybook` or `yarn storybook`
+```
+yarn
+yarn start
+```
 
-Open [http://localhost:6006](http://localhost:6006) to view it in the browser.
+or
 
-## Live demos
+```
+npm install
+npm run start
+```
 
-- [Diagram with Editor in org chart mode](https://dhtmlx.github.io/vue-diagram-demo/?path=/story/org-chart-editor--img-card)
-- [Diagram with Editor in org chart mode. Custom shapes](https://dhtmlx.github.io/vue-diagram-demo/?path=/story/org-chart-editor--custom-chape)
-- [Diagram with Editor in default mode. Auto layout button](https://dhtmlx.github.io/vue-diagram-demo/?path=/story/default-editor--autoplacement)
-- [Diagram with Editor in default mode. Swimlane and export to pdf/png](https://dhtmlx.github.io/vue-diagram-demo/?path=/story/default-editor--swimlane)
-- [Diagram with Editor in default mode. Groups to organize shapes](https://dhtmlx.github.io/vue-diagram-demo/?path=/story/default-editor--group)
-- [Diagram with Editor in default mode. Custom shapes](https://dhtmlx.github.io/vue-diagram-demo/?path=/story/default-editor--custom-shape)
-- [Diagram with Editor in mindmap mode](https://dhtmlx.github.io/vue-diagram-demo/?path=/story/mindmap-editor--emotions)
+You can also use [GitHub Codespaces](https://docs.github.com/en/codespaces/developing-in-a-codespace/creating-a-codespace-for-a-repository) to run online.
 
+## Useful links
 
-## Follow us
-
-Star our GitHub repo :star:
-
-Watch our tutorials on [YouTube](https://www.youtube.com/user/dhtmlx/videos) :eyes:
+- **[Online demo](https://replit.com/@dhtmlx/dhtmlx-diagram-with-vue)**
+- [More demos about the DHTMLX Diagram functionality](https://snippet.dhtmlx.com/a9t2z2dt?tag=diagram&mode=wide)
+- [Technical support ](https://forum.dhtmlx.com/c/diagram)
+- [Online  documentation](https://docs.dhtmlx.com/diagram/)
 
-Read us on [Medium](https://medium.com/@dhtmlx) :newspaper:
-
-Follow us on [Twitter](https://twitter.com/dhtmlx) :feet:
+## Follow us
 
-Like our page on [Facebook](https://www.facebook.com/dhtmlx/) :thumbsup:
+- Star our GitHub repo :star:
+- Watch our tutorials on [YouTube](https://www.youtube.com/user/dhtmlx/videos) :eyes:
+- Read us on [Medium](https://dhtmlx.medium.com) :newspaper:
+- Follow us on [Twitter](https://twitter.com/dhtmlx) :feet:
+- Like our page on [Facebook](https://www.facebook.com/dhtmlx/) :thumbsup:
diff --git a/babel.config.js b/babel.config.js
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DHX Diagram with Vue</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>