diff --git a/packages/api/src/controllers/files.js b/packages/api/src/controllers/files.js
index d71a67af8..baebe8066 100644
--- a/packages/api/src/controllers/files.js
+++ b/packages/api/src/controllers/files.js
@@ -6,6 +6,7 @@ const getChartExport = require('../utility/getChartExport');
 const hasPermission = require('../utility/hasPermission');
 const socket = require('../utility/socket');
 const scheduler = require('./scheduler');
+const getDiagramExport = require('../utility/getDiagramExport');
 
 function serialize(format, data) {
   if (format == 'text') return data;
@@ -152,4 +153,10 @@ module.exports = {
     }
     return true;
   },
+
+  exportDiagram_meta: true,
+  async exportDiagram({ filePath, html, css }) {
+    await fs.writeFile(filePath, getDiagramExport(html, css));
+    return true;
+  },
 };
diff --git a/packages/api/src/utility/getDiagramExport.js b/packages/api/src/utility/getDiagramExport.js
new file mode 100644
index 000000000..0fc55becc
--- /dev/null
+++ b/packages/api/src/utility/getDiagramExport.js
@@ -0,0 +1,21 @@
+const getDiagramExport = (html,css) => {
+    return `<html>
+  <meta charset='utf-8'>
+  
+  <head>
+      <style>
+        ${css}
+      </style>
+
+      <link rel="stylesheet" href='https://cdn.jsdelivr.net/npm/@mdi/font@6.5.95/css/materialdesignicons.css' />
+  </head>
+  
+  <body class='theme-light'>
+      ${html}
+  </body>
+  
+  </html>`;
+  };
+  
+  module.exports = getDiagramExport;
+  
\ No newline at end of file
diff --git a/packages/web/src/designer/Designer.svelte b/packages/web/src/designer/Designer.svelte
index fce13cb31..e93caa7f9 100644
--- a/packages/web/src/designer/Designer.svelte
+++ b/packages/web/src/designer/Designer.svelte
@@ -11,6 +11,18 @@
     testEnabled: () => getCurrentEditor()?.canArrange(),
     onClick: () => getCurrentEditor().arrange(),
   });
+
+  registerCommand({
+    id: 'diagram.export',
+    category: 'Designer',
+    toolbarName: 'Export diagram',
+    name: 'Export diagram',
+    icon: 'icon report',
+    toolbar: true,
+    isRelatedToTab: true,
+    onClick: () => getCurrentEditor().exportDiagram(),
+    testEnabled: () => getCurrentEditor()?.canExport(),
+  });
 </script>
 
 <script lang="ts">
@@ -27,6 +39,8 @@
   import registerCommand from '../commands/registerCommand';
   import createActivator, { getActiveComponent } from '../utility/createActivator';
   import { GraphDefinition, GraphLayout } from './GraphLayout';
+  import { saveFileToDisk } from '../utility/exportElectronFile';
+  import { apiCall } from '../utility/api';
 
   export let value;
   export let onChange;
@@ -469,6 +483,10 @@
     return settings?.canArrange;
   }
 
+  export function canExport() {
+    return settings?.canExport;
+  }
+
   export function arrange(skipUndoChain = false, arrangeAll = true, circleMiddle = { x: 0, y: 0 }) {
     const graph = new GraphDefinition();
     for (const table of value?.tables || []) {
@@ -512,49 +530,24 @@
         }),
       };
     }, skipUndoChain);
+  }
 
-    // const graph = new SpringyGraph();
-    // const nodes = {};
-    // for (const table of value?.tables || []) {
-    //   const domTable = domTables[table.designerId] as any;
-    //   if (!domTable) continue;
-    //   const rect = domTable.getRect();
-    //   const node = graph.newNode({ designerId: table.designerId });
-    //   nodes[table.designerId] = node;
-    //   node.width = rect.right - rect.left;
-    //   node.height = rect.bottom - rect.top;
-    //   node.initX = (rect.right + rect.left) / 2;
-    //   node.initY = (rect.bottom + rect.top) / 2;
-    //   // console.log('RECT', rect);
-    // }
-
-    // for (const reference of value?.references) {
-    //   const source = nodes[reference.sourceId];
-    //   const target = nodes[reference.targetId];
-    //   if (source && target) {
-    //     graph.newEdge(source, target);
-    //   }
-    // }
-
-    // const alg = new ForceDirectedLayout(graph);
-    // const positions = alg.compute();
-
-    // callChange(current => {
-    //   return {
-    //     ...current,
-    //     tables: (current?.tables || []).map(table => {
-    //       const position = positions.find(x => x.nodeData?.designerId == table.designerId);
-    //       // console.log('POSITION', position);
-    //       return position
-    //         ? {
-    //             ...table,
-    //             left: position.x - position.nodeWidth / 2,
-    //             top: position.y - position.nodeHeight / 2,
-    //           }
-    //         : table;
-    //     }),
-    //   };
-    // }, skipUndoChain);
+  export async function exportDiagram() {
+    const cssLinks = ['global.css', 'build/bundle.css'];
+    let css = '';
+    for (const link of cssLinks) {
+      const cssResp = await fetch(link);
+      const cssItem = await cssResp.text();
+      if (css) css += '\n';
+      css += cssItem;
+    }
+    saveFileToDisk(async filePath => {
+      await apiCall('files/export-diagram', {
+        filePath,
+        html: domCanvas.outerHTML,
+        css,
+      });
+    });
   }
 </script>
 
diff --git a/packages/web/src/designer/DiagramDesigner.svelte b/packages/web/src/designer/DiagramDesigner.svelte
index ca9b47cae..d64f629dc 100644
--- a/packages/web/src/designer/DiagramDesigner.svelte
+++ b/packages/web/src/designer/DiagramDesigner.svelte
@@ -15,6 +15,7 @@
     allowScrollColumns: false,
     allowAddAllReferences: true,
     canArrange: true,
+    canExport: true,
   }}
   referenceComponent={DiagramDesignerReference}
 />
diff --git a/packages/web/src/designer/QueryDesigner.svelte b/packages/web/src/designer/QueryDesigner.svelte
index 6c2932a01..9482f66bb 100644
--- a/packages/web/src/designer/QueryDesigner.svelte
+++ b/packages/web/src/designer/QueryDesigner.svelte
@@ -15,6 +15,7 @@
     allowScrollColumns: true,
     allowAddAllReferences: false,
     canArrange: false,
+    canExport: false,
   }}
   referenceComponent={QueryDesignerReference}
 />
diff --git a/packages/web/src/tabs/DiagramTab.svelte b/packages/web/src/tabs/DiagramTab.svelte
index 1b1d5f750..0da293c16 100644
--- a/packages/web/src/tabs/DiagramTab.svelte
+++ b/packages/web/src/tabs/DiagramTab.svelte
@@ -82,6 +82,7 @@
       { command: 'diagram.save' },
       { command: 'diagram.saveAs' },
       { command: 'designer.arrange' },
+      { command: 'diagram.export' },
       { divider: true },
       { command: 'diagram.undo' },
       { command: 'diagram.redo' },
