A powerful, type-safe Mermaid.js component for Svelte 5 with SSR support, custom themes, and responsive design.
npm install @friendofsvelte/mermaid
<script>
import { Mermaid } from '@friendofsvelte/mermaid';
const diagram = `graph TD
A[Start] --> B[Process]
B --> C[End]`;
</script>
<Mermaid string={diagram} />
<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} />
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 |
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;
}
<script>
import { Mermaid } from '@friendofsvelte/mermaid';
const customConfig = {
theme: 'dark',
flowchart: {
useMaxWidth: true,
htmlLabels: true,
curve: 'basis'
}
};
</script>
<Mermaid string={diagram} config={customConfig} />
<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>
# 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
Contributions are welcome! Please feel free to submit a Pull Request.
git checkout -b feature/amazing-feature
)git commit -m 'Add some amazing feature'
)git push origin feature/amazing-feature
)MIT ยฉ Friend of Svelte
Built with โค๏ธ for the Svelte community.