@friendofsvelte/mermaid

A powerful, type-safe Mermaid.js component for Svelte 5 with SSR support, custom themes, and responsive design.

Features

  • โšก Lightning Fast - Dynamic imports and optimized rendering
  • ๐ŸŽจ Fully Customizable - Complete theme control and configuration
  • ๐Ÿ“ฑ Responsive Ready - Built-in responsive behavior
  • ๐Ÿ”’ Type Safe - Full TypeScript support with strict typing
  • ๐Ÿงช Test Friendly - E2E tested with Playwright
  • ๐Ÿš€ SSR Compatible - Works with SvelteKit SSR and static generation

Installation

npm install @friendofsvelte/mermaid

Quick Start

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

<Mermaid string={diagram} />

Advanced Usage

<script>
  import { Mermaid } from '@friendofsvelte/mermaid';
  import type { MermaidConfig } from '@friendofsvelte/mermaid';
  
  const config: MermaidConfig = {
    theme: 'dark',
    flowchart: {
      useMaxWidth: true,
      htmlLabels: true
    }
  };
  
  const diagram = `sequenceDiagram
    participant A as Alice
    participant B as Bob
    A->>B: Hello Bob!
    B-->>A: Hello Alice!`;
</script>

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

API Reference

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

Types

interface MermaidConfig {
  theme?: 'default' | 'dark' | 'forest' | 'neutral' | 'base';
  flowchart?: {
    useMaxWidth?: boolean;
    htmlLabels?: boolean;
    curve?: string;
  };
  sequence?: {
    useMaxWidth?: boolean;
    actorMargin?: number;
  };
  // ... and more
}

interface MermaidError {
  message: string;
  stack?: string;
}

Supported Diagram Types

  • Flowcharts - Process flows and decision trees
  • Sequence Diagrams - API interactions and workflows
  • Gantt Charts - Project timelines and scheduling
  • User Journey Maps - UX flows and customer experience
  • Entity Relationship Diagrams - Database schemas
  • Git Graphs - Version control workflows
  • Pie Charts - Data visualization
  • Class Diagrams - Object-oriented design

Examples

Custom Theme

<script>
  import { Mermaid } from '@friendofsvelte/mermaid';
  
  const customConfig = {
    theme: 'dark',
    flowchart: {
      useMaxWidth: true,
      htmlLabels: true,
      curve: 'basis'
    }
  };
</script>

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

Error Handling

<script>
  import { Mermaid } from '@friendofsvelte/mermaid';
  
  const invalidDiagram = `invalid syntax here`;
</script>

<Mermaid string={invalidDiagram}>
  {#snippet error(errorObj)}
    <div class="error-message">
      <p>Failed to render diagram: {errorObj.message}</p>
    </div>
  {/snippet}
</Mermaid>

Development

# Clone the repository
git clone https://github.com/friendofsvelte/mermaid.git
cd mermaid

# Install dependencies
npm install

# Start development server
npm run dev

# Run tests
npm run test

# Build library
npm run build

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add some amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

License

MIT ยฉ Friend of Svelte


Built with โค๏ธ for the Svelte community.

Top categories

Loading Svelte Themes