diff --git a/client/src/components/WorkflowInvocationState/VegaWrapper.vue b/client/src/components/Common/VegaWrapper.vue
similarity index 100%
rename from client/src/components/WorkflowInvocationState/VegaWrapper.vue
rename to client/src/components/Common/VegaWrapper.vue
diff --git a/client/src/components/Markdown/Markdown.vue b/client/src/components/Markdown/Markdown.vue
index 85534cc86c71..435574c7d6b2 100644
--- a/client/src/components/Markdown/Markdown.vue
+++ b/client/src/components/Markdown/Markdown.vue
@@ -46,6 +46,7 @@
             </div>
             <div v-for="(obj, index) in markdownObjects" :key="index" class="markdown-components">
                 <MarkdownDefault v-if="obj.name === 'default'" :content="obj.content" />
+                <MarkdownVega v-else-if="obj.name === 'vega'" :content="obj.content" />
                 <MarkdownContainer
                     v-else-if="obj.name === 'galaxy'"
                     :content="obj.content"
@@ -73,8 +74,10 @@ import { useWorkflowStore } from "@/stores/workflowStore";
 
 import { parseMarkdown } from "./parse";
 
-import MarkdownDefault from "./MarkdownDefault.vue";
 import MarkdownContainer from "./MarkdownContainer.vue";
+import MarkdownDefault from "./Sections/MarkdownDefault.vue";
+import MarkdownVega from "./Sections/MarkdownVega.vue";
+
 import LoadingSpan from "components/LoadingSpan.vue";
 import StsDownloadButton from "components/StsDownloadButton.vue";
 
@@ -86,6 +89,7 @@ export default {
     components: {
         MarkdownDefault,
         MarkdownContainer,
+        MarkdownVega,
         FontAwesomeIcon,
         LoadingSpan,
         StsDownloadButton,
diff --git a/client/src/components/Markdown/MarkdownDefault.vue b/client/src/components/Markdown/Sections/MarkdownDefault.vue
similarity index 100%
rename from client/src/components/Markdown/MarkdownDefault.vue
rename to client/src/components/Markdown/Sections/MarkdownDefault.vue
diff --git a/client/src/components/Markdown/Sections/MarkdownVega.vue b/client/src/components/Markdown/Sections/MarkdownVega.vue
new file mode 100644
index 000000000000..dbd55571e18a
--- /dev/null
+++ b/client/src/components/Markdown/Sections/MarkdownVega.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const VegaWrapper = () => import("@/components/Common/VegaWrapper.vue");
+import { computed } from "vue";
+
+const props = defineProps<{
+    content: string;
+}>();
+
+const spec = computed(() => ({
+    ...JSON.parse(props.content),
+    width: "container",
+}));
+</script>
+
+<template>
+    <VegaWrapper :spec="spec" />
+</template>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
index 91782651b709..db1c58667e5c 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
@@ -6,7 +6,7 @@ import { type ComputedRef } from "vue";
 import { type components, GalaxyApi } from "@/api";
 import { errorMessageAsString } from "@/utils/simple-error";
 
-const VegaWrapper = () => import("./VegaWrapper.vue");
+const VegaWrapper = () => import("@/components/Common/VegaWrapper.vue");
 
 const props = defineProps({
     invocationId: {