名称： beautiful-mermaid
描述： |
将 Mermaid 图表渲染为精美的 SVG 或 ASCII 艺术图。当用户发送 Mermaid 代码块 (```mermaid ... ```) 并希望将其可视化时使用。
支持：流程图、状态图、序列图、类图、ER 图。
特性：超快（100+ 个图表 <500ms），零 DOM 依赖，15 个内置主题，兼容 Shiki 主题。
完美适用于：Telegram 消息、终端输出、Web 界面、CLI 工具。

Beautiful Mermaid

将 Mermaid 图表渲染为精美的 SVG 或 ASCII 艺术图。超快速度，完全可主题化，零 DOM 依赖。专为 AI 时代打造。

何时使用

在以下情况使用此技能：
- 用户发送 Mermaid 代码块 (```mermaid ... ```)
- 用户要求“渲染”或“可视化”图表
- 用户需要图表的终端/ASCII 输出
- 用户需要主题化的图表（15 个内置主题）
- 用户需要用于丰富 UI 的 SVG 输出

安装

npm install beautiful-mermaid
# 或
bun add beautiful-mermaid
# 或
pnpm add beautiful-mermaid

快速开始

SVG 输出（默认）

import { renderMermaid } from 'beautiful-mermaid'

const svg = await renderMermaid(`
  graph TD
    A[开始] --> B{决策}
    B -->|是| C[操作]
    B -->|否| D[结束]
`)

ASCII 输出（终端）

import { renderMermaidAscii } from 'beautiful-mermaid'

const ascii = renderMermaidAscii(`graph LR; A --> B --> C`)

输出：

┌───┐     ┌───┐     ┌───┐
│   │     │   │     │   │
│ A │────►│ B │────►│ C │
│   │     │   │     │   │
└───┘     └───┘     └───┘

支持的图表类型

流程图示例

```mermaid
graph TD
A[开始] --> B{决策}
B -->|是| C[操作]
B -->|否| D[结束]
C --> D
```

序列图示例

```mermaid
sequenceDiagram
Alice->>Bob: 你好 Bob！
Bob-->>Alice: 你好 Alice！
```

主题系统

内置主题（15 个）

import { renderMermaid, THEMES } from 'beautiful-mermaid'

// 使用内置主题
const svg = await renderMermaid(diagram, THEMES['tokyo-night'])

// 可用主题：
THEMES['zinc-light']
THEMES['zinc-dark']
THEMES['tokyo-night']
THEMES['tokyo-night-storm']
THEMES['tokyo-night-light']
THEMES['catppuccin-mocha']
THEMES['catppuccin-latte']
THEMES['nord']
THEMES['nord-light']
THEMES['dracula']
THEMES['github-light']
THEMES['github-dark']
THEMES['solarized-light']
THEMES['solarized-dark']
THEMES['one-dark']

自定义主题（单色模式）

// 仅需两种颜色 - 系统自动推导其余部分
const svg = await renderMermaid(diagram, {
  bg: '#1a1b26',  // 背景色
  fg: '#a9b1d6',  // 前景色
})

增强主题

const svg = await renderMermaid(diagram, {
  bg: '#1a1b26',
  fg: '#a9b1d6',
  line: '#3d59a1',    // 边线颜色
  accent: '#7aa2f7',  // 箭头头部颜色
  muted: '#565f89',   // 次要文本颜色
  surface: '#292e42', // 节点填充色
  border: '#3d59a1',  // 节点边框色
})

Shiki 主题兼容性

import { renderMermaid, fromShikiTheme } from 'beautiful-mermaid'
import { getHighlighter } from 'shiki'

const highlighter = await getHighlighter({ theme: 'vitesse-dark' })
const colors = fromShikiTheme(highlighter.getTheme('vitesse-dark'))
const svg = await renderMermaid(diagram, colors)

ASCII/Unicode 输出

适用于终端环境：

import { renderMermaidAscii } from 'beautiful-mermaid'

// Unicode（更美观，默认）
const unicode = renderMermaidAscii(`graph LR; A --> B`)

// 纯 ASCII（最大兼容性）
const ascii = renderMermaidAscii(`graph LR; A --> B`, { useAscii: true })

// 自定义间距
renderMermaidAscii(diagram, {
  useAscii: false,
  paddingX: 5,          // 水平间距
  paddingY: 5,          // 垂直间距
  boxBorderPadding: 1,  // 内边距
})

API 参考

renderMermaid(text, options?): Promise

将 Mermaid 渲染为 SVG。

选项：

renderMermaidAscii(text, options?): string

将 Mermaid 渲染为 ASCII/Unicode。同步函数。

选项：

THEMES: Record

所有 15 个内置主题。

fromShikiTheme(theme): DiagramColors

从 Shiki 主题中提取图表颜色。

在 OpenClaw 中的使用

Telegram 集成

对于 Telegram，渲染为 SVG 并作为照片发送：

import { renderMermaid } from 'beautiful-mermaid'

async function sendMermaid(message: string) {
  const blocks = extractMermaidBlocks(message)

  for (const block of blocks) {
    const svg = await renderMermaid(block.code, THEMES['tokyo-night'])
    // 将 SVG 作为照片发送到 Telegram
  }
}

终端/CLI 输出

import { renderMermaidAscii } from 'beautiful-mermaid'

function printDiagram(code: string) {
  const ascii = renderMermaidAscii(code)
  console.log(ascii)
}

性能

• 100+ 个图表 渲染时间低于 500ms
• 零 DOM 依赖 - 纯 TypeScript 实现
• 超快速度 - 无需浏览器/Puppeteer

与替代方案的比较

示例工作流

输入：

这是系统架构：

\`\`\`mermaid
graph TD
  User --> LB[负载均衡器]
  LB --> API[API 服务器]
  API --> DB[(数据库)]
  API --> Cache
\`\`\`

以及流程：

\`\`\`mermaid
sequenceDiagram
  participant U as 用户
  participant A as API
  U->>A: 请求
  A-->>U: 响应
\`\`\`

操作： 使用合适的主题渲染两个图表。

输出： 发送两个带标题的 SVG 图像。

资源

• npm: https://www.npmjs.com/package/beautiful-mermaid
• GitHub: https://github.com/lukilabs/beautiful-mermaid
• 在线演示: https://agents.craft.do/mermaid