Attempt to render diagram via marked and mermaid

The theme isn't optimal but better than nothing I guess ?

website/package.json

@@ -15,6 +15,8 @@
     "@nuxt/ui": "^2.19.2",
     "@pinia/nuxt": "^0.5.5",
     "marked": "^14.1.1",
+    "marked-mermaid": "^0.1.0",
+    "mermaid": "^11.4.1",
     "nuxt": "^3.11.2",
     "nuxt-icon": "^1.0.0-beta.7",
     "pinia": "^2.2.4",

website/pages/workflow/MarkdownRenderer.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { ref, nextTick, onMounted, watch } from "vue";
+import { marked } from "marked";
+import mermaid from "mermaid";
+
+// Props
+const props = defineProps({
+    markdownContent: {
+        type: String,
+        required: true,
+    },
+});
+
+// Refs
+const renderedHtml = ref<string>("");
+
+// Initialize Mermaid
+mermaid.initialize({
+    startOnLoad: false,
+    theme: "neutral",
+});
+
+// Watch Markdown Content for Changes
+watch(
+    () => props.markdownContent,
+    (newContent) => {
+        renderMarkdown(newContent);
+    },
+    { immediate: true },
+);
+
+// Render Markdown Function
+async function renderMarkdown(content: string) {
+    console.log("rendering now");
+    renderedHtml.value = await marked(content);
+    await nextTick();
+    renderMermaidDiagrams();
+}
+
+// Render Mermaid Diagrams
+function renderMermaidDiagrams() {
+    const mermaidElements = document.querySelectorAll(".language-mermaid");
+    mermaidElements.forEach((element) => {
+        const parent = element.parentElement;
+        const code = element.textContent || "";
+        if (parent) {
+            try {
+                const id = `mermaid-${Math.random().toString(36).substr(2, 9)}`;
+                mermaid.render(id, code).then((value) => (parent.innerHTML = value.svg));
+            } catch (e) {
+                console.error("Mermaid rendering error:", e);
+            }
+        }
+    });
+}
+</script>
+
+<template>
+    <div v-html="renderedHtml"></div>
+</template>

website/pages/workflow/[id].vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, computed, onBeforeMount } from "vue";
 import { useRoute } from "vue-router";
-import { marked } from "marked";
+import MarkdownRenderer from "./MarkdownRenderer.vue";
 import Author from "~/components/Author.vue";
 import { useWorkflowStore } from "~/stores/workflows";
 
@@ -17,10 +17,6 @@ const formatDate = (date: string) => {
     });
 };
 
-const parseMarkdown = (content: string) => {
-    return marked(content);
-};
-
 // TODO: Add a component for authors.  For now, just have a computed that grabs names and joins them
 const authors = computed(() => {
     let authorLine = "";
@@ -91,14 +87,14 @@ const tabs = computed(() => [
         label: "Version History",
         content: workflow.value?.changelog || "No CHANGELOG available.",
     },
+    {
+        label: "Diagram",
+        content: workflow.value?.diagrams || "No diagram available",
+    },
     {
         label: "Tools",
         tools: tools || "This tab will show a nice listing of all the tools used in this workflow.",
     },
-    // {
-    //     label: "Preview",
-    //     preview: true,
-    // },
 ]);
 
 /* Instance Selector -- factor out to a component */
@@ -187,13 +183,13 @@ const onInstanceChange = (value: string) => {
                         </template>
                         <template #item="{ item }">
                             <div v-if="item.content" class="mt-6">
-                                <div
-                                    class="prose dark:prose-invert !max-w-none"
-                                    v-html="parseMarkdown(item.content)"></div>
+                                <div class="prose dark:prose-invert !max-w-none">
+                                    <MarkdownRenderer :markdownContent="item.content" />
+                                </div>
                             </div>
                             <div v-else-if="item.tools" class="mt-6">
                                 <div class="prose dark:prose-invert !max-w-none">
-                                    <h3>The following tools are required to run this workflow.</h3>
+                                    <h3>The following tools are used by this workflow.</h3>
                                     <p>
                                         This will eventually be a pretty page with links to each tool in the (new)
                                         toolshed, etc.