feat(mermaid): Integrate mermaid in markdown renderer (#413)

demo/package.json

@@ -85,6 +85,7 @@
 		"@types/dom-view-transitions": "^1.0.4",
 		"bootstrap-icons": "^1.11.3",
 		"eslint-plugin-svelte": "^2.35.1",
+		"mermaid": "^10.7.0",
 		"prettier-plugin-svelte": "^3.1.2",
 		"svelte": "^4.2.9",
 		"svelte-check": "^3.6.3",

demo/src/lib/layout/Mermaid.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import mermaid, {type MermaidConfig} from 'mermaid';
+	export let code: string;
+
+	const mermaidDirective = (element: HTMLElement, config: MermaidConfig = {}) => {
+		const renderMermaid = async () => {
+			const {svg} = await mermaid.render('mermaid', code);
+			element.innerHTML = svg;
+		};
+		mermaid.initialize(config);
+		if (code) {
+			renderMermaid();
+		}
+		return {
+			update: (newConfig: MermaidConfig) => {
+				config = newConfig;
+				mermaid.initialize(config);
+				if (code) {
+					renderMermaid();
+				}
+			},
+		};
+	};
+</script>
+
+<div use:mermaidDirective class={`bg-light-subtle doc p-1 d-flex flex-nowrap align-items-start py-2  px-2 px-sm-4`}></div>
+
+<style lang="scss">
+</style>

demo/src/lib/markdown/renderers/MdCode.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Code from '$lib/layout/Code.svelte';
+	import Mermaid from '$lib/layout/Mermaid.svelte';
 	import Sample from '$lib/layout/Sample.svelte';
 	import type {SampleInfo} from '$lib/layout/sample';
 	import {selectedFramework$} from '$lib/stores';
@@ -49,6 +50,8 @@
 	{:else}
 		Sample not found, make sure to fill the samples.ts file.
 	{/if}
+{:else if lang === 'mermaid'}
+	<Mermaid {code} />
 {:else}
 	<Code language={lang} {code} />
 {/if}

demo/vite.config.ts

@@ -68,6 +68,7 @@ export default defineConfig({
 			'@floating-ui/dom',
 			'svelte-markdown',
 			'marked',
+			'mermaid',
 		],
 	},
 });