Beautiful Diagrams for Svelte 5

A powerful, type-safe Mermaid.js component with SSR support, custom themes, and responsive design. Perfect for documentation, flowcharts, and system diagrams.

View Examples

Why Choose Mermaid Svelte?

Built specifically for modern Svelte applications with performance, developer experience, and flexibility in mind.

⚡

Lightning Fast

Dynamic imports and optimized rendering for minimal bundle impact and fast load times.

🎨

Fully Customizable

Complete theme control, custom CSS, and configuration options for any design system.

📱

Responsive Ready

Built-in responsive behavior with container queries and mobile-first design principles.

🔒

Type Safe

Full TypeScript support with strict typing and comprehensive type definitions.

🧪

Test Friendly

E2E tested with Playwright, easy to mock and test in your own applications.

🚀

SSR Compatible

Works seamlessly with SvelteKit SSR, static generation, and client-side rendering.

Diagram Examples

From simple flowcharts to complex system architectures - see what's possible.

Market Share Analysis

Pie chart showing market distribution across segments

Database Schema

Entity relationship diagram for database design

API Authentication Flow

Sequence diagram showing API authentication process

Simple Decision Flow

Basic flowchart for decision-making processes

View All Examples

Quick Installation

Get up and running in seconds with npm or your favorite package manager.

1. Install the Package

Terminal bash

npm install @friendofsvelte/mermaid

2. Basic Usage

App.svelte svelte

<script>
  import { Mermaid } from '@friendofsvelte/mermaid';
  
  const diagram = `graph TD
    A[Start] --> B[Process]
    B --> C[End]`;
</script>

<Mermaid string={diagram} />

3. Advanced Configuration

Advanced.svelte svelte

<script>
  import { Mermaid } from '@friendofsvelte/mermaid';
  import type { MermaidConfig } from '@friendofsvelte/mermaid';
  
  const config: MermaidConfig = {
    theme: 'dark',
    flowchart: {
      useMaxWidth: true,
      htmlLabels: true
    }
  };
  
  function handleError(error) {
    console.error('Diagram error:', error);
  }
</script>

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

API Reference

Complete TypeScript definitions and configuration options.

Component Props

Prop	Type	Required	Description
string	string	Yes	The Mermaid diagram definition string
config	MermaidConfig	No	Mermaid configuration options
error	Snippet<[MermaidError]>	No	Error display snippet

Pro Tips & Hacks

Advanced techniques and best practices from the Mermaid Svelte community.

Theme Customization

Use built-in themes for consistent styling

const customConfig: MermaidConfig = {
  theme: 'dark',
  flowchart: {
    useMaxWidth: true,
    htmlLabels: true,
    curve: 'basis'
  }
};

Error Handling

Implement robust error handling with user feedback

<Mermaid 
  string={diagramCode}
  error={(error) => {
    console.error('Diagram error:', error);
    showToast('Invalid diagram syntax');
  }}
/>

Responsive Design

Mermaid diagrams are responsive by default with useMaxWidth config

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

// The component automatically adapts to container size
<Mermaid string={diagram} config={responsiveConfig} />