Examples / Mermaid Diagrams

Mermaid Diagrams

Live Mermaid diagram rendering powered by the extensions prop with built-in helpers. Edit the markdown to try your own diagrams.

Peer Dependency

mermaid is not bundled with this package — install it separately: npm install mermaid

Component Renderers

The built-in MermaidRenderer component handles async rendering, loading/error states, and dark mode reactivity. Pass it via the renderers prop for zero-config diagram support.

Editor

778 characters

Preview

Mermaid Diagrams

Flowchart

Loading diagram...

Sequence Diagram

Loading diagram...

Mixed Content

Regular markdown works alongside diagrams: bold, italic, and inline code.

Tip: Use ```mermaid code blocks to create diagrams.

Class Diagram

Loading diagram...

Component Renderer Code

<script lang="ts">
  import SvelteMarkdown from '@humanspeak/svelte-markdown'
  import { markedMermaid, MermaidRenderer }
    from '@humanspeak/svelte-markdown/extensions'

  const source = '\`\`\`mermaid\ngraph LR\n  A --> B\n\`\`\`'
  const renderers = { mermaid: MermaidRenderer }
</script>

<SvelteMarkdown
  {source}
  extensions={[markedMermaid()]}
  {renderers}
/>