%% a mermaid renderer for svelte 5

Diagrams are just strings.

Mermaid Svelte gives you one component: pass it Mermaid source, get an SVG in the DOM. Typed props, a snippet for parse errors, and a dynamic import that keeps mermaid.js out of your server bundle.

$npm i @friendofsvelte/mermaid

Browse the example gallery → GitHub ↗

v0.0.4 · MIT · Svelte 5 runes · mermaid 10

live

rendered by <Mermaid string={source} />

%% this is the published component, not a mockup. Break the syntax and watch the error snippet take over.

%% usage

Install, import, pass a string.

The component validates the source with mermaid.parse, renders it, and swaps the SVG in. mermaid.js is imported dynamically on the client, so server builds and prerendering never touch it.

When the source doesn't parse, your error snippet renders instead. No broken half-diagram, no unhandled exception.

terminal bash

npm i @friendofsvelte/mermaid

+page.svelte svelte

<script>
  import { Mermaid } from '@friendofsvelte/mermaid';

  const diagram = `graph TD
    A[Start] --> B[Process]
    B --> C[End]`;
</script>

<Mermaid string={diagram} />

with an error snippet svelte

<Mermaid string={diagram}>
  {#snippet error(err)}
    <p class="diagram-error">
      Could not render this diagram: {err.message}
    </p>
  {/snippet}
</Mermaid>

%% what you get

Small surface, no surprises.

Dynamic import: mermaid.js loads on the client the first time a diagram renders. Your server bundle never sees it.
Typed end to end: MermaidProps, MermaidConfig and MermaidError are exported, so the string, config and error snippet are all checked.
An error snippet, not a crash: Invalid source renders whatever fallback you write. A typo in a diagram never breaks the page around it.
Full config passthrough: Anything mermaid.initialize accepts goes through the config prop: themes, themeVariables, per-diagram options.
SSR and static safe: No window access on the server. Works with SvelteKit SSR, prerendering and adapter-static. This site is a static build.
Tested in a real browser: Playwright e2e tests render flowcharts and sequence diagrams against the DOM, not a mock.

%% api

One component, four props.

prop	type	required	description
string	string	yes	Mermaid source to render
config	MermaidConfig	no	Passed to mermaid.initialize before rendering
class	string	no	Class applied to the container element
error	Snippet<[MermaidError]>	no	Rendered in place of the diagram when parsing fails

Theming with config

The config prop is a full MermaidConfig. Every diagram on this page uses theme: 'base' with themeVariables so the SVGs match the site palette instead of Mermaid's defaults.

themed.svelte svelte

<script lang="ts">
  import { Mermaid, type MermaidConfig } from '@friendofsvelte/mermaid';

  const config: MermaidConfig = {
    theme: 'base',
    themeVariables: {
      primaryColor: '#fff1eb',
      primaryBorderColor: '#ff3e00'
    },
    flowchart: { curve: 'basis' }
  };
</script>

<Mermaid string={diagram} {config} />

%% examples

Every diagram type Mermaid knows.

Flowcharts, sequence diagrams, Gantt charts, ER schemas: each Svelte 5 Mermaid diagram below is rendered live by the component.

Full gallery →

Simple Decision Flow

Basic flowchart for decision-making processes

API Authentication Flow

Sequence diagram showing API authentication process

Database Schema

Entity relationship diagram for database design

Market Share Analysis

Pie chart showing market distribution across segments

%% recipes

Three things worth stealing.

Match your design system

Mermaid's 'base' theme plus themeVariables lets diagrams pick up your palette instead of the default purple. This page does exactly that.

const config: MermaidConfig = {
  theme: 'base',
  themeVariables: {
    primaryColor: '#fff1eb',
    primaryBorderColor: '#ff3e00',
    lineColor: '#16181d',
    fontFamily: 'IBM Plex Sans, sans-serif'
  }
};

Render the failure, not a blank box

The error snippet receives the parse error. Show it inline so a typo in diagram source never leaves an empty hole in your docs.

<Mermaid string={diagram}>
  {#snippet error(err)}
    <details class="diagram-error">
      <summary>Diagram failed to render</summary>
      <pre>{err.message}</pre>
    </details>
  {/snippet}
</Mermaid>

Keep diagrams inside their container

useMaxWidth is on by default for flowcharts. Set it per diagram type and wide charts scale down instead of overflowing on mobile.

const config: MermaidConfig = {
  flowchart: { useMaxWidth: true },
  sequence: { useMaxWidth: true },
  gantt: { useMaxWidth: true }
};

<Mermaid string={diagram} {config} />