beautiful-mermaid

Beautiful Mermaid 是一个用于渲染 Mermaid 图表的工具，可将图表输出为 ASCII/Unicode 终端艺术或 SVG 文件。它适合在终端中直接查看流程图、状态机、时序图、类图等，也适合生成 SVG 用于文档或网页。

用途

在终端或对话中可视化架构图、数据流、状态机、时序图、类图、ER 图等。
导出 SVG 文件，用于 README、文档或需要嵌入图表的页面。
与其他技能集成，生成与特定视觉风格匹配的主题化图表。

主要能力

支持多种图表类型：流程图（graph TD/LR/BT/RL 或 flowchart TD/LR/BT/RL）、状态图（stateDiagram-v2）、时序图（sequenceDiagram）、类图（classDiagram）、ER 图（erDiagram）。
输出格式：ASCII（默认）或 SVG。
ASCII 输出默认使用 Unicode 制表符，也可通过 --ascii 使用纯 ASCII 以兼容更多环境。
SVG 输出支持主题（默认 zinc-dark）或自定义颜色（通过 --colors 传入 JSON），并支持透明背景（--transparent）。
内置 17 种主题，包括深色主题（zinc-dark、tokyo-night、tokyo-night-storm、catppuccin-mocha、nord、dracula、github-dark、solarized-dark、one-dark、blueprint-dark*）和浅色主题（zinc-light、tokyo-night-light、catppuccin-latte、nord-light、github-light、solarized-light、vellum*）。带 * 的为本地主题扩展，定义在 CLI 包装器中，不在上游包内。
可通过 --themes 列出所有可用主题。

使用方式

基本命令：

node ~/.claude/skills/beautiful-mermaid/scripts/mermaid.mjs [options] [input]

输入来源：

内联：mermaid.mjs "graph TD; A-->B"
文件：mermaid.mjs diagram.mmd
标准输入：echo "graph LR; A-->B" | mermaid.mjs -

常用选项：

-f, --format TYPE：输出格式，ascii（默认）或 svg。
-t, --theme NAME：SVG 输出的主题，默认 zinc-dark。
--colors JSON：自定义颜色，JSON 格式为 {"bg":"#hex","fg":"#hex","accent":"#hex","line":"#hex","muted":"#hex"}，与 --theme 互斥。
--transparent：SVG 透明背景，便于内联到主题化页面。
-o, --output FILE：写入文件而非标准输出。
--ascii：使用纯 ASCII 而非 Unicode 制表符。
--themes：列出可用主题。
-h, --help：显示帮助。

示例：

ASCII 输出（终端）：

node ~/.claude/skills/beautiful-mermaid/scripts/mermaid.mjs "graph TD; Start-->Process-->End"

纯 ASCII：

node ~/.claude/skills/beautiful-mermaid/scripts/mermaid.mjs --ascii "graph LR; A-->B"

SVG 输出（文件）：

node ~/.claude/skills/beautiful-mermaid/scripts/mermaid.mjs -f svg -t tokyo-night "graph TD; A-->B" -o diagram.svg

时序图：

node ~/.claude/skills/beautiful-mermaid/scripts/mermaid.mjs -f svg -t catppuccin-mocha "sequenceDiagram Alice->>Bob: Hello Bob-->>Alice: Hi!" -o sequence.svg

适用场景

架构图：在对话中直接可视化系统组件。
数据流：展示数据在系统中的流动。
状态机：记录应用状态与转换。
时序图：说明 API 交互与消息流。
类图：记录对象关系。
ER 图：数据库模式可视化。
文档：导出 SVG 用于 README 和文档。

跨技能集成

其他技能可调用 beautiful-mermaid 生成与其视觉标识匹配的主题化图表。标准模式：

命名主题：

node ~/.claude/skills/beautiful-mermaid/scripts/mermaid.mjs
-f svg -t vellum --transparent -o diagram.svg "graph TD; A-->B-->C"

自定义颜色（用于项目特定调色板）：

node ~/.claude/skills/beautiful-mermaid/scripts/mermaid.mjs
-f svg --colors '{"bg":"#1a1b26","fg":"#a9b1d6","accent":"#7aa2f7"}'
-o diagram.svg "graph TD; A-->B-->C"

用于 Markdown 输出的 ASCII（规划、设计简报）：

printf 'graph TD\n A --> B --> C' |
node ~/.claude/skills/beautiful-mermaid/scripts/mermaid.mjs -

消费技能的主题映射：

vellum-editorial：主题 vellum，奶油/墨/铜色；内联 SVG 时使用 --transparent。
深色幻灯片：主题 blueprint-dark，海军蓝底青色，用于技术演示。
minoan-frontend-design：使用 --colors，从项目的 DESIGN.md 令牌中提取十六进制颜色。
design-md：主题 github-light，中性浅色主题，用于令牌文档。
shape：ASCII 模式，将决策流追加到 .design-context.md。

限制

资料未提供关于收费、价格、平台支持范围、性能或效果的具体说明。

技能介绍

用途

主要能力

使用方式

适用场景

跨技能集成

限制