diff --git a/src/renderer/plugins/markdown-mermaid.ts b/src/renderer/plugins/markdown-mermaid.ts
index ead6aa6c..7e59669f 100644
--- a/src/renderer/plugins/markdown-mermaid.ts
+++ b/src/renderer/plugins/markdown-mermaid.ts
@@ -41,6 +41,7 @@ const Mermaid = defineComponent({
     const imgRef = ref<HTMLElement>()
     const result = ref('')
     const img = ref('')
+    const errMsg = ref('')
 
     function getImageUrl (code?: string) {
       const svg = code || container.value?.innerHTML
@@ -56,9 +57,11 @@ const Mermaid = defineComponent({
       try {
         mermaid.render(`mermaid-${mid++}`, props.code, (svgCode: string) => {
           result.value = svgCode
+          errMsg.value = ''
           img.value = getImageUrl(svgCode)
         }, container.value)
       } catch (error) {
+        errMsg.value = '' + error
         logger.error('render', error)
       }
     }
@@ -109,7 +112,7 @@ const Mermaid = defineComponent({
     })
 
     return () => {
-      return h('div', { ...props.attrs, class: 'mermaid-wrapper' }, [
+      return h('div', { ...props.attrs, class: `mermaid-wrapper${errMsg.value ? ' error' : ''}` }, [
         h('div', { class: 'mermaid-action skip-print' }, [
           h('button', { class: 'small', onClick: exportSvg }, 'SVG'),
           h('button', { class: 'small', onClick: exportPng }, 'PNG'),
@@ -125,7 +128,8 @@ const Mermaid = defineComponent({
           ref: imgRef,
           alt: 'mermaid',
           class: 'mermaid-image',
-        })
+        }),
+        h('pre', { class: 'mermaid-error skip-export' }, errMsg.value)
       ])
     }
   }
@@ -154,10 +158,12 @@ export default {
   register: ctx => {
     ctx.theme.addStyles(`
       .markdown-view .markdown-body .mermaid-wrapper {
+        --skip-contain: 1;
         position: relative;
       }
 
       .markdown-view .markdown-body .mermaid-wrapper .mermaid-action {
+        --skip-contain: 1;
         position: absolute;
         right: 10px;
         top: 10px;
@@ -168,18 +174,22 @@ export default {
       }
 
       .markdown-view .markdown-body .mermaid-wrapper:hover .mermaid-action {
+        --skip-contain: 1;
         opacity: 1;
       }
 
       .markdown-view .markdown-body .mermaid-wrapper .mermaid-container {
+        --skip-contain: 1;
         visibility: hidden;
       }
 
       .markdown-view .markdown-body .mermaid-wrapper .mermaid-container > svg {
+        --skip-contain: 1;
         display: block;
       }
 
       .markdown-view .markdown-body .mermaid-wrapper .mermaid-image {
+        --skip-contain: 1;
         filter: none;
         position: absolute;
         width: 100%;
@@ -188,6 +198,25 @@ export default {
         left: 0;
         display: block;
       }
+
+      .markdown-view .markdown-body .mermaid-wrapper .mermaid-error {
+        --skip-contain: 1;
+        display: none;
+        white-space: pre-wrap;
+      }
+
+      .markdown-view .markdown-body .mermaid-wrapper.error .mermaid-action,
+      .markdown-view .markdown-body .mermaid-wrapper.error .mermaid-image {
+        --skip-contain: 1;
+        display: none;
+      }
+
+      .markdown-view .markdown-body .mermaid-wrapper.error .mermaid-error,
+      .markdown-view .markdown-body .mermaid-wrapper.error .mermaid-container {
+        --skip-contain: 1;
+        display: block;
+        visibility: visible;
+      }
     `)
 
     ctx.markdown.registerPlugin(MermaidPlugin)