Mermaid Markdown Charts

[Elliott-Green]

Anyone got this to work within kit-docs?

[BCYCAData]

First I did npm install -D mermaid

Then in src/kit-docs/MermaidDiagram.svelte I have:

	import { onMount } from 'svelte';
	import mermaid from 'mermaid';

	export let mermaidOptions = {};

	mermaid.initialize(mermaidOptions);

	onMount(() => {
		setTimeout(async () => {
			await mermaid.run();
		}, 0);
	});
</script>

<div class="container">
  <pre class="mermaid">
    <slot />
  </pre>
</div>

<style lang="scss">
	.mermaid {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
</style>```

I can use the 'MermaidDiagram' component like this in my `+page.md` files:

---

title: Mermaid Diagram description: Use MermaidDiagram component

{$frontmatter.title}

{$frontmatter.description}

This is the basic usage.

<MermaidDiagram {mermaidOptions}> flowchart TB A & B --> C & D </MermaidDiagram>