mermaid
27
总安装量
3
周安装量
#13903
全站排名
安装命令
npx skills add https://github.com/iofficeai/aionui --skill mermaid
Agent 安装分布
claude-code
3
amp
2
opencode
2
kimi-cli
2
github-copilot
2
Skill 文档
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 scriptreferences/syntax.md– Mermaid syntax quick reference