Mermaid Markdown Charts

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

svelteness / kit-docs

Mermaid Markdown Charts #96

title: Mermaid Diagram description: Use MermaidDiagram component

{$frontmatter.title}