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)

bash

# 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)

bash

# 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)

bash

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