diff --git a/public/js/drawio/images/manifest.json b/public/js/drawio/images/manifest.json
index 5182c6f55..b18bb2471 100644
--- a/public/js/drawio/images/manifest.json
+++ b/public/js/drawio/images/manifest.json
@@ -1,5 +1,5 @@
 {
-    "name": "diagrams.net",
+    "name": "",
     "short_name": "Diagrams",
     "description": "diagrams.net is a completely free diagram editor",
     "icons": [
diff --git a/public/js/drawio/viewer.html b/public/js/drawio/viewer.html
new file mode 100644
index 000000000..7f20f76ae
--- /dev/null
+++ b/public/js/drawio/viewer.html
@@ -0,0 +1,105 @@
+<!--[if IE]>
+<meta http-equiv="X-UA-Compatible" content="IE=5,IE=9"><![endif]-->
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Grapheditor viewer</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <style>
+        #graph {
+            position: absolute;
+            cursor: move;
+            left: 0;
+            right: 0;
+            top: 0;
+            bottom: 0
+        }
+    </style>
+    <script type="text/javascript">
+        var STENCIL_PATH = 'stencils';
+        var IMAGE_PATH = 'images';
+        var STYLE_PATH = 'styles';
+
+        var urlParams = (function (url) {
+            var result = {};
+            var idx = url.lastIndexOf('?');
+            if (idx > 0) {
+                var params = url.substring(idx + 1).split('&');
+                for (var i = 0; i < params.length; i++) {
+                    idx = params[i].indexOf('=');
+                    if (idx > 0) {
+                        result[params[i].substring(0, idx)] = params[i].substring(idx + 1);
+                    }
+                }
+            }
+            return result;
+        })(window.location.href);
+
+        var mxLoadResources = false;
+        var mxBasePath = './src';
+    </script>
+    <script type="text/javascript" src="js/sanitizer/sanitizer.min.js"></script>
+    <script type="text/javascript" src="./mxgraph/mxClient.js"></script>
+    <script type="text/javascript" src="js/grapheditor/Graph.js"></script>
+    <script type="text/javascript" src="js/grapheditor/Shapes.js"></script>
+</head>
+<body class="geEditor">
+<div id="graph"></div>
+<script type="text/javascript">
+    (function (win) {
+        var graph = new Graph(document.getElementById('graph'));
+
+        graph.setTooltips(false);
+        graph.setEnabled(false);
+        graph.setPanning(true);
+
+        var style = graph.getStylesheet().getDefaultVertexStyle();
+        style[mxConstants.STYLE_FONTCOLOR] = "#000000";
+        style[mxConstants.STYLE_STROKECOLOR] = "#777777";
+        style[mxConstants.STYLE_FILLCOLOR] = "#ffffff";
+        (style = graph.getStylesheet().getDefaultEdgeStyle())[mxConstants.STYLE_STROKECOLOR] = "#777777";
+        style[mxConstants.STYLE_FILLCOLOR] = "#ffffff";
+
+        graph.panningHandler.useLeftButtonForPanning = true;
+        graph.panningHandler.ignoreCell = true;
+        graph.container.style.cursor = "move";
+        graph.resizeContainer = false;
+        graph.centerZoom = true;
+        graph.border = 0;
+
+
+        win.addEventListener("message", function (event) {
+            var data = event.data;
+            switch (data.act) {
+                case 'setXml':
+                    try {
+                        var xmlDoc = mxUtils.parseXml(data.params.xml);
+                        var codec = new mxCodec(xmlDoc);
+                        codec.decode(xmlDoc.documentElement, graph.getModel());
+                        typeof data.params.scale === "number" && graph.zoomTo(data.params.scale);
+                        // typeof data.params.scrollTop === "number" && (graph.container.scrollTop = data.params.scrollTop);
+                        // typeof data.params.scrollLeft === "number" && (graph.container.scrollLeft = data.params.scrollLeft);
+                    } catch (e) {
+
+                    }
+                    break;
+
+                case 'zoom':
+                    try {
+                        graph.zoomTo(data.params.zoom);
+                    } catch (e) {
+
+                    }
+                    break;
+            }
+        });
+
+        win.parent.postMessage({
+            act: 'ready',
+            params: {}
+        }, '*');
+    })(window);
+</script>
+</body>
+</html>
diff --git a/resources/assets/js/pages/manage/components/FileContent.vue b/resources/assets/js/pages/manage/components/FileContent.vue
index 0170f1bb7..370541ad4 100644
--- a/resources/assets/js/pages/manage/components/FileContent.vue
+++ b/resources/assets/js/pages/manage/components/FileContent.vue
@@ -68,14 +68,13 @@ Vue.use(Minder)
 
 const MDEditor = () => import('../../../components/MDEditor/index');
 const TEditor = () => import('../../../components/TEditor');
-const Flow = () => import('../../../components/Flow');
 const AceEditor = () => import('../../../components/AceEditor');
 const OnlyOffice = () => import('../../../components/OnlyOffice');
 const Drawio = () => import('../../../components/Drawio');
 
 export default {
     name: "FileContent",
-    components: {AceEditor, TEditor, MDEditor, Flow, OnlyOffice,Drawio},
+    components: {AceEditor, TEditor, MDEditor, OnlyOffice,Drawio},
     props: {
         value: {
             type: Boolean,
diff --git a/resources/assets/js/pages/manage/components/FilePreview.vue b/resources/assets/js/pages/manage/components/FilePreview.vue
index 061e1900f..787ebdc75 100644
--- a/resources/assets/js/pages/manage/components/FilePreview.vue
+++ b/resources/assets/js/pages/manage/components/FilePreview.vue
@@ -27,7 +27,7 @@
                     <MDPreview v-if="contentDetail.type=='md'" :initialValue="contentDetail.content"/>
                     <TEditor v-else v-model="contentDetail.content" height="100%" readOnly/>
                 </template>
-                <Flow v-else-if="file.type=='flow'" ref="myFlow" v-model="contentDetail" readOnly/>
+                <Drawio v-else-if="file.type=='flow'" ref="myFlow" v-model="contentDetail" readOnly/>
                 <Minder v-else-if="file.type=='mind'" ref="myMind" v-model="contentDetail" readOnly/>
                 <OnlyOffice v-else-if="['word', 'excel', 'ppt'].includes(file.type)" v-model="contentDetail" :code="code" :documentKey="documentKey" readOnly/>
                 <AceEditor v-else-if="['code', 'txt'].includes(file.type)" v-model="contentDetail.content" :ext="file.ext" readOnly/>
@@ -44,13 +44,12 @@ Vue.use(Minder)
 
 const MDPreview = () => import('../../../components/MDEditor/preview');
 const TEditor = () => import('../../../components/TEditor');
-const Flow = () => import('../../../components/Flow');
 const AceEditor = () => import('../../../components/AceEditor');
 const OnlyOffice = () => import('../../../components/OnlyOffice');
 
 export default {
     name: "FilePreview",
-    components: {AceEditor, TEditor, MDPreview, Flow, OnlyOffice},
+    components: {AceEditor, TEditor, MDPreview, OnlyOffice, Drawio},
     props: {
         code: {
             type: String,
diff --git a/resources/assets/statics/public/js/drawio/viewer.html b/resources/assets/statics/public/js/drawio/viewer.html
new file mode 100644
index 000000000..7f20f76ae
--- /dev/null
+++ b/resources/assets/statics/public/js/drawio/viewer.html
@@ -0,0 +1,105 @@
+<!--[if IE]>
+<meta http-equiv="X-UA-Compatible" content="IE=5,IE=9"><![endif]-->
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Grapheditor viewer</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <style>
+        #graph {
+            position: absolute;
+            cursor: move;
+            left: 0;
+            right: 0;
+            top: 0;
+            bottom: 0
+        }
+    </style>
+    <script type="text/javascript">
+        var STENCIL_PATH = 'stencils';
+        var IMAGE_PATH = 'images';
+        var STYLE_PATH = 'styles';
+
+        var urlParams = (function (url) {
+            var result = {};
+            var idx = url.lastIndexOf('?');
+            if (idx > 0) {
+                var params = url.substring(idx + 1).split('&');
+                for (var i = 0; i < params.length; i++) {
+                    idx = params[i].indexOf('=');
+                    if (idx > 0) {
+                        result[params[i].substring(0, idx)] = params[i].substring(idx + 1);
+                    }
+                }
+            }
+            return result;
+        })(window.location.href);
+
+        var mxLoadResources = false;
+        var mxBasePath = './src';
+    </script>
+    <script type="text/javascript" src="js/sanitizer/sanitizer.min.js"></script>
+    <script type="text/javascript" src="./mxgraph/mxClient.js"></script>
+    <script type="text/javascript" src="js/grapheditor/Graph.js"></script>
+    <script type="text/javascript" src="js/grapheditor/Shapes.js"></script>
+</head>
+<body class="geEditor">
+<div id="graph"></div>
+<script type="text/javascript">
+    (function (win) {
+        var graph = new Graph(document.getElementById('graph'));
+
+        graph.setTooltips(false);
+        graph.setEnabled(false);
+        graph.setPanning(true);
+
+        var style = graph.getStylesheet().getDefaultVertexStyle();
+        style[mxConstants.STYLE_FONTCOLOR] = "#000000";
+        style[mxConstants.STYLE_STROKECOLOR] = "#777777";
+        style[mxConstants.STYLE_FILLCOLOR] = "#ffffff";
+        (style = graph.getStylesheet().getDefaultEdgeStyle())[mxConstants.STYLE_STROKECOLOR] = "#777777";
+        style[mxConstants.STYLE_FILLCOLOR] = "#ffffff";
+
+        graph.panningHandler.useLeftButtonForPanning = true;
+        graph.panningHandler.ignoreCell = true;
+        graph.container.style.cursor = "move";
+        graph.resizeContainer = false;
+        graph.centerZoom = true;
+        graph.border = 0;
+
+
+        win.addEventListener("message", function (event) {
+            var data = event.data;
+            switch (data.act) {
+                case 'setXml':
+                    try {
+                        var xmlDoc = mxUtils.parseXml(data.params.xml);
+                        var codec = new mxCodec(xmlDoc);
+                        codec.decode(xmlDoc.documentElement, graph.getModel());
+                        typeof data.params.scale === "number" && graph.zoomTo(data.params.scale);
+                        // typeof data.params.scrollTop === "number" && (graph.container.scrollTop = data.params.scrollTop);
+                        // typeof data.params.scrollLeft === "number" && (graph.container.scrollLeft = data.params.scrollLeft);
+                    } catch (e) {
+
+                    }
+                    break;
+
+                case 'zoom':
+                    try {
+                        graph.zoomTo(data.params.zoom);
+                    } catch (e) {
+
+                    }
+                    break;
+            }
+        });
+
+        win.parent.postMessage({
+            act: 'ready',
+            params: {}
+        }, '*');
+    })(window);
+</script>
+</body>
+</html>
