mermaidClaude Skill

Mermaid Diagram Renderer

Render Mermaid diagrams using beautiful-mermaid library. Supports 5 diagram types with dual output modes.

Quick Start

Dependencies (beautiful-mermaid) auto-install on first run.

SVG Output (Default)

# From file
npx tsx scripts/render.ts diagram.mmd --output diagram.svg

# From stdin
echo "graph LR; A-->B-->C" | npx tsx scripts/render.ts --stdin --output flow.svg

ASCII Output (Terminal)

# ASCII art for terminal display
npx tsx scripts/render.ts diagram.mmd --ascii

# Pipe directly
echo "graph TD; Start-->End" | npx tsx scripts/render.ts --stdin --ascii

Output example:

┌───────┐     ┌─────┐
│ Start │────▶│ End │
└───────┘     └─────┘

Supported Diagrams

Type	Syntax	Best For
Flowchart	graph TD/LR	Processes, decisions
Sequence	sequenceDiagram	API calls, interactions
State	stateDiagram-v2	State machines
Class	classDiagram	OOP design
ER	erDiagram	Database schemas

Theming (SVG only)

npx tsx scripts/render.ts diagram.mmd --theme github-dark --output out.svg

Use invalid theme name to see available themes list (e.g., --theme ?)

Resources

• scripts/render.ts - Main rendering script
• references/syntax.md - Mermaid syntax quick reference