diff --git a/src/resources/markdown_template.js b/src/resources/markdown_template.js
index d502eee1..1fa91d1e 100644
--- a/src/resources/markdown_template.js
+++ b/src/resources/markdown_template.js
@@ -1400,9 +1400,15 @@ var handleGraphvizResult = function(id, timeStamp, format, result) {
 };
 
 var setPreviewEnabled = function(enabled) {
+    var hint = '<div class="preview-hint">' +
+               '<h3>Live Preview for Diagrams</h3>' +
+               '<p>Place the cursor on the definition of a diagram to preview.</p>' +
+               '</div>';
+
     if (enabled) {
         contentDiv.style.display = 'none';
         previewDiv.style.display = 'block';
+        previewDiv.innerHTML = hint;
     } else {
         contentDiv.style.display = 'block';
         previewDiv.style.display = 'none';
diff --git a/src/resources/themes/v_detorte/v_detorte.css b/src/resources/themes/v_detorte/v_detorte.css
index 0d9438de..0957ef66 100644
--- a/src/resources/themes/v_detorte/v_detorte.css
+++ b/src/resources/themes/v_detorte/v_detorte.css
@@ -225,6 +225,16 @@ div.img-caption {
     margin-right: 8px;
 }
 
+div.preview-hint {
+    opacity: 0.5;
+    margin-top: 30%;
+    margin-bottom: 30%;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
 /* For Highlight.js Line Number */
 table.hljs-ln tr {
     border: none;
diff --git a/src/resources/themes/v_moonlight/v_moonlight.css b/src/resources/themes/v_moonlight/v_moonlight.css
index 974a1f90..f62effc6 100644
--- a/src/resources/themes/v_moonlight/v_moonlight.css
+++ b/src/resources/themes/v_moonlight/v_moonlight.css
@@ -223,6 +223,16 @@ div.img-caption {
     margin-right: 8px;
 }
 
+div.preview-hint {
+    opacity: 0.5;
+    margin-top: 30%;
+    margin-bottom: 30%;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
 /* For Highlight.js Line Number */
 table.hljs-ln tr {
     border: none;
diff --git a/src/resources/themes/v_native/v_native.css b/src/resources/themes/v_native/v_native.css
index 1d7ad0fb..77e2dc99 100644
--- a/src/resources/themes/v_native/v_native.css
+++ b/src/resources/themes/v_native/v_native.css
@@ -217,6 +217,16 @@ div.img-caption {
     margin-right: 8px;
 }
 
+div.preview-hint {
+    opacity: 0.5;
+    margin-top: 30%;
+    margin-bottom: 30%;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
 /* For Highlight.js Line Number */
 table.hljs-ln tr {
     border: none;
diff --git a/src/resources/themes/v_pure/v_pure.css b/src/resources/themes/v_pure/v_pure.css
index 57ae5024..dfef0dd0 100644
--- a/src/resources/themes/v_pure/v_pure.css
+++ b/src/resources/themes/v_pure/v_pure.css
@@ -219,6 +219,16 @@ div.img-caption {
     margin-right: 8px;
 }
 
+div.preview-hint {
+    opacity: 0.5;
+    margin-top: 30%;
+    margin-bottom: 30%;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
 /* For Highlight.js Line Number */
 table.hljs-ln tr {
     border: none;