diff --git a/cypress.config.js b/cypress.config.js
index 7ebe9ef4..8b8edd92 100644
--- a/cypress.config.js
+++ b/cypress.config.js
@@ -1,6 +1,6 @@
 import { defineConfig } from 'cypress';
 import fs from 'fs';
-import { isFileExist, findFiles } from 'cy-verify-downloads';
+import path from 'path';
 export default defineConfig({
   projectId: '2ckppp',
   viewportWidth: 1440,
@@ -15,17 +15,19 @@ export default defineConfig({
   e2e: {
     setupNodeEvents(on, config) {
       on('task', {
-        isFileExist,
-        findFiles,
-        deleteFile(path) {
-          fs.rmSync(path);
-          return null;
-        },
-        readFileMaybe(filename) {
-          if (fs.existsSync(filename)) {
-            return fs.readFileSync(filename, 'utf8');
+        readAndDeleteFile({ fileNamePattern, folder, mode }) {
+          const fileNameRegex = new RegExp(fileNamePattern);
+          const files = fs.readdirSync(folder);
+          const filename = files.find((file) => file.match(fileNameRegex));
+          const filePath = path.join(folder, filename);
+          try {
+            if (mode === 'size') {
+              return fs.statSync(filePath).size;
+            }
+            return fs.readFileSync(filePath, 'utf8');
+          } finally {
+            fs.rmSync(filePath);
           }
-          return null;
         }
       });
     },
diff --git a/cypress/e2e/actions.spec.ts b/cypress/e2e/actions.spec.ts
index 4206f022..24d8d1b1 100644
--- a/cypress/e2e/actions.spec.ts
+++ b/cypress/e2e/actions.spec.ts
@@ -26,8 +26,6 @@ describe('Check actions', () => {
   });
 
   it('should download png and svg', () => {
-    cy.clock(new Date(2022, 0, 1).getTime());
-
     cy.get(`#downloadPNG`).click();
     verifyFileSizeGreaterThan('diagram', 'png', 34_000);
 
@@ -43,7 +41,5 @@ describe('Check actions', () => {
 
     cy.get(`#downloadSVG`).click();
     verifyFileSizeGreaterThan('diagram', 'svg', 11_000);
-
-    cy.clock().invoke('restore');
   });
 });
diff --git a/cypress/e2e/diagramUpdate.spec.ts b/cypress/e2e/diagramUpdate.spec.ts
index d2ca433c..b8326bc3 100644
--- a/cypress/e2e/diagramUpdate.spec.ts
+++ b/cypress/e2e/diagramUpdate.spec.ts
@@ -50,6 +50,24 @@ describe('Auto sync tests', () => {
     cy.getLocalStorage('codeStore').snapshot();
   });
 
+  it('should automatically defer rendering when complex diagrams are edited', () => {
+    cy.get('#view').should('not.have.class', 'outOfSync');
+    typeInEditor(`
+A & B & C & D & E --> F & G & K & Z & i
+A & B & C & D & E --> F & G & K & Z & i
+A & B & C & D & E --> F & G & K & Z & i
+A & B & C & D & E --> F & G & K & Z & i
+A & B & C & D & E --> F & G & K & Z & i
+A & B & C & D & E --> F & G & K & Z & i
+A & B & C & D & E --> F & G & K & Z & i
+A & B & C & D & E --> F & G & K & Z & i
+A & B & C & D & E --> F & G & K & Z & i`);
+    cy.get('#view').should('have.class', 'outOfSync');
+    cy.get('#errorContainer').should('contain.text', 'It will be updated automatically.');
+    // The class should be removed automatically after 1 second.
+    cy.get('#view').should('not.have.class', 'outOfSync');
+  });
+
   it('supports commenting code out/in', () => {
     cy.get('#editor').contains('Car').click();
     cy.get('#editor').get('textarea').type(`${cmd}/`, { force: true });
diff --git a/cypress/e2e/util.ts b/cypress/e2e/util.ts
index 456ae585..2f76f625 100644
--- a/cypress/e2e/util.ts
+++ b/cypress/e2e/util.ts
@@ -29,17 +29,15 @@ export const verifyFileSizeGreaterThan = (
   extension: string,
   size: number
 ) => {
-  const fileName = `mermaid-${fileType}-2022-01-01-000000.${extension}`;
-  const filePath = `${downloadsFolder}/${fileName}`;
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-  cy.verifyDownload(fileName);
-  cy.readFile(filePath, null, {
-    log: false
-  }).then((buffer: ArrayBuffer) => {
-    expect(buffer.byteLength).to.be.gt(size);
-    expect(buffer.byteLength).to.be.lt(size * 1.3);
+  cy.get('#view').should('not.have.class', 'outOfSync');
+  cy.task('readAndDeleteFile', {
+    folder: downloadsFolder,
+    fileNamePattern: `^mermaid-${fileType}-.*.${extension}$`,
+    mode: 'size'
+  }).then((fileSize: number) => {
+    expect(fileSize).to.be.gt(size);
+    expect(fileSize).to.be.lt(size * 1.3);
   });
-  cy.task('deleteFile', filePath);
 };
 
 export const verifyFileSnapshot = (
@@ -47,14 +45,11 @@ export const verifyFileSnapshot = (
   extension: string,
   content: string
 ) => {
-  const fileName = `mermaid-${fileType}-2022-01-01-000000.${extension}`;
-  const filePath = `${downloadsFolder}/${fileName}`;
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-  cy.verifyDownload(fileName);
-  cy.readFile(filePath, null, {
-    log: false
-  }).then((buffer: ArrayBuffer) =>
-    expect(new TextDecoder('utf8').decode(buffer)).to.contain(content)
-  );
-  cy.task('deleteFile', filePath);
+  cy.task('readAndDeleteFile', {
+    folder: downloadsFolder,
+    fileNamePattern: `^mermaid-${fileType}-.*.${extension}$`,
+    mode: 'content'
+  }).then((fileContent: number) => {
+    expect(fileContent).to.contain(content);
+  });
 };
diff --git a/cypress/support/e2e.js b/cypress/support/e2e.js
index d9401131..4ef4ffaa 100644
--- a/cypress/support/e2e.js
+++ b/cypress/support/e2e.js
@@ -15,7 +15,6 @@
 
 // Import commands.js using ES2015 syntax:
 import './commands';
-require('cy-verify-downloads').addCustomCommand();
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json
index edd14f8b..e9f59358 100644
--- a/cypress/tsconfig.json
+++ b/cypress/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "allowJs": true,
-    "types": ["cypress", "cypress-localstorage-commands", "cy-verify-downloads", "node"]
+    "types": ["cypress", "cypress-localstorage-commands", "node"]
   },
   "include": ["**/*.ts"]
 }
diff --git a/package.json b/package.json
index 91ffa57f..5f8534ed 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "@sveltejs/kit": "2.4.1",
     "@sveltejs/vite-plugin-svelte": "^3.0.1",
     "@testing-library/svelte": "4.0.5",
+    "@types/lodash-es": "^4.17.12",
     "@types/pako": "2.0.3",
     "@types/uuid": "9.0.7",
     "@typescript-eslint/eslint-plugin": "6.19.0",
@@ -36,7 +37,6 @@
     "c8": "7.14.0",
     "chai": "^4.3.7",
     "cssnano": "^6.0.0",
-    "cy-verify-downloads": "0.2.2",
     "cypress": "12.17.4",
     "cypress-localstorage-commands": "2.2.5",
     "eslint": "8.56.0",
@@ -50,7 +50,6 @@
     "eslint-plugin-unicorn": "^50.0.1",
     "eslint-plugin-vitest": "^0.3.20",
     "esserializer": "^1.3.11",
-    "font-awesome": "^4.7.0",
     "husky": "^8.0.3",
     "jsdom": "^21.1.2",
     "lint-staged": "^15.2.0",
@@ -73,6 +72,7 @@
     "daisyui": "2.52.0",
     "dayjs": "^1.11.7",
     "js-base64": "3.7.5",
+    "lodash-es": "^4.17.21",
     "mermaid": "10.7.0",
     "monaco-editor": "0.45.0",
     "pako": "2.1.0",
diff --git a/src/lib/components/Actions.svelte b/src/lib/components/Actions.svelte
index 9b1fd242..3cd45914 100644
--- a/src/lib/components/Actions.svelte
+++ b/src/lib/components/Actions.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
   import { browser } from '$app/environment';
   import Card from '$lib/components/Card/Card.svelte';
+  import { waitForRender } from '$lib/util/autoSync';
   import { env } from '$lib/util/env';
   import { pakoSerde } from '$lib/util/serde';
   import { stateStore } from '$lib/util/state';
   import { logEvent } from '$lib/util/stats';
-  import { toBase64 } from 'js-base64';
   import dayjs from 'dayjs';
+  import { toBase64 } from 'js-base64';
 
   const { krokiRendererUrl, rendererUrl } = env;
   type Exporter = (context: CanvasRenderingContext2D, image: HTMLImageElement) => () => void;
@@ -30,7 +31,11 @@
     return toBase64(svgString);
   };
 
-  const exportImage = (event: Event, exporter: Exporter) => {
+  const exportImage = async (event: Event, exporter: Exporter) => {
+    await waitForRender();
+    if (document.querySelector('.outOfSync')) {
+      throw new Error('Diagram is out of sync');
+    }
     const canvas: HTMLCanvasElement = document.createElement('canvas');
     const svg = document.querySelector<HTMLElement>('#container svg');
     if (!svg) {
@@ -122,13 +127,13 @@
     };
   };
 
-  const onCopyClipboard = (event: Event) => {
-    exportImage(event, clipboardCopy);
+  const onCopyClipboard = async (event: Event) => {
+    await exportImage(event, clipboardCopy);
     logEvent('copyClipboard');
   };
 
-  const onDownloadPNG = (event: Event) => {
-    exportImage(event, downloadImage);
+  const onDownloadPNG = async (event: Event) => {
+    await exportImage(event, downloadImage);
     logEvent('download', {
       type: 'png'
     });
diff --git a/src/lib/components/Editor.svelte b/src/lib/components/Editor.svelte
index 77652eca..9118a3a7 100644
--- a/src/lib/components/Editor.svelte
+++ b/src/lib/components/Editor.svelte
@@ -88,7 +88,7 @@
     }
     // eslint-disable-next-line @typescript-eslint/no-unsafe-call
     initEditor(monaco);
-    errorDebug(100);
+    errorDebug();
     editor = monaco.editor.create(divElement, editorOptions);
     editor.onDidChangeModelContent(({ isFlush }) => {
       const newText = editor?.getValue();
diff --git a/src/lib/components/View.svelte b/src/lib/components/View.svelte
index 14e97e31..db9efa1f 100644
--- a/src/lib/components/View.svelte
+++ b/src/lib/components/View.svelte
@@ -3,10 +3,11 @@
   import { onMount } from 'svelte';
   import panzoom from 'svg-pan-zoom';
   import type { State, ValidatedState } from '$lib/types';
-  import { logEvent } from '$lib/util/stats';
+  import { logEvent, saveStatistics } from '$lib/util/stats';
   import { cmdKey } from '$lib/util/util';
   import { render as renderDiagram } from '$lib/util/mermaid';
   import type { MermaidConfig } from 'mermaid';
+  import { recordRenderTime, shouldRefreshView } from '$lib/util/autoSync';
 
   let code = '';
   let config = '';
@@ -59,6 +60,7 @@
   };
 
   const handleStateChange = async (state: ValidatedState) => {
+    const startTime = Date.now();
     if (state.error !== undefined) {
       error = true;
       errorLines = state.error.toString().split('\n');
@@ -76,6 +78,12 @@
         if (code === state.code && config === state.mermaid && panZoomEnabled === state.panZoom) {
           return;
         }
+
+        if (!shouldRefreshView()) {
+          outOfSync = true;
+          return;
+        }
+
         code = state.code;
         config = state.mermaid;
         panZoomEnabled = state.panZoom;
@@ -114,6 +122,11 @@
       console.error('view fail', error_);
       error = true;
     }
+    const timeTaken = Date.now() - startTime;
+    saveStatistics(code, timeTaken);
+    recordRenderTime(timeTaken, () => {
+      $inputStateStore.updateDiagram = true;
+    });
   };
 
   onMount(() => {
@@ -140,7 +153,11 @@
       {/each}
     {:else}
       Diagram out of sync. <br />
-      Press <i class="fas fa-sync" /> (Sync button) or <kbd>{cmdKey} + Enter</kbd> to sync.
+      {#if $stateStore.autoSync}
+        It will be updated automatically.
+      {:else}
+        Press <i class="fas fa-sync" /> (Sync button) or <kbd>{cmdKey} + Enter</kbd> to sync.
+      {/if}
     {/if}
   </div>
 {/if}
diff --git a/src/lib/util/autoSync.ts b/src/lib/util/autoSync.ts
new file mode 100644
index 00000000..7b7faf06
--- /dev/null
+++ b/src/lib/util/autoSync.ts
@@ -0,0 +1,49 @@
+import debounce from 'lodash-es/debounce';
+import { get } from 'svelte/store';
+import { stateStore } from './state';
+
+let shouldSync = true;
+let updater: () => void;
+let renderPromise: Promise<void> | undefined;
+let resolveRenderPromise: (() => void) | undefined;
+const renderDelay = 1000;
+const slowRenderThreshold = 150;
+
+const debouncedRender = debounce(() => {
+  shouldSync = true;
+  updater();
+}, renderDelay);
+
+export const recordRenderTime = (renderTimeMs: number, updaterFunction: () => void): void => {
+  resolveRenderPromise?.();
+  const { autoSync } = get(stateStore);
+  if (!autoSync) {
+    return;
+  }
+  updater = updaterFunction;
+  const isSlow = renderTimeMs > slowRenderThreshold;
+  if (!shouldSync) {
+    debouncedRender();
+  }
+  shouldSync = !isSlow;
+};
+
+export const shouldRefreshView = (): boolean => {
+  if (!renderPromise) {
+    renderPromise = new Promise((resolve) => {
+      resolveRenderPromise = () => {
+        renderPromise = undefined;
+        resolve();
+      };
+    });
+  }
+
+  if (!shouldSync) {
+    debouncedRender();
+  }
+  return shouldSync;
+};
+
+export const waitForRender = (): Promise<void> => {
+  return renderPromise ?? Promise.resolve();
+};
diff --git a/src/lib/util/state.ts b/src/lib/util/state.ts
index 2cff194e..3c719e06 100644
--- a/src/lib/util/state.ts
+++ b/src/lib/util/state.ts
@@ -1,12 +1,11 @@
-import { writable, get, type Readable, derived } from 'svelte/store';
-import { persist, localStorage } from './persist';
-import { saveStatistics, countLines } from './stats';
-import { serializeState, deserializeState } from './serde';
-import { cmdKey, errorDebug, formatJSON } from './util';
-import { parse } from './mermaid';
-
 import type { ErrorHash, MarkerData, State, ValidatedState } from '$lib/types';
+import { debounce } from 'lodash-es';
 import type { MermaidConfig } from 'mermaid';
+import { derived, get, writable, type Readable } from 'svelte/store';
+import { parse } from './mermaid';
+import { localStorage, persist } from './persist';
+import { deserializeState, serializeState } from './serde';
+import { errorDebug, formatJSON } from './util';
 
 export const defaultState: State = {
   code: `flowchart TD
@@ -134,7 +133,6 @@ export const updateCodeStore = (newState: Partial<State>): void => {
   });
 };
 
-let prompted = false;
 export const updateCode = (
   code: string,
   {
@@ -142,21 +140,7 @@ export const updateCode = (
     resetPanZoom = false
   }: { updateDiagram?: boolean; resetPanZoom?: boolean } = {}
 ): void => {
-  // console.log('updateCode', code);
-  const lines = countLines(code);
-  saveStatistics(code);
   errorDebug();
-  if (lines > 50 && !prompted && get(stateStore).autoSync) {
-    const turnOff = confirm(
-      `Long diagram detected. Turn off Auto Sync? Use ${cmdKey} + Enter or click the sync logo to manually sync.`
-    );
-    prompted = true;
-    if (turnOff) {
-      updateCodeStore({
-        autoSync: false
-      });
-    }
-  }
 
   inputStateStore.update((state) => {
     if (resetPanZoom) {
@@ -185,13 +169,13 @@ export const toggleDarkTheme = (dark: boolean): void => {
   });
 };
 
-let urlDebounce: number;
 export const initURLSubscription = (): void => {
+  const updateHash = debounce((hash) => {
+    history.replaceState(undefined, '', `#${hash}`);
+  }, 250);
+
   stateStore.subscribe(({ serialized }) => {
-    clearTimeout(urlDebounce);
-    urlDebounce = window.setTimeout(() => {
-      history.replaceState(undefined, '', `#${serialized}`);
-    }, 250);
+    updateHash(serialized);
   });
 };
 
diff --git a/src/lib/util/stats.ts b/src/lib/util/stats.ts
index 82d1c5fc..04183c90 100644
--- a/src/lib/util/stats.ts
+++ b/src/lib/util/stats.ts
@@ -47,33 +47,45 @@ export const countLines = (code: string): number => {
   return (code.match(/\n/g)?.length ?? 0) + 1;
 };
 
-export const saveStatistics = (graph: string): void => {
+export const saveStatistics = (graph: string, renderTime: number): void => {
   const graphType = detectType(graph);
   if (!graphType) {
     return;
   }
   const length = countLines(graph);
-  const lengthBucket =
-    length < 10
-      ? '0-10'
-      : length < 25
-        ? '10-25'
-        : length < 50
-          ? '25-50'
-          : length < 100
-            ? '50-100'
-            : length < 200
-              ? '100-200'
-              : length < 500
-                ? '200-500'
-                : length < 700
-                  ? '500-700'
-                  : length < 1000
-                    ? '700-1000'
-                    : length < 1500
-                      ? '1000-1500'
-                      : '1500+';
-  logEvent('render', { graphType, length, lengthBucket });
+  const lengthBucket = getBucket(length);
+  const renderTimeMsBucket = getBucket(renderTime);
+  logEvent('render', { graphType, length, lengthBucket, renderTimeMsBucket });
+};
+
+const getBucket = (length: number): string => {
+  return length < 10
+    ? '0-10'
+    : length < 25
+      ? '10-25'
+      : length < 50
+        ? '25-50'
+        : length < 100
+          ? '50-100'
+          : length < 200
+            ? '100-200'
+            : length < 500
+              ? '200-500'
+              : length < 700
+                ? '500-700'
+                : length < 1000
+                  ? '700-1000'
+                  : length < 1500
+                    ? '1000-1500'
+                    : length < 2500
+                      ? '1500-2500'
+                      : length < 4500
+                        ? '2500-4500'
+                        : length < 7000
+                          ? '4500-7000'
+                          : length < 10_000
+                            ? '7000-10000'
+                            : '10000+';
 };
 
 const minutesToMilliSeconds = (minutes: number): number => {
diff --git a/src/lib/util/util.ts b/src/lib/util/util.ts
index d082a703..65769ff5 100644
--- a/src/lib/util/util.ts
+++ b/src/lib/util/util.ts
@@ -28,7 +28,7 @@ export const isMac = navigator.platform.toUpperCase().includes('MAC');
 export const cmdKey = isMac ? 'Cmd' : 'Ctrl';
 
 let count = 0;
-export const errorDebug = (limit = 100) => {
+export const errorDebug = (limit = 1000) => {
   count += 1;
   if (count > limit) {
     console.log(count, limit);
diff --git a/yarn.lock b/yarn.lock
index b1b8e69c..e28a3cd2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -557,6 +557,18 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
   integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
 
+"@types/lodash-es@^4.17.12":
+  version "4.17.12"
+  resolved "https://registry.yarnpkg.com/@types/lodash-es/-/lodash-es-4.17.12.tgz#65f6d1e5f80539aa7cfbfc962de5def0cf4f341b"
+  integrity sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*":
+  version "4.14.202"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.202.tgz#f09dbd2fb082d507178b2f2a5c7e74bd72ff98f8"
+  integrity sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==
+
 "@types/mdast@^3.0.0":
   version "3.0.12"
   resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.12.tgz#beeb511b977c875a5b0cc92eab6fcac2f0895514"
@@ -1697,11 +1709,6 @@ cssstyle@^3.0.0:
   dependencies:
     rrweb-cssom "^0.6.0"
 
-cy-verify-downloads@0.2.2:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/cy-verify-downloads/-/cy-verify-downloads-0.2.2.tgz#c5eb96724f1abdaf3456a3ca5669030be52da01c"
-  integrity sha512-Cr4U38xg5z8AK8XiYuEcbAy1rfgtkZTdUFTWkG5NM+BxKSjRlpGt6LpylLpHp9B6ikKCBPotpeewW7fOuBFKlA==
-
 cypress-localstorage-commands@2.2.5:
   version "2.2.5"
   resolved "https://registry.yarnpkg.com/cypress-localstorage-commands/-/cypress-localstorage-commands-2.2.5.tgz#81c8f53a06e2ed93c1e068c1101da85f80f27f61"
@@ -2874,11 +2881,6 @@ folktale@2.3.2:
   resolved "https://registry.yarnpkg.com/folktale/-/folktale-2.3.2.tgz#38231b039e5ef36989920cbf805bf6b227bf4fd4"
   integrity sha512-+8GbtQBwEqutP0v3uajDDoN64K2ehmHd0cjlghhxh0WpcfPzAIjPA03e1VvHlxL02FVGR0A6lwXsNQKn3H1RNQ==
 
-font-awesome@^4.7.0:
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133"
-  integrity sha512-U6kGnykA/6bFmg1M/oT9EkFeIYv7JlX3bozwQJWiiLz6L0w3F5vBVPxHlwyX/vtNq1ckcpRKOB9f2Qal/VtFpg==
-
 for-each@^0.3.3:
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"