AgentSkillsCN

beautiful-mermaid-renderer

利用beautiful-mermaid将Mermaid图表渲染为Unicode/ASCII（适用于终端或聊天界面）或SVG（适用于丰富UI）。无论是在纯文本中快速生成美观的图表预览，还是希望从Mermaid源代码中一键生成SVG图像（推荐使用Bun），此工具都能轻松胜任。

SKILL.md
--- frontmatter
name: beautiful-mermaid-renderer
description: Render Mermaid diagrams using beautiful-mermaid as Unicode/ASCII (terminal/chat) or SVG (rich UI). Use when you need a quick, good-looking diagram preview in plain text or want to generate an SVG from Mermaid source (Bun preferred).

Beautiful Mermaid Renderer

Overview

Render Mermaid source into Unicode/ASCII box-drawing diagrams for terminal/chat output, or into SVG for embedding in docs/UIs.

Quick start (Bun)

  1. •Install dependencies (one-time per machine):

cd ~/.codex/skills/beautiful-mermaid-renderer && bun install

  1. •Render Unicode (default) to stdout:

cat diagram.mmd | ./scripts/render.sh --format unicode

  1. •Render ASCII (maximum compatibility):

cat diagram.mmd | ./scripts/render.sh --format ascii

  1. •Render SVG to a file:

cat diagram.mmd | ./scripts/render.sh --format svg --out diagram.svg

Workflow

  1. •Draft or collect Mermaid source
  • •Prefer small diagrams that fit in a chat/terminal viewport.
  • •When replying, include the Mermaid source in a fenced mermaid block when it helps the user edit or reuse it.
  1. •Render for user viewing (default)
  • •Prefer --format unicode and paste the output in a fenced code block.
  • •If box-drawing characters display poorly, rerender with --format ascii.
  1. •Render SVG when needed
  • •Use --format svg and write to a file (--out).
  • •Optionally apply a built-in theme (--theme) or custom colors (--bg / --fg).

CLI reference (scripts/render.sh)

  • •--format <unicode|ascii|svg> (default: unicode)
  • •--in <file> (optional; otherwise read from stdin)
  • •--out <file> (optional; otherwise write to stdout)
  • •--theme <name> (SVG only) and --list-themes
  • •--bg <color> / --fg <color> (SVG only; overrides theme)
  • •--transparent (SVG only)
  • •--paddingX <n> / --paddingY <n> / --boxBorderPadding <n> (text only)