Mermaid Diagram Gallery
Comprehensive test gallery for mermaid diagram rendering, frame options, and theming.
A comprehensive test page for mermaid diagrams. Toggle dark mode to see theming in action. Use the copy button (top-right of each diagram) to export as Mermaid code, SVG, or PNG.
Frame Options
Three frame styles available. Elevated adds an inner border for a mat effect.
Simple (default)
Elevated
None
Flowcharts
Top-Down (TD)
Left-Right (LR)
With Subgraphs
Sequence Diagrams
Basic Sequence
With Notes
Async Pattern
State Diagrams
Start/end nodes ([*]) should render as squares, not circles.
Simple State Machine
Verify [*] nodes are squares.
Modal States
Verify [*] nodes are squares.
Class Diagrams
Component Hierarchy
ER Diagrams
Database Schema
Component Variants
With Title & Caption
No Copy Button
Alignment Options
Left Aligned (align=“left”)
Center Aligned (default)
Right Aligned (align=“right”)
Full Width (align=“full”)
Code Fence Syntax
Diagrams can also be written directly in MDX using code fences:
The rehype-mermaid plugin transforms them at build time.
Copy Button Test
Each diagram should have a copy button in the top-right corner (visible on hover). Test all copy options work.
State Diagram (Squares)
Start/end nodes should be squares, not circles.
Flowchart Copy Test
Test copying Mermaid source and SVG.
Sequence Diagram Copy
Copy button should work on all diagram types.
Complex Examples
Real-world diagrams demonstrating the system at scale.