Tony Seets
Tony Seets Builder & Experimenter
All Artifacts
All Artifacts

Mermaid Diagram Gallery

Comprehensive test gallery for mermaid diagram rendering, frame options, and theming.

#mermaid#diagrams#testing

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)

Input Output

Elevated

Input Output

None

Input Output

Flowcharts#

Top-Down (TD)

Yes No Start Decision Action Skip End

Left-Right (LR)

Input Process Output Log

With Subgraphs

Client Server Browser React API Database

Sequence Diagrams#

Basic Sequence

Hello Bob! Hi Alice! How are you? Great, thanks! Alice Bob

With Notes

Request Query Result Response Validate input Client Server Database

Async Pattern

Submit form Add job Job ID Processing... Process Complete User API Queue Worker

State Diagrams#

Start/end nodes ([*]) should render as squares, not circles.

Simple State Machine

fetch resolve reject retry Idle Loading Success Error

Verify [*] nodes are squares.

Modal States

open() animation done close() animation done Closed Opening Open Closing

Verify [*] nodes are squares.

Class Diagrams#

Component Hierarchy

BaseComponent + render() + mount() + unmount() Button + string: label: + onClick() Input + string: value: + onChange()

ER Diagrams#

Database Schema

USER (no attributes) POST (no attributes) COMMENT (no attributes) TAG (no attributes) creates writes has tagged

XY Charts#

Bar + Line Combo

Jan Feb Mar Apr May Jun 0 20 40 60 80 100 120 Revenue ($K) Monthly Revenue Bar 1 Line 1

xychart-beta with overlaid bar and line series

Bar Chart

Mon Tue Wed Thu Fri Sat Sun 0 100 200 300 400 500 Downloads Weekly Downloads

Component Variants#

With Title & Caption

A B C
Data Flow Simple left-to-right flow showing data progression

No Copy Button

A B C

Alignment Options#

Left Aligned (align=“left”)

A B

Center Aligned (default)

A B

Right Aligned (align=“right”)

A B

Full Width (align=“full”)

A B C D

Code Fence Syntax#

Diagrams can also be written directly in MDX using code fences:

Start End

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)

disable enable Active Inactive

Start/end nodes should be squares, not circles.

Flowchart Copy Test

Yes No Start Decision Success Failure

Test copying Mermaid source and SVG.

Sequence Diagram Copy

Click Request Response Update User App API

Copy button should work on all diagram types.

Complex Examples#

Real-world diagrams demonstrating the system at scale.

CI/CD Pipeline#

Source Build Deploy main feature Yes No Pass Fail Git Push Branch? Build Image Run Tests Pass? Create Preview Notify Dev Push to Registry Deploy Staging Smoke Tests? Deploy Prod Rollback
CI/CD Pipeline Automated deployment workflow from commit to production

User Authentication Flow#

GET /login Login page POST /auth/google Redirect to OAuth Auth consent User approves Auth code Exchange for token Access token + user info Find or create user User record Set session cookie GET /dashboard Dashboard Browser Server Auth Provider Database
OAuth Authentication Google OAuth flow with session creation
Mermaid Diagram Gallery