diff --git a/packages/api/src/controllers/files.js b/packages/api/src/controllers/files.js
index 225005bad..d71a67af8 100644
--- a/packages/api/src/controllers/files.js
+++ b/packages/api/src/controllers/files.js
@@ -86,8 +86,9 @@ module.exports = {
       const dir = resolveArchiveFolder(folder.substring('archive:'.length));
       await fs.writeFile(path.join(dir, file), serialize(format, data));
       socket.emitChanged(`archive-files-changed-${folder.substring('archive:'.length)}`);
+      return true;
     } else {
-      if (!hasPermission(`files/${folder}/write`)) return;
+      if (!hasPermission(`files/${folder}/write`)) return false;
       const dir = path.join(filesdir(), folder);
       if (!(await fs.exists(dir))) {
         await fs.mkdir(dir);
@@ -98,6 +99,7 @@ module.exports = {
       if (folder == 'shell') {
         scheduler.reload();
       }
+      return true;
     }
   },
 
diff --git a/packages/web/src/appobj/SavedFileAppObject.svelte b/packages/web/src/appobj/SavedFileAppObject.svelte
index 4f2e561fc..e7321334c 100644
--- a/packages/web/src/appobj/SavedFileAppObject.svelte
+++ b/packages/web/src/appobj/SavedFileAppObject.svelte
@@ -55,6 +55,14 @@
     currentConnection: true,
   };
 
+  const diagrams: FileTypeHandler = {
+    icon: 'img diagram',
+    format: 'json',
+    tabComponent: 'DiagramTab',
+    folder: 'diagrams',
+    currentConnection: true,
+  };
+
   const HANDLERS = {
     sql,
     shell,
@@ -62,6 +70,7 @@
     charts,
     query,
     sqlite,
+    diagrams,
   };
 
   export const extractKey = data => data.file;
@@ -74,7 +83,7 @@
   import { showModal } from '../modals/modalTools';
 
   import { currentDatabase } from '../stores';
-import { apiCall } from '../utility/api';
+  import { apiCall } from '../utility/api';
 
   import getConnectionLabel from '../utility/getConnectionLabel';
   import hasPermission from '../utility/hasPermission';
diff --git a/packages/web/src/widgets/SavedFilesList.svelte b/packages/web/src/widgets/SavedFilesList.svelte
index fc9fecbcd..4920441eb 100644
--- a/packages/web/src/widgets/SavedFilesList.svelte
+++ b/packages/web/src/widgets/SavedFilesList.svelte
@@ -1,10 +1,8 @@
 <script lang="ts">
-import _ from 'lodash';
-
+  import _ from 'lodash';
   import AppObjectList from '../appobj/AppObjectList.svelte';
-import * as savedFileAppObject from '../appobj/SavedFileAppObject.svelte';
-import { useFiles } from '../utility/metadataLoaders';
-
+  import * as savedFileAppObject from '../appobj/SavedFileAppObject.svelte';
+  import { useFiles } from '../utility/metadataLoaders';
   import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
 
   const sqlFiles = useFiles({ folder: 'sql' });
@@ -13,6 +11,7 @@ import { useFiles } from '../utility/metadataLoaders';
   const chartFiles = useFiles({ folder: 'charts' });
   const queryFiles = useFiles({ folder: 'query' });
   const sqliteFiles = useFiles({ folder: 'sqlite' });
+  const diagramFiles = useFiles({ folder: 'diagrams' });
 
   $: files = [
     ...($sqlFiles || []),
@@ -21,8 +20,8 @@ import { useFiles } from '../utility/metadataLoaders';
     ...($chartFiles || []),
     ...($queryFiles || []),
     ...($sqliteFiles || []),
+    ...($diagramFiles || []),
   ];
-
 </script>
 
 <WidgetsInnerContainer>