mermaid
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.
Resources
2Install
npx skillscat add iofficeai/aionui/mermaid Install via the SkillsCat registry.
SKILL.md
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.svgASCII 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 --asciiOutput 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.svgUse invalid theme name to see available themes list (e.g., --theme ?)
Resources
scripts/render.ts- Main rendering scriptreferences/syntax.md- Mermaid syntax quick reference
Install
npx skillscat add iofficeai/aionui/mermaid Install via the SkillsCat registry.