# Mermaid Diagrams
> Render live Mermaid diagrams in @humanspeak/svelte-markdown with markedMermaid, using a MermaidRenderer component or an inline Svelte 5 snippet.
**Source:** [https://markdown.svelte.page/examples/mermaid](https://markdown.svelte.page/examples/mermaid)
**Markdown mirror:** [https://markdown.svelte.page/examples/mermaid.md](https://markdown.svelte.page/examples/mermaid.md)
---
This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.
## FIG-001: component renderer.
Pass the built-in `MermaidRenderer` through the `renderers` prop. Handles async rendering, loading + error states, and dark-mode reactivity with no custom logic on your end.
**Metadata:** tag: `COMPONENT` | override: `component`
### Notes
- `markedMermaid()` registers an async `walkTokens` extension that turns `\`\`\`mermaid` fences into renderable tokens.
- Built-in `MermaidRenderer` handles flowcharts, sequence diagrams, class diagrams, state diagrams, gantt charts.
- Loading + error states + dark-mode theme switching are all handled — zero custom logic on your end.
### Source
#### ComponentRendered.svelte
Source file: [src/lib/examples/mermaid/demos/ComponentRendered.svelte](https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/lib/examples/mermaid/demos/ComponentRendered.svelte)
````svelte
{#snippet left()}
{/snippet}
{#snippet right()}
{/snippet}
````
## FIG-002: snippet wrapped.
Wrap each diagram in extra chrome via `{#snippet mermaid}` — figure + caption, custom container, anything you want. Delegates the async rendering itself to MermaidRenderer.
**Metadata:** tag: `SNIPPET` | override: `snippet wrap`
### Notes
- `{#snippet mermaid({ text })}` lets the page own the chrome around each diagram — figure + caption, custom container, anything.
- The async rendering itself still delegates to `MermaidRenderer` — you only own the wrapper.
- Pairs nicely with `markedMermaid()` — extension parses the fences, snippet shapes the output.
### Source
#### SnippetRendered.svelte
Source file: [src/lib/examples/mermaid/demos/SnippetRendered.svelte](https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/lib/examples/mermaid/demos/SnippetRendered.svelte)
````svelte
{#snippet left()}
{/snippet}
{#snippet right()}