About mermaid
A skill for rendering Mermaid diagrams with beautiful-mermaid, for users who need image or terminal-text output. It supports five diagram types and both SVG and ASCII output.
Key features
- 01Render five Mermaid diagram types
- 02Output SVG or ASCII
- 03Theme SVG output
- 04Read files or standard input
Use cases
- 01Export a flowchart as SVG
- 02View diagrams as terminal text
- 03Draw API interaction sequences
- 04Show database entity relationships
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/mermaidin Claude Code to confirm it loaded.
Bundled filesreferences/syntax.mdscripts/render.ts
Details
From the project READMEMermaid 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 scriptreferences/syntax.md- Mermaid syntax quick reference
Comments
Markdown supported