mermaid diagrams

This site supports Mermaid diagrams for creating flowcharts, sequence diagrams, and other visualizations directly in your content.

Using Mermaid in MDX

You can use Mermaid diagrams in two ways:

Method 1: Markdown Code Blocks

Use standard markdown code blocks with the mermaid language identifier:

Method 2: Component with Title and Description

Examples

Flowchart

Sequence Diagram

Class Diagram

State Diagram

Entity Relationship Diagram

Gantt Chart

Pie Chart

Git Graph

Adding Links to Nodes

While Mermaid supports a click syntax for adding links, it can be unreliable with this site’s configuration, causing rendering issues. The recommended and most stable method is to embed raw HTML <a> tags directly within the node labels.

Features

The Mermaid integration includes:

• Theme Support: Diagrams automatically adapt to light/dark mode
• Copy Code: Copy the Mermaid code to clipboard
• Export SVG: Download diagrams as SVG files
• Export PNG: Download diagrams as PNG images
• Fullscreen View: View complex diagrams in fullscreen mode
• Error Handling: Graceful fallback for invalid diagrams

Tips

1. Keep diagrams simple: Complex diagrams can be hard to read on mobile devices
2. Use descriptive labels: Clear labels make diagrams more understandable
3. Test rendering: Preview your diagrams to ensure they render correctly
4. Consider accessibility: Add descriptions for screen readers when possible

Resources

• Mermaid Documentation
• Mermaid Live Editor
• Mermaid Syntax