AgentSkillsCN

beautiful-mermaid

将 Mermaid 图表渲染为精美的 SVG 图形或 ASCII 艺术。当用户希望创建、可视化，或将 Mermaid 图表转换为专业级图形，或生成适合终端使用的 ASCII 输出时，可使用此技能。支持流程图、状态图、序列图、类图、ER 图等，内置 15 种以上主题风格。

SKILL.md
--- frontmatter
name: beautiful-mermaid
description: Render Mermaid diagrams as beautiful SVGs or ASCII art. Use when users want to create, visualize, or convert Mermaid diagrams to professional-looking graphics or terminal-friendly ASCII output. Supports flowcharts, state, sequence, class, ER diagrams with 15+ themes.
homepage: https://github.com/lukilabs/beautiful-mermaid
metadata: {"openclaw":{"emoji":"🧜","requires":{"bins":["node"]},"install":[{"id":"npm","kind":"npm","package":"beautiful-mermaid","bins":["node"],"label":"Auto-installs on first run"}]}}

Beautiful Mermaid

Render Mermaid diagrams to SVG or ASCII using beautiful-mermaid library.

Quick Start

bash
# SVG output (default: tokyo-night theme)
echo 'graph TD; A --> B' | node scripts/render.js

# ASCII output
echo 'graph TD; A --> B' | node scripts/render.js -f ascii

# List themes
node scripts/render.js --list-themes

Supported Diagrams

  • •Flowcharts (TD, LR, BT, RL)
  • •State diagrams
  • •Sequence diagrams
  • •Class diagrams
  • •ER diagrams

CLI Options

code
-f, --format <svg|ascii>  Output format (default: svg)
-t, --theme <name>        Theme name (default: tokyo-night)
--bg <color>              Background color (hex)
--fg <color>              Foreground color (hex)
--transparent             Transparent background
--list-themes             List available themes

Themes

Built-in: tokyo-night, dracula, catppuccin-mocha, nord, github-dark, solarized-dark, etc.

Notes

  • •Auto-installs beautiful-mermaid npm package on first run
  • •Zero DOM dependencies, works in any Node.js environment