diff --git a/src/components/MarkdownUi.vue b/src/components/MarkdownUi.vue
index 701d7e37..c421dbab 100644
--- a/src/components/MarkdownUi.vue
+++ b/src/components/MarkdownUi.vue
@@ -1,6 +1,5 @@
 <template>
   <div
-    v-if="ready"
     :id="componentContainerId"
     ref="markdownComponent"
     class="kong-ui-public-markdown-ui"
@@ -123,7 +122,7 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeMount, onMounted, onUnmounted, computed, ref, nextTick, provide, watch, watchEffect } from 'vue'
+import { onMounted, onUnmounted, computed, ref, nextTick, provide, watch, watchEffect } from 'vue'
 import type { PropType } from 'vue'
 import MarkdownToolbar from '@/components/toolbar/MarkdownToolbar.vue'
 import MarkdownContent from '@/components/MarkdownContent.vue'
@@ -454,26 +453,20 @@ const copyCodeBlock = async (e: any): Promise<void> => {
 // Initialize keyboard shortcuts; they will only fire in edit mode when the textarea is active
 composables.useKeyboardShortcuts(textareaId.value, rawMarkdown, tabSize, emulateInputEvent)
 
-onBeforeMount(async () => {
+onMounted(async () => {
   // Initialize markdown-it
   await initMarkdownIt(activeTheme.value)
-})
-
-const ready = ref<boolean>(false)
-
-onMounted(async () => {
   // Render the markdown
   markdownHtml.value = getHtmlFromMarkdown(props.modelValue)
 
+  // Await a DOM tick
   await nextTick()
-  await updateMermaid()
-
-  ready.value = true
 
   // bind code copy button click events
   useEventListener(markdownComponent, 'click', copyCodeBlock)
 
   initializeMermaid()
+  await updateMermaid()
 
   if (currentMode.value === 'split') {
     await nextTick()