Mermaid Diagrams

Mermaid diagrams are supported using the official Fumadocs approach with client-side rendering. This provides better theme integration and performance.

Usage

To add a Mermaid diagram, use the <Mermaid> component:

<Mermaid chart="
graph TD
    A[Start] --> B[Process]
    B --> C[End]
" />

Example Diagrams

Flowchart

Sequence Diagram

Architecture Diagram

Development Flow

Features

Theme Support

• Automatic Theme Detection: Diagrams automatically switch between light and dark themes
• Consistent Styling: Inherits font family and styling from your documentation theme

Performance

• Client-side Rendering: Diagrams render in the browser for fast loading
• Lazy Loading: Mermaid library loads only when needed
• No Build Dependencies: No server-side processing required

Diagram Types Supported

Mermaid supports many diagram types:

• Flowcharts - Process flows and decision trees
• Sequence Diagrams - Interaction between actors over time
• Class Diagrams - Object-oriented design
• State Diagrams - State machines
• Entity Relationship Diagrams - Database relationships
• User Journey - User experience flows
• Gantt Charts - Project timelines
• Pie Charts - Data visualization
• Git Graphs - Version control flows (use flowcharts for better compatibility)

Styling

You can style diagrams with CSS classes and themes directly in the chart definition:

Syntax Resources

• Mermaid Official Documentation
• Mermaid Live Editor
• Syntax Examples
• Fumadocs Mermaid Guide

Technical Implementation

This implementation uses:

• mermaid: Client-side diagram rendering
• next-themes: Theme integration for light/dark mode
• React Component: Custom <Mermaid> component for MDX integration
• Dynamic Imports: Lazy loading of the Mermaid library for performance