logo svelte /markdown v1.7.10
FIG-001/ COMPONENT

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.

  • 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.
↩ all examples
override · component mode · live running source
EDITOR markdown
PREVIEW diagrams

Mermaid Diagrams

Flowchart

Loading diagram...

Sequence Diagram

Loading diagram...

Mixed Content

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

Class Diagram

Loading diagram...
category · component
sheet · sheet 01 / 02
⟳ to re-run
FIG-002/ SNIPPET

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.

  • {#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.
↩ all examples
override · snippet wrap mode · live running source
EDITOR markdown
PREVIEW wrapped

Mermaid Diagrams

Flowchart

Mermaid · rendered
Loading diagram...

Sequence Diagram

Mermaid · rendered
Loading diagram...

Mixed Content

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

Class Diagram

Mermaid · rendered
Loading diagram...
category · snippet
sheet · sheet 02 / 02
⟳ to re-run

Mermaid Diagrams