| 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)
npx tsx scripts/render.ts diagram.mmd --output diagram.svg
echo "graph LR; A-->B-->C" | npx tsx scripts/render.ts --stdin --output flow.svg
ASCII Output (Terminal)
npx tsx scripts/render.ts diagram.mmd --ascii
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 scriptreferences/syntax.md - Mermaid syntax quick reference
