diff --git a/news/changelog-1.7.md b/news/changelog-1.7.md
index 2071de93890..f77d85ba650 100644
--- a/news/changelog-1.7.md
+++ b/news/changelog-1.7.md
@@ -179,3 +179,4 @@ All changes included in 1.7:
 - ([#12369](https://github.com/quarto-dev/quarto-cli/pull/12369)): `quarto preview` correctly throws a YAML validation error when a `format` key does not conform.
 - ([#12459](https://github.com/quarto-dev/quarto-cli/pull/12459)): Add `.page-inset-*` classes to completions.
 - ([#12492](https://github.com/quarto-dev/quarto-cli/pull/12492)): Improve shortcode extension template with new parameters and a link to docs.
+- ([#12513](https://github.com/quarto-dev/quarto-cli/issues/12513)): Fix an issue with `quarto preview` when using **DiagrammeR** R package for Graphiz diagram.
diff --git a/src/resources/preview/quarto-preview.html b/src/resources/preview/quarto-preview.html
index 2e7b7e5af64..af97f83670d 100644
--- a/src/resources/preview/quarto-preview.html
+++ b/src/resources/preview/quarto-preview.html
@@ -1,15 +1,19 @@
-
-<script>window.backupDefine = window.define; window.define = undefined;</script>
+<script>
+  window.backupDefine = window.define;
+  window.define = undefined;
+</script>
 <script type="text/javascript" src="quarto-preview.js"></script>
-<script>window.define = window.backupDefine; window.backupDefine = undefined;</script>
+<script>
+  window.define = window.backupDefine;
+  window.backupDefine = undefined;
+</script>
 <script type="text/javascript">
-  const options = {
-    origin: "<%- origin %>",
-    search: "<%- search %>",
-    inputFile: "<%- inputFile %>",
-    isPresentation: <%= isPresentation %>
-  }
   document.addEventListener("DOMContentLoaded", function () {
-    window.QuartoPreview.init(options);
-  });
+    window.QuartoPreview.init({
+      origin: "<%- origin %>",
+      search: "<%- search %>",
+      inputFile: "<%- inputFile %>",
+      isPresentation: <%= isPresentation %>
+    });
+  })
 </script>
diff --git a/src/webui/quarto-preview/src/index.tsx b/src/webui/quarto-preview/src/index.tsx
index c930d4b1076..879c2b94e0e 100644
--- a/src/webui/quarto-preview/src/index.tsx
+++ b/src/webui/quarto-preview/src/index.tsx
@@ -4,37 +4,40 @@
  * Copyright (C) 2023 Posit Software, PBC
  */
 
-import { connectToServer } from './server/connection';
-import { navigationHandler } from './server/navigation';
-import { progressHandler } from './server/progress';
+import { connectToServer } from "./server/connection";
+import { navigationHandler } from "./server/navigation";
+import { progressHandler } from "./server/progress";
 
 import { handleExternalLinks } from "./frame/links";
-import { handleMecaLinks } from './frame/meca';
+import { handleMecaLinks } from "./frame/meca";
 import { handleRevealMessages } from "./frame/reveal";
 import { handleViewerMessages } from "./frame/viewer";
-import { handleCommands } from './frame/commands';
-
-import './ui/fluent.css'
+import { handleCommands } from "./frame/commands";
 
+import "./ui/fluent.css";
 
 export interface Options {
-  origin: string | null,
-  search: string | null,
-  inputFile: string | null,
+  origin: string | null;
+  search: string | null;
+  inputFile: string | null;
   isPresentation: boolean;
 }
 
+// Store the current options
+let currentOptions: Options | null = null;
+
 function init(options: Options) {
-  
-  try {
+  // Store the options for export
+  currentOptions = options;
 
+  try {
     // detect dark mode
     const darkMode = detectDarkMode();
 
     // server connection
     const disconnect = connectToServer([
       progressHandler(darkMode),
-      navigationHandler()
+      navigationHandler(),
     ]);
 
     // handle commands
@@ -50,11 +53,17 @@ function init(options: Options) {
 
     // handle messages as approprate for format
     if (options.isPresentation) {
-      handleRevealMessages(disconnect)
+      handleRevealMessages(disconnect);
     } else {
       handleViewerMessages(options.inputFile);
     }
 
+    // Dispatch event when initialized
+    const event = new CustomEvent("quarto-preview-initialized", {
+      detail: options,
+    });
+
+    document.dispatchEvent(event);
   } catch (error) {
     console.error(error);
   }
@@ -69,8 +78,9 @@ function detectDarkMode() {
   }
 }
 
-export { init }
-
-
-
+// Export the current options
+function getOptions() {
+  return currentOptions;
+}
 
+export { init, getOptions };