mermaid and I tried to theme it

packages/ui/package.json

@@ -74,6 +74,7 @@
 		"@xterm/xterm": "^6.0.0",
 		"ace-builds": "^1.43.5",
 		"apexcharts": "^4.0.0",
+		"beautiful-mermaid": "^1.1.3",
 		"comark": "^0.6.2",
 		"dayjs": "^1.11.10",
 		"dompurify": "^3.1.7",

packages/ui/src/components/base/MarkdownBody.vue

@@ -35,6 +35,7 @@ import { computed } from 'vue'
 import MarkdownAlert, { alertMarkerTypes } from './markdown/MarkdownAlert.vue'
 import MarkdownCollectionEmbed from './markdown/MarkdownCollectionEmbed.vue'
 import MarkdownHighlightedPre from './markdown/MarkdownHighlightedPre.vue'
+import MarkdownMermaid from './markdown/MarkdownMermaid.vue'
 import MarkdownOrganizationEmbed from './markdown/MarkdownOrganizationEmbed.vue'
 import MarkdownProjectEmbed from './markdown/MarkdownProjectEmbed.vue'
 import MarkdownTaskCheckbox from './markdown/MarkdownTaskCheckbox.vue'
@@ -84,6 +85,7 @@ const components = computed(() =>
 				organization: MarkdownOrganizationEmbed,
 				collection: MarkdownCollectionEmbed,
 				input: MarkdownTaskCheckbox,
+				mermaid: MarkdownMermaid,
 				...(props.highlight ? { pre: MarkdownHighlightedPre } : {}),
 			},
 )

packages/ui/src/components/base/markdown/MarkdownMermaid.vue

@@ -0,0 +1,29 @@
+<template>
+	<Mermaid :content="content" :theme="resolvedTheme" :theme-dark="resolvedThemeDark" />
+</template>
+
+<script setup lang="ts">
+import { Mermaid } from '@comark/vue/plugins/mermaid'
+import type { ThemeNames } from 'comark/plugins/mermaid'
+import type { DiagramColors } from 'beautiful-mermaid'
+import { computed } from 'vue'
+
+const modrinthMermaidTheme: DiagramColors = {
+	bg: 'var(--surface-2)',
+	fg: 'var(--color-contrast)',
+	line: 'var(--color-secondary)',
+	accent: 'var(--color-brand)',
+	muted: 'var(--color-secondary)',
+	surface: 'var(--color-button-bg)',
+	border: 'var(--color-divider)',
+}
+
+const props = defineProps<{
+	content: string
+	theme?: ThemeNames
+	themeDark?: ThemeNames
+}>()
+
+const resolvedTheme = computed(() => props.theme ?? modrinthMermaidTheme)
+const resolvedThemeDark = computed(() => props.themeDark ?? modrinthMermaidTheme)
+</script>