mermaid

name	mermaid
description	Render Mermaid diagrams as SVG or ASCII art using beautiful-mermaid. Use when users need to create flowcharts, sequence diagrams, state diagrams, class diagrams, or ER diagrams. Supports both graphical SVG output and terminal-friendly ASCII/Unicode output.

⚠️ Platform note — read before running any command. The shell snippets in this skill are written for macOS / Linux (bash/zsh). Always check which OS you are on first. On Windows do not run them verbatim — the underlying tool/CLI commands are usually cross-platform, but the surrounding shell syntax is not. Translate it to PowerShell before running:

bash (macOS / Linux)	PowerShell (Windows)
a && b	run as two steps, or a; if ($?) { b }
cat <<'EOF' | tool … (heredoc)	write the text to a temp file, then pipe/pass that file to the tool
VAR=$(cmd) … $VAR	$VAR = cmd … $VAR
cmd > /dev/null	cmd > $null
… | grep PAT	… | Select-String PAT
… | jq …	… | ConvertFrom-Json, then read the fields
python3 x.py	python x.py (or py x.py)
~/dir, /tmp	$env:USERPROFILE\dir, $env:TEMP
cp / mkdir -p / rm -rf	Copy-Item / New-Item -ItemType Directory -Force / Remove-Item -Recurse -Force

If a command has no obvious Windows equivalent, prefer the built-in file/HTTP tools over raw shell.

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