beautiful-mermaid

---
name: beautiful-mermaid
version: 1.0.0
description: "Render Mermaid diagrams as beautiful SVG, PNG, or ASCII art. Supports 6 chart types (flowchart, sequence, state, class, ER, XY chart), 16 built-in themes, 5 style presets, CSS-level customization, interactive preview, and batch rendering. Works in terminal, chat, or web environments."
description_zh: "Mermaid 图表美化渲染工具，支持流程图/序列图/状态图/类图/ER图/XY图表6种类型，16主题5预设，可导出SVG/PNG/ASCII"
description_en: "Beautiful Mermaid diagram renderer (SVG/PNG/ASCII, 16 themes, 5 presets, interactive preview)"
homepage: https://github.com/chouraycn/beautiful-mermaid
icon: beautiful-mermaid.png
---

# Beautiful Mermaid Skill

## 概述

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

| 说明 | 地址 |
|------|------|
| 本 Skill | [https://github.com/chouraycn/beautiful-mermaid](https://github.com/chouraycn/beautiful-mermaid) |
| 上游项目 | [https://github.com/lukilabs/beautiful-mermaid](https://github.com/lukilabs/beautiful-mermaid) |

## 核心能力

### 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 编辑器主题

#### 主题完整对照表

| 主题名 | 类型 | 背景色 | 强调色(accent) | 推荐预设 | 适用场景 |
|--------|------|--------|--------------|---------|---------|
| `zinc-light` | 亮色 | `#FFFFFF` | `#3F3F46` | outline | 极简文档 |
| `zinc-dark` | 暗色 | `#18181B` | `#A1A1AA` | glass | 极简暗场景 |
| `tokyo-night` | 暗色 | `#1a1b26` | `#7