Beautiful Mermaid Skill

概述

Beautiful Mermaid 是一个高性能的 Mermaid 图表渲染库，专为 AI 时代设计。它将 Mermaid 语法转换为美观的 SVG 图形、PNG 位图或 ASCII 艺术字，支持同步渲染、全主题定制、CSS级样式定制，零 DOM 依赖。

核心能力

1. 支持的图表类型

• 流程图 (Flowchart)：graph TD、graph LR、graph BT、graph RL 等方向
• 序列图 (Sequence Diagram)：参与者之间的交互
• 状态图 (State Diagram)：状态转换
• 类图 (Class Diagram)：面向对象设计
• 实体关系图 (ER Diagram)：数据库设计
• XY 图表：条形图、折线图、组合图（xychart-beta 语法）

2. 输出格式

• SVG：适用于富 UI 界面，支持透明背景和内联样式
• PNG：适用于文档嵌入、高清位图输出，支持自定义尺寸和 DPI
• ASCII/Unicode：适用于终端环境，支持颜色输出

3. 主题系统

• 15 内置主题：tokyo-night、dracula、github-dark、nord 等（9 暗色 + 6 亮色）
• 完整 7 字段：每个主题包含 bg、fg、line、accent、muted、surface、border 全部字段
• Mono 模式：仅需提供背景色(bg)和前景色(fg)，自动推导整套配色
• 自定义主题：可覆盖任意元素颜色
• Shiki 集成：通过 fromShikiTheme() 直接使用 VS Code 编辑器主题

主题完整对照表

主题字段说明

推荐主题 × 预设搭配

tokyo-night   + glass     → 代码架构图的最佳组合（深蓝毛玻璃）
dracula       + gradient  → 视觉展示最强（紫色渐变阴影）
github-light  + default   → 文档嵌入首选（简洁中性）
catppuccin-mocha + glass  → 产品 Deck 展示（柔和紫色调）
nord          + modern    → 技术报告暗色版（冰蓝现代感）
one-dark      + gradient  → 紫色调视觉最强（彩色阴影）
orange-dark   + glass     → 暖色系深色主题（橙色毛玻璃）
orange-light  + modern    → 暖色系浅色主题（橙色现代感）